diff --git a/tests/gui/vuejs/noogle/src/App.vue b/tests/gui/vuejs/noogle/src/App.vue
index 91b597d..fbbcd6f 100644
--- a/tests/gui/vuejs/noogle/src/App.vue
+++ b/tests/gui/vuejs/noogle/src/App.vue
@@ -27,7 +27,7 @@ header {
   margin: 0 auto 2rem;
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
   header {
     display: flex;
     place-items: center;
diff --git a/tests/gui/vuejs/noogle/src/app.css b/tests/gui/vuejs/noogle/src/app.css
index 5458f15..1c567eb 100644
--- a/tests/gui/vuejs/noogle/src/app.css
+++ b/tests/gui/vuejs/noogle/src/app.css
@@ -23,8 +23,8 @@ a,
 }
 
 .purple {
+  @apply  text-nostr;
   text-decoration: none;
-  color: #8453f1;
   transition: 0.4s;
   padding: 3px;
 }
diff --git a/tests/gui/vuejs/noogle/src/components/Nip07.vue b/tests/gui/vuejs/noogle/src/components/Nip07.vue
index 7153818..b8aefeb 100644
--- a/tests/gui/vuejs/noogle/src/components/Nip07.vue
+++ b/tests/gui/vuejs/noogle/src/components/Nip07.vue
@@ -10,7 +10,7 @@
     <template v-if="!current_user">
           <div className="dropdown">
       <div tabIndex={0} role="button" class="v-Button" >Sign in</div>
-      <div tabIndex={0} className="dropdown-content z-[1] card card-compact w-64 p-2 shadow bg-primary text-primary-content">
+      <div tabIndex={0} className="dropdown-content -start-44 z-[1] horizontal card card-compact w-64 p-2 shadow bg-primary text-primary-content">
         <div className="card-body">
           <h3 className="card-title">Nip07 Login</h3>
           <p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
@@ -91,14 +91,9 @@ export default {
         let database =  await NostrDatabase.open("test.db")
         let client = new ClientBuilder().database(database).signer(this.signer).build()
 
-
-        await client.addRelay("wss://relay.damus.io");
-        await client.addRelay("wss://nos.lol");
-        await client.addRelay("wss://relay.f7z.io")
-        await client.addRelay("wss://pablof7z.nostr1.com")
-        await client.addRelay("wss://relay.nostr.net")
-        await client.addRelay("wss://relay.nostr.band");
-        await client.addRelay("wss://nostr-pub.wellorder.net")
+        for (const relay of store.state.relays){
+           await client.addRelay(relay);
+        }
 
         const pubkey =  keys.publicKey
         await client.connect();
@@ -162,14 +157,9 @@ export default {
         let database =  await NostrDatabase.open("test.db")
         let client = new ClientBuilder().database(database).signer(this.signer).build()
 
-
-        await client.addRelay("wss://relay.damus.io");
-        await client.addRelay("wss://nos.lol");
-        await client.addRelay("wss://relay.f7z.io")
-        await client.addRelay("wss://pablof7z.nostr1.com")
-        await client.addRelay("wss://relay.nostr.net")
-        await client.addRelay("wss://relay.nostr.band");
-        await client.addRelay("wss://nostr-pub.wellorder.net")
+        for (const relay of store.state.relays){
+                 await client.addRelay(relay);
+              }
 
         const pubkey = await nip07_signer.getPublicKey();
         await client.connect();
@@ -196,7 +186,7 @@ export default {
 
 
         await this.get_user_info(pubkey)
-        miniToastr.showMessage("Login successful!", "Logged in as " + this.current_user, VueNotifications.types.success)
+        //miniToastr.showMessage("Login successful!", "Logged in as " + this.current_user, VueNotifications.types.success)
 
 
 
@@ -267,9 +257,10 @@ export default {
 
 }
 .v-Button {
-  @apply bg-black hover:bg-nostr focus:ring-nostr mb-2 inline-flex flex-none items-center rounded-lg border border-nostr px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
-  margin-right: 200px;
+  @apply bg-black  text-center hover:bg-nostr focus:ring-nostr mb-2 inline-flex flex-none items-center rounded-lg border border-nostr px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
+  margin-right: 14px;
   height: 44px;
+  width: 70px
 }
 
 .c-Button {
diff --git a/tests/gui/vuejs/noogle/src/components/Nip89.vue b/tests/gui/vuejs/noogle/src/components/Nip89.vue
index 9f9157e..fee0060 100644
--- a/tests/gui/vuejs/noogle/src/components/Nip89.vue
+++ b/tests/gui/vuejs/noogle/src/components/Nip89.vue
@@ -5,7 +5,7 @@
       <p>Loading Nip89s.. </p>
        <span className="loading loading-dots loading-lg"  ></span>
     </div>
-    <div class="grid grid-cols-3 gap-6">
+    <div class="grid grid-cols-2 gap-6">
         <div className="card w-70 bg-base-100 shadow-xl"  v-for="dvm in store.state.nip89dvms"
             :key="dvm.name">
         <figure><img :src="dvm.image" alt="DVM Picture" /></figure>
diff --git a/tests/gui/vuejs/noogle/src/components/Search.vue b/tests/gui/vuejs/noogle/src/components/Search.vue
index 08dff21..6b9e39f 100644
--- a/tests/gui/vuejs/noogle/src/components/Search.vue
+++ b/tests/gui/vuejs/noogle/src/components/Search.vue
@@ -1,5 +1,16 @@
 <script setup>
-import {Client, Filter, Timestamp, Event, Metadata, PublicKey, EventBuilder, Tag, EventId} from "@rust-nostr/nostr-sdk";
+import {
+  Client,
+  Filter,
+  Timestamp,
+  Event,
+  Metadata,
+  PublicKey,
+  EventBuilder,
+  Tag,
+  EventId,
+  Nip19Event
+} from "@rust-nostr/nostr-sdk";
 import store from '../store';
 import miniToastr from "mini-toastr";
 import VueNotifications from "vue-notifications";
@@ -8,6 +19,9 @@ let items = []
 
 let listener = false
 
+
+
+
 async function send_search_request(message) {
    try {
      if (message === undefined){
@@ -144,13 +158,17 @@ async function  listen() {
               for (const evt of events){
                      let p = profiles.find( record => record.author === evt.author.toHex())
                       let bech32id = evt.id.toBech32()
+                      let nip19 = new Nip19Event(event.id, event.author, store.state.relays)
+                      let nip19bech32 = nip19.toBech32()
                       let picture = p === undefined ? "../assets/nostr-purple.svg" : p["profile"]["picture"]
                       let name = p === undefined ? bech32id : p["profile"]["name"]
                       let highlighterurl = "https://highlighter.com/a/" + bech32id
                       let njumpurl = "https://njump.me/" + bech32id
-                      let nostrudelurl = "https://nostrudel.ninja/#/n/" + evt.id.toBech32()
+                      let nostrudelurl = "https://nostrudel.ninja/#/n/" + bech32id
+                      let uri =  "nostr:" + bech32id //  nip19.toNostrUri()
+
                       if (!items.find(e => e.id === evt.id)) {
-                          items.push({id:evt.id,  content: evt.content, author: name, authorurl: "https://njump.me/" + evt.author.toBech32(), links: {"highlighter": highlighterurl, "njump": njumpurl, "nostrudel": nostrudelurl} , avatar: picture,  indicator: {"time": evt.createdAt.toHumanDatetime()}})
+                          items.push({id:evt.id,  content: evt.content, author: name, authorurl: "https://njump.me/" + evt.author.toBech32(), links: {"uri": uri, "highlighter": highlighterurl, "njump": njumpurl, "nostrudel": nostrudelurl} , avatar: picture,  indicator: {"time": evt.createdAt.toHumanDatetime()}})
                       }
 
 
@@ -169,12 +187,28 @@ async function  listen() {
 }
 
 
+function nextInput(e) {
+  const next = e.currentTarget.nextElementSibling;
+  if (next) {
+    next.focus();
+
+  }
+}
+function prevInput(e) {
+  const prev = e.currentTarget.previousElementSibling;
+  if (prev) {
+    prev.focus();
+  }
+}
+
+
 defineProps({
   msg: {
     type: String,
     required: false
   },
 
+
 })
 
 </script>
@@ -193,7 +227,10 @@ defineProps({
     <h3>
 
       <br>
-          <input class="c-Input" v-model="message">
+
+          <!-- <input class="c-Input" v-model="message"  @keyup.enter="send_search_request(message)"> -->
+        <input class="c-Input" v-model="message"  @keyup.enter="send_search_request(message)" @keydown.enter="nextInput">
+
           <button class="v-Button"  @click="send_search_request(message)">Search the Nostr
           </button>
 
@@ -217,7 +254,7 @@ defineProps({
     @apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
 
 
-  width: 400px;
+  width: 350px;
   height: 48px;
    color: white;
   background: black;
diff --git a/tests/gui/vuejs/noogle/src/components/SearchResultTable.vue b/tests/gui/vuejs/noogle/src/components/SearchResultTable.vue
index f87ae2a..8066cb4 100644
--- a/tests/gui/vuejs/noogle/src/components/SearchResultTable.vue
+++ b/tests/gui/vuejs/noogle/src/components/SearchResultTable.vue
@@ -1,28 +1,35 @@
 <template>
-  <EasyDataTable class="customize-table" v-if="store.state.results.length != 0" table-class-name="customize-table"
+  <EasyDataTable class="customize-table" alternating  header-text-direction="left" expand  v-if="store.state.results.length != 0" table-class-name="customize-table"
     :headers="headers"
     :items="store.state.results">
-   <template #item-content="{ content, author, authorurl, avatar}">
+   <template #item-content="{ content, author, authorurl, avatar, indicator, links}">
    <div class="playeauthor-wrapper">
       <img class="avatar" :src="avatar" alt="" />
-         <a class="purple" :href="authorurl" target="_blank">{{ author }}</a> </div>
-     <p>{{content}}</p>
-     </template>
-    <template #expand="item">
-      <div style="padding: 15px; text-align: left;" >
-          <a class="menu" :href="item.links.njump" target="_blank">NJump</a>
-          <a class="menu" :href="item.links.highlighter" target="_blank">Highlighter</a>
-          <a  class="menu":href="item.links.nostrudel" target="_blank">Nostrudel</a>
-      </div>
-    </template>
-     <template #item-indicator.time="{ indicator}">
-
-        <div className="tooltip" :data-tip="indicator.time">
-          {{indicator.time.split("T")[1].split("Z")[0].trim()}}<br>
+         <a class="purple" :href="authorurl" target="_blank">{{ author }}</a>
+     <div class="time"  :data-tip="indicator.time">
+          {{indicator.time.split("T")[1].split("Z")[0].trim()}}
           {{indicator.time.split("T")[0].split("-")[2].trim()}}.{{indicator.time.split("T")[0].split("-")[1].trim()}}.{{indicator.time.split("T")[0].split("-")[0].trim().slice(2)}}
         </div>
+   </div>
 
+     <p>{{content.substr(0, 320) + "\u2026"}}</p>
+        <div style="padding: 2px; text-align: left;" >
+          <a class="menusmall" :href="links.uri" target="_blank">Nostr Client</a>
+          <a class="menusmall" :href="links.njump" target="_blank">NJump</a>
+          <a class="menusmall" :href="links.highlighter" target="_blank">Highlighter</a>
+          <!-- <a class="menusmall":href="links.nostrudel" target="_blank">Nostrudel</a> -->
+      </div>
+   <!--   <p>{{content}}</p> -->
      </template>
+    <!--<template #expand="item">
+      <div style="padding: 15px; text-align: left;" >
+          <a class="menu" :href="item.links.uri" target="_blank">Nostr Client</a>
+          <a class="menu" :href="item.links.njump" target="_blank">NJump</a>
+          <a class="menu" :href="item.links.highlighter" target="_blank">Highlighter</a>
+          <a class="menu":href="item.links.nostrudel" target="_blank">Nostrudel</a>
+      </div>
+    </template> -->
+
 
       </EasyDataTable>
 </template>
@@ -36,8 +43,8 @@ import store from '../store';
 
 
 const headers: Header[] = [
-  { text: "Results:", value: "content", fixed: true,  width: 800},
-  { text: "Time", value: "indicator.time", sortable: true, width:100},
+  { text: "Results:", value: "content", fixed:true},
+ // { text: "Time", value: "indicator.time", sortable: true, },
 ];
 </script>
 
@@ -52,6 +59,24 @@ const headers: Header[] = [
   align-items: center;
   justify-items: center;
 }
+
+.menusmall {
+  @apply btn text-gray-600 bg-transparent border-transparent tracking-wide;
+
+
+  }
+
+.vue3-easy-data-table__footer.previous-page__click-button{
+  height:100px
+}
+
+.time {
+  padding: 6px;
+  display: flex;
+  font-size: 1em;
+  align-items: center;
+  justify-items: center;
+}
 .avatar {
   margin-right: 10px;
   display: inline-block;
@@ -62,6 +87,7 @@ const headers: Header[] = [
   box-shadow: inset 0 4px 4px 0 rgb(0 0 0 / 10%);
 }
 .customize-table {
+
   --easy-table-border: 1px solid #000000;
   --easy-table-row-border: 1px solid #000000;
 
@@ -96,6 +122,12 @@ const headers: Header[] = [
   --easy-table-rows-per-page-selector-z-index: 1;
 
 
+  --next-page__click-button : #c0c7d2;
+
+
+
+
+
   --easy-table-scrollbar-track-color: #2d3a4f;
   --easy-table-scrollbar-color: #2d3a4f;
   --easy-table-scrollbar-thumb-color: #4c5d7a;;
diff --git a/tests/gui/vuejs/noogle/src/store.js b/tests/gui/vuejs/noogle/src/store.js
index 7f6a79f..f5033db 100644
--- a/tests/gui/vuejs/noogle/src/store.js
+++ b/tests/gui/vuejs/noogle/src/store.js
@@ -10,7 +10,8 @@ const store = createStore({
       pubkey: PublicKey,
       hasEventListener: false,
       nip89dvms: [],
-      results:  []
+      results:  [],
+      relays: ["wss://relay.damus.io", "wss://nos.lol", "wss://relay.f7z.io", "wss://pablof7z.nostr1.com", "wss://relay.nostr.net", "wss://relay.nostr.net", "wss://relay.nostr.band", "wss://nostr-pub.wellorder.net"],
     }
   },
   mutations: {