diff --git a/.vs/IZYIM-mobile-client/v15/.suo b/.vs/IZYIM-mobile-client/v15/.suo
index 3d89bde..aa94c17 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 0a038dd..f199a58 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -2,6 +2,6 @@
   "ExpandedNodes": [
     ""
   ],
-  "SelectedNode": "\\arrangements-delivery_arrangements1.html",
+  "SelectedNode": "\\meter-order-details.html",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index cd9caa5..971d1b0 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 eb40cc3..25b284d 100644
--- a/css/global.style.css
+++ b/css/global.style.css
@@ -1039,7 +1039,7 @@ select.form-element{
 	position: relative;
 	-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
 	-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
-	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
+	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.46);
 	border-radius: 3px;
 	cursor: pointer;
 }
@@ -1654,6 +1654,7 @@ select.form-element{
     display: block;
     width: 100%;
     clear: both;
+    height: 2px;
     margin: 10px 0;
 }
 .form-divider-3 {
diff --git a/example-element.html b/example-element.html
index fda14ad..ce4c1be 100644
--- a/example-element.html
+++ b/example-element.html
@@ -178,10 +178,10 @@
 
                         <div class="form-divider"></div>
 
-                        <div class="expandable-item accordion active" data-group="accordion2">
+                        <div class="expandable-item accordion active">
                             <div class="expandable-header">
                                 <i class="list-icon fa fa-adjust"></i>
-                                <h3 class="list-title">Header</h3>
+                                <h3 class="list-title">Item Code 1</h3>
                                 <i class="list-arrow fa fa-angle-down"></i>
                             </div>
                             <div class="expandable-content" style="max-height: 164px;">
diff --git a/meter-order-details.html b/meter-order-details.html
new file mode 100644
index 0000000..7c9edab
--- /dev/null
+++ b/meter-order-details.html
@@ -0,0 +1,294 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AzureUI - METER ORDER DETAILS</title>
+    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,900" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="css/global.style.css">
+</head>
+
+<body>
+
+    <div class="nav-menu">
+
+        <nav class="menu">
+            <!-- profile logo start -->
+            <div class="nav-header">
+                <a href="home.html"><img src="images/CIEF.png" width="160"></a>
+            </div>
+            <!-- profile logo end -->
+            <!-- Menu navigation start -->
+            <div class="nav-container">
+                <ul class="main-menu">
+                    <li>
+                        <a href="home.html"><i class="fa fa-home"></i> Home</a>
+                    </li>
+                    <li>
+                        <a href="#"><i class="fa fa-bell"></i> Notice</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);"><i class="fa fa-briefcase"></i> Arrangement <span class="fa fa-angle-down"></span></a>
+                        <ul>
+                            <li><a href="arrangements-warehouse_receive_note1.html" data-loader="show"><i class="fa fa-industry"></i> Warehouse Receive Note</a></li>
+                            <li><a href="arrangements-shipment_arrangements1.html" data-loader="show"><i class="fa fa-ship"></i> Shipment Arrangement</a></li>
+                            <li><a href="arrangements-delivery_arrangements1.html" data-loader="show"><i class="fa fa-truck"></i> Delivery Arrangement</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);"><i class="fa fa-shopping-cart"></i> Orders <span class="fa fa-angle-down"></span></a>
+                        <ul>
+                            <li><a href="shipping-order.html" data-loader="show"><i class="fa fa-truck"></i> Shipping Order</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="#"><i class="fa fa-comments"></i> Messenger</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);"><i class="fa fa-shopping-cart"></i> Track Order</a>
+                    </li>
+                    <li>
+                        <a href="example-element.html"><i class="fa fa-code"></i>Example Element</a>
+                    </li>
+                </ul>
+            </div>
+            <!-- Menu navigation end -->
+        </nav>
+    </div>
+
+    <div class="wrapper">
+        <div class="wrapper-inline">
+            <!-- Header area start -->
+            <header style="background-color: #FFF">
+                <a class="go-back-link" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
+                <h1 id="HT" class="page-title" style="color: #000">Order Details</h1>
+                <div class="navi-menu-button">
+                    <em></em>
+                    <em></em>
+                    <em></em>
+                </div>
+            </header>
+            <!-- Header area end -->
+            <!-- Main Content Start Here -->
+            <main class="fix-top-menu">
+                <section class="container">
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Order Details</span>
+                    </div>
+                    <!-- Order Detail Data Start Here -->
+                    <div class="form-row">
+                        <a class="a-meter-sub-title">Order No</a>
+                        <br />
+                        <a class="a-meter-text-data">00011</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Marking</a>
+                        <br />
+                        <a class="a-meter-text-data">HQ123</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Supplier Name</a>
+                        <br />
+                        <a class="a-meter-text-data">FedEx</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Supplier Contact Person</a>
+                        <br />
+                        <a class="a-meter-text-data">George</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Supplier Contact Person No</a>
+                        <br />
+                        <a class="a-meter-text-data">011-3751109</a>
+                    </div>
+                    <!-- Order Detail Data End Here -->
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Warehouse Details</span>
+                    </div>
+                    <!-- Warehouse Detail Data Start Here -->
+                    <div class="form-row">
+                        <a class="a-meter-sub-title">Name</a>
+                        <br />
+                        <a class="a-meter-text-data">Alliances</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Address</a>
+                        <br />
+                        <a class="a-meter-text-data">Street No Where Found</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">City</a>
+                        <br />
+                        <a class="a-meter-text-data">Unkown</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Postcode</a>
+                        <br />
+                        <a class="a-meter-text-data">007</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">State</a>
+                        <br />
+                        <a class="a-meter-text-data">NYC</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Country</a>
+                        <br />
+                        <a class="a-meter-text-data">United States</a>
+                    </div>
+                    <!-- Warehouse Detail Data End Here -->
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Delivery Details</span>
+                    </div>
+                    <!-- Delivery Detail Data Start Here -->
+                    <div class="form-row">
+                        <a class="a-meter-sub-title">Name</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Address</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">City</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Postcode</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">State</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                        <br /><br />
+                        <a class="a-meter-sub-title">Country</a>
+                        <br />
+                        <a class="a-meter-text-data">asd</a>
+                    </div>
+                    <!-- Delivery Detail Data End Here -->
+                    <div class="form-divider-2"></div>
+                    <div class="form-label-divider">
+                        <span class="label-span">Packaging List</span>
+                    </div>
+                    <div class="form-divider-2"></div>
+                    <!-- Packing Item List Start Here -->
+                    <div class="expandable-item accordion" data-group="accordion2">
+                        <div class="expandable-header">
+                            <i class="list-icon fa fa-adjust"></i>
+                            <h3 class="list-title">Item Code 1</h3>
+                            <i class="list-arrow fa fa-angle-down"></i>
+                        </div>
+                        <div class="expandable-content" style="max-height: 164px;">
+                            <div class="padding-content">
+                                <!-- Delivery Detail Data Start Here -->
+                                <div class="form-row">
+                                    <a class="a-meter-sub-title">Description</a>
+                                    <br />
+                                    <a class="a-meter-text-data">42 inch</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Model</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Bravia</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Qty</a>
+                                    <br />
+                                    <a class="a-meter-text-data">22</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">UOM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Selangor</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">CBM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Height: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Width: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Depth: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Weight</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Gross: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Nett: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Photo</a>
+                                    <div class="txt-center">
+                                        <div class="form-divider-2"></div>
+                                        <div class="profile-image">
+                                            <div class="profile-image-item">
+                                                <img id="CompanyProfile" src="avatar.png" width="210" height="110" />
+                                            </div>
+                                        </div>
+                                    </div>                            
+                                </div>
+                                <!-- Delivery Detail Data End Here -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="expandable-item accordion" data-group="accordion2">
+                        <div class="expandable-header">
+                            <i class="list-icon fa fa-adjust"></i>
+                            <h3 class="list-title">Item Code 2</h3>
+                            <i class="list-arrow fa fa-angle-down"></i>
+                        </div>
+                        <div class="expandable-content" style="max-height: 164px;">
+                            <div class="padding-content">
+                                <!-- Delivery Detail Data Start Here -->
+                                <div class="form-row">
+                                    <a class="a-meter-sub-title">Description</a>
+                                    <br />
+                                    <a class="a-meter-text-data">42 inch</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Model</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Bravia</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Qty</a>
+                                    <br />
+                                    <a class="a-meter-text-data">22</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">UOM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Selangor</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">CBM</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Height: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Width: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Depth: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Weight</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Gross: 22.00</a>
+                                    <br />
+                                    <a class="a-meter-text-data">Nett: 22.00</a>
+                                    <br /><br />
+                                    <a class="a-meter-sub-title">Photo</a>
+                                    <div class="txt-center">
+                                        <div class="form-divider-2"></div>
+                                        <div class="profile-image">
+                                            <div class="profile-image-item">
+                                                <img id="CompanyProfile" src="avatar.png" width="210" height="110" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- Delivery Detail Data End Here -->
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Packing Item List End Here -->
+                    <div class="form-divider-2"></div>
+                </section>
+            </main>
+            <!-- Main Content End Here -->
+        </div>
+    </div>
+
+    <!-- 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, Otherwise Ugly Others Function Won't Work -->
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/meter-progress-trackers.html b/meter-progress-trackers.html
index 721a8a6..2a5f4ff 100644
--- a/meter-progress-trackers.html
+++ b/meter-progress-trackers.html
@@ -23,7 +23,7 @@
             <div class="nav-container">
                 <ul class="main-menu">
                     <li>
-                        <a href="#"><i class="fa fa-home"></i> Home</a>
+                        <a href="home.html"><i class="fa fa-home"></i> Home</a>
                     </li>
                     <li>
                         <a href="#"><i class="fa fa-bell"></i> Notice</a>
@@ -31,9 +31,9 @@
                     <li>
                         <a href="javascript:void(0);"><i class="fa fa-briefcase"></i> Arrangement <span class="fa fa-angle-down"></span></a>
                         <ul>
-                            <li><a href="#" data-loader="show"><i class="fa fa-industry"></i> Warehouse Receive Note</a></li>
-                            <li><a href="#" data-loader="show"><i class="fa fa-ship"></i> Shipment Arrangement</a></li>
-                            <li><a href="#" data-loader="show"><i class="fa fa-truck"></i> Delivery Arrangement</a></li>
+                            <li><a href="arrangements-warehouse_receive_note1.html" data-loader="show"><i class="fa fa-industry"></i> Warehouse Receive Note</a></li>
+                            <li><a href="arrangements-shipment_arrangements1.html" data-loader="show"><i class="fa fa-ship"></i> Shipment Arrangement</a></li>
+                            <li><a href="arrangements-delivery_arrangements1.html" data-loader="show"><i class="fa fa-truck"></i> Delivery Arrangement</a></li>
                         </ul>
                     </li>
                     <li>
@@ -153,8 +153,9 @@
                         <a class="a-meter-text-data">10.00</a>
                         <!-- Detail Data End Here -->
                         <hr>
+                        <div class="form-divider-2"></div>
                         <div class="txt-center">
-                            <button class="button blue" data-dismiss="true">Details</button>
+                            <a href="meter-order-details.html" class="button blue" data-dismiss="true">Details</a>
                         </div>
                     </div>
                 </div>
@@ -184,8 +185,9 @@
                         <a class="a-meter-text-data">-</a>
                         <!-- Detail Data End Here -->
                         <hr>
+                        <div class="form-divider-2"></div>
                         <div class="txt-center">
-                            <button class="button blue" data-dismiss="true">Details</button>
+                            <a class="button blue" data-dismiss="true">Details</a>
                         </div>
                     </div>
                 </div>
@@ -240,8 +242,9 @@
                         <a class="a-meter-text-data">Malaysia</a>
                         <!-- Detail Data End Here -->
                         <hr>
+                        <div class="form-divider-2"></div>
                         <div class="txt-center">
-                            <button class="button blue" data-dismiss="true">Details</button>
+                            <a class="button blue" data-dismiss="true">Details</a>
                         </div>
                     </div>
                 </div>
