diff --git a/app/components/events/events-table.js b/app/components/events/events-table.js
deleted file mode 100644
index 6ac0e531faa..00000000000
--- a/app/components/events/events-table.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import classic from 'ember-classic-decorator';
-import { classNames } from '@ember-decorators/component';
-import UiTable from 'open-event-frontend/components/ui-table-server';
-
-@classic
-@classNames('ui', 'main-container')
-export default class EventsTable extends UiTable {}
diff --git a/app/components/public/ticket-list.js b/app/components/public/ticket-list.js
index 063d176536f..b827652c4d9 100644
--- a/app/components/public/ticket-list.js
+++ b/app/components/public/ticket-list.js
@@ -11,7 +11,18 @@ export default Component.extend(FormMixin, {
 
   promotionalCodeApplied: false,
 
-  orderAmount: null,
+  orderAmount    : null,
+  amountOverride : null,
+
+  overridenAmount: computed('orderAmount', 'amountOverride', {
+    get() {
+      return this.amountOverride ?? this.orderAmount?.total;
+    },
+
+    set(key, value) {
+      this.set('amountOverride', value);
+    }
+  }),
 
   isUnverified: computed('session.isAuthenticated', 'authManager.currentUser.isVerified', function() {
     return this.session.isAuthenticated
@@ -74,7 +85,7 @@ export default Component.extend(FormMixin, {
   }),
 
   orderAmountInput: computed('tickets.@each.price', 'order.tickets.@each.orderQuantity', 'order.discountCode', function() {
-    return {
+    const input = {
       tickets: this.order.tickets.toArray().map(ticket => ({
         id       : ticket.id,
         quantity : ticket.orderQuantity,
@@ -82,6 +93,10 @@ export default Component.extend(FormMixin, {
       })),
       'discount-code': this.order.get('discountCode.id')
     };
+    if (this.amountOverride) {
+      input.amount = this.amountOverride;
+    }
+    return input;
   }),
 
   actions: {
@@ -181,12 +196,14 @@ export default Component.extend(FormMixin, {
     async updateOrderAmount() {
       if (this.shouldDisableOrderButton) {
         this.set('orderAmount', null);
+        this.set('amountOverride', null);
         return;
       }
 
       try {
         this.set('orderAmount', await this.loader.post('/orders/calculate-amount', this.orderAmountInput));
         this.order.amount = this.orderAmount.total;
+        this.set('amountOverride', null);
       } catch (e) {
         console.error('Error while calculating order amount', e);
         this.notify.error(e.response.errors[0].detail, {
diff --git a/app/controllers/events/view/tickets/add-order.js b/app/controllers/events/view/tickets/add-order.js
index 3a9537c5382..551aa018556 100644
--- a/app/controllers/events/view/tickets/add-order.js
+++ b/app/controllers/events/view/tickets/add-order.js
@@ -1,101 +1,36 @@
 import classic from 'ember-classic-decorator';
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import Controller from '@ember/controller';
-import { sumBy } from 'lodash-es';
 
 @classic
 export default class AddOrderController extends Controller {
-  @computed('model.tickets.@each.orderQuantity')
-  get hasTicketsInOrder() {
-    return sumBy(this.model.tickets.toArray(),
-      ticket => ticket.get('orderQuantity') ?? 0
-    ) > 0;
-  }
-
-  @computed('model.tickets.@each.orderQuantity')
-  get total() {
-    let sum = 0.0;
-    this.model.tickets.forEach(ticket => {
-      sum += ticket.get('orderQuantity') * ticket.get('price');
-    });
-    return sum;
-  }
-
-  columns = [
-    {
-      propertyName : 'name',
-      title        : 'Ticket Type'
-    },
-    {
-      propertyName : 'price',
-      title        : 'Price',
-      template     : 'components/ui-table/cell/events/view/tickets/cell-add-order-price'
-    },
-    {
-      propertyName : 'quantity',
-      title        : 'Quantity',
-      template     : 'components/ui-table/cell/events/view/tickets/cell-add-order-quantity'
-    },
-    {
-      propertyName : 'itemTotal',
-      title        : 'Item Total',
-      template     : 'components/ui-table/cell/events/view/tickets/cell-add-order-total'
-    }
-  ];
 
   @action
-  updateOrder(ticket, count) {
-    const { order } = this.model;
-    ticket.set('orderQuantity', count);
-    order.set('amount', this.total);
-    if (!this.total) {
-      order.set('amount', 0);
-    }
-    if (count > 0) {
-      order.tickets.addObject(ticket);
-    } else {
-      if (order.tickets.includes(ticket)) {
-        order.tickets.removeObject(ticket);
-      }
+  async placeOrder(orderInput) {
+    if (orderInput) {
+      this.set('orderInput', orderInput);
     }
+    this.send('save');
   }
 
   @action
-  async placeOrder() {
-    this.set('isLoading', true);
-    const { order } = this.model;
-    const event = order.get('event');
-    order.tickets.forEach(ticket => {
-      let numberOfAttendees = ticket.orderQuantity;
-      while (numberOfAttendees--) {
-        this.model.attendees.addObject(this.store.createRecord('attendee', {
-          firstname : 'John',
-          lastname  : 'Doe',
-          email     : 'johndoe@example.com',
-          event,
-          ticket
-        }));
-      }
-    });
+  async save() {
     try {
-      const { order } = this.model;
-      const { attendees } = this.model;
-      await Promise.all((attendees ? attendees.toArray() : []).map(attendee => attendee.save()));
-      order.set('attendees', attendees.slice());
-      await order.save()
-        .then(order => {
-          this.notify.success(this.l10n.t('Order details saved. Please fill further details within 10 minutes.'));
-          this.transitionToRoute('orders.new', order.identifier);
-        })
-        .catch(async() => {
-          await Promise.all((attendees ? attendees.toArray() : []).map(attendee => attendee.destroyRecord()));
-          this.notify.error(this.l10n.t('Oops something went wrong. Please try again'));
-        })
-        .finally(() => {
-          this.set('isLoading', false);
-        });
+      this.set('isLoading', true);
+      const { orderInput } = this;
+      try {
+        const order = await this.loader.post('/orders/create-order', orderInput);
+        this.notify.success(this.l10n.t(`Order details saved. Please fill further details within ${this.settings.orderExpiryTime} minutes.`));
+        this.transitionToRoute('orders.new', order.data.attributes.identifier);
+      } catch (e) {
+        console.error('Error while saving order', e);
+        this.notify.error(e.response.errors[0].detail);
+      } finally {
+        this.set('isLoading', false);
+      }
     } catch (e) {
-      this.notify.error(this.l10n.t('Oops something went wrong. Please try again'));
+      console.error('Error while creating order', e);
+      this.notify.error(e);
     }
   }
 }
diff --git a/app/templates/components/public/ticket-list.hbs b/app/templates/components/public/ticket-list.hbs
index c9358e0cf09..7ae2b8af65c 100644
--- a/app/templates/components/public/ticket-list.hbs
+++ b/app/templates/components/public/ticket-list.hbs
@@ -121,13 +121,20 @@
                     <td>{{currency-symbol this.eventCurrency}} {{this.orderAmount.tax.amount}}</td>
                   </tr>
                 {{/if}}
-                <tr><td>{{t 'Total'}}</td><td>{{currency-symbol this.eventCurrency}} {{format-money this.orderAmount.total}}</td></tr>
+                <tr><td>{{t 'Total'}}</td>
+                  {{#if this.amountEditable}}
+                    <td>{{currency-symbol this.eventCurrency}}</td> <td><Input @value={{this.overridenAmount}} placeholder="Total" /></td>
+                  {{else}}
+                    <td>{{currency-symbol this.eventCurrency}} {{format-money this.orderAmount.total}}</td>
+                  {{/if}}
+                </tr>
               </tbody>
             </table>
         </td>
       </tr>
     </tfoot>
   </table>
+  {{#unless this.amountEditable}}
   <div class="ui grid">
     {{#if this.enterPromotionalCode}}
       <div class="ui row">
@@ -165,6 +172,7 @@
       </div>
     {{/if}}
   </div>
+  {{/unless}}
   <div class="ui grid">
     <div class="ui row stackable grid">
       <div class="ui no padding thirteen wide computer twelve wide tablet column right aligned floated payment icons">
diff --git a/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-price.hbs b/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-price.hbs
deleted file mode 100644
index 7151b217b10..00000000000
--- a/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-price.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{currency-symbol this.paymentCurrency}} {{format-money this.record.price}}
\ No newline at end of file
diff --git a/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-quantity.hbs b/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-quantity.hbs
deleted file mode 100644
index a9ecb1747e5..00000000000
--- a/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-quantity.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="inline field">
-  <UiDropdown @class="compact selection" @forceSelection={{false}} @onChange={{action this.updateOrder this.record}} as |execute mapper|>
-    <Input @type="hidden" @id={{concat this.record.id "_quantity"}} @value={{this.record.orderQuantity}} />
-    <i class="dropdown icon"></i>
-    <div class="default text">0</div>
-    <div class="menu">
-      <div class="item" data-value="{{map-value mapper 0}}">0</div>
-      {{#each (range this.record.minOrder this.record.maxOrder) as |count|}}
-        <div class="item" data-value="{{map-value mapper count}}">{{count}}</div>
-      {{/each}}
-    </div>
-  </UiDropdown>
-</div>
\ No newline at end of file
diff --git a/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-total.hbs b/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-total.hbs
deleted file mode 100644
index ae7401d4517..00000000000
--- a/app/templates/components/ui-table/cell/events/view/tickets/cell-add-order-total.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{currency-symbol this.paymentCurrency}} {{format-money (mult this.record.orderQuantity this.record.price)}}
\ No newline at end of file
diff --git a/app/templates/events/view/tickets/add-order.hbs b/app/templates/events/view/tickets/add-order.hbs
index 64164253290..56f0cc63a5f 100644
--- a/app/templates/events/view/tickets/add-order.hbs
+++ b/app/templates/events/view/tickets/add-order.hbs
@@ -1,29 +1,11 @@
 <h2 class="ui header">{{t 'Add Order'}}</h2>
-<form class="ui form">
-  <Events::EventsTable
-    @columns={{this.columns}}
+<Public::TicketList 
+    @eventCurrency={{this.model.store.paymentCurrency}}
     @data={{this.model.tickets}}
-    @store={{this.model.store}}
-    @paymentCurrency={{this.model.store.paymentCurrency}}
-    @query={{this.model.query}}
-    @isNotStoreQuery={{true}}
-    @modelName={{this.model.objectType}}
-    @useNumericPagination={{true}}
-    @showGlobalFilter={{true}}
-    @showPageSize={{true}}
-    @updateOrder={{action "updateOrder"}} />
-  <div class="ui grid stackable">
-    <div class="row">
-      <div class="sixteen wide column right aligned">
-        <h5 class="ui header">{{t 'Grand Total'}}: {{currency-symbol this.model.store.paymentCurrency}} {{total}}</h5>
-      </div>
-    </div>
-    <div class="row">
-      <div class="sixteen wide column right aligned">
-        <button class="ui blue button" disabled={{not this.hasTicketsInOrder}} {{action 'placeOrder'}}>
-          {{t 'Continue'}}
-        </button>
-      </div>
-    </div>
-  </div>
-</form>
+    @event={{this.model.order.event}}
+    @attendees={{this.model.attendees}}
+    @order={{this.model.order}}
+    @placeOrder={{action "placeOrder"}}
+    @save='save'
+    @amountEditable={{true}}
+/>