diff --git a/ui/noogle/src/app.css b/ui/noogle/src/app.css
index 5b65bde..8333a98 100644
--- a/ui/noogle/src/app.css
+++ b/ui/noogle/src/app.css
@@ -23,7 +23,7 @@ a,
 }
 
 .purple {
-  @apply  text-nostr;
+  @apply  text-nostr hover:text-orange-400;
   text-decoration: none;
   transition: 0.4s;
   padding: 3px;
diff --git a/ui/noogle/src/components/Nip89view.vue b/ui/noogle/src/components/Nip89view.vue
index 0fd366f..b550dac 100644
--- a/ui/noogle/src/components/Nip89view.vue
+++ b/ui/noogle/src/components/Nip89view.vue
@@ -76,13 +76,20 @@
                  <p>
                 You give them some data, a few sats, and they give you back some data.</p>
                 <p>
-                    This page is just a demo client, showcasing a variety of DVM use-cases. Search Content, Search Profiles, Discover Content, Summarize events, Generate Images, Schedule Notes.
-                    There's an ever growing number of tasks added to the protocol.
+                    This page is just a demo client, showcasing a variety of DVM use-cases. Search Content, Search Profiles, Content Discovery, Summarization of events, Image Generation, Scheduling Notes.
+
+              </p>
+                <p>
+                   There's an ever growing number of tasks added to the protocol. The current list of tasks can be found  <a class="purple" target="_blank" href="https://www.data-vending-machines.org/">here</a>.
                 </p>
                 <p>
                    These DVMs are not running or being hosted on this site. Instead, the DVMs communicate via Nostr and are available to any App or Client that wants to interact with them.
-                    Want your app or website to support any of these tasks? See NIP90
+                    Want your app or website to support any of these tasks? See  <a class="purple" target="_blank" href="https://github.com/nostr-protocol/nips/blob/master/90.md">NIP90</a> for more details.
                 </p>
+                  <p>
+                   Got interested in building your own DVM and provide it to the whole world? There's OpenSource frameworks to start with, for example <a class="purple" target="_blank" href="https://github.com/believethehype/nostrdvm">NostrDVM</a> in Python.
+                </p>
+
                 <p>
                    A List of all DVMs that have a NIP89 announcement is available below, ordered by latest announcement.
                 </p>
@@ -95,19 +102,42 @@
 <div class="grid gap-6 ">
     <div className="card w-70 bg-base-200 shadow-xl"   v-for="dvm in store.state.nip89dvms"
         :key="dvm.id">
-   <br>
-    <h2 className="card-title justify-center">{{ dvm.name }}</h2>
-      <div className="card-body">
+     <!--   -->
 
-  <div style="margin-left: auto; margin-right: 10px;">
-   <p v-if="dvm.amount.toString().toLowerCase()==='free'" class="text-sm  text-gray-600 rounded" >Free</p>
-    <p v-if="dvm.amount.toString().toLowerCase()==='flexible'" class="text-sm text-gray-600 rounded" >Flexible</p>
 
-   <p v-if="dvm.amount.toString().toLowerCase()==='subscription'" class="text-sm  text-orange-400 rounded">Subscription</p>
+ <div class="card card-side bg-black/20 shadow-xl">
+
+
+  <figure style="width: 200px; flex: none" >
+    <img v-if="dvm.image"  :src="dvm.image"  :alt="dvm.name" onerror="this.src='https://noogle.lol/favicon.ico'"/>
+  </figure>
+  <div class="card-body">
+      <div style="margin-left: auto; margin-right: 10px;">
+   <p v-if="dvm.amount.toString().toLowerCase()==='free'" class="badge bg-nostr">Free</p>
+    <p v-if="dvm.amount.toString().toLowerCase()==='flexible'" class="badge bg-nostr2" >Flexible</p>
+
+   <p v-if="dvm.amount.toString().toLowerCase()==='subscription'" class="badge bg-orange-500">Subscription</p>
    <p v-if="dvm.amount.toString()===''" ></p>
    <p v-if="!isNaN(parseInt(dvm.amount))" class="text-sm  text-gray-600 rounded" ><div class="flex"><svg style="margin-top:3px" xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="currentColor" class="bi bi-lightning" viewBox="0 0 16 20">
   <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z"/></svg> {{dvm.amount/1000}}</div></p>
   </div>
+    <h2 class="card-title">{{ dvm.name }}</h2>
+    <h3 class="fa-cut text-gray" >Kind: {{ dvm.kind }}</h3>
+
+          <h3 class="fa-cut" v-html="StringUtil.parseHyperlinks(dvm.about)"></h3>
+    <div class="card-actions justify-end">
+     <button className="btn" @click="copyDoiToClipboard(dvm.event);">Copy Event Json</button>
+    </div>
+  </div>
+</div>
+
+
+
+   <!--
+    <h2 className="card-title justify-center">{{ dvm.name }}</h2>
+      <div className="card-body">
+
+
 
 
         <div className="playeauthor-wrapper flex align-top">
@@ -125,10 +155,10 @@
 
              <div className="card-actions justify-end">
 
-                <button className="btn" @click="copyDoiToClipboard(dvm.event);">Copy Event Json</button>
+                <button className="btn glass" @click="copyDoiToClipboard(dvm.event);">Copy Event Json</button>
             </div>
           </div>
-      </div>
+      </div>-->
     </div>
 </div>
 </template>
diff --git a/ui/noogle/src/components/RecommendationGeneration.vue b/ui/noogle/src/components/RecommendationGeneration.vue
index 01f9ef0..ba6634a 100644
--- a/ui/noogle/src/components/RecommendationGeneration.vue
+++ b/ui/noogle/src/components/RecommendationGeneration.vue
@@ -774,8 +774,9 @@ const submitHandler = async () => {
   <!-- <details open ></details> -->
 
   <div style="margin-left: auto; margin-right: 3px;">
-   <p v-if="dvm.subscription ==='' && dvm.amount.toString().toLowerCase()==='free'" class="text-sm text-gray-600 rounded" >Free</p>
-    <p v-if="dvm.subscription ==='' && dvm.amount.toString().toLowerCase()==='flexible'" class="text-sm text-gray-600 tracking-wide rounded" >Flexible</p>
+   <p v-if="dvm.subscription ==='' && dvm.amount.toString().toLowerCase()==='free'" class="badge bg-nostr" >Free</p>
+    <p v-if="dvm.subscription ==='' && dvm.amount.toString().toLowerCase()==='flexible'" class="badge bg-nostr2" >Flexible</p>
+
     </div>
           <div>
       <div class="playeauthor-wrapper" v-if="dvm.nip88">
@@ -868,7 +869,7 @@ const submitHandler = async () => {
               </div>-->
    <p v-if="dvm.amount.toString()===''" ></p>
 
-   <p v-if="dvm.subscription ==='' && !isNaN(parseInt(dvm.amount)) && dvm.status !=='subscription-required' && dvm.status !=='subscription-success'" class="text-sm  text-gray-600 rounded" ><div class="flex"><svg style="margin-top:3px" xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="currentColor" class="bi bi-lightning" viewBox="0 0 16 20">
+   <p v-if="dvm.subscription ==='' && !isNaN(parseInt(dvm.amount)) && dvm.status !=='subscription-required' && dvm.status !=='subscription-success'" class="badge bg-amber" ><div class="flex"><svg style="margin-top:3px" xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="currentColor" class="bi bi-lightning" viewBox="0 0 16 20">
   <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z"/></svg> {{dvm.amount/1000}}</div></p>
   </div>