diff --git a/reports/BalanceSheet/viewConfig.js b/reports/BalanceSheet/viewConfig.js
index 82b7792f..2c01b7d5 100644
--- a/reports/BalanceSheet/viewConfig.js
+++ b/reports/BalanceSheet/viewConfig.js
@@ -1,3 +1,5 @@
+const frappe = require('frappejs');
+
 module.exports = {
   title: 'Balance Sheet',
   method: 'balance-sheet',
@@ -8,7 +10,10 @@ module.exports = {
       size: 'small',
       placeholder: 'ToDate',
       label: 'To Date',
-      required: 1
+      required: 1,
+      default: async () => {
+        return (await frappe.getSingle('AccountingSettings')).fiscalYearEnd;
+      }
     },
     {
       fieldtype: 'Select',
diff --git a/reports/GeneralLedger/GeneralLedger.js b/reports/GeneralLedger/GeneralLedger.js
index 9531ec3c..874f463c 100644
--- a/reports/GeneralLedger/GeneralLedger.js
+++ b/reports/GeneralLedger/GeneralLedger.js
@@ -2,8 +2,6 @@ const frappe = require('frappejs');
 
 class GeneralLedger {
   async run(params) {
-    if (!Object.keys(params).length) return [];
-
     const filters = {};
     if (params.account) filters.account = params.account;
     if (params.party) filters.party = params.party;
@@ -39,7 +37,7 @@ class GeneralLedger {
 
     glEntries.push({
       date: '',
-      account: '<b>Opening</b>',
+      account: { template: '<b>Opening</b>' },
       party: '',
       debit: 0,
       credit: 0,
@@ -56,7 +54,7 @@ class GeneralLedger {
     }
     glEntries.push({
       date: '',
-      account: '<b>Total</b>',
+      account: { template: '<b>Total</b>' },
       party: '',
       debit: debitTotal,
       credit: creditTotal,
@@ -66,7 +64,7 @@ class GeneralLedger {
     });
     glEntries.push({
       date: '',
-      account: '<b>Closing</b>',
+      account: { template: '<b>Closing</b>' },
       party: '',
       debit: debitTotal,
       credit: creditTotal,
diff --git a/reports/GeneralLedger/viewConfig.js b/reports/GeneralLedger/viewConfig.js
index bb2ffa5c..8263f10d 100644
--- a/reports/GeneralLedger/viewConfig.js
+++ b/reports/GeneralLedger/viewConfig.js
@@ -5,10 +5,16 @@ const viewConfig = {
   filterFields: [
     {
       fieldtype: 'Select',
-      options: ['Select...', 'SalesInvoice', 'Payment', 'PurchaseInvoice'],
+      options: [
+        { label: '', value: '' },
+        { label: 'Sales Invoice', value: 'SalesInvoice' },
+        { label: 'Payment', value: 'Payment' },
+        { label: 'Purchase Invoice', value: 'PurchaseInvoice' }
+      ],
       size: 'small',
       label: 'Reference Type',
-      fieldname: 'referenceType'
+      fieldname: 'referenceType',
+      placeholder: 'Reference Type'
     },
     {
       fieldtype: 'DynamicLink',
diff --git a/reports/ProfitAndLoss/viewConfig.js b/reports/ProfitAndLoss/viewConfig.js
index d8619397..b5c4be50 100644
--- a/reports/ProfitAndLoss/viewConfig.js
+++ b/reports/ProfitAndLoss/viewConfig.js
@@ -1,3 +1,5 @@
+const frappe = require('frappejs');
+
 const title = 'Profit and Loss';
 module.exports = {
   title: title,
@@ -10,7 +12,10 @@ module.exports = {
       size: 'small',
       placeholder: 'From Date',
       label: 'From Date',
-      required: 1
+      required: 1,
+      default: async () => {
+        return (await frappe.getSingle('AccountingSettings')).fiscalYearStart;
+      }
     },
     {
       fieldtype: 'Date',
@@ -18,7 +23,10 @@ module.exports = {
       size: 'small',
       placeholder: 'To Date',
       label: 'To Date',
-      required: 1
+      required: 1,
+      default: async () => {
+        return (await frappe.getSingle('AccountingSettings')).fiscalYearEnd;
+      }
     },
     {
       fieldtype: 'Select',
@@ -30,6 +38,7 @@ module.exports = {
         'Half Yearly',
         'Yearly'
       ],
+      default: 'Monthly',
       label: 'Periodicity',
       fieldname: 'periodicity'
     }
diff --git a/reports/TrialBalance/viewConfig.js b/reports/TrialBalance/viewConfig.js
index ee6eef6f..4da28909 100644
--- a/reports/TrialBalance/viewConfig.js
+++ b/reports/TrialBalance/viewConfig.js
@@ -1,3 +1,5 @@
+const frappe = require('frappejs');
+
 const title = 'Trial Balance';
 module.exports = {
   title: title,
@@ -10,7 +12,10 @@ module.exports = {
       label: 'From Date',
       size: 'small',
       placeholder: 'From Date',
-      required: 1
+      required: 1,
+      default: async () => {
+        return (await frappe.getSingle('AccountingSettings')).fiscalYearStart;
+      }
     },
     {
       fieldtype: 'Date',
@@ -18,7 +23,10 @@ module.exports = {
       placeholder: 'To Date',
       fieldname: 'toDate',
       label: 'To Date',
-      required: 1
+      required: 1,
+      default: async () => {
+        return (await frappe.getSingle('AccountingSettings')).fiscalYearEnd;
+      }
     }
   ],
   linkFields: [
diff --git a/src/pages/Report.vue b/src/pages/Report.vue
index 01689cfa..519fac77 100644
--- a/src/pages/Report.vue
+++ b/src/pages/Report.vue
@@ -1,19 +1,39 @@
 <template>
   <div class="flex flex-col max-w-full">
     <PageHeader>
-      <h1 slot="title" class="text-xl font-bold">{{ report.title }}</h1>
+      <h1 slot="title" class="text-2xl font-bold">{{ report.title }}</h1>
       <template slot="actions">
         <SearchBar class="ml-2" />
       </template>
     </PageHeader>
+    <div class="mt-6 flex text-base px-8" v-if="report.filterFields">
+      <div class="ml-3 first:ml-0 w-32" v-for="df in report.filterFields">
+        <FormControl
+          input-class="bg-gray-100"
+          size="small"
+          :df="df"
+          :value="filters[df.fieldname]"
+          @change="value => onFilterChange(df, value)"
+          :target="
+            df.fieldtype === 'DynamicLink' ? filters[df.references] : null
+          "
+        />
+      </div>
+    </div>
     <div class="px-8 mt-4">
-      <div class="overflow-auto" :style="{height: 'calc(100vh - 6rem)'}">
-        <Row :columnCount="columns.length" gap="1rem" column-width="minmax(200px, 1fr)">
+      <div class="overflow-auto" :style="{ height: 'calc(100vh - 8rem)' }">
+        <Row
+          :columnCount="columns.length"
+          gap="1rem"
+          column-width="minmax(200px, 1fr)"
+        >
           <div
-            class="text-gray-600 text-sm truncate py-4"
+            class="text-gray-600 text-base truncate py-4"
             v-for="column in columns"
             :key="column.label"
-          >{{ column.label }}</div>
+          >
+            {{ column.label }}
+          </div>
         </Row>
         <div class="flex-1">
           <Row
@@ -24,11 +44,18 @@
             column-width="minmax(200px, 1fr)"
           >
             <div
-              class="text-gray-900 text-sm truncate py-4"
+              class="text-gray-900 text-base truncate py-4"
               v-for="column in columns"
               :key="column.label"
-              v-html="row[column.fieldname]"
-            ></div>
+            >
+              <component
+                v-if="typeof row[column.fieldname] === 'object'"
+                :is="row[column.fieldname]"
+              />
+              <template v-else>
+                {{ frappe.format(row[column.fieldname], column) }}
+              </template>
+            </div>
           </Row>
         </div>
       </div>
@@ -41,7 +68,9 @@ import PageHeader from '@/components/PageHeader';
 import Button from '@/components/Button';
 import SearchBar from '@/components/SearchBar';
 import Row from '@/components/Row';
+import FormControl from '@/components/Controls/FormControl';
 import reportViewConfig from '@/../reports/view';
+import throttle from 'lodash/throttle';
 
 export default {
   name: 'Report',
@@ -50,26 +79,36 @@ export default {
     PageHeader,
     Button,
     SearchBar,
-    Row
+    Row,
+    FormControl
+  },
+  provide() {
+    return {
+      doc: this.filters
+    }
   },
   data() {
+    let filters = {};
+    for (let df of reportViewConfig[this.reportName].filterFields) {
+      filters[df.fieldname] = null;
+    }
+
     return {
+      filters,
       rows: [],
       columns: []
     };
   },
-  mounted() {
+  async mounted() {
     this.columns = this.report.getColumns();
-    this.fetchReportData();
+    await this.setDefaultFilters();
+    await this.fetchReportData();
   },
   methods: {
     async fetchReportData() {
       let data = await frappe.call({
         method: this.report.method,
-        args: {
-          fromDate: '2019-09-01',
-          toDate: '2019-10-31'
-        }
+        args: this.filters
       });
 
       let rows, columns;
@@ -88,6 +127,25 @@ export default {
       }
 
       this.rows = rows;
+    },
+
+    onFilterChange(df, value) {
+      this.filters[df.fieldname] = value;
+      this.fetchReportData();
+    },
+
+    async setDefaultFilters() {
+      for (let df of this.report.filterFields) {
+        let defaultValue = null;
+        if (df.default) {
+          if (typeof df.default === 'function') {
+            defaultValue = await df.default();
+          } else {
+            defaultValue = df.default;
+          }
+        }
+        this.filters[df.fieldname] = defaultValue;
+      }
     }
   },
   computed: {