diff --git a/index.html b/index.html
index c4edea5..b7f5688 100644
--- a/index.html
+++ b/index.html
@@ -21,43 +21,6 @@
         examples-repo-add-url="https://github.com/sib-swiss/sparql-examples/new/master/examples/UniProt"
         add-limit="1000"
       ></sparql-editor>
-      <!-- MULTI with children -->
-      <!-- <sparql-editor
-        endpoint="https://sparql.uniprot.org/sparql/,https://www.bgee.org/sparql/,https://sparql.omabrowser.org/sparql/,https://beta.sparql.swisslipids.org/,https://sparql.rhea-db.org/sparql/,https://biosoda.unil.ch/graphdb/repositories/emi-dbgi,https://hamap.expasy.org/sparql/,https://rdf.metanetx.org/sparql/,https://idsm.elixir-czech.cz/sparql/endpoint/idsm"
-        examples-repo-add-url="https://github.com/sib-swiss/sparql-examples/new/master/examples/UniProt"
-        add-limit="1000"
-      >
-        <h4>Metadata-based SPARQL editor</h4>
-        <p>Metadata used by this editor are automatically retrieved by querying the endpoints:</p>
-        <ul>
-          <li>Context-aware autocomplete for classes and predicates based on the content of the endpoints</li>
-          <li>Example queries</li>
-          <li>Commonly used prefixes</li>
-        </ul>
-        <p>
-          See the <a href="https://github.com/sib-swiss/sparql-editor" target="_blank">repository</a> for more details,
-          or the <a href="check">check page</a> to check if an endpoint contains the necessary metadata.
-        </p>
-        <h4>About</h4>
-        <p>
-          This SPARQL endpoint contains all UniProt data. It is free to access and supports the
-          <a href="http://www.w3.org/TR/sparql11-query/">SPARQL 1.1 Standard</a>.
-        </p>
-        <p>
-          There are 186,631,773,819 triples in this release (2024_04). The query timeout is 45 minutes. All triples are
-          available in the default graph. There are 22 named graphs.
-        </p>
-        <h4>Documentation</h4>
-        <ol>
-          <li><a href="http://purl.uniprot.org/core/">Classes and predicates defined by the UniProt consortium</a></li>
-          <li>
-            <a href="https://github.com/sib-swiss/sparql-training/tree/master/uniprot"
-              >Tutorial on using SPARQL with UniProt</a
-            >
-          </li>
-          <li><a href="/.well-known/void">Statistics and diagrams</a></li>
-        </ol>
-      </sparql-editor> -->
 
       <!-- BGEE -->
       <!-- <sparql-editor endpoint="https://www.bgee.org/sparql/">
diff --git a/src/sparql-editor.ts b/src/sparql-editor.ts
index 1991e0b..f62e33f 100644
--- a/src/sparql-editor.ts
+++ b/src/sparql-editor.ts
@@ -19,6 +19,7 @@ import {
   getServiceUriForCursorPosition,
   compressUri,
   defaultPrefixes,
+  generateTabLabel,
   getClassesFallback,
   getPredicatesFallback,
 } from "./utils";
@@ -69,7 +70,7 @@ export class SparqlEditor extends HTMLElement {
       throw new Error("No endpoint provided. Please use the 'endpoint' attribute to specify the SPARQL endpoint URL.");
 
     this.addLimit = Number(this.getAttribute("add-limit")) || null;
-    this.examplesOnMainPage = Number(this.getAttribute("examples-on-main-page")) || 10;
+    this.examplesOnMainPage = Number(this.getAttribute("examples-on-main-page")) || 8;
     this.examplesRepoAddUrl = this.getAttribute("examples-repo-add-url");
     this.examplesRepo = this.getAttribute("examples-repository");
     if (this.examplesRepoAddUrl && !this.examplesRepo) this.examplesRepo = this.examplesRepoAddUrl.split("/new/")[0];
@@ -88,12 +89,13 @@ export class SparqlEditor extends HTMLElement {
     }
     this.className = "sparql-editor-container";
     this.innerHTML = `
-      <div id="sparql-text-editor">
+      <div style="width: 100%;">
         <a id="status-link" href="" target="_blank" title="Loading..." style="display: inline-flex; width: 16px; height: 16px;">
           <div id="status-light" style="width: 10px; height: 10px; background-color: purple; border-radius: 50%; margin: 0 auto;"></div>
         </a>
         <button id="sparql-add-prefixes-btn" class="btn" style="margin-bottom: 0.3em;">Add common prefixes</button>
         <button id="sparql-save-example-btn" class="btn" style="margin-bottom: 0.3em;">Save query as example</button>
+        <button id="sparql-examples-top-btn" class="btn" style="margin-bottom: 0.3em;">Browse examples</button>
         <button id="sparql-clear-cache-btn" class="btn" style="margin-bottom: 0.3em;">Clear cache</button>
         <div id="yasgui"></div>
         <div id="loading-spinner" style="display: flex; justify-content: center; align-items: center; height: 100px; flex-direction: column;">
@@ -101,10 +103,6 @@ export class SparqlEditor extends HTMLElement {
           <p style="margin-top: 10px; text-align: center;">Loading editor...</p>
         </div>
       </div>
-      <div>
-        <div id="sparql-examples"></div>
-        <slot></slot>
-      </div>
     `;
     this.appendChild(style);
 
@@ -181,13 +179,14 @@ export class SparqlEditor extends HTMLElement {
   }
 
   // Load current endpoint in the YASGUI input box
-  async loadCurrentEndpoint(endpoint: string = this.endpointUrl()) {
+  async loadCurrentEndpoint(endpoint: string = this.endpointUrl(), forceExamplesReload: boolean = false) {
     // console.log("Switching endpoint", endpoint);
     await this.getMetadata(endpoint);
-    await this.showExamples();
+    await this.showExamples(forceExamplesReload);
     // @ts-ignore set default query when new tab
     this.yasgui.config.yasqe.value =
       this.addPrefixesToQuery(this.currentEndpoint().examples[0]?.query) || Yasgui.Yasqe.defaults.value;
+
     Yasgui.Yasr.defaults.prefixes = this.meta[endpoint].prefixes;
     // Update the statusLight
     const statusLight = this.querySelector("#status-light") as HTMLElement;
@@ -245,7 +244,10 @@ export class SparqlEditor extends HTMLElement {
       setTimeout(() => this.loadCurrentEndpoint());
     });
     this.yasgui?.on("endpointHistoryChange", () => {
-      setTimeout(() => this.loadCurrentEndpoint());
+      setTimeout(() => this.loadCurrentEndpoint(this.endpointUrl(), true));
+    });
+    this.yasgui?.on("tabAdd", () => {
+      setTimeout(() => this.showExamples());
     });
 
     // Button to clear and update cache of SPARQL endpoints metadata
@@ -554,20 +556,37 @@ ex:${exampleUri} a sh:SPARQLExecutable${
     }
   }
 
-  async showExamples() {
+  async showExamples(forceReload: boolean = false) {
     // Display examples on the main page and in a dialog for the currently selected endpoint
-    const exampleQueriesEl = this.querySelector("#sparql-examples") as HTMLElement;
+    const existingExampleQueriesEl = this.querySelector(".active .sparql-examples") as HTMLButtonElement;
+    const examplesTopBtnEl = this.querySelector("#sparql-examples-top-btn") as HTMLButtonElement;
+    const btnTextContent = `Browse ${this.currentEndpoint().examples.length} examples`;
+    if (this.currentEndpoint().examples.length === 0) {
+      existingExampleQueriesEl?.remove();
+      examplesTopBtnEl.style.display = "none";
+      return;
+    } else {
+      examplesTopBtnEl.textContent = btnTextContent;
+      examplesTopBtnEl.style.display = "inline-block";
+    }
+    if (existingExampleQueriesEl && !forceReload) {
+      return;
+    }
+    if (existingExampleQueriesEl) existingExampleQueriesEl?.remove();
+    const yasqeEl = this.querySelector(".active .yasqe") as HTMLElement;
+    const yasqeElParent = yasqeEl.parentElement as HTMLElement;
+    const exampleQueriesEl = document.createElement("div");
+    exampleQueriesEl.className = "sparql-examples";
     exampleQueriesEl.innerHTML = "";
-    if (this.currentEndpoint().examples.length === 0) return;
-    // Add title for examples
-    const exQueryTitleDiv = document.createElement("div");
-    exQueryTitleDiv.style.textAlign = "center";
-    const exQueryTitle = document.createElement("h3");
-    exQueryTitle.style.margin = "0.1em";
-    exQueryTitle.style.fontWeight = "200";
-    exQueryTitle.textContent = "Examples";
-    exQueryTitleDiv.appendChild(exQueryTitle);
-    exampleQueriesEl.appendChild(exQueryTitleDiv);
+    // TODO: remove title for examples?
+    // const exQueryTitleDiv = document.createElement("div");
+    // exQueryTitleDiv.style.textAlign = "center";
+    // const exQueryTitle = document.createElement("h3");
+    // exQueryTitle.style.margin = "0.1em";
+    // exQueryTitle.style.fontWeight = "200";
+    // exQueryTitle.textContent = "Examples";
+    // exQueryTitleDiv.appendChild(exQueryTitle);
+    // exampleQueriesEl.appendChild(exQueryTitleDiv);
 
     // Create dialog for examples
     const exQueryDialog = document.createElement("dialog");
@@ -586,7 +605,7 @@ ex:${exampleUri} a sh:SPARQLExecutable${
     exDialogCloseBtn.style.top = "1.5em";
     exDialogCloseBtn.style.right = "2em";
     exQueryDialog.appendChild(exDialogCloseBtn);
-    exampleQueriesEl.appendChild(exQueryDialog);
+    yasqeElParent.appendChild(exQueryDialog);
 
     // Add examples to the main page and dialog
     this.currentEndpoint().examples.forEach(async (example, index) => {
@@ -601,7 +620,7 @@ ex:${exampleUri} a sh:SPARQLExecutable${
       useBtn.style.marginLeft = "0.5em";
       useBtn.className = "btn sparqlExampleButton";
       useBtn.addEventListener("click", () => {
-        this.addTab(example.query, index);
+        this.addTab(example.query, example.comment);
         exQueryDialog.close();
       });
       exQueryP.appendChild(useBtn);
@@ -614,7 +633,7 @@ ex:${exampleUri} a sh:SPARQLExecutable${
         cloneExQueryDiv.className = "main-query-example";
         // Cloning does not include click event so we need to redo it :(
         cloneExQueryDiv.lastChild?.lastChild?.addEventListener("click", () => {
-          this.addTab(example.query, index);
+          this.addTab(example.query, example.comment);
         });
         exampleQueriesEl.appendChild(cloneExQueryDiv);
       }
@@ -650,10 +669,14 @@ ex:${exampleUri} a sh:SPARQLExecutable${
 
     // Add button to open dialog
     const openExDialogBtn = document.createElement("button");
-    openExDialogBtn.textContent = `Browse ${this.currentEndpoint().examples.length} examples`;
+    openExDialogBtn.textContent = btnTextContent;
     openExDialogBtn.className = "btn";
     exampleQueriesEl.appendChild(openExDialogBtn);
 
+    examplesTopBtnEl.addEventListener("click", () => {
+      exQueryDialog.showModal();
+      document.body.style.overflow = "hidden";
+    });
     openExDialogBtn.addEventListener("click", () => {
       exQueryDialog.showModal();
       document.body.style.overflow = "hidden";
@@ -665,6 +688,20 @@ ex:${exampleUri} a sh:SPARQLExecutable${
     exQueryDialog.addEventListener("close", () => {
       document.body.style.overflow = "";
     });
+
+    // Add the examples next to the YASQE editor
+    // yasqeEl.style.height = "100%";
+    yasqeEl.style.width = "100%";
+    exampleQueriesEl.style.width = "50%";
+    yasqeElParent.style.display = "flex";
+    yasqeElParent.appendChild(exampleQueriesEl);
+    const yasqe = this.yasgui?.getTab()?.getYasqe();
+    yasqe?.expandEditor();
+    // if (exampleQueriesEl.offsetHeight > 0) {
+    //   Yasgui.Yasqe.defaults.editorHeight = `${exampleQueriesEl.offsetHeight}px`;
+    //   const yasqe = this.yasgui?.getTab()?.getYasqe();
+    //   yasqe?.expandEditor();
+    // }
   }
 
   addPrefixesToQuery(query: string) {
@@ -698,10 +735,10 @@ ex:${exampleUri} a sh:SPARQLExecutable${
     }
   }
 
-  addTab(query: string, index: number) {
+  addTab(query: string, label: string) {
     this.yasgui?.addTab(true, {
       ...Yasgui.Tab.getDefaults(),
-      name: `Query ${index + 1}`,
+      name: generateTabLabel(label),
       requestConfig: {
         ...Yasgui.defaults.requestConfig,
         endpoint: this.endpointUrl(),
diff --git a/src/styles.ts b/src/styles.ts
index 879943b..4061727 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -21,30 +21,39 @@ export const editorCss = `.sparql-editor-container a {
   display: flex;
   flex-direction: row;
 }
-.sparql-editor-container #sparql-text-editor {
-  flex: 0 0 60%;
-  margin-right: 1em;
-}
-.sparql-editor-container #sparql-examples {
-  flex-grow: 1;
-  border-left: 1px solid #ccc;
+.sparql-editor-container .sparql-examples {
   padding-left: 1em;
 }
 @media (max-width: 600px) {
   .sparql-editor-container {
     flex-direction: column;
   }
-  .sparql-editor-container #sparql-text-editor {
-    margin-right: 0;
+  .sparql-editor-container .sparql-examples {
+    display: none;
   }
-  .sparql-editor-container #sparql-examples {
-    border-left: none;
-    padding-left: 0;
-    border-top: 1px solid #ccc;
-    padding-top: 1em;
+  .sparql-editor-container #sparql-examples-top-btn {
+    display: inline-block;
+  }
+//   .sparql-editor-container .sparql-examples {
+//     border-left: none;
+//     padding-left: 0;
+//     border-top: 1px solid #ccc;
+//     padding-top: 1em;
+//   }
+}
+@media (min-width: 600px) {
+  // .sparql-editor-container {
+  //   flex-direction: column;
+  // }
+  // .sparql-editor-container .sparql-examples {
+  //   display: none;
+  // }
+  .sparql-editor-container #sparql-examples-top-btn {
+    display: none !important;
   }
 }
 
+
 .sparql-editor-container {
     --btn-color: #e30613;
     --btn-bg-color: #f8bca5;
diff --git a/src/utils.ts b/src/utils.ts
index d11676a..e5d8a9e 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -256,6 +256,45 @@ export function getServiceUriForCursorPosition(query: string, lineNumber: number
   return null;
 }
 
+// Automatically generates a tab label from a query description by removing small words and stopwords
+export function generateTabLabel(description: string): string {
+  // const stopwords = ['all', 'with', 'and', 'the', 'on', 'of', 'in', 'for', 'a', 'an', 'entries', 'annotated'];
+  const ignoreStopwords = [
+    "select",
+    "that",
+    "with",
+    "entries",
+    "annotated",
+    "were",
+    "triples",
+    "relate",
+    "entry",
+    "each",
+    "using",
+    "where",
+    "find",
+    "list",
+    "sometimes",
+    "known",
+    "their",
+    "them",
+    "from",
+    "these",
+  ];
+  // Remove HTML tags and parenthesis
+  const words = description
+    .replace(/<\/?[^>]+(>|$)/g, "")
+    .replace(/[(),]/gm, "")
+    .split(" ");
+  const filteredWords = words.filter(word => !ignoreStopwords.includes(word.toLowerCase()) && word.length > 3);
+  const label = filteredWords.slice(0, 3).join(" ");
+  const capitalizedLabel = label
+    .split(" ")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+  return capitalizedLabel;
+}
+
 // NOTE: In case we need to store the counts
 // type VoidDict2 = {
 //   // Subject class