diff --git a/docusaurus.config.js b/docusaurus.config.js
index e82f712cb..4ac921556 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -145,6 +145,10 @@ module.exports = {
         {
           title: 'More',
           items: [
+            {
+              label: 'Infrastructure',
+              to: '/infra'
+            },
             {
               label: 'GitHub',
               href: 'https://github.com/electron/electron',
diff --git a/src/pages/infra/_data.json b/src/pages/infra/_data.json
new file mode 100644
index 000000000..25ea52db2
--- /dev/null
+++ b/src/pages/infra/_data.json
@@ -0,0 +1,257 @@
+[
+  {
+    "name": "Sudowoodo",
+    "repo": "electron/sudowoodo",
+    "avatar": "https://slack-files2.s3-us-west-2.amazonaws.com/avatars/2018-08-15/416779643825_62fad90b900da0d03327_192.png",
+    "private": true,
+    "team": "wg-releases",
+    "description": "Responsible for orchestrating Electron releases, automatically schedules nightly and beta releases",
+    "dependsOn": ["MetaDumper", "unreleased", "Hasher", "Not Goma"],
+    "tags": ["Probot", "Slack"],
+    "slack": {
+      "commands": [{
+        "name": "/sudowoodo",
+        "description": "Summons Sudowoodo to queue a release, provides a form to choose release parameters"
+      }]
+    },
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "MetaDumper",
+    "repo": "electron/metadumper",
+    "private": true,
+    "team": "wg-releases",
+    "description": "Returns `process.versions` information for a given Electron Release Artifact before it has been released.",
+    "dependsOn": [],
+    "tags": [],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Unreleased",
+    "repo": "electron/unreleased",
+    "team": "wg-releases",
+    "description": "Runs final pre-release checks to ensure things get merged and released on time.",
+    "dependsOn": [],
+    "tags": ["Probot", "Slack"],
+    "slack": {
+      "commands": [{
+        "name": "/check-unreleased",
+        "arguments": ["[branch]"],
+        "description": "Shows unreleased commits for a given branch"
+      }, {
+        "name": "/verify-semver",
+        "arguments": ["[branch]"],
+        "description": "Shows the hypothetical next semver-compliant version number for a given branch based on what has landed on that branch"
+      }, {
+        "name": "/check-unmerged",
+        "arguments": ["[branch]"],
+        "description": "Shows unmerged PRs targeting a given branch or requiring manual backport to that branch"
+      }]
+    },
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Continuous Auth",
+    "repo": "continuousauth/web",
+    "url": "https://continuousauth.dev/",
+    "avatar": "https://avatars.githubusercontent.com/oa/1102312?s=240",
+    "team": "wg-ecosystem",
+    "description": "Enables the usage of 2FA for automated package publishing to improve the security of the Node.js ecosystem.",
+    "dependsOn": [],
+    "tags": ["Slack", "CircleCI", "GH Actions"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Symbol Server",
+    "repo": "electron/symbol-server",
+    "team": "wg-releases",
+    "description": "Serves up debug symbols for symbolicating crashes that occur within Electron, used by tools like Sentry.",
+    "dependsOn": [],
+    "tags": ["s3"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Release Status",
+    "repo": "electron/release-status",
+    "url": "https://releases.electronjs.org",
+    "private": true,
+    "team": "wg-releases",
+    "description": "Shows information of past, current and future releases including real time release information.",
+    "dependsOn": ["Sudowoodo"],
+    "tags": [],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Sheriff",
+    "repo": "electron/sheriff",
+    "avatar": "https://avatars.slack-edge.com/2019-11-21/844347353604_500f5a5483db67de7160_192.png",
+    "team": "wg-admin",
+    "description": "Guards the entire Electron Organization, monitors for suspicious behavior and enforces our permission policies across GitHub and beyond.",
+    "dependsOn": [],
+    "tags": ["Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Not Goma",
+    "repo": "electron/not-goma",
+    "avatar": "https://emoji.slack-edge.com/T394SAQKC/goma/d6b38c8b2035f496.png",
+    "url": "https://notgoma.com",
+    "private": true,
+    "team": "goma-squad",
+    "description": "Definitely not a goma cluster, not improving build performance by over 1000% since 2019.",
+    "dependsOn": ["Not Goma Auth"],
+    "tags": [],
+    "deployedOn": "azure"
+  },
+  {
+    "name": "Not Goma Auth",
+    "repo": "electron/not-goma-auth",
+    "url": "https://auth.notgoma.com",
+    "private": true,
+    "team": "goma-squad",
+    "description": "Not an authentication proxy for something that definitely isn't a goma cluster, signing you in via GitHub since 2021.",
+    "dependsOn": [],
+    "tags": ["GitHub"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Chromium Helper",
+    "repo": "electron/slack-chromium-helper",
+    "avatar": "https://avatars.slack-edge.com/2021-04-06/1927633861558_9420928d9de5fce9495a_192.png",
+    "team": "wg-upgrades",
+    "description": "Unfurls Chromium related URLs in Slack and provides additional context where it can.",
+    "dependsOn": [],
+    "tags": ["Slack"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Archaeologist",
+    "repo": "electron/archaeologist",
+    "avatar": "https://raw.githubusercontent.com/electron/archaeologist/main/design/logo.jpg",
+    "team": "wg-releases",
+    "description": "Diffs the automatically generated Electron Typescript definitions to make reviewing docs changes easy.",
+    "dependsOn": [],
+    "tags": ["CircleCI", "Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Cation",
+    "repo": "electron/cation",
+    "avatar": "https://avatars.githubusercontent.com/in/25811?s=120",
+    "team": "wg-releases",
+    "description": "All the Releases WG automation ends up in this bot, semver tag enforcement, API review requirements, new PR detection, etc.",
+    "dependsOn": [],
+    "tags": ["Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Clerk",
+    "repo": "electron/clerk",
+    "avatar": "https://avatars.githubusercontent.com/in/16104?s=120",
+    "team": "wg-releases",
+    "description": "Enforces release note requirements on all PRs and persists / groups them during a release.",
+    "dependsOn": [],
+    "tags": ["Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Data",
+    "repo": "electron/data",
+    "private": true,
+    "team": "wg-admin",
+    "description": "A collection of webhooks and cron jobs that pull data from various other systems for analytics and debugging purposes in Grafana.",
+    "dependsOn": [],
+    "tags": ["CircleCI", "GitHub"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Patch Conflict Fixer",
+    "repo": "MarshallOfSound/patch-conflict-fixer",
+    "avatar": "https://avatars.githubusercontent.com/in/112758?s=120",
+    "team": "wg-upgrades",
+    "description": "Automatically fixes PR merge conflicts that arise as a result of GitHub Merges ignoring `.gitattributes` files.",
+    "dependsOn": [],
+    "tags": ["Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Roller",
+    "repo": "electron/roller",
+    "avatar": "https://avatars.githubusercontent.com/in/115177?s=120",
+    "team": "wg-upgrades",
+    "description": "A service that automates the process of updating major dependencies in Electron including Chromium and Node.js",
+    "dependsOn": [],
+    "tags": ["Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Rotation",
+    "repo": "electron/rotation",
+    "private": true,
+    "url": "https://rotation.electronjs.org",
+    "avatar": "https://avatars.githubusercontent.com/oa/1684500?s=120",
+    "team": "wg-admin",
+    "description": "Manages working group rotations automatically, status notifications and schedules. Ensuring there's always sometime around for the important things.",
+    "dependsOn": [],
+    "tags": ["GitHub", "Slack"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Trop",
+    "repo": "electron/trop",
+    "avatar": "https://avatars.githubusercontent.com/in/9879?s=120",
+    "team": "wg-releases",
+    "description": "Automates the process of backporting features and fixes to release branches.",
+    "dependsOn": [],
+    "tags": ["Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Update Server",
+    "repo": "electron/update.electronjs.org",
+    "team": "wg-ecosystem",
+    "description": "A public, free-to-use, open source update server designed for Open Source Electron apps.",
+    "dependsOn": [],
+    "tags": ["GitHub"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Website",
+    "repo": "electron/electronjs.org-new",
+    "avatar": "/assets/img/logo.svg",
+    "team": "wg-ecosystem",
+    "description": "Well, you're looking at it.  Welcome to the Electron website, home to our documentation, guides and other information.",
+    "dependsOn": ["Fiddle Service"],
+    "tags": [],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Zoilist",
+    "repo": "electron/zoilist",
+    "avatar": "https://avatars.slack-edge.com/2021-08-19/2393246201094_a3cadbb7d7e8b37309b1_192.jpg",
+    "team": "wg-api",
+    "description": "Nags the API Working Group to review semver/minor Pull Requests.",
+    "dependsOn": [],
+    "tags": ["Probot"],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Fiddle Service",
+    "repo": "electron/fiddle.electronjs.org",
+    "avatar": "/assets/img/fiddle_logo.png",
+    "team": "wg-ecosystem",
+    "description": "Deep link handling for opening Fiddles from the Electron docs and other sources.",
+    "dependsOn": [],
+    "tags": [],
+    "deployedOn": "heroku"
+  },
+  {
+    "name": "Hasher",
+    "repo": "MarshallOfSound/hasher",
+    "team": "wg-releases",
+    "description": "Ultra fast SHA generation for S3 files, can hash gigabytes of release assets in just seconds",
+    "dependsOn": [],
+    "tags": ["s3"],
+    "deployedOn": "aws"
+  }
+]
\ No newline at end of file
diff --git a/src/pages/infra/index.jsx b/src/pages/infra/index.jsx
new file mode 100644
index 000000000..31dc92720
--- /dev/null
+++ b/src/pages/infra/index.jsx
@@ -0,0 +1,203 @@
+import Layout from '@theme/Layout';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import Translate from '@docusaurus/Translate';
+
+import styles from './infra.module.scss';
+
+import data from './_data.json';
+
+data.sort((a, b) => a.name.localeCompare(b.name));
+
+export default function InfrastructurePage() {
+  return (
+    <Layout title="Infrastructure">
+      <main className="container margin-vert--xl">
+        <header className={styles.header}>
+          <h1>Electron Infrastructure</h1>
+          <p>
+            <Translate
+              id="infra.subheading"
+              description="The subheading of the infrastructure page"
+            >
+              The Electron project manages and maintains a number of systems and
+              services both for internal use and public consumption.
+            </Translate>
+          </p>
+        </header>
+        <div className="row">
+          {data.map((app) => (
+            <div
+              key={app.name}
+              className={clsx('col', 'col--4', styles.cardWrapper)}
+            >
+              <AppCard app={app} />
+            </div>
+          ))}
+        </div>
+      </main>
+    </Layout>
+  );
+}
+
+const AppCard = ({ app }) => {
+  return (
+    <div className={clsx('card', styles.card)}>
+      <div className="card__header">
+        <div className="avatar">
+          <div
+            className={clsx(
+              'avatar__photo',
+              'avatar__photo--sm',
+              styles.cardIcon
+            )}
+            style={{
+              backgroundImage: app.avatar ? `url('${app.avatar}')` : undefined,
+            }}
+          >
+            {app.avatar ? null : app.name.slice(0, 1)}
+          </div>
+          <div className="avatar__intro">
+            <div className={clsx('avatar__name', styles.cardTitle)}>
+              {app.name}
+              {app.url ? (
+                <a
+                  className={styles.cardLink}
+                  href={app.url}
+                  target="_black"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    src={useBaseUrl('assets/img/icon-external.svg')}
+                    alt={`External link to ${app.name} website`}
+                  />
+                </a>
+              ) : null}
+              <a
+                className={styles.cardLink}
+                href={`https://github.com/${app.repo}`}
+                target="_black"
+                rel="noopener noreferrer"
+                style={{ marginLeft: 4 }}
+              >
+                <img
+                  src="https://github.com/favicon.ico"
+                  alt={`External link to ${app.name} repository`}
+                />
+              </a>
+            </div>
+            <p className={clsx('avatar_description', styles.cardDescription)}>
+              <ReactMarkdown allowedElements={['p', 'code']}>
+                {app.description}
+              </ReactMarkdown>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="card__body" style={{ marginTop: 'auto' }}>
+        <div className={styles.tagRow}>
+          {app.tags.sort().map((tag) => {
+            let image = null;
+            let invertable = false;
+            switch (tag.toLowerCase()) {
+              case 'slack': {
+                image = '/assets/img/slack_logo.png';
+                break;
+              }
+              case 'probot': {
+                image = '/assets/img/probot_logo.png';
+                break;
+              }
+              case 'github': {
+                image = 'https://github.com/favicon.ico';
+                invertable = true;
+                break;
+              }
+              case 'circleci': {
+                image = '/assets/img/circleci_logo.png';
+                invertable = true;
+                break;
+              }
+            }
+            return (
+              <div
+                className={clsx(
+                  'avatar__photo',
+                  'avatar__photo--sm',
+                  styles.cardIcon,
+                  invertable ? styles.invertable : ''
+                )}
+                title={tag}
+                style={{
+                  backgroundImage: image ? `url('${image}')` : undefined,
+                }}
+              >
+                {image ? null : tag.slice(0, 1).toUpperCase()}
+              </div>
+            );
+          })}
+        </div>
+        {/* <p className={styles.cardSubtitle}><Translate id="governance.members" description="The people that are part of a working group">Members</Translate></p> */}
+        {/* <div className={clsx(styles.cardList, hasExpand && (expanded ? styles.expanded : styles.unexpanded))}>
+          <Member user={app.chair} isChair/>
+          { app.members.map(user => (<Member key={user} user={user}/>)) }
+        </div> */}
+      </div>
+      <div className="card__footer" style={{ marginTop: 0 }}>
+        <button
+          className={clsx('button button--outline button--block')}
+          // onClick={() => setExpanded(!expanded)}
+        >
+          <Translate
+            id="infra.details"
+            description="Label used to view more details about an app on the infrastructure page"
+          >
+            More Info
+          </Translate>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// const Member = ({ user, isChair }) => {
+//   return (
+//     <div className="avatar" style={{ margin: '1rem' }}>
+//       <img
+//         className="avatar__photo avatar__photo--sm"
+//         src={`https://github.com/${user}.png`}
+//         alt=""
+//       />
+//       <div
+//         className="avatar__intro"
+//         style={{
+//           flexDirection: 'row',
+//           justifyContent: 'space-between',
+//           alignItems: 'center',
+//         }}
+//       >
+//         <a
+//           href={`https://github.com/${user}`}
+//           className={clsx('avatar__name', styles.memberName)}
+//         >
+//           @{user}
+//         </a>
+//         {isChair && (
+//           <span
+//             className="badge badge--secondary"
+//             style={{ textTransform: 'uppercase' }}
+//           >
+//             <Translate
+//               id="governance.chair"
+//               description="The current chair of a working group"
+//             >
+//               Chair
+//             </Translate>
+//           </span>
+//         )}
+//       </div>
+//     </div>
+//   );
+// };
diff --git a/src/pages/infra/infra.module.scss b/src/pages/infra/infra.module.scss
new file mode 100644
index 000000000..ccc6ad0b9
--- /dev/null
+++ b/src/pages/infra/infra.module.scss
@@ -0,0 +1,142 @@
+@mixin description-text {
+  color: var(--ifm-color-emphasis-700);
+  letter-spacing: 0.01em;
+}
+
+@mixin dark-mode-invert {
+  [data-theme='dark'] & {
+    filter: invert(1);
+  }
+}
+
+.header {
+  margin: 0 auto;
+  max-width: 40rem;
+  text-align: center;
+
+  p {
+    @include description-text;
+  }
+}
+
+.cardWrapper {
+  margin: 1rem 0;
+}
+
+.card {
+  max-width: 30rem;
+  padding: 1rem;
+  margin: 0 auto;
+  height: 100%;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+
+.cardSubtitle {
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0.1rem;
+}
+
+.cardLink {
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 1;
+  &:hover {
+    opacity: 0.5;
+  }
+  img {
+    height: 1em;
+    margin-left: 0.2em;
+    @include dark-mode-invert;
+  }
+}
+
+.cardIcon {
+  text-align: center;
+  color: var(--ifm-color-white);
+  line-height: var(--ifm-avatar-photo-size-sm);
+  // one-off colors
+  background: linear-gradient(to top, #dd5e89, #f7bb97);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.cardDescription {
+  display: block;
+  font-size: 0.9em;
+  min-height: 2em;
+  margin-bottom: 0;
+  @include description-text;
+}
+
+.cardList {
+  $num-items: 4;
+  $height-item: 50px;
+  $height-very-very-big: 9999px;
+
+  position: relative;
+  min-height: $height-item * $num-items;
+  max-height: $height-item * $num-items;
+  overflow: hidden;
+  transition: max-height 0.2s cubic-bezier(0, 1, 0, 1);
+
+  // apply gradient to fold as pseudo-element
+  &.unexpanded {
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        to top,
+        var(--ifm-card-background-color) 0%,
+        rgba(255, 255, 255, 0) 50%
+      );
+    }
+  }
+
+  &.expanded {
+    max-height: $height-very-very-big;
+    transition: max-height 0.5s ease-in-out;
+  }
+}
+
+.memberName {
+  font-weight: 400;
+  font-size: 0.8em;
+}
+
+.buttonSubtle {
+  border: none;
+  font-size: 1.2em;
+  color: var(--ifm-color-primary);
+  &:hover {
+    color: var(--ifm-color-primary-dark);
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.tagRow {
+  display: flex;
+  flex-direction: row;
+
+  > div {
+    &:not(:first-child) {
+      margin-left: 8px;
+    }
+  }
+
+  .invertable {
+    @include dark-mode-invert;
+  }
+}
diff --git a/static/assets/img/circleci_logo.png b/static/assets/img/circleci_logo.png
new file mode 100644
index 000000000..085747206
Binary files /dev/null and b/static/assets/img/circleci_logo.png differ
diff --git a/static/assets/img/fiddle_logo.png b/static/assets/img/fiddle_logo.png
new file mode 100644
index 000000000..f310e0c9e
Binary files /dev/null and b/static/assets/img/fiddle_logo.png differ
diff --git a/static/assets/img/probot_logo.png b/static/assets/img/probot_logo.png
new file mode 100644
index 000000000..c6357a2a3
Binary files /dev/null and b/static/assets/img/probot_logo.png differ
diff --git a/static/assets/img/slack_logo.png b/static/assets/img/slack_logo.png
new file mode 100644
index 000000000..ef381618f
Binary files /dev/null and b/static/assets/img/slack_logo.png differ