diff --git a/.vs/IZYIM-mobile-client/v15/.suo b/.vs/IZYIM-mobile-client/v15/.suo
index 02d5b1d..2f56520 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 d523c74..dd80815 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -1,7 +1,8 @@
 {
   "ExpandedNodes": [
-    ""
+    "",
+    "\\css"
   ],
-  "SelectedNode": "\\reset-password.html",
+  "SelectedNode": "\\search-contact.html",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index f46f863..10fad41 100644
Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ
diff --git a/contact-invite.html b/contact-invite.html
index 729cd45..04e1141 100644
--- a/contact-invite.html
+++ b/contact-invite.html
@@ -22,7 +22,7 @@
             <div class="search-result-header fix-searchbar">
                 <!-- or without .fix-searchbar -->
                 <form class="fix-searchbar">
-                    <input type="text" id="searchInput" class="form-element" placeholder="search by mobile contact" onkeyup="CSearch()">
+                    <input type="text" id="searchInput" class="form-element" placeholder="search by mobile contact">
                     <button id="btnback" type="button" class="search-result-btn"><i class="fa fa-arrow-left"></i></button>
                 </form>
             </div>
diff --git a/create-shipping-order-S1.html b/create-shipping-order-S1.html
index 3ffe564..7225cb7 100644
--- a/create-shipping-order-S1.html
+++ b/create-shipping-order-S1.html
@@ -90,11 +90,7 @@
 
                         <div class="form-row-group">
                             <div class="form-row no-padding">
-                                <select class="form-element">
-                                    <option value="">Select your freight forwarder</option>
-                                    <option value="1">KFC</option>
-                                    <option value="2">Surgar Bun</option>
-                                </select>
+                                <input id="ff" type="text" class="form-element" placeholder="Select your frieght forwarder" onclick="myFunction()" data-popup="formPopup" required />
                             </div>
                             <div class="form-row no-padding">
                                 <input id="branch-name" type="text" class="form-element" placeholder="Supplier Company Name" required />
@@ -120,8 +116,8 @@
                             <div class="form-row no-padding">
                                 <select class="form-element">
                                     <option value="">please choose delivery</option>
-                                    <option value="1">KFC</option>
-                                    <option value="2">Surgar Bun</option>
+                                    <option value="1">Branch 1</option>
+                                    <option value="2">Branch 2</option>
                                 </select>
                             </div>
                             <div class="form-row no-padding">
@@ -209,9 +205,59 @@
         </div>
     </div>
 
+    <!--POPUP HTML CONTENT START -->
+    <div class="popup-overlay" id="formPopup">
+        <!-- if you dont want overlay add class .no-overlay -->
+        <div class="popup-container">
+            <div class="popup-header">
+                <h3 class="popup-title">Contact List</h3>
+                <span class="popup-close" data-dismiss="true"><i class="fa fa-times"></i></span>
+            </div>
+            <div class="popup-content">
+                <div class="list-box" style="position: inherit; margin-left:0">
+                    <!-- Content List Spawner Start Here-->
+                    <div class="form-row txt-center">
+                        <a>Choose the forwarder</a>
+                    </div>
+                    <div class="form-divider"></div>
+                    <div id="content">
+                        <a id="active" href="#" class="list-item" data-dismiss="true">
+                            <i class="fa fa-user" style="color: green"></i>
+                            <em class="seperate-contact"></em>
+                            <span class="list-item-title-contact">Bryan</span>
+                            <br />
+                            <span class="list-item-title-contact" style="margin-top:-13px">Forwarder</span>
+                        </a>
+                        <a href="#" class="list-item" data-dismiss="true">
+                            <i class="fa fa-user" style="color: red"></i>
+                            <em class="seperate-contact"></em>
+                            <span class="list-item-title-contact">Dylan</span>
+                            <br />
+                            <span class="list-item-title-contact" style="margin-top:-13px">Forwarder</span>
+                        </a>
+                        <a href="#" class="list-item" data-dismiss="true">
+                            <i class="fa fa-user" style="color: green"></i>
+                            <em class="seperate-contact"></em>
+                            <span class="list-item-title-contact">Edmund</span>
+                            <br />
+                            <span class="list-item-title-contact" style="margin-top:-13px">Forwarder</span>
+                        </a>
+                    </div>
+                    <!-- Content List Spawner End Here-->
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--POPUP HTML CONTENT END -->
+    <!-- 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>
 
+    <script type="text/javascript">
+        document.getElementById("active").onclick = function () {
+            document.getElementById("ff").textContent = "Profile";
+        };
+    </script>
 
 </body>