diff --git a/examples/basic/index.html b/examples/basic/index.html
index f7d48c7..fa5deca 100644
--- a/examples/basic/index.html
+++ b/examples/basic/index.html
@@ -1,17 +1,21 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>My Futures Exchange</title>
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    
+    <script src="/s3/sdk/sdk.1.8.0.js"></script>
+
     <style>
+      /* Enforce full height without forcing viewport dimensions (vh/vw) which can be unstable on mobile */
       html,
       body {
         margin: 0;
         padding: 0;
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
       }
 
       #app {
@@ -20,90 +24,117 @@
         overflow: hidden;
       }
     </style>
-    <script src="/s3/sdk/sdk.1.8.0.js"></script>
   </head>
   <body>
     <div id="app"></div>
+
     <script>
-      const { origin, protocol, pathname } = window.location;
-      if (pathname === "/") location.href = "/en/futures/BTCUSDT";
+      // Destructure location properties for cleaner access
+      const { origin, protocol, pathname, host } = window.location;
+      const DEFAULT_PAIR = 'BTCUSDT';
+      const DEFAULT_LANG = 'en';
+      
+      // Determine if running in a development environment based on protocol
       const isDev = protocol === "http:";
-      FuturesSDK.createTradeUI({
-        container: document.getElementById("app"),
-        config: {
-          staticBaseUrl: `${origin}/s3/static/`, // in production, you have to change this to your static base url
-          apiBaseUrl: isDev ? `${origin}` : undefined, // in production, you don't need to configure this, it's default as Asterdex's url
-          futuresWsHost: "wss://fstream.asterdex.com/compress",
-          enableThemeToggle: false,
-
-          // supportNetworks: ['bnb', 'eth', 'arb'],  // optional, default to ['bnb']
-          // supportLanguages: ['en', 'zh-CN'], // optional, default to all languages
 
-          headerConfig: {
-            // logo: {
-            //   darkImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
-            //   lightImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
-            //   // navTo: 'https://www.asterdex.com',
-            // },
-            // menu: {
-            //   data: [{
-            //     text: {'en': 'Swap', 'zh-CN': '兑换'},
-            //     navTo: 'https://www.asterdex.com',
-            //   }],
-            //   placement: 'left',
-            // },
-            // token: {
-            //   imgUrl: `https://www.asterdex.com/cloud-futures/static/images/futures/assets/leon/logo.svg`,
-            //   navTo: 'https://dex.leonicornswap.com/swap?outputCurrency=0x2c8368f8F474Ed9aF49b87eAc77061BEb986c2f1',
-            //   lpPairAddress: '0xd0fc8ba7e267f2bc56044a7715a489d851dc6d78', // Uniswap V3: UNI-USDC
-            //   lpBaseAddress: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', // UNI
-            //   lpQuoteAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
-            //   network: 'eth',
-            //   pricePrecision: 6,
-            // },
-            // customerService: {
-            //   navTo: 'https://asterdex.zendesk.com/hc/%lng%/requests/new',
-            // },
-          },
-          lightPalette: {
-            primaryHover: "#6B78EE", // background hover
-            primary: "#584CEA", // background; text hover,
-            sellHover: "#FD5CB7",
-            sell: "#EF3E9E",
-            buyHover: "#3CC6BE",
-            buy: "#1DB1A8",
-          },
-          loadingImage: {
-            url: "/public/loading.gif",
-          },
-          defaultTheme: "light",
-        },
-        state: {
-          symbol: getSymbolFromUrl(),
-          lng: getLngFromUrl(),
-        },
-      });
-      FuturesSDK.eventListener.on("symbolChange", (data) => {
-        window.history.replaceState(
-          {},
-          null,
-          `/${getLngFromUrl()}/futures/${data.symbol}`
-        );
-      });
-      FuturesSDK.eventListener.on("lngChange", (data) => {
-        window.history.pushState(
-          {},
-          null,
-          `/${data.lng}/futures/${getSymbolFromUrl()}`
-        );
-      });
+      // --- URL Parsing Functions ---
 
+      /** Extracts the language code from the current URL path. Defaults to 'en'. */
       function getLngFromUrl() {
-        return location.pathname.split("/")[1] || "en";
+        // Pathname structure is expected to be: /<lang>/futures/<symbol>
+        return pathname.split("/")[1] || DEFAULT_LANG;
       }
 
+      /** Extracts the trading symbol from the current URL path. Defaults to 'BTCUSDT'. */
       function getSymbolFromUrl() {
-        return location.pathname.split("/")[3] || "BTCUSDT";
+        // Pathname structure is expected to be: /<lang>/futures/<symbol>
+        return pathname.split("/")[3] || DEFAULT_PAIR;
+      }
+      
+      // Redirects root path to a default trading pair and language.
+      if (pathname === "/") {
+        window.location.href = `/${DEFAULT_LANG}/futures/${DEFAULT_PAIR}`;
+      }
+
+      // --- Futures SDK Initialization ---
+      
+      // Ensure the SDK is loaded before proceeding
+      if (typeof FuturesSDK === 'undefined') {
+          console.error("FuturesSDK is not loaded. Check the script source.");
+      } else {
+          FuturesSDK.createTradeUI({
+            container: document.getElementById("app"),
+            config: {
+              // Base URL for static assets (logos, images, etc.)
+              staticBaseUrl: `${origin}/s3/static/`, 
+              // API URL configuration: uses current origin in dev, relies on default in production
+              apiBaseUrl: isDev ? `${origin}` : undefined, 
+              // WebSocket host for real-time market data
+              futuresWsHost: "wss://fstream.asterdex.com/compress",
+              // Disables the built-in theme toggle control
+              enableThemeToggle: false,
+
+              // --- Optional Header Customization (Uncomment and configure as needed) ---
+              /*
+              headerConfig: {
+                logo: {
+                  darkImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
+                  lightImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
+                  // navTo: 'https://www.asterdex.com',
+                },
+                menu: {
+                  data: [{
+                    text: {'en': 'Swap', 'zh-CN': '兑换'},
+                    navTo: 'https://www.asterdex.com',
+                  }],
+                  placement: 'left',
+                },
+              },
+              */
+
+              // Theme palette adjustments
+              lightPalette: {
+                primaryHover: "#6B78EE", // Background hover color
+                primary: "#584CEA", // Primary accent color (background, text hover)
+                sellHover: "#FD5CB7",
+                sell: "#EF3E9E",
+                buyHover: "#3CC6BE",
+                buy: "#1DB1A8",
+              },
+              // Custom loading image path
+              loadingImage: {
+                url: "/public/loading.gif",
+              },
+              defaultTheme: "light",
+            },
+            state: {
+              // Initial state derived from URL
+              symbol: getSymbolFromUrl(),
+              lng: getLngFromUrl(),
+            },
+          });
+      
+          // --- SDK Event Listeners for URL Synchronization ---
+
+          // Update URL when the user changes the trading symbol in the UI
+          FuturesSDK.eventListener.on("symbolChange", (data) => {
+            window.history.replaceState(
+              {},
+              null,
+              // Uses replaceState to avoid cluttering history with every symbol change
+              `/${getLngFromUrl()}/futures/${data.symbol}`
+            );
+          });
+          
+          // Update URL when the user changes the language in the UI
+          FuturesSDK.eventListener.on("lngChange", (data) => {
+            window.history.pushState(
+              {},
+              null,
+              // Uses pushState since language changes are less frequent and should be history navigable
+              `/${data.lng}/futures/${getSymbolFromUrl()}`
+            );
+          });
       }
     </script>
   </body>
