diff --git a/app/controllers/account/billing/invoices.js b/app/controllers/account/billing/invoices.js
new file mode 100644
index 00000000000..4f97b110ff6
--- /dev/null
+++ b/app/controllers/account/billing/invoices.js
@@ -0,0 +1,4 @@
+import Controller from '@ember/controller';
+
+export default class extends Controller {
+}
diff --git a/app/controllers/account/billing/invoices/list.js b/app/controllers/account/billing/invoices/list.js
new file mode 100644
index 00000000000..8e248fde72d
--- /dev/null
+++ b/app/controllers/account/billing/invoices/list.js
@@ -0,0 +1,112 @@
+import Controller from '@ember/controller';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
+import { computed } from '@ember/object';
+
+export default class extends Controller.extend(EmberTableControllerMixin) {
+  @computed()
+  get columns() {
+    let columns = [];
+    if (this.model.params.invoice_status === 'upcoming') {
+      columns = [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+        },
+        {
+          name      : 'Date Issued',
+          valuePath : 'createdAt'
+        },
+        {
+          name      : 'Outstanding Amount',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'View Invoice',
+          valuePath : 'invoicePdfUrl'
+        }
+      ];
+    } else if (this.model.params.invoice_status === 'paid') {
+      columns = [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+        },
+        {
+          name      : 'Date Issued',
+          valuePath : 'createdAt'
+        },
+        {
+          name      : 'Amount',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'Date Paid',
+          valuePath : 'completedAt'
+        },
+        {
+          name      : 'View Invoice',
+          valuePath : 'invoicePdfUrl'
+        }
+
+      ];
+    } else if (this.model.params.invoice_status === 'due') {
+      columns =   [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+
+        },
+        {
+          name      : 'Date Issued',
+          valuePath : 'createdAt'
+        },
+        {
+          name      : 'Amount Due',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'View Invoice',
+          valuePath : 'invoicePdfUrl'
+        }
+
+      ];
+    } else if (this.model.params.invoice_status === 'due') {
+      columns = [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+        },
+        {
+          name      : 'Amount',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'Status',
+          valuePath : 'status'
+        }
+
+      ];
+    }
+    return columns;
+  }
+}
\ No newline at end of file
diff --git a/app/models/event-invoice.js b/app/models/event-invoice.js
index d6543e1eab5..74cbfc34aa5 100644
--- a/app/models/event-invoice.js
+++ b/app/models/event-invoice.js
@@ -26,6 +26,7 @@ export default ModelBase.extend({
   expYear      	: attr('number'),
   amount        : attr('number'),
   completedAt   : attr('moment'),
+  invoicePdfUrl : attr('string'),
 
   /** relationships
    *
diff --git a/app/router.js b/app/router.js
index 23d5b71502d..600ca73e374 100644
--- a/app/router.js
+++ b/app/router.js
@@ -115,7 +115,9 @@ router.map(function() {
     this.route('danger-zone');
     this.route('billing', function() {
       this.route('payment-info');
-      this.route('invoices');
+      this.route('invoices', function() {
+        this.route('list', { path: '/:invoice_status' });
+      });
     });
   });
   this.route('explore');
diff --git a/app/routes/account/billing/invoices/list.js b/app/routes/account/billing/invoices/list.js
new file mode 100644
index 00000000000..340ab7ed0a2
--- /dev/null
+++ b/app/routes/account/billing/invoices/list.js
@@ -0,0 +1,72 @@
+import Route from '@ember/routing/route';
+import moment from 'moment';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
+import { action } from '@ember/object';
+
+export default class extends Route.extend(EmberTableRouteMixin) {
+  titleToken() {
+    switch (this.params.invoice_status) {
+      case 'paid':
+        return this.l10n.t('Paid');
+      case 'due':
+        return this.l10n.t('Due');
+      case 'upcoming':
+        return this.l10n.t('Upcoming');
+      case 'all':
+        return this.l10n.t('All');
+    }
+  }
+  async model(params) {
+    this.set('params', params);
+    const searchField = 'name';
+    let filterOptions = [];
+    if (params.invoice_status === 'paid' || params.invoice_status === 'due') {
+      filterOptions = [
+        {
+          name : 'status',
+          op   : 'eq',
+          val  : params.invoice_status
+        }
+      ];
+    } else if (params.invoice_status === 'upcoming') {
+      filterOptions = [
+        {
+          and: [
+            {
+              name : 'deleted-at',
+              op   : 'eq',
+              val  : null
+            },
+            {
+              name : 'created-at',
+              op   : 'ge',
+              val  : moment().subtract(30, 'days').toISOString()
+            }
+          ]
+        }
+      ];
+    }
+
+
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
+
+    let queryString = {
+      include        : 'event',
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.page || 1
+    };
+
+    queryString = this.applySortFilters(queryString, params);
+    return {
+      eventInvoices: (await this.store.query('event-invoice', queryString)).toArray(),
+      params
+
+    };
+
+  }
+  @action
+  refreshRoute() {
+    this.refresh();
+  }
+}
diff --git a/app/templates/account/billing/invoices.hbs b/app/templates/account/billing/invoices.hbs
index 9505e1875dd..721da023ed5 100644
--- a/app/templates/account/billing/invoices.hbs
+++ b/app/templates/account/billing/invoices.hbs
@@ -1,14 +1,23 @@
 <div class="ui grid stackable">
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Due Invoices'}}</h2>
+  <div class="row">
+    <div class="eight wide column">
+      {{#tabbed-navigation isNonPointing=true}}
+        {{#link-to 'account.billing.invoices.list' 'all' class='item'}}
+          {{t 'All'}}
+        {{/link-to}}
+        {{#link-to 'account.billing.invoices.list' 'due' class='item'}}
+          {{t 'Due'}}
+        {{/link-to}}
+        {{#link-to 'account.billing.invoices.list' 'paid' class='item'}}
+          {{t 'Paid'}}
+        {{/link-to}}
+        {{#link-to 'account.billing.invoices.list' 'upcoming' class='item'}}
+          {{t 'Upcoming'}}
+        {{/link-to}}
+      {{/tabbed-navigation}}
+    </div>
   </div>
-  <div class="ui hidden divider"></div>
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Upcoming Invoices'}}</h2>
+  <div class="row">
+    {{outlet}}
   </div>
-  <div class="ui hidden divider"></div>
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Paid Invoices'}}</h2>
-  </div>
-  <div class="ui hidden divider"></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/templates/account/billing/invoices/list.hbs b/app/templates/account/billing/invoices/list.hbs
new file mode 100644
index 00000000000..36e2304e953
--- /dev/null
+++ b/app/templates/account/billing/invoices/list.hbs
@@ -0,0 +1,15 @@
+<div class="sixteen wide column">
+  {{tables/default columns=columns
+                  rows=model.eventInvoices
+                  currentPage=page
+                  pageSize=per_page
+                  searchQuery=search
+                  sortBy=sort_by
+                  sortDir=sort_dir
+                  metaData=model.eventInvoices.meta
+                  filterOptions=filterOptions
+                  widthConstraint="eq-container"
+                  resizeMode="fluid"
+                  fillMode="equal-column"
+  }}
+</div>
\ No newline at end of file
diff --git a/app/templates/components/ui-table/cell/events/cell-event-invoice.hbs b/app/templates/components/ui-table/cell/events/cell-event-invoice.hbs
new file mode 100644
index 00000000000..e4a83661268
--- /dev/null
+++ b/app/templates/components/ui-table/cell/events/cell-event-invoice.hbs
@@ -0,0 +1,3 @@
+<div class="ui header weight-400">
+  <img src="{{if record.logoUrl record.logoUrl '/images/placeholders/Other.jpg'}}" alt="Event Logo" class="ui image"> <br> {{record.name}}
+</div>
\ No newline at end of file
diff --git a/tests/acceptance/billing-info-test.js b/tests/acceptance/billing-info-test.js
deleted file mode 100644
index 69d57eb52fb..00000000000
--- a/tests/acceptance/billing-info-test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { module, test } from 'qunit';
-import { setupApplicationTest } from 'ember-qunit';
-import { currentURL, visit } from '@ember/test-helpers';
-import { login } from 'open-event-frontend/tests/helpers/custom-helpers';
-
-
-module('Acceptance | account/billing', function(hooks) {
-  setupApplicationTest(hooks);
-
-
-  test('visiting account/billing without login', async function(assert) {
-    await visit('account/billing');
-    assert.equal(currentURL(), '/login');
-  });
-
-  test('visiting account/billing with login', async function(assert) {
-    await login(assert);
-    await visit('account/billing');
-    assert.equal(currentURL(), '/account/billing/payment-info');
-  });
-});
\ No newline at end of file