diff --git a/tests/gui/vuejs/noogle/package.json b/tests/gui/vuejs/noogle/package.json
index 010a139..e9e543e 100644
--- a/tests/gui/vuejs/noogle/package.json
+++ b/tests/gui/vuejs/noogle/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@rust-nostr/nostr-sdk": "^0.8.0",
     "bootstrap": "^5.3.2",
+    "daisyui": "^4.6.0",
     "mini-toastr": "^0.8.1",
     "vue": "^3.4.15",
     "vue-notifications": "^1.0.2",
diff --git a/tests/gui/vuejs/noogle/src/App.vue b/tests/gui/vuejs/noogle/src/App.vue
index 1381c7f..91b597d 100644
--- a/tests/gui/vuejs/noogle/src/App.vue
+++ b/tests/gui/vuejs/noogle/src/App.vue
@@ -9,10 +9,8 @@ import Nip07 from "@/components/Nip07.vue";
 
   <main>
     <ThreeColumnLayout>
-      <Home></Home>
-
       <template #aside>
-          <Nip07/>
+
     </template>
     </ThreeColumnLayout>
 
diff --git a/tests/gui/vuejs/noogle/src/app.css b/tests/gui/vuejs/noogle/src/app.css
index 1c50ce6..a4f2e6b 100644
--- a/tests/gui/vuejs/noogle/src/app.css
+++ b/tests/gui/vuejs/noogle/src/app.css
@@ -20,4 +20,12 @@ a,
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
   padding: 3px;
-}
\ No newline at end of file
+}
+.menu {
+color: white;
+    @apply btn bg-transparent border-transparent;
+
+  }
+
+
+
diff --git a/tests/gui/vuejs/noogle/src/assets/usercard.png b/tests/gui/vuejs/noogle/src/assets/usercard.png
new file mode 100644
index 0000000..a83e51a
Binary files /dev/null and b/tests/gui/vuejs/noogle/src/assets/usercard.png differ
diff --git a/tests/gui/vuejs/noogle/src/components/AboutPage.vue b/tests/gui/vuejs/noogle/src/components/AboutPage.vue
index 3cf54f1..bd31585 100644
--- a/tests/gui/vuejs/noogle/src/components/AboutPage.vue
+++ b/tests/gui/vuejs/noogle/src/components/AboutPage.vue
@@ -1,13 +1,69 @@
-<script>
+<template>
+  <!-- <div className="card w-96 bg-base-100 shadow-xl">
+  <figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" /></figure>
+  <div className="card-body">
+    <h2 className="card-title">Shoes!</h2>
+    <p>If a dog chews shoes whose shoes does he choose?</p>
+    <div className="card-actions justify-end">
+      <button className="btn btn-primary">Buy Now</button>
+    </div>
+  </div>
+</div> -->
+
+  <div className="chat chat-start">
+  <div className="chat-image avatar">
+    <div className="w-10 rounded-full">
+      <img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+    </div>
+  </div>
+  <div className="chat-bubble">NIP 90 Data Vending Machines can perform multiple tasks leveraging the Nostr Protocol.</div>
+</div>
+<div className="chat chat-start">
+  <div className="chat-image avatar">
+    <div className="w-10 rounded-full">
+      <img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+    </div>
+  </div>
+  <div className="chat-bubble">This Demo Application uses a Kind 5302 event to ask DVMs to search for content on the Nostr.</div>
+</div>
+  <div className="chat chat-start">
+  <div className="chat-image avatar">
+    <div className="w-10 rounded-full">
+      <img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+    </div>
+  </div>
+  <div className="chat-bubble">This page then combines all the results.</div>
+</div>
+<div className="chat chat-start">
+  <div className="chat-image avatar">
+    <div className="w-10 rounded-full">
+      <img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+    </div>
+  </div>
+  <div className="chat-bubble">This way we will be able to decentralize the most centralized thing on the internet. Search.</div>
+</div>
+</template>
+  <script>
 export default {
-  name: "AboutPage"
+    name: 'dailyUIdemo',
+    props: {
+        msg: String
+    }
 }
 </script>
-
-<template>
-<p>Hello</p>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+  <style scoped>
+  h3 {
+      margin: 40px 0 0;
+  }
+  ul {
+      list-style-type: none;
+      padding: 0;
+  }
+  li {
+      display: inline-block;
+      margin: 0 10px;
+  }
+  a {
+      color: #42b983;
+  }
+  </style>
\ No newline at end of file
diff --git a/tests/gui/vuejs/noogle/src/components/Donate.vue b/tests/gui/vuejs/noogle/src/components/Donate.vue
index 344af26..8cc3b5c 100644
--- a/tests/gui/vuejs/noogle/src/components/Donate.vue
+++ b/tests/gui/vuejs/noogle/src/components/Donate.vue
@@ -52,7 +52,7 @@ export default {
 <template>
 
 
-<button class="v-Button" @click="zap()"><svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+<button class="v-Button" @click="zap()"><svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
 Donate</button>
 
 
@@ -63,7 +63,7 @@ Donate</button>
 
 
 .v-Button {
- @apply bg-black hover:bg-amber-400 focus:ring-purple-950 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;
+ @apply bg-black hover:bg-amber-400 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;
    height: 24px;
 
 
diff --git a/tests/gui/vuejs/noogle/src/components/Nip07.vue b/tests/gui/vuejs/noogle/src/components/Nip07.vue
index 28543cc..1b82cd6 100644
--- a/tests/gui/vuejs/noogle/src/components/Nip07.vue
+++ b/tests/gui/vuejs/noogle/src/components/Nip07.vue
@@ -8,11 +8,20 @@
      <button class="v-Button" @click="sign_out()">Sign out</button>
     </template> -->
     <template v-if="!current_user">
-     <button class="v-Button" @click="sign_in()">Sign in</button>
-      <p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
-    </template>
+          <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 className="card-body">
+          <h3 className="card-title">Nip07 Login</h3>
+          <p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
+          <button className="btn" @click="sign_in()">Nip07 Sign in</button>
+        </div>
+      </div>
+    </div>
 
 
+    </template>
+
   </div>
 </template>
 
@@ -41,7 +50,15 @@ export default {
     };
   },
   async mounted() {
-    await this.sign_in();
+     try{
+       //let testsginer = new Nip07Signer()
+      await this.sign_in()
+     }
+    catch (error){
+       console.log(error);
+        console.log("nah");
+    }
+
   },
 
   methods: {
@@ -172,7 +189,8 @@ 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;
-   height: 44px;
+  margin-right: 200px;
+  height: 44px;
 }
 
 .c-Button {
diff --git a/tests/gui/vuejs/noogle/src/components/ResultTable.vue b/tests/gui/vuejs/noogle/src/components/ResultTable.vue
index c40b914..804e5fe 100644
--- a/tests/gui/vuejs/noogle/src/components/ResultTable.vue
+++ b/tests/gui/vuejs/noogle/src/components/ResultTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <EasyDataTable v-if="store.state.results.length != 0" table-class-name="customize-table"
+  <EasyDataTable class="customize-table" 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}">
@@ -33,7 +33,7 @@ const headers: Header[] = [
 ];
 </script>
 
-<style>
+<style scoped>
 .operation-wrapper .operation-icon {
   width: 20px;
   cursor: pointer;
@@ -60,24 +60,24 @@ const headers: Header[] = [
   --easy-table-header-font-size: 14px;
   --easy-table-header-height: 50px;
   --easy-table-header-font-color: #c1cad4;
-  --easy-table-header-background-color: #2d3a4f;
+  --easy-table-header-background-color: #242424;
 
   --easy-table-header-item-padding: 10px 15px;
 
   --easy-table-body-even-row-font-color: #fff;
-  --easy-table-body-even-row-background-color: #4c5d7a;
+  --easy-table-body-even-row-background-color: #242424;
 
   --easy-table-body-row-font-color: #c0c7d2;
-  --easy-table-body-row-background-color: #2d3a4f;
+  --easy-table-body-row-background-color: #242424;
   --easy-table-body-row-height: 50px;
   --easy-table-body-row-font-size: 14px;
 
   --easy-table-body-row-hover-font-color: #2d3a4f;
-  --easy-table-body-row-hover-background-color: #eee;
+  --easy-table-body-row-hover-background-color: #242424;
 
   --easy-table-body-item-padding: 10px 15px;
 
-  --easy-table-footer-background-color: #2d3a4f;
+  --easy-table-footer-background-color: #242424;
   --easy-table-footer-font-color: #c0c7d2;
   --easy-table-footer-font-size: 14px;
   --easy-table-footer-padding: 0px 10px;
diff --git a/tests/gui/vuejs/noogle/src/components/Search.vue b/tests/gui/vuejs/noogle/src/components/Search.vue
index 417e2a1..5405b87 100644
--- a/tests/gui/vuejs/noogle/src/components/Search.vue
+++ b/tests/gui/vuejs/noogle/src/components/Search.vue
@@ -170,13 +170,13 @@ defineProps({
 
   <div class="greetings">
     <img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
-
+<br>
       <h1
-				class="text-center text-5xl md:text-6xl font-extrabold tracking-wider sm:text-start sm:text-6xl lg:text-8xl">
+				class="text-center font-thin text-5xl md:text-6xl font-extrabold tracking-wider sm:text-start sm:text-6xl lg:text-8xl">
 				<span class="bg">Noogle</span>
 
 			</h1>
-       <h2 class="text-base-200-content text-center text-2xl font-thin sm:text-start">
+       <h2 class="text-base-200-content text-center text-2xl font-thin">
 				Search the Nostr with Data Vending Machines
 			</h2>
 
diff --git a/tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue b/tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue
index a87f179..c990a0e 100644
--- a/tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue
+++ b/tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue
@@ -1,8 +1,35 @@
 <script setup>
-import Donate from "@/components/Donate.vue";
+import Nip07 from "@/components/Nip07.vue";
+
 </script>
 
 <template>
+
+
+
+
+
+  <div className="navbar bg-base-100">
+  <div className="flex-none">
+   <!-- <button className="btn btn-square btn-ghost">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+    test</button>-->
+  </div>
+  <div className="flex-1">
+    <router-link  class="menu" to="/">Noogle</router-link>
+    <router-link class="menu" to="/about">About</router-link>
+   <!-- <router-link class="menu" to="/donate">Donate</router-link> -->
+
+  <div className="flex-none">
+
+
+      </div>
+
+  </div>
+ <Nip07/>
+
+</div>
+
   <div class="three-column-layout">
     <header>
 
@@ -11,6 +38,10 @@ import Donate from "@/components/Donate.vue";
     </header>
 
     <main>
+
+
+
+      <router-view />
       <slot />
     </main>
 
@@ -45,6 +76,18 @@ import Donate from "@/components/Donate.vue";
     padding: 20px;
   }
 
+.router-link-exact-active{
+  color: rgba(255, 255, 255, 0.87);
+}
+
+
+.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;
+
+  height: 44px;
+}
+
+
 
 
   @media (min-width: 768px) {
diff --git a/tests/gui/vuejs/noogle/src/main.js b/tests/gui/vuejs/noogle/src/main.js
index 3209690..a96806c 100644
--- a/tests/gui/vuejs/noogle/src/main.js
+++ b/tests/gui/vuejs/noogle/src/main.js
@@ -5,13 +5,18 @@ import App from './App.vue'
 import store from './store';
 import "./app.css"
 
-import Vue3EasyDataTable from 'vue3-easy-data-table';
 import 'vue3-easy-data-table/dist/style.css';
-import { createRouter, createWebHashHistory } from "vue-router";
+import router from './router'
+import Vue3EasyDataTable from 'vue3-easy-data-table';
+
+
+
+
 
 //This is all for notifications
-import VueNotifications from 'vue-notifications'
+import VueNotifications from "vue-notifications";
 import miniToastr from 'mini-toastr'
+
 miniToastr.init()
 
 
@@ -32,5 +37,8 @@ const options = {
 
 createApp(App)
     .use(VueNotifications, options)
-    .use(store).component('EasyDataTable', Vue3EasyDataTable)
+    .use(store)
+    .use(router)
+
+    .component('EasyDataTable', Vue3EasyDataTable)
     .mount('#app')
diff --git a/tests/gui/vuejs/noogle/src/router/index.js b/tests/gui/vuejs/noogle/src/router/index.js
new file mode 100644
index 0000000..0708a7f
--- /dev/null
+++ b/tests/gui/vuejs/noogle/src/router/index.js
@@ -0,0 +1,19 @@
+import { createWebHistory, createRouter } from "vue-router";
+
+
+
+const routes = [
+  { path: "/", component: () => import("@/components/Home.vue") },
+  { path: "/about", component: () => import("@/components/AboutPage.vue") },
+  { path: "/donate", component: () => import("@/components/Donate.vue") },
+  { path: "/test", component: () => import("@/components/Donate.vue") },
+  { path: "/article/:id", component: () => import("@/components/Home.vue") },
+  { path: '/:pathMatch(.*)*', component: () => import("@/components/Home.vue") },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
\ No newline at end of file
diff --git a/tests/gui/vuejs/noogle/tailwind.config.js b/tests/gui/vuejs/noogle/tailwind.config.js
index 05f7840..bb31a7a 100644
--- a/tests/gui/vuejs/noogle/tailwind.config.js
+++ b/tests/gui/vuejs/noogle/tailwind.config.js
@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [],
+    content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+
+  ],
   theme: {
 
     extend: {
@@ -12,6 +16,6 @@ export default {
 
     },
   },
-  plugins: [],
+   plugins: [require("daisyui")],
 }