diff --git a/examples/browser/index.html b/examples/browser/index.html
index b75ba9525..62558361b 100644
--- a/examples/browser/index.html
+++ b/examples/browser/index.html
@@ -6,15 +6,16 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.3/css/foundation.min.css" />
         <!-- Font Awesome icons -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />
+        <link rel="stylesheet" href="styles.css" />
 
         <!-- defer to not block rendering -->
         <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
         <!-- local vs cdn dependency -->
-        <script src="../../packages/browser-bundle/dist/wot-bundle.min.js" defer></script>
-        <!-- <script
+        <!-- <script src="../../packages/browser-bundle/dist/wot-bundle.min.js" defer></script> -->
+        <script
             src="https://cdn.jsdelivr.net/npm/@node-wot/browser-bundle@latest/dist/wot-bundle.min.js"
             defer
-        ></script> -->
+        ></script>
         <script src="index.js" defer></script>
 
         <script>
@@ -27,8 +28,83 @@
         <div id="topbar" class="row">
             <div class="medium-12 columns">
                 <h1>Browsified node-wot</h1>
-                <input id="td_addr" type="url" value="http://plugfest.thingweb.io:8083/testthing" />
-                <button id="fetch" type="button">Consume</button>
+
+                <!-- Tabs for TD selection -->
+                <ul class="tabs" data-tab id="td-tabs">
+                    <li class="tab-title active">
+                        <a href="#tab-testthing" id="tab-link-testthing">Test Thing</a>
+                    </li>
+                    <li class="tab-title">
+                        <a href="#tab-smartcoffee" id="tab-link-smartcoffee">Smart Coffee Machine</a>
+                    </li>
+                    <li class="tab-title">
+                        <a href="#tab-counter" id="tab-link-counter">Counter</a>
+                    </li>
+                    <li class="tab-title">
+                        <a href="#tab-custom" id="tab-link-custom">Custom</a>
+                    </li>
+                </ul>
+                <div class="tabs-content">
+                    <div class="content active" id="tab-testthing">
+                        <p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
+                        <p>
+                            <strong>TD Description:</strong>
+                            <span class="td-description">Loading...</span>
+                        </p>
+                    </div>
+                    <div class="content" id="tab-smartcoffee">
+                        <p>
+                            Consumed TD at
+                            <a href="" target="_blank" class="td-url"></a>
+                        </p>
+                        <p>
+                            <strong>TD Description:</strong>
+                            <span class="td-description">Loading...</span>
+                        </p>
+                    </div>
+                    <div class="content" id="tab-counter">
+                        <p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
+                        <p>
+                            <strong>TD Description:</strong>
+                            <span class="td-description">Loading...</span>
+                        </p>
+                    </div>
+                    <div class="content" id="tab-custom">
+                        <div class="row">
+                            <div class="medium-12 columns">
+                                <input
+                                    id="td_addr"
+                                    type="url"
+                                    placeholder="Paste the TD URL to start consuming it"
+                                    style="width: 100%"
+                                    onkeydown="if(event.key==='Enter') document.getElementById('fetch').click()"
+                                />
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="medium-12 columns" style="margin-top: 10px">
+                                <button id="fetch" type="button" class="button">Consume</button>
+                            </div>
+                        </div>
+                        <div id="custom-td-info" style="margin-top: 10px">
+                            <p>Consumed TD at <a href="" target="_blank" class="td-url"></a></p>
+                            <p>
+                                <strong>TD Description:</strong>
+                                <span class="td-description">Enter a TD URL above to consume it.</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Error message container -->
+                <div id="error-container" class="row" style="display: none; margin-top: 10px">
+                    <div class="medium-12 columns">
+                        <div class="alert-box alert" id="error-message">
+                            <span id="error-text"></span>
+                            <a href="#" class="close" id="close-error">&times;</a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <div id="interactions" class="row" style="display: none">
diff --git a/examples/browser/index.js b/examples/browser/index.js
index 882385ea5..75cca91a5 100644
--- a/examples/browser/index.js
+++ b/examples/browser/index.js
@@ -13,19 +13,31 @@
  **/
 
 function get_td(addr) {
-    servient.start().then((thingFactory) => {
-        helpers
-            .fetch(addr)
-            .then((td) => {
-                thingFactory.consume(td).then((thing) => {
-                    removeInteractions();
-                    showInteractions(thing);
+    clearAllInteractions();
+
+    servient
+        .start()
+        .then((thingFactory) => {
+            helpers
+                .fetch(addr)
+                .then((td) => {
+                    thingFactory
+                        .consume(td)
+                        .then((thing) => {
+                            showInteractions(thing);
+                            updateTabDescription(addr, td);
+                        })
+                        .catch((err) => {
+                            updateTabDescription(addr, null, "Failed to consume TD: " + err);
+                        });
+                })
+                .catch((err) => {
+                    updateTabDescription(addr, null, "Failed to fetch TD: " + err);
                 });
-            })
-            .catch((error) => {
-                window.alert("Could not fetch TD.\n" + error);
-            });
-    });
+        })
+        .catch((err) => {
+            updateTabDescription(addr, null, "Failed to start servient: " + err);
+        });
 }
 
 function showInteractions(thing) {
@@ -110,15 +122,6 @@ function showInteractions(thing) {
     }
 }
 
-function removeInteractions() {
-    for (id of ["properties", "actions", "events"]) {
-        let placeholder = document.getElementById(id);
-        while (placeholder.firstChild) {
-            placeholder.removeChild(placeholder.firstChild);
-        }
-    }
-}
-
 function showSchemaEditor(action, thing) {
     let td = thing.getThingDescription();
     // Remove old editor
@@ -163,9 +166,170 @@ function removeSchemaEditor() {
     }
 }
 
+// Error handling functions to show/hide error messages on web page instead of using alert window
+function showError(message) {
+    const errorContainer = document.getElementById("error-container");
+    const errorText = document.getElementById("error-text");
+
+    if (errorContainer && errorText) {
+        errorText.textContent = message;
+        errorContainer.style.display = "block";
+    }
+}
+
+function hideError() {
+    const errorContainer = document.getElementById("error-container");
+    if (errorContainer) {
+        errorContainer.style.display = "none";
+    }
+}
+
+function updateTabDescription(url, td, error) {
+    // Find active tab and update its description
+    const activeTab = document.querySelector(".tabs-content .content.active");
+    if (!activeTab) return;
+
+    // Update URL link
+    const urlElement = activeTab.querySelector(".td-url");
+    if (urlElement && url) {
+        urlElement.href = url;
+        urlElement.textContent = url;
+    }
+
+    // Update description
+    const descriptionElement = activeTab.querySelector(".td-description");
+    const descriptionParent = descriptionElement ? descriptionElement.closest("p") : null;
+
+    if (error) {
+        // Hide description, show error banner
+        if (descriptionParent) descriptionParent.style.display = "none";
+        showError(error);
+    } else {
+        // Show description, hide error banner
+        if (descriptionParent) descriptionParent.style.display = "";
+        if (descriptionElement) {
+            descriptionElement.textContent = td?.description || "No description available";
+            descriptionElement.style.color = "";
+        }
+        hideError();
+    }
+}
+
+// Clear all interactions and editor
+function clearAllInteractions() {
+    hideError();
+    const interactions = document.getElementById("interactions");
+    if (interactions) {
+        interactions.style.display = "none";
+    }
+    ["properties", "actions", "events"].forEach((id) => {
+        const element = document.getElementById(id);
+        if (element) element.innerHTML = "";
+    });
+    removeSchemaEditor();
+}
+
 var servient = new WoT.Core.Servient();
 servient.addClientFactory(new WoT.Http.HttpClientFactory());
 var helpers = new WoT.Core.Helpers(servient);
-document.getElementById("fetch").onclick = () => {
-    get_td(document.getElementById("td_addr").value);
+
+// Tab configuration
+const TD_URLS = {
+    testthing: "http://plugfest.thingweb.io/http-data-schema-thing",
+    smartcoffee: "http://plugfest.thingweb.io/http-advanced-coffee-machine",
+    counter: "http://plugfest.thingweb.io/counter",
 };
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Parse URL parameters to pre-fill the input field
+    let $_GET = location.search
+        .substr(1)
+        .split("&")
+        .reduce((o, i) => ((u = decodeURIComponent), ([k, v] = i.split("=")), (o[u(k)] = v && u(v)), o), {});
+
+    // Tab configuration in correct sequence
+    const tabLinks = [
+        { id: "tab-link-testthing", tab: "tab-testthing" },
+        { id: "tab-link-smartcoffee", tab: "tab-smartcoffee" },
+        { id: "tab-link-counter", tab: "tab-counter" },
+        { id: "tab-link-custom", tab: "tab-custom" },
+    ];
+
+    const tdInput = document.getElementById("td_addr");
+    const fetchBtn = document.getElementById("fetch");
+    const closeErrorBtn = document.getElementById("close-error");
+
+    // Error close button handler
+    if (closeErrorBtn) {
+        closeErrorBtn.onclick = (e) => {
+            e.preventDefault();
+            hideError();
+        };
+    }
+
+    // Pre-fill input from URL parameter if provided
+    if ($_GET["url"]) {
+        tdInput.value = $_GET["url"];
+    }
+
+    // Tab click handlers
+    tabLinks.forEach(({ id, tab }) => {
+        const link = document.getElementById(id);
+        if (link) {
+            link.addEventListener("click", function (e) {
+                e.preventDefault();
+                clearAllInteractions();
+
+                // Switch active tab
+                document.querySelectorAll("#td-tabs .tab-title").forEach((li) => li.classList.remove("active"));
+                link.parentElement.classList.add("active");
+                document.querySelectorAll(".tabs-content .content").forEach((c) => c.classList.remove("active"));
+                document.getElementById(tab).classList.add("active");
+
+                // Auto-consume TD based on tab
+                if (tab === "tab-testthing") {
+                    get_td(TD_URLS.testthing);
+                } else if (tab === "tab-smartcoffee") {
+                    get_td(TD_URLS.smartcoffee);
+                } else if (tab === "tab-counter") {
+                    get_td(TD_URLS.counter);
+                } else if (tab === "tab-custom") {
+                    // Reset custom TD tab
+                    const customDesc = document.querySelector("#tab-custom .td-description");
+                    if (customDesc) {
+                        customDesc.textContent = "Enter a TD URL above to consume it.";
+                        customDesc.style.color = "";
+                    }
+                    const customUrl = document.querySelector("#tab-custom .td-url");
+                    if (customUrl) {
+                        customUrl.href = "";
+                        customUrl.textContent = "";
+                    }
+                }
+            });
+        }
+    });
+
+    // Custom TD fetch button
+    if (fetchBtn) {
+        fetchBtn.onclick = () => {
+            if (tdInput.value) {
+                get_td(tdInput.value);
+            } else {
+                showError("Please enter a valid URL.");
+            }
+        };
+    }
+
+    // Auto-load TD if URL parameter was provided
+    if ($_GET["url"]) {
+        document.querySelectorAll("#td-tabs .tab-title").forEach((li) => li.classList.remove("active"));
+        document.getElementById("tab-link-custom").parentElement.classList.add("active");
+        document.querySelectorAll(".tabs-content .content").forEach((c) => c.classList.remove("active"));
+        document.getElementById("tab-custom").classList.add("active");
+        get_td($_GET["url"]);
+    } else {
+        // Default to Test Thing tab
+        document.getElementById("tab-link-testthing").click();
+    }
+});
diff --git a/examples/browser/smart-coffee-machine.html b/examples/browser/smart-coffee-machine.html
index c5490597f..6073873ab 100644
--- a/examples/browser/smart-coffee-machine.html
+++ b/examples/browser/smart-coffee-machine.html
@@ -56,8 +56,8 @@ <h1 class="text-center">Smart Coffee Machine</h1>
                 </p>
                 <p>
                     The Thing Description for the coffee machine is available at
-                    <a href="http://plugfest.thingweb.io:8083/smart-coffee-machine" target="_blank"
-                        >http://plugfest.thingweb.io:8083/smart-coffee-machine</a
+                    <a href="http://plugfest.thingweb.io/http-advanced-coffee-machine" target="_blank"
+                        >http://plugfest.thingweb.io/http-advanced-coffee-machine</a
                     >.
                 </p>
             </div>
diff --git a/examples/browser/styles.css b/examples/browser/styles.css
new file mode 100644
index 000000000..7d8606d14
--- /dev/null
+++ b/examples/browser/styles.css
@@ -0,0 +1,98 @@
+/* Base styles */
+body {
+    padding: 20px;
+    background: #f5f5f5;
+    font-family: Arial, sans-serif;
+}
+
+/* Top bar */
+#topbar {
+    background: white;
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+}
+
+/* Tabs */
+.tabs {
+    margin: 0 0 10px 0;
+    padding: 0;
+    list-style: none;
+    border-bottom: 1px solid #ddd;
+}
+
+.tabs li {
+    display: inline-block;
+    margin-right: 5px;
+}
+
+.tabs a {
+    display: block;
+    padding: 8px 12px;
+    text-decoration: none;
+    color: #333;
+    background: #f0f0f0;
+    border: 1px solid #ddd;
+    border-bottom: none;
+}
+
+.tabs .active a {
+    background: white;
+    border-bottom: 1px solid white;
+    margin-bottom: -1px;
+}
+
+/* Tab content */
+.tabs-content {
+    background: white;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-top: none;
+}
+
+/* Form elements */
+#td_addr,
+#exampleUrls {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+}
+
+#fetch {
+    background: #0066cc;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    cursor: pointer;
+}
+
+/* Interactions */
+#interactions {
+    margin-top: 20px;
+    background: white;
+    padding: 15px;
+    border: 1px solid #ddd;
+}
+
+#interactions h4 {
+    margin-top: 0;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eee;
+}
+
+/* Navigation */
+.side-nav {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.side-nav li {
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.side-nav li:last-child {
+    border-bottom: none;
+}