diff --git a/assets/js/formset.js b/assets/js/formset.js
index cedfc64..9cdd19e 100644
--- a/assets/js/formset.js
+++ b/assets/js/formset.js
@@ -6,6 +6,20 @@ let formset = function() {
   let totalFormCounter;
   let arr = []
     
+  let subTotalComputation = function(){
+    // Sub-t0tal computation
+       $('.field-amount').each(function(counter){
+         arr[counter] = Number( $(this).text() )
+        });
+       let subTotal = 0
+       let totalForm = Number( $('#id_form-TOTAL_FORMS').val() );
+       for(let counter=0; counter<totalForm; counter++){
+         subTotal += arr[counter];
+       }
+       $('.sub-total').removeAttr('hidden');
+       $('.sub-total').text(subTotal)
+       $('input#id_subtotal').val(subTotal);
+  }
 
   let amountComputation = function(){
     // Total amount calculation
@@ -16,6 +30,7 @@ let formset = function() {
 
         if (!isNaN(total)){
           $(this).parent().children('.field-amount').text(total);
+          subTotalComputation();
         }
     });
     $('.field-rate').on('keydown keyup keypress focusout focus', function() {
@@ -25,8 +40,10 @@ let formset = function() {
 
         if (!isNaN(total)){
           $(this).parent().children('.field-amount').text(total);
+           subTotalComputation();
         }
     });
+       subTotalComputation(); 
   }
 
   // Display created elements
@@ -55,19 +72,11 @@ let formset = function() {
         let removeForm = $(this).parent().parent();
         removeForm.remove();
       }
+       subTotalComputation();
      });
 
-    amountComputation();
-
-    // Sub-t0tal computation
-     $('.field-amount').each(function(counter){
-       arr[counter] = Number( $(this).text() )
-      });
-     let subTotal = 0
-     for(let counter=0; counter<totalForm; counter++){
-       subTotal += arr[counter];
-     }
-     $('.sub-total').text(subTotal)
+      amountComputation();
+      subTotalComputation();
   }
 
   // Add order form
@@ -121,29 +130,10 @@ let formset = function() {
             $(this).attr('id', counter) ;
           });
         }
-       // Sub-t0tal computation
-       $('.field-amount').each(function(counter){
-         arr[counter] = Number( $(this).text() )
-        });
-       let subTotal = 0
-       for(let counter=0; counter<totalForm; counter++){
-         subTotal += arr[counter];
-       }
-       $('.sub-total').text(subTotal)
+        subTotalComputation();
        });
-
       amountComputation();
-
-      // Sub-t0tal computation
-       $('.field-amount').each(function(counter){
-         arr[counter] = Number( $(this).text() )
-        });
-       let subTotal = 0
-       for(let counter=0; counter<totalForm; counter++){
-         subTotal += arr[counter];
-       }
-       $('.sub-total').text(subTotal)
-      
+      subTotalComputation();
     }
   });
 };
diff --git a/assets/js/invoice.js b/assets/js/invoice.js
index 90f945e..cd9ccdb 100644
--- a/assets/js/invoice.js
+++ b/assets/js/invoice.js
@@ -4,8 +4,8 @@ $(function() {
     // Display invoice form
     $("a.create-invoice").on('click', function(e) {
       e.preventDefault();
-      $("div.invoice-box").empty();
-      $("div.invoice-box-form").show();
+      $("#invView").addClass('hidden');;
+      $("#invForm").removeClass('hidden');
     });
 
     // Ajax view invoice
@@ -14,80 +14,86 @@ $(function() {
       let id = $(this).attr('id').toString();
 
       $.ajax({
-       method: 'GET',
-       url: "/invoice/ajax/view/"+id+"",
-       context: $(this),
-      })
-      .done(function(response){
-        let obj = JSON.parse(response.invoice);
+        method: 'GET',
+        url: "/invoice/ajax/view/"+id+"",
+        dataType: 'json',
+        context: $(this),
+        success: function (resp) {
+          let invData = JSON.parse(resp.invoice);
+          let invItems = JSON.parse(resp.items);
+
+          if (invData.length) {
+            invData = invData[0];
+          }
+
+          let wrapperDiv = $('#invView');
+          let invForm = $('#invForm');
+          let invNum = $('#invNum');
+          let invDesc = $('#invDesc');
+          let invClient = $('#invClient');
+          let invPayStat = $('#invPayStat');
+          let invDueDate = $('#invDueDate');
+          let invDate = $('#invDate');
+          let invRem = $('#invRem');
+          let invSubTotal = $('#invSubTotal');
+          let invTotal = $('#invTotal');
+
+          let itemsTbody = $('#itemsTbody');
+          let itemsRow = $('#itemsRow');
+
+          wrapperDiv.removeClass('hidden');
+          invForm.addClass('hidden');
 
-        // Create invoice details template
-        for (let data in obj) {
-          $("div.invoice-box-form").hide()
-          $("div.invoice-box").empty()
-          $("div.invoice-box").append(
-            '<div class="col-md-12">'
-            +'<br>'
-            +'<div class="col-md-8"><label>Invoice Info</label></div>'
-            +'<div class="col-md-4">          '
-            +'<a href="#" class="btn">Edit</a>'
-            +'<a href="#">Delete</a>'
-            +'<a href="#" target="_blank">|Generate PDF|</a>'
-            +' <a href="#">Send</a>'
-            +'</div>'
-            +'<br>'
-            +'<hr>'
-            +'</div>'
-            +'<div class="col-md-12">'
-            +'<div class="col-md-3">'
-            +' <label >Invoice #:</label>'
-            +' </div>'
-            +' <div class="col-md-9">'
-            +obj[data].fields.invoice_number
-            +' </div>'
-            +' </div>'
-            +'<div class="col-md-12">'
-            +'<div class="col-md-3">'
-            +' <label >Client:</label>'
-            +' </div>'
-            +' <div class="col-md-9">'
-            +obj[data].fields.client
-            +' </div>'
-            +' </div>'
-            +'<div class="col-md-12">'
-            +'<div class="col-md-3">'
-            +' <label >Item/s :</label>'
-            +' </div>'
-            +' <div class="col-md-9">'
-            +obj[data].fields.item
-            +' </div>'
-            +' </div>'
-            +'<div class="col-md-12">'
-            +'<div class="col-md-3">'
-            +' <label >Invoice date:</label>'
-            +' </div>'
-            +' <div class="col-md-9">'
-            +obj[data].fields.invoice_date
-            +' </div>'
-            +' </div>'
-            +'<div class="col-md-12">'
-            +'<div class="col-md-3">'
-            +' <label >Due date:</label>'
-            +' </div>'
-            +' <div class="col-md-9">'
-            +obj[data].fields.due_date
-            +' </div>'
-            +' </div>'
-            +'<div class="col-md-12">'
-            +'<div class="col-md-3">'
-            +' <label >Remarks :</label>'
-            +' </div>'
-            +' <div class="col-md-9">'
-            +obj[data].fields.remarks
-            +' </div>'
-            +' </div>'
-            )
-        }
-      });
+          let paymentStat = '';
+          if (invData.fields.payment_status == false){
+            paymentStat = 'unpaid';
+          } else if (invData.fields.payment_status == true){
+            paymentStat = 'paid';
+          }
+
+          let invDueDateData = new Date(invData.fields.due_date);
+          let invDateData = new Date(invData.fields.invoice_date);
+
+          let arrInvDate = [];
+          let arrDueDate = [];
+          let invoiceDate = '';
+          let invoiceDueDate = '';
+          arrInvDate = String(invDateData).split(' ');
+          arrDueDate = String(invDueDateData).split(' ');
+          invoiceDate = arrInvDate[1]+' '+arrInvDate[2]+', '+arrInvDate[3];
+          invoiceDueDate = arrDueDate[1]+' '+arrDueDate[2]+', '+arrDueDate[3];
+
+          invNum.text(resp.prefix.toUpperCase()+': '+resp.invoice_number);
+          invDesc.text(invData.fields.description.charAt(0).toUpperCase()
+                       + invData.fields.description.slice(1).toLowerCase()
+                      );
+          invClient.text(resp.client.toLowerCase()
+                                    .replace(/\b[a-z]/g, function(letter) {
+                                      return letter.toUpperCase();
+                                     }) 
+                         );
+          invPayStat.text(paymentStat.charAt(0).toUpperCase()+ paymentStat.slice(1).toLowerCase());
+          invDueDate.text(invoiceDueDate);
+          invDate.text(invoiceDate);
+          invRem.text(invData.fields.remarks.charAt(0).toUpperCase()
+                      + invData.fields.remarks.slice(1).toLowerCase() 
+                     );
+          invSubTotal.text(invData.fields.subtotal);
+          invTotal.text(invData.fields.subtotal);
+
+          if (invItems.length) {
+            itemsTbody.html('');
+            for (var i = invItems.length - 1; i >= 0; i--) {
+              let newRow = itemsRow.clone();
+              newRow.removeClass('hidden');
+              newRow.children('.itemDesc').html(invItems[i].fields.description);
+              newRow.children('.itemQty').html(invItems[i].fields.quantity);
+              newRow.children('.itemRate').html(invItems[i].fields.rate);
+              newRow.children('.itemAmount').html(invItems[i].fields.amount);
+              itemsTbody.append(newRow);
+            }
+          }
+        },
+      })
     });
   });
diff --git a/invoices/forms.py b/invoices/forms.py
index 0979643..ad9bae1 100644
--- a/invoices/forms.py
+++ b/invoices/forms.py
@@ -29,6 +29,7 @@ class Meta:
                    'remarks',
                    'description', 
                    'payment_status',
+                   'subtotal',
                    )
 
     def __init__(self,*args, **kwargs):
@@ -117,11 +118,8 @@ def clean(self):
 
         for count,form in enumerate(self.forms):
             if not form.data['form-'+str(count)+'-description']:
-                print("not description")
                 raise forms.ValidationError("Description is required!")
             if not form.data['form-'+str(count)+'-quantity']:
-                print("not qty")
                 raise forms.ValidationError("Quantity is required!")
             if not form.data['form-'+str(count)+'-rate']:
-                print("not rate")
                 raise forms.ValidationError("Rate is required!")
diff --git a/invoices/models.py b/invoices/models.py
index 0592182..a3260b0 100644
--- a/invoices/models.py
+++ b/invoices/models.py
@@ -34,15 +34,13 @@ class Invoice(models.Model):
     payment_status = models.BooleanField( default=False)
     pdf = models.FileField(upload_to=get_invoice_directory,null=True, blank=True)
     remarks = models.TextField(max_length=255,null=True, blank=True)
+    subtotal = models.PositiveIntegerField()
     status = models.CharField(max_length=10, choices=STATUS, default='draft')
 
     class Meta:
         unique_together = ('invoice_number', 'company')
 
     def __str__(self):
-        return f"{self.invoice_number}"
-
-    def get_invoice_number(self):
         return f"{self.invoice_number}".zfill(9)
 
 
diff --git a/invoices/views.py b/invoices/views.py
index 47a54c8..e039e2d 100644
--- a/invoices/views.py
+++ b/invoices/views.py
@@ -117,9 +117,11 @@ def get(self, *args, **kwargs):
         """
         query = self.request.GET.get("q")
         if query:
-            invoices = invoices.filter(invoice_number__icontains=query)
+            invoices = invoices.filter(invoice_number__icontains=query
+                               ).order_by('-date_updated')
         else:
-            invoices = Invoice.objects.filter(company=self.request.user.company)
+            invoices = Invoice.objects.filter(company=self.request.user.company
+                                      ).order_by('-date_updated')
         context = {}
         context['client_form'] = ClientForm()
         ItemFormSet = formset_factory(ItemForm, formset=BaseItemFormSet)
@@ -170,7 +172,8 @@ def post(self, *args, **kwargs):
             messages.success(self.request, 'Invoice is successfully Added')
             return redirect('invoices')
         else:
-            invoices = Invoice.objects.filter(company=self.request.user.company)
+            invoices = Invoice.objects.filter(company=self.request.user.company
+                                      ).order_by('-date_updated')
             context = {}
             context['invoices'] =  invoices 
             context['invoice_form'] = invoice_form
@@ -204,15 +207,23 @@ class InvoiceAjaxView(UserIsOwnerMixin, View):
     """
 
     def get(self, *args, **kwargs):
-        """Display pdf in browser
+        """Display invoice details
         """
         invoice = get_object_or_404(Invoice, id=kwargs['invoice_id'])
-        data = serializers.serialize('json', [invoice])
-        return JsonResponse({'invoice': data,
-                            },
-                              safe = False,
-                              status=200
-                            )
+        invoice_number = str(invoice)
+        client = str(invoice.client)
+        items = Item.objects.filter(invoice=kwargs['invoice_id'])
+        invoiceData = serializers.serialize('json', [invoice])
+        itemsData = serializers.serialize('json', items)
+        data = {
+            'client': client,
+            'invoice_number': invoice_number,
+            'invoice': invoiceData,
+            'items': itemsData,
+            'prefix': invoice.client.get_prefix(),
+        }
+        return JsonResponse(data, safe = False, status=200)
+
 
 
 class InvoiceAddView(LoginRequiredMixin,TemplateView):
diff --git a/templates/invoices/all_invoice.html b/templates/invoices/all_invoice.html
index 09dfe9b..b969968 100644
--- a/templates/invoices/all_invoice.html
+++ b/templates/invoices/all_invoice.html
@@ -13,25 +13,131 @@
 </div>
 {% endif %}
 
-
 <div class="col-md-3">
   <div align="center" class="col-md-12"><h3>Invoice</h3></div>
+  {% if not invoices %}
+    <span>No invoices yet</span>
+  {% endif %}
   {% for invoice in invoices  %}
   <div class="col-md-12 invoice-data" id="{{ invoice.id }}">
     <div class="col-md-2">
-      <input type="checkbox" class = "chcktbl" /></div>
+      <input type="checkbox" class = "chcktbl" />
+    </div>
     <div class="col-md-10">
-      <div class="col-md-12">{{ invoice.client.client_company }}</div>
-      <div class="col-md-12">{{ invoice.get_invoice_number }}</div>
-       <div class="col-md-12">{{ invoice.due_date }}</div>
-       <div class="col-md-12">{{ invoice.status }}</div>
+      <div class="col-md-12">{{ invoice.client.client_company|title }}</div>
+      <div class="col-md-12">{{ invoice.client.get_prefix|upper }}: {{ invoice }}</div>
+       <div class="col-md-12">{{ invoice.due_date|date:"M d, Y" }}</div>
+       <div class="col-md-12">
+          {% if invoice.status == 'sent' %}
+          <span class="sent">|{{ invoice.status|title }} </span>
+          {% elif invoice.status == 'draft' %}
+          <span class="draft">|{{ invoice.status|title }} </span>
+          {% endif %}
+       </div>
     </div>
   </div>
   {% endfor %}
 </div>
 
 <div class="col-md-9 invoice-content">
-  <div class="col-md-12 invoice-box-form" >
+  <div id="invView" class="hidden">
+      <div class="col-md-12"><label>Invoice Info</label></div>
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Invoice #:</label>
+        </div>
+        <div class="col-md-9">
+          <span id="invNum"></span>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Description:</label>
+        </div>
+        <div class="col-md-9">
+          <span id="invDesc"></span>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Client:</label>
+        </div>
+        <div class="col-md-9">
+          <span id="invClient"></span>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Payment Status:</label>
+        </div>
+        <div class="col-md-9">
+          <span id="invPayStat"></span>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Item/s :</label>
+        </div>
+        <div class="col-md-9">
+        </div>
+      </div>
+      <div class="col-md-12">
+        <table class="table table-condensed">
+          <thead>
+            <tr>
+              <th>Description</th>
+              <th>Qty</th>
+              <th>Rate</th>
+              <th>Amount</th>
+            </tr>
+            <tr id="itemsRow" class="hidden">
+              <td class="itemDesc"></td>
+              <td class="itemQty"></td>
+              <td class="itemRate"></td>
+              <td class="itemAmount"></td>
+            </tr>
+          </thead>
+          <tbody id="itemsTbody">
+          </tbody>
+        </table>
+      </div>
+
+      <div class="col-md-12">
+         <div class="col-md-8"></div>
+         <div class="col-md-4" align="center">Subtotal:<span id="invSubTotal"></span></div>
+       </div>
+       <div class="col-md-12">
+         <div class="col-md-8"></div>
+         <div class="col-md-4" align="center">Total:<span id="invTotal"></span></div>
+       </div>
+
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Invoice date:</label>
+        </div>
+        <div class="col-md-9">
+          <span id="invDate"></span>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Due date:</label>
+        </div>
+        <div class="col-md-9">
+          <span id="invDueDate"></span>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <div class="col-md-3">
+          <label >Remarks :</label>
+        </div>
+        <div class="col-md-9">
+          <span id="invRem"></span>
+        </div>
+      </div>
+    </div>
+
+  <div class="col-md-12" id="invForm" >
     <form method="POST" novalidate>
       {% csrf_token %}
       <div>
@@ -123,48 +229,41 @@ <h4>New Invoice</h4><hr>
 
         <div class="row-item col-md-12">
           {{ formset.management_form }}
-
           {% for form in formset %}
-
-
-           <div class="col-md-12">
-
+          <div class="col-md-12">
           {% if formset.non_form_errors %}
-
-             {{ form.non_form_errors }}
-             {% for error in formset.non_form_errors %}
-            {{ error|escape }}
-        {% endfor %}
-        {% endif %}
-
-            
-             {% if form.description.errors %}
-              <span>
-                [{{ forloop.counter }}]description error: {{ form.description.errors.as_text }}
-              </span>
-              <br>
-            {% endif %}
-            {% if form.quantity.errors %}
-              <span>
-              [{{ forloop.counter }}]quantity error: {{ form.quantity.errors.as_text }}
-              </span>
-              <br>
-            {% endif %}
-            {% if form.rate.errors %}
-              <span>
-              [{{ forloop.counter }}]rate error: {{ form.rate.errors.as_text }} 
-              </span>
-              <br>
-            {% endif %}
-            {% if form.amount.errors %}
-              <span>
-              [{{ forloop.counter }}]amount error: {{ form.amount.errors.as_text }}
-              </span>
-              <br>
-            {% endif %}
+            {{ form.non_form_errors }}
+            {% for error in formset.non_form_errors %}
+              {{ error|escape }}
+            {% endfor %}
+          {% endif %}
+          
+           {% if form.description.errors %}
+            <span>
+              [{{ forloop.counter }}]description error: {{ form.description.errors.as_text }}
+            </span>
+            <br>
+          {% endif %}
+          {% if form.quantity.errors %}
+            <span>
+            [{{ forloop.counter }}]quantity error: {{ form.quantity.errors.as_text }}
+            </span>
+            <br>
+          {% endif %}
+          {% if form.rate.errors %}
+            <span>
+            [{{ forloop.counter }}]rate error: {{ form.rate.errors.as_text }} 
+            </span>
+            <br>
+          {% endif %}
+          {% if form.amount.errors %}
+            <span>
+            [{{ forloop.counter }}]amount error: {{ form.amount.errors.as_text }}
+            </span>
+            <br>
+          {% endif %}
           </div>
 
-
           <div class="form-row row1 col-md-12" id="0">
               <div class="field-description col-md-3">
                   {{ form.description|attr:"class:form-control"|attr:"required:True" }}
@@ -181,46 +280,36 @@ <h4>New Invoice</h4><hr>
                 <a href="javascript:void(0)" id='id_form-0-delete'></a>
               </div>
           </div>
-
-
-
-         
-
-
           {% endfor %}
         </div>
        </div>
 
-       <div class="col-md-12">
-         <div class="col-md-6"></div>
-         <div class="col-md-6">
-           <div class="col-md-6 sub-total"></div>
-           <div class="col-md-6 sub-total"></div>
-         </div>
-       </div>
-
-        <div class="col-md-12">
-          <div class="col-md-2">
-            <label>Remarks</label>
-          </div>
-          <div class="col-md-10">
-            <div class="col-md-12">
-              <div class="col-md-3">
-                {{ invoice_form.remarks|attr:"placeholder:Remarks"|attr:"class:form-control"}}</div>
-                <div class="col-md-5">{{ invoice_form.remarks.errors.as_text }}</div>
-              </div>
-            </div>
-          </div>
+      <div class="col-md-12">
+        <div class="col-md-8">{{ invoice_form.subtotal|attr:"val:0"|attr:"hidden" }}</div>
+        <div class="col-md-4 sub-total" hidden></div>
+      </div>
+      <div class="col-md-12">
+        <div class="col-md-2">
+          <label>Remarks</label>
+        </div>
+        <div class="col-md-10">
           <div class="col-md-12">
-            <br><hr>
-            <div class="col-md-8"></div>
-            <div class="col-md-4">  
-              <button type="" class="btn btn-primary">Cancel</button>
-              <button type="submit" class="btn btn-primary" id="save-draft">Save as Draft</button>
+            <div class="col-md-3">
+              {{ invoice_form.remarks|attr:"placeholder:Remarks"|attr:"class:form-control"}}</div>
+              <div class="col-md-5">{{ invoice_form.remarks.errors.as_text }}</div>
             </div>
-            <br>
-            <hr>
           </div>
+        </div>
+        <div class="col-md-12">
+          <br><hr>
+          <div class="col-md-8"></div>
+          <div class="col-md-4">  
+            <button type="" class="btn btn-primary">Cancel</button>
+            <button type="submit" class="btn btn-primary" id="save-draft">Save as Draft</button>
+          </div>
+          <br>
+          <hr>
+        </div>
       </form>
     <div class="col-md-12 invoice-box"></div>
     </div>
@@ -338,7 +427,7 @@ <h4 class="modal-title">Add Client</h4>
   </div>
 </div>
 
-  {% endblock  %}
+{% endblock  %}
 
 {% block js %}
   <script>