diff --git a/img/favicon.png b/img/favicon.png
new file mode 100644
index 0000000..837c13b
Binary files /dev/null and b/img/favicon.png differ
diff --git a/img/logo-dark.webp b/img/logo-dark.webp
new file mode 100644
index 0000000..438e730
Binary files /dev/null and b/img/logo-dark.webp differ
diff --git a/img/logo-light.webp b/img/logo-light.webp
new file mode 100644
index 0000000..d30c221
Binary files /dev/null and b/img/logo-light.webp differ
diff --git a/img/logo-wide.png b/img/logo-wide.png
deleted file mode 100644
index 71968b8..0000000
Binary files a/img/logo-wide.png and /dev/null differ
diff --git a/index.md b/index.md
index 27fb680..1828238 100644
--- a/index.md
+++ b/index.md
@@ -1,4 +1,16 @@
-# Enabling Open Science Discoveries
+---
+site:
+  hide_title_block: true
+  hide_outline: true
+  hide_toc: true
+---
+
+% Make page widescreen
++++ {"class": "col-page-inset"}
+
+:::{hero}
+Enabling Open Science Discoveries
+:::
 
 Enabling learning and discovery with interactive computing.
 
diff --git a/landing-page.mjs b/landing-page.mjs
new file mode 100644
index 0000000..d23d07b
--- /dev/null
+++ b/landing-page.mjs
@@ -0,0 +1,62 @@
+const heroDirective = {
+  name: `hero`,
+  doc: `A directive for a hero section`,
+  body: {
+    type: "myst",
+  },
+  run(data) {
+    const div = {
+      type: "div",
+      style: {
+        fontWeight: "bold",
+        fontSize: "4em",
+        maxWidth: "50%",
+        margin: ".5em auto",
+        textAlign: "center",
+        lineHeight: "normal",
+      },
+      children: data.body,
+    };
+    return [div];
+  },
+};
+
+const largeRole = {
+  name: `large`,
+  doc: `A role for large text`,
+  body: {
+    type: "myst",
+  },
+  run(data) {
+    const div = {
+      type: "span",
+      style: { fontSize: "1.5em" },
+      children: data.body,
+    };
+    return [div];
+  },
+};
+
+const orangeRole = {
+  name: `orange`,
+  doc: `A role for Jupyter orange text`,
+  body: {
+    type: "myst",
+  },
+  run(data) {
+    const div = {
+      type: "span",
+      style: { color: "#e07330" },
+      children: data.body,
+    };
+    return [div];
+  },
+};
+
+const plugin = {
+  name: "Landing page extensions",
+  roles: [largeRole, orangeRole],
+  directives: [heroDirective],
+};
+
+export default plugin;
diff --git a/myst.shared.yaml b/myst.shared.yaml
index a84b308..78ee0df 100644
--- a/myst.shared.yaml
+++ b/myst.shared.yaml
@@ -7,10 +7,15 @@ project:
 
 site:
   template: book-theme
-  nav: 
+  nav:
     - title: Gallery
       url: https://2i2c.org/demo-gallery
-      
+
   actions:
     - title: 2i2c
       url: https://2i2c.org
+
+  options:
+    logo: img/logo-light.webp
+    logo_dark: img/logo-dark.webp
+    favicon: img/favicon.png
diff --git a/myst.yml b/myst.yml
index 36a51df..749cc8b 100644
--- a/myst.yml
+++ b/myst.yml
@@ -1,24 +1,24 @@
 # See docs at: https://mystmd.org/guide/frontmatter
 version: 1
+extends:
+  - https://raw.githubusercontent.com/2i2c-org/demo-gallery/refs/heads/main/myst.shared.yaml
 project:
   title: Enabling Open Science Discoveries
   description: A gallery website for demonstrating open science discoveries at the knowledge frontier.
   keywords: []
   authors: []
-  copyright: '2024'
+  copyright: "2024"
   open_access: true
+  plugins:
+    - landing-page.mjs
   license:
     code: GPL-3.0-or-later
-    content: CC-BY-4.0  
+    content: CC-BY-4.0
   github: https://github.com/2i2c-org/demo-gallery
   # bibliography: []
   toc:
     # Auto-generated by `myst init --write-toc`
     - file: index.md
 site:
-  template: book-theme
   options:
-  #   favicon: favicon.ico
-    logo: img/logo-wide.png
-  nav: []
-  domains: []
+    logo_text: Demo Gallery