diff --git a/index.html b/index.html
index 4ce9b69..1ae3537 100644
--- a/index.html
+++ b/index.html
@@ -217,6 +217,17 @@ <h1 class="text-center">ONDC NTS Services Developer Guide</h1>
                   >SandBox-UI</a
                 >
               </li> -->
+              <li class="nav-item d-none" id="sandbox-nav">
+                <a
+                  class="nav-link"
+                  id="sandbox-ui-tab"
+                  data-bs-toggle="tab"
+                  href="#sandbox-ui"
+                  role="tab"
+                  aria-selected="false"
+                  >SandBox-UI</a
+                >
+              </li>
             </ul>
           </div>
           <div class="tab-content">
@@ -344,16 +355,17 @@ <h5 id="flow-summary" class="card-title"></h5>
             <div class="tab-pane fade" id="sandbox-ui" role="tabpanel">
               <div class="me-5 mt-1 ms-3">
                 <label for="api-contracts"> Version:</label>
-                <select id="contract-dropdown">
-                  <option>Credit</option>
+                <select id="sandbox-dropdown" onchange="updateSandbox()">
+                  <!-- <option>Credit</option> -->
                 </select>
               </div>
 
               <iframe
-                src="https://fis-buyer-staging.ondc.org/"
+                src=""
                 height="800px"
                 width="100%"
                 title="Iframe Example"
+                id="sandbox-iframe"
               ></iframe>
             </div>
             <div class="tab-pane fade" id="feature" role="tabpanel">
@@ -490,6 +502,8 @@ <h5 class="card-title">Tags</h5>
     <script src="ui/error.js"></script>
     <script src="ui/tlc.js"></script>
     <script src="ui/markdown.js"></script>
+    <script src="ui/sandboxui.js"></script>
+
     <!-- Your existing scripts here -->
   </body>
 </html>
diff --git a/ui/sandboxui.js b/ui/sandboxui.js
new file mode 100644
index 0000000..8f96214
--- /dev/null
+++ b/ui/sandboxui.js
@@ -0,0 +1,24 @@
+function loadSandbox(data){
+    console.log(data,"Data")
+    const dropdown = data.dropdown
+    const sandboxDropdown = document.getElementById("sandbox-dropdown");
+    sandboxDropdown.innerHTML = "";
+    dropdown.forEach((dropdown) => {
+        var option = document.createElement("option");
+        option.text = dropdown["environment-name"];
+        option.setAttribute("link",dropdown.link)
+        sandboxDropdown.add(option);
+        updateSandbox()
+      });
+}
+
+function updateSandbox(){
+    const dropdown = document.getElementById("sandbox-dropdown");
+    const iframe = document.getElementById("sandbox-iframe")
+    const iframe_link = dropdown.options[dropdown.selectedIndex].getAttribute("link")
+    iframe.setAttribute("src",iframe_link)
+}
+
+function selectSandbox(){
+
+}
\ No newline at end of file
diff --git a/ui/tabs.js b/ui/tabs.js
index 13f49a1..3ce66e7 100644
--- a/ui/tabs.js
+++ b/ui/tabs.js
@@ -3,7 +3,7 @@
 
 function onFirstLoad(build_spec) {
       let data = build_spec;
-      const xProperties = ["x-enum", "x-tags", "x-examples", "x-flows", "x-attributes", "x-errorcodes", "x-tlc"];
+      const xProperties = ["x-enum", "x-tags", "x-examples", "x-flows", "x-attributes", "x-errorcodes", "x-tlc","x-sandboxui"];
       xProperties.forEach((xProperty) => {
         if (data[xProperty]) {
           switch (xProperty) {
@@ -28,15 +28,32 @@ function onFirstLoad(build_spec) {
             case "x-tlc":
               loadTlc(data[xProperty]);
               break;
+            case "x-sandboxui":
+              if(shouldDisplay(data[xProperty].dropdown,"sandbox-nav")) loadSandbox(data[xProperty])
+              break;
             default:
               break; 
           }
         } else {
+          if(xProperty == "x-sandboxui"){ // remove sandbox when changing branch
+            shouldDisplay([],"sandbox-nav")
+          }
           console.log(`${xProperty} is not present in the build_spec.`);
         }
       });
     }
     
+    function shouldDisplay (data,id){
+      if(isNaN(data?.length) || data?.length <1){
+        const element = document.getElementById(id)
+        if(element) element.classList.add("d-none")
+        return false
+      }else{
+        const element = document.getElementById(id)
+        if(element) element.classList.remove("d-none")
+        return true
+      }
+      }
 
 // window.onload = function(){
 //       onFirstLoad(build_spec)