diff --git a/hubzilla/addon/vs01/Widget/Vs01.php b/hubzilla/addon/vs01/Widget/Vs01.php
index d94544e..5c14352 100644
--- a/hubzilla/addon/vs01/Widget/Vs01.php
+++ b/hubzilla/addon/vs01/Widget/Vs01.php
@@ -5,13 +5,16 @@ namespace Zotlabs\Widget;
 class Vs01 {
 
     public function widget($arr) {
+        if (function_exists('head_add_css')) {
+            \head_add_css('/addon/vs01/view/css/vs01-directory.css');
+        }
         $listings = $this->load_listings();
         return $this->render_directory($listings);
     }
 
-    // ----------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
     // DIRECTORY
-    // ----------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
 
     private function render_directory($listings) {
         $out  = '<div class="vs01-directory">';
@@ -20,7 +23,7 @@ class Vs01 {
         $out .= '<ul class="nav nav-tabs vs01-dir-tabs" id="vs01DirectoryTabs" role="tablist">';
         $tabs = [
             ['id' => 'core',   'label' => 'Core',   'active' => true],
-            ['id' => 'tier1',  'label' => 'Tier-I',  'active' => false],
+            ['id' => 'tier1',  'label' => 'Tier-I', 'active' => false],
             ['id' => 'tier2',  'label' => 'Tier-II', 'active' => false],
             ['id' => 'other',  'label' => 'Other',  'active' => false],
         ];
@@ -68,16 +71,19 @@ class Vs01 {
                 'slot'        => 'taxonomy-authority',
                 'role'        => 'Taxonomy Authority',
                 'description' => 'The institutional source of the case law categories this diagnostic record is organized by.',
+                'image'       => '/addon/vs01/view/img/directory-core-taxonomy-authority.png',
             ],
             [
                 'slot'        => 'methodology-certifier',
                 'role'        => 'Methodology Certifier',
                 'description' => 'The law firm whose professional association with this project certifies the diagnostic record meets a standard the legal community can use.',
+                'image'       => '/addon/vs01/view/img/directory-core-methodology-certifier.png',
             ],
             [
                 'slot'        => 'peer-operator',
                 'role'        => 'Peer Operator',
                 'description' => 'The cooperating Civic Infrastructure host who can independently verify, support, and if necessary continue this diagnostic record.',
+                'image'       => '/addon/vs01/view/img/directory-core-peer-operator.png',
             ],
         ];
 
@@ -95,19 +101,25 @@ class Vs01 {
                 $e    = $populated[$slot['slot']];
                 $name = $this->h($e['name'] ?? '');
                 $url  = $this->h($e['url'] ?? '');
-                $out .= '<div class="vs01-dir-slot vs01-slot-active">';
-                $out .= '<div class="vs01-slot-role">' . $this->h($slot['role']) . '</div>';
+                $image = $this->h($e['image'] ?? $slot['image']);
+                $out .= '<div class="vs01-dir-card vs01-dir-card-core vs01-card-active">';
+                $out .= '<div class="vs01-card-image"><img src="' . $image . '" alt="" loading="lazy"></div>';
+                $out .= '<div class="vs01-card-body">';
+                $out .= '<div class="vs01-card-role">' . $this->h($slot['role']) . '</div>';
                 if ($url) {
-                    $out .= '<div class="vs01-slot-name"><a href="' . $url . '" target="_blank" rel="noopener">' . $name . '</a></div>';
+                    $out .= '<div class="vs01-card-name"><a href="' . $url . '" target="_blank" rel="noopener">' . $name . '</a></div>';
                 } else {
-                    $out .= '<div class="vs01-slot-name">' . $name . '</div>';
+                    $out .= '<div class="vs01-card-name">' . $name . '</div>';
                 }
                 $out .= '</div>';
+                $out .= '</div>';
             } else {
-                $out .= '<div class="vs01-dir-slot vs01-slot-pending">';
-                $out .= '<div class="vs01-slot-role">' . $this->h($slot['role']) . '</div>';
-                $out .= '<div class="vs01-slot-description">' . $this->h($slot['description']) . '</div>';
-                $out .= '<div class="vs01-slot-status">Invitation pending</div>';
+                $image = $this->h($slot['image']);
+                $out .= '<div class="vs01-dir-card vs01-dir-card-core vs01-card-pending">';
+                $out .= '<div class="vs01-card-image"><img src="' . $image . '" alt="' . $this->h($slot['role']) . ' — reserved" loading="lazy"></div>';
+                $out .= '<div class="vs01-card-body">';
+                $out .= '<div class="vs01-card-description">' . $this->h($slot['description']) . '</div>';
+                $out .= '</div>';
                 $out .= '</div>';
             }
         }
@@ -124,24 +136,30 @@ class Vs01 {
             $role = $this->h($entry['role'] ?? '');
             $desc = $this->h($entry['description'] ?? '');
             $url  = $this->h($entry['url'] ?? '');
-            $out .= '<div class="vs01-dir-entry">';
-            $out .= '<div class="vs01-entry-role">' . $role . '</div>';
+            $image = $this->h($entry['image'] ?? '/addon/vs01/view/img/directory-tier-default.png');
+            $out .= '<div class="vs01-dir-card vs01-dir-card-tier">';
+            $out .= '<div class="vs01-card-image"><img src="' . $image . '" alt="" loading="lazy"></div>';
+            $out .= '<div class="vs01-card-body">';
+            if ($role) {
+                $out .= '<div class="vs01-card-role">' . $role . '</div>';
+            }
             if ($url) {
-                $out .= '<div class="vs01-entry-name"><a href="' . $url . '" target="_blank" rel="noopener">' . $name . '</a></div>';
+                $out .= '<div class="vs01-card-name"><a href="' . $url . '" target="_blank" rel="noopener">' . $name . '</a></div>';
             } else {
-                $out .= '<div class="vs01-entry-name">' . $name . '</div>';
+                $out .= '<div class="vs01-card-name">' . $name . '</div>';
             }
             if ($desc) {
-                $out .= '<div class="vs01-entry-desc">' . $desc . '</div>';
+                $out .= '<div class="vs01-card-desc">' . $desc . '</div>';
             }
             $out .= '</div>';
+            $out .= '</div>';
         }
         return $out;
     }
 
-    // ----------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
     // LISTINGS LOADER
-    // ----------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
 
     private function load_listings() {
         $config = $this->load_config();
@@ -165,9 +183,9 @@ class Vs01 {
         return (json_last_error() === JSON_ERROR_NONE) ? $data : [];
     }
 
-    // ----------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
     // HELPER
-    // ----------------------------------------------------------------------------
+    // ---------------------------------------------------------------------------
 
     private function h($value) {
         return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');