diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 29eac04c55..834070adae 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -159,8 +159,8 @@
 }
 
 .sub-table {
-    margin-left: 25px;
-    margin-right: 25px;
+    margin-left: 45px;
+    margin-right: 45px;
 }
 
 .detail-icon .glyphicon {
diff --git a/InvenTree/order/api.py b/InvenTree/order/api.py
index d5ba2ce83e..e305dd4e26 100644
--- a/InvenTree/order/api.py
+++ b/InvenTree/order/api.py
@@ -341,6 +341,7 @@ class SOLineItemList(generics.ListCreateAPIView):
             'part',
             'part__stock_items',
             'allocations',
+            'allocations__item__location',
             'order',
         )
 
diff --git a/InvenTree/order/models.py b/InvenTree/order/models.py
index db7dc8c29b..bcc2beb1a5 100644
--- a/InvenTree/order/models.py
+++ b/InvenTree/order/models.py
@@ -452,6 +452,13 @@ class SalesOrderAllocation(models.Model):
 
     quantity = RoundingDecimalField(max_digits=15, decimal_places=5, validators=[MinValueValidator(0)], default=1)
 
+    def get_allocated(self):
+        """ String representation of the allocated quantity """
+        if self.item.serial and self.quantity == 1:
+            return "# {sn}".format(sn=self.item.serial)
+        else:
+            return self.quantity
+
     def get_location(self):
         return self.item.location.id if self.item.location else None
 
diff --git a/InvenTree/order/serializers.py b/InvenTree/order/serializers.py
index 721aaa6338..46274cf226 100644
--- a/InvenTree/order/serializers.py
+++ b/InvenTree/order/serializers.py
@@ -153,6 +153,7 @@ class SalesOrderAllocationSerializer(InvenTreeModelSerializer):
 
     location_path = serializers.CharField(source='get_location_path')
     location_id = serializers.IntegerField(source='get_location')
+    allocated = serializers.CharField(source='get_allocated')
 
     class Meta:
         model = SalesOrderAllocation
@@ -160,9 +161,9 @@ class SalesOrderAllocationSerializer(InvenTreeModelSerializer):
         fields = [
             'pk',
             'line',
+            'allocated',
             'location_id',
             'location_path',
-            'quantity',
             'item',
         ]
 
diff --git a/InvenTree/order/templates/order/sales_order_detail.html b/InvenTree/order/templates/order/sales_order_detail.html
index ed7293f126..7870f77baf 100644
--- a/InvenTree/order/templates/order/sales_order_detail.html
+++ b/InvenTree/order/templates/order/sales_order_detail.html
@@ -42,6 +42,7 @@ $("#so-lines-table").inventreeTable({
     queryParams: {
         order: {{ order.id }},
         part_detail: true,
+        allocations: true,
     },
     url: "{% url 'api-so-line-list' %}",
     detailView: true,
@@ -49,61 +50,39 @@ $("#so-lines-table").inventreeTable({
         return row.allocated > 0;
     },
     detailFormatter: function(index, row, element) {
-        inventreeGet("{% url 'api-stock-list' %}",
+
+        var html = `<div class='sub-table'><table class='table table-striped table-condensed' id='allocation-table-${row.pk}'></table></div>`;
+
+        element.html(html);
+
+        $(`#allocation-table-${row.pk}`).bootstrapTable({
+            data: row.allocations,
+            showHeader: false,
+            columns: [
             {
-                location_detail: true,
-                sales_order_line: row.pk,
+                width: '50%',
+                field: 'allocated',
+                title: 'Quantity',
+                formatter: function(value, row, index, field) {
+                    return renderLink(value, `/stock/item/${row.pk}/`);
+                },
             },
             {
-                success: function(response) {
-
-                    var html = `<div class='sub-table'><table class='table table-striped table-condensed' id='allocation-table-${row.pk}'></table></div>`;
-
-                    element.html(html);
-
-                    $(`#allocation-table-${row.pk}`).bootstrapTable({
-                        data: response,
-                        showHeader: false,
-                        columns: [
-                        {
-                            width: '50%',
-                            field: 'quantity',
-                            title: 'Quantity',
-                            formatter: function(value, row, index, field) {
-                                var html = '';
-                                if (row.serial && row.quantity == 1) {
-                                    html = `Serial Number: ${row.serial}`;
-                                } else {
-                                    html = `Quantity: ${row.quantity}`;
-                                }
-
-                                return renderLink(html, `/stock/item/${row.pk}/`);
-                            },
-                        },
-                        {
-                            field: 'location',
-                            title: 'Location',
-                            formatter: function(value, row, index, field) {
-                                return renderLink(row.location_detail.pathstring, `/stock/location/${row.location}/`);
-                            },
-                        },
-                        {
-                            field: 'buttons',
-                            title: 'Actions',
-                            formatter: function(value, row, index, field) {
-                                return '';
-                            },
-                        },
-                        ],
-                    });
+                field: 'location_id',
+                title: 'Location',
+                formatter: function(value, row, index, field) {
+                    return renderLink(row.location_path, `/stock/location/${row.location_id}/`);
                 },
-                error: function(response) {
-                    console.log("An error!");
+            },
+            {
+                field: 'buttons',
+                title: 'Actions',
+                formatter: function(value, row, index, field) {
+                    return '';
                 },
-            }
-        );
-
-        return "{% trans 'Loading data' %}";
+            },
+            ],
+        });
     },
     columns: [
         {