diff --git a/resources/assets/vue/components/reports/sections/MonthlySalesReportSectionComponent.vue b/resources/assets/vue/components/reports/sections/MonthlySalesReportSectionComponent.vue
index cc9bf0eb..22ad4a25 100644
--- a/resources/assets/vue/components/reports/sections/MonthlySalesReportSectionComponent.vue
+++ b/resources/assets/vue/components/reports/sections/MonthlySalesReportSectionComponent.vue
@@ -161,6 +161,7 @@
     </div>
 </template>
 <script>
+
     import LoadingComponent from "../../general/elements/LoadingComponent";
     export default {
         components: {LoadingComponent},
diff --git a/resources/assets/vue/components/reports/sections/ServiceReportSectionComponent.vue b/resources/assets/vue/components/reports/sections/ServiceReportSectionComponent.vue
index fed4b6ca..0fce086e 100644
--- a/resources/assets/vue/components/reports/sections/ServiceReportSectionComponent.vue
+++ b/resources/assets/vue/components/reports/sections/ServiceReportSectionComponent.vue
@@ -4,8 +4,172 @@
             <loading-component v-if="isLoading"></loading-component>
             <div class="row" v-if="report">
                 <div class="col">
+                    <div class="row m-l-0 m-r-0 m-b-25" style="height: 100px;">
+                        <div class="col" :style="{'max-width': progressPercentage(pendingPackingPackages)+'%'}">
+                            <div class="row h-75">
+                                <div class="col bg-success"></div>
+                            </div>
+                            <div class="row h-25 align-items-end b-r b-grey">
+                                <div class="col"></div>
+                                <div class="col-auto">
+                                    <small class="fs-10">{{progressPercentage(pendingPackingPackages)}}%</small>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col" :style="{'max-width': progressPercentage(report.pending_shipment)+'%'}">
+                            <div class="row h-75">
+                                <div class="col bg-success-light"></div>
+                            </div>
+                            <div class="row h-25 align-items-end b-r b-grey">
+                                <div class="col"></div>
+                                <div class="col-auto">
+                                    <small class="fs-10">{{progressPercentage(report.pending_shipment)}}%</small>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col" :style="{'max-width': progressPercentage(report.in_transit)+'%'}">
+                            <div class="row h-75">
+                                <div class="col bg-warning"></div>
+                            </div>
+                            <div class="row h-25 align-items-end b-r b-grey">
+                                <div class="col"></div>
+                                <div class="col-auto">
+                                    <small class="fs-10">{{progressPercentage(report.in_transit)}}%</small>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col" :style="{'max-width': progressPercentage(report.pending_delivery)+'%'}">
+                            <div class="row h-75">
+                                <div class="col bg-danger"></div>
+                            </div>
+                            <div class="row h-25 align-items-end b-r b-grey">
+                                <div class="col"></div>
+                                <div class="col-auto">
+                                    <small class="fs-10">{{progressPercentage(report.pending_delivery)}}%</small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="row">
                         <div class="col">
+                            <div class="card no-border bg-success text-white widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">Pending Packing List</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5 text-white">{{report.received - (report.pending_shipment + report.in_transit + report.pending_delivery + report.delivered)}} Packages</h3>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="card no-border bg-success-light text-white widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">Pending Shipment</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5 text-white">{{report.pending_shipment}} Packages</h3>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="card no-border bg-warning widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">In Transit</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5">{{report.in_transit}} Packages</h3>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="card no-border bg-danger text-white widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">Pending Delivery</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5 text-white">{{report.pending_delivery}} Packages</h3>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4">
                             <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
                                 <div class="container-xs-height full-height">
                                     <div class="row-xs-height">
@@ -34,133 +198,7 @@
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
-                                <div class="container-xs-height full-height">
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="card-header  top-left top-right">
-                                                <div class="card-title">
-                                                    <span class="font-montserrat fs-11 all-caps">Pending Packing List</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                                <h3 class="no-margin p-b-5">{{report.received - (report.pending_shipment + report.in_transit + report.pending_delivery + report.delivered)}} Packages</h3>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-bottom">
-                                            <div class="progress progress-small m-b-0">
-                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
-                                <div class="container-xs-height full-height">
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="card-header  top-left top-right">
-                                                <div class="card-title">
-                                                    <span class="font-montserrat fs-11 all-caps">Pending Shipment</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                                <h3 class="no-margin p-b-5">{{report.pending_shipment}} Packages</h3>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-bottom">
-                                            <div class="progress progress-small m-b-0">
-                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
-                                <div class="container-xs-height full-height">
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="card-header  top-left top-right">
-                                                <div class="card-title">
-                                                    <span class="font-montserrat fs-11 all-caps">In Transit</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                                <h3 class="no-margin p-b-5">{{report.in_transit}} Packages</h3>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-bottom">
-                                            <div class="progress progress-small m-b-0">
-                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
-                                <div class="container-xs-height full-height">
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="card-header  top-left top-right">
-                                                <div class="card-title">
-                                                    <span class="font-montserrat fs-11 all-caps">Pending Delivery</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-top">
-                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                                <h3 class="no-margin p-b-5">{{report.pending_delivery}} Packages</h3>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row-xs-height">
-                                        <div class="col-xs-height col-bottom">
-                                            <div class="progress progress-small m-b-0">
-                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
+                        <div class="col-4">
                             <div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
                                 <div class="container-xs-height full-height">
                                     <div class="row-xs-height">
@@ -191,7 +229,6 @@
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
     </div>
@@ -210,6 +247,12 @@
         computed: {
             pendingQueue () {
                 return this.$store.getters.isInCompleteQueue(this.section);
+            },
+            pendingPackingPackages(){
+                return this.report.received - (this.report.pending_shipment + this.report.in_transit + this.report.pending_delivery + this.report.delivered)
+            },
+            totalInProgress(){
+                return this.pendingPackingPackages + this.report.pending_shipment + this.report.in_transit + this.report.pending_delivery
             }
         },
         watch: {
@@ -227,6 +270,9 @@
                 this.isLoading = true;
                 this.submit(route('api.report.service'), 'get', this.section, false, false)
             },
+            progressPercentage(amount){
+                return (((amount / this.totalInProgress) * 100)).toFixed(2);
+            },
             successHandler(response){
                 this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                 this.isLoading = false;
diff --git a/resources/views/pages/admin/dashboard.blade.php b/resources/views/pages/admin/dashboard.blade.php
index e314cdc1..3c937472 100644
--- a/resources/views/pages/admin/dashboard.blade.php
+++ b/resources/views/pages/admin/dashboard.blade.php
@@ -5,6 +5,11 @@
                 <monthly-sales-report-section-component></monthly-sales-report-section-component>
             </div>
         </div>
+        <div class="row m-b-50">
+            <div class="col">
+                <service-report-section-component></service-report-section-component>
+            </div>
+        </div>
         <div class="row">
             <div class="col-4">
                 <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
@@ -40,7 +45,6 @@
             </div>
             <div class="col"></div>
             <div class="col-3">
-                <service-report-section-component></service-report-section-component>
             </div>
         </div>
     </div>