diff --git a/hubzilla/addon/vs01/view/css/vs01-directory.css b/hubzilla/addon/vs01/view/css/vs01-directory.css
new file mode 100644
index 0000000..c72cf1d
--- /dev/null
+++ b/hubzilla/addon/vs01/view/css/vs01-directory.css
@@ -0,0 +1,125 @@
+/* ------------------------------------------------------------------------
+   DIRECTORY — institutional listing cards (left sidebar widget)
+   Sizing baseline: W = 300px (sidebar min-width).
+   Core cards:  W x 1.5W  (300 x 450) — image 300x300, text below 300x150
+   Tier cards:  W x 0.5W  (300 x 150) — image 150x150 left, text right
+   ------------------------------------------------------------------------ */
+
+.vs01-directory {
+    font-family: var(--bs-font-sans-serif);
+}
+
+.vs01-dir-tabs {
+    margin-bottom: var(--civicinfra-space-3);
+}
+
+.vs01-dir-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--civicinfra-space-3);
+}
+
+/* --- Core cards (portrait, 300x450) --- */
+
+.vs01-dir-card-core {
+    width: 300px;
+    height: 450px;
+    border: 1px solid var(--civicinfra-border);
+    border-radius: var(--civicinfra-radius);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: var(--civicinfra-bg);
+}
+
+.vs01-dir-card-core .vs01-card-image {
+    width: 300px;
+    height: 300px;
+    flex: 0 0 300px;
+    overflow: hidden;
+}
+
+.vs01-dir-card-core .vs01-card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.vs01-dir-card-core .vs01-card-body {
+    flex: 1;
+    padding: var(--civicinfra-space-3) var(--civicinfra-space-4);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.vs01-card-role {
+    font-size: var(--civicinfra-fs-xs);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--civicinfra-muted);
+    margin-bottom: var(--civicinfra-space-1);
+}
+
+.vs01-card-name {
+    font-size: var(--civicinfra-fs-sm);
+    font-weight: 600;
+    color: var(--civicinfra-text);
+}
+
+.vs01-card-description {
+    font-size: var(--civicinfra-fs-xs);
+    color: var(--civicinfra-muted);
+    line-height: 1.5;
+}
+
+/* --- Tier cards (landscape, 300x150) --- */
+
+.vs01-dir-card-tier {
+    width: 300px;
+    height: 150px;
+    border: 1px solid var(--civicinfra-border);
+    border-radius: var(--civicinfra-radius);
+    overflow: hidden;
+    display: flex;
+    background: var(--civicinfra-bg);
+}
+
+.vs01-dir-card-tier .vs01-card-image {
+    width: 150px;
+    height: 150px;
+    flex: 0 0 150px;
+    overflow: hidden;
+}
+
+.vs01-dir-card-tier .vs01-card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.vs01-dir-card-tier .vs01-card-body {
+    flex: 1;
+    padding: var(--civicinfra-space-2) var(--civicinfra-space-3);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.vs01-card-desc {
+    font-size: var(--civicinfra-fs-xs);
+    color: var(--civicinfra-muted);
+    line-height: 1.4;
+    margin-top: var(--civicinfra-space-1);
+}
+
+/* --- Placeholder text (Tier-I/II/Other when empty) --- */
+
+.vs01-dir-placeholder {
+    padding: var(--civicinfra-space-3) var(--civicinfra-space-4);
+}