diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index e8ba0e9e4b..24a9117ce9 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -6,9 +6,36 @@
  */
 
 require('./bootstrap');
-
 window.Vue = require('vue');
 
+
+import moment from 'moment';
+import accounting from 'accounting';
+
+Vue.filter('formatDate', function(value) {
+
+    if (value) {
+        moment.locale(window.language);
+        return moment(String(value)).format(window.month_and_day_js);
+    }
+});
+
+Vue.filter('formatAmount', function(value) {
+    if (value) {
+        value = parseFloat(value);
+        var parsed = accounting.formatMoney(value, window.currencySymbol, window.frac_digits,window.mon_thousands_sep,window.mon_decimal_point,accountingConfig);
+        if(value < 0) {
+            return '<span class="text-danger">' + parsed + '</span>';
+        }
+        if(value > 0) {
+        return '<span class="text-success">' + parsed + '</span>';
+        }
+        return '<span style="color:#999;">' + parsed + '</span>';
+    }
+});
+
+
+
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
@@ -17,6 +44,8 @@ window.Vue = require('vue');
 
 Vue.component('example-component', require('./components/ExampleComponent.vue'));
 
+Vue.component('bills-index', require('./components/bills/Index.vue'));
+
 Vue.component(
     'passport-clients',
     require('./components/passport/Clients.vue')
diff --git a/resources/assets/js/components/bills/Index.vue b/resources/assets/js/components/bills/Index.vue
new file mode 100644
index 0000000000..e5c54976d6
--- /dev/null
+++ b/resources/assets/js/components/bills/Index.vue
@@ -0,0 +1,135 @@
+<!--
+  - Index.vue
+  - Copyright (c) 2018 thegrumpydictator@gmail.com
+  -
+  - This file is part of Firefly III.
+  -
+  - Firefly III is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation, either version 3 of the License, or
+  - (at your option) any later version.
+  -
+  - Firefly III is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+  -->
+<template>
+    <div>
+        <table class="table table-hover sortable">
+            <thead>
+            <tr>
+                <th class="hidden-sm hidden-xs" data-defaultsort="disabled">&nbsp;</th>
+                <th>name</th>
+                <th data-defaultsign="az" class="hidden-sm hidden-md hidden-xs">Matches on</th>
+                <th data-defaultsign="_19" colspan="2">Amount</th>
+                <th data-defaultsign="month" class="hidden-sm hidden-xs">Current period</th>
+                <th data-defaultsign="month" class="hidden-sm hidden-xs">Next expected match</th>
+                <th class="hidden-sm hidden-xs hidden-md">Active</th>
+                <th class="hidden-sm hidden-xs hidden-md">Auto match</th>
+                <th data-defaultsign="az" class="hidden-sm hidden-xs">Repeat freq</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(bill, index) in list">
+                <td class="hidden-sm hidden-xs">
+                    <div class="btn-group btn-group-xs edit_tr_buttons">
+                        <a href="x" class="btn btn-default btn-xs">
+                            <i class="fa fa-fw fa-pencil"></i></a>
+                        <a href="x" class="btn btn-danger btn-xs">
+                            <i class="fa fa-fw fa-trash-o"></i></a>
+                    </div>
+                </td>
+                <td :data-value="bill.attributes.name">
+                    <a href="x" :title="bill.attributes.name">{{ bill.attributes.name }}</a>
+                    <i v-if='bill.attributes.attachments_count > 0' class="fa fa-paperclip"></i>
+                </td>
+                <td class="hidden-sm hidden-md hidden-xs">
+                    <span v-for="(word) in bill.attributes.match"><span class="label label-info">{{ word }}</span>&nbsp;</span>
+                </td>
+                <td :data-value="bill.attributes.amount_min" style="text-align: right;">
+                <span style="margin-right:5px;" v-html="formatAmount(bill.attributes.amount_min)"></span>
+                </td>
+                <td :data-value="bill.attributes.amount_max" style="text-align: right;">
+                    <span style="margin-right:5px;" v-html="formatAmount(bill.attributes.amount_max)"></span>
+                </td>
+                <td v-if="bill.attributes.paid_dates.length == 0 && bill.attributes.pay_dates.length == 0 && bill.attributes.active">
+                    Not expected this period.
+                </td>
+                <td v-if="bill.attributes.paid_dates.length == 0 && bill.attributes.pay_dates.length == 0 && bill.attributes.active">
+                    {{ bill.attributes.next_expected_match|formatDate }}
+                </td>
+                <td v-if="bill.attributes.paid_dates.length == 0 && bill.attributes.pay_dates.length > 0 && bill.attributes.active">
+                    not or not yet.
+                </td>
+                <td v-if="bill.attributes.paid_dates.length == 0 && bill.attributes.pay_dates.length > 0 && bill.attributes.active">
+                    {{ bill.attributes.next_expected_match|formatDate }}
+                </td>
+                <td v-if="bill.attributes.paid_dates.length > 0 && bill.attributes.active">
+                    <span v-for="date in bill.attributes.paid_dates">{{ date|formatDate }}<br /></span>
+                </td>
+                <td v-if="bill.attributes.paid_dates.length > 0 && bill.attributes.active">
+                    {{ bill.attributes.next_expected_match|formatDate }}
+                </td>
+                <td v-if="bill.attributes.active === false" class="paid_in_period text-muted" data-value="0000-00-00 00-00-00">
+                    ~
+                </td>
+                <td v-if="bill.attributes.active === false" class="expected_in_period text-muted hidden-sm hidden-xs" data-value="0">
+                    ~
+                </td>
+                <td class="hidden-sm hidden-xs hidden-md" :data-value="bill.attributes.active">
+                    <i v-if="bill.attributes.active === true" class="fa fa-fw fa-check"></i>
+                    <i v-if="bill.attributes.active === false" class="fa fa-fw fa-ban"></i>
+                </td>
+                <td class="hidden-sm hidden-xs hidden-md" :data-value="bill.attributes.automatch">
+                    <i v-if="bill.attributes.automatch === true" class="fa fa-fw fa-check"></i>
+                    <i v-if="bill.attributes.automatch === false" class="fa fa-fw fa-ban"></i>
+                </td>
+                <td class="hidden-sm hidden-xs" :data-value="bill.attributes.repeat_freq + bill.attributes.skip">
+                    {{ bill.attributes.repeat_freq }}
+                    <span v-if="bill.attributes.skip > 0">Skips over {{ bill.attributes.skip }}</span>
+                </td>
+            </tr>
+            <!--<button @click="deleteBill(bill.attributes.id)" class="btn btn-danger btn-xs pull-right">Delete</button>-->
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                list: [],
+                bill: {
+                    id: '',
+                    name: ''
+                }
+            };
+        },
+
+        created() {
+            this.fetchBillList();
+        },
+
+        methods: {
+            formatAmount:  Vue.filter('formatAmount'),
+            fetchBillList() {
+                axios.get('api/v1/bills', {params: {start: window.sessionStart, end: window.sessionEnd}}).then((res) => {
+                    this.list = res.data.data;
+                });
+            },
+
+            deleteBill(id) {
+                axios.delete('api/bills/' + id)
+                    .then((res) => {
+                        this.fetchBillList()
+                    })
+                    .catch((err) => console.error(err));
+            },
+        }
+    }
+</script>
diff --git a/resources/views/bills/index.twig b/resources/views/bills/index.twig
index 1fa5e633a7..40b5e5c5ea 100644
--- a/resources/views/bills/index.twig
+++ b/resources/views/bills/index.twig
@@ -26,6 +26,9 @@
                 <div style="padding:8px;">
                     <a class="btn btn-success" href="{{ route('bills.create') }}"><i class="fa fa-plus fa-fw"></i> {{ 'create_new_bill'|_ }}</a>
                 </div>
+
+                <bills-index></bills-index>
+                <p><hr /></p>
                 {% include 'list/bills' %}
             </div>
             <div class="box-footer">
@@ -42,5 +45,9 @@
 {% endblock %}
 
 {% block scripts %}
+    <script type="text/javascript">
+        var start = '2018-01-01';
+        var end = '2018-01-31';
+    </script>
     <script type="text/javascript" src="js/lib/bootstrap-sortable.js?v={{ FF_VERSION }}"></script>
 {% endblock %}
diff --git a/resources/views/javascript/variables.twig b/resources/views/javascript/variables.twig
index 1bd44157cc..5bb238855a 100644
--- a/resources/views/javascript/variables.twig
+++ b/resources/views/javascript/variables.twig
@@ -37,3 +37,9 @@ var showFullList = '{{ trans('firefly.show_full_list')|escape('js') }}';
 var showOnlyTop = '{{ trans('firefly.show_only_top',{number:listLength})|escape('js') }}';
 var accountingConfig = {{ accounting|json_encode|raw }};
 var token = '{{ csrf_token() }}';
+var sessionStart = '{{ session('start').format('Y-m-d') }}';
+var sessionEnd = '{{ session('end').format('Y-m-d') }}';
+
+// some formatting stuff:
+var month_and_day_js = "{{ trans('config.month_and_day_js') }}";
+var acc_config_new = {format: accountingConfig};
\ No newline at end of file