diff --git a/.vs/IZYIM-mobile-client/v15/.suo b/.vs/IZYIM-mobile-client/v15/.suo
index 45debc6..3d89bde 100644
Binary files a/.vs/IZYIM-mobile-client/v15/.suo and b/.vs/IZYIM-mobile-client/v15/.suo differ
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
index 98b5e45..0a038dd 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -2,6 +2,6 @@
   "ExpandedNodes": [
     ""
   ],
-  "SelectedNode": "\\home.html",
+  "SelectedNode": "\\arrangements-delivery_arrangements1.html",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index 1fc71b9..cd9caa5 100644
Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ
diff --git a/css/global.style.css b/css/global.style.css
index f97dbcf..c857378 100644
--- a/css/global.style.css
+++ b/css/global.style.css
@@ -793,8 +793,8 @@ section.container{
 
 .meter-container{
     position: relative;
-    width: 90%;
-    margin-left: 5%;
+    width: 100%;
+    padding: 10px;
 }
 /*end of part 8----------------------------------------------------*/
 
@@ -2827,90 +2827,115 @@ input[type=text]:disabled {
     height: 100px;
 }
 .meter-tracker-bar {
-    width: 80%;
-    margin-left: 13.5%;
-    height: 10px;
+    width: 96%;
+    height: 4px;
     background-color: #a9a9a9;
     display: inline-block;
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
     -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
     position: relative;
-    float: left;
 }
-.meter-tracker-bar .update-btn-first-back{
+.meter-tracker-bar .update-txt-first{
     position: absolute;
-	display: block;
-	width: 80px;
+	width: 25%;
 	height: 32px;
-	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	background-color: #069;
-	right: 89%;
-	bottom: -400%;
+	bottom: -100%;
 	text-align: center;
-	line-height: 32px;
+	line-height: 10px;
+	right: 75%;
+}
+.meter-tracker-bar .update-txt-second{
+    position: absolute;
+	width: 25%;
+	height: 32px;
+	bottom: -100%;
+	text-align: center;
+	line-height: 10px;
+	right: 50%;
+}
+.meter-tracker-bar .update-txt-third{
+    position: absolute;
+	width: 25%;
+	height: 32px;
+	bottom: -100%;
+	text-align: center;
+	line-height: 10px;
+	right: 25%;
+}
+.meter-tracker-bar .update-txt-fourth{
+    position: absolute;
+	width: 25%;
+	height: 32px;
+	bottom: -100%;
+	text-align: center;
+	line-height: 10px;
+	right: 0%;
+}
+.meter-tracker-bar .update-txt-fixwall{
+    position: absolute;
+	width: 5%;
+	height: 32px;
+	bottom: -100%;
+	text-align: center;
+	line-height: 10px;
+	right: -5%;
 }
 .meter-tracker-bar .update-btn-first{
     position: absolute;
-	display: block;
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
+	width: 15px;
+	height: 15px;
+	bottom: 0%;
 	background-color: #069;
-	right: 99%;
-	bottom: -100%;
+	border-radius: 100%;
 	text-align: center;
-	line-height: 32px;
+	line-height: 10px;
+	z-index: 1;
 }
 .meter-tracker-bar .update-btn-second{
     position: absolute;
-	display: block;
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
+	width: 15px;
+	height: 15px;
+	bottom: 0%;
 	background-color: #069;
-	right: 67%;
-	bottom: -100%;
+	border-radius: 100%;
 	text-align: center;
-	line-height: 32px;
+	line-height: 10px;
+	z-index: 1;
 }
 .meter-tracker-bar .update-btn-third{
     position: absolute;
-	display: block;
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
+	width: 15px;
+	height: 15px;
+	bottom: 0%;
 	background-color: #069;
-	right: 33%;
-	bottom: -100%;
+	border-radius: 100%;
 	text-align: center;
-	line-height: 32px;
+	line-height: 10px;
+	z-index: 1;
 }
 .meter-tracker-bar .update-btn-fourth{
     position: absolute;
-	display: block;
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
+	width: 15px;
+	height: 15px;
+	bottom: 0%;
 	background-color: #069;
-	right: -1%;
-	bottom: -100%;
+	border-radius: 100%;
 	text-align: center;
-	line-height: 32px;
+	line-height: 10px;
+	z-index: 1;
+}
+.meter-tracker-bar .update-btn-completed{
+    position: absolute;
+	width: 15px;
+	height: 15px;
+	bottom: -100%;
+	background-color: #069;
+	border-radius: 100%;
+	text-align: center;
+	line-height: 10px;
+	right: 0%;
+	z-index: 1;
 }
 /*end of part 31----------------------------------------------------*/
 
diff --git a/meter-progress-trackers.html b/meter-progress-trackers.html
index 5f71cad..d3fe79d 100644
--- a/meter-progress-trackers.html
+++ b/meter-progress-trackers.html
@@ -72,30 +72,49 @@
             <!-- Header area end -->
             <!-- Main Content Start Here -->
             <div class="form-fixed"></div>
-            <div class="form-row txt-center">
-                <div class="meter-tracker-bar">
-                    <div id="meter-bar" style="background-color:#069; width:0; height:100%"></div>
-                    <label class="update-btn-first-back" style="display:none">
-                        <a>Order Date</a>
-                    </label>
-                    <label class="update-btn-first fix">
-                        <input id="firststep" type="submit" onclick="FirstStep()" style="display:none" />
-                    </label>
-                    <label class="update-btn-second fix">
-                        <input id="secondstep" type="submit" onclick="SecondStep()" style="display:none" />
-                    </label>
-                    <label class="update-btn-third fix">
-                        <input id="thirdstep" type="submit" onclick="ThirdStep()" style="display:none" />
-                    </label>
-                    <label class="update-btn-fourth fix">
-                        <input id="fourthstep" type="submit" onclick="FourthStep()" style="display:none" />
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-divider"></div>
 
             <div class="meter-container">
+                <div class="form-row">
+                    <div class="meter-tracker-bar">
+                        <!-- Trackers Meter Point Start Here -->
+                        <div id="meter-bar" style="background-color:#069; width:0; height:100%"></div>
+                        <!-- Trackers Meter Point End Here -->
+                        <!-- Sub Title For Meter Point Start Here -->
+                        <label class="update-txt-first fix">
+                            <div class="update-btn-first fix">
+                                <input id="StartedStep" type="submit" onclick="StartedStep()" style="display:none" />
+                            </div>
+                            <a>Order Date</a>
+                        </label>
+                        <label class="update-txt-second fix">
+                            <div class="update-btn-second fix">
+                                <input id="FirstStep" type="submit" onclick="FirstStep()" style="display:none" />
+                            </div>
+                            <a>WH Received</a>
+                        </label>
+                        <label class="update-txt-third fix">
+                            <div class="update-btn-third fix">
+                                <input id="SecondStep" type="submit" onclick="SecondStep()" style="display:none" />
+                            </div>
+                            <a>Delivery Arr</a>
+                        </label>
+                        <label class="update-txt-fourth fix">
+                            <div class="update-btn-fourth fix">
+                                <input id="ThirdStep" type="submit" onclick="ThirdStep()" style="display:none" />
+                            </div>
+                            <a>Delivery</a>
+                        </label>
+                        <label class="update-txt-fixwall fix">
+                            <div class="update-btn-fourth fix">
+                                <input id="CompletedStep" type="submit" onclick="CompletedStep()" style="display:none" />
+                            </div>
+                        </label>
+                        <!-- Sub Title For Meter Point End Here -->   
+                    </div>
+                </div>
+
+                <div class="form-divider"></div>
+
                 <div class="form-row">
                     <div class="form-row txt-center">
                         <a class="a-meter-title">Order Date</a>
@@ -144,28 +163,41 @@
     <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/global.script.js"></script>
-    <!-- Required For All Pages, Oth    erwise Ugly Others Function Won't Work -->
+    <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
 
     <script>
-        function FirstStep() {
+        function StartedStep() {
             var elem = document.getElementById("meter-bar");
-            var width = 30;
+            var width = 0;
             var id = setInterval(frame, 10);
             function frame() {
-                if (width >= 0) {
+                if (width >= 0.1) {
                     clearInterval(id);
                 } else {
-                    width--;
+                    width++;
+                    elem.style.width = width + '%';
+                }
+            }
+        }
+        function FirstStep() {
+            var elem = document.getElementById("meter-bar");
+            var width = 0;
+            var id = setInterval(frame, 10);
+            function frame() {
+                if (width >= 25) {
+                    clearInterval(id);
+                } else {
+                    width++;
                     elem.style.width = width + '%';
                 }
             }
         }
         function SecondStep() {
             var elem = document.getElementById("meter-bar");
-            var width = 0;
+            var width = 25;
             var id = setInterval(frame, 10);
             function frame() {
-                if (width >= 30) {
+                if (width >= 50) {
                     clearInterval(id);
                 } else {
                     width++;
@@ -175,10 +207,10 @@
         }
         function ThirdStep() {
             var elem = document.getElementById("meter-bar");
-            var width = 30;
+            var width = 50;
             var id = setInterval(frame, 10);
             function frame() {
-                if (width >= 60) {
+                if (width >= 75) {
                     clearInterval(id);
                 } else {
                     width++;
@@ -186,12 +218,12 @@
                 }
             }
         }
-        function FourthStep() {
+        function CompletedStep() {
             var elem = document.getElementById("meter-bar");
-            var width = 60;
+            var width = 75;
             var id = setInterval(frame, 10);
             function frame() {
-                if (width >= 90) {
+                if (width >= 100) {
                     clearInterval(id);
                 } else {
                     width++;