diff --git a/models/doctype/JournalEntry/JournalEntry.js b/models/doctype/JournalEntry/JournalEntry.js
index 9d34c07c..5b969b2e 100644
--- a/models/doctype/JournalEntry/JournalEntry.js
+++ b/models/doctype/JournalEntry/JournalEntry.js
@@ -16,8 +16,8 @@ module.exports = {
       fieldname: 'entryType',
       label: 'Entry Type',
       fieldtype: 'Select',
+      placeholder: 'Entry Type',
       options: [
-        'Select...',
         'Journal Entry',
         'Bank Entry',
         'Cash Entry',
@@ -57,7 +57,8 @@ module.exports = {
     {
       fieldname: 'userRemark',
       label: 'User Remark',
-      fieldtype: 'Text'
+      fieldtype: 'Text',
+      placeholder: 'User Remark'
     }
   ],
   layout: [
diff --git a/models/doctype/JournalEntry/JournalEntryServer.js b/models/doctype/JournalEntry/JournalEntryServer.js
index 545f8a56..62bd28da 100644
--- a/models/doctype/JournalEntry/JournalEntryServer.js
+++ b/models/doctype/JournalEntry/JournalEntryServer.js
@@ -3,25 +3,25 @@ const BaseDocument = require('frappejs/model/document');
 const LedgerPosting = require('../../../accounting/ledgerPosting');
 
 module.exports = class JournalEntryServer extends BaseDocument {
-    getPosting() {
-        let entries = new LedgerPosting({reference: this });
+  getPosting() {
+    let entries = new LedgerPosting({ reference: this });
 
-        for (let row of this.accounts) {
-            if (row.debit) {
-                entries.debit(row.account, row.debit);
-            } else if (row.credit) {
-                entries.credit(row.account, row.credit);
-            }
-        }
-
-        return entries;
+    for (let row of this.accounts) {
+      if (row.debit) {
+        entries.debit(row.account, row.debit);
+      } else if (row.credit) {
+        entries.credit(row.account, row.credit);
+      }
     }
 
-    async afterSubmit() {
-        await this.getPosting().post();
-    }
+    return entries;
+  }
 
-    async afterRevert() {
-        await this.getPosting().postReverse();
-    }
-}
+  async afterSubmit() {
+    await this.getPosting().post();
+  }
+
+  async afterRevert() {
+    await this.getPosting().postReverse();
+  }
+};
diff --git a/models/doctype/JournalEntryAccount/JournalEntryAccount.js b/models/doctype/JournalEntryAccount/JournalEntryAccount.js
index 4b0d1b30..cb72e541 100644
--- a/models/doctype/JournalEntryAccount/JournalEntryAccount.js
+++ b/models/doctype/JournalEntryAccount/JournalEntryAccount.js
@@ -30,5 +30,6 @@ module.exports = {
       label: 'Credit',
       fieldtype: 'Currency'
     }
-  ]
+  ],
+  tableFields: ['account', 'debit', 'credit']
 };
diff --git a/src/pages/JournalEntryForm.vue b/src/pages/JournalEntryForm.vue
new file mode 100644
index 00000000..9793069a
--- /dev/null
+++ b/src/pages/JournalEntryForm.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="flex flex-col">
+    <PageHeader>
+      <a
+        class="cursor-pointer font-semibold"
+        slot="title"
+        @click="$router.go(-1)"
+        >{{ _('Back') }}</a
+      >
+      <template slot="actions">
+        <Button
+          v-if="doc._notInserted || doc._dirty"
+          type="primary"
+          class="text-white text-xs ml-2"
+          @click="onSaveClick"
+          >{{ _('Save') }}</Button
+        >
+        <Button
+          v-if="!doc._dirty && !doc._notInserted && !doc.submitted"
+          type="primary"
+          class="text-white text-xs ml-2"
+          @click="onSubmitClick"
+          >{{ _('Submit') }}</Button
+        >
+      </template>
+    </PageHeader>
+    <div
+      class="flex justify-center flex-1 mb-8 mt-6"
+      v-if="meta"
+      :class="doc.submitted && 'pointer-events-none'"
+    >
+      <div
+        class="border rounded-lg shadow h-full flex flex-col justify-between"
+        style="width: 600px"
+      >
+        <div>
+          <div class="mt-8 px-6">
+            <h1 class="text-2xl font-semibold">
+              {{ doc._notInserted ? _('New Journal Entry') : doc.name }}
+            </h1>
+            <div class="flex justify-between mt-2">
+              <div class="w-1/3">
+                <FormControl
+                  :df="meta.getField('entryType')"
+                  :value="doc.entryType"
+                  placeholder="Entry Type"
+                  @change="value => doc.set('entryType', value)"
+                  input-class="bg-gray-100 rounded-lg px-3 py-2 text-base"
+                  :show-label="true"
+                />
+                <FormControl
+                  class="mt-2"
+                  :df="meta.getField('date')"
+                  :value="doc.date"
+                  :placeholder="'Date'"
+                  @change="value => doc.set('date', value)"
+                  input-class="bg-gray-100 rounded-lg px-3 py-2 text-base"
+                  :show-label="true"
+                />
+              </div>
+              <div class="w-1/3">
+                <FormControl
+                  :df="meta.getField('referenceNumber')"
+                  :value="doc.referenceNumber"
+                  :placeholder="'Reference Number'"
+                  @change="value => doc.set('referenceNumber', value)"
+                  input-class="bg-gray-100 rounded-lg p-2 text-base"
+                  :show-label="true"
+                />
+                <FormControl
+                  class="mt-2"
+                  :df="meta.getField('referenceDate')"
+                  :value="doc.date"
+                  :placeholder="'Reference Date'"
+                  @change="value => doc.set('referenceDate', value)"
+                  input-class="bg-gray-100 rounded-lg px-3 py-2 text-base"
+                  :show-label="true"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="mt-2 px-6 text-base">
+            <FormControl
+              :df="meta.getField('accounts')"
+              :value="doc.accounts"
+              :showHeader="true"
+              @change="value => doc.set('accounts', value)"
+              :read-only="doc.submitted"
+            />
+          </div>
+        </div>
+        <div class="px-6 mb-6">
+          <div
+            class="grid items-center border-t pt-3 pr-2"
+            style="grid-template-columns: 1.3fr 1fr 1fr"
+          >
+            <div class="text-sm">
+              <FormControl
+                :df="meta.getField('userRemark')"
+                :value="doc.userRemark"
+                @change="value => doc.set('userRemark', value)"
+              />
+            </div>
+            <div class="text-right font-semibold text-green-700 px-3">
+              {{ totalDebit }}
+            </div>
+            <div class="text-right font-semibold text-red-700 px-3">
+              {{ totalCredit }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import PageHeader from '@/components/PageHeader';
+import Button from '@/components/Button';
+import FormControl from '@/components/Controls/FormControl';
+import Row from '@/components/Row';
+import Dropdown from '@/components/Dropdown';
+
+export default {
+  name: 'JournalEntryForm',
+  props: ['name'],
+  components: {
+    PageHeader,
+    Button,
+    FormControl,
+    Row,
+    Dropdown
+  },
+  provide() {
+    return {
+      doctype: 'JournalEntry',
+      name: this.name
+    };
+  },
+  data() {
+    return {
+      doctype: 'JournalEntry',
+      meta: null,
+      itemsMeta: null,
+      doc: {},
+      partyDoc: null,
+      printSettings: null
+    };
+  },
+  computed: {
+    totalDebit() {
+      let value = 0;
+      if (this.doc.accounts) {
+        value = this.doc.getSum('accounts', 'debit');
+      }
+      return frappe.format(value, 'Currency');
+    },
+    totalCredit() {
+      let value = 0;
+      if (this.doc.accounts) {
+        value = this.doc.getSum('accounts', 'credit');
+      }
+      return frappe.format(value, 'Currency');
+    }
+  },
+  async mounted() {
+    this.meta = frappe.getMeta(this.doctype);
+    this.doc = await frappe.getDoc(this.doctype, this.name);
+  },
+  methods: {
+    async addNewItem() {
+      this.doc.append('items');
+    },
+    async onSaveClick() {
+      // await this.doc.set(
+      //   'items',
+      //   this.doc.items.filter(row => row.item)
+      // );
+      return this.doc.insertOrUpdate();
+    },
+    async onSubmitClick() {
+      await this.doc.submit();
+    },
+    async makePayment() {
+      let payment = await frappe.getNewDoc('Payment');
+      payment.once('afterInsert', () => {
+        payment.submit();
+      });
+      this.$router.push({
+        query: {
+          edit: 1,
+          doctype: 'Payment',
+          name: payment.name,
+          hideFields: ['party', 'date', 'account', 'paymentType', 'for'],
+          values: {
+            party: this.doc[this.partyField.fieldname],
+            account: this.doc.account,
+            date: new Date().toISOString().slice(0, 10),
+            paymentType: this.doctype === 'SalesInvoice' ? 'Receive' : 'Pay',
+            for: [
+              {
+                referenceType: this.doctype,
+                referenceName: this.doc.name,
+                amount: this.doc.outstandingAmount
+              }
+            ]
+          }
+        }
+      });
+    },
+    async fetchPartyDoc() {
+      this.partyDoc = await frappe.getDoc(
+        'Party',
+        this.doc[this.partyField.fieldname]
+      );
+    }
+  }
+};
+</script>
diff --git a/src/router.js b/src/router.js
index 8003b836..2083af6c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -15,6 +15,7 @@ import ReportList from '@/pages/ReportList';
 import ChartOfAccounts from '@/pages/ChartOfAccounts';
 
 import InvoiceForm from '@/pages/InvoiceForm';
+import JournalEntryForm from '@/pages/JournalEntryForm';
 
 import Tree from 'frappejs/ui/components/Tree';
 
@@ -25,6 +26,18 @@ const routes = [
     path: '/',
     component: Dashboard
   },
+  {
+    path: '/edit/JournalEntry/:name',
+    name: 'JournalEntryForm',
+    components: {
+      default: JournalEntryForm,
+      edit: QuickEditForm
+    },
+    props: {
+      default: true,
+      edit: route => route.query
+    }
+  },
   {
     path: '/edit/:doctype/:name',
     name: 'InvoiceForm',
@@ -78,11 +91,6 @@ const routes = [
     name: 'Data Import',
     component: DataImport
   },
-  // {
-  //   path: '/settings',
-  //   name: 'Settings',
-  //   component: Settings
-  // },
   {
     path: '/reportList',
     name: 'Report',
@@ -111,7 +119,7 @@ const routes = [
 let router = new Router({ routes });
 
 if (process.env.NODE_ENV === 'development') {
-  window.router = router
+  window.router = router;
 }
 
 export default router;