diff --git a/assets/main.scss b/assets/main.scss
index 59f80f20..0a0b70b5 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -21,13 +21,13 @@ $scirpypurple: #da347f;
 $scviyellow: #fbb822;
 $scversedeepblue: #262fb5; // the darker end of the Join button gradient
 
+$overline: #e0e0e0;
 $github-black: #171b21;
 $discourse-yellow: #f7f0b1;
 $youtube-red: #e03021;
 $zulip-blue: #62a3f0;
 $bluesky-blue: #0a7aff;
-
-$overline: #e0e0e0;
+$linkedin-blue: #0a66c2;
 $linkunderline: #aaaaaa;
 $backtickbg: #f9f9f9;
 
@@ -127,37 +127,164 @@ $eco-hues:
     }
 }
 
-#join-content .card {
-    h5 {
+#join-content {
+    .join-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 1rem;
+
+        @media (max-width: 50rem) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .join-card {
+        display: flex;
+        flex-direction: column;
+        padding: 1.5rem;
+        background-color: $tilebg4;
+        border: 1px solid $overline;
+        border-radius: $card-radius;
+        transition: all 200ms ease-in-out;
+
+        &:hover {
+            border-color: $tilebg2;
+            box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.06);
+            transform: translateY(-2px);
+        }
+    }
+
+    .join-card-icon {
+        display: grid;
+        place-items: center;
+        width: 2.75rem;
+        height: 2.75rem;
+        margin-bottom: 1rem;
+        font-size: 1.25rem;
+        border-radius: 50%;
+        background-color: $tilebg;
+        color: $tiletext;
+    }
+
+    @each $hue in $eco-hues {
+        .join-card[data-hue="#{index($eco-hues, $hue) - 1}"] .join-card-icon {
+            background-color: rgba($hue, 0.18);
+            color: darken($hue, 12%);
+        }
+    }
+
+    .join-card h2.join-card-title {
+        font-size: 1.1rem;
         font-weight: 700;
+        color: $tiletext;
+        margin: 0 0 0.35rem;
     }
-    transition: all 200ms ease-in-out;
-    color: $navtext;
-    &:hover {
-        background: #78cbd9 !important;
-        transform: scale(1.02);
+
+    .join-card-text {
+        font-size: 0.95rem;
+        line-height: 1.55;
+        color: $tiletext2;
+        margin: 0;
     }
-}
 
-#join-content .card#github:hover {
-    background-color: $github-black !important;
-    color: white !important;
-}
-#join-content .card#discourse:hover {
-    background-color: $discourse-yellow !important;
-    color: black !important;
-}
-#join-content .card#zulip:hover {
-    background-color: $zulip-blue !important;
-    color: white !important;
-}
-#join-content .card#bluesky:hover {
-    background-color: $bluesky-blue !important;
-    color: white !important;
-}
-#join-content .card#youtube:hover {
-    background-color: $youtube-red !important;
-    color: white !important;
+    .join-card-links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem 1.25rem;
+        list-style: none;
+        margin: auto 0 0;
+        padding: 1.25rem 0 0;
+
+        a {
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: $tiletext;
+            text-decoration-color: $tilebg2;
+            text-underline-offset: 0.2em;
+
+            &:hover {
+                text-decoration-color: currentColor;
+            }
+        }
+    }
+
+    &.post-content h2.join-section-title {
+        font-size: 1.1rem;
+        font-weight: 700;
+        color: $tiletext;
+        margin: 3rem 0 1rem;
+    }
+
+    .join-email-card {
+        &:hover {
+            background: $tilebg4 !important;
+            transform: none;
+        }
+
+        h3.card-title a {
+            font-family: "JetBrains Mono", Menlo, monospace;
+            font-size: 0.95rem;
+            font-weight: 600;
+            color: $tiletext;
+            text-decoration-color: $tilebg2;
+            text-underline-offset: 0.2em;
+
+            &:hover {
+                text-decoration-color: currentColor;
+            }
+        }
+
+        .card-text {
+            font-size: 0.95rem;
+            color: $tiletext2;
+            margin: 0;
+        }
+    }
+
+    .card {
+        transition: all 200ms ease-in-out;
+        color: $navtext;
+
+        h3.card-title {
+            margin: 0 0 0.35rem;
+            font-size: 1.1rem;
+            font-weight: 700;
+        }
+
+        &:hover {
+            background: #78cbd9 !important;
+            transform: scale(1.02);
+        }
+
+        &#github:hover {
+            background-color: $github-black !important;
+            color: white !important;
+        }
+        &#discourse:hover {
+            background-color: $discourse-yellow !important;
+            color: black !important;
+        }
+        &#zulip:hover {
+            background-color: $zulip-blue !important;
+            color: white !important;
+        }
+        &#bluesky:hover {
+            background-color: $bluesky-blue !important;
+            color: white !important;
+        }
+        &#linkedin:hover {
+            background-color: $linkedin-blue !important;
+            color: white !important;
+        }
+        &#youtube:hover {
+            background-color: $youtube-red !important;
+            color: white !important;
+        }
+    }
+
+    ul:not([class]) {
+        line-height: 1.9;
+    }
 }
 
 h1 {
diff --git a/content/join/_index.md b/content/join/_index.md
index e9fb4ae8..6b5f8898 100644
--- a/content/join/_index.md
+++ b/content/join/_index.md
@@ -1,52 +1,136 @@
 +++
 title = "Join scverse"
-description = "How to reach the scverse community on GitHub, Zulip, Discourse and social media, and who to e-mail about what."
+description = "How to get help with scverse, contribute code, add a package to the ecosystem, and meet the people who maintain it."
 
-[[resources]]
+[[paths]]
+	id = "ask"
+	icon = "bi-chat-dots"
+	title = "Ask a question"
+	text = "Usage questions go to the Discourse forum. Development discussion and day-to-day chat happen on Zulip."
+
+	[[paths.links]]
+		label = "Discourse forum"
+		url = "https://discourse.scverse.org/"
+
+	[[paths.links]]
+		label = "Zulip chat"
+		url = "https://scverse.zulipchat.com/"
+
+[[paths]]
+	id = "contribute"
+	icon = "bi-code-slash"
+	title = "Contribute code"
+	text = "Every core package takes pull requests. Start from an issue tagged good first issue. Two core team members backing your work makes you a contributor."
+
+	[[paths.links]]
+		label = "Good first issues"
+		url = "https://github.com/search?q=org%3Ascverse+is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22&type=issues"
+
+	[[paths.links]]
+		label = "Contributing guide"
+		url = "https://scanpy.scverse.org/en/stable/dev/index.html"
+
+	[[paths.links]]
+		label = "How roles work"
+		url = "/about/roles#contributors"
+
+	[[paths.links]]
+		label = "Code of conduct"
+		url = "/about/code_of_conduct"
+
+[[paths]]
+	id = "package"
+	icon = "bi-box-seam"
+	title = "Add your package"
+	text = "Packages built on AnnData, MuData or SpatialData can be listed in the ecosystem. The registry repository has the criteria and the submission form. The project template covers the testing, docs and packaging setup."
+
+	[[paths.links]]
+		label = "Inclusion criteria and submission"
+		url = "https://github.com/scverse/ecosystem-packages"
+
+	[[paths.links]]
+		label = "Project template"
+		url = "https://github.com/scverse/cookiecutter-scverse"
+
+	[[paths.links]]
+		label = "Browse the ecosystem"
+		url = "/packages/#ecosystem"
+
+[[paths]]
+	id = "meet"
+	icon = "bi-people"
+	title = "Meet the community"
+	text = "The open community meeting runs every two weeks on Tuesday at 6pm CET, with an open agenda anyone can add to. Hackathons and the annual conference run through the year."
+
+	[[paths.links]]
+		label = "Community meeting document"
+		url = "https://hackmd.io/VfVLKb3ETGKN2j_7tn8ZJQ?view"
+
+	[[paths.links]]
+		label = "Community calendar"
+		url = "/community-calendar"
+
+	[[paths.links]]
+		label = "Events and hackathons"
+		url = "/events"
+
+[follow]
+	title = "Follow along"
+
+[[follow.items]]
 	id = "github"
 	icon = "bi-github"
 	title = "GitHub"
 	text = "Follow our organisation on GitHub"
 	link = "https://github.com/scverse"
 
-[[resources]]
+[[follow.items]]
 	id = "zulip"
 	icon = "i-zulip"
 	title = "Zulip"
 	text = "Chat with us on Zulip"
 	link = "https://scverse.zulipchat.com/"
 
-[[resources]]
+[[follow.items]]
+	id = "discourse"
+	icon = "i-discourse"
+	title = "Discourse"
+	text = "Ask questions on Discourse"
+	link = "https://discourse.scverse.org/"
+
+[[follow.items]]
 	id = "bluesky"
 	icon = "i-bluesky"
 	title = "Bluesky"
 	text = "Follow us on Bluesky"
 	link = "https://bsky.app/profile/scverse.bsky.social"
 
-[[resources]]
+[[follow.items]]
 	id = "linkedin"
 	icon = "bi-linkedin"
 	title = "LinkedIn"
 	text = "Follow us on LinkedIn"
 	link = "https://www.linkedin.com/company/scverse"
 
-[[resources]]
-	id = "discourse"
-	icon = "i-discourse"
-	title = "Discourse"
-	text = "Ask questions on Discourse"
-	link = "https://discourse.scverse.org/"
-
-[[resources]]
+[[follow.items]]
 	id = "youtube"
 	icon = "bi-youtube"
 	title = "YouTube"
 	text = "Subscribe to our YouTube channel"
 	link = "https://www.youtube.com/channel/UCpsvsIAW3R5OdftJKKuLNMA"
-+++
 
-You can also reach us by e-mail for certain matters:
+[email]
+	title = "Email"
+
+[[email.items]]
+	address = "core@scverse.org"
+	text = "the [core team](/about/roles#core-team)"
 
-- [core@scverse.org](mailto:core@scverse.org): [core team](/about/roles#core-team)
-- [conference2026@scverse.org](mailto:conference2026@scverse.org): for matters regarding the [next conference](/conference2026)
-- [steering-council@scverse.org](mailto:steering-council@scverse.org): [steering council](/about/roles#steering-council) (e.g. for questions about sponsorships)
+[[email.items]]
+	address = "steering-council@scverse.org"
+	text = "the [steering council](/about/roles#steering-council), including sponsorship questions"
+
+[[email.items]]
+	address = "conference2026@scverse.org"
+	text = "the [next conference](/conference2026)"
++++
diff --git a/layouts/join/list.html b/layouts/join/list.html
index 2c6690a3..cb62daee 100644
--- a/layouts/join/list.html
+++ b/layouts/join/list.html
@@ -2,32 +2,63 @@
   <h1>{{ .Title }}</h1>
   <article class="post">
     <div class="post-content" id="join-content">
-      <div class="row">
-        {{ range $item := .Params.resources }}
-          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
-            <div class="card border-0 bg-light mb-4" id="{{ $item.id }}">
-              <div class="card-body">
-                <a href="{{ $item.link }}" class="stretched-link" target="_blank"></a>
-                {{/* Icon class travels with the entry, so a new channel is a content change.
-                  It sits on its own span rather than on the heading: prettier collapses the space
-                  a combined `class="card-title …"` would need.
-                */}}
-                <h5 class="card-title">
-                  {{ with $item.icon }}<span class="{{ . }}"></span>&nbsp;{{ end }}{{ $item.title }}
-                </h5>
-                <p class="card-text">
-                  {{ $item.text }}
-                </p>
-              </div>
-            </div>
-          </div>
+      <div class="join-grid">
+        {{ range $i, $path := .Params.paths }}
+          <section class="join-card" id="{{ $path.id }}" data-hue="{{ mod $i 8 }}">
+            <span class="join-card-icon"><i class="{{ $path.icon }}" aria-hidden="true"></i></span>
+            <h2 class="join-card-title">{{ $path.title }}</h2>
+            <p class="join-card-text">{{ $path.text }}</p>
+            <ul class="join-card-links">
+              {{ range $path.links }}
+                <li>
+                  <a
+                    href="{{ .url }}"
+                    {{ if hasPrefix .url "http" }}target="_blank" rel="noopener"{{ end }}
+                    >{{ .label }}</a
+                  >
+                </li>
+              {{ end }}
+            </ul>
+          </section>
         {{ end }}
       </div>
-      <div>
-        <p>
-          {{ .Content }}
-        </p>
-      </div>
+
+      {{ with .Params.follow }}
+        <h2 class="join-section-title">{{ .title }}</h2>
+        <div class="row">
+          {{ range .items }}
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
+              <div class="card border-0 bg-light mb-4" id="{{ .id }}">
+                <div class="card-body">
+                  <a href="{{ .link }}" class="stretched-link" target="_blank" rel="noopener"></a>
+                  <h3 class="card-title">
+                    <i class="{{ .icon }}" aria-hidden="true"></i>&nbsp;{{ .title }}
+                  </h3>
+                  <p class="card-text">{{ .text }}</p>
+                </div>
+              </div>
+            </div>
+          {{ end }}
+        </div>
+      {{ end }}
+
+      {{ with .Params.email }}
+        <h2 class="join-section-title">{{ .title }}</h2>
+        <div class="row">
+          {{ range .items }}
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
+              <div class="card border-0 bg-light mb-4 h-100 join-email-card">
+                <div class="card-body">
+                  <h3 class="card-title">
+                    <a href="mailto:{{ .address }}">{{ .address }}</a>
+                  </h3>
+                  <p class="card-text">{{ .text | markdownify }}</p>
+                </div>
+              </div>
+            </div>
+          {{ end }}
+        </div>
+      {{ end }}
     </div>
   </article>
 {{ end }}