diff --git a/microsite/data/plugins/backstage-kubernetes.yaml b/microsite/data/plugins/backstage-kubernetes.yaml
index 82994ff1d5..c821d034c5 100644
--- a/microsite/data/plugins/backstage-kubernetes.yaml
+++ b/microsite/data/plugins/backstage-kubernetes.yaml
@@ -7,3 +7,4 @@ description: Monitor all your service's deployments at a glance, even across clu
 documentation: https://backstage.io/docs/features/kubernetes/overview
 iconUrl: img/backstage-k8s.svg
 npmPackageName: '@backstage/plugin-kubernetes'
+order: 4
diff --git a/microsite/data/plugins/backstage-service-catalog.yaml b/microsite/data/plugins/backstage-service-catalog.yaml
index 5c7783d804..1a788078a5 100644
--- a/microsite/data/plugins/backstage-service-catalog.yaml
+++ b/microsite/data/plugins/backstage-service-catalog.yaml
@@ -7,3 +7,4 @@ description: Manage all your services and software components, all in one place.
 documentation: https://backstage.io/docs/features/software-catalog/software-catalog-overview
 iconUrl: img/backstage-service-catalog.svg
 npmPackageName: '@backstage/plugin-catalog'
+order: 1
diff --git a/microsite/data/plugins/backstage-software-templates.yaml b/microsite/data/plugins/backstage-software-templates.yaml
index 341fb814e7..4d478f9435 100644
--- a/microsite/data/plugins/backstage-software-templates.yaml
+++ b/microsite/data/plugins/backstage-software-templates.yaml
@@ -7,3 +7,4 @@ description: Create new software components in just a few steps, with your stand
 documentation: https://backstage.io/docs/features/software-templates/software-templates-index
 iconUrl: img/backstage-software-templates.svg
 npmPackageName: '@backstage/plugin-scaffolder'
+order: 2
diff --git a/microsite/data/plugins/backstage-techdocs.yaml b/microsite/data/plugins/backstage-techdocs.yaml
index 2619a73032..cd2ddefed4 100644
--- a/microsite/data/plugins/backstage-techdocs.yaml
+++ b/microsite/data/plugins/backstage-techdocs.yaml
@@ -7,3 +7,4 @@ description: A docs-like-code solution to technical documentation. Write your do
 documentation: https://backstage.io/docs/features/techdocs/techdocs-overview
 iconUrl: img/backstage-techdocs.svg
 npmPackageName: '@backstage/plugin-techdocs'
+order: 3
diff --git a/microsite/pages/en/plugins.js b/microsite/pages/en/plugins.js
index 941f7a988f..de336444ab 100644
--- a/microsite/pages/en/plugins.js
+++ b/microsite/pages/en/plugins.js
@@ -18,12 +18,6 @@ const pluginMetadata = fs
   .readdirSync(pluginsDirectory)
   .map(file => yaml.load(fs.readFileSync(`./data/plugins/${file}`, 'utf8')))
   .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()));
-const coreFeaturesMetadata = pluginMetadata
-  .filter(plugin => plugin.category === 'Core Feature')
-  .reduce((acc, plugin) => {
-    acc[plugin.title] = plugin;
-    return acc;
-  }, {});
 const truncate = text =>
   text.length > 170 ? text.substr(0, 170) + '...' : text;
 
@@ -53,189 +47,43 @@ const Plugins = () => (
         <h2>Core Features</h2>
       </div>
       <Container wrapped className="PluginGrid">
-        <div className="PluginCard">
-          <div className="PluginCardHeader">
-            <div className="PluginCardImage">
-              <img
-                src={
-                  coreFeaturesMetadata['Backstage Service Catalog'].iconUrl ||
-                  defaultIconUrl
-                }
-                alt={coreFeaturesMetadata['Backstage Service Catalog'].title}
-              />
-            </div>
-            <div className="PluginCardInfo">
-              <h3 className="PluginCardTitle">
-                {coreFeaturesMetadata['Backstage Service Catalog'].title}
-              </h3>
-              <p className="PluginCardAuthor">
-                by{' '}
-                <a
-                  href={
-                    coreFeaturesMetadata['Backstage Service Catalog'].authorUrl
-                  }
-                >
-                  {coreFeaturesMetadata['Backstage Service Catalog'].author}
-                </a>
-              </p>
-              <span className="PluginCardChipOutlined">
-                {coreFeaturesMetadata['Backstage Service Catalog'].category}
-              </span>
-            </div>
-          </div>
-          <div className="PluginCardBody">
-            <p>
-              {truncate(
-                coreFeaturesMetadata['Backstage Service Catalog'].description,
-              )}
-            </p>
-          </div>
-          <div className="PluginCardFooter">
-            <a
-              className="ButtonFilled"
-              href={
-                coreFeaturesMetadata['Backstage Service Catalog'].documentation
-              }
-            >
-              Explore
-            </a>
-          </div>
-        </div>
-        <div className="PluginCard">
-          <div className="PluginCardHeader">
-            <div className="PluginCardImage">
-              <img
-                src={
-                  coreFeaturesMetadata['Backstage Software Templates']
-                    .iconUrl || defaultIconUrl
-                }
-                alt={coreFeaturesMetadata['Backstage Software Templates'].title}
-              />
-            </div>
-            <div className="PluginCardInfo">
-              <h3 className="PluginCardTitle">
-                {coreFeaturesMetadata['Backstage Software Templates'].title}
-              </h3>
-              <p className="PluginCardAuthor">
-                by{' '}
-                <a
-                  href={
-                    coreFeaturesMetadata['Backstage Software Templates']
-                      .authorUrl
-                  }
-                >
-                  {coreFeaturesMetadata['Backstage Software Templates'].author}
-                </a>
-              </p>
-              <span className="PluginCardChipOutlined">
-                {coreFeaturesMetadata['Backstage Software Templates'].category}
-              </span>
-            </div>
-          </div>
-          <div className="PluginCardBody">
-            <p>
-              {truncate(
-                coreFeaturesMetadata['Backstage Software Templates']
-                  .description,
-              )}
-            </p>
-          </div>
-          <div className="PluginCardFooter">
-            <a
-              className="ButtonFilled"
-              href={
-                coreFeaturesMetadata['Backstage Software Templates']
-                  .documentation
-              }
-            >
-              Explore
-            </a>
-          </div>
-        </div>
-        <div className="PluginCard">
-          <div className="PluginCardHeader">
-            <div className="PluginCardImage">
-              <img
-                src={
-                  coreFeaturesMetadata['Backstage TechDocs'].iconUrl ||
-                  defaultIconUrl
-                }
-                alt={coreFeaturesMetadata['Backstage TechDocs'].title}
-              />
-            </div>
-            <div className="PluginCardInfo">
-              <h3 className="PluginCardTitle">
-                {coreFeaturesMetadata['Backstage TechDocs'].title}
-              </h3>
-              <p className="PluginCardAuthor">
-                by{' '}
-                <a href={coreFeaturesMetadata['Backstage TechDocs'].authorUrl}>
-                  {coreFeaturesMetadata['Backstage TechDocs'].author}
-                </a>
-              </p>
-              <span className="PluginCardChipOutlined">
-                {coreFeaturesMetadata['Backstage TechDocs'].category}
-              </span>
-            </div>
-          </div>
-          <div className="PluginCardBody">
-            <p>
-              {truncate(coreFeaturesMetadata['Backstage TechDocs'].description)}
-            </p>
-          </div>
-          <div className="PluginCardFooter">
-            <a
-              className="ButtonFilled"
-              href={coreFeaturesMetadata['Backstage TechDocs'].documentation}
-            >
-              Explore
-            </a>
-          </div>
-        </div>
-        <div className="PluginCard">
-          <div className="PluginCardHeader">
-            <div className="PluginCardImage">
-              <img
-                src={
-                  coreFeaturesMetadata['Backstage Kubernetes'].iconUrl ||
-                  defaultIconUrl
-                }
-                alt={coreFeaturesMetadata['Backstage Kubernetes'].title}
-              />
-            </div>
-            <div className="PluginCardInfo">
-              <h3 className="PluginCardTitle">
-                {coreFeaturesMetadata['Backstage Kubernetes'].title}
-              </h3>
-              <p className="PluginCardAuthor">
-                by{' '}
-                <a
-                  href={coreFeaturesMetadata['Backstage Kubernetes'].authorUrl}
-                >
-                  {coreFeaturesMetadata['Backstage Kubernetes'].author}
-                </a>
-              </p>
-              <span className="PluginCardChipOutlined">
-                {coreFeaturesMetadata['Backstage Kubernetes'].category}
-              </span>
-            </div>
-          </div>
-          <div className="PluginCardBody">
-            <p>
-              {truncate(
-                coreFeaturesMetadata['Backstage Kubernetes'].description,
-              )}
-            </p>
-          </div>
-          <div className="PluginCardFooter">
-            <a
-              className="ButtonFilled"
-              href={coreFeaturesMetadata['Backstage Kubernetes'].documentation}
-            >
-              Explore
-            </a>
-          </div>
-        </div>
+        {pluginMetadata
+          .filter(plugin => plugin.category === 'Core Feature')
+          .sort((a, b) => a.order - b.order)
+          .map(
+            ({
+              iconUrl,
+              title,
+              description,
+              author,
+              authorUrl,
+              documentation,
+              category,
+            }) => (
+              <div className="PluginCard">
+                <div className="PluginCardHeader">
+                  <div className="PluginCardImage">
+                    <img src={iconUrl || defaultIconUrl} alt={title} />
+                  </div>
+                  <div className="PluginCardInfo">
+                    <h3 className="PluginCardTitle">{title}</h3>
+                    <p className="PluginCardAuthor">
+                      by <a href={authorUrl}>{author}</a>
+                    </p>
+                    <span className="PluginCardChipOutlined">{category}</span>
+                  </div>
+                </div>
+                <div className="PluginCardBody">
+                  <p>{truncate(description)}</p>
+                </div>
+                <div className="PluginCardFooter">
+                  <a className="ButtonFilled" href={documentation}>
+                    Explore
+                  </a>
+                </div>
+              </div>
+            ),
+          )}
       </Container>
       <div className="PluginPageHeader">
         <h2>All Plugins</h2>