diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc
index 2f3558a5..bd5cbf0a 100644
--- a/preview-src/docs-ndl.adoc
+++ b/preview-src/docs-ndl.adoc
@@ -56,6 +56,20 @@ Run graph algorithms and machine learning models to analyze your data at scale.
 [.link]
 xref:gds:index.adoc[Unlock insights from data]
 
+
+[.dark.icon-w.nodes-patterns.selectable]
+=== Neo4j Online Developer Conference
+
+[.icon]
+image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[]
+
+[.description]
+Join us on November 7 for live and unique tech talks over 24 hours across all timezones
+
+[.link]
+link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register]
+
+
 === Create applications
 
 [.icon]
diff --git a/preview-src/docs-sub-hub.adoc b/preview-src/docs-sub-hub.adoc
index a74e1839..ae8d31f5 100644
--- a/preview-src/docs-sub-hub.adoc
+++ b/preview-src/docs-sub-hub.adoc
@@ -24,6 +24,20 @@ endif::[]
 This section is designed to help you learn how to import various types of data into Neo4j. From JSON to APIs to another database, you can retrieve data from nearly any source and use it to populate your graph.
 
 
+[.dark.icon-w.nodes-patterns]
+=== Neo4j Online Developer Conference
+
+[.icon]
+image:https://dist.neo4j.com/wp-content/uploads/20240514071251/node-24-logo.svg[]
+
+[.description]
+Join us on November 7 for live and unique tech talks over 24 hours across all timezones
+
+[.link]
+link:https://neo4j.registration.goldcast.io/events/03805ea9-fe3a-4cac-8c15-aa622666531a?utm_source=neodocs&utm_medium=banner&utm_campaign=std[Register]
+
+
+
 [role=label--new-5.12]
 === `LOAD CSV`
 [.icon]
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 21fd55fb..ae03679f 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -478,7 +478,7 @@ body.docs-ndl .cards .sect2 > a,
 body.docs-ndl .cards .sect2.not-selectable,
 body.docs-ndl .cards:not(.selectable) .sect2,
 body.docs-ndl .lists .sect2 {
-  overflow: hidden;
+  /* overflow: hidden; */
   position: relative;
   display: flex;
   flex-direction: column;
@@ -487,8 +487,21 @@ body.docs-ndl .lists .sect2 {
   /* justify-content: space-between; */
   gap: 1rem;
   /* min-width: 30%; */
-  padding: 1rem;
+  /* padding: 1rem; */
   /* margin: 0 1rem 1rem 0; */
+  /* background: var(--color-white); */
+}
+
+body.docs-ndl .cards .sect2.selectable > a,
+body.docs-ndl .cards .sect2.not-selectable,
+body.docs-ndl .cards:not(.selectable) .sect2:not(.selectable),
+body.docs-ndl .lists .sect2 {
+  padding: 1rem;
+}
+
+body.docs-ndl .cards .sect2.not-selectable:not(.dark),
+body.docs-ndl .cards .sect2:not(.dark) a,
+body.docs-ndl .cards:not(.selectable) .sect2:not(.dark) {
   background: var(--color-white);
 }
 
@@ -498,6 +511,28 @@ body.docs-ndl .lists .sect2 {
 - graph-academy
 */
 
+body.docs-ndl .cards .sectionbody > div.sect2.dark a {
+  background-color: var(--color-black);
+  color: var(--color-white);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+body.docs-ndl .cards .sect2.dark h3 {
+  color: var(--color-white);
+}
+
+body.docs-ndl .cards .sect2.icon-w .icon img,
+body.docs-ndl .cards.icon-l .sect2.icon-w .icon img {
+  width: 12rem;
+}
+
+body.docs-ndl .cards .sectionbody > div.sect2.nodes-patterns a {
+  background-image: url(https://dist.neo4j.com/wp-content/uploads/20240514071252/nodes-patterns.svg);
+  background-position: center right;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
 /* this would give a background image on cards marked with [.ga-promo] */
 body.docs-ndl .cards .sectionbody > div.sect2.graph-academy > a,
 body.docs-ndl .cards .sectionbody > div.sect2.graph-academy:not(.selectable) {
diff --git a/src/js/70-docs-ndl.js b/src/js/70-docs-ndl.js
index f971273c..c90155f9 100644
--- a/src/js/70-docs-ndl.js
+++ b/src/js/70-docs-ndl.js
@@ -7,8 +7,14 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
-  var makeClickable = function (card) {
-    var links = card.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+  var makeClickable = function (cards) {
+    var links
+    if (cards.classList.contains('selectable')) {
+      links = cards.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+    } else {
+      links = cards.querySelectorAll('div.sect2.selectable div.link')
+    }
+
     links.forEach(function (link) {
       var target = link.querySelector('a').getAttribute('href')
       var card = link.parentElement
@@ -44,7 +50,7 @@ document.addEventListener('DOMContentLoaded', function () {
   })
 
   // Add links to cards
-  document.querySelectorAll('.cards.selectable')
+  document.querySelectorAll('.cards')
     .forEach(makeClickable)
 
   // Move labels to the icon div to position them