diff --git a/src/_data/facets.json b/src/_data/facets.json
index c1251b06..417fde92 100644
--- a/src/_data/facets.json
+++ b/src/_data/facets.json
@@ -29,45 +29,47 @@
     "featured": true,
     "desc": "Store tracks locally for offline usage automatically after they've been playing for a little while."
   },
+  {
+    "url": "facets/connect/index.html",
+    "title": "Connect",
+    "category": "Data",
+    "featured": true,
+    "desc": "A listing of some of the options available to use as an audio source, or as a user-data storage method."
+  },
   {
     "url": "facets/connect/atproto/index.html",
     "title": "Connect / AT Protocol",
     "category": "Data",
-    "featured": true,
     "desc": "Use your AT Protocol identity for user-data storage."
   },
   {
     "url": "facets/connect/https/index.html",
     "title": "Connect / HTTPS",
     "category": "Data",
-    "desc": "Add HTTPS URLs as input."
+    "desc": "Add HTTPS URLs as audio sources."
   },
   {
     "url": "facets/connect/icecast/index.html",
     "title": "Connect / Icecast",
     "category": "Data",
-    "featured": true,
-    "desc": "Add an Icecast stream as audio input."
+    "desc": "Add an Icecast stream as an audio source."
   },
   {
     "url": "facets/connect/local/index.html",
     "title": "Connect / Local",
     "category": "Data",
-    "featured": true,
-    "desc": "Add local directories or files as audio input."
+    "desc": "Add local directories or files as audio sources."
   },
   {
     "url": "facets/connect/opensubsonic/index.html",
     "title": "Connect / OpenSubsonic",
     "category": "Data",
-    "featured": true,
     "desc": "Connect to an OpenSubsonic server for audio input."
   },
   {
     "url": "facets/connect/s3/index.html",
     "title": "Connect / S3",
     "category": "Data",
-    "featured": true,
     "desc": "Connect to an S3-compatible storage for audio input or user-data storage."
   },
   {
diff --git a/src/facets/connect/common.css b/src/facets/connect/common.css
index a72504fd..4cda4891 100644
--- a/src/facets/connect/common.css
+++ b/src/facets/connect/common.css
@@ -4,6 +4,7 @@ main {
   justify-content: center;
   min-height: 100dvh;
   opacity: 0;
+  padding: var(--wa-space-m);
   pointer-events: none;
   transition: opacity 750ms;
 
diff --git a/src/facets/connect/https/index.inline.js b/src/facets/connect/https/index.inline.js
index 0df47b6d..46517a06 100644
--- a/src/facets/connect/https/index.inline.js
+++ b/src/facets/connect/https/index.inline.js
@@ -43,7 +43,7 @@ const { setItems, setError } = setup({
   hasOutput: false,
 
   description: html`
-    <p>Add HTTPS urls as input.</p>
+    <p>Add HTTPS urls as audio sources.</p>
   `,
 
   formFields: html`
diff --git a/src/facets/connect/index.html b/src/facets/connect/index.html
new file mode 100644
index 00000000..dc302fda
--- /dev/null
+++ b/src/facets/connect/index.html
@@ -0,0 +1,32 @@
+<style>
+  @import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
+  @import "./facets/connect/common.css" layer(connect);
+
+  @layer base, diffuse, wa;
+
+  ul li {
+    margin-left: 0;
+  }
+
+  .connect-item[href] {
+    text-decoration: none;
+    color: inherit;
+    border-radius: var(--wa-border-radius-m);
+    gap: var(--wa-space-m);
+    padding: var(--wa-space-2xs);
+    margin: calc(-1 * var(--wa-space-2xs));
+
+    &:hover {
+      background: var(--wa-color-fill-quiet);
+    }
+  }
+</style>
+
+<main class="wa-theme-default"></main>
+
+<script type="module" src="./facets/connect/index.inline.js"></script>
+
+<script type="module">
+  await customElements.whenDefined("wa-card");
+  document.querySelector("main")?.classList.add("has-loaded");
+</script>
diff --git a/src/facets/connect/index.inline.js b/src/facets/connect/index.inline.js
new file mode 100644
index 00000000..b38d6e31
--- /dev/null
+++ b/src/facets/connect/index.inline.js
@@ -0,0 +1,80 @@
+import { html, render as litRender } from "lit-html";
+
+import "@awesome.me/webawesome/dist/components/card/card.js";
+import "@awesome.me/webawesome/dist/components/divider/divider.js";
+import "@awesome.me/webawesome/dist/components/icon/icon.js";
+
+import "~/common/webawesome/detect-dark.js";
+import "~/common/webawesome/phosphor/fill.js";
+
+import { data as facetsData } from "~/facets/index.js";
+
+document.title = "Connect | Diffuse";
+
+/** @param {string} path */
+const loaderHref = (path) => `../../l/?path=${encodeURIComponent(path)}`;
+
+/** @type {Record<string, string>} */
+const icons = {
+  "facets/connect/atproto/index.html": "at",
+  "facets/connect/https/index.html": "globe",
+  "facets/connect/icecast/index.html": "radio",
+  "facets/connect/local/index.html": "folder-open",
+  "facets/connect/opensubsonic/index.html": "broadcast",
+  "facets/connect/s3/index.html": "hard-drives",
+};
+
+const facets = facetsData
+  .filter(
+    (f) =>
+      f.url.startsWith("facets/connect/") &&
+      f.url !== "facets/connect/index.html",
+  )
+  .map((f) => ({
+    name: f.title.replace(/^Connect \/ /, ""),
+    description: f.desc,
+    icon: icons[f.url] ?? "plug",
+    href: loaderHref(f.url),
+  }));
+
+const main = document.querySelector("main");
+if (!main) throw new Error("No <main> element");
+
+litRender(
+  html`
+    <wa-card>
+      <div slot="header" class="card-header">
+        <strong>Connect</strong>
+      </div>
+      <div class="card-body">
+        <p>
+          These are some of the options available to add as an audio source, or to
+          use as user-data storage. Some offer both, the remainder offers only one
+          or the other.
+        </p>
+        <wa-divider></wa-divider>
+        <ul class="connect-list">
+          ${facets.map(({ name, description, icon, href }) =>
+            html`
+              <li>
+                <a class="connect-item" href="${href}">
+                  <wa-icon
+                    library="phosphor/fill"
+                    name="${icon}"
+                    class="wa-body-l"
+                    style="flex-shrink: 0;"
+                  ></wa-icon>
+                  <div class="connect-item__info">
+                    <span class="connect-item__name">${name}</span>
+                    <span class="connect-item__detail">${description}</span>
+                  </div>
+                </a>
+              </li>
+            `
+          )}
+        </ul>
+      </div>
+    </wa-card>
+  `,
+  main,
+);
diff --git a/src/facets/index.js b/src/facets/index.js
new file mode 100644
index 00000000..de4abee4
--- /dev/null
+++ b/src/facets/index.js
@@ -0,0 +1,3 @@
+import data from "~/_data/facets.json" with { type: "json" };
+
+export { data };