diff --git a/.eslintignore b/.eslintignore
index c73074efb3..46bb1ad2b2 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,5 @@
 **/.git/**
 **/public/**
 **/microsite/**
+**/templates/**
+**/sample-templates/**
diff --git a/app-config.yaml b/app-config.yaml
index 5b704f9b8e..e018eef87e 100644
--- a/app-config.yaml
+++ b/app-config.yaml
@@ -57,10 +57,22 @@ catalog:
   rules:
     - allow: [Component, API, Group, Template, Location]
   processors:
-    githubApi:
+    github:
       privateToken:
         $secret:
           env: GITHUB_PRIVATE_TOKEN
+    githubApi:
+      providers:
+        - target: https://github.com
+          token:
+            $secret:
+              env: GITHUB_PRIVATE_TOKEN
+        # Example for how to add your GitHub Enterprise instance:
+        # - target: https://ghe.example.net
+        #   apiBaseUrl: https://ghe.example.net/api/v3
+        #   token:
+        #     $secret:
+        #       env: GHE_PRIVATE_TOKEN
     bitbucketApi:
       username:
         $secret:
@@ -98,6 +110,19 @@ catalog:
     - type: github
       target: https://github.com/spotify/backstage/blob/master/plugins/scaffolder-backend/sample-templates/all-templates.yaml
 
+scaffolder:
+  github:
+    token:
+      $secret:
+        env: GITHUB_ACCESS_TOKEN
+    visibility: public # or 'internal' or 'private'
+  gitlab:
+    api:
+      baseUrl: https://gitlab.com
+      token:
+        $secret:
+          env: GITLAB_ACCESS_TOKEN
+
 auth:
   providers:
     google:
diff --git a/docs/FAQ.md b/docs/FAQ.md
index 4b5df3ace0..b4c4970ff8 100644
--- a/docs/FAQ.md
+++ b/docs/FAQ.md
@@ -1,6 +1,7 @@
 ---
 id: FAQ
 title: FAQ
+description: All FAQ related to Backstage
 ---
 
 ## Product FAQ
diff --git a/docs/api/backend.md b/docs/api/backend.md
index bc44b8350c..0990343a01 100644
--- a/docs/api/backend.md
+++ b/docs/api/backend.md
@@ -1,6 +1,7 @@
 ---
 id: backend
 title: Backend
+description: About Backend
 ---
 
 ## TODO
diff --git a/docs/api/utility-apis.md b/docs/api/utility-apis.md
index 37cde87262..d192cbd6ee 100644
--- a/docs/api/utility-apis.md
+++ b/docs/api/utility-apis.md
@@ -1,6 +1,7 @@
 ---
 id: utility-apis
 title: Utility APIs
+description: Backstage Utility APIs
 ---
 
 ## Introduction
diff --git a/docs/architecture-decisions/adr001-add-adr-log.md b/docs/architecture-decisions/adr001-add-adr-log.md
index 8a484fa264..16783367ab 100644
--- a/docs/architecture-decisions/adr001-add-adr-log.md
+++ b/docs/architecture-decisions/adr001-add-adr-log.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr001
 title: ADR001: Architecture Decision Record (ADR) log
-sidebar_label: ADR001
+description: Architecture Decision Record (ADR) logs as a reference point for the team
 ---
 
 | Created    | Status |
diff --git a/docs/architecture-decisions/adr002-default-catalog-file-format.md b/docs/architecture-decisions/adr002-default-catalog-file-format.md
index af22d33020..f4fd3a1158 100644
--- a/docs/architecture-decisions/adr002-default-catalog-file-format.md
+++ b/docs/architecture-decisions/adr002-default-catalog-file-format.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr002
 title: ADR002: Default Software Catalog File Format
-sidebar_label: ADR002
+description: Architecture Decision Record (ADR) log on Default Software Catalog File Format
 ---
 
 | Created    | Status |
diff --git a/docs/architecture-decisions/adr003-avoid-default-exports.md b/docs/architecture-decisions/adr003-avoid-default-exports.md
index 7a8df28f49..8634a19632 100644
--- a/docs/architecture-decisions/adr003-avoid-default-exports.md
+++ b/docs/architecture-decisions/adr003-avoid-default-exports.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr003
 title: ADR003: Avoid Default Exports and Prefer Named Exports
-sidebar_label: ADR003
+description: Architecture Decision Record (ADR) log on Avoid Default Exports and Prefer Named Exports
 ---
 
 | Created    | Status |
diff --git a/docs/architecture-decisions/adr004-module-export-structure.md b/docs/architecture-decisions/adr004-module-export-structure.md
index 077f8c35d1..12408abac1 100644
--- a/docs/architecture-decisions/adr004-module-export-structure.md
+++ b/docs/architecture-decisions/adr004-module-export-structure.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr004
 title: ADR004: Module Export Structure
-sidebar_label: ADR004
+description: Architecture Decision Record (ADR) log on Module Export Structure
 ---
 
 | Created    | Status |
diff --git a/docs/architecture-decisions/adr005-catalog-core-entities.md b/docs/architecture-decisions/adr005-catalog-core-entities.md
index 8f39acd1cf..f91698c5ff 100644
--- a/docs/architecture-decisions/adr005-catalog-core-entities.md
+++ b/docs/architecture-decisions/adr005-catalog-core-entities.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr005
 title: ADR005: Catalog Core Entities
-sidebar_label: ADR005
+description: Architecture Decision Record (ADR) log on Catalog Core Entities
 ---
 
 | Created    | Status |
diff --git a/docs/architecture-decisions/adr006-avoid-react-fc.md b/docs/architecture-decisions/adr006-avoid-react-fc.md
index e48fceb562..bea36712d7 100644
--- a/docs/architecture-decisions/adr006-avoid-react-fc.md
+++ b/docs/architecture-decisions/adr006-avoid-react-fc.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr006
 title: ADR006: Avoid React.FC and React.SFC
-sidebar_label: ADR006
+description: Architecture Decision Record (ADR) log on Avoid React.FC and React.SFC
 ---
 
 ## Context
diff --git a/docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md b/docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md
index 773f08be30..6b18f67d40 100644
--- a/docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md
+++ b/docs/architecture-decisions/adr007-use-msw-to-mock-service-requests.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr007
 title: ADR007: Use MSW to mock http requests
-sidebar_label: ADR007
+description: Architecture Decision Record (ADR) log on Use MSW to mock http requests
 ---
 
 ## Context
diff --git a/docs/architecture-decisions/adr008-default-catalog-file-name.md b/docs/architecture-decisions/adr008-default-catalog-file-name.md
index 979ea4de33..c57d10c0b1 100644
--- a/docs/architecture-decisions/adr008-default-catalog-file-name.md
+++ b/docs/architecture-decisions/adr008-default-catalog-file-name.md
@@ -1,7 +1,7 @@
 ---
 id: adrs-adr008
 title: ADR008: Default Catalog File Name
-sidebar_label: ADR008
+description: Architecture Decision Record (ADR) log on Default Catalog File Name
 ---
 
 ## Background
diff --git a/docs/architecture-decisions/index.md b/docs/architecture-decisions/index.md
index 0e9ff21812..ddf2805e75 100644
--- a/docs/architecture-decisions/index.md
+++ b/docs/architecture-decisions/index.md
@@ -2,6 +2,7 @@
 id: adrs-overview
 title: Architecture Decision Records (ADR)
 sidebar_label: Overview
+description: Overview of Architecture Decision Records (ADR)
 ---
 
 The substantial architecture decisions made in the Backstage project live here.
diff --git a/docs/auth/oauth-popup-flow.svg b/docs/assets/auth/oauth-popup-flow.svg
similarity index 98%
rename from docs/auth/oauth-popup-flow.svg
rename to docs/assets/auth/oauth-popup-flow.svg
index 4d9e79787a..2132903783 100644
--- a/docs/auth/oauth-popup-flow.svg
+++ b/docs/assets/auth/oauth-popup-flow.svg
@@ -1,5 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="1145px" preserveAspectRatio="none" style="width:1214px;height:1145px;background:#FEFEFE;" version="1.1" viewBox="0 0 1214 1145" width="1214px" zoomAndPan="magnify"><defs/><g><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="18" lengthAdjust="spacingAndGlyphs" textLength="287" x="461.5" y="27.4023">OAuth Consent and Refresh Flow</text><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="120" x2="120" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="419.5" x2="419.5" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="839" x2="839" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="985" x2="985" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1107" x2="1107" y1="86.6875" y2="1088.041"/><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="69" x="86" y="55.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="55" x="93" y="75.7344">Browser</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="69" x="86" y="1087.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="55" x="93" y="1107.5762">Browser</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="116" x="361.5" y="55.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="102" x="368.5" y="75.7344">Popup Window</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="116" x="361.5" y="1087.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="102" x="368.5" y="1107.5762">Popup Window</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="159" x="760" y="55.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="145" x="767" y="75.7344">auth-backend plugin</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="159" x="760" y="1087.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="145" x="767" y="1107.5762">auth-backend plugin</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="107" x="929" y="83.7344">Consent Screen</text><ellipse cx="985.5" cy="54.1992" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><polygon fill="#383838" points="981.5,42.1992,987.5,37.1992,985.5,42.1992,987.5,47.1992,981.5,42.1992" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="107" x="929" y="1100.5762">Consent Screen</text><ellipse cx="985.5" cy="1119.5293" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><polygon fill="#383838" points="981.5,1107.5293,987.5,1102.5293,985.5,1107.5293,987.5,1112.5293,981.5,1107.5293" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="105" x="1052" y="83.7344">OAuth Provider</text><ellipse cx="1107.5" cy="54.1992" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><line style="stroke: #383838; stroke-width: 2.0;" x1="1095.5" x2="1119.5" y1="68.1992" y2="68.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="105" x="1052" y="1100.5762">OAuth Provider</text><ellipse cx="1107.5" cy="1119.5293" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><line style="stroke: #383838; stroke-width: 2.0;" x1="1095.5" x2="1119.5" y1="1133.5293" y2="1133.5293"/><path d="M8,101.6875 L8,156.6875 L233,156.6875 L233,111.6875 L223,101.6875 L8,101.6875 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M223,101.6875 L223,111.6875 L233,111.6875 L223,101.6875 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="201" x="14" y="119.2559">Components on page ask for an</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="161" x="14" y="134.5664">access token with greater</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="204" x="14" y="149.877">scope than the existing session.</text><polygon fill="#383838" points="407.5,179.9297,417.5,183.9297,407.5,187.9297,411.5,183.9297" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="120.5" x2="413.5" y1="183.9297" y2="183.9297"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="77" x="127.5" y="179.1875">Open popup</text><polygon fill="#383838" points="827.5,209.2402,837.5,213.2402,827.5,217.2402,831.5,213.2402" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="833.5" y1="213.2402" y2="213.2402"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="333" x="426.5" y="208.498">GET /auth/&lt;provider&gt;/start?scope=some%20scopes</text><polygon fill="#383838" points="430.5,269.1719,420.5,273.1719,430.5,277.1719,426.5,273.1719" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="424.5" x2="838.5" y1="273.1719" y2="273.1719"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="436.5" y="237.8086">Redirect to consent screen with</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="212" x="436.5" y="253.1191">random nonce in OAuth state and</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="255" x="436.5" y="268.4297">short-lived cookie with the same nonce.</text><polygon fill="#383838" points="973.5,313.793,983.5,317.793,973.5,321.793,977.5,317.793" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="979.5" y1="317.793" y2="317.793"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="369" x="426.5" y="297.7402">GET /consent_url?redirect_uri=&lt;redirect_uri&gt;?nonce=&lt;n&gt;</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="422" x="426.5" y="313.0508">where redirect_uri=&lt;app-origin&gt;/auth/&lt;provider&gt;/handler/frame</text><path d="M905,330.793 L905,370.793 L1066,370.793 L1066,340.793 L1056,330.793 L905,330.793 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M1056,330.793 L1056,340.793 L1066,340.793 L1056,330.793 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="106" x="911" y="348.3613">User consents to</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="140" x="911" y="363.6719">access the new scope.</text><polygon fill="#383838" points="430.5,393.7246,420.5,397.7246,430.5,401.7246,426.5,397.7246" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="424.5" x2="984.5" y1="397.7246" y2="397.7246"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="343" x="436.5" y="392.9824">Redirect to given redirect URL, with authorization code</text><polygon fill="#383838" points="827.5,438.3457,837.5,442.3457,827.5,446.3457,831.5,442.3457" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="833.5" y1="442.3457" y2="442.3457"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="396" x="426.5" y="422.293">GET /auth/&lt;provider&gt;/handler/frame?code=&lt;c&gt;&amp;nonce=&lt;n&gt;</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="304" x="426.5" y="437.6035">Request includes the previously set none cookie</text><path d="M710,455.3457 L710,495.3457 L969,495.3457 L969,465.3457 L959,455.3457 L710,455.3457 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M959,455.3457 L959,465.3457 L969,465.3457 L959,455.3457 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="217" x="716" y="472.9141">Verify that the nonce in the cookie</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="238" x="716" y="488.2246">matches the nonce in the OAuth state</text><polygon fill="#383838" points="1095.5,548.8984,1105.5,552.8984,1095.5,556.8984,1099.5,552.8984" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="839.5" x2="1101.5" y1="552.8984" y2="552.8984"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="122" x="846.5" y="517.5352">Authorization Code</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="55" x="846.5" y="532.8457">Client ID</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="79" x="846.5" y="548.1563">Client Secret</text><path d="M1013,565.8984 L1013,590.8984 L1202,590.8984 L1202,575.8984 L1192,565.8984 L1013,565.8984 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M1192,565.8984 L1192,575.8984 L1202,575.8984 L1192,565.8984 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="168" x="1019" y="583.4668">Verify and generate tokens</text><polygon fill="#383838" points="850.5,674.7617,840.5,678.7617,850.5,682.7617,846.5,678.7617" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="844.5" x2="1106.5" y1="678.7617" y2="678.7617"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="87" x="856.5" y="612.7773">Access Token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="65" x="856.5" y="628.0879">(ID Token)</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="98" x="856.5" y="643.3984">(Refresh Token)</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="37" x="856.5" y="658.709">Scope</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="74" x="856.5" y="674.0195">Expire Time</text><polygon fill="#383838" points="430.5,719.3828,420.5,723.3828,430.5,727.3828,426.5,723.3828" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="424.5" x2="838.5" y1="723.3828" y2="723.3828"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="300" x="436.5" y="703.3301">Small HTML page with inlined response payload</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="260" x="436.5" y="718.6406">Store Refresh Token in HTTP-only cookie</text><polygon fill="#383838" points="131.5,748.6934,121.5,752.6934,131.5,756.6934,127.5,752.6934" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="125.5" x2="418.5" y1="752.6934" y2="752.6934"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="275" x="137.5" y="747.9512">postMessage() with tokens and info or error</text><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="461.5" y1="782.0039" y2="782.0039"/><line style="stroke: #383838; stroke-width: 1.0;" x1="461.5" x2="461.5" y1="782.0039" y2="795.0039"/><line style="stroke: #383838; stroke-width: 1.0;" x1="420.5" x2="461.5" y1="795.0039" y2="795.0039"/><polygon fill="#383838" points="430.5,791.0039,420.5,795.0039,430.5,799.0039,426.5,795.0039" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="62" x="426.5" y="777.2617">Close self</text><path d="M9,808.0039 L9,863.0039 L232,863.0039 L232,818.0039 L222,808.0039 L9,808.0039 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M222,808.0039 L222,818.0039 L232,818.0039 L222,808.0039 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="174" x="15" y="825.5723">A later point when a refresh</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="176" x="19" y="840.8828">is needed. Either because of</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="19" y="856.1934">a reload or an expiring session.</text><polygon fill="#383838" points="827.5,901.5566,837.5,905.5566,827.5,909.5566,831.5,905.5566" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="120.5" x2="833.5" y1="905.5566" y2="905.5566"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="185" x="127.5" y="885.5039">GET /auth/&lt;provider&gt;/token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="194" x="127.5" y="900.8145">Refresh Token cookie included</text><polygon fill="#383838" points="1095.5,961.4883,1105.5,965.4883,1095.5,969.4883,1099.5,965.4883" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="839.5" x2="1101.5" y1="965.4883" y2="965.4883"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="90" x="846.5" y="930.125">Refresh Token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="55" x="846.5" y="945.4355">Client ID</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="79" x="846.5" y="960.7461">Client Secret</text><polygon fill="#383838" points="850.5,1036.7305,840.5,1040.7305,850.5,1044.7305,846.5,1040.7305" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="844.5" x2="1106.5" y1="1040.7305" y2="1040.7305"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="87" x="856.5" y="990.0566">Access Token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="65" x="856.5" y="1005.3672">(ID Token)</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="37" x="856.5" y="1020.6777">Scope</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="74" x="856.5" y="1035.9883">Expire Time</text><polygon fill="#383838" points="131.5,1066.041,121.5,1070.041,131.5,1074.041,127.5,1070.041" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="125.5" x2="838.5" y1="1070.041" y2="1070.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="102" x="137.5" y="1065.2988">Tokens and info</text><!--MD5=[5195d92647a89e68689dac1adbbd164a]
-@startuml oauth-popup-flow
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="1145px" preserveAspectRatio="none" style="width:1214px;height:1145px;background:#FEFEFE;" version="1.1" viewBox="0 0 1214 1145" width="1214px" zoomAndPan="magnify"><defs/><g><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="18" lengthAdjust="spacingAndGlyphs" textLength="287" x="461.5" y="27.4023">OAuth Consent and Refresh Flow</text><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="120" x2="120" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="419.5" x2="419.5" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="839" x2="839" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="985" x2="985" y1="86.6875" y2="1088.041"/><line style="stroke: #383838; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1107" x2="1107" y1="86.6875" y2="1088.041"/><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="69" x="86" y="55.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="55" x="93" y="75.7344">Browser</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="69" x="86" y="1087.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="55" x="93" y="1107.5762">Browser</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="116" x="361.5" y="55.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="102" x="368.5" y="75.7344">Popup Window</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="116" x="361.5" y="1087.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="102" x="368.5" y="1107.5762">Popup Window</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="159" x="760" y="55.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="145" x="767" y="75.7344">auth-backend plugin</text><rect fill="#F8F8F8" height="30.4883" style="stroke: #383838; stroke-width: 1.5;" width="159" x="760" y="1087.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="145" x="767" y="1107.5762">auth-backend plugin</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="107" x="929" y="83.7344">Consent Screen</text><ellipse cx="985.5" cy="54.1992" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><polygon fill="#383838" points="981.5,42.1992,987.5,37.1992,985.5,42.1992,987.5,47.1992,981.5,42.1992" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="107" x="929" y="1100.5762">Consent Screen</text><ellipse cx="985.5" cy="1119.5293" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><polygon fill="#383838" points="981.5,1107.5293,987.5,1102.5293,985.5,1107.5293,987.5,1112.5293,981.5,1107.5293" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="105" x="1052" y="83.7344">OAuth Provider</text><ellipse cx="1107.5" cy="54.1992" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><line style="stroke: #383838; stroke-width: 2.0;" x1="1095.5" x2="1119.5" y1="68.1992" y2="68.1992"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="105" x="1052" y="1100.5762">OAuth Provider</text><ellipse cx="1107.5" cy="1119.5293" fill="#F8F8F8" rx="12" ry="12" style="stroke: #383838; stroke-width: 2.0;"/><line style="stroke: #383838; stroke-width: 2.0;" x1="1095.5" x2="1119.5" y1="1133.5293" y2="1133.5293"/><path d="M8,101.6875 L8,156.6875 L233,156.6875 L233,111.6875 L223,101.6875 L8,101.6875 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M223,101.6875 L223,111.6875 L233,111.6875 L223,101.6875 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="201" x="14" y="119.2559">Components on page ask for an</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="161" x="14" y="134.5664">access token with greater</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="204" x="14" y="149.877">scope than the existing session.</text><polygon fill="#383838" points="407.5,179.9297,417.5,183.9297,407.5,187.9297,411.5,183.9297" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="120.5" x2="413.5" y1="183.9297" y2="183.9297"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="77" x="127.5" y="179.1875">Open popup</text><polygon fill="#383838" points="827.5,209.2402,837.5,213.2402,827.5,217.2402,831.5,213.2402" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="833.5" y1="213.2402" y2="213.2402"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="333" x="426.5" y="208.498">GET /auth/&lt;provider&gt;/start?scope=some%20scopes</text><polygon fill="#383838" points="430.5,269.1719,420.5,273.1719,430.5,277.1719,426.5,273.1719" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="424.5" x2="838.5" y1="273.1719" y2="273.1719"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="436.5" y="237.8086">Redirect to consent screen with</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="212" x="436.5" y="253.1191">random nonce in OAuth state and</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="255" x="436.5" y="268.4297">short-lived cookie with the same nonce.</text><polygon fill="#383838" points="973.5,313.793,983.5,317.793,973.5,321.793,977.5,317.793" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="979.5" y1="317.793" y2="317.793"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="369" x="426.5" y="297.7402">GET /consent_url?redirect_uri=&lt;redirect_uri&gt;?nonce=&lt;n&gt;</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="422" x="426.5" y="313.0508">where redirect_uri=&lt;app-origin&gt;/auth/&lt;provider&gt;/handler/frame</text><path d="M905,330.793 L905,370.793 L1066,370.793 L1066,340.793 L1056,330.793 L905,330.793 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M1056,330.793 L1056,340.793 L1066,340.793 L1056,330.793 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="106" x="911" y="348.3613">User consents to</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="140" x="911" y="363.6719">access the new scope.</text><polygon fill="#383838" points="430.5,393.7246,420.5,397.7246,430.5,401.7246,426.5,397.7246" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="424.5" x2="984.5" y1="397.7246" y2="397.7246"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="343" x="436.5" y="392.9824">Redirect to given redirect URL, with authorization code</text><polygon fill="#383838" points="827.5,438.3457,837.5,442.3457,827.5,446.3457,831.5,442.3457" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="833.5" y1="442.3457" y2="442.3457"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="396" x="426.5" y="422.293">GET /auth/&lt;provider&gt;/handler/frame?code=&lt;c&gt;&amp;nonce=&lt;n&gt;</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="304" x="426.5" y="437.6035">Request includes the previously set none cookie</text><path d="M710,455.3457 L710,495.3457 L969,495.3457 L969,465.3457 L959,455.3457 L710,455.3457 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M959,455.3457 L959,465.3457 L969,465.3457 L959,455.3457 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="217" x="716" y="472.9141">Verify that the nonce in the cookie</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="238" x="716" y="488.2246">matches the nonce in the OAuth state</text><polygon fill="#383838" points="1095.5,548.8984,1105.5,552.8984,1095.5,556.8984,1099.5,552.8984" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="839.5" x2="1101.5" y1="552.8984" y2="552.8984"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="122" x="846.5" y="517.5352">Authorization Code</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="55" x="846.5" y="532.8457">Client ID</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="79" x="846.5" y="548.1563">Client Secret</text><path d="M1013,565.8984 L1013,590.8984 L1202,590.8984 L1202,575.8984 L1192,565.8984 L1013,565.8984 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M1192,565.8984 L1192,575.8984 L1202,575.8984 L1192,565.8984 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="168" x="1019" y="583.4668">Verify and generate tokens</text><polygon fill="#383838" points="850.5,674.7617,840.5,678.7617,850.5,682.7617,846.5,678.7617" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="844.5" x2="1106.5" y1="678.7617" y2="678.7617"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="87" x="856.5" y="612.7773">Access Token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="65" x="856.5" y="628.0879">(ID Token)</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="98" x="856.5" y="643.3984">(Refresh Token)</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="37" x="856.5" y="658.709">Scope</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="74" x="856.5" y="674.0195">Expire Time</text><polygon fill="#383838" points="430.5,719.3828,420.5,723.3828,430.5,727.3828,426.5,723.3828" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="424.5" x2="838.5" y1="723.3828" y2="723.3828"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="300" x="436.5" y="703.3301">Small HTML page with inlined response payload</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="260" x="436.5" y="718.6406">Store Refresh Token in HTTP-only cookie</text><polygon fill="#383838" points="131.5,748.6934,121.5,752.6934,131.5,756.6934,127.5,752.6934" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="125.5" x2="418.5" y1="752.6934" y2="752.6934"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="275" x="137.5" y="747.9512">postMessage() with tokens and info or error</text><line style="stroke: #383838; stroke-width: 1.0;" x1="419.5" x2="461.5" y1="782.0039" y2="782.0039"/><line style="stroke: #383838; stroke-width: 1.0;" x1="461.5" x2="461.5" y1="782.0039" y2="795.0039"/><line style="stroke: #383838; stroke-width: 1.0;" x1="420.5" x2="461.5" y1="795.0039" y2="795.0039"/><polygon fill="#383838" points="430.5,791.0039,420.5,795.0039,430.5,799.0039,426.5,795.0039" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="62" x="426.5" y="777.2617">Close self</text><path d="M9,808.0039 L9,863.0039 L232,863.0039 L232,818.0039 L222,808.0039 L9,808.0039 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><path d="M222,808.0039 L222,818.0039 L232,818.0039 L222,808.0039 " fill="#ECECEC" style="stroke: #383838; stroke-width: 1.0;"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="174" x="15" y="825.5723">A later point when a refresh</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="176" x="19" y="840.8828">is needed. Either because of</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="19" y="856.1934">a reload or an expiring session.</text><polygon fill="#383838" points="827.5,901.5566,837.5,905.5566,827.5,909.5566,831.5,905.5566" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="120.5" x2="833.5" y1="905.5566" y2="905.5566"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="185" x="127.5" y="885.5039">GET /auth/&lt;provider&gt;/token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="194" x="127.5" y="900.8145">Refresh Token cookie included</text><polygon fill="#383838" points="1095.5,961.4883,1105.5,965.4883,1095.5,969.4883,1099.5,965.4883" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="839.5" x2="1101.5" y1="965.4883" y2="965.4883"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="90" x="846.5" y="930.125">Refresh Token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="55" x="846.5" y="945.4355">Client ID</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="79" x="846.5" y="960.7461">Client Secret</text><polygon fill="#383838" points="850.5,1036.7305,840.5,1040.7305,850.5,1044.7305,846.5,1040.7305" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="844.5" x2="1106.5" y1="1040.7305" y2="1040.7305"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="87" x="856.5" y="990.0566">Access Token</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="65" x="856.5" y="1005.3672">(ID Token)</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="37" x="856.5" y="1020.6777">Scope</text><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="74" x="856.5" y="1035.9883">Expire Time</text><polygon fill="#383838" points="131.5,1066.041,121.5,1070.041,131.5,1074.041,127.5,1070.041" style="stroke: #383838; stroke-width: 1.0;"/><line style="stroke: #383838; stroke-width: 1.0;" x1="125.5" x2="838.5" y1="1070.041" y2="1070.041"/><text fill="#000000" font-family="Segoe UI, Helvetica, Arial, sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="102" x="137.5" y="1065.2988">Tokens and info</text><!--MD5=[c025fb26ac34956dc15457f201ee7a22]
+@startuml /../assets/auth/oauth-popup-flow
 
 skinparam monochrome true
 skinparam shadowing false
@@ -46,7 +46,7 @@ Browser <- Backend: Tokens and info
 
 @enduml
 
-PlantUML version 1.2020.11(Sat May 30 12:13:43 CEST 2020)
+PlantUML version 1.2020.16(Mon Aug 24 01:50:43 IST 2020)
 (GPL source distribution)
 Java Runtime: OpenJDK Runtime Environment
 JVM: OpenJDK 64-Bit Server VM
diff --git a/docs/auth/add-auth-provider.md b/docs/auth/add-auth-provider.md
index 7e4f5c8e2f..c5f7645a49 100644
--- a/docs/auth/add-auth-provider.md
+++ b/docs/auth/add-auth-provider.md
@@ -1,6 +1,7 @@
 ---
 id: add-auth-provider
 title: Adding authentication providers
+description: Documentation on Adding authentication providers
 ---
 
 ## Passport
diff --git a/docs/auth/auth-backend-classes.md b/docs/auth/auth-backend-classes.md
index 0147c66dd9..4ccee8ede9 100644
--- a/docs/auth/auth-backend-classes.md
+++ b/docs/auth/auth-backend-classes.md
@@ -1,6 +1,7 @@
 ---
 id: auth-backend-classes
 title: Auth backend classes
+description: Documentation on Auth backend classes
 ---
 
 ## How Does Authentication Work?
diff --git a/docs/auth/auth-backend.md b/docs/auth/auth-backend.md
index 579d2e2cda..6d8b95ac9f 100644
--- a/docs/auth/auth-backend.md
+++ b/docs/auth/auth-backend.md
@@ -1,6 +1,7 @@
 ---
 id: auth-backend
 title: Auth backend
+description: Documentation on Auth backend
 ---
 
 ## TODO
diff --git a/docs/auth/glossary.md b/docs/auth/glossary.md
index 607326b3a5..ad7ae78d19 100644
--- a/docs/auth/glossary.md
+++ b/docs/auth/glossary.md
@@ -1,6 +1,7 @@
 ---
 id: glossary
 title: Glossary
+description: All Glossaries related to auth
 ---
 
 - **Popup** - A separate browser window opened on top of the previous one.
diff --git a/docs/auth/index.md b/docs/auth/index.md
index b885db0820..0fa8de3280 100644
--- a/docs/auth/index.md
+++ b/docs/auth/index.md
@@ -1,6 +1,7 @@
 ---
 id: index
 title: User Authentication and Authorization in Backstage
+description: Documentation on User Authentication and Authorization in Backstage
 ---
 
 ## Summary
diff --git a/docs/auth/oauth.md b/docs/auth/oauth.md
index b7013a310d..e90b7b665a 100644
--- a/docs/auth/oauth.md
+++ b/docs/auth/oauth.md
@@ -1,6 +1,9 @@
 ---
 id: oauth
 title: OAuth and OpenID Connect
+description: This section describes how Backstage allows plugins to request
+OAuth Access Tokens and OpenID Connect ID Tokens on behalf of the user, to be
+used for auth to various third party APIs
 ---
 
 This section describes how Backstage allows plugins to request OAuth Access
@@ -104,10 +107,10 @@ request an access token.
 
 The following diagram visualizes the flow described in the previous section.
 
-![](oauth-popup-flow.svg)
+![Sequence Diagram](../assets/auth/oauth-popup-flow.svg)
 
 <!--
-@startuml oauth-popup-flow
+@startuml /../assets/auth/oauth-popup-flow
 
 skinparam monochrome true
 skinparam shadowing false
diff --git a/docs/conf/defining.md b/docs/conf/defining.md
index b28d6b8362..bea03e4e44 100644
--- a/docs/conf/defining.md
+++ b/docs/conf/defining.md
@@ -1,6 +1,7 @@
 ---
 id: defining
 title: Defining Configuration for your Plugin
+description: Documentation on Defining Configuration for your Plugin
 ---
 
 There is currently no tooling support or helpers for defining plugin
diff --git a/docs/conf/index.md b/docs/conf/index.md
index bc1d7e8e1f..83eff50a7d 100644
--- a/docs/conf/index.md
+++ b/docs/conf/index.md
@@ -1,6 +1,7 @@
 ---
 id: index
 title: Static Configuration in Backstage
+description: Documentation on Static Configuration in Backstage
 ---
 
 ## Summary
diff --git a/docs/conf/reading.md b/docs/conf/reading.md
index 76d1f7f6ea..a43ec8c026 100644
--- a/docs/conf/reading.md
+++ b/docs/conf/reading.md
@@ -1,6 +1,7 @@
 ---
 id: reading
 title: Reading Backstage Configuration
+description: Documentation on Reading Backstage Configuration
 ---
 
 ## Config API
diff --git a/docs/conf/writing.md b/docs/conf/writing.md
index da2a10a86d..6d338e586d 100644
--- a/docs/conf/writing.md
+++ b/docs/conf/writing.md
@@ -1,6 +1,7 @@
 ---
 id: writing
 title: Writing Backstage Configuration Files
+description: Documentation on Writing Backstage Configuration Files
 ---
 
 ## File Format
diff --git a/docs/dls/contributing-to-storybook.md b/docs/dls/contributing-to-storybook.md
index f0c2201a98..058f4a23a7 100644
--- a/docs/dls/contributing-to-storybook.md
+++ b/docs/dls/contributing-to-storybook.md
@@ -1,6 +1,7 @@
 ---
 id: contributing-to-storybook
 title: Contributing to Storybook
+description: Documentation on How to Contribute to Storybook
 ---
 
 You find our storybook at
diff --git a/docs/dls/design.md b/docs/dls/design.md
index b434fc8791..fa3a0c159e 100644
--- a/docs/dls/design.md
+++ b/docs/dls/design.md
@@ -1,6 +1,7 @@
 ---
 id: design
 title: Design
+description: Documentation on Design
 ---
 
 ![header](../assets/dls/designheader-updated.png)
diff --git a/docs/dls/figma.md b/docs/dls/figma.md
index 14de2f5980..c5a33d15c2 100644
--- a/docs/dls/figma.md
+++ b/docs/dls/figma.md
@@ -1,6 +1,8 @@
 ---
 id: figma
 title: Figma
+description: Documentation on using Figma to build your own plugins for
+Backstage
 ---
 
 We have a [Figma component library](https://www.figma.com/@backstage) that you
diff --git a/docs/features/software-catalog/api.md b/docs/features/software-catalog/api.md
index 332c1e505b..f7c7b19112 100644
--- a/docs/features/software-catalog/api.md
+++ b/docs/features/software-catalog/api.md
@@ -1,6 +1,7 @@
 ---
 id: software-catalog-api
 title: API
+description: Documentation on Software Catalog API
 ---
 
 ## TODO
diff --git a/docs/features/software-catalog/configuration.md b/docs/features/software-catalog/configuration.md
index be6314e494..0bcfaabe0a 100644
--- a/docs/features/software-catalog/configuration.md
+++ b/docs/features/software-catalog/configuration.md
@@ -1,6 +1,7 @@
 ---
 id: software-catalog-configuration
 title: Catalog Configuration
+description: Documentation on Software Catalog Configuration
 ---
 
 ## Static Location Configuration
diff --git a/docs/features/software-catalog/descriptor-format.md b/docs/features/software-catalog/descriptor-format.md
index fa4b8c23da..301d80630c 100644
--- a/docs/features/software-catalog/descriptor-format.md
+++ b/docs/features/software-catalog/descriptor-format.md
@@ -2,6 +2,8 @@
 id: descriptor-format
 title: Descriptor Format of Catalog Entities
 sidebar_label: YAML File Format
+description: Documentation on Descriptor Format of Catalog Entities which
+describes the default data shape and semantics of catalog entities
 ---
 
 This section describes the default data shape and semantics of catalog entities.
@@ -471,6 +473,7 @@ Describes the following entity kind:
 An API describes an interface that can be exposed by a component. The API can be
 defined in different formats, like [OpenAPI](https://swagger.io/specification/),
 [AsyncAPI](https://www.asyncapi.com/docs/specifications/latest/),
+[GraphQL](https://graphql.org/learn/schema/),
 [gRPC](https://developers.google.com/protocol-buffers), or other formats.
 
 Descriptor files for this kind may look as follows.
@@ -483,6 +486,8 @@ metadata:
   description: Retrieve artist details
 spec:
   type: openapi
+  lifecycle: production
+  owner: artist-relations@example.com
   definition: |
     openapi: "3.0.0"
     info:
@@ -527,6 +532,41 @@ The current set of well-known and common values for this field is:
   [Protocol Buffers](https://developers.google.com/protocol-buffers) to use with
   [gRPC](https://grpc.io/).
 
+### `spec.lifecycle` [required]
+
+The lifecycle state of the API, e.g. `production`. This field is required.
+
+The software catalog accepts any lifecycle value, but an organization should
+take great care to establish a proper taxonomy for these.
+
+The current set of well-known and common values for this field is:
+
+- `experimental` - an experiment or early, non-production API, signaling that
+  users may not prefer to consume it over other more established APIs, or that
+  there are low or no reliability guarantees
+- `production` - an established, owned, maintained API
+- `deprecated` - an API that is at the end of its lifecycle, and may disappear
+  at a later point in time
+
+### `spec.owner` [required]
+
+The owner of the API, e.g. `artist-relations@example.com`. This field is
+required.
+
+In Backstage, the owner of an API is the singular entity (commonly a team) that
+bears ultimate responsibility for the API, and has the authority and capability
+to develop and maintain it. They will be the point of contact if something goes
+wrong, or if features are to be requested. The main purpose of this field is for
+display purposes in Backstage, so that people looking at catalog items can get
+an understanding of to whom this API belongs. It is not to be used by automated
+processes to for example assign authorization in runtime systems. There may be
+others that also develop or otherwise touch the API, but there will always be
+one ultimate owner.
+
+Apart from being a string, the software catalog leaves the format of this field
+open to implementers to choose. Most commonly, it is set to the ID or email of a
+group of people in an organizational structure.
+
 ### `spec.definition` [required]
 
 The definition of the API, based on the format defined by `spec.type`. This
diff --git a/docs/features/software-catalog/extending-the-model.md b/docs/features/software-catalog/extending-the-model.md
index 8b621f2e44..4e8a357ea7 100644
--- a/docs/features/software-catalog/extending-the-model.md
+++ b/docs/features/software-catalog/extending-the-model.md
@@ -1,6 +1,7 @@
 ---
 id: extending-the-model
 title: Extending the model
+description: Documentation on Extending the model
 ---
 
 Backstage natively supports tracking of the following component
diff --git a/docs/features/software-catalog/external-integrations.md b/docs/features/software-catalog/external-integrations.md
index 7ca869cdae..00a9d95fc2 100644
--- a/docs/features/software-catalog/external-integrations.md
+++ b/docs/features/software-catalog/external-integrations.md
@@ -1,6 +1,8 @@
 ---
 id: external-integrations
 title: External integrations
+description: Documentation on External integrations to integrate systems
+with Backstage
 ---
 
 Backstage natively supports storing software components in
diff --git a/docs/features/software-catalog/index.md b/docs/features/software-catalog/index.md
index 9b5de16472..49a490d78b 100644
--- a/docs/features/software-catalog/index.md
+++ b/docs/features/software-catalog/index.md
@@ -2,6 +2,8 @@
 id: software-catalog-overview
 title: Backstage Service Catalog (alpha)
 sidebar_label: Overview
+description: The Backstage Service Catalog — actually, a software catalog, since
+it includes more than just services
 ---
 
 ## What is a Service Catalog?
diff --git a/docs/features/software-catalog/installation.md b/docs/features/software-catalog/installation.md
index 85598a2025..a825020eb6 100644
--- a/docs/features/software-catalog/installation.md
+++ b/docs/features/software-catalog/installation.md
@@ -1,6 +1,7 @@
 ---
 id: installation
 title: Installing in your Backstage App
+description: Documentation on How to install Backstage Plugin
 ---
 
 The catalog plugin comes in two packages, `@backstage/plugin-catalog` and
diff --git a/docs/features/software-catalog/system-model.md b/docs/features/software-catalog/system-model.md
index 4436f60fc2..44dac13d65 100644
--- a/docs/features/software-catalog/system-model.md
+++ b/docs/features/software-catalog/system-model.md
@@ -1,6 +1,7 @@
 ---
 id: system-model
 title: System Model
+description: Documentation on System Model
 ---
 
 We believe that a strong shared understanding and terminology around software
diff --git a/docs/features/software-catalog/well-known-annotations.md b/docs/features/software-catalog/well-known-annotations.md
index 18de63d704..ba5b491e07 100644
--- a/docs/features/software-catalog/well-known-annotations.md
+++ b/docs/features/software-catalog/well-known-annotations.md
@@ -2,6 +2,9 @@
 id: well-known-annotations
 title: Well-known Annotations on Catalog Entities
 sidebar_label: Well-known Annotations
+description: Documentation on lists a number of well known Annotations, that
+have defined semantics. They can be attached to catalog entities and consumed
+by plugins as needed
 ---
 
 This section lists a number of well known
@@ -51,13 +54,13 @@ The value of this annotation is a location reference string (see above). If this
 annotation is specified, it is expected to point to a repository that the
 TechDocs system can read and generate docs from.
 
-### backstage.io/jenkins-github-folder
+### jenkins.io/github-folder
 
 ```yaml
 # Example:
 metadata:
   annotations:
-    backstage.io/jenkins-github-folder: folder-name/job-name
+    jenkins.io/github-folder: folder-name/job-name
 ```
 
 The value of this annotation is the path to a job on Jenkins, that builds this
diff --git a/docs/features/software-templates/adding-templates.md b/docs/features/software-templates/adding-templates.md
index 1472986c2a..fad5c68e41 100644
--- a/docs/features/software-templates/adding-templates.md
+++ b/docs/features/software-templates/adding-templates.md
@@ -1,6 +1,7 @@
 ---
 id: adding-templates
 title: Adding your own Templates
+description: Documentation on Adding your own Templates
 ---
 
 Templates are stored in the **Service Catalog** under a kind `Template`. The
diff --git a/docs/features/software-templates/extending/create-your-own-preparer.md b/docs/features/software-templates/extending/create-your-own-preparer.md
index 0b3fb31323..14c75b0ffb 100644
--- a/docs/features/software-templates/extending/create-your-own-preparer.md
+++ b/docs/features/software-templates/extending/create-your-own-preparer.md
@@ -1,6 +1,7 @@
 ---
 id: extending-preparer
 title: Create your own Preparer
+description: Documentation on Creating your own Preparer
 ---
 
 Preparers are responsible for reading the location of the definition of a
diff --git a/docs/features/software-templates/extending/create-your-own-publisher.md b/docs/features/software-templates/extending/create-your-own-publisher.md
index 111125b49f..25d7bcf676 100644
--- a/docs/features/software-templates/extending/create-your-own-publisher.md
+++ b/docs/features/software-templates/extending/create-your-own-publisher.md
@@ -1,6 +1,7 @@
 ---
 id: extending-publisher
 title: Create your own Publisher
+description: Documentation on Creating your own Publisher
 ---
 
 Publishers are responsible for pushing and storing the templated skeleton after
diff --git a/docs/features/software-templates/extending/create-your-own-templater.md b/docs/features/software-templates/extending/create-your-own-templater.md
index 9dee66af06..36c362b9c3 100644
--- a/docs/features/software-templates/extending/create-your-own-templater.md
+++ b/docs/features/software-templates/extending/create-your-own-templater.md
@@ -1,6 +1,7 @@
 ---
 id: extending-templater
 title: Creating your own Templater
+description: Documentation on Creating your own Templater
 ---
 
 Templaters are responsible for taking the directory path for the skeleton
diff --git a/docs/features/software-templates/index.md b/docs/features/software-templates/index.md
index 86493c0120..ae121f8029 100644
--- a/docs/features/software-templates/index.md
+++ b/docs/features/software-templates/index.md
@@ -2,12 +2,14 @@
 id: software-templates-index
 title: Backstage Software Templates
 sidebar_label: Overview
+description: The Software Templates part of Backstage is a tool that can help
+you create Components inside Backstage
 ---
 
 The Software Templates part of Backstage is a tool that can help you create
 Components inside Backstage. By default, it has the ability to load skeletons of
-code, template in some variables, and then publish the template to some location
-like GitHub.
+code, template in some variables, and then publish the template to some
+locations like GitHub or GitLab.
 
 <video width="100%" height="100%" controls>
   <source src="https://backstage.io/blog/assets/2020-08-05/feature.mp4" type="video/mp4">
@@ -38,8 +40,10 @@ internally.
 
 After filling in these variables, you'll get some more fields to fill out which
 are required for backstage usage: the owner, (which is a `user` in the backstage
-system), the `storePath` (which right now must be a GitHub Organisation), and a
-non-existing github repository name in the format `organisation/reponame`.
+system), the `storePath` (which right now must be a GitHub Organisation or
+GitHub user), a non-existing github repository name in the format
+`organisation/reponame`, and a GitHub team or user account which should be
+granted admin access to the repository.
 
 ![Enter backstage vars](../../assets/software-templates/template-picked-2.png)
 
diff --git a/docs/features/software-templates/installation.md b/docs/features/software-templates/installation.md
index eea78e3571..5453c4befa 100644
--- a/docs/features/software-templates/installation.md
+++ b/docs/features/software-templates/installation.md
@@ -1,6 +1,7 @@
 ---
 id: installation
 title: Installing in your Backstage App
+description: Documentation on How to install Backstage App
 ---
 
 The scaffolder plugin comes in two packages, `@backstage/plugin-scaffolder` and
@@ -86,41 +87,74 @@ import {
   createRouter,
   FilePreparer,
   GithubPreparer,
+  GitlabPreparer,
   Preparers,
+  Publishers,
   GithubPublisher,
+  GitlabPublisher,
   CreateReactAppTemplater,
   Templaters,
+  RepoVisilityOptions,
 } from '@backstage/plugin-scaffolder-backend';
 import { Octokit } from '@octokit/rest';
+import { Gitlab } from '@gitbeaker/node';
 import type { PluginEnvironment } from '../types';
 import Docker from 'dockerode';
 
-export default async function createPlugin({ logger }: PluginEnvironment) {
+export default async function createPlugin({
+  logger,
+  config,
+}: PluginEnvironment) {
   const cookiecutterTemplater = new CookieCutter();
   const craTemplater = new CreateReactAppTemplater();
   const templaters = new Templaters();
-
-  // Register default templaters
   templaters.register('cookiecutter', cookiecutterTemplater);
   templaters.register('cra', craTemplater);
 
   const filePreparer = new FilePreparer();
   const githubPreparer = new GithubPreparer();
+  const gitlabPreparer = new GitlabPreparer(config);
   const preparers = new Preparers();
 
-  // Register default preparers
   preparers.register('file', filePreparer);
   preparers.register('github', githubPreparer);
+  preparers.register('gitlab', gitlabPreparer);
+  preparers.register('gitlab/api', gitlabPreparer);
 
-  // Create GitHub client with your access token from environment variables
-  const githubClient = new Octokit({ auth: process.env.GITHUB_ACCESS_TOKEN });
-  const publisher = new GithubPublisher({ client: githubClient });
+  const publishers = new Publishers();
+
+  const githubToken = config.getString('scaffolder.github.token');
+  const repoVisibility = config.getString(
+    'scaffolder.github.visibility',
+  ) as RepoVisilityOptions;
+
+  const githubClient = new Octokit({ auth: githubToken });
+  const githubPublisher = new GithubPublisher({
+    client: githubClient,
+    token: githubToken,
+    repoVisibility,
+  });
+  publishers.register('file', githubPublisher);
+  publishers.register('github', githubPublisher);
+
+  const gitLabConfig = config.getOptionalConfig('scaffolder.gitlab.api');
+
+  if (gitLabConfig) {
+    const gitLabToken = gitLabConfig.getString('token');
+    const gitLabClient = new Gitlab({
+      host: gitLabConfig.getOptionalString('baseUrl'),
+      token: gitLabToken,
+    });
+    const gitLabPublisher = new GitlabPublisher(gitLabClient, gitLabToken);
+    publishers.register('gitlab', gitLabPublisher);
+    publishers.register('gitlab/api', gitLabPublisher);
+  }
 
   const dockerClient = new Docker();
   return await createRouter({
     preparers,
     templaters,
-    publisher,
+    publishers,
     logger,
     dockerClient,
   });
@@ -167,7 +201,7 @@ catalog:
       target: https://github.com/spotify/cookiecutter-golang/blob/master/template.yaml
 ```
 
-### Runtime Dependencies
+### Runtime Dependencies / Configuration
 
 For the scaffolder backend plugin to function, it needs a GitHub access token,
 and access to a running Docker daemon. You can create a GitHub access token
@@ -177,8 +211,37 @@ docs on creating private GitHub access tokens is available
 Note that the need for private GitHub access tokens will be replaced with GitHub
 Apps integration further down the line.
 
-The GitHub access token is passed along using the `GITHUB_ACCESS_TOKEN`
-environment variable.
+#### Github
+
+The Github access token is retrieved from environment variables via the config.
+The config file needs to specify what environment variable the token is
+retrieved from. Your config should have the following objects.
+
+#### Gitlab
+
+For Gitlab, we currently support the configuration of the GitLab publisher and
+allows to configure the private access token and the base URL of a GitLab
+instance:
+
+```yaml
+scaffolder:
+  github:
+    token:
+      $secret:
+        env: GITHUB_ACCESS_TOKEN
+    visibility: public # or 'internal' or 'private'
+  gitlab:
+    api:
+      baseUrl: https://gitlab.com
+      token:
+        $secret:
+          env: SCAFFOLDER_GITLAB_PRIVATE_TOKEN
+```
+
+You can configure who can see the new repositories that the scaffolder creates
+by specifying `visibility` option. Valid options are `public`, `private` and
+`internal`. `internal` options is for GitHub Enterprise clients, which means
+public within the organization.
 
 ### Running the Backend
 
diff --git a/docs/features/techdocs/FAQ.md b/docs/features/techdocs/FAQ.md
index cae0288889..5d6c9136d9 100644
--- a/docs/features/techdocs/FAQ.md
+++ b/docs/features/techdocs/FAQ.md
@@ -2,6 +2,7 @@
 id: faqs
 title: TechDocs FAQ
 sidebar_label: FAQ
+description: This page answers frequently asked questions about TechDocs
 ---
 
 This page answers frequently asked questions about [TechDocs](README.md).
diff --git a/docs/features/techdocs/README.md b/docs/features/techdocs/README.md
index 03f3d452f4..aa97506edb 100644
--- a/docs/features/techdocs/README.md
+++ b/docs/features/techdocs/README.md
@@ -2,6 +2,8 @@
 id: techdocs-overview
 title: TechDocs Documentation
 sidebar_label: Overview
+description: TechDocs is Spotify’s homegrown docs-like-code solution built
+directly into Backstage
 ---
 
 ## What is it?
diff --git a/docs/features/techdocs/architecture.md b/docs/features/techdocs/architecture.md
index 4e063a8559..926ec238e1 100644
--- a/docs/features/techdocs/architecture.md
+++ b/docs/features/techdocs/architecture.md
@@ -1,6 +1,7 @@
 ---
 id: architecture
 title: Architecture
+description: Documentation on Architecture
 ---
 
 ![TechDocs Big Picture](../../assets/techdocs/techdocs_big_picture.png)
diff --git a/docs/features/techdocs/concepts.md b/docs/features/techdocs/concepts.md
index 8f5558c0f8..f13f9933f5 100644
--- a/docs/features/techdocs/concepts.md
+++ b/docs/features/techdocs/concepts.md
@@ -1,6 +1,8 @@
 ---
 id: concepts
 title: Concepts
+description: Documentation on concepts that are introduced with
+Spotify's docs-like-code solution in Backstage
 ---
 
 This page describes concepts that are introduced with Spotify's docs-like-code
diff --git a/docs/features/techdocs/creating-and-publishing.md b/docs/features/techdocs/creating-and-publishing.md
index 9d93eda9bc..e1adedf25e 100644
--- a/docs/features/techdocs/creating-and-publishing.md
+++ b/docs/features/techdocs/creating-and-publishing.md
@@ -2,6 +2,7 @@
 id: creating-and-publishing
 title: Creating and publishing your docs
 sidebar_label: Creating and Publishing Documentation
+description: Guidance on how to create and publish documentation
 ---
 
 This section will guide you through:
diff --git a/docs/features/techdocs/getting-started.md b/docs/features/techdocs/getting-started.md
index 174894b020..d8c836c970 100644
--- a/docs/features/techdocs/getting-started.md
+++ b/docs/features/techdocs/getting-started.md
@@ -1,6 +1,7 @@
 ---
 id: getting-started
 title: Getting Started
+description: Getting Started Guidelines
 ---
 
 TechDocs functions as a plugin to Backstage, so you will need to use Backstage
diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md
index e555c6b52d..97876c2ba1 100644
--- a/docs/getting-started/app-custom-theme.md
+++ b/docs/getting-started/app-custom-theme.md
@@ -1,6 +1,7 @@
 ---
 id: app-custom-theme
 title: Customize the look-and-feel of your App
+description: Documentation on Customizing look and feel of the App
 ---
 
 Backstage ships with a default theme with a light and dark mode variant. The
diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md
index 515b52afa7..1d02f147c1 100644
--- a/docs/getting-started/configure-app-with-plugins.md
+++ b/docs/getting-started/configure-app-with-plugins.md
@@ -1,6 +1,7 @@
 ---
 id: configure-app-with-plugins
 title: Configuring App with plugins
+description: Documentation on How Configuring App with plugins
 ---
 
 ## Adding existing plugins to your app
diff --git a/docs/getting-started/create-an-app.md b/docs/getting-started/create-an-app.md
index cebf3f5de2..452e90add5 100644
--- a/docs/getting-started/create-an-app.md
+++ b/docs/getting-started/create-an-app.md
@@ -1,6 +1,7 @@
 ---
 id: create-an-app
 title: Create an App
+description: Documentation on Creating an App
 ---
 
 To get set up quickly with your own Backstage project you can create a Backstage
diff --git a/docs/getting-started/deployment-k8s.md b/docs/getting-started/deployment-k8s.md
index 2a184779e2..ddcbd290c6 100644
--- a/docs/getting-started/deployment-k8s.md
+++ b/docs/getting-started/deployment-k8s.md
@@ -1,6 +1,7 @@
 ---
 id: deployment-k8s
 title: Kubernetes
+description: Documentation on Kubernetes and K8s Deployment
 ---
 
 Coming soon!
diff --git a/docs/getting-started/deployment-other.md b/docs/getting-started/deployment-other.md
index d3fb9d932b..2cd9708e2a 100644
--- a/docs/getting-started/deployment-other.md
+++ b/docs/getting-started/deployment-other.md
@@ -1,6 +1,7 @@
 ---
 id: deployment-other
 title: Other
+description: Documentation on different ways of Deployment
 ---
 
 ## Deploying Locally
diff --git a/docs/getting-started/development-environment.md b/docs/getting-started/development-environment.md
index 9c75c8eabf..154a959f85 100644
--- a/docs/getting-started/development-environment.md
+++ b/docs/getting-started/development-environment.md
@@ -1,6 +1,8 @@
 ---
 id: development-environment
 title: Development Environment
+description: Documentation on how to get set up for doing development on
+the Backstage repository
 ---
 
 This section describes how to get set up for doing development on the Backstage
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
index c528ad34ad..a9ac770f90 100644
--- a/docs/getting-started/index.md
+++ b/docs/getting-started/index.md
@@ -1,6 +1,7 @@
 ---
 id: index
 title: Getting Started
+description: Documentation on How to get started with Backstage
 ---
 
 There are two different ways to get started with Backstage, either by creating a
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index a4f91b6e95..3b11d2b8e1 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -1,6 +1,7 @@
 ---
 id: installation
 title: Installation
+description: Documentation on Installation
 ---
 
 Coming soon!
diff --git a/docs/getting-started/running-backstage-locally.md b/docs/getting-started/running-backstage-locally.md
index 08d2ab385b..a0cf10998e 100644
--- a/docs/getting-started/running-backstage-locally.md
+++ b/docs/getting-started/running-backstage-locally.md
@@ -1,23 +1,42 @@
 ---
 id: running-backstage-locally
 title: Running Backstage Locally
+description: Documentation on How to run Backstage Locally
 ---
 
+## Prerequisites
+
+- Node.js
+
 First make sure you are using NodeJS with an Active LTS Release, currently v12.
 This is made easy with a version manager such as
 [nvm](https://github.com/nvm-sh/nvm) which allows for version switching.
 
 ```bash
-# Checking your version
-node --version
-> v14.7.0
-
-# Adding a second node version
+# Installing a new version
 nvm install 12
 > Downloading and installing node v12.18.3...
 > Now using node v12.18.3 (npm v6.14.6)
+
+# Checking your version
+node --version
+> v12.18.3
 ```
 
+- yarn
+
+Please refer to the
+[installation instructions for yarn](https://classic.yarnpkg.com/en/docs/install/).
+
+- Docker
+
+We use Docker for few of our core features. So, you will need Docker installed
+locally to use features like Software Templates and TechDocs. Please refer to
+the
+[installation instructions for Docker](https://docs.docker.com/engine/install/).
+
+## Clone and Build
+
 To get up and running with a local Backstage to evaluate it, let's clone it off
 of GitHub and run an initial build.
 
diff --git a/docs/overview/adopting.md b/docs/overview/adopting.md
index 893eac6398..422adfb288 100644
--- a/docs/overview/adopting.md
+++ b/docs/overview/adopting.md
@@ -1,6 +1,8 @@
 ---
 id: adopting
 title: Strategies for adopting
+description: Documentation on some general best practices that have been key
+to Backstage's success inside Spotify
 ---
 
 This document outlines some general best practices that have been key to
diff --git a/docs/overview/architecture-overview.md b/docs/overview/architecture-overview.md
index 55a1aeec04..f2c6dad61f 100644
--- a/docs/overview/architecture-overview.md
+++ b/docs/overview/architecture-overview.md
@@ -1,6 +1,7 @@
 ---
 id: architecture-overview
 title: Architecture overview
+description: Documentation on Architecture overview
 ---
 
 ## Overview
diff --git a/docs/overview/architecture-terminology.md b/docs/overview/architecture-terminology.md
index aee581f927..092ca7fb01 100644
--- a/docs/overview/architecture-terminology.md
+++ b/docs/overview/architecture-terminology.md
@@ -1,6 +1,7 @@
 ---
 id: architecture-terminology
 title: Architecture terminology
+description: Documentation on Architecture terminology
 ---
 
 Backstage is constructed out of three parts. We separate Backstage in this way
diff --git a/docs/overview/background.md b/docs/overview/background.md
index ef226653fb..486260bac3 100644
--- a/docs/overview/background.md
+++ b/docs/overview/background.md
@@ -1,6 +1,7 @@
 ---
 id: background
 title: The Spotify Story
+description: Documentation on Background and Story behind making of Backstage
 ---
 
 Backstage was born out of necessity at Spotify. We found that as we grew, our
diff --git a/docs/overview/logos.md b/docs/overview/logos.md
index 39071ed793..2a684420bc 100644
--- a/docs/overview/logos.md
+++ b/docs/overview/logos.md
@@ -2,6 +2,7 @@
 id: logos
 title: Logos
 sidebar_label: Logo assets
+description: Guidelines for how to use the Backstage logos and icons
 ---
 
 Guidelines for how to use the Backstage logo and icon can be found
diff --git a/docs/overview/roadmap.md b/docs/overview/roadmap.md
index 5a06f4544f..d6c1d2d641 100644
--- a/docs/overview/roadmap.md
+++ b/docs/overview/roadmap.md
@@ -1,6 +1,7 @@
 ---
 id: roadmap
 title: Project roadmap
+description: Roadmap of Backstage Project
 ---
 
 ## Current status
diff --git a/docs/overview/support.md b/docs/overview/support.md
index 9e4e9eca15..6e00c17fab 100644
--- a/docs/overview/support.md
+++ b/docs/overview/support.md
@@ -1,6 +1,7 @@
 ---
 id: support
 title: Support and community
+description: Support and Community Details and Links
 ---
 
 - [Discord chatroom](https://discord.gg/MUpMjP2) - Get support or discuss the
diff --git a/docs/overview/vision.md b/docs/overview/vision.md
index 2ab7cdc6f4..df75a4f0a6 100644
--- a/docs/overview/vision.md
+++ b/docs/overview/vision.md
@@ -1,6 +1,8 @@
 ---
 id: vision
 title: Vision
+description: Goal is to provide engineers with the best developer experience in
+the world
 ---
 
 Our goal is to provide engineers with the best developer experience in the
diff --git a/docs/overview/what-is-backstage.md b/docs/overview/what-is-backstage.md
index 96e89618a8..0d16943c9b 100644
--- a/docs/overview/what-is-backstage.md
+++ b/docs/overview/what-is-backstage.md
@@ -1,6 +1,8 @@
 ---
 id: what-is-backstage
 title: What is Backstage?
+description: Backsatge is an open platform for building developer portals.
+Powered by a centralized service catalog, Backstage restores order to your microservices and infrastructure
 ---
 
 ![service-catalog](https://backstage.io/blog/assets/6/header.png)
diff --git a/docs/plugins/add-to-marketplace.md b/docs/plugins/add-to-marketplace.md
index d85807a226..59cca07bff 100644
--- a/docs/plugins/add-to-marketplace.md
+++ b/docs/plugins/add-to-marketplace.md
@@ -1,6 +1,7 @@
 ---
 id: add-to-marketplace
 title: Add to Marketplace
+description: Documentation on Adding Plugin to Marketplace
 ---
 
 ## Adding a Plugin to the Marketplace
diff --git a/docs/plugins/backend-plugin.md b/docs/plugins/backend-plugin.md
index 986af66c20..516ba4b111 100644
--- a/docs/plugins/backend-plugin.md
+++ b/docs/plugins/backend-plugin.md
@@ -1,6 +1,7 @@
 ---
 id: backend-plugin
 title: Backend plugin
+description: Documentation on Backend plugin
 ---
 
 ## TODO
diff --git a/docs/plugins/call-existing-api.md b/docs/plugins/call-existing-api.md
index 9658176224..14ea4c1f5a 100644
--- a/docs/plugins/call-existing-api.md
+++ b/docs/plugins/call-existing-api.md
@@ -1,6 +1,8 @@
 ---
 id: call-existing-api
 title: Call Existing API
+description: Describes the various options that Backstage frontend plugins have,
+in communicating with service APIs that already exist
 ---
 
 This article describes the various options that Backstage frontend plugins have,
diff --git a/docs/plugins/create-a-plugin.md b/docs/plugins/create-a-plugin.md
index 4bcc4da387..bcb86024fd 100644
--- a/docs/plugins/create-a-plugin.md
+++ b/docs/plugins/create-a-plugin.md
@@ -1,6 +1,7 @@
 ---
 id: create-a-plugin
 title: Create a Backstage Plugin
+description: Documentation on How to Create a Backstage Plugin
 ---
 
 A Backstage Plugin adds functionality to Backstage.
diff --git a/docs/plugins/existing-plugins.md b/docs/plugins/existing-plugins.md
index 8598ae02c4..c1fbda379a 100644
--- a/docs/plugins/existing-plugins.md
+++ b/docs/plugins/existing-plugins.md
@@ -1,6 +1,7 @@
 ---
 id: existing-plugins
 title: Existing plugins
+description: Lists of existing open source plugins
 ---
 
 ## Open source plugins
diff --git a/docs/plugins/index.md b/docs/plugins/index.md
index 5aaf8acadf..8a61aeee80 100644
--- a/docs/plugins/index.md
+++ b/docs/plugins/index.md
@@ -1,6 +1,7 @@
 ---
 id: index
 title: Intro to plugins
+description: Documentation on Introduction to Plugins
 ---
 
 Backstage is a single-page application composed of a set of plugins.
diff --git a/docs/plugins/integrating-plugin-into-service-catalog.md b/docs/plugins/integrating-plugin-into-service-catalog.md
index 4408c27ccc..51d2331140 100644
--- a/docs/plugins/integrating-plugin-into-service-catalog.md
+++ b/docs/plugins/integrating-plugin-into-service-catalog.md
@@ -1,6 +1,7 @@
 ---
 id: integrating-plugin-into-service-catalog
 title: Integrate into the Service Catalog
+description: Documentation on How to integrate plugin into service catalog
 ---
 
 > This is an advanced use case and currently is an experimental feature. Expect
diff --git a/docs/plugins/plugin-development.md b/docs/plugins/plugin-development.md
index faf3c6ddbd..c5d9763f7d 100644
--- a/docs/plugins/plugin-development.md
+++ b/docs/plugins/plugin-development.md
@@ -1,6 +1,7 @@
 ---
 id: plugin-development
 title: Plugin Development
+description: Documentation on Plugin Development
 ---
 
 Backstage plugins provide features to a Backstage App.
diff --git a/docs/plugins/proxying.md b/docs/plugins/proxying.md
index 1951f41763..2f809ffd10 100644
--- a/docs/plugins/proxying.md
+++ b/docs/plugins/proxying.md
@@ -1,6 +1,7 @@
 ---
 id: proxying
 title: Proxying
+description: Documentation on Proxying
 ---
 
 ## Overview
diff --git a/docs/plugins/publish-private.md b/docs/plugins/publish-private.md
index 6361f70854..d04449d465 100644
--- a/docs/plugins/publish-private.md
+++ b/docs/plugins/publish-private.md
@@ -1,6 +1,7 @@
 ---
 id: publish-private
 title: Publish private
+description: Documentation on How to Publish private
 ---
 
 ## TODO
diff --git a/docs/plugins/publishing.md b/docs/plugins/publishing.md
index 6fee4f9b1d..0ed85e8cdc 100644
--- a/docs/plugins/publishing.md
+++ b/docs/plugins/publishing.md
@@ -1,6 +1,7 @@
 ---
 id: publishing
 title: Publishing
+description: Documentation on Publishing NPM packages
 ---
 
 ## NPM
diff --git a/docs/plugins/structure-of-a-plugin.md b/docs/plugins/structure-of-a-plugin.md
index 20e72c539d..f061d2f4a8 100644
--- a/docs/plugins/structure-of-a-plugin.md
+++ b/docs/plugins/structure-of-a-plugin.md
@@ -1,6 +1,7 @@
 ---
 id: structure-of-a-plugin
 title: Structure of a Plugin
+description: Details about structure of a plugin
 ---
 
 Nice, you have a new plugin! We'll soon see how we can develop it into doing
diff --git a/docs/plugins/testing.md b/docs/plugins/testing.md
index 110bc97515..696f8b1368 100644
--- a/docs/plugins/testing.md
+++ b/docs/plugins/testing.md
@@ -1,6 +1,7 @@
 ---
 id: testing
 title: Testing with Jest
+description: Documentation on How to do unit testing with Jest
 ---
 
 Backstage uses [Jest](https://facebook.github.io/jest/) for all our unit testing
diff --git a/docs/reference/createPlugin-feature-flags.md b/docs/reference/createPlugin-feature-flags.md
index bc38656939..ebb8a6b503 100644
--- a/docs/reference/createPlugin-feature-flags.md
+++ b/docs/reference/createPlugin-feature-flags.md
@@ -1,6 +1,7 @@
 ---
 id: createPlugin-feature-flags
 title: createPlugin - feature flags
+description: Documentation on createPlugin - feature flags
 ---
 
 The `featureFlags` object passed to the `register` function makes it possible
diff --git a/docs/reference/createPlugin-router.md b/docs/reference/createPlugin-router.md
index 361b485df9..89ee44e558 100644
--- a/docs/reference/createPlugin-router.md
+++ b/docs/reference/createPlugin-router.md
@@ -1,6 +1,7 @@
 ---
 id: createPlugin-router
 title: createPlugin - router
+description: Documentation on createPlugin - router
 ---
 
 The router that is passed to the `register` function makes it possible for
diff --git a/docs/reference/createPlugin.md b/docs/reference/createPlugin.md
index 0cabe63b39..45e3303124 100644
--- a/docs/reference/createPlugin.md
+++ b/docs/reference/createPlugin.md
@@ -1,6 +1,7 @@
 ---
 id: createPlugin
 title: createPlugin
+description: Documentation on createPlugin
 ---
 
 Taking a plugin config as argument and returns a new plugin.
diff --git a/docs/tutorials/journey.md b/docs/tutorials/journey.md
index 3c399c53ba..24765e8531 100644
--- a/docs/tutorials/journey.md
+++ b/docs/tutorials/journey.md
@@ -1,6 +1,7 @@
 ---
 id: journey
 title: Future developer journey
+description: This document describes a possible journey of a future Backstage
 ---
 
 > This document describes a possible journey of a **_future_** Backstage plugin
diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
new file mode 100644
index 0000000000..fea1d7085a
--- /dev/null
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -0,0 +1,199 @@
+---
+id: quickstart-app-auth
+title: Monorepo App Setup With Authentication
+---
+
+###### September 15th 2020 - @backstage/create-app - v0.1.1-alpha.21
+
+<br />
+
+> This document takes you through setting up a backstage app that runs in your
+> own environment. It starts with a skeleton install and verifying of the
+> monorepo's functionality. Next, GitHub authentication is added and tested.
+>
+> This document assumes you have NodeJS 12 active along with Yarn. Please note,
+> that at the time of this writing, the current version is 0.1.1-alpha.21. This
+> guide can still be used with future versions, just, verify as you go. If you
+> run into issues, you can compare your setup with mine here >
+> [simple-backstage-app](https://github.com/johnson-jesse/simple-backstage-app).
+
+# The Skeleton Application
+
+From the terminal:
+
+1. Create a (monorepo) application: `npx @backstage/create-app`
+1. Enter an `id` for your new app like `mybiz-backstage` I went with
+   `simple-backstage-app`
+1. Choose `SQLite` as your database. This is the quickest way to get started as
+   PostgreSQL requires additional setup not covered here.
+1. Start your backend: `yarn --cwd packages/backend start`
+
+```zsh
+# You should see positive verbiage in your terminal output
+2020-09-11T22:20:26.712Z backstage info Listening on :7000
+```
+
+5. Finally, start the frontend. Open a new terminal window and from the root of
+   your project, run: `yarn start`
+
+```zsh
+# You should see positive verbiage in your terminal output
+ℹ ｢wds｣: Project is running at http://localhost:3000/
+```
+
+Once the app compiles, a browser window should have popped with your stand alone
+application loaded at `localhost:3000`. This could take a couple minutes.
+
+```zsh
+# You should see positive verbiage in your terminal output
+ℹℹ ｢wdm｣: Compiled successfully.
+```
+
+Since there is no auth currently configured, you are automatically entered as a
+guest. Let's fix that now and add auth.
+
+# The Auth Configuration
+
+1. Open `app-config.yaml` and change it as follows
+
+_from:_
+
+```yaml
+auth:
+  providers: {}
+```
+
+_to:_
+
+```yaml
+auth:
+  providers:
+    github:
+      development:
+        clientId:
+          $secret:
+            env: AUTH_GITHUB_CLIENT_ID
+        clientSecret:
+          $secret:
+            env: AUTH_GITHUB_CLIENT_SECRET
+        ## uncomment the following three lines if using enterprise
+        # enterpriseInstanceUrl:
+        #  $secret:
+        #    env: AUTH_GITHUB_ENTERPRISE_INSTANCE_URL
+```
+
+2. Set environment variables in whatever fashion is easiest for you. I chose to
+   add mine to my `.zshrc` profile.
+
+```zsh
+# For macOS Catalina & Z Shell
+# ------ simple-backstage-app GitHub
+export AUTH_GITHUB_CLIENT_ID=xxx
+export AUTH_GITHUB_CLIENT_SECRET=xxx
+# export AUTH_GITHUB_ENTERPRISE_INSTANCE_URL=https://github.{MY_BIZ}.com
+```
+
+3. And of course I need to source that file.
+
+```zsh
+# Loading the new variables
+% source ~/.zshrc
+
+# Any other currently opened terminals need to be restarted to pick up the new values
+# verify your setup by running env
+% env
+# should output something like
+> ...
+> AUTH_GITHUB_CLIENT_ID=xxx
+> AUTH_GITHUB_CLIENT_SECRET=xxx
+> ...
+```
+
+4. The values to replace `xxx` above come from your oauth app setup.
+
+```
+> Log into http://github.com
+> Navigate to (Settings > Developer Settings > OAuth Apps > New OAuth App)[https://github.com/settings/applications/new]
+> Set Homepage URL = http://localhost:3000
+> Set Callback URL = http://localhost:7000/auth/github
+> Click [Register application]
+> On the next page, copy and paste your new Client ID and Client Secret to the environment variables above, `AUTH_GITHUB_CLIENT_ID` & `AUTH_GITHUB_CLIENT_SECRET`
+> Don't forget to `source` that profile file again if necessary.
+```
+
+5. Open and change _root > packages > app > src >_`App.tsx` as follows
+
+```tsx
+// Add the following imports to the existing list from core
+import { githubAuthApiRef, SignInPage } from '@backstage/core';
+```
+
+6. In the same file, change the createApp function as follows
+
+```tsx
+const app = createApp({
+  apis,
+  plugins: Object.values(plugins),
+  components: {
+    SignInPage: props => {
+      return (
+        <SignInPage
+          {...props}
+          providers={[
+            {
+              id: 'github-auth-provider',
+              title: 'GitHub',
+              message: 'Simple Backstage Application Login',
+              apiRef: githubAuthApiRef,
+            },
+          ]}
+          align="center"
+        />
+      );
+    },
+  },
+});
+```
+
+6. Open and change _root > packages > app > src >_ `apis.ts` as follows
+
+```ts
+// Add the following imports to the existing list from core
+import { githubAuthApiRef, GithubAuth } from '@backstage/core';
+```
+
+7. In the same file, change the builder block for oauthRequestApiRef as follows
+
+_from:_
+
+```ts
+builder.add(oauthRequestApiRef, new OAuthRequestManager());
+```
+
+_to:_
+
+```ts
+const oauthRequestApi = builder.add(
+  oauthRequestApiRef,
+  new OAuthRequestManager(),
+);
+
+builder.add(
+  githubAuthApiRef,
+  GithubAuth.create({
+    discoveryApi,
+    oauthRequestApi,
+  }),
+);
+```
+
+> Start the backend and frontend as before. When the browser loads, you should
+> be presented with a login page for GitHub. Login as usual with your GitHub
+> account. If this is your first time, you will be asked to authorize and then
+> are redirected to the catalog page if all is well.
+
+# Where to go from here
+
+> You're probably eager to write your first custom plugin. Follow this next
+> tutorial for an in-depth look at a custom GitHub repository browser plugin.
+> [Adding Custom Plugin to Existing Monorepo App](quickstart-app-plugin.md).
diff --git a/docs/tutorials/quickstart-app-plugin.md b/docs/tutorials/quickstart-app-plugin.md
new file mode 100644
index 0000000000..28efb2a007
--- /dev/null
+++ b/docs/tutorials/quickstart-app-plugin.md
@@ -0,0 +1,487 @@
+---
+id: quickstart-app-plugin
+title: Adding Custom Plugin to Existing Monorepo App
+---
+
+###### September 15th 2020 - v0.1.1-alpha.21
+
+<br />
+
+> This document takes you through setting up a new plugin for your existing
+> monorepo with a _GitHub provider already setup_. If you don't have either of
+> those, you can clone
+> [simple-backstage-app](https://github.com/johnson-jesse/simple-backstage-app)
+> which this document builds on.
+>
+> This document does not cover authoring a plugin for sharing with the Backstage
+> community. That will have to be a later discussion.
+>
+> We start with a skeleton plugin install. And after verifying its
+> functionality, extend the Sidebar to make our life easy. Finally, we add
+> custom code to display GitHub repository information.
+>
+> This document assumes you have NodeJS 12 active along with Yarn. Please note,
+> that at the time of this writing, the current version is 0.1.1-alpha.21. This
+> guide can still be used with future versions, just, verify as you go. If you
+> run into issues, you can compare your setup with mine here >
+> [simple-backstage-app-plugin](https://github.com/johnson-jesse/simple-backstage-app-plugin).
+
+# The Skeleton Plugin
+
+1. Start by using the built in creator. From the terminal and root of your
+   project run: `yarn create-plugin`
+1. Enter a plugin ID. I used `github-playground`
+1. When the process finishes, let's start the backend:
+   `yarn --cwd packages/backend start`
+1. If you see errors starting, refer to
+   [Auth Configuration](https://github.com/johnson-jesse/simple-backstage-app/blob/master/README.md#the-auth-configuration)
+   for more information on environment variables.
+1. And now the frontend, from a new terminal window and the root of your
+   project: `yarn start`
+1. As usual, a browser window should popup loading the App.
+1. Now manually navigate to our plugin page from your browser:
+   `http://localhost:3000/github-playground`
+1. You should see successful verbiage for this endpoint,
+   `Welcome to github-playground!`
+
+# The Shortcut
+
+Let's add a shortcut.
+
+1. Open and modify `root: packages > app > src > sidebar.tsx` with the
+   following:
+
+```tsx
+import GitHubIcon from '@material-ui/icons/GitHub';
+...
+<SidebarItem icon={GitHubIcon} to="github-playground" text="GitHub Repository" />
+```
+
+Simple! The App will reload with your changes automatically. You should now see
+a github icon displayed in the sidebar. Clicking that will link to our new
+plugin. And now, the API fun begins.
+
+# The Identity
+
+Our first modification will be to extract information from the Identity API.
+
+1. Start by opening
+   `root: plugins > github-playground > src > components > ExampleComponent > ExampleComponent.tsx`
+1. Add two new imports
+
+```tsx
+// Add identityApiRef to the list of imported from core
+import { identityApiRef } from '@backstage/core';
+import { useApi } from '@backstage/core-api';
+```
+
+3. Adjust the ExampleComponent from inline to block
+
+_from inline:_
+
+```tsx
+const ExampleComponent: FC<{}> = () => ( ... )
+```
+
+_to block:_
+
+```tsx
+const ExampleComponent: FC<{}> = () => {
+
+    return (
+        ...
+    )
+}
+```
+
+4. Now add our hook and const data before the return statement
+
+```tsx
+// our API hook
+const identityApi = useApi(identityApiRef);
+
+// data to use
+const userId = identityApi.getUserId();
+const profile = identityApi.getProfile();
+```
+
+5. Finally, update the InfoCard's jsx to use our new data
+
+```tsx
+<InfoCard title={userId}>
+  <Typography variant="body1">
+    {`${profile.displayName} | ${profile.email}`}
+  </Typography>
+</InfoCard>
+```
+
+If everything is saved, you should see your name, id, and email on the
+github-playground page. Our data accessed is synchronous. So we just grab and
+go.
+
+6. Here is the entire file for reference
+<details><summary>Complete ExampleComponent.tsx</summary>
+<p>
+
+```tsx
+import React, { FC } from 'react';
+import { Typography, Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  Header,
+  Page,
+  pageTheme,
+  Content,
+  ContentHeader,
+  HeaderLabel,
+  SupportButton,
+  identityApiRef,
+} from '@backstage/core';
+import { useApi } from '@backstage/core-api';
+import ExampleFetchComponent from '../ExampleFetchComponent';
+
+const ExampleComponent: FC<{}> = () => {
+  const identityApi = useApi(identityApiRef);
+  const userId = identityApi.getUserId();
+  const profile = identityApi.getProfile();
+
+  return (
+    <Page theme={pageTheme.tool}>
+      <Header
+        title="Welcome to github-playground!"
+        subtitle="Optional subtitle"
+      >
+        <HeaderLabel label="Owner" value="Team X" />
+        <HeaderLabel label="Lifecycle" value="Alpha" />
+      </Header>
+      <Content>
+        <ContentHeader title="Plugin title">
+          <SupportButton>A description of your plugin goes here.</SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="column">
+          <Grid item>
+            <InfoCard title={userId}>
+              <Typography variant="body1">
+                {`${profile.displayName} | ${profile.email}`}
+              </Typography>
+            </InfoCard>
+          </Grid>
+          <Grid item>
+            <ExampleFetchComponent />
+          </Grid>
+        </Grid>
+      </Content>
+    </Page>
+  );
+};
+
+export default ExampleComponent;
+```
+
+</p>
+</details>
+
+# The Wipe
+
+The last file we will touch is ExampleFetchComponent. Because of the number of
+changes, let's start by wiping this component clean.
+
+1. Start by opening
+   `root: plugins > github-playground > src > components > ExampleFetchComponent > ExampleFetchComponent.tsx`
+1. Replace everyting in the file with the following:
+
+```tsx
+import React, { FC } from 'react';
+import { useAsync } from 'react-use';
+import Alert from '@material-ui/lab/Alert';
+import {
+  Table,
+  TableColumn,
+  Progress,
+  githubAuthApiRef,
+} from '@backstage/core';
+import { useApi } from '@backstage/core-api';
+import { graphql } from '@octokit/graphql';
+
+const ExampleFetchComponent: FC<{}> = () => {
+  return <div>Nothing to see yet</div>;
+};
+
+export default ExampleFetchComponent;
+```
+
+3. Save that and ensure you see no errors. Comment out the unused imports if
+   your linter gets in the way.
+
+###### We will add a lot to this file for the sake of ease. Please don't do this in productional code!
+
+# The Graph Model
+
+GitHub has a graphql API available for interacting. Let's start by adding our
+basic repository query
+
+1. Add the query const statement outside ExampleFetchComponent
+
+```tsx
+const query = `{
+  viewer {
+    repositories(first: 100) {
+      totalCount
+      nodes {
+        name
+        createdAt
+        description
+        diskUsage
+        isFork
+      }
+      pageInfo {
+        endCursor
+        hasNextPage
+      }
+    }
+  }
+}`;
+```
+
+2. Using this structure as a guide, we will break our query into type parts
+3. Add the following outside of ExampleFetchComponent
+
+```tsx
+type Node = {
+  name: string;
+  createdAt: string;
+  description: string;
+  diskUsage: number;
+  isFork: boolean;
+};
+
+type Viewer = {
+  repositories: {
+    totalCount: number;
+    nodes: Node[];
+    pageInfo: {
+      endCursor: string;
+      hasNextPage: boolean;
+    };
+  };
+};
+```
+
+# The Tabel Model
+
+Using Backstage's own component library, let's define a custom table. This
+component will get used if we have data to display.
+
+1. Add the following outside of ExampleFetchComponent
+
+```tsx
+type DenseTableProps = {
+  viewer: Viewer;
+};
+
+export const DenseTable: FC<DenseTableProps> = ({ viewer }) => {
+  const columns: TableColumn[] = [
+    { title: 'Name', field: 'name' },
+    { title: 'Created', field: 'createdAt' },
+    { title: 'Description', field: 'description' },
+    { title: 'Disk Usage', field: 'diskUsage' },
+    { title: 'Fork', field: 'isFork' },
+  ];
+
+  return (
+    <Table
+      title="List Of User's Repositories"
+      options={{ search: false, paging: false }}
+      columns={columns}
+      data={viewer.repositories.nodes}
+    />
+  );
+};
+```
+
+# The Fetch
+
+We're ready to flush out our fetch component
+
+1. Add our api hook inside ExampleFetchComponent
+
+```tsx
+const auth = useApi(githubAuthApiRef);
+```
+
+2. The access token we need to make our GitHub request and the request itself is
+   obtained in an asynchronous manner.
+3. Add the useAsync block inside the ExampleFetchComponent
+
+```tsx
+const { value, loading, error } = useAsync(async (): Promise<any> => {
+  const token = await auth.getAccessToken();
+
+  const gqlEndpoint = graphql.defaults({
+    // Uncomment baseUrl if using enterprise
+    // baseUrl: 'https://github.MY-BIZ.com/api',
+    headers: {
+      authorization: `token ${token}`,
+    },
+  });
+  const { viewer } = await gqlEndpoint(query);
+  return viewer;
+}, []);
+```
+
+4. The resolved data is conventiently destructured with value containing our
+   Viewer type. loading as a boolean, self explainatory. And error which is
+   present only if necessary. So let's use those as the first 3 of 4 multi
+   return statements.
+5. Add the _if return_ blocks below our async block
+
+```tsx
+if (loading) return <Progress />;
+if (error) return <Alert severity="error">{error.message}</Alert>;
+if (value && value.repositories) return <DenseTable viewer={value} />;
+```
+
+6. The third line here utilizes our custom table accepting our Viewer type.
+7. Finally, we add our _else return_ block to catch any other scenarios.
+
+```tsx
+return (
+  <Table
+    title="List Of User's Repositories"
+    options={{ search: false, paging: false }}
+    columns={[]}
+    data={[]}
+  />
+);
+```
+
+8. After saving that, and given we don't have any errors, you should see a table
+   with basic information on your repositories.
+9. Here is the entire file for reference
+<details><summary>Complete ExampleFetchComponent.tsx</summary>
+  <p>
+
+```tsx
+import React, { FC } from 'react';
+import { useAsync } from 'react-use';
+import Alert from '@material-ui/lab/Alert';
+import {
+  Table,
+  TableColumn,
+  Progress,
+  githubAuthApiRef,
+} from '@backstage/core';
+import { useApi } from '@backstage/core-api';
+import { graphql } from '@octokit/graphql';
+
+const query = `{
+viewer {
+  repositories(first: 100) {
+    totalCount
+    nodes {
+      name
+      createdAt
+      description
+      diskUsage
+      isFork
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+    }
+  }
+}
+}`;
+
+type Node = {
+  name: string;
+  createdAt: string;
+  description: string;
+  diskUsage: number;
+  isFork: boolean;
+};
+
+type Viewer = {
+  repositories: {
+    totalCount: number;
+    nodes: Node[];
+    pageInfo: {
+      endCursor: string;
+      hasNextPage: boolean;
+    };
+  };
+};
+
+type DenseTableProps = {
+  viewer: Viewer;
+};
+
+export const DenseTable: FC<DenseTableProps> = ({ viewer }) => {
+  const columns: TableColumn[] = [
+    { title: 'Name', field: 'name' },
+    { title: 'Created', field: 'createdAt' },
+    { title: 'Description', field: 'description' },
+    { title: 'Disk Usage', field: 'diskUsage' },
+    { title: 'Fork', field: 'isFork' },
+  ];
+
+  return (
+    <Table
+      title="List Of User's Repositories"
+      options={{ search: false, paging: false }}
+      columns={columns}
+      data={viewer.repositories.nodes}
+    />
+  );
+};
+
+const ExampleFetchComponent: FC<{}> = () => {
+  const auth = useApi(githubAuthApiRef);
+
+  const { value, loading, error } = useAsync(async (): Promise<any> => {
+    const token = await auth.getAccessToken();
+
+    const gqlEndpoint = graphql.defaults({
+      // Uncomment baseUrl if using enterprise
+      // baseUrl: 'https://github.MY-BIZ.com/api',
+      headers: {
+        authorization: `token ${token}`,
+      },
+    });
+    const { viewer } = await gqlEndpoint(query);
+    return viewer;
+  }, []);
+
+  if (loading) return <Progress />;
+  if (error) return <Alert severity="error">{error.message}</Alert>;
+  if (value && value.repositories) return <DenseTable viewer={value} />;
+
+  return (
+    <Table
+      title="List Of User's Repositories"
+      options={{ search: false, paging: false }}
+      columns={[]}
+      data={[]}
+    />
+  );
+};
+
+export default ExampleFetchComponent;
+```
+
+  </p>
+  </details>
+
+10. We finished! If there are no errors, you should see your own GitHub
+    repoistory information displayed in a basic table. If you run into issues,
+    you can compare the repo that backs this documdnt,
+    [simple-backstage-app-plugin](https://github.com/johnson-jesse/simple-backstage-app-plugin)
+
+# Where to go from here
+
+> Break apart ExampleFetchComponent into smaller logical parts contained in
+> their own files. Rename your components to something other than ExampleXxx.
+>
+> You might be real proud of a plugin you develop. Follow this next tutorial for
+> an in-depth look at publishing and including that for the entire Backstage
+> community. [TODO](#).
diff --git a/microsite/pages/en/index.js b/microsite/pages/en/index.js
index f595032bd0..37298ae8e2 100644
--- a/microsite/pages/en/index.js
+++ b/microsite/pages/en/index.js
@@ -462,6 +462,19 @@ class Index extends React.Component {
             Contribute
           </ActionBlock.Link>
         </ActionBlock>
+
+        <Block small className="bg-black-grey cncf-block">
+          <Block.Container center>
+            <Block.SmallTitle small>
+              Backstage is a{' '}
+              <a href="https://www.cncf.io">
+                Cloud Native Computing Foundation
+              </a>{' '}
+              sandbox project
+            </Block.SmallTitle>
+            <div className="cncf-logo" />
+          </Block.Container>
+        </Block>
       </main>
     );
   }
diff --git a/microsite/sidebars.json b/microsite/sidebars.json
index f7aa0630ef..aac524c538 100644
--- a/microsite/sidebars.json
+++ b/microsite/sidebars.json
@@ -143,7 +143,11 @@
         "ids": ["api/backend"]
       }
     ],
-    "Tutorials": ["tutorials/journey"],
+    "Tutorials": [
+      "tutorials/journey",
+      "tutorials/quickstart-app-auth",
+      "tutorials/quickstart-app-plugin"
+    ],
     "Architecture Decision Records (ADRs)": [
       "architecture-decisions/adrs-overview",
       "architecture-decisions/adrs-adr001",
diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index 111065a5d5..00a102ba00 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -1070,3 +1070,14 @@ code {
     margin: auto;
   }
 }
+
+.cncf-block {
+  text-align: center;
+}
+
+.cncf-logo {
+  background: center no-repeat url(../img/cncf-white.svg);
+  width: 100%;
+  height: 100px;
+  margin-bottom: 40px;
+}
diff --git a/microsite/static/img/cncf-color.svg b/microsite/static/img/cncf-color.svg
new file mode 100644
index 0000000000..12f7d3e48a
--- /dev/null
+++ b/microsite/static/img/cncf-color.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-2.82 -4.07 419.64 80.14"><style>svg {enable-background:new 0 0 414 73}</style><path d="M101.2 32c3.3 0 5.9-1.3 8-3.9l4.2 4.4c-3.4 3.8-7.3 5.7-11.9 5.7-4.6 0-8.3-1.4-11.3-4.3s-4.4-6.5-4.4-10.9 1.5-8.1 4.5-11c3-2.9 6.7-4.4 11.1-4.4 4.9 0 9 1.9 12.2 5.6l-4.1 4.7c-2.1-2.6-4.7-3.9-7.8-3.9-2.5 0-4.6.8-6.4 2.4-1.8 1.6-2.7 3.8-2.7 6.6s.8 5 2.5 6.7c1.7 1.4 3.7 2.3 6.1 2.3zm17.5 5.8V8.1h6.6v23.8H138v5.9zm48.3-4.1c-3 2.9-6.7 4.4-11.1 4.4-4.4 0-8.1-1.5-11.1-4.4-3-2.9-4.5-6.6-4.5-10.9s1.5-8 4.5-10.9c3-2.9 6.7-4.4 11.1-4.4 4.4 0 8.1 1.5 11.1 4.4 3 2.9 4.5 6.6 4.5 10.9s-1.5 8-4.5 10.9zm-2.3-10.9c0-2.6-.9-4.9-2.5-6.8-1.7-1.9-3.8-2.8-6.3-2.8s-4.6.9-6.3 2.8c-1.7 1.9-2.6 4.1-2.6 6.8s.9 4.9 2.6 6.8c1.7 1.9 3.8 2.8 6.3 2.8s4.6-.9 6.3-2.8 2.5-4.1 2.5-6.8zm20.3 7.4c1.1 1.4 2.6 2.1 4.5 2.1s3.4-.7 4.4-2.1c1.1-1.4 1.6-3.3 1.6-5.6V8.1h6.6v16.6c0 4.3-1.2 7.6-3.6 9.9-2.4 2.3-5.4 3.5-9.1 3.5-3.7 0-6.8-1.2-9.2-3.5-2.4-2.3-3.6-5.6-3.6-9.9V8.1h6.6v16.4c.1 2.4.7 4.3 1.8 5.7zM231.7 12c2.8 2.6 4.3 6.2 4.3 10.8s-1.4 8.3-4.1 11c-2.8 2.7-7 4-12.6 4H209V8.1h10.5c5.3 0 9.4 1.3 12.2 3.9zm-4.8 17.7c1.6-1.5 2.4-3.8 2.4-6.7 0-2.9-.8-5.2-2.4-6.7-1.6-1.6-4.1-2.4-7.5-2.4h-3.7V32h4.2c3 0 5.3-.8 7-2.3zm46.8-21.6h6.7v29.7h-6.7l-14.1-18.6v18.6h-6.7V8.1h6.3l14.5 19.2zm35.1 29.7l-2.8-6.4h-12.5l-2.8 6.4h-7.1l12.8-29.7h6.4l12.8 29.7h-6.8zM299.9 17l-3.7 8.6h7.4l-3.7-8.6zm29.9-3.1v23.9h-6.7V13.9h-8.4V8.1h23.5v5.8zM343 8.1h6.6v29.7H343zM367.9 27l7.6-18.9h7.2l-12 29.7h-5.6L353.2 8.1h7.2zm39.7-18.9V14h-14.8v6.2h13.3v5.6h-13.3V32h15.3v5.8h-21.9V8.1zm-314 55c1.8 0 3.3-.7 4.5-2.2l2.4 2.5c-1.9 2.1-4.1 3.2-6.7 3.2s-4.7-.8-6.3-2.4c-1.7-1.6-2.5-3.7-2.5-6.1 0-2.5.8-4.5 2.5-6.2s3.8-2.5 6.2-2.5c2.7 0 5 1 6.9 3.1l-2.3 2.6c-1.2-1.5-2.6-2.2-4.4-2.2-1.4 0-2.6.5-3.6 1.4-1 .9-1.5 2.1-1.5 3.7s.5 2.8 1.4 3.7c.9 1 2.1 1.4 3.4 1.4zm23.4 1c-1.7 1.6-3.8 2.5-6.2 2.5s-4.5-.8-6.2-2.5c-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1c1.7-1.6 3.8-2.5 6.2-2.5s4.5.8 6.2 2.5c1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8zm21.8-2.1l-4.5 9.2h-2.2l-4.5-9.2v10.5h-3.7V49.8h5l4.3 9.1 4.3-9.1h5v16.6h-3.7zm19.3-4.6c1.2 1 1.8 2.5 1.8 4.6s-.6 3.6-1.8 4.5c-1.2 1-3 1.4-5.5 1.4h-2.2v4.6h-3.7V49.8h5.9c2.5 0 4.3.5 5.5 1.5zm-2.7 6.5c.4-.5.7-1.2.7-2.2s-.3-1.6-.9-2c-.6-.4-1.5-.6-2.7-.6h-2.1v5.6h2.5c1.2 0 2-.3 2.5-.8zm11.8 4.3c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2c.6-.8.9-1.8.9-3.2v-9.2h3.7V59c0 2.4-.7 4.3-2 5.6-1.3 1.3-3 1.9-5.1 1.9s-3.8-.7-5.1-2-2-3.2-2-5.6v-9.3h3.7V59c0 1.3.3 2.4.9 3.1zm20.5-9.1v13.4h-3.7V53h-4.7v-3.2h13.1V53zm7.5-3.2h3.7v16.7H194zm19.4 0h3.7v16.6h-3.7L205.5 56v10.4h-3.7V49.8h3.4l8.2 10.7zm18.7 8.2h3.7v5.9c-1.7 1.8-3.9 2.8-6.9 2.8-2.4 0-4.5-.8-6.2-2.4-1.7-1.6-2.5-3.7-2.5-6.1 0-2.5.8-4.5 2.5-6.2s3.7-2.5 6.1-2.5c2.4 0 4.5.8 6.2 2.4l-1.9 2.8c-.7-.7-1.4-1.1-2.1-1.3-.6-.2-1.3-.4-2-.4-1.4 0-2.6.5-3.6 1.4-1 1-1.5 2.2-1.5 3.8 0 1.6.5 2.8 1.4 3.8.9.9 2 1.4 3.3 1.4 1.3 0 2.4-.2 3.2-.7l.3-4.7zm24.7-8.2V53h-7.7v3.6h7.4v3.3h-7.4v6.5h-3.7V49.8zM274 64.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1c1.7-1.6 3.8-2.5 6.2-2.5 2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.3-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c1-1 1.4-2.3 1.4-3.8zm11.4 4.1c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2c.6-.8.9-1.8.9-3.2v-9.2h3.7V59c0 2.4-.7 4.3-2 5.6-1.3 1.3-3 1.9-5.1 1.9s-3.8-.7-5.1-2c-1.3-1.3-2-3.2-2-5.6v-9.3h3.7V59c-.1 1.3.3 2.4.9 3.1zm25.1-12.3h3.7v16.6h-3.7L301.3 56v10.4h-3.7V49.8h3.4l8.2 10.7zm20.5 2.2c1.6 1.5 2.4 3.5 2.4 6.1 0 2.6-.8 4.6-2.3 6.1-1.5 1.5-3.9 2.3-7.1 2.3H317V49.8h5.9c3 0 5.3.7 6.8 2.2zm-2.7 9.9c.9-.9 1.4-2.1 1.4-3.7s-.5-2.9-1.4-3.8c-.9-.9-2.3-1.3-4.2-1.3h-2.1v10.1h2.4c1.7-.1 3-.5 3.9-1.3zm19.7 4.5l-1.5-3.6h-7l-1.5 3.6h-4l7.2-16.7h3.6l7.2 16.7h-4zm-5-11.7l-2.1 4.8h4.2l-2.1-4.8zm16.8-1.7v13.4h-3.8V53H350v-3.2h13.2V53zm7.4-3.2h3.7v16.7h-3.7zm21.8 14.3c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1c1.7-1.6 3.8-2.5 6.2-2.5 2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8zm18.5-8.2h3.8v16.6H405L397.1 56v10.4h-3.7V49.8h3.5l8.1 10.7z"/><path fill="#446ca9" d="M14.5 46.7H5.4v21.4h21.3v-9.2H14.5zm45.8.1v12.1H48.1v-.1 9.3h21.3V46.7h-9.2zM5.4 25.4h9.2l-.1-.1V13.2h12.2V4H5.4zM48.1 4v9.2h12.2v12.2h9.1V4z"/><path fill="#76c4d5" d="M46.9 25.4L34.7 13.2h13.4V4H26.7v9.2l12.2 12.2zm-11 21.3h-8L38 56.8l2 2.1H26.7v9.2h21.4v-9.3l-6.1-6zm24.4-21.3v13.3l-2.1-2.1-10.1-10.1v8.1l6 6 6.1 6.1h9.2V25.4zM26.7 37.5L14.6 25.4H5.4v21.3h9.1V33.4l12.2 12.2z"/></svg>
\ No newline at end of file
diff --git a/microsite/static/img/cncf-white.svg b/microsite/static/img/cncf-white.svg
new file mode 100644
index 0000000000..d94aaf3249
--- /dev/null
+++ b/microsite/static/img/cncf-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-1.81 -3.06 419.38 80.13"><style>svg {enable-background:new 0 0 416 76}</style><style>.st0{fill:#fff}</style><g id="XMLID_1_"><g id="XMLID_575_"><path id="XMLID_643_" d="M102.2 33c3.3 0 5.9-1.3 8-3.9l4.3 4.4c-3.4 3.8-7.3 5.7-11.9 5.7s-8.3-1.4-11.3-4.3-4.4-6.5-4.4-10.9 1.5-8.1 4.5-11 6.7-4.4 11.1-4.4c4.9 0 9 1.9 12.2 5.6l-4.1 4.7c-2.1-2.6-4.7-3.9-7.8-3.9-2.5 0-4.6.8-6.4 2.4s-2.7 3.8-2.7 6.6.8 5 2.5 6.7c1.6 1.4 3.6 2.3 6 2.3z" class="st0"/><path id="XMLID_641_" d="M119.7 38.8V9.1h6.6v23.8H139v5.9h-19.3z" class="st0"/><path id="XMLID_638_" d="M168 34.7c-3 2.9-6.7 4.4-11.1 4.4s-8.1-1.5-11.1-4.4-4.5-6.6-4.5-10.9c0-4.4 1.5-8 4.5-10.9s6.7-4.4 11.1-4.4S165 10 168 12.9s4.5 6.6 4.5 10.9c0 4.4-1.5 8-4.5 10.9zm-2.3-10.9c0-2.6-.9-4.9-2.6-6.8s-3.8-2.8-6.3-2.8-4.6.9-6.3 2.8c-1.7 1.9-2.6 4.1-2.6 6.8 0 2.6.9 4.9 2.6 6.8s3.8 2.8 6.3 2.8 4.6-.9 6.3-2.8c1.8-1.9 2.6-4.1 2.6-6.8z" class="st0"/><path id="XMLID_636_" d="M186 31.2c1.1 1.4 2.6 2.1 4.5 2.1s3.4-.7 4.4-2.1c1.1-1.4 1.6-3.3 1.6-5.6V9.2h6.6v16.6c0 4.3-1.2 7.6-3.6 9.9s-5.4 3.5-9.1 3.5-6.8-1.2-9.2-3.5c-2.4-2.3-3.6-5.6-3.6-9.9V9.2h6.6v16.4c.1 2.3.7 4.2 1.8 5.6z" class="st0"/><path id="XMLID_633_" d="M232.7 13c2.8 2.6 4.3 6.2 4.3 10.8s-1.4 8.3-4.1 11c-2.8 2.7-7 4-12.6 4H210V9.1h10.5c5.3 0 9.4 1.3 12.2 3.9zm-4.8 17.7c1.6-1.5 2.4-3.8 2.4-6.7 0-2.9-.8-5.2-2.4-6.7-1.6-1.6-4.1-2.4-7.5-2.4h-3.7V33h4.2c3 0 5.3-.8 7-2.3z" class="st0"/><path id="XMLID_631_" d="M274.7 9.1h6.6v29.7h-6.6l-14.2-18.6v18.6h-6.6V9.1h6.2l14.6 19.1V9.1z" class="st0"/><path id="XMLID_628_" d="M309.8 38.8l-2.8-6.4h-12.5l-2.8 6.4h-7.1l12.8-29.7h6.4l12.8 29.7h-6.8zM300.9 18l-3.7 8.6h7.4l-3.7-8.6z" class="st0"/><path id="XMLID_626_" d="M330.8 14.9v24h-6.6v-24h-8.4V9.2h23.5v5.7h-8.5z" class="st0"/><path id="XMLID_624_" d="M344 9.1h6.6v29.7H344V9.1z" class="st0"/><path id="XMLID_622_" d="M368.9 28l7.6-18.9h7.2l-11.9 29.7h-5.6L354.3 9.1h7.2l7.4 18.9z" class="st0"/><path id="XMLID_620_" d="M408.6 9.1V15h-14.8v6.1h13.3v5.7h-13.3V33h15.3v5.9h-21.9V9.2h21.4v-.1z" class="st0"/><path id="XMLID_618_" d="M94.6 64.1c1.8 0 3.3-.7 4.5-2.2l2.4 2.5c-1.9 2.1-4.1 3.2-6.7 3.2s-4.7-.8-6.3-2.4c-1.7-1.6-2.5-3.7-2.5-6.1 0-2.5.8-4.5 2.5-6.2s3.8-2.5 6.2-2.5c2.7 0 5 1 6.9 3.1l-2.3 2.6c-1.2-1.5-2.6-2.2-4.4-2.2-1.4 0-2.6.5-3.6 1.4s-1.5 2.1-1.5 3.7.5 2.8 1.4 3.7c.9 1 2.1 1.4 3.4 1.4z" class="st0"/><path id="XMLID_615_" d="M118 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8z" class="st0"/><path id="XMLID_613_" d="M138.6 56.9l-4.5 9.1h-2.2l-4.5-9.1v10.5h-3.7V50.7h5l4.3 9.1 4.3-9.1h5v16.7h-3.7V56.9z" class="st0"/><path id="XMLID_610_" d="M157.9 52.3c1.2 1 1.8 2.5 1.8 4.6s-.6 3.6-1.8 4.5c-1.2 1-3 1.4-5.5 1.4h-2.2v4.6h-3.7V50.7h5.9c2.5.1 4.3.6 5.5 1.6zm-2.7 6.5c.4-.5.7-1.2.7-2.2s-.3-1.6-.9-2-1.5-.6-2.7-.6h-2.1v5.6h2.5c1.2 0 2-.3 2.5-.8z" class="st0"/><path id="XMLID_608_" d="M167 63.1c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2c.6-.8.9-1.8.9-3.2v-9.2h3.7V60c0 2.4-.7 4.3-2 5.6-1.3 1.3-3 1.9-5.1 1.9s-3.8-.7-5.1-2-2-3.2-2-5.6v-9.3h3.7v9.2c0 1.5.3 2.6.9 3.3z" class="st0"/><path id="XMLID_606_" d="M187.5 54v13.4h-3.7V54h-4.7v-3.2h13.2V54h-4.8z" class="st0"/><path id="XMLID_604_" d="M195 50.8h3.7v16.7H195V50.8z" class="st0"/><path id="XMLID_602_" d="M214.4 50.8h3.7v16.7h-3.7l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7V50.8h-.1z" class="st0"/><path id="XMLID_600_" d="M233.1 59h3.7v5.9c-1.7 1.8-3.9 2.8-6.9 2.8-2.4 0-4.5-.8-6.2-2.4s-2.5-3.7-2.5-6.1c0-2.5.8-4.5 2.5-6.2s3.7-2.5 6.1-2.5 4.5.8 6.2 2.4l-1.9 2.8c-.7-.7-1.4-1.1-2.1-1.3-.6-.2-1.3-.4-2-.4-1.4 0-2.6.5-3.6 1.4-1 1-1.5 2.2-1.5 3.8 0 1.6.5 2.8 1.4 3.8.9.9 2 1.4 3.3 1.4s2.4-.2 3.2-.7V59h.3z" class="st0"/><path id="XMLID_598_" d="M257.8 50.8v3.3h-7.7v3.6h7.3V61h-7.3v6.5h-3.7V50.8h11.4z" class="st0"/><path id="XMLID_595_" d="M275 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.3-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c1-1 1.4-2.3 1.4-3.8z" class="st0"/><path id="XMLID_593_" d="M285.1 63.1c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2c.6-.8.9-1.8.9-3.2v-9.2h3.7V60c0 2.4-.7 4.3-2 5.6-1.3 1.3-3 1.9-5.1 1.9s-3.8-.7-5.1-2c-1.3-1.3-2-3.2-2-5.6v-9.3h3.7v9.2c-.1 1.5.3 2.6.9 3.3z" class="st0"/><path id="XMLID_591_" d="M310.2 50.8h3.7v16.7h-3.7l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7V50.8h-.1z" class="st0"/><path id="XMLID_588_" d="M330.7 53c1.6 1.5 2.4 3.5 2.4 6.1s-.8 4.6-2.3 6.1-3.9 2.3-7.1 2.3H318V50.8h5.9c3 0 5.3.7 6.8 2.2zm-2.7 9.9c.9-.9 1.4-2.1 1.4-3.7s-.5-2.9-1.4-3.8-2.3-1.3-4.2-1.3h-2.1v10.1h2.4c1.7-.1 3-.5 3.9-1.3z" class="st0"/><path id="XMLID_585_" d="M347.7 67.4l-1.5-3.6h-7l-1.5 3.6h-4l7.2-16.7h3.6l7.2 16.7h-4zm-5-11.7l-2.1 4.8h4.2l-2.1-4.8z" class="st0"/><path id="XMLID_583_" d="M359.5 54v13.4h-3.7V54H351v-3.2h13.2V54h-4.7z" class="st0"/><path id="XMLID_581_" d="M366.9 50.8h3.7v16.7h-3.7V50.8z" class="st0"/><path id="XMLID_578_" d="M388.7 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8z" class="st0"/><path id="XMLID_576_" d="M406 50.8h3.7v16.7H406l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7-.1-10.7z" class="st0"/></g></g><g id="XMLID_197_"><g id="XMLID_392_"><path id="XMLID_397_" d="M15.5 47.7H6.4v21.4h21.3v-9.2H15.5z" class="st0"/><path id="XMLID_395_" d="M61.3 47.8v12.1H49.1v-.1 9.3h21.3V47.7h-9.2z" class="st0"/><path id="XMLID_394_" d="M6.4 26.4h9.2l-.1-.1V14.2h12.2V5H6.4z" class="st0"/><path id="XMLID_393_" d="M49.1 5v9.2h12.2v12.2h9.1V5z" class="st0"/></g><g id="XMLID_200_" opacity=".8"><path id="XMLID_391_" d="M47.9 26.4L35.7 14.2h13.4V5H27.7v9.2l12.2 12.2z" class="st0"/><path id="XMLID_390_" d="M36.9 47.7h-8L39 57.8l2 2.1H27.7v9.2h21.4v-9.3l-6.1-6z" class="st0"/><path id="XMLID_389_" d="M61.3 26.4v13.3l-2.1-2.1-10.1-10.1v8.1l6 6 6.1 6.1h9.2V26.4z" class="st0"/><path id="XMLID_388_" d="M27.7 38.5L15.6 26.4H6.4v21.3h9.1V34.4l12.2 12.2z" class="st0"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index e91504d619..03e24cf4ae 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -35,8 +35,6 @@ import {
   SidebarSearchField,
   SidebarSpace,
   SidebarUserSettings,
-  SidebarThemeToggle,
-  SidebarPinButton,
   DefaultProviderSettings,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
@@ -103,9 +101,7 @@ const Root: FC<{}> = ({ children }) => (
       />
       <SidebarSpace />
       <SidebarDivider />
-      <SidebarThemeToggle />
       <SidebarUserSettings providerSettings={<DefaultProviderSettings />} />
-      <SidebarPinButton />
     </Sidebar>
     {children}
   </SidebarPage>
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 994f3b9263..d4a45ba60c 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -21,6 +21,11 @@ import {
   Router as CloudbuildRouter,
   isPluginApplicableToEntity as isCloudbuildAvailable,
 } from '@backstage/plugin-cloudbuild';
+ import {
+  Router as JenkinsRouter,
+  isPluginApplicableToEntity as isJenkinsAvailable,
+  LatestRunCard as JenkinsLatestRunCard,
+} from '@backstage/plugin-jenkins';
 import {
   Router as CircleCIRouter,
   isPluginApplicableToEntity as isCircleCIAvailable,
@@ -42,6 +47,8 @@ const CICDSwitcher = ({ entity }: { entity: Entity }) => {
   // This component is just an example of how you can implement your company's logic in entity page.
   // You can for example enforce that all components of type 'service' should use GitHubActions
   switch (true) {
+    case isJenkinsAvailable(entity):
+      return <JenkinsRouter entity={entity} />;
     case isGitHubActionsAvailable(entity):
       return <GitHubActionsRouter entity={entity} />;
     case isCircleCIAvailable(entity):
@@ -63,6 +70,11 @@ const OverviewContent = ({ entity }: { entity: Entity }) => (
     <Grid item>
       <AboutCard entity={entity} />
     </Grid>
+    {isJenkinsAvailable(entity) && (
+      <Grid item sm={4}>
+        <JenkinsLatestRunCard branch="master" />
+      </Grid>
+    )}
   </Grid>
 );
 
diff --git a/packages/backend/package.json b/packages/backend/package.json
index d944ac6535..c255f65015 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -31,6 +31,7 @@
     "@backstage/plugin-scaffolder-backend": "^0.1.1-alpha.21",
     "@backstage/plugin-sentry-backend": "^0.1.1-alpha.21",
     "@backstage/plugin-techdocs-backend": "^0.1.1-alpha.21",
+    "@gitbeaker/node": "^23.5.0",
     "@octokit/rest": "^18.0.0",
     "dockerode": "^3.2.0",
     "example-app": "^0.1.1-alpha.21",
diff --git a/packages/backend/src/plugins/scaffolder.ts b/packages/backend/src/plugins/scaffolder.ts
index a9e5f185ec..2793a38459 100644
--- a/packages/backend/src/plugins/scaffolder.ts
+++ b/packages/backend/src/plugins/scaffolder.ts
@@ -19,16 +19,24 @@ import {
   createRouter,
   FilePreparer,
   GithubPreparer,
+  GitlabPreparer,
   Preparers,
+  Publishers,
   GithubPublisher,
+  GitlabPublisher,
   CreateReactAppTemplater,
   Templaters,
+  RepoVisilityOptions,
 } from '@backstage/plugin-scaffolder-backend';
 import { Octokit } from '@octokit/rest';
+import { Gitlab } from '@gitbeaker/node';
 import type { PluginEnvironment } from '../types';
 import Docker from 'dockerode';
 
-export default async function createPlugin({ logger }: PluginEnvironment) {
+export default async function createPlugin({
+  logger,
+  config,
+}: PluginEnvironment) {
   const cookiecutterTemplater = new CookieCutter();
   const craTemplater = new CreateReactAppTemplater();
   const templaters = new Templaters();
@@ -37,19 +45,77 @@ export default async function createPlugin({ logger }: PluginEnvironment) {
 
   const filePreparer = new FilePreparer();
   const githubPreparer = new GithubPreparer();
+  const gitlabPreparer = new GitlabPreparer(config);
   const preparers = new Preparers();
 
   preparers.register('file', filePreparer);
   preparers.register('github', githubPreparer);
+  preparers.register('gitlab', gitlabPreparer);
+  preparers.register('gitlab/api', gitlabPreparer);
 
-  const githubClient = new Octokit({ auth: process.env.GITHUB_ACCESS_TOKEN });
-  const publisher = new GithubPublisher({ client: githubClient });
+  const publishers = new Publishers();
+
+  const githubConfig = config.getOptionalConfig('scaffolder.github');
+
+  if (githubConfig) {
+    try {
+      const repoVisibility = githubConfig.getString(
+        'visibility',
+      ) as RepoVisilityOptions;
+
+      const githubToken = githubConfig.getString('token');
+      const githubClient = new Octokit({ auth: githubToken });
+      const githubPublisher = new GithubPublisher({
+        client: githubClient,
+        token: githubToken,
+        repoVisibility,
+      });
+      publishers.register('file', githubPublisher);
+      publishers.register('github', githubPublisher);
+    } catch (e) {
+      const providerName = 'github';
+      if (process.env.NODE_ENV !== 'development') {
+        throw new Error(
+          `Failed to initialize ${providerName} scaffolding provider, ${e.message}`,
+        );
+      }
+
+      logger.warn(
+        `Skipping ${providerName} scaffolding provider, ${e.message}`,
+      );
+    }
+  }
+
+  const gitLabConfig = config.getOptionalConfig('scaffolder.gitlab.api');
+  if (gitLabConfig) {
+    try {
+      const gitLabToken = gitLabConfig.getString('token');
+      const gitLabClient = new Gitlab({
+        host: gitLabConfig.getOptionalString('baseUrl'),
+        token: gitLabToken,
+      });
+      const gitLabPublisher = new GitlabPublisher(gitLabClient, gitLabToken);
+      publishers.register('gitlab', gitLabPublisher);
+      publishers.register('gitlab/api', gitLabPublisher);
+    } catch (e) {
+      const providerName = 'gitlab';
+      if (process.env.NODE_ENV !== 'development') {
+        throw new Error(
+          `Failed to initialize ${providerName} scaffolding provider, ${e.message}`,
+        );
+      }
+
+      logger.warn(
+        `Skipping ${providerName} scaffolding provider, ${e.message}`,
+      );
+    }
+  }
 
   const dockerClient = new Docker();
   return await createRouter({
     preparers,
     templaters,
-    publisher,
+    publishers,
     logger,
     dockerClient,
   });
diff --git a/packages/catalog-model/examples/hello-world-api.yaml b/packages/catalog-model/examples/hello-world-api.yaml
index 298b0cb835..659c48adfb 100644
--- a/packages/catalog-model/examples/hello-world-api.yaml
+++ b/packages/catalog-model/examples/hello-world-api.yaml
@@ -5,6 +5,8 @@ metadata:
   description: Hello World example for gRPC
 spec:
   type: grpc
+  lifecycle: deprecated
+  owner: grpc@example.com
   definition: |
     // Copyright 2015 gRPC authors.
     //
diff --git a/packages/catalog-model/examples/petstore-api.yaml b/packages/catalog-model/examples/petstore-api.yaml
index 01953a4a97..c8ce576cce 100644
--- a/packages/catalog-model/examples/petstore-api.yaml
+++ b/packages/catalog-model/examples/petstore-api.yaml
@@ -3,8 +3,13 @@ kind: API
 metadata:
   name: petstore
   description: The petstore API
+  tags:
+    - store
+    - rest
 spec:
   type: openapi
+  lifecycle: experimental
+  owner: pets@example.com
   definition: |
     openapi: "3.0.0"
     info:
diff --git a/packages/catalog-model/examples/playback-order-component.yaml b/packages/catalog-model/examples/playback-order-component.yaml
index 4f93b65edf..3e46953928 100644
--- a/packages/catalog-model/examples/playback-order-component.yaml
+++ b/packages/catalog-model/examples/playback-order-component.yaml
@@ -3,6 +3,9 @@ kind: Component
 metadata:
   name: playback-order
   description: Playback Order
+  tags:
+    - java
+    - playback
 spec:
   type: service
   lifecycle: production
diff --git a/packages/catalog-model/examples/streetlights-api.yaml b/packages/catalog-model/examples/streetlights-api.yaml
index 4aeef993bb..d53b05fc2d 100644
--- a/packages/catalog-model/examples/streetlights-api.yaml
+++ b/packages/catalog-model/examples/streetlights-api.yaml
@@ -4,9 +4,11 @@ metadata:
   name: streetlights
   description: The Smartylighting Streetlights API allows you to remotely manage the city lights.
   tags:
-    - unstable
+    - mqtt
 spec:
   type: asyncapi
+  lifecycle: production
+  owner: streetlights@example.com
   definition: |
     asyncapi: 2.0.0
     info:
diff --git a/packages/catalog-model/examples/swapi-graphql.yaml b/packages/catalog-model/examples/swapi-graphql.yaml
new file mode 100644
index 0000000000..152d9c0afa
--- /dev/null
+++ b/packages/catalog-model/examples/swapi-graphql.yaml
@@ -0,0 +1,1174 @@
+apiVersion: backstage.io/v1alpha1
+kind: API
+metadata:
+  name: starwars-graphql
+  description: SWAPI GraphQL Schema
+spec:
+  type: graphql
+  definition: |
+    schema {
+      query: Root
+    }
+
+    """A single film."""
+    type Film implements Node {
+      """The title of this film."""
+      title: String
+
+      """The episode number of this film."""
+      episodeID: Int
+
+      """The opening paragraphs at the beginning of this film."""
+      openingCrawl: String
+
+      """The name of the director of this film."""
+      director: String
+
+      """The name(s) of the producer(s) of this film."""
+      producers: [String]
+
+      """The ISO 8601 date format of film release at original creator country."""
+      releaseDate: String
+      speciesConnection(after: String, first: Int, before: String, last: Int): FilmSpeciesConnection
+      starshipConnection(after: String, first: Int, before: String, last: Int): FilmStarshipsConnection
+      vehicleConnection(after: String, first: Int, before: String, last: Int): FilmVehiclesConnection
+      characterConnection(after: String, first: Int, before: String, last: Int): FilmCharactersConnection
+      planetConnection(after: String, first: Int, before: String, last: Int): FilmPlanetsConnection
+
+      """The ISO 8601 date format of the time that this resource was created."""
+      created: String
+
+      """The ISO 8601 date format of the time that this resource was edited."""
+      edited: String
+
+      """The ID of an object"""
+      id: ID!
+    }
+
+    """A connection to a list of items."""
+    type FilmCharactersConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [FilmCharactersEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      characters: [Person]
+    }
+
+    """An edge in a connection."""
+    type FilmCharactersEdge {
+      """The item at the end of the edge"""
+      node: Person
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type FilmPlanetsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [FilmPlanetsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      planets: [Planet]
+    }
+
+    """An edge in a connection."""
+    type FilmPlanetsEdge {
+      """The item at the end of the edge"""
+      node: Planet
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type FilmsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [FilmsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      films: [Film]
+    }
+
+    """An edge in a connection."""
+    type FilmsEdge {
+      """The item at the end of the edge"""
+      node: Film
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type FilmSpeciesConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [FilmSpeciesEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      species: [Species]
+    }
+
+    """An edge in a connection."""
+    type FilmSpeciesEdge {
+      """The item at the end of the edge"""
+      node: Species
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type FilmStarshipsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [FilmStarshipsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      starships: [Starship]
+    }
+
+    """An edge in a connection."""
+    type FilmStarshipsEdge {
+      """The item at the end of the edge"""
+      node: Starship
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type FilmVehiclesConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [FilmVehiclesEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      vehicles: [Vehicle]
+    }
+
+    """An edge in a connection."""
+    type FilmVehiclesEdge {
+      """The item at the end of the edge"""
+      node: Vehicle
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """An object with an ID"""
+    interface Node {
+      """The id of the object."""
+      id: ID!
+    }
+
+    """Information about pagination in a connection."""
+    type PageInfo {
+      """When paginating forwards, are there more items?"""
+      hasNextPage: Boolean!
+
+      """When paginating backwards, are there more items?"""
+      hasPreviousPage: Boolean!
+
+      """When paginating backwards, the cursor to continue."""
+      startCursor: String
+
+      """When paginating forwards, the cursor to continue."""
+      endCursor: String
+    }
+
+    """A connection to a list of items."""
+    type PeopleConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [PeopleEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      people: [Person]
+    }
+
+    """An edge in a connection."""
+    type PeopleEdge {
+      """The item at the end of the edge"""
+      node: Person
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """An individual person or character within the Star Wars universe."""
+    type Person implements Node {
+      """The name of this person."""
+      name: String
+
+      """
+      The birth year of the person, using the in-universe standard of BBY or ABY -
+      Before the Battle of Yavin or After the Battle of Yavin. The Battle of Yavin is
+      a battle that occurs at the end of Star Wars episode IV: A New Hope.
+      """
+      birthYear: String
+
+      """
+      The eye color of this person. Will be "unknown" if not known or "n/a" if the
+      person does not have an eye.
+      """
+      eyeColor: String
+
+      """
+      The gender of this person. Either "Male", "Female" or "unknown",
+      "n/a" if the person does not have a gender.
+      """
+      gender: String
+
+      """
+      The hair color of this person. Will be "unknown" if not known or "n/a" if the
+      person does not have hair.
+      """
+      hairColor: String
+
+      """The height of the person in centimeters."""
+      height: Int
+
+      """The mass of the person in kilograms."""
+      mass: Float
+
+      """The skin color of this person."""
+      skinColor: String
+
+      """A planet that this person was born on or inhabits."""
+      homeworld: Planet
+      filmConnection(after: String, first: Int, before: String, last: Int): PersonFilmsConnection
+
+      """The species that this person belongs to, or null if unknown."""
+      species: Species
+      starshipConnection(after: String, first: Int, before: String, last: Int): PersonStarshipsConnection
+      vehicleConnection(after: String, first: Int, before: String, last: Int): PersonVehiclesConnection
+
+      """The ISO 8601 date format of the time that this resource was created."""
+      created: String
+
+      """The ISO 8601 date format of the time that this resource was edited."""
+      edited: String
+
+      """The ID of an object"""
+      id: ID!
+    }
+
+    """A connection to a list of items."""
+    type PersonFilmsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [PersonFilmsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      films: [Film]
+    }
+
+    """An edge in a connection."""
+    type PersonFilmsEdge {
+      """The item at the end of the edge"""
+      node: Film
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type PersonStarshipsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [PersonStarshipsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      starships: [Starship]
+    }
+
+    """An edge in a connection."""
+    type PersonStarshipsEdge {
+      """The item at the end of the edge"""
+      node: Starship
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type PersonVehiclesConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [PersonVehiclesEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      vehicles: [Vehicle]
+    }
+
+    """An edge in a connection."""
+    type PersonVehiclesEdge {
+      """The item at the end of the edge"""
+      node: Vehicle
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """
+    A large mass, planet or planetoid in the Star Wars Universe, at the time of
+    0 ABY.
+    """
+    type Planet implements Node {
+      """The name of this planet."""
+      name: String
+
+      """The diameter of this planet in kilometers."""
+      diameter: Int
+
+      """
+      The number of standard hours it takes for this planet to complete a single
+      rotation on its axis.
+      """
+      rotationPeriod: Int
+
+      """
+      The number of standard days it takes for this planet to complete a single orbit
+      of its local star.
+      """
+      orbitalPeriod: Int
+
+      """
+      A number denoting the gravity of this planet, where "1" is normal or 1 standard
+      G. "2" is twice or 2 standard Gs. "0.5" is half or 0.5 standard Gs.
+      """
+      gravity: String
+
+      """The average population of sentient beings inhabiting this planet."""
+      population: Float
+
+      """The climates of this planet."""
+      climates: [String]
+
+      """The terrains of this planet."""
+      terrains: [String]
+
+      """
+      The percentage of the planet surface that is naturally occuring water or bodies
+      of water.
+      """
+      surfaceWater: Float
+      residentConnection(after: String, first: Int, before: String, last: Int): PlanetResidentsConnection
+      filmConnection(after: String, first: Int, before: String, last: Int): PlanetFilmsConnection
+
+      """The ISO 8601 date format of the time that this resource was created."""
+      created: String
+
+      """The ISO 8601 date format of the time that this resource was edited."""
+      edited: String
+
+      """The ID of an object"""
+      id: ID!
+    }
+
+    """A connection to a list of items."""
+    type PlanetFilmsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [PlanetFilmsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      films: [Film]
+    }
+
+    """An edge in a connection."""
+    type PlanetFilmsEdge {
+      """The item at the end of the edge"""
+      node: Film
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type PlanetResidentsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [PlanetResidentsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      residents: [Person]
+    }
+
+    """An edge in a connection."""
+    type PlanetResidentsEdge {
+      """The item at the end of the edge"""
+      node: Person
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type PlanetsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [PlanetsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      planets: [Planet]
+    }
+
+    """An edge in a connection."""
+    type PlanetsEdge {
+      """The item at the end of the edge"""
+      node: Planet
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    type Root {
+      allFilms(after: String, first: Int, before: String, last: Int): FilmsConnection
+      film(id: ID, filmID: ID): Film
+      allPeople(after: String, first: Int, before: String, last: Int): PeopleConnection
+      person(id: ID, personID: ID): Person
+      allPlanets(after: String, first: Int, before: String, last: Int): PlanetsConnection
+      planet(id: ID, planetID: ID): Planet
+      allSpecies(after: String, first: Int, before: String, last: Int): SpeciesConnection
+      species(id: ID, speciesID: ID): Species
+      allStarships(after: String, first: Int, before: String, last: Int): StarshipsConnection
+      starship(id: ID, starshipID: ID): Starship
+      allVehicles(after: String, first: Int, before: String, last: Int): VehiclesConnection
+      vehicle(id: ID, vehicleID: ID): Vehicle
+
+      """Fetches an object given its ID"""
+      node(
+        """The ID of an object"""
+        id: ID!
+      ): Node
+    }
+
+    """A type of person or character within the Star Wars Universe."""
+    type Species implements Node {
+      """The name of this species."""
+      name: String
+
+      """The classification of this species, such as "mammal" or "reptile"."""
+      classification: String
+
+      """The designation of this species, such as "sentient"."""
+      designation: String
+
+      """The average height of this species in centimeters."""
+      averageHeight: Float
+
+      """The average lifespan of this species in years, null if unknown."""
+      averageLifespan: Int
+
+      """
+      Common eye colors for this species, null if this species does not typically
+      have eyes.
+      """
+      eyeColors: [String]
+
+      """
+      Common hair colors for this species, null if this species does not typically
+      have hair.
+      """
+      hairColors: [String]
+
+      """
+      Common skin colors for this species, null if this species does not typically
+      have skin.
+      """
+      skinColors: [String]
+
+      """The language commonly spoken by this species."""
+      language: String
+
+      """A planet that this species originates from."""
+      homeworld: Planet
+      personConnection(after: String, first: Int, before: String, last: Int): SpeciesPeopleConnection
+      filmConnection(after: String, first: Int, before: String, last: Int): SpeciesFilmsConnection
+
+      """The ISO 8601 date format of the time that this resource was created."""
+      created: String
+
+      """The ISO 8601 date format of the time that this resource was edited."""
+      edited: String
+
+      """The ID of an object"""
+      id: ID!
+    }
+
+    """A connection to a list of items."""
+    type SpeciesConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [SpeciesEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      species: [Species]
+    }
+
+    """An edge in a connection."""
+    type SpeciesEdge {
+      """The item at the end of the edge"""
+      node: Species
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type SpeciesFilmsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [SpeciesFilmsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      films: [Film]
+    }
+
+    """An edge in a connection."""
+    type SpeciesFilmsEdge {
+      """The item at the end of the edge"""
+      node: Film
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type SpeciesPeopleConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [SpeciesPeopleEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      people: [Person]
+    }
+
+    """An edge in a connection."""
+    type SpeciesPeopleEdge {
+      """The item at the end of the edge"""
+      node: Person
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A single transport craft that has hyperdrive capability."""
+    type Starship implements Node {
+      """The name of this starship. The common name, such as "Death Star"."""
+      name: String
+
+      """
+      The model or official name of this starship. Such as "T-65 X-wing" or "DS-1
+      Orbital Battle Station".
+      """
+      model: String
+
+      """
+      The class of this starship, such as "Starfighter" or "Deep Space Mobile
+      Battlestation"
+      """
+      starshipClass: String
+
+      """The manufacturers of this starship."""
+      manufacturers: [String]
+
+      """The cost of this starship new, in galactic credits."""
+      costInCredits: Float
+
+      """The length of this starship in meters."""
+      length: Float
+
+      """The number of personnel needed to run or pilot this starship."""
+      crew: String
+
+      """The number of non-essential people this starship can transport."""
+      passengers: String
+
+      """
+      The maximum speed of this starship in atmosphere. null if this starship is
+      incapable of atmosphering flight.
+      """
+      maxAtmospheringSpeed: Int
+
+      """The class of this starships hyperdrive."""
+      hyperdriveRating: Float
+
+      """
+      The Maximum number of Megalights this starship can travel in a standard hour.
+      A "Megalight" is a standard unit of distance and has never been defined before
+      within the Star Wars universe. This figure is only really useful for measuring
+      the difference in speed of starships. We can assume it is similar to AU, the
+      distance between our Sun (Sol) and Earth.
+      """
+      MGLT: Int
+
+      """The maximum number of kilograms that this starship can transport."""
+      cargoCapacity: Float
+
+      """
+      The maximum length of time that this starship can provide consumables for its
+      entire crew without having to resupply.
+      """
+      consumables: String
+      pilotConnection(after: String, first: Int, before: String, last: Int): StarshipPilotsConnection
+      filmConnection(after: String, first: Int, before: String, last: Int): StarshipFilmsConnection
+
+      """The ISO 8601 date format of the time that this resource was created."""
+      created: String
+
+      """The ISO 8601 date format of the time that this resource was edited."""
+      edited: String
+
+      """The ID of an object"""
+      id: ID!
+    }
+
+    """A connection to a list of items."""
+    type StarshipFilmsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [StarshipFilmsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      films: [Film]
+    }
+
+    """An edge in a connection."""
+    type StarshipFilmsEdge {
+      """The item at the end of the edge"""
+      node: Film
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type StarshipPilotsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [StarshipPilotsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      pilots: [Person]
+    }
+
+    """An edge in a connection."""
+    type StarshipPilotsEdge {
+      """The item at the end of the edge"""
+      node: Person
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type StarshipsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [StarshipsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      starships: [Starship]
+    }
+
+    """An edge in a connection."""
+    type StarshipsEdge {
+      """The item at the end of the edge"""
+      node: Starship
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A single transport craft that does not have hyperdrive capability"""
+    type Vehicle implements Node {
+      """
+      The name of this vehicle. The common name, such as "Sand Crawler" or "Speeder
+      bike".
+      """
+      name: String
+
+      """
+      The model or official name of this vehicle. Such as "All-Terrain Attack
+      Transport".
+      """
+      model: String
+
+      """The class of this vehicle, such as "Wheeled" or "Repulsorcraft"."""
+      vehicleClass: String
+
+      """The manufacturers of this vehicle."""
+      manufacturers: [String]
+
+      """The cost of this vehicle new, in Galactic Credits."""
+      costInCredits: Float
+
+      """The length of this vehicle in meters."""
+      length: Float
+
+      """The number of personnel needed to run or pilot this vehicle."""
+      crew: String
+
+      """The number of non-essential people this vehicle can transport."""
+      passengers: String
+
+      """The maximum speed of this vehicle in atmosphere."""
+      maxAtmospheringSpeed: Int
+
+      """The maximum number of kilograms that this vehicle can transport."""
+      cargoCapacity: Float
+
+      """
+      The maximum length of time that this vehicle can provide consumables for its
+      entire crew without having to resupply.
+      """
+      consumables: String
+      pilotConnection(after: String, first: Int, before: String, last: Int): VehiclePilotsConnection
+      filmConnection(after: String, first: Int, before: String, last: Int): VehicleFilmsConnection
+
+      """The ISO 8601 date format of the time that this resource was created."""
+      created: String
+
+      """The ISO 8601 date format of the time that this resource was edited."""
+      edited: String
+
+      """The ID of an object"""
+      id: ID!
+    }
+
+    """A connection to a list of items."""
+    type VehicleFilmsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [VehicleFilmsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      films: [Film]
+    }
+
+    """An edge in a connection."""
+    type VehicleFilmsEdge {
+      """The item at the end of the edge"""
+      node: Film
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type VehiclePilotsConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [VehiclePilotsEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      pilots: [Person]
+    }
+
+    """An edge in a connection."""
+    type VehiclePilotsEdge {
+      """The item at the end of the edge"""
+      node: Person
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
+
+    """A connection to a list of items."""
+    type VehiclesConnection {
+      """Information to aid in pagination."""
+      pageInfo: PageInfo!
+
+      """A list of edges."""
+      edges: [VehiclesEdge]
+
+      """
+      A count of the total number of objects in this connection, ignoring pagination.
+      This allows a client to fetch the first five objects by passing "5" as the
+      argument to "first", then fetch the total count so it could display "5 of 83",
+      for example.
+      """
+      totalCount: Int
+
+      """
+      A list of all of the objects returned in the connection. This is a convenience
+      field provided for quickly exploring the API; rather than querying for
+      "{ edges { node } }" when no edge data is needed, this field can be be used
+      instead. Note that when clients like Relay need to fetch the "cursor" field on
+      the edge to enable efficient pagination, this shortcut cannot be used, and the
+      full "{ edges { node } }" version should be used instead.
+      """
+      vehicles: [Vehicle]
+    }
+
+    """An edge in a connection."""
+    type VehiclesEdge {
+      """The item at the end of the edge"""
+      node: Vehicle
+
+      """A cursor for use in pagination"""
+      cursor: String!
+    }
diff --git a/packages/catalog-model/src/kinds/ApiEntityV1alpha1.test.ts b/packages/catalog-model/src/kinds/ApiEntityV1alpha1.test.ts
index 48de569213..35a1c59ef8 100644
--- a/packages/catalog-model/src/kinds/ApiEntityV1alpha1.test.ts
+++ b/packages/catalog-model/src/kinds/ApiEntityV1alpha1.test.ts
@@ -33,6 +33,8 @@ describe('ApiV1alpha1Policy', () => {
       },
       spec: {
         type: 'openapi',
+        lifecycle: 'production',
+        owner: 'me',
         definition: `
 openapi: "3.0.0"
 info:
@@ -109,6 +111,36 @@ components:
     await expect(policy.enforce(entity)).rejects.toThrow(/type/);
   });
 
+  it('rejects missing lifecycle', async () => {
+    delete (entity as any).spec.lifecycle;
+    await expect(policy.enforce(entity)).rejects.toThrow(/lifecycle/);
+  });
+
+  it('rejects wrong lifecycle', async () => {
+    (entity as any).spec.lifecycle = 7;
+    await expect(policy.enforce(entity)).rejects.toThrow(/lifecycle/);
+  });
+
+  it('rejects empty lifecycle', async () => {
+    (entity as any).spec.lifecycle = '';
+    await expect(policy.enforce(entity)).rejects.toThrow(/lifecycle/);
+  });
+
+  it('rejects missing owner', async () => {
+    delete (entity as any).spec.owner;
+    await expect(policy.enforce(entity)).rejects.toThrow(/owner/);
+  });
+
+  it('rejects wrong owner', async () => {
+    (entity as any).spec.owner = 7;
+    await expect(policy.enforce(entity)).rejects.toThrow(/owner/);
+  });
+
+  it('rejects empty owner', async () => {
+    (entity as any).spec.owner = '';
+    await expect(policy.enforce(entity)).rejects.toThrow(/owner/);
+  });
+
   it('rejects missing definition', async () => {
     delete (entity as any).spec.definition;
     await expect(policy.enforce(entity)).rejects.toThrow(/definition/);
diff --git a/packages/catalog-model/src/kinds/ApiEntityV1alpha1.ts b/packages/catalog-model/src/kinds/ApiEntityV1alpha1.ts
index 59e16df9a7..972f6df96d 100644
--- a/packages/catalog-model/src/kinds/ApiEntityV1alpha1.ts
+++ b/packages/catalog-model/src/kinds/ApiEntityV1alpha1.ts
@@ -26,6 +26,8 @@ export interface ApiEntityV1alpha1 extends Entity {
   kind: typeof KIND;
   spec: {
     type: string;
+    lifecycle: string;
+    owner: string;
     definition: string;
   };
 }
@@ -40,6 +42,8 @@ export class ApiEntityV1alpha1Policy implements EntityPolicy {
       spec: yup
         .object({
           type: yup.string().required().min(1),
+          lifecycle: yup.string().required().min(1),
+          owner: yup.string().required().min(1),
           definition: yup.string().required().min(1),
         })
         .required(),
diff --git a/packages/cli/src/lib/builder/config.ts b/packages/cli/src/lib/builder/config.ts
index e91fc32633..afcedaae59 100644
--- a/packages/cli/src/lib/builder/config.ts
+++ b/packages/cli/src/lib/builder/config.ts
@@ -94,14 +94,7 @@ export const makeConfigs = async (
         postcss(),
         imageFiles({
           exclude: /\.icon\.svg$/,
-          include: [
-            /\.css$/,
-            /\.svg$/,
-            /\.png$/,
-            /\.gif$/,
-            /\.jpg$/,
-            /\.jpeg$/,
-          ],
+          include: [/\.svg$/, /\.png$/, /\.gif$/, /\.jpg$/, /\.jpeg$/],
         }),
         json(),
         yaml(),
diff --git a/packages/core-api/src/app/FeatureFlags.tsx b/packages/core-api/src/app/FeatureFlags.tsx
index 11c084d3ed..3db2a18a02 100644
--- a/packages/core-api/src/app/FeatureFlags.tsx
+++ b/packages/core-api/src/app/FeatureFlags.tsx
@@ -80,6 +80,15 @@ export class UserFlags extends Map<FeatureFlagName, FeatureFlagState> {
     return output;
   }
 
+  toggle(name: FeatureFlagName): FeatureFlagState {
+    if (super.get(name) === FeatureFlagState.On) {
+      super.set(name, FeatureFlagState.Off);
+    } else {
+      super.set(name, FeatureFlagState.On);
+    }
+    return super.get(name) || FeatureFlagState.Off;
+  }
+
   delete(name: FeatureFlagName): boolean {
     const output = super.delete(name);
     this.save();
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx b/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
similarity index 69%
rename from packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
rename to packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
index 62c9f3be6e..922bb63b2f 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
+++ b/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -15,26 +15,26 @@
  */
 
 import React from 'react';
-import { ProgressCard } from './ProgressCard';
+import { GaugeCard } from './GaugeCard';
 import { Grid } from '@material-ui/core';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
 export default {
   title: 'Progress Card',
-  component: ProgressCard,
+  component: GaugeCard,
 };
 
 export const Default = () => (
   <Grid container spacing={2}>
     <Grid item>
-      <ProgressCard title="Progress" progress={0.3} />
+      <GaugeCard title="Progress" progress={0.3} />
     </Grid>
     <Grid item>
-      <ProgressCard title="Progress" progress={0.57} />
+      <GaugeCard title="Progress" progress={0.57} />
     </Grid>
     <Grid item>
-      <ProgressCard title="Progress" progress={0.89} />
+      <GaugeCard title="Progress" progress={0.89} />
     </Grid>
   </Grid>
 );
@@ -42,21 +42,17 @@ export const Default = () => (
 export const Subhead = () => (
   <Grid container spacing={2}>
     <Grid item>
-      <ProgressCard
-        title="Progress"
-        subheader="With a subheader"
-        progress={0.3}
-      />
+      <GaugeCard title="Progress" subheader="With a subheader" progress={0.3} />
     </Grid>
     <Grid item>
-      <ProgressCard
+      <GaugeCard
         title="Progress"
         subheader="With a subheader"
         progress={0.57}
       />
     </Grid>
     <Grid item>
-      <ProgressCard
+      <GaugeCard
         title="Progress"
         subheader="With a subheader"
         progress={0.89}
@@ -68,13 +64,13 @@ export const Subhead = () => (
 export const LinkInFooter = () => (
   <Grid container spacing={2}>
     <Grid item>
-      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.3} />
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.3} />
     </Grid>
     <Grid item>
-      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.57} />
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.57} />
     </Grid>
     <Grid item>
-      <ProgressCard title="Progress" deepLink={linkInfo} progress={0.89} />
+      <GaugeCard title="Progress" deepLink={linkInfo} progress={0.89} />
     </Grid>
   </Grid>
 );
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx
similarity index 75%
rename from packages/core/src/components/ProgressBars/ProgressCard.test.jsx
rename to packages/core/src/components/ProgressBars/GaugeCard.test.jsx
index 8568077a92..27ef0bb188 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx
+++ b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx
@@ -18,32 +18,30 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 
-import { ProgressCard } from './ProgressCard';
+import { GaugeCard } from './GaugeCard';
 
 const minProps = { title: 'Tingle upgrade', progress: 0.12 };
 
-describe('<ProgressCard />', () => {
+describe('<GaugeCard />', () => {
   it('renders without exploding', () => {
-    const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
     expect(getByText(/Tingle.*/)).toBeInTheDocument();
   });
 
   it('renders progress and title', () => {
-    const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
     expect(getByText(/Tingle.*/)).toBeInTheDocument();
     expect(getByText(/12%.*/)).toBeInTheDocument();
   });
 
   it('does not render deepLink', () => {
-    const { queryByText } = render(
-      wrapInTestApp(<ProgressCard {...minProps} />),
-    );
+    const { queryByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
     expect(queryByText('View more')).not.toBeInTheDocument();
   });
 
   it('handles invalid numbers', () => {
     const badProps = { title: 'Tingle upgrade', progress: 'hejjo' };
-    const { getByText } = render(wrapInTestApp(<ProgressCard {...badProps} />));
+    const { getByText } = render(wrapInTestApp(<GaugeCard {...badProps} />));
     expect(getByText(/N\/A.*/)).toBeInTheDocument();
   });
 });
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.tsx b/packages/core/src/components/ProgressBars/GaugeCard.tsx
similarity index 90%
rename from packages/core/src/components/ProgressBars/ProgressCard.tsx
rename to packages/core/src/components/ProgressBars/GaugeCard.tsx
index eef6312600..fc7055f705 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.tsx
+++ b/packages/core/src/components/ProgressBars/GaugeCard.tsx
@@ -18,7 +18,7 @@ import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { InfoCard } from '../../layout/InfoCard';
 import { BottomLinkProps } from '../../layout/BottomLink';
-import { CircleProgress } from './CircleProgress';
+import { GaugeProgress } from './GaugeProgress';
 
 type Props = {
   title: string;
@@ -36,7 +36,7 @@ const useStyles = makeStyles({
   },
 });
 
-export const ProgressCard: FC<Props> = props => {
+export const GaugeCard: FC<Props> = props => {
   const classes = useStyles(props);
   const { title, subheader, progress, deepLink, variant } = props;
 
@@ -48,7 +48,7 @@ export const ProgressCard: FC<Props> = props => {
         deepLink={deepLink}
         variant={variant}
       >
-        <CircleProgress value={progress} />
+        <GaugeProgress value={progress} />
       </InfoCard>
     </div>
   );
diff --git a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
similarity index 82%
rename from packages/core/src/components/ProgressBars/CircleProgress.test.jsx
rename to packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
index 9b9eae1bb8..778abdf12c 100644
--- a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx
+++ b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
@@ -17,32 +17,32 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import { CircleProgress, getProgressColor } from './CircleProgress';
+import { GaugeProgress, getProgressColor } from './GaugeProgress';
 
-describe('<CircleProgress />', () => {
+describe('<GaugeProgress />', () => {
   it('renders without exploding', () => {
     const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={10} fractional={false} />),
+      wrapInTestApp(<GaugeProgress value={10} fractional={false} />),
     );
     getByText('10%');
   });
   it('handles fractional prop', () => {
     const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={0.1} fractional />),
+      wrapInTestApp(<GaugeProgress value={0.1} fractional />),
     );
     getByText('10%');
   });
 
   it('handles max prop', () => {
     const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={1} max={10} fractional={false} />),
+      wrapInTestApp(<GaugeProgress value={1} max={10} fractional={false} />),
     );
     getByText('1%');
   });
 
   it('handles unit prop', () => {
     const { getByText } = render(
-      wrapInTestApp(<CircleProgress value={10} fractional={false} unit="m" />),
+      wrapInTestApp(<GaugeProgress value={10} fractional={false} unit="m" />),
     );
     getByText('10m');
   });
diff --git a/packages/core/src/components/ProgressBars/CircleProgress.tsx b/packages/core/src/components/ProgressBars/GaugeProgress.tsx
similarity index 98%
rename from packages/core/src/components/ProgressBars/CircleProgress.tsx
rename to packages/core/src/components/ProgressBars/GaugeProgress.tsx
index 79a451b14e..14776ed431 100644
--- a/packages/core/src/components/ProgressBars/CircleProgress.tsx
+++ b/packages/core/src/components/ProgressBars/GaugeProgress.tsx
@@ -77,7 +77,7 @@ export function getProgressColor(
   return palette.status.ok;
 }
 
-export const CircleProgress: FC<Props> = props => {
+export const GaugeProgress: FC<Props> = props => {
   const classes = useStyles(props);
   const theme = useTheme<BackstageTheme>();
   const { value, fractional, inverse, unit, max } = {
diff --git a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
similarity index 79%
rename from packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
rename to packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
index 6e8f4ed7fd..c4492986b6 100644
--- a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
+++ b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
@@ -15,29 +15,29 @@
  */
 
 import React from 'react';
-import { HorizontalProgress } from './HorizontalProgress';
+import { LinearGauge } from './LinearGauge';
 
 const containerStyle = { width: 300 };
 
 export default {
-  title: 'HorizontalProgress',
-  component: HorizontalProgress,
+  title: 'LinearGauge',
+  component: LinearGauge,
 };
 
 export const Default = () => (
   <div style={containerStyle}>
-    <HorizontalProgress value={0.8} />
+    <LinearGauge value={0.8} />
   </div>
 );
 
 export const MediumProgress = () => (
   <div style={containerStyle}>
-    <HorizontalProgress value={0.5} />
+    <LinearGauge value={0.5} />
   </div>
 );
 
 export const LowProgress = () => (
   <div style={containerStyle}>
-    <HorizontalProgress value={0.2} />
+    <LinearGauge value={0.2} />
   </div>
 );
diff --git a/packages/core/src/components/ProgressBars/HorizontalProgress.tsx b/packages/core/src/components/ProgressBars/LinearGauge.tsx
similarity index 92%
rename from packages/core/src/components/ProgressBars/HorizontalProgress.tsx
rename to packages/core/src/components/ProgressBars/LinearGauge.tsx
index 72bf1f34c3..73163b345f 100644
--- a/packages/core/src/components/ProgressBars/HorizontalProgress.tsx
+++ b/packages/core/src/components/ProgressBars/LinearGauge.tsx
@@ -19,7 +19,7 @@ import { Tooltip, useTheme } from '@material-ui/core';
 // @ts-ignore
 import { Line } from 'rc-progress';
 import { BackstageTheme } from '@backstage/theme';
-import { getProgressColor } from './CircleProgress';
+import { getProgressColor } from './GaugeProgress';
 
 type Props = {
   /**
@@ -28,7 +28,7 @@ type Props = {
   value: number;
 };
 
-export const HorizontalProgress: FC<Props> = ({ value }) => {
+export const LinearGauge: FC<Props> = ({ value }) => {
   const theme = useTheme<BackstageTheme>();
   if (isNaN(value)) {
     return null;
diff --git a/packages/core/src/components/ProgressBars/index.ts b/packages/core/src/components/ProgressBars/index.ts
index c74e283ae6..c7131c8831 100644
--- a/packages/core/src/components/ProgressBars/index.ts
+++ b/packages/core/src/components/ProgressBars/index.ts
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export { ProgressCard } from './ProgressCard';
-export { CircleProgress } from './CircleProgress';
-export { HorizontalProgress } from './HorizontalProgress';
+export { GaugeCard } from './GaugeCard';
+export { GaugeProgress } from './GaugeProgress';
+export { LinearGauge } from './LinearGauge';
diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx
index 0b91875546..8fd779196d 100644
--- a/packages/core/src/layout/Page/Page.stories.tsx
+++ b/packages/core/src/layout/Page/Page.stories.tsx
@@ -30,7 +30,7 @@ import {
   Table,
   StatusOK,
   TableColumn,
-  ProgressCard,
+  GaugeCard,
   TrendLine,
 } from '../../components';
 import { Box, Typography, Link, Chip, Grid } from '@material-ui/core';
@@ -120,14 +120,14 @@ const DataGrid = () => (
         direction="row"
       >
         <Grid item xs={6}>
-          <ProgressCard
+          <GaugeCard
             title="GKE Usage Score"
             subheader="This should be above 75%"
             progress={0.87}
           />
         </Grid>
         <Grid item xs={6}>
-          <ProgressCard
+          <GaugeCard
             title="Deployment Score"
             subheader="This should be above 40%"
             progress={0.58}
diff --git a/packages/core/src/layout/Sidebar/PinButton.tsx b/packages/core/src/layout/Sidebar/PinButton.tsx
deleted file mode 100644
index 8c52eeb24d..0000000000
--- a/packages/core/src/layout/Sidebar/PinButton.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { FC, useContext } from 'react';
-import { makeStyles } from '@material-ui/core';
-import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
-import { SidebarContext } from './config';
-import { BackstageTheme } from '@backstage/theme';
-import { SidebarPinStateContext } from './Page';
-
-const ARROW_BUTTON_SIZE = 20;
-const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(theme => {
-  return {
-    root: {
-      position: 'relative',
-      alignSelf: 'stretch',
-    },
-    arrowButtonWrapper: {
-      position: 'absolute',
-      right: 0,
-      width: ARROW_BUTTON_SIZE,
-      height: ARROW_BUTTON_SIZE,
-      top: -(theme.spacing(6) + ARROW_BUTTON_SIZE) / 2,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: '2px 0px 0px 2px',
-      background: theme.palette.pinSidebarButton.background,
-      color: theme.palette.pinSidebarButton.icon,
-      border: 'none',
-      outline: 'none',
-      cursor: 'pointer',
-    },
-    arrowButtonIcon: {
-      transform: ({ isPinned }) => (isPinned ? 'rotate(180deg)' : 'none'),
-    },
-  };
-});
-
-export const SidebarPinButton: FC<{}> = () => {
-  const { isOpen } = useContext(SidebarContext);
-  const { isPinned, toggleSidebarPinState } = useContext(
-    SidebarPinStateContext,
-  );
-  const classes = useStyles({ isPinned });
-
-  return (
-    <div className={classes.root}>
-      {isOpen && (
-        <button
-          className={classes.arrowButtonWrapper}
-          onClick={toggleSidebarPinState}
-        >
-          <DoubleArrowIcon
-            className={classes.arrowButtonIcon}
-            style={{ fontSize: 14 }}
-          />
-        </button>
-      )}
-    </div>
-  );
-};
diff --git a/packages/core/src/layout/Sidebar/Settings/AppSettingsList.tsx b/packages/core/src/layout/Sidebar/Settings/AppSettingsList.tsx
new file mode 100644
index 0000000000..5dad178ccd
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/AppSettingsList.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { List, ListSubheader } from '@material-ui/core';
+import { SidebarThemeToggle } from './ThemeToggle';
+import { SidebarPinButton } from './PinButton';
+
+export const AppSettingsList = () => (
+  <List dense subheader={<ListSubheader>App Settings</ListSubheader>}>
+    <SidebarThemeToggle />
+    <SidebarPinButton />
+  </List>
+);
diff --git a/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx b/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx
new file mode 100644
index 0000000000..34cf6fb837
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/AuthProviderList.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+
+type Props = {
+  providerSettings: React.ReactNode;
+};
+
+export const AuthProvidersList = ({ providerSettings }: Props) => (
+  <List subheader={<ListSubheader>Available Auth Providers</ListSubheader>}>
+    {providerSettings}
+  </List>
+);
diff --git a/packages/core/src/layout/Sidebar/Settings/FeatureFlagsItem.tsx b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsItem.tsx
new file mode 100644
index 0000000000..3e40ce69cc
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsItem.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+  FeatureFlagName,
+  useApi,
+  featureFlagsApiRef,
+} from '@backstage/core-api';
+import {
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  Tooltip,
+} from '@material-ui/core';
+import CheckIcon from '@material-ui/icons/CheckCircle';
+import { ToggleButton } from '@material-ui/lab';
+
+export type Item = {
+  name: FeatureFlagName;
+  pluginId: string;
+};
+
+type Props = {
+  featureFlag: Item;
+};
+
+export const FlagItem = ({ featureFlag }: Props) => {
+  const api = useApi(featureFlagsApiRef);
+
+  const [enabled, setEnabled] = React.useState(
+    Boolean(api.getFlags().get(featureFlag.name)),
+  );
+
+  const toggleFlag = () => {
+    const newState = api.getFlags().toggle(featureFlag.name);
+    setEnabled(Boolean(newState));
+  };
+
+  return (
+    <ListItem>
+      <ListItemText
+        primary={featureFlag.name}
+        secondary={`Registered in ${featureFlag.pluginId} plugin`}
+      />
+      <ListItemSecondaryAction>
+        <ToggleButton
+          size="small"
+          value="flag"
+          selected={enabled}
+          onChange={toggleFlag}
+        >
+          <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
+            <CheckIcon />
+          </Tooltip>
+        </ToggleButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};
diff --git a/plugins/jenkins/src/components/Layout/Layout.tsx b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
similarity index 57%
rename from plugins/jenkins/src/components/Layout/Layout.tsx
rename to packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
index c6000437a3..5687446511 100644
--- a/plugins/jenkins/src/components/Layout/Layout.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/FeatureFlagsList.tsx
@@ -13,17 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { Header, Page, pageTheme, HeaderLabel } from '@backstage/core';
 
-export const Layout: React.FC = ({ children }) => {
-  return (
-    <Page theme={pageTheme.tool}>
-      <Header title="Jenkins" subtitle="See recent builds and their status">
-        <HeaderLabel label="Owner" value="Spotify" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
-      {children}
-    </Page>
-  );
+import React from 'react';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import { FlagItem, Item } from './FeatureFlagsItem';
+
+type Props = {
+  featureFlags: Item[];
 };
+
+export const FeatureFlagsList = ({ featureFlags }: Props) => (
+  <List dense subheader={<ListSubheader>Feature Flags</ListSubheader>}>
+    {featureFlags.map(featureFlag => (
+      <FlagItem key={featureFlag.name} featureFlag={featureFlag} />
+    ))}
+  </List>
+);
diff --git a/packages/core/src/layout/Sidebar/Settings/PinButton.tsx b/packages/core/src/layout/Sidebar/Settings/PinButton.tsx
new file mode 100644
index 0000000000..2727313ede
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/PinButton.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useContext } from 'react';
+import {
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  Tooltip,
+} from '@material-ui/core';
+import LockIcon from '@material-ui/icons/Lock';
+import LockOpenIcon from '@material-ui/icons/LockOpen';
+import { ToggleButton } from '@material-ui/lab';
+import { SidebarPinStateContext } from '../Page';
+
+export const SidebarPinButton = () => {
+  const { isPinned, toggleSidebarPinState } = useContext(
+    SidebarPinStateContext,
+  );
+
+  const PinIcon = () => (
+    <Tooltip
+      placement="top"
+      arrow
+      title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}
+    >
+      {isPinned ? <LockIcon /> : <LockOpenIcon />}
+    </Tooltip>
+  );
+
+  return (
+    <ListItem>
+      <ListItemText
+        primary="Pin Sidebar"
+        secondary="Prevent the sidebar from collapsing"
+      />
+      <ListItemSecondaryAction>
+        <ToggleButton
+          size="small"
+          value="pin"
+          selected={isPinned}
+          onChange={() => {
+            toggleSidebarPinState();
+          }}
+        >
+          <PinIcon />
+        </ToggleButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};
diff --git a/packages/core/src/layout/Sidebar/Settings/ProviderSettingsItem.tsx b/packages/core/src/layout/Sidebar/Settings/ProviderSettingsItem.tsx
index 3d3d7439e1..653c64575b 100644
--- a/packages/core/src/layout/Sidebar/Settings/ProviderSettingsItem.tsx
+++ b/packages/core/src/layout/Sidebar/Settings/ProviderSettingsItem.tsx
@@ -14,31 +14,53 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
-import { OAuthApi, OpenIdConnectApi, IconComponent } from '@backstage/core-api';
-import { SidebarItem } from '../Items';
-import { IconButton, Tooltip } from '@material-ui/core';
-import StarBorder from '@material-ui/icons/StarBorder';
+import React from 'react';
+import { IconComponent, OAuthApi, OpenIdConnectApi } from '@backstage/core-api';
+import {
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  Tooltip,
+} from '@material-ui/core';
 import PowerButton from '@material-ui/icons/PowerSettingsNew';
+import { ToggleButton } from '@material-ui/lab';
 
-export const ProviderSettingsItem: FC<{
+type Props = {
   title: string;
   icon: IconComponent;
   signedIn: boolean;
   api: OAuthApi | OpenIdConnectApi;
   signInHandler: Function;
-}> = ({ title, icon, signedIn, api, signInHandler }) => {
-  return (
-    <SidebarItem key={title} text={title} icon={icon ?? StarBorder}>
-      <IconButton onClick={() => (signedIn ? api.logout() : signInHandler())}>
+};
+
+export const ProviderSettingsItem = ({
+  title,
+  icon: Icon,
+  signedIn,
+  api,
+  signInHandler,
+}: Props) => (
+  <ListItem>
+    <ListItemIcon>
+      <Icon />
+    </ListItemIcon>
+    <ListItemText primary={title} />
+    <ListItemSecondaryAction>
+      <ToggleButton
+        size="small"
+        value={title}
+        selected={signedIn}
+        onChange={() => (signedIn ? api.logout() : signInHandler())}
+      >
         <Tooltip
           placement="top"
           arrow
           title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}
         >
-          <PowerButton color={signedIn ? 'secondary' : 'primary'} />
+          <PowerButton />
         </Tooltip>
-      </IconButton>
-    </SidebarItem>
-  );
-};
+      </ToggleButton>
+    </ListItemSecondaryAction>
+  </ListItem>
+);
diff --git a/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx b/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
new file mode 100644
index 0000000000..71c4899862
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/SettingsDialog.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  makeStyles,
+  Divider,
+} from '@material-ui/core';
+import { AppSettingsList } from './AppSettingsList';
+import { AuthProvidersList } from './AuthProviderList';
+import { FeatureFlagsList } from './FeatureFlagsList';
+import { SignInAvatar } from './SignInAvatar';
+import { UserSettingsMenu } from './UserSettingsMenu';
+import { useUserProfile } from './useUserProfileInfo';
+import { useApi, featureFlagsApiRef } from '@backstage/core-api';
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: 400,
+  },
+});
+
+type Props = {
+  providerSettings?: React.ReactNode;
+};
+
+export const SettingsDialog = ({ providerSettings }: Props) => {
+  const classes = useStyles();
+  const { profile, displayName } = useUserProfile();
+  const featureFlagsApi = useApi(featureFlagsApiRef);
+  const featureFlags = featureFlagsApi.getRegisteredFlags();
+
+  return (
+    <Card className={classes.root}>
+      <CardHeader
+        avatar={<SignInAvatar size={48} />}
+        action={<UserSettingsMenu />}
+        title={displayName}
+        subheader={profile.email}
+      />
+      <CardContent>
+        <AppSettingsList />
+        {providerSettings && (
+          <>
+            <Divider />
+            <AuthProvidersList providerSettings={providerSettings} />
+          </>
+        )}
+        {featureFlags.length > 0 && (
+          <>
+            <Divider />
+            <FeatureFlagsList featureFlags={featureFlags} />
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/packages/core/src/layout/Sidebar/Settings/SignInAvatar.tsx b/packages/core/src/layout/Sidebar/Settings/SignInAvatar.tsx
new file mode 100644
index 0000000000..f0430edfcf
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/SignInAvatar.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { BackstageTheme } from '@backstage/theme';
+import { makeStyles, Avatar } from '@material-ui/core';
+import { useUserProfile } from './useUserProfileInfo';
+import { sidebarConfig } from '../config';
+
+const useStyles = makeStyles<BackstageTheme, { size: number }>({
+  avatar: {
+    width: ({ size }) => size,
+    height: ({ size }) => size,
+  },
+});
+
+type Props = { size?: number };
+
+export const SignInAvatar = ({ size }: Props) => {
+  const { iconSize } = sidebarConfig;
+  const classes = useStyles(size ? { size } : { size: iconSize });
+  const { profile, displayName } = useUserProfile();
+
+  return (
+    <Avatar src={profile.picture} className={classes.avatar}>
+      {displayName[0]}
+    </Avatar>
+  );
+};
diff --git a/packages/core/src/layout/Sidebar/Settings/ThemeToggle.tsx b/packages/core/src/layout/Sidebar/Settings/ThemeToggle.tsx
new file mode 100644
index 0000000000..a5e703089c
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/ThemeToggle.tsx
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { useObservable } from 'react-use';
+import LightIcon from '@material-ui/icons/WbSunny';
+import DarkIcon from '@material-ui/icons/Brightness2';
+import AutoIcon from '@material-ui/icons/BrightnessAuto';
+import { appThemeApiRef, useApi } from '@backstage/core-api';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import {
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  Tooltip,
+} from '@material-ui/core';
+
+export const SidebarThemeToggle = () => {
+  const appThemeApi = useApi(appThemeApiRef);
+  const themeId = useObservable(
+    appThemeApi.activeThemeId$(),
+    appThemeApi.getActiveThemeId(),
+  );
+
+  const themeIds = appThemeApi.getInstalledThemes();
+  // TODO(marcuseide): can these be put on the theme itself?
+  const themeIcons = {
+    dark: <DarkIcon />,
+    light: <LightIcon />,
+  };
+
+  const handleSetTheme = (
+    _event: React.MouseEvent<HTMLElement>,
+    newThemeId: string | undefined,
+  ) => {
+    if (themeIds.some(t => t.id === newThemeId)) {
+      appThemeApi.setActiveThemeId(newThemeId);
+    } else {
+      appThemeApi.setActiveThemeId(undefined);
+    }
+  };
+
+  return (
+    <ListItem>
+      <ListItemText primary="Theme" secondary="Change the theme mode" />
+      <ListItemSecondaryAction>
+        <ToggleButtonGroup
+          exclusive
+          size="small"
+          value={themeId ?? 'auto'}
+          onChange={handleSetTheme}
+        >
+          {themeIds.map(theme => (
+            <ToggleButton key={theme.id} value={theme.variant}>
+              <Tooltip
+                placement="top"
+                arrow
+                title={`Select ${theme.variant} theme`}
+              >
+                {themeIcons[theme.variant]}
+              </Tooltip>
+            </ToggleButton>
+          ))}
+          <ToggleButton value="auto">
+            <Tooltip placement="top" arrow title="Select auto theme">
+              <AutoIcon />
+            </Tooltip>
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};
diff --git a/packages/core/src/layout/Sidebar/Settings/UserProfile.tsx b/packages/core/src/layout/Sidebar/Settings/UserProfile.tsx
deleted file mode 100644
index 3b854801c9..0000000000
--- a/packages/core/src/layout/Sidebar/Settings/UserProfile.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { FC, useRef } from 'react';
-import { makeStyles, Avatar, Divider } from '@material-ui/core';
-import { useApi, identityApiRef } from '@backstage/core-api';
-import { SidebarItem } from '../Items';
-import ExpandLess from '@material-ui/icons/ExpandLess';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-
-const useStyles = makeStyles({
-  avatar: {
-    width: 24,
-    height: 24,
-  },
-});
-
-export const UserProfile: FC<{ open: boolean; setOpen: Function }> = ({
-  open,
-  setOpen,
-}) => {
-  const ref = useRef<Element>(); // for scrolling down when collapse item opens
-  const classes = useStyles();
-  const identityApi = useApi(identityApiRef);
-
-  const handleClick = () => {
-    setOpen(!open);
-    setTimeout(() => ref.current?.scrollIntoView({ behavior: 'smooth' }), 300);
-  };
-
-  const userId = identityApi.getUserId();
-  const profile = identityApi.getProfile();
-  const displayName = profile.displayName ?? userId;
-  const SignInAvatar = () => (
-    <Avatar src={profile.picture} className={classes.avatar}>
-      {displayName[0]}
-    </Avatar>
-  );
-
-  return (
-    <>
-      <Divider innerRef={ref} />
-      <SidebarItem text={displayName} onClick={handleClick} icon={SignInAvatar}>
-        {open ? <ExpandMore /> : <ExpandLess />}
-      </SidebarItem>
-    </>
-  );
-};
diff --git a/packages/core/src/layout/Sidebar/Settings/UserSettings.tsx b/packages/core/src/layout/Sidebar/Settings/UserSettings.tsx
new file mode 100644
index 0000000000..85dbefff9b
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/UserSettings.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useContext } from 'react';
+import { Popover } from '@material-ui/core';
+import { SignInAvatar } from './SignInAvatar';
+import { SettingsDialog } from './SettingsDialog';
+import { SidebarItem } from '../Items';
+import { useUserProfile } from './useUserProfileInfo';
+import { SidebarContext } from '../config';
+
+type Props = {
+  providerSettings?: React.ReactNode;
+};
+
+export const SidebarUserSettings = ({ providerSettings }: Props) => {
+  const { isOpen: sidebarOpen } = useContext(SidebarContext);
+  const { displayName } = useUserProfile();
+  const [open, setOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | undefined>(
+    undefined,
+  );
+
+  const handleOpen = (event?: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event?.currentTarget ?? undefined);
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(undefined);
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (!sidebarOpen && open) setOpen(false);
+  }, [open, sidebarOpen]);
+
+  const SidebarAvatar = () => <SignInAvatar />;
+
+  return (
+    <>
+      <SidebarItem
+        text={displayName}
+        onClick={handleOpen}
+        icon={SidebarAvatar}
+      />
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <SettingsDialog providerSettings={providerSettings} />
+      </Popover>
+    </>
+  );
+};
diff --git a/packages/core/src/layout/Sidebar/Settings/UserSettingsMenu.tsx b/packages/core/src/layout/Sidebar/Settings/UserSettingsMenu.tsx
new file mode 100644
index 0000000000..9ac287c57e
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/UserSettingsMenu.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { identityApiRef, useApi } from '@backstage/core-api';
+import { IconButton, ListItemIcon, Menu, MenuItem } from '@material-ui/core';
+import SignOutIcon from '@material-ui/icons/MeetingRoom';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+export const UserSettingsMenu = () => {
+  const identityApi = useApi(identityApiRef);
+  const [open, setOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState<undefined | HTMLElement>(
+    undefined,
+  );
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(undefined);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <IconButton onClick={handleOpen}>
+        <MoreVertIcon />
+      </IconButton>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        <MenuItem onClick={() => identityApi.logout()}>
+          <ListItemIcon>
+            <SignOutIcon />
+          </ListItemIcon>
+          Sign Out
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
diff --git a/packages/core/src/layout/Sidebar/Settings/index.ts b/packages/core/src/layout/Sidebar/Settings/index.ts
index 6557ace53a..7abf061620 100644
--- a/packages/core/src/layout/Sidebar/Settings/index.ts
+++ b/packages/core/src/layout/Sidebar/Settings/index.ts
@@ -17,4 +17,4 @@
 export { ProviderSettingsItem } from './ProviderSettingsItem';
 export { OAuthProviderSettings } from './OAuthProviderSettings';
 export { OIDCProviderSettings } from './OIDCProviderSettings';
-export { UserProfile } from './UserProfile';
+export { SidebarUserSettings } from './UserSettings';
diff --git a/packages/core/src/layout/Sidebar/Settings/useUserProfileInfo.ts b/packages/core/src/layout/Sidebar/Settings/useUserProfileInfo.ts
new file mode 100644
index 0000000000..60dae294a5
--- /dev/null
+++ b/packages/core/src/layout/Sidebar/Settings/useUserProfileInfo.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useApi, identityApiRef } from '@backstage/core-api';
+
+export const useUserProfile = () => {
+  const identityApi = useApi(identityApiRef);
+  const userId = identityApi.getUserId();
+  const profile = identityApi.getProfile();
+  const displayName = profile.displayName ?? userId;
+
+  return { profile, displayName };
+};
diff --git a/packages/core/src/layout/Sidebar/SidebarThemeToggle.tsx b/packages/core/src/layout/Sidebar/SidebarThemeToggle.tsx
deleted file mode 100644
index 32bc9d9632..0000000000
--- a/packages/core/src/layout/Sidebar/SidebarThemeToggle.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { FC } from 'react';
-import { useObservable } from 'react-use';
-import LightIcon from '@material-ui/icons/WbSunny';
-import DarkIcon from '@material-ui/icons/Brightness2';
-import AutoIcon from '@material-ui/icons/BrightnessAuto';
-import { appThemeApiRef, useApi } from '@backstage/core-api';
-import { SidebarItem } from './Items';
-
-export const SidebarThemeToggle: FC<{}> = () => {
-  const appThemeApi = useApi(appThemeApiRef);
-  const themeId = useObservable(
-    appThemeApi.activeThemeId$(),
-    appThemeApi.getActiveThemeId(),
-  );
-
-  let text = 'Auto';
-  let icon = AutoIcon;
-  switch (themeId) {
-    case 'dark':
-      text = 'Dark mode';
-      icon = DarkIcon;
-      break;
-    case 'light':
-      text = 'Light mode';
-      icon = LightIcon;
-      break;
-    default:
-      break;
-  }
-
-  const handleToggle = () => {
-    if (!themeId) {
-      appThemeApi.setActiveThemeId('light');
-    } else if (themeId === 'light') {
-      appThemeApi.setActiveThemeId('dark');
-    } else {
-      appThemeApi.setActiveThemeId(undefined);
-    }
-  };
-
-  return <SidebarItem text={text} onClick={handleToggle} icon={icon} />;
-};
diff --git a/packages/core/src/layout/Sidebar/UserSettings.tsx b/packages/core/src/layout/Sidebar/UserSettings.tsx
deleted file mode 100644
index f586f6d077..0000000000
--- a/packages/core/src/layout/Sidebar/UserSettings.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { identityApiRef, useApi } from '@backstage/core-api';
-import Collapse from '@material-ui/core/Collapse';
-import SignOutIcon from '@material-ui/icons/MeetingRoom';
-import React, { useContext, useEffect } from 'react';
-import { SidebarContext } from './config';
-import { SidebarItem } from './Items';
-import { UserProfile as SidebarUserProfile } from './Settings';
-
-type SidebarUserSettingsProps = { providerSettings?: React.ReactNode };
-
-export function SidebarUserSettings({
-  providerSettings,
-}: SidebarUserSettingsProps) {
-  const { isOpen: sidebarOpen } = useContext(SidebarContext);
-  const [open, setOpen] = React.useState(false);
-  const identityApi = useApi(identityApiRef);
-
-  // Close the provider list when sidebar collapse
-  useEffect(() => {
-    if (!sidebarOpen && open) setOpen(false);
-  }, [open, sidebarOpen]);
-
-  return (
-    <>
-      <SidebarUserProfile open={open} setOpen={setOpen} />
-      <Collapse in={open} timeout="auto">
-        {providerSettings}
-
-        <SidebarItem
-          icon={SignOutIcon}
-          text="Sign Out"
-          onClick={() => identityApi.logout()}
-        />
-      </Collapse>
-    </>
-  );
-}
diff --git a/packages/core/src/layout/Sidebar/index.ts b/packages/core/src/layout/Sidebar/index.ts
index fdca7e4eea..a644c06e14 100644
--- a/packages/core/src/layout/Sidebar/index.ts
+++ b/packages/core/src/layout/Sidebar/index.ts
@@ -25,14 +25,11 @@ export {
   SidebarSpacer,
 } from './Items';
 export { IntroCard, SidebarIntro } from './Intro';
-export { SidebarPinButton } from './PinButton';
 export {
   SIDEBAR_INTRO_LOCAL_STORAGE,
   SidebarContext,
   sidebarConfig,
 } from './config';
 export type { SidebarContextType } from './config';
-export { SidebarThemeToggle } from './SidebarThemeToggle';
-export { SidebarUserSettings } from './UserSettings';
 export { DefaultProviderSettings } from './DefaultProviderSettings';
 export * from './Settings';
diff --git a/packages/create-app/templates/default-app/app-config.yaml.hbs b/packages/create-app/templates/default-app/app-config.yaml.hbs
index 7b86b4f50e..ecac0613d9 100644
--- a/packages/create-app/templates/default-app/app-config.yaml.hbs
+++ b/packages/create-app/templates/default-app/app-config.yaml.hbs
@@ -15,6 +15,7 @@ backend:
     connection: ':memory:'
   {{/if}}
   {{#if dbTypePG}}
+  # config options: https://node-postgres.com/api/client
   database:
     client: pg
     connection:
@@ -30,6 +31,11 @@ backend:
       password:
         $secret:
           env: POSTGRES_PASSWORD
+      # https://node-postgres.com/features/ssl
+      #ssl: require # see https://www.postgresql.org/docs/current/libpq-ssl.html Table 33.1. SSL Mode Descriptions (e.g. require)
+        #ca: # if you have a CA file and want to verify it you can uncomment this section
+        #  $secret:
+        #    file: <file-path>/ca/server.crt
   {{/if}}
 
 proxy:
@@ -47,7 +53,33 @@ lighthouse:
 auth:
   providers: {}
 
+scaffolder:
+  github:
+    token:
+      $secret:
+        env: GITHUB_ACCESS_TOKEN
+    visibility: public # or 'internal' or 'private'
+
 catalog:
+  rules:
+    - allow: [Component, API, Group, Template, Location]
+  processors:
+    github:
+      privateToken:
+        $secret:
+          env: GITHUB_PRIVATE_TOKEN
+    githubApi:
+      providers:
+        - target: https://github.com
+          token:
+            $secret:
+              env: GITHUB_PRIVATE_TOKEN
+        # Example for how to add your GitHub Enterprise instance:
+        # - target: https://ghe.example.net
+        #   apiBaseUrl: https://ghe.example.net/api/v3
+        #   token:
+        #     $secret:
+        #       env: GHE_PRIVATE_TOKEN
   locations:
     # Backstage example components
     - type: github
diff --git a/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png b/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png
index 3d56edbb0d..4660f988c1 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png and b/packages/create-app/templates/default-app/packages/app/public/android-chrome-192x192.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png b/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png
index 0977175f6f..57c05cfc9a 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png and b/packages/create-app/templates/default-app/packages/app/public/apple-touch-icon.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png b/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png
index a455ffac7b..58cf61a35e 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png and b/packages/create-app/templates/default-app/packages/app/public/favicon-16x16.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png b/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png
index e2707f2d1e..c0915ece75 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png and b/packages/create-app/templates/default-app/packages/app/public/favicon-32x32.png differ
diff --git a/packages/create-app/templates/default-app/packages/app/public/favicon.ico b/packages/create-app/templates/default-app/packages/app/public/favicon.ico
index 5b582704a1..5e45e5dfbd 100644
Binary files a/packages/create-app/templates/default-app/packages/app/public/favicon.ico and b/packages/create-app/templates/default-app/packages/app/public/favicon.ico differ
diff --git a/packages/create-app/templates/default-app/packages/app/src/LogoFull.tsx b/packages/create-app/templates/default-app/packages/app/src/LogoFull.tsx
new file mode 100644
index 0000000000..d2b1bf1080
--- /dev/null
+++ b/packages/create-app/templates/default-app/packages/app/src/LogoFull.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svg: {
+    width: 'auto',
+    height: 30,
+  },
+  path: {
+    fill: '#7df3e1',
+  },
+});
+const LogoFull: FC<{}> = () => {
+  const classes = useStyles();
+
+  return (
+    <svg
+      className={classes.svg}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 2079.95 456.05"
+    >
+      <path
+        className={classes.path}
+        d="M302.9,180a80.62,80.62,0,0,0,13.44-10.37c.8-.77,1.55-1.54,2.31-2.31a81.89,81.89,0,0,0,7.92-9.37,62.37,62.37,0,0,0,6.27-10.77,48.6,48.6,0,0,0,4.36-16.4c1.49-19.39-10-38.67-35.62-54.22L198.42,14,78.16,129.22l-78.29,75,108.6,65.9a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.8,66.42-25.69,19.16-18.36,25.52-42.12,13.7-61.87a49.69,49.69,0,0,0-6.8-8.87,89.78,89.78,0,0,0,19.28,2.15H259a85.09,85.09,0,0,0,31-5.79A80.88,80.88,0,0,0,302.9,180Zm-100.59,59.8c-19.32,18.51-50.4,21.24-75.7,5.9l-75.13-45.6,67.44-64.65,76.42,46.39C222.88,198.57,221.36,221.6,202.31,239.84Zm8.94-82.21L140.6,114.74,205,53l69.37,42.11c25.94,15.73,29.31,37.05,10.55,55A60.71,60.71,0,0,1,211.25,157.63Zm29.86,190c-19.57,18.75-46.17,29.08-74.88,29.08a123.84,123.84,0,0,1-64.11-18.19L-.13,296.51v24.67l108.6,65.91a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A87.85,87.85,0,0,1,241.11,347.67Zm0-39c-19.57,18.76-46.17,29.09-74.88,29.09a123.84,123.84,0,0,1-64.11-18.19L-.13,257.52V282.2l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.68,12.88-12.35,20-27.13,19.68-41.5v-1.79A86.86,86.86,0,0,1,241.11,308.68Zm0-39c-19.57,18.76-46.17,29.09-74.88,29.09a123.84,123.84,0,0,1-64.11-18.19L-.13,218.54v24.68l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.69,12.88-12.34,20-27.12,19.68-41.49v-1.82A87.14,87.14,0,0,1,241.11,269.7Zm83.69,25.74a94.16,94.16,0,0,1-60.19,25.86h0V348a81.6,81.6,0,0,0,51.73-22.37c14-13.38,21.15-28.11,21-42.64v-2.2A95.14,95.14,0,0,1,324.8,295.44Zm-83.69,91.21c-19.57,18.75-46.17,29.09-74.88,29.09a123.76,123.76,0,0,1-64.11-18.2L-.13,335.49v24.67l108.6,65.91a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A87.35,87.35,0,0,1,241.11,386.65Zm85.75-210.21c-.68.69-1.35,1.38-2.06,2.05a99.19,99.19,0,0,1-22.23,15.69,94.53,94.53,0,0,1-26.24,8.71,97.84,97.84,0,0,1-14.16,1.57c.5,1.61.9,3.25,1.25,4.9a52.7,52.7,0,0,1,1.13,12V231h.05A84.48,84.48,0,0,0,290,225.47a80.83,80.83,0,0,0,26.38-16.82c.81-.77,1.51-1.56,2.27-2.34a82,82,0,0,0,7.92-9.38,62.85,62.85,0,0,0,6.29-10.78,48.5,48.5,0,0,0,4.32-16.44c.09-1.23.2-2.47.19-3.7v-2c-.72,1-1.48,2.06-2.26,3.09A98,98,0,0,1,326.86,176.44Zm0,77.92c-.68.7-1.3,1.41-2,2.1a94.09,94.09,0,0,1-60.19,25.85h0V309h0a81.65,81.65,0,0,0,51.73-22.37,73.51,73.51,0,0,0,16.48-22.49,48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.48.19-3.71v-2.2c-.74,1.08-1.47,2.16-2.27,3.22A95.81,95.81,0,0,1,326.82,254.36Zm0-39c-.68.7-1.3,1.41-2,2.1a92.22,92.22,0,0,1-10.62,8.65,93.53,93.53,0,0,1-11.63,7,95.63,95.63,0,0,1-37.94,10.18h-.05l0,26.67h0a81.63,81.63,0,0,0,51.73-22.37c.81-.77,1.51-1.56,2.27-2.34a82,82,0,0,0,7.92-9.38,63.16,63.16,0,0,0,6.29-10.77,48.55,48.55,0,0,0,4.32-16.45c.09-1.23.2-2.47.19-3.7v-2.2c-.74,1.08-1.47,2.16-2.27,3.22A98.19,98.19,0,0,1,326.82,215.38Zm241-88.84q7.94,0,17.09.17t18.12,1a139.3,139.3,0,0,1,16.74,2.57,42.78,42.78,0,0,1,13.3,5.14,64.27,64.27,0,0,1,20.54,19.89Q662,168,662,186.54q0,19.54-9.49,33.78t-27.1,21.09v.68q22.78,4.82,34.87,20.58t12.08,38.4a72.62,72.62,0,0,1-4.83,26.06,65.29,65.29,0,0,1-14.33,22.46,71.57,71.57,0,0,1-23.47,15.78q-14,6-32.28,6H478.38V126.54Zm9,105.27q28,0,40.21-9.78t12.26-29.31q0-13-4.14-20.58a29.47,29.47,0,0,0-11.4-11.66A45,45,0,0,0,597,155.17a161.2,161.2,0,0,0-20.19-1.2h-65.6v77.84Zm16.57,112.13q21.74,0,34-11.66T639.59,300q0-12-4.48-19.88a34.85,34.85,0,0,0-11.91-12.52,50.14,50.14,0,0,0-17.09-6.52,105,105,0,0,0-20-1.88H511.17v84.7Zm274.79,26.74q-7.61,4.45-21.06,4.46-11.4,0-18.12-6.34t-6.74-20.75a70.17,70.17,0,0,1-28.13,20.75,97.87,97.87,0,0,1-57.65,3.6,53.51,53.51,0,0,1-18.82-8.58A41.19,41.19,0,0,1,705,348.56q-4.65-9.42-4.66-22.8,0-15.09,5.18-24.69a44.92,44.92,0,0,1,13.64-15.6,62.63,62.63,0,0,1,19.33-9.09q10.88-3.08,22.27-5.14,12.08-2.4,23-3.6a128,128,0,0,0,19.16-3.43c5.53-1.48,9.89-3.65,13.12-6.51s4.83-7,4.83-12.52q0-9.6-3.62-15.43a24.94,24.94,0,0,0-9.32-8.92,38.38,38.38,0,0,0-12.78-4.11,96.54,96.54,0,0,0-14-1q-18.63,0-31.07,7T736.6,249.29H707.26q.69-16.46,6.9-27.77a52.21,52.21,0,0,1,16.57-18.35,70,70,0,0,1,23.65-10.11A125.51,125.51,0,0,1,782.86,190a168.63,168.63,0,0,1,24,1.72,63.26,63.26,0,0,1,21.58,7A41.23,41.23,0,0,1,844,213.59q5.87,9.57,5.87,25v91q0,10.26,1.21,15.05t8.11,4.79a35.57,35.57,0,0,0,9-1.37Zm-47.64-90.87c-3.69,2.74-8.52,4.72-14.5,6s-12.26,2.27-18.82,3.07-13.17,1.71-19.85,2.73a73.7,73.7,0,0,0-18,4.94,32.62,32.62,0,0,0-12.94,9.73q-5,6.32-5,17.23a23.31,23.31,0,0,0,2.94,12.11,24.11,24.11,0,0,0,7.59,8,32,32,0,0,0,10.88,4.44,60.94,60.94,0,0,0,13.11,1.36q14.5,0,24.86-3.92a52.49,52.49,0,0,0,16.91-9.9,39.1,39.1,0,0,0,9.67-13,32.53,32.53,0,0,0,3.11-13.14ZM1002.07,225q-11.05-9.25-29.69-9.26-15.89,0-26.58,5.83A47.29,47.29,0,0,0,928.71,237a64.66,64.66,0,0,0-9.15,22.12A119.83,119.83,0,0,0,916.8,285a98.22,98.22,0,0,0,2.93,24,64.18,64.18,0,0,0,9.15,20.74,46.2,46.2,0,0,0,16.23,14.58q10,5.49,23.82,5.48,21.75,0,34-11.31t15-31.89h30q-4.83,32.91-24.68,50.75t-54,17.83q-20.37,0-36.07-6.52A69.86,69.86,0,0,1,907,350.11a79.92,79.92,0,0,1-15.88-28.63A118.64,118.64,0,0,1,885.73,285a129.41,129.41,0,0,1,5.18-37.21,85.63,85.63,0,0,1,15.71-30.17A73.46,73.46,0,0,1,933,197.35Q948.91,190,970,190a108.54,108.54,0,0,1,28.48,3.6,69.59,69.59,0,0,1,23.48,11.15,61,61,0,0,1,16.74,19q6.55,11.49,8.29,27.26h-30.38Q1013.11,234.21,1002.07,225Zm109.77-98.41v145l81.47-77.49h39.36l-70.77,64.46,75.95,112.82h-37.29l-61.1-92.59-27.62,25.38v67.21H1082.5V126.54Zm170.54,205.22a31.07,31.07,0,0,0,10.87,10.63,49,49,0,0,0,15.19,5.66,87.06,87.06,0,0,0,17.44,1.71,109.18,109.18,0,0,0,14.5-1,53.22,53.22,0,0,0,14-3.78,26.27,26.27,0,0,0,10.53-8q4.14-5.32,4.14-13.55,0-11.31-8.63-17.14a73.69,73.69,0,0,0-21.58-9.43q-12.94-3.6-28.13-6.52a146,146,0,0,1-28.14-8.23A58.16,58.16,0,0,1,1261,267.13q-8.64-9.6-8.63-26.75,0-13.38,6-23a49.26,49.26,0,0,1,15.53-15.61,71.76,71.76,0,0,1,21.4-8.91A99.41,99.41,0,0,1,1319,190a141.31,141.31,0,0,1,28,2.58,64.85,64.85,0,0,1,22.62,8.91,46.16,46.16,0,0,1,15.7,17.15q5.87,10.8,6.91,26.91h-29.35q-.69-8.57-4.48-14.23a29.36,29.36,0,0,0-9.67-9.08,44.16,44.16,0,0,0-12.94-5,67.68,67.68,0,0,0-14.33-1.54,87.29,87.29,0,0,0-13.29,1,45.28,45.28,0,0,0-12.26,3.6,24.49,24.49,0,0,0-9,6.86q-3.46,4.29-3.46,11.14a16.32,16.32,0,0,0,5.36,12.52,42.75,42.75,0,0,0,13.63,8.23,120,120,0,0,0,18.64,5.48q10.37,2.24,20.72,4.63,11,2.4,21.57,5.83A70.74,70.74,0,0,1,1382,284.1a44.55,44.55,0,0,1,13.12,14.23q5,8.58,5,21.26,0,16.13-6.73,26.75a52.5,52.5,0,0,1-17.61,17.14,73.89,73.89,0,0,1-24.51,9.09,146.3,146.3,0,0,1-27.1,2.57,126.24,126.24,0,0,1-28.31-3.09A69.56,69.56,0,0,1,1272,361.94a51.74,51.74,0,0,1-16.57-18.52q-6.21-11.49-6.9-27.95h29.34A32.65,32.65,0,0,0,1282.38,331.76Zm226.46-137.67v25.72h-35.56V329.88a31.37,31.37,0,0,0,.87,8.23,8.42,8.42,0,0,0,3.28,4.8,14.61,14.61,0,0,0,6.73,2.23,99.19,99.19,0,0,0,11.22.51h13.46v25.72H1486.4a105.8,105.8,0,0,1-19.5-1.55,28.65,28.65,0,0,1-13.12-5.65,24.09,24.09,0,0,1-7.42-11.66q-2.43-7.54-2.42-19.89V219.81h-30.38V194.09h30.38V140.94h29.34v53.15ZM1699.4,370.68q-7.61,4.45-21.06,4.46-11.4,0-18.12-6.34t-6.74-20.75a70.17,70.17,0,0,1-28.13,20.75,97.87,97.87,0,0,1-57.65,3.6,53.51,53.51,0,0,1-18.82-8.58,41.19,41.19,0,0,1-12.6-15.26q-4.65-9.42-4.66-22.8,0-15.09,5.18-24.69a44.92,44.92,0,0,1,13.64-15.6,62.63,62.63,0,0,1,19.33-9.09q10.88-3.08,22.27-5.14,12.07-2.4,23-3.6a128,128,0,0,0,19.16-3.43c5.53-1.48,9.89-3.65,13.12-6.51s4.83-7,4.83-12.52q0-9.6-3.62-15.43a24.94,24.94,0,0,0-9.32-8.92,38.38,38.38,0,0,0-12.78-4.11,96.54,96.54,0,0,0-14-1q-18.63,0-31.07,7t-13.46,26.57h-29.34q.67-16.46,6.9-27.77A52.21,52.21,0,0,1,1562,203.17a70,70,0,0,1,23.65-10.11,125.51,125.51,0,0,1,28.48-3.09,168.63,168.63,0,0,1,24,1.72,63.26,63.26,0,0,1,21.58,7,41.23,41.23,0,0,1,15.53,14.89q5.87,9.57,5.87,25v91q0,10.26,1.21,15.05t8.11,4.79a35.57,35.57,0,0,0,9-1.37Zm-47.64-90.87c-3.69,2.74-8.52,4.72-14.5,6s-12.26,2.27-18.82,3.07-13.17,1.71-19.85,2.73a73.7,73.7,0,0,0-17.95,4.94,32.62,32.62,0,0,0-12.94,9.73q-5,6.32-5,17.23a23.31,23.31,0,0,0,2.94,12.11,24.11,24.11,0,0,0,7.59,8,32,32,0,0,0,10.88,4.44,60.94,60.94,0,0,0,13.11,1.36q14.51,0,24.86-3.92a52.49,52.49,0,0,0,16.91-9.9,39.1,39.1,0,0,0,9.67-13,32.53,32.53,0,0,0,3.11-13.14Zm208.85,141.62q-20,21.6-62.83,21.6a122.11,122.11,0,0,1-25.37-2.74,78,78,0,0,1-23.48-8.92,54.41,54.41,0,0,1-17.43-16.11q-6.91-10-7.6-24.35h29.35a21.47,21.47,0,0,0,5,13.38,36.67,36.67,0,0,0,11.4,8.91,55.52,55.52,0,0,0,14.67,5,79.51,79.51,0,0,0,15.19,1.55q14.49,0,24.51-5A46,46,0,0,0,1840.59,401a56.53,56.53,0,0,0,9.49-21.09,117.46,117.46,0,0,0,2.94-27.09V341.19h-.7q-7.59,16.46-23,24.18a71.8,71.8,0,0,1-32.63,7.71q-20,0-34.86-7.2A72.88,72.88,0,0,1,1737,346.51a82.13,82.13,0,0,1-15-28.46,116.62,116.62,0,0,1-5-34.47,133.92,133.92,0,0,1,4.14-32.4A88.17,88.17,0,0,1,1735,221a75.49,75.49,0,0,1,25.55-22.29q15.87-8.75,39-8.75a66.21,66.21,0,0,1,31.07,7.38,52.13,52.13,0,0,1,22.09,22.11h.35V194.09h27.61V356.28Q1880.63,399.83,1860.61,421.43Zm-37.46-79.72a47.94,47.94,0,0,0,16.4-15.78,71.89,71.89,0,0,0,9.15-22.11,106.77,106.77,0,0,0,2.93-24.69,96.71,96.71,0,0,0-2.76-23,64,64,0,0,0-8.8-20.4,45.76,45.76,0,0,0-15.71-14.57q-9.66-5.49-23.47-5.49-14.16,0-24.17,5.32a46.77,46.77,0,0,0-16.4,14.23,60.14,60.14,0,0,0-9.32,20.57,99.69,99.69,0,0,0-2.93,24.35,120.63,120.63,0,0,0,2.42,24,67.5,67.5,0,0,0,8.28,21.77,46.37,46.37,0,0,0,15.54,15.78q9.66,6,24.16,6T1823.15,341.71Zm228,18.34q-20,15.09-50.41,15.09-21.4,0-37.11-6.86a73.16,73.16,0,0,1-26.41-19.2,81.52,81.52,0,0,1-16-29.49,141.12,141.12,0,0,1-6-37.38,106.1,106.1,0,0,1,6.21-37A88.56,88.56,0,0,1,1938.8,216a79.09,79.09,0,0,1,26.58-19.2A81.66,81.66,0,0,1,1999,190q23.82,0,39.53,9.78a78,78,0,0,1,25.2,24.86,98.18,98.18,0,0,1,13.12,32.91,140.6,140.6,0,0,1,2.93,34h-133.6a70,70,0,0,0,2.76,22.12,49.9,49.9,0,0,0,10,18.51A49.1,49.1,0,0,0,1976.6,345q10.7,4.82,25.2,4.8,18.65,0,30.55-8.57t15.71-26.06h29Q2071.18,345,2051.17,360.05Zm-7.08-113.84a50,50,0,0,0-10.7-16,53.1,53.1,0,0,0-56.62-10.63,47.48,47.48,0,0,0-15.71,10.81,51.69,51.69,0,0,0-10.35,15.94,60.18,60.18,0,0,0-4.49,19.37h102.53A59.47,59.47,0,0,0,2044.09,246.21ZM302.9,180a80.62,80.62,0,0,0,13.44-10.37c.8-.77,1.55-1.54,2.31-2.31a81.89,81.89,0,0,0,7.92-9.37,62.37,62.37,0,0,0,6.27-10.77,48.6,48.6,0,0,0,4.36-16.4c1.49-19.39-10-38.67-35.62-54.22L198.42,14,78.16,129.22l-78.29,75,108.6,65.9a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.8,66.42-25.69,19.16-18.36,25.52-42.12,13.7-61.87a49.69,49.69,0,0,0-6.8-8.87,89.78,89.78,0,0,0,19.28,2.15H259a85.09,85.09,0,0,0,31-5.79A80.88,80.88,0,0,0,302.9,180Zm-100.59,59.8c-19.32,18.51-50.4,21.24-75.7,5.9l-75.13-45.6,67.44-64.65,76.42,46.39C222.88,198.57,221.36,221.6,202.31,239.84Zm8.94-82.21L140.6,114.74,205,53l69.37,42.11c25.94,15.73,29.31,37.05,10.55,55A60.71,60.71,0,0,1,211.25,157.63Zm29.86,190c-19.57,18.75-46.17,29.08-74.88,29.08a123.84,123.84,0,0,1-64.11-18.19L-.13,296.51v24.67l108.6,65.91a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A87.85,87.85,0,0,1,241.11,347.67Zm0-39c-19.57,18.76-46.17,29.09-74.88,29.09a123.84,123.84,0,0,1-64.11-18.19L-.13,257.52V282.2l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.68,12.88-12.35,20-27.13,19.68-41.5v-1.79A86.86,86.86,0,0,1,241.11,308.68Zm0-39c-19.57,18.76-46.17,29.09-74.88,29.09a123.84,123.84,0,0,1-64.11-18.19L-.13,218.54v24.68l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.69,12.88-12.34,20-27.12,19.68-41.49v-1.82A87.14,87.14,0,0,1,241.11,269.7Zm83.69,25.74a94.16,94.16,0,0,1-60.19,25.86h0V348a81.6,81.6,0,0,0,51.73-22.37c14-13.38,21.15-28.11,21-42.64v-2.2A95.14,95.14,0,0,1,324.8,295.44Zm-83.69,91.21c-19.57,18.75-46.17,29.09-74.88,29.09a123.76,123.76,0,0,1-64.11-18.2L-.13,335.49v24.67l108.6,65.91a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A87.35,87.35,0,0,1,241.11,386.65Zm85.75-210.21c-.68.69-1.35,1.38-2.06,2.05a99.19,99.19,0,0,1-22.23,15.69,94.53,94.53,0,0,1-26.24,8.71,97.84,97.84,0,0,1-14.16,1.57c.5,1.61.9,3.25,1.25,4.9a52.7,52.7,0,0,1,1.13,12V231h.05A84.48,84.48,0,0,0,290,225.47a80.83,80.83,0,0,0,26.38-16.82c.81-.77,1.51-1.56,2.27-2.34a82,82,0,0,0,7.92-9.38,62.85,62.85,0,0,0,6.29-10.78,48.5,48.5,0,0,0,4.32-16.44c.09-1.23.2-2.47.19-3.7v-2c-.72,1-1.48,2.06-2.26,3.09A98,98,0,0,1,326.86,176.44Zm0,77.92c-.68.7-1.3,1.41-2,2.1a94.09,94.09,0,0,1-60.19,25.85h0V309h0a81.65,81.65,0,0,0,51.73-22.37,73.51,73.51,0,0,0,16.48-22.49,48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.48.19-3.71v-2.2c-.74,1.08-1.47,2.16-2.27,3.22A95.81,95.81,0,0,1,326.82,254.36Zm0-39c-.68.7-1.3,1.41-2,2.1a92.22,92.22,0,0,1-10.62,8.65,93.53,93.53,0,0,1-11.63,7,95.63,95.63,0,0,1-37.94,10.18h-.05l0,26.67h0a81.63,81.63,0,0,0,51.73-22.37c.81-.77,1.51-1.56,2.27-2.34a82,82,0,0,0,7.92-9.38,63.16,63.16,0,0,0,6.29-10.77,48.55,48.55,0,0,0,4.32-16.45c.09-1.23.2-2.47.19-3.7v-2.2c-.74,1.08-1.47,2.16-2.27,3.22A98.19,98.19,0,0,1,326.82,215.38Z"
+      />
+    </svg>
+  );
+};
+
+export default LogoFull;
diff --git a/packages/create-app/templates/default-app/packages/app/src/LogoIcon.tsx b/packages/create-app/templates/default-app/packages/app/src/LogoIcon.tsx
new file mode 100644
index 0000000000..d70be3dd32
--- /dev/null
+++ b/packages/create-app/templates/default-app/packages/app/src/LogoIcon.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svg: {
+    width: 'auto',
+    height: 28,
+  },
+  path: {
+    fill: '#7df3e1',
+  },
+});
+
+const LogoIcon: FC<{}> = () => {
+  const classes = useStyles();
+
+  return (
+    <svg
+      className={classes.svg}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 337.46 428.5"
+    >
+      <path
+        className={classes.path}
+        d="M303,166.05a80.69,80.69,0,0,0,13.45-10.37c.79-.77,1.55-1.53,2.3-2.3a83.12,83.12,0,0,0,7.93-9.38A63.69,63.69,0,0,0,333,133.23a48.58,48.58,0,0,0,4.35-16.4c1.49-19.39-10-38.67-35.62-54.22L198.56,0,78.3,115.23,0,190.25l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.69,19.16-18.36,25.52-42.12,13.7-61.87a49.22,49.22,0,0,0-6.8-8.87A89.17,89.17,0,0,0,259,178.29h.15a85.08,85.08,0,0,0,31-5.79A80.88,80.88,0,0,0,303,166.05ZM202.45,225.86c-19.32,18.51-50.4,21.23-75.7,5.9L51.61,186.15l67.45-64.64,76.41,46.38C223,184.58,221.49,207.61,202.45,225.86Zm8.93-82.22-70.65-42.89L205.14,39,274.51,81.1c25.94,15.72,29.31,37,10.55,55A60.69,60.69,0,0,1,211.38,143.64Zm29.86,190c-19.57,18.75-46.17,29.09-74.88,29.09a123.73,123.73,0,0,1-64.1-18.2L0,282.52v24.67L108.6,373.1a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A87.27,87.27,0,0,1,241.24,333.68Zm0-39c-19.57,18.75-46.17,29.08-74.88,29.08a123.81,123.81,0,0,1-64.1-18.19L0,243.53v24.68l108.6,65.91a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.5v-1.78A87.27,87.27,0,0,1,241.24,294.7Zm0-39c-19.57,18.76-46.17,29.09-74.88,29.09a123.81,123.81,0,0,1-64.1-18.19L0,204.55v24.68l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.68,12.88-12.35,20-27.13,19.68-41.5v-1.82A86.09,86.09,0,0,1,241.24,255.71Zm83.7,25.74a94.15,94.15,0,0,1-60.2,25.86h0V334a81.6,81.6,0,0,0,51.74-22.37c14-13.38,21.14-28.11,21-42.64v-2.19A94.92,94.92,0,0,1,324.94,281.45Zm-83.7,91.21c-19.57,18.76-46.17,29.09-74.88,29.09a123.73,123.73,0,0,1-64.1-18.2L0,321.5v24.68l108.6,65.9a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.8,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A86.29,86.29,0,0,1,241.24,372.66ZM327,162.45c-.68.69-1.35,1.38-2.05,2.06a94.37,94.37,0,0,1-10.64,8.65,91.35,91.35,0,0,1-11.6,7,94.53,94.53,0,0,1-26.24,8.71,97.69,97.69,0,0,1-14.16,1.57c.5,1.61.9,3.25,1.25,4.9a53.27,53.27,0,0,1,1.14,12V217h.05a84.41,84.41,0,0,0,25.35-5.55,81,81,0,0,0,26.39-16.82c.8-.77,1.5-1.56,2.26-2.34a82.08,82.08,0,0,0,7.93-9.38A63.76,63.76,0,0,0,333,172.17a48.55,48.55,0,0,0,4.32-16.45c.09-1.23.2-2.47.19-3.7V150q-1.08,1.54-2.25,3.09A96.73,96.73,0,0,1,327,162.45Zm0,77.92c-.69.7-1.31,1.41-2,2.1a94.2,94.2,0,0,1-60.2,25.86h0l0,26.67h0a81.6,81.6,0,0,0,51.74-22.37A73.51,73.51,0,0,0,333,250.13a48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.47.19-3.71v-2.19c-.74,1.07-1.46,2.15-2.27,3.21A95.68,95.68,0,0,1,327,240.37Zm0-39c-.69.7-1.31,1.41-2,2.1a93.18,93.18,0,0,1-10.63,8.65,91.63,91.63,0,0,1-11.63,7,95.47,95.47,0,0,1-37.94,10.18h0V256h0a81.65,81.65,0,0,0,51.74-22.37c.8-.77,1.5-1.56,2.26-2.34a82.08,82.08,0,0,0,7.93-9.38A63.76,63.76,0,0,0,333,211.15a48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.48.19-3.71v-2.2c-.74,1.08-1.46,2.16-2.27,3.22A95.68,95.68,0,0,1,327,201.39Z"
+      />
+    </svg>
+  );
+};
+
+export default LogoIcon;
diff --git a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
index 9e343b86ac..9dd9ea64c3 100644
--- a/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/sidebar.tsx
@@ -1,24 +1,29 @@
-import React from 'react';
+import React, { FC, useContext } from 'react';
 import HomeIcon from '@material-ui/icons/Home';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import BuildIcon from '@material-ui/icons/BuildRounded';
 import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
 import MapIcon from '@material-ui/icons/MyLocation';
+import { Link, makeStyles } from '@material-ui/core';
+import { NavLink } from 'react-router-dom';
+import LogoFull from './LogoFull';
+import LogoIcon from './LogoIcon';
 
 import {
   Sidebar,
   SidebarItem,
   SidebarDivider,
+  sidebarConfig,
+  SidebarContext,
   SidebarSpace,
   SidebarUserSettings,
-  SidebarThemeToggle,
-  SidebarPinButton,
   DefaultProviderSettings,
 } from '@backstage/core';
 
 export const AppSidebar = () => (
   <Sidebar>
+    <SidebarLogo />
     <SidebarDivider />
     {/* Global nav, not org-specific */}
     <SidebarItem icon={HomeIcon} to="./" text="Home" />
@@ -32,8 +37,39 @@ export const AppSidebar = () => (
     <SidebarDivider />
     <SidebarSpace />
     <SidebarDivider />
-    <SidebarThemeToggle />
     <SidebarUserSettings providerSettings={<DefaultProviderSettings />} />
-    <SidebarPinButton />
   </Sidebar>
 );
+
+const useSidebarLogoStyles = makeStyles({
+  root: {
+    width: sidebarConfig.drawerWidthClosed,
+    height: 3 * sidebarConfig.logoHeight,
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    alignItems: 'center',
+    marginBottom: -14,
+  },
+  link: {
+    width: sidebarConfig.drawerWidthClosed,
+    marginLeft: 24,
+  },
+});
+
+const SidebarLogo: FC<{}> = () => {
+  const classes = useSidebarLogoStyles();
+  const { isOpen } = useContext(SidebarContext);
+
+  return (
+    <div className={classes.root}>
+      <Link
+        component={NavLink}
+        to="/"
+        underline="none"
+        className={classes.link}
+      >
+        {isOpen ? <LogoFull /> : <LogoIcon />}
+      </Link>
+    </div>
+  );
+};
diff --git a/packages/create-app/templates/default-app/packages/backend/package.json.hbs b/packages/create-app/templates/default-app/packages/backend/package.json.hbs
index 044ee1560a..adde81e830 100644
--- a/packages/create-app/templates/default-app/packages/backend/package.json.hbs
+++ b/packages/create-app/templates/default-app/packages/backend/package.json.hbs
@@ -28,6 +28,7 @@
     "@backstage/plugin-scaffolder-backend": "^{{version}}",
     "@backstage/plugin-techdocs-backend": "^{{version}}",
     "@octokit/rest": "^18.0.0",
+    "@gitbeaker/node": "^23.5.0",
     "dockerode": "^3.2.0",
     "express": "^4.17.1",
     "knex": "^0.21.1",
diff --git a/packages/create-app/templates/default-app/packages/backend/src/plugins/scaffolder.ts b/packages/create-app/templates/default-app/packages/backend/src/plugins/scaffolder.ts
index ffa10cc3c6..df5e0a79c1 100644
--- a/packages/create-app/templates/default-app/packages/backend/src/plugins/scaffolder.ts
+++ b/packages/create-app/templates/default-app/packages/backend/src/plugins/scaffolder.ts
@@ -3,16 +3,24 @@ import {
   createRouter,
   FilePreparer,
   GithubPreparer,
+  GitlabPreparer,
   Preparers,
+  Publishers,
   GithubPublisher,
+  GitlabPublisher,
   CreateReactAppTemplater,
   Templaters,
+  RepoVisilityOptions,
 } from '@backstage/plugin-scaffolder-backend';
 import { Octokit } from '@octokit/rest';
+import { Gitlab } from '@gitbeaker/node';
 import type { PluginEnvironment } from '../types';
 import Docker from 'dockerode';
 
-export default async function createPlugin({ logger }: PluginEnvironment) {
+export default async function createPlugin({
+ logger,
+ config,
+}: PluginEnvironment) {
   const cookiecutterTemplater = new CookieCutter();
   const craTemplater = new CreateReactAppTemplater();
   const templaters = new Templaters();
@@ -21,19 +29,48 @@ export default async function createPlugin({ logger }: PluginEnvironment) {
 
   const filePreparer = new FilePreparer();
   const githubPreparer = new GithubPreparer();
+  const gitlabPreparer = new GitlabPreparer(config);
   const preparers = new Preparers();
 
   preparers.register('file', filePreparer);
   preparers.register('github', githubPreparer);
+  preparers.register('gitlab', gitlabPreparer);
+  preparers.register('gitlab/api', gitlabPreparer);
 
-  const githubClient = new Octokit({ auth: process.env.GITHUB_ACCESS_TOKEN });
-  const publisher = new GithubPublisher({ client: githubClient });
+  const publishers = new Publishers();
+
+  const githubToken = config.getString('scaffolder.github.token');
+  const repoVisibility = config.getString(
+    'scaffolder.github.visibility',
+  ) as RepoVisilityOptions;
+
+  const githubClient = new Octokit({ auth: githubToken });
+  const githubPublisher = new GithubPublisher({
+    client: githubClient,
+    token: githubToken,
+    repoVisibility,
+  });
+  publishers.register('file', githubPublisher);
+  publishers.register('github', githubPublisher);
+
+  const gitLabConfig = config.getOptionalConfig('scaffolder.gitlab.api');
+
+  if (gitLabConfig) {
+    const gitLabToken = gitLabConfig.getString('token');
+    const gitLabClient = new Gitlab({
+      host: gitLabConfig.getOptionalString('baseUrl'),
+      token: gitLabToken,
+    });
+    const gitLabPublisher = new GitlabPublisher(gitLabClient, gitLabToken);
+    publishers.register('gitlab', gitLabPublisher);
+    publishers.register('gitlab/api', gitLabPublisher);
+  }
 
   const dockerClient = new Docker();
   return await createRouter({
     preparers,
     templaters,
-    publisher,
+    publishers,
     logger,
     dockerClient,
   });
diff --git a/packages/e2e-test/src/e2e-test.ts b/packages/e2e-test/src/e2e-test.ts
index 5dfac68d6a..146a3ec644 100644
--- a/packages/e2e-test/src/e2e-test.ts
+++ b/packages/e2e-test/src/e2e-test.ts
@@ -272,24 +272,37 @@ async function createPlugin(pluginName: string, appDir: string) {
 async function testAppServe(pluginName: string, appDir: string) {
   const startApp = spawnPiped(['yarn', 'start'], {
     cwd: appDir,
+    env: {
+      ...process.env,
+      GITHUB_ACCESS_TOKEN: 'abc',
+    },
   });
   Browser.localhost('localhost', 3000);
 
   let successful = false;
   try {
-    const browser = new Browser();
+    for (let attempts = 1; ; attempts++) {
+      try {
+        const browser = new Browser();
 
-    await waitForPageWithText(browser, '/', 'Backstage Service Catalog');
-    await waitForPageWithText(
-      browser,
-      `/${pluginName}`,
-      `Welcome to ${pluginName}!`,
-    );
+        await waitForPageWithText(browser, '/', 'Backstage Service Catalog');
+        await waitForPageWithText(
+          browser,
+          `/${pluginName}`,
+          `Welcome to ${pluginName}!`,
+        );
 
-    print('Both App and Plugin loaded correctly');
-    successful = true;
-  } catch (error) {
-    throw new Error(`App serve test failed, ${error}`);
+        print('Both App and Plugin loaded correctly');
+        successful = true;
+        break;
+      } catch (error) {
+        if (attempts >= 5) {
+          throw new Error(`App serve test failed, ${error}`);
+        }
+        console.log(`App serve failed, trying again, ${error}`);
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+    }
   } finally {
     // Kill entire process group, otherwise we'll end up with hanging serve processes
     killTree(startApp.pid);
@@ -342,6 +355,10 @@ async function testBackendStart(appDir: string, isPostgres: boolean) {
 
   const child = spawnPiped(['yarn', 'workspace', 'backend', 'start'], {
     cwd: appDir,
+    env: {
+      ...process.env,
+      GITHUB_ACCESS_TOKEN: 'abc',
+    },
   });
 
   let stdout = '';
@@ -386,5 +403,15 @@ async function testBackendStart(appDir: string, isPostgres: boolean) {
   }
 }
 
-process.on('unhandledRejection', handleError);
+process.on('unhandledRejection', (error: Error) => {
+  // Try to avoid exiting if the unhandled error is coming from jsdom, i.e. zombie.
+  // Those are typically errors on the page that should be benign, at least in the
+  // context of this test. We have other ways of asserting that the page is being
+  // rendered correctly.
+  if (error?.stack?.includes('node_modules/jsdom/lib')) {
+    console.log(`Ignored error inside jsdom, ${error}`);
+  } else {
+    handleError(error);
+  }
+});
 main().catch(handleError);
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index 2ee58a8c4f..c83bb221be 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -22,7 +22,7 @@ module.exports = {
     const [jsLoader] = config.module.rules.splice(0, 1);
     if (jsLoader.use[0].loader !== 'babel-loader') {
       throw new Error(
-        `Unexpected loader removed from storybook config, ${jsonLoader.use[0].loader}`,
+        `Unexpected loader removed from storybook config, ${jsLoader.use[0].loader}`,
       );
     }
 
diff --git a/packages/techdocs-container/Dockerfile b/packages/techdocs-container/Dockerfile
index 2002d93d70..e910935baf 100644
--- a/packages/techdocs-container/Dockerfile
+++ b/packages/techdocs-container/Dockerfile
@@ -18,7 +18,7 @@ FROM python:3.8-alpine
 RUN apk update && apk --no-cache add gcc musl-dev openjdk11-jdk curl graphviz ttf-dejavu fontconfig
 
 RUN curl -L http://sourceforge.net/projects/plantuml/files/plantuml.1.2020.16.jar/download > /opt/plantuml.jar
-RUN pip install --upgrade pip && pip install mkdocs-techdocs-core==0.0.4
+RUN pip install --upgrade pip && pip install mkdocs-techdocs-core==0.0.7
 
 # Create script to call plantuml.jar from a location in path
 
diff --git a/packages/techdocs-container/mock-docs/docs/index.md b/packages/techdocs-container/mock-docs/docs/index.md
index 77c64582de..2586b86cfb 100644
--- a/packages/techdocs-container/mock-docs/docs/index.md
+++ b/packages/techdocs-container/mock-docs/docs/index.md
@@ -59,3 +59,5 @@ digraph G {
   Goofy <-- MickeyMouse: responds
 @enduml
 ```
+
+:bulb:
diff --git a/packages/techdocs-container/techdocs-core/README.md b/packages/techdocs-container/techdocs-core/README.md
index a4afed0158..36f1437a54 100644
--- a/packages/techdocs-container/techdocs-core/README.md
+++ b/packages/techdocs-container/techdocs-core/README.md
@@ -50,6 +50,18 @@ python -m black src/
 
 ## Changelog
 
+### 0.0.7
+
+- Fix an issue with configuration of emoji support
+
+### 0.0.6
+
+- Further adjustments to versions to find ones that are compatible
+
+### 0.0.5
+
+- Downgrade some versions of markdown extensions to versions that are more stable
+
 ### 0.0.4
 
 - Added support for more mkdocs extensions
diff --git a/packages/techdocs-container/techdocs-core/requirements.txt b/packages/techdocs-container/techdocs-core/requirements.txt
index 4037a174ea..36daaab4d7 100644
--- a/packages/techdocs-container/techdocs-core/requirements.txt
+++ b/packages/techdocs-container/techdocs-core/requirements.txt
@@ -4,10 +4,10 @@
 mkdocs==1.1.2
 mkdocs-material==5.3.2
 mkdocs-monorepo-plugin==0.4.5
-plantuml-markdown==3.4.0
+plantuml-markdown==3.1.2
 markdown_inline_graphviz_extension==1.1
 pygments==2.6.1
-pymdown-extensions==7.1
+pymdown-extensions==8.0.0
 
 # The linter using for Python
 # Note: This requires Python 3.6+ to run, but can format Python 2 code too.
diff --git a/packages/techdocs-container/techdocs-core/setup.py b/packages/techdocs-container/techdocs-core/setup.py
index 72593dc433..3e3fa47caa 100644
--- a/packages/techdocs-container/techdocs-core/setup.py
+++ b/packages/techdocs-container/techdocs-core/setup.py
@@ -18,7 +18,7 @@ from setuptools import setup, find_packages
 
 setup(
     name='mkdocs-techdocs-core',
-    version='0.0.4',
+    version='0.0.7',
     description='A Mkdocs package that contains TechDocs defaults',
     long_description='',
     keywords='mkdocs',
@@ -31,10 +31,10 @@ setup(
         'mkdocs>=1.1.2',
         'mkdocs-material==5.3.2',
         'mkdocs-monorepo-plugin==0.4.5',
-        'plantuml-markdown==3.4.0',
+        'plantuml-markdown==3.1.2',
         'markdown_inline_graphviz_extension==1.1',
         'pygments==2.6.1',
-        'pymdown-extensions==7.1'
+        'pymdown-extensions==8.0.0'
     ],
     classifiers=[
         'Development Status :: 1 - Planning',
diff --git a/packages/techdocs-container/techdocs-core/src/core.py b/packages/techdocs-container/techdocs-core/src/core.py
index d021a69486..69e39d401b 100644
--- a/packages/techdocs-container/techdocs-core/src/core.py
+++ b/packages/techdocs-container/techdocs-core/src/core.py
@@ -18,6 +18,7 @@ from mkdocs.plugins import BasePlugin, PluginCollection
 from mkdocs.theme import Theme
 from mkdocs.contrib.search import SearchPlugin
 from mkdocs_monorepo_plugin.plugin import MonorepoPlugin
+from pymdownx.emoji import to_svg
 import tempfile
 import os
 
@@ -76,9 +77,7 @@ class TechDocsCore(BasePlugin):
         config["markdown_extensions"].append("pymdownx.critic")
         config["markdown_extensions"].append("pymdownx.details")
         config["markdown_extensions"].append("pymdownx.emoji")
-        config["mdx_configs"]["pymdownx.emoji"] = {
-            "emoji_generator": "!!python/name:pymdownx.emoji.to_svg",
-        }
+        config["mdx_configs"]["pymdownx.emoji"] = {"emoji_generator": to_svg}
         config["markdown_extensions"].append("pymdownx.inlinehilite")
         config["markdown_extensions"].append("pymdownx.magiclink")
         config["markdown_extensions"].append("pymdownx.mark")
diff --git a/plugins/api-docs/README.md b/plugins/api-docs/README.md
index db78b60373..17f354e997 100644
--- a/plugins/api-docs/README.md
+++ b/plugins/api-docs/README.md
@@ -14,8 +14,9 @@ The plugin provides a standalone list of APIs, as well as an integration into th
 
 Right now, the following API formats are supported:
 
-- [OpenAPI](https://swagger.io/specification/) 2 & 3,
-- [AsyncAPI](https://www.asyncapi.com/docs/specifications/latest/),
+- [OpenAPI](https://swagger.io/specification/) 2 & 3
+- [AsyncAPI](https://www.asyncapi.com/docs/specifications/latest/)
+- [GraphQL](https://graphql.org/learn/schema/)
 
 Other formats are displayed as plain text, but this can easily be extented.
 
diff --git a/plugins/api-docs/package.json b/plugins/api-docs/package.json
index a913316925..25e5c6b900 100644
--- a/plugins/api-docs/package.json
+++ b/plugins/api-docs/package.json
@@ -29,6 +29,8 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "graphiql": "^1.0.0-alpha.10",
+    "graphql": "^15.3.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",
diff --git a/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx b/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx
index f26691d58c..e2148184b7 100644
--- a/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx
+++ b/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx
@@ -16,15 +16,19 @@
 
 import { ComponentEntity, Entity } from '@backstage/catalog-model';
 import { Progress } from '@backstage/core';
-import React, { FC } from 'react';
 import { Grid } from '@material-ui/core';
+import React from 'react';
 import {
   ApiDefinitionCard,
   useComponentApiEntities,
   useComponentApiNames,
 } from '../../components';
 
-export const EntityPageApi: FC<{ entity: Entity }> = ({ entity }) => {
+type Props = {
+  entity: Entity;
+};
+
+export const EntityPageApi = ({ entity }: Props) => {
   const apiNames = useComponentApiNames(entity as ComponentEntity);
 
   const { apiEntities, loading } = useComponentApiEntities({
diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
index 5650b0745f..49b8a69318 100644
--- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
+++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
@@ -15,14 +15,16 @@
  */
 
 import { ApiEntity } from '@backstage/catalog-model';
-import { TabbedCard, CardTab } from '@backstage/core';
-import React from 'react';
-import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';
+import { CardTab, useApi, TabbedCard } from '@backstage/core';
 import { Alert } from '@material-ui/lab';
+import React from 'react';
+import { apiDocsConfigRef } from '../../config';
+import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';
 import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget';
 import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget';
+import { GraphQlDefinitionWidget } from '../GraphQlDefinitionWidget';
 
-type ApiDefinitionWidget = {
+export type ApiDefinitionWidget = {
   type: string;
   title: string;
   component: (definition: string) => React.ReactElement;
@@ -47,39 +49,38 @@ export function defaultDefinitionWidgets(): ApiDefinitionWidget[] {
         <AsyncApiDefinitionWidget definition={definition} />
       ),
     },
+    {
+      type: 'graphql',
+      title: 'GraphQL',
+      rawLanguage: 'graphql',
+      component: definition => (
+        <GraphQlDefinitionWidget definition={definition} />
+      ),
+    },
   ];
 }
 
 type Props = {
   apiEntity?: ApiEntity;
-  definitionWidgets?: ApiDefinitionWidget[];
 };
 
-const defaultProps = {
-  definitionWidgets: defaultDefinitionWidgets(),
-};
-
-export const ApiDefinitionCard = (props: Props) => {
-  const { apiEntity, definitionWidgets } = {
-    ...defaultProps,
-    ...props,
-  };
+export const ApiDefinitionCard = ({ apiEntity }: Props) => {
+  const config = useApi(apiDocsConfigRef);
+  const { getApiDefinitionWidget } = config;
 
   if (!apiEntity) {
     return <Alert severity="error">Could not fetch the API</Alert>;
   }
 
-  const definitionWidget = definitionWidgets.find(
-    d => d.type === apiEntity.spec.type,
-  );
+  const definitionWidget = getApiDefinitionWidget(apiEntity);
 
   if (definitionWidget) {
     return (
       <TabbedCard title={apiEntity.metadata.name}>
-        <CardTab label={definitionWidget.title}>
+        <CardTab label={definitionWidget.title} key="widget">
           {definitionWidget.component(apiEntity.spec.definition)}
         </CardTab>
-        <CardTab label="Raw">
+        <CardTab label="Raw" key="raw">
           <PlainApiDefinitionWidget
             definition={apiEntity.spec.definition}
             language={definitionWidget.rawLanguage || apiEntity.spec.type}
@@ -94,7 +95,7 @@ export const ApiDefinitionCard = (props: Props) => {
       title={apiEntity.metadata.name}
       children={[
         // Has to be an array, otherwise typescript doesn't like that this has only a single child
-        <CardTab label={apiEntity.spec.type}>
+        <CardTab label={apiEntity.spec.type} key="raw">
           <PlainApiDefinitionWidget
             definition={apiEntity.spec.definition}
             language={apiEntity.spec.type}
diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/index.ts b/plugins/api-docs/src/components/ApiDefinitionCard/index.ts
index b2a2f3af62..de7856f70c 100644
--- a/plugins/api-docs/src/components/ApiDefinitionCard/index.ts
+++ b/plugins/api-docs/src/components/ApiDefinitionCard/index.ts
@@ -14,4 +14,8 @@
  * limitations under the License.
  */
 
-export { ApiDefinitionCard } from './ApiDefinitionCard';
+export type { ApiDefinitionWidget } from './ApiDefinitionCard';
+export {
+  ApiDefinitionCard,
+  defaultDefinitionWidgets,
+} from './ApiDefinitionCard';
diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
index aa0df3f20f..b7e9996cc0 100644
--- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
+++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
@@ -34,6 +34,7 @@ import { useAsync } from 'react-use';
 import { ApiDefinitionCard } from '../ApiDefinitionCard';
 
 const REDIRECT_DELAY = 1000;
+
 function headerProps(
   kind: string,
   namespace: string | undefined,
diff --git a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
similarity index 84%
rename from plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogLayout.tsx
rename to plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
index d846e2b0e2..a111007278 100644
--- a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogLayout.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
@@ -21,17 +21,15 @@ type Props = {
   children?: React.ReactNode;
 };
 
-const ApiCatalogLayout = ({ children }: Props) => {
+export const ApiExplorerLayout = ({ children }: Props) => {
   return (
     <Page theme={pageTheme.home}>
       <Header
         title="APIs"
-        subtitle="Backstage API Catalog"
-        pageTitleOverride="Home"
+        subtitle="Backstage API Explorer"
+        pageTitleOverride="APIs"
       />
       {children}
     </Page>
   );
 };
-
-export default ApiCatalogLayout;
diff --git a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx
similarity index 85%
rename from plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.test.tsx
rename to plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx
index 78afa51937..e386f281e8 100644
--- a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.test.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx
@@ -20,7 +20,8 @@ import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ApiCatalogPage } from './ApiCatalogPage';
+import { apiDocsConfigRef } from '../../config';
+import { ApiExplorerPage } from './ApiExplorerPage';
 
 describe('ApiCatalogPage', () => {
   const catalogApi: Partial<CatalogApi> = {
@@ -32,6 +33,7 @@ describe('ApiCatalogPage', () => {
           metadata: {
             name: 'Entity1',
           },
+          spec: { type: 'openapi' },
         },
         {
           apiVersion: 'backstage.io/v1alpha1',
@@ -39,12 +41,17 @@ describe('ApiCatalogPage', () => {
           metadata: {
             name: 'Entity2',
           },
+          spec: { type: 'openapi' },
         },
       ] as Entity[]),
     getLocationByEntity: () =>
       Promise.resolve({ id: 'id', type: 'github', target: 'url' }),
   };
 
+  const apiDocsConfig = {
+    getApiDefinitionWidget: () => undefined,
+  };
+
   const renderWrapped = (children: React.ReactNode) =>
     render(
       wrapInTestApp(
@@ -52,6 +59,7 @@ describe('ApiCatalogPage', () => {
           apis={ApiRegistry.from([
             [catalogApiRef, catalogApi],
             [storageApiRef, MockStorageApi.create()],
+            [apiDocsConfigRef, apiDocsConfig],
           ])}
         >
           {children}
@@ -63,7 +71,7 @@ describe('ApiCatalogPage', () => {
   // related to some theme issues in mui-table
   // https://github.com/mbrn/material-table/issues/1293
   it('should render', async () => {
-    const { findByText } = renderWrapped(<ApiCatalogPage />);
+    const { findByText } = renderWrapped(<ApiExplorerPage />);
     expect(await findByText(/APIs \(2\)/)).toBeInTheDocument();
   });
 });
diff --git a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
similarity index 59%
rename from plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.tsx
rename to plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
index cfeb71f7b7..b6440edc3a 100644
--- a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
@@ -14,31 +14,42 @@
  * limitations under the License.
  */
 
-import { Content, useApi } from '@backstage/core';
+import { Content, ContentHeader, SupportButton, useApi } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
+import { Button } from '@material-ui/core';
 import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 import { useAsync } from 'react-use';
-import { ApiCatalogTable } from '../ApiCatalogTable';
-import ApiCatalogLayout from './ApiCatalogLayout';
+import { ApiExplorerTable } from '../ApiExplorerTable';
+import { ApiExplorerLayout } from './ApiExplorerLayout';
 
-const CatalogPageContents = () => {
+export const ApiExplorerPage = () => {
   const catalogApi = useApi(catalogApiRef);
   const { loading, error, value: matchingEntities } = useAsync(() => {
     return catalogApi.getEntities({ kind: 'API' });
   }, [catalogApi]);
 
   return (
-    <ApiCatalogLayout>
+    <ApiExplorerLayout>
       <Content>
-        <ApiCatalogTable
+        <ContentHeader title="">
+          <Button
+            variant="contained"
+            color="primary"
+            component={RouterLink}
+            to="/register-component"
+          >
+            Register Existing API
+          </Button>
+          <SupportButton>All your APIs</SupportButton>
+        </ContentHeader>
+        <ApiExplorerTable
           titlePreamble="APIs"
           entities={matchingEntities!}
           loading={loading}
           error={error}
         />
       </Content>
-    </ApiCatalogLayout>
+    </ApiExplorerLayout>
   );
 };
-
-export const ApiCatalogPage = () => <CatalogPageContents />;
diff --git a/plugins/api-docs/src/components/ApiCatalogPage/index.ts b/plugins/api-docs/src/components/ApiExplorerPage/index.ts
similarity index 91%
rename from plugins/api-docs/src/components/ApiCatalogPage/index.ts
rename to plugins/api-docs/src/components/ApiExplorerPage/index.ts
index bec9de705a..67f672f9a9 100644
--- a/plugins/api-docs/src/components/ApiCatalogPage/index.ts
+++ b/plugins/api-docs/src/components/ApiExplorerPage/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { ApiCatalogPage } from './ApiCatalogPage';
+export { ApiExplorerPage } from './ApiExplorerPage';
diff --git a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.test.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx
similarity index 70%
rename from plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.test.tsx
rename to plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx
index 67f6562a56..c679c2201f 100644
--- a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.test.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx
@@ -15,39 +15,50 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
+import { ApiProvider, ApiRegistry } from '@backstage/core';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { ApiCatalogTable } from './ApiCatalogTable';
+import { apiDocsConfigRef } from '../../config';
+import { ApiExplorerTable } from './ApiExplorerTable';
 
 const entites: Entity[] = [
   {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'API',
     metadata: { name: 'api1' },
+    spec: { type: 'openapi' },
   },
   {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'API',
     metadata: { name: 'api2' },
+    spec: { type: 'openapi' },
   },
   {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'API',
     metadata: { name: 'api3' },
+    spec: { type: 'grpc' },
   },
 ];
 
+const apiRegistry = ApiRegistry.with(apiDocsConfigRef, {
+  getApiDefinitionWidget: () => undefined,
+});
+
 describe('ApiCatalogTable component', () => {
   it('should render error message when error is passed in props', async () => {
     const rendered = render(
       wrapInTestApp(
-        <ApiCatalogTable
-          titlePreamble="APIs"
-          entities={[]}
-          loading={false}
-          error={{ code: 'error' }}
-        />,
+        <ApiProvider apis={apiRegistry}>
+          <ApiExplorerTable
+            titlePreamble="APIs"
+            entities={[]}
+            loading={false}
+            error={{ code: 'error' }}
+          />
+        </ApiProvider>,
       ),
     );
     const errorMessage = await rendered.findByText(
@@ -59,11 +70,13 @@ describe('ApiCatalogTable component', () => {
   it('should display entity names when loading has finished and no error occurred', async () => {
     const rendered = render(
       wrapInTestApp(
-        <ApiCatalogTable
-          titlePreamble="APIs"
-          entities={entites}
-          loading={false}
-        />,
+        <ApiProvider apis={apiRegistry}>
+          <ApiExplorerTable
+            titlePreamble="APIs"
+            entities={entites}
+            loading={false}
+          />
+        </ApiProvider>,
       ),
     );
     expect(rendered.getByText(/APIs \(3\)/)).toBeInTheDocument();
diff --git a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
similarity index 63%
rename from plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx
rename to plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
index 3b954b5a86..485fcc216d 100644
--- a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
@@ -14,14 +14,23 @@
  * limitations under the License.
  */
 
-import { Entity } from '@backstage/catalog-model';
-import { Table, TableColumn } from '@backstage/core';
-import { Link } from '@material-ui/core';
+import { ApiEntityV1alpha1, Entity } from '@backstage/catalog-model';
+import { Table, TableColumn, useApi } from '@backstage/core';
+import { Chip, Link } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
+import { apiDocsConfigRef } from '../../config';
 import { entityRoute } from '../../routes';
 
+const ApiTypeTitle = ({ apiEntity }: { apiEntity: ApiEntityV1alpha1 }) => {
+  const config = useApi(apiDocsConfigRef);
+  const definition = config.getApiDefinitionWidget(apiEntity);
+  const type = definition ? definition.title : apiEntity.spec.type;
+
+  return <span>{type}</span>;
+};
+
 const columns: TableColumn<Entity>[] = [
   {
     title: 'Name',
@@ -45,25 +54,55 @@ const columns: TableColumn<Entity>[] = [
       </Link>
     ),
   },
+  {
+    title: 'Owner',
+    field: 'spec.owner',
+  },
+  {
+    title: 'Lifecycle',
+    field: 'spec.lifecycle',
+  },
+  {
+    title: 'Type',
+    field: 'spec.type',
+    render: (entity: Entity) => (
+      <ApiTypeTitle apiEntity={entity as ApiEntityV1alpha1} />
+    ),
+  },
   {
     title: 'Description',
     field: 'metadata.description',
   },
+  {
+    title: 'Tags',
+    field: 'metadata.tags',
+    cellStyle: {
+      padding: '0px 16px 0px 20px',
+    },
+    render: (entity: Entity) => (
+      <>
+        {entity.metadata.tags &&
+          entity.metadata.tags.map(t => (
+            <Chip key={t} label={t} style={{ marginBottom: '0px' }} />
+          ))}
+      </>
+    ),
+  },
 ];
 
-type CatalogTableProps = {
+type ExplorerTableProps = {
   entities: Entity[];
   titlePreamble: string;
   loading: boolean;
   error?: any;
 };
 
-export const ApiCatalogTable = ({
+export const ApiExplorerTable = ({
   entities,
   loading,
   error,
   titlePreamble,
-}: CatalogTableProps) => {
+}: ExplorerTableProps) => {
   if (error) {
     return (
       <div>
diff --git a/plugins/api-docs/src/components/ApiCatalogTable/index.ts b/plugins/api-docs/src/components/ApiExplorerTable/index.ts
similarity index 91%
rename from plugins/api-docs/src/components/ApiCatalogTable/index.ts
rename to plugins/api-docs/src/components/ApiExplorerTable/index.ts
index 14129b2258..a9c79861e8 100644
--- a/plugins/api-docs/src/components/ApiCatalogTable/index.ts
+++ b/plugins/api-docs/src/components/ApiExplorerTable/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { ApiCatalogTable } from './ApiCatalogTable';
+export { ApiExplorerTable } from './ApiExplorerTable';
diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.tsx
new file mode 100644
index 0000000000..7e01df1460
--- /dev/null
+++ b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinitionWidget.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Suspense } from 'react';
+import { buildSchema } from 'graphql';
+import { makeStyles } from '@material-ui/core/styles';
+import { Progress } from '@backstage/core';
+import { BackstageTheme } from '@backstage/theme';
+
+const GraphiQL = React.lazy(() => import('graphiql'));
+
+const useStyles = makeStyles<BackstageTheme>(() => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexFlow: 'column nowrap',
+  },
+  graphiQlWrapper: {
+    flex: 1,
+    '@global': {
+      '.graphiql-container': {
+        boxSizing: 'initial',
+        height: '100%',
+        minHeight: '600px',
+        flex: '1 1 auto',
+      },
+    },
+  },
+}));
+
+type Props = {
+  definition: any;
+};
+
+export const GraphQlDefinitionWidget = ({ definition }: Props) => {
+  const classes = useStyles();
+  const schema = buildSchema(definition);
+
+  return (
+    <Suspense fallback={<Progress />}>
+      <div className={classes.root}>
+        <div className={classes.graphiQlWrapper}>
+          <GraphiQL
+            fetcher={() => Promise.resolve(null) as any}
+            schema={schema}
+            docExplorerOpen
+            defaultSecondaryEditorOpen={false}
+          />
+        </div>
+      </div>
+    </Suspense>
+  );
+};
diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/index.ts b/plugins/api-docs/src/components/GraphQlDefinitionWidget/index.ts
new file mode 100644
index 0000000000..b60545de15
--- /dev/null
+++ b/plugins/api-docs/src/components/GraphQlDefinitionWidget/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { GraphQlDefinitionWidget } from './GraphQlDefinitionWidget';
diff --git a/plugins/api-docs/src/components/index.ts b/plugins/api-docs/src/components/index.ts
index 55b9517f9c..cf9b189091 100644
--- a/plugins/api-docs/src/components/index.ts
+++ b/plugins/api-docs/src/components/index.ts
@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-export { ApiDefinitionCard } from './ApiDefinitionCard';
+export type { ApiDefinitionWidget } from './ApiDefinitionCard';
+export {
+  ApiDefinitionCard,
+  defaultDefinitionWidgets,
+} from './ApiDefinitionCard';
 export { AsyncApiDefinitionWidget } from './AsyncApiDefinitionWidget';
 export { OpenApiDefinitionWidget } from './OpenApiDefinitionWidget';
 export { PlainApiDefinitionWidget } from './PlainApiDefinitionWidget';
diff --git a/plugins/api-docs/src/config.ts b/plugins/api-docs/src/config.ts
new file mode 100644
index 0000000000..a90189a037
--- /dev/null
+++ b/plugins/api-docs/src/config.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ApiEntity } from '@backstage/catalog-model';
+import { createApiRef } from '@backstage/core';
+import { ApiDefinitionWidget } from './components';
+
+export const apiDocsConfigRef = createApiRef<ApiDocsConfig>({
+  id: 'plugin.api-docs.config',
+  description: 'Used to configure api-docs widgets',
+});
+
+export interface ApiDocsConfig {
+  getApiDefinitionWidget: (
+    apiEntity: ApiEntity,
+  ) => ApiDefinitionWidget | undefined;
+}
diff --git a/plugins/api-docs/src/plugin.ts b/plugins/api-docs/src/plugin.ts
index db58538b67..3fcbe8a1f4 100644
--- a/plugins/api-docs/src/plugin.ts
+++ b/plugins/api-docs/src/plugin.ts
@@ -14,15 +14,32 @@
  * limitations under the License.
  */
 
-import { createPlugin } from '@backstage/core';
-import { ApiCatalogPage } from './components/ApiCatalogPage/ApiCatalogPage';
+import { ApiEntity } from '@backstage/catalog-model';
+import { createApiFactory, createPlugin } from '@backstage/core';
+import { ApiExplorerPage } from './components/ApiExplorerPage/ApiExplorerPage';
+import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
 import { ApiEntityPage } from './components/ApiEntityPage/ApiEntityPage';
 import { entityRoute, rootRoute } from './routes';
+import { apiDocsConfigRef } from './config';
 
 export const plugin = createPlugin({
   id: 'api-docs',
+  apis: [
+    createApiFactory({
+      api: apiDocsConfigRef,
+      deps: {},
+      factory: () => {
+        const definitionWidgets = defaultDefinitionWidgets();
+        return {
+          getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+            return definitionWidgets.find(d => d.type === apiEntity.spec.type);
+          },
+        };
+      },
+    }),
+  ],
   register({ router }) {
-    router.addRoute(rootRoute, ApiCatalogPage);
+    router.addRoute(rootRoute, ApiExplorerPage);
     router.addRoute(entityRoute, ApiEntityPage);
   },
 });
diff --git a/plugins/api-docs/src/routes.ts b/plugins/api-docs/src/routes.ts
index eea911dd62..d2d8ef10c5 100644
--- a/plugins/api-docs/src/routes.ts
+++ b/plugins/api-docs/src/routes.ts
@@ -23,11 +23,13 @@ export const rootRoute = createRouteRef({
   path: '/api-docs',
   title: 'APIs',
 });
+
 export const entityRoute = createRouteRef({
   icon: NoIcon,
   path: '/api-docs/:optionalNamespaceAndName/',
   title: 'API',
 });
+
 export const catalogRoute = createRouteRef({
   icon: NoIcon,
   path: '',
diff --git a/plugins/catalog-backend/src/ingestion/LocationReaders.ts b/plugins/catalog-backend/src/ingestion/LocationReaders.ts
index a86e073af9..6f3a27f00d 100644
--- a/plugins/catalog-backend/src/ingestion/LocationReaders.ts
+++ b/plugins/catalog-backend/src/ingestion/LocationReaders.ts
@@ -78,7 +78,7 @@ export class LocationReaders implements LocationReader {
       StaticLocationProcessor.fromConfig(config),
       new FileReaderProcessor(),
       new GithubReaderProcessor(config),
-      new GithubApiReaderProcessor(config),
+      GithubApiReaderProcessor.fromConfig(config),
       new GitlabApiReaderProcessor(config),
       new GitlabReaderProcessor(),
       new BitbucketApiReaderProcessor(config),
diff --git a/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.test.ts b/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.test.ts
index 51c3cf4cd0..48f38f0e97 100644
--- a/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.test.ts
+++ b/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.test.ts
@@ -14,116 +14,149 @@
  * limitations under the License.
  */
 
-import { GithubApiReaderProcessor } from './GithubApiReaderProcessor';
+import { LocationSpec } from '@backstage/catalog-model';
 import { ConfigReader } from '@backstage/config';
+import {
+  getRawUrl,
+  getRequestOptions,
+  GithubApiReaderProcessor,
+  ProviderConfig,
+  readConfig,
+} from './GithubApiReaderProcessor';
 
 describe('GithubApiReaderProcessor', () => {
-  const createConfig = (token: string | undefined) =>
-    ConfigReader.fromConfigs([
-      {
-        context: '',
-        data: {
-          catalog: {
-            processors: {
-              githubApi: {
-                privateToken: token,
-              },
-            },
-          },
-        },
-      },
-    ]);
+  describe('getRequestOptions', () => {
+    it('sets the correct API version', () => {
+      const config: ProviderConfig = { target: '', apiBaseUrl: '' };
+      expect((getRequestOptions(config).headers as any).Accept).toEqual(
+        'application/vnd.github.v3.raw',
+      );
+    });
 
-  it('should build raw api', () => {
-    const processor = new GithubApiReaderProcessor(createConfig(undefined));
-
-    const tests = [
-      {
-        target: 'https://github.com/a/b/blob/master/path/to/c.yaml',
-        url: new URL(
-          'https://api.github.com/repos/a/b/contents/path/to/c.yaml?ref=master',
-        ),
-        err: undefined,
-      },
-      {
-        target: 'https://api.com/a/b/blob/master/path/to/c.yaml',
-        url: null,
-        err:
-          'Incorrect url: https://api.com/a/b/blob/master/path/to/c.yaml, Error: Wrong GitHub URL or Invalid file path',
-      },
-      {
-        target: 'com/a/b/blob/master/path/to/c.yaml',
-        url: null,
-        err:
-          'Incorrect url: com/a/b/blob/master/path/to/c.yaml, TypeError: Invalid URL: com/a/b/blob/master/path/to/c.yaml',
-      },
-      {
-        target:
-          'https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/playback-order-component.yaml',
-        url: new URL(
-          'https://api.github.com/repos/spotify/backstage/contents/packages/catalog-model/examples/playback-order-component.yaml?ref=master',
-        ),
-        err: undefined,
-      },
-    ];
-
-    for (const test of tests) {
-      if (test.err) {
-        expect(() => processor.buildRawUrl(test.target)).toThrowError(test.err);
-      } else if (test.url) {
-        expect(processor.buildRawUrl(test.target).toString()).toEqual(
-          test.url.toString(),
-        );
-      } else {
-        throw new Error(
-          'This should not have happened. Either err or url should have matched.',
-        );
-      }
-    }
+    it('inserts a token when needed', () => {
+      const withToken: ProviderConfig = {
+        target: '',
+        apiBaseUrl: '',
+        token: 'A',
+      };
+      const withoutToken: ProviderConfig = {
+        target: '',
+        apiBaseUrl: '',
+      };
+      expect(
+        (getRequestOptions(withToken).headers as any).Authorization,
+      ).toEqual('token A');
+      expect(
+        (getRequestOptions(withoutToken).headers as any).Authorization,
+      ).toBeUndefined();
+    });
   });
 
-  it('should return request options', () => {
-    const tests = [
-      {
-        token: '0123456789',
-        expect: {
-          headers: {
-            Accept: 'application/vnd.github.v3.raw',
-            Authorization: 'token 0123456789',
-          },
-        },
-      },
-      {
-        token: '',
-        err:
-          "Invalid type in config for key 'catalog.processors.githubApi.privateToken' in '', got empty-string, wanted string",
-        expect: {
-          headers: {
-            Accept: 'application/vnd.github.v3.raw',
-          },
-        },
-      },
-      {
-        token: undefined,
-        expect: {
-          headers: {
-            Accept: 'application/vnd.github.v3.raw',
-          },
-        },
-      },
-    ];
+  describe('getRawUrl', () => {
+    it('rejects targets that do not look like URLs', () => {
+      const config: ProviderConfig = { target: '', apiBaseUrl: '' };
+      expect(() => getRawUrl('a/b', config)).toThrow(/Incorrect URL: a\/b/);
+    });
 
-    for (const test of tests) {
-      if (test.err) {
-        expect(
-          () => new GithubApiReaderProcessor(createConfig(test.token)),
-        ).toThrowError(test.err);
-      } else {
-        const processor = new GithubApiReaderProcessor(
-          createConfig(test.token),
-        );
-        expect(processor.getRequestOptions()).toEqual(test.expect);
-      }
+    it('passes through the happy path', () => {
+      const config: ProviderConfig = {
+        target: 'https://github.com',
+        apiBaseUrl: 'https://api.github.com',
+      };
+      expect(
+        getRawUrl(
+          'https://github.com/a/b/blob/branchname/path/to/c.yaml',
+          config,
+        ),
+      ).toEqual(
+        new URL(
+          'https://api.github.com/repos/a/b/contents/path/to/c.yaml?ref=branchname',
+        ),
+      );
+    });
+  });
+
+  describe('readConfig', () => {
+    function config(
+      providers: { target: string; apiBaseUrl?: string; token?: string }[],
+    ) {
+      return ConfigReader.fromConfigs([
+        {
+          context: '',
+          data: {
+            catalog: { processors: { githubApi: { providers } } },
+          },
+        },
+      ]);
     }
+
+    it('adds a default GitHub entry when missing', () => {
+      const output = readConfig(config([]));
+      expect(output).toEqual([
+        { target: 'https://github.com', apiBaseUrl: 'https://api.github.com' },
+      ]);
+    });
+
+    it('injects the correct GitHub API base URL when missing', () => {
+      const output = readConfig(config([{ target: 'https://github.com' }]));
+      expect(output).toEqual([
+        { target: 'https://github.com', apiBaseUrl: 'https://api.github.com' },
+      ]);
+    });
+
+    it('rejects custom targets with no API base URL', () => {
+      expect(() =>
+        readConfig(config([{ target: 'https://ghe.company.com' }])),
+      ).toThrow(
+        'Provider at https://ghe.company.com must configure an explicit apiBaseUrl',
+      );
+    });
+
+    it('rejects funky configs', () => {
+      expect(() => readConfig(config([{ target: 7 } as any]))).toThrow(
+        /target/,
+      );
+      expect(() => readConfig(config([{ noTarget: '7' } as any]))).toThrow(
+        /target/,
+      );
+      expect(() =>
+        readConfig(
+          config([{ target: 'https://github.com', apiBaseUrl: 7 } as any]),
+        ),
+      ).toThrow(/apiBaseUrl/);
+      expect(() =>
+        readConfig(config([{ target: 'https://github.com', token: 7 } as any])),
+      ).toThrow(/token/);
+    });
+  });
+
+  describe('implementation', () => {
+    it('rejects unknown types', async () => {
+      const processor = new GithubApiReaderProcessor([
+        { target: 'https://github.com', apiBaseUrl: 'https://api.github.com' },
+      ]);
+      const location: LocationSpec = {
+        type: 'not-github/api',
+        target: 'https://github.com',
+      };
+      await expect(
+        processor.readLocation(location, false, () => {}),
+      ).resolves.toBeFalsy();
+    });
+
+    it('rejects unknown targets', async () => {
+      const processor = new GithubApiReaderProcessor([
+        { target: 'https://github.com', apiBaseUrl: 'https://api.github.com' },
+      ]);
+      const location: LocationSpec = {
+        type: 'github/api',
+        target: 'https://not.github.com/apa',
+      };
+      await expect(
+        processor.readLocation(location, false, () => {}),
+      ).rejects.toThrow(
+        /There is no GitHub provider that matches https:\/\/not.github.com\/apa/,
+      );
+    });
   });
 });
diff --git a/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.ts b/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.ts
index f8d1d6caf8..812bf6f488 100644
--- a/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.ts
+++ b/plugins/catalog-backend/src/ingestion/processors/GithubApiReaderProcessor.ts
@@ -15,34 +15,135 @@
  */
 
 import { LocationSpec } from '@backstage/catalog-model';
-import fetch, { RequestInit, HeadersInit } from 'node-fetch';
+import { Config } from '@backstage/config';
+import fetch, { HeadersInit, RequestInit } from 'node-fetch';
 import * as result from './results';
 import { LocationProcessor, LocationProcessorEmit } from './types';
-import { Config } from '@backstage/config';
 
-export class GithubApiReaderProcessor implements LocationProcessor {
-  private privateToken: string;
+/**
+ * The configuration parameters for a single GitHub API provider.
+ */
+export type ProviderConfig = {
+  /**
+   * The prefix of the target that this matches on, e.g. "https://github.com",
+   * with no trailing slash.
+   */
+  target: string;
 
-  constructor(config: Config) {
-    this.privateToken =
-      config.getOptionalString('catalog.processors.githubApi.privateToken') ??
-      '';
+  /**
+   * The base URL of the API of this provider, e.g. "https://api.github.com",
+   * with no trailing slash.
+   */
+  apiBaseUrl: string;
+
+  /**
+   * The authorization token to use for requests to this provider.
+   *
+   * If no token is specified, anonymous API access is used.
+   */
+  token?: string;
+};
+
+export function getRequestOptions(provider: ProviderConfig): RequestInit {
+  const headers: HeadersInit = {
+    Accept: 'application/vnd.github.v3.raw',
+  };
+
+  if (provider.token) {
+    headers.Authorization = `token ${provider.token}`;
   }
 
-  getRequestOptions(): RequestInit {
-    const headers: HeadersInit = {
-      Accept: 'application/vnd.github.v3.raw',
-    };
+  return {
+    headers,
+  };
+}
 
-    if (this.privateToken !== '') {
-      headers.Authorization = `token ${this.privateToken}`;
+// Converts for example
+// from: https://github.com/a/b/blob/branchname/path/to/c.yaml
+// to:   https://api.github.com/repos/a/b/contents/path/to/c.yaml?ref=branchname
+export function getRawUrl(target: string, provider: ProviderConfig): URL {
+  try {
+    const oldPath = new URL(target).pathname.split('/');
+    const [, userOrOrg, repoName, blobOrRaw, ref, ...restOfPath] = oldPath;
+
+    if (
+      !userOrOrg ||
+      !repoName ||
+      (blobOrRaw !== 'blob' && blobOrRaw !== 'raw') ||
+      !restOfPath.join('/').match(/\.ya?ml$/)
+    ) {
+      throw new Error('Wrong URL or Invalid file path');
     }
 
-    const requestOptions: RequestInit = {
-      headers,
-    };
+    // Transform to API path
+    const newPath = [
+      'repos',
+      userOrOrg,
+      repoName,
+      'contents',
+      ...restOfPath,
+    ].join('/');
+    return new URL(`${provider.apiBaseUrl}/${newPath}?ref=${ref}`);
+  } catch (e) {
+    throw new Error(`Incorrect URL: ${target}, ${e}`);
+  }
+}
 
-    return requestOptions;
+export function readConfig(configRoot: Config): ProviderConfig[] {
+  const providers: ProviderConfig[] = [];
+
+  // In a previous version of the configuration, we only supported github,
+  // and the "privateToken" key held the token to use for it. The new
+  // configuration method is to use the "providers" key instead.
+  const config = configRoot.getOptionalConfig('catalog.processors.githubApi');
+  const providerConfigs = config?.getOptionalConfigArray('providers') ?? [];
+  const legacyToken = config?.getOptionalString('privateToken');
+
+  // First read all the explicit providers
+  for (const providerConfig of providerConfigs) {
+    const target = providerConfig.getString('target').replace(/\/+$/, '');
+    let apiBaseUrl = providerConfig.getOptionalString('apiBaseUrl');
+    const token = providerConfig.getOptionalString('token');
+
+    if (apiBaseUrl) {
+      apiBaseUrl = apiBaseUrl.replace(/\/+$/, '');
+    } else if (target === 'https://github.com') {
+      apiBaseUrl = 'https://api.github.com';
+    } else {
+      throw new Error(
+        `Provider at ${target} must configure an explicit apiBaseUrl`,
+      );
+    }
+
+    providers.push({ target, apiBaseUrl, token });
+  }
+
+  // If no explicit github.com provider was added, put one in the list as
+  // a convenience
+  if (!providers.some(p => p.target === 'https://github.com')) {
+    providers.push({
+      target: 'https://github.com',
+      apiBaseUrl: 'https://api.github.com',
+      token: legacyToken,
+    });
+  }
+
+  return providers;
+}
+
+/**
+ * A processor that adds the ability to read files from GitHub v3 APIs, such as
+ * the one exposed by GitHub itself.
+ */
+export class GithubApiReaderProcessor implements LocationProcessor {
+  private providers: ProviderConfig[];
+
+  static fromConfig(config: Config) {
+    return new GithubApiReaderProcessor(readConfig(config));
+  }
+
+  constructor(providers: ProviderConfig[]) {
+    this.providers = providers;
   }
 
   async readLocation(
@@ -54,10 +155,19 @@ export class GithubApiReaderProcessor implements LocationProcessor {
       return false;
     }
 
-    try {
-      const url = this.buildRawUrl(location.target);
+    const provider = this.providers.find(p =>
+      location.target.startsWith(`${p.target}/`),
+    );
+    if (!provider) {
+      throw new Error(
+        `There is no GitHub provider that matches ${location.target}. Please add a configuration entry for it under catalog.github.processors.githubApi.`,
+      );
+    }
 
-      const response = await fetch(url.toString(), this.getRequestOptions());
+    try {
+      const url = getRawUrl(location.target, provider);
+      const options = getRequestOptions(provider);
+      const response = await fetch(url.toString(), options);
 
       if (response.ok) {
         const data = await response.buffer();
@@ -79,50 +189,4 @@ export class GithubApiReaderProcessor implements LocationProcessor {
 
     return true;
   }
-
-  // Converts
-  // from: https://github.com/a/b/blob/master/path/to/c.yaml
-  // to:   https://api.github.com/repos/a/b/contents/path/to/c.yaml?ref=master
-  buildRawUrl(target: string): URL {
-    try {
-      const url = new URL(target);
-
-      const [
-        empty,
-        userOrOrg,
-        repoName,
-        blobKeyword,
-        ref,
-        ...restOfPath
-      ] = url.pathname.split('/');
-
-      if (
-        url.hostname !== 'github.com' ||
-        empty !== '' ||
-        userOrOrg === '' ||
-        repoName === '' ||
-        blobKeyword !== 'blob' ||
-        !restOfPath.join('/').match(/\.yaml$/)
-      ) {
-        throw new Error('Wrong GitHub URL or Invalid file path');
-      }
-
-      // transform to api
-      url.pathname = [
-        empty,
-        'repos',
-        userOrOrg,
-        repoName,
-        'contents',
-        ...restOfPath,
-      ].join('/');
-      url.hostname = 'api.github.com';
-      url.protocol = 'https';
-      url.search = `ref=${ref}`;
-
-      return url;
-    } catch (e) {
-      throw new Error(`Incorrect url: ${target}, ${e}`);
-    }
-  }
 }
diff --git a/plugins/jenkins/README.md b/plugins/jenkins/README.md
index a911704dc4..8f0d43cba7 100644
--- a/plugins/jenkins/README.md
+++ b/plugins/jenkins/README.md
@@ -14,17 +14,7 @@ Website: [https://jenkins.io/](https://jenkins.io/)
 yarn add @backstage/plugin-jenkins
 ```
 
-2. Add plugin API to your Backstage instance:
-
-```js
-// packages/app/src/api.ts
-import { JenkinsApi, jenkinsApiRef } from '@backstage/plugin-jenkins';
-
-const builder = ApiRegistry.builder();
-builder.add(jenkinsApiRef, new JenkinsApi(`${backendUrl}/proxy/jenkins/api`));
-```
-
-2. Add plugin itself:
+2. Add plugin:
 
 ```js
 // packages/app/src/plugins.ts
@@ -63,7 +53,7 @@ metadata:
   name: 'your-component'
   description: 'a description'
   annotations:
-    backstage.io/jenkins-github-folder: 'folder-name/job-name'
+    jenkins.io/github-folder: 'folder-name/job-name'
 spec:
   type: service
   lifecycle: experimental
diff --git a/plugins/jenkins/package.json b/plugins/jenkins/package.json
index 0d532f8c45..c62df08db2 100644
--- a/plugins/jenkins/package.json
+++ b/plugins/jenkins/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.1.1-alpha.21",
     "@backstage/core": "^0.1.1-alpha.21",
+    "@backstage/plugin-catalog": "^0.1.1-alpha.21",
     "@backstage/theme": "^0.1.1-alpha.21",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/jenkins/src/api/index.ts b/plugins/jenkins/src/api/index.ts
index 545a1da9cc..2b95fe97d9 100644
--- a/plugins/jenkins/src/api/index.ts
+++ b/plugins/jenkins/src/api/index.ts
@@ -15,7 +15,7 @@
  */
 
 import { createApiRef } from '@backstage/core';
-import { CITableBuildInfo } from '../pages/BuildsPage/lib/CITable';
+import { CITableBuildInfo } from '../components/BuildsPage/lib/CITable';
 
 const jenkins = require('jenkins');
 
@@ -65,6 +65,21 @@ export class JenkinsApi {
       })
       .pop();
 
+    const author = jobDetails.actions
+      .filter(
+        (action: any) =>
+          action._class ===
+          'jenkins.scm.api.metadata.ContributorMetadataAction',
+      )
+      .map((action: any) => {
+        return action.contributorDisplayName;
+      })
+      .pop();
+
+    if (author) {
+      scmInfo.author = author;
+    }
+
     return scmInfo;
   }
 
@@ -154,12 +169,15 @@ export class JenkinsApi {
     if (jobScmInfo) {
       source.url = jobScmInfo?.url;
       source.displayName = jobScmInfo?.displayName;
+      source.author = jobScmInfo?.author;
     }
 
     const path = new URL(jenkinsResult.url).pathname;
 
     return {
       id: path,
+      buildNumber: jenkinsResult.number,
+      buildUrl: jenkinsResult.url,
       buildName: jenkinsResult.fullDisplayName,
       status: jenkinsResult.building ? 'running' : jenkinsResult.result,
       onRestartClick: () => {
diff --git a/plugins/jenkins/src/assets/build-details.png b/plugins/jenkins/src/assets/build-details.png
index 396af428af..ee463fea43 100644
Binary files a/plugins/jenkins/src/assets/build-details.png and b/plugins/jenkins/src/assets/build-details.png differ
diff --git a/plugins/jenkins/src/assets/folder-results.png b/plugins/jenkins/src/assets/folder-results.png
index 2e14f3551f..c01e4cf437 100644
Binary files a/plugins/jenkins/src/assets/folder-results.png and b/plugins/jenkins/src/assets/folder-results.png differ
diff --git a/plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx
new file mode 100644
index 0000000000..637cd40d6d
--- /dev/null
+++ b/plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Content, Link } from '@backstage/core';
+import {
+  Typography,
+  Breadcrumbs,
+  Paper,
+  TableContainer,
+  Table,
+  TableRow,
+  TableCell,
+  TableBody,
+  Link as MaterialLink,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useBuildWithSteps } from '../useBuildWithSteps';
+import { useProjectSlugFromEntity } from '../useProjectSlugFromEntity';
+import { JenkinsRunStatus } from '../BuildsPage/lib/Status';
+import ExternalLinkIcon from '@material-ui/icons/Launch';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    maxWidth: 720,
+    margin: theme.spacing(2),
+  },
+  table: {
+    padding: theme.spacing(1),
+  },
+  externalLinkIcon: {
+    fontSize: 'inherit',
+    verticalAlign: 'bottom',
+  },
+}));
+
+const Page = () => (
+  <Content>
+    <BuildWithStepsView />
+  </Content>
+);
+
+const BuildWithStepsView = () => {
+  const { owner, repo } = useProjectSlugFromEntity();
+  const { branch, buildNumber } = useParams();
+  const classes = useStyles();
+  const buildPath = `${owner}/${repo}/${branch}/${buildNumber}`;
+  const [{ value }] = useBuildWithSteps(buildPath);
+
+  return (
+    <div className={classes.root}>
+      <Breadcrumbs aria-label="breadcrumb">
+        <Link to="../../..">Jobs</Link>
+        <Typography>Run</Typography>
+      </Breadcrumbs>
+      <TableContainer component={Paper} className={classes.table}>
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Branch</Typography>
+              </TableCell>
+              <TableCell>{value?.source?.branchName}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Message</Typography>
+              </TableCell>
+              <TableCell>{value?.source?.displayName}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Commit ID</Typography>
+              </TableCell>
+              <TableCell>{value?.source?.commit?.hash}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Status</Typography>
+              </TableCell>
+              <TableCell>
+                <JenkinsRunStatus status={value?.status} />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Author</Typography>
+              </TableCell>
+              <TableCell>{value?.source?.author}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>Jenkins</Typography>
+              </TableCell>
+              <TableCell>
+                <MaterialLink target="_blank" href={value?.buildUrl}>
+                  View on Jenkins{' '}
+                  <ExternalLinkIcon className={classes.externalLinkIcon} />
+                </MaterialLink>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <Typography noWrap>GitHub</Typography>
+              </TableCell>
+              <TableCell>
+                <MaterialLink target="_blank" href={value?.source.url}>
+                  View on GitHub{' '}
+                  <ExternalLinkIcon className={classes.externalLinkIcon} />
+                </MaterialLink>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};
+
+export default Page;
+export { BuildWithStepsView as BuildWithSteps };
diff --git a/plugins/jenkins/src/pages/BuildWithStepsPage/index.ts b/plugins/jenkins/src/components/BuildWithStepsPage/index.ts
similarity index 100%
rename from plugins/jenkins/src/pages/BuildWithStepsPage/index.ts
rename to plugins/jenkins/src/components/BuildWithStepsPage/index.ts
diff --git a/plugins/jenkins/src/pages/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx b/plugins/jenkins/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
similarity index 100%
rename from plugins/jenkins/src/pages/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
rename to plugins/jenkins/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
diff --git a/plugins/jenkins/src/pages/BuildWithStepsPage/lib/ActionOutput/index.ts b/plugins/jenkins/src/components/BuildWithStepsPage/lib/ActionOutput/index.ts
similarity index 100%
rename from plugins/jenkins/src/pages/BuildWithStepsPage/lib/ActionOutput/index.ts
rename to plugins/jenkins/src/components/BuildWithStepsPage/lib/ActionOutput/index.ts
diff --git a/plugins/jenkins/src/pages/BuildsPage/lib/CITable/CITable.tsx b/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx
similarity index 81%
rename from plugins/jenkins/src/pages/BuildsPage/lib/CITable/CITable.tsx
rename to plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx
index 7f17107374..282cbc59b5 100644
--- a/plugins/jenkins/src/pages/BuildsPage/lib/CITable/CITable.tsx
+++ b/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx
@@ -14,21 +14,26 @@
  * limitations under the License.
  */
 import React, { FC } from 'react';
-import { Link, Typography, Box, IconButton } from '@material-ui/core';
+import { Box, IconButton, Link, Typography } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import GitHubIcon from '@material-ui/icons/GitHub';
-import { Link as RouterLink } from 'react-router-dom';
+import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { Table, TableColumn } from '@backstage/core';
 import { JenkinsRunStatus } from '../Status';
+import { useBuilds } from '../../../useBuilds';
+import { useProjectSlugFromEntity } from '../../../useProjectSlugFromEntity';
+import { buildRouteRef } from '../../../../plugin';
 
 export type CITableBuildInfo = {
   id: string;
   buildName: string;
-  buildUrl?: string;
+  buildNumber: number;
+  buildUrl: string;
   source: {
     branchName: string;
     url: string;
     displayName: string;
+    author?: string;
     commit: {
       hash: string;
     };
@@ -105,7 +110,13 @@ const generatedColumns: TableColumn[] = [
     field: 'buildName',
     highlight: true,
     render: (row: Partial<CITableBuildInfo>) => (
-      <Link component={RouterLink} to={`/jenkins/job?url=${row.id}`}>
+      <Link
+        component={RouterLink}
+        to={generatePath(buildRouteRef.path, {
+          branch: row.source?.branchName!,
+          buildNumber: row.buildNumber?.toString()!,
+        })}
+      >
         {row.buildName}
       </Link>
     ),
@@ -177,7 +188,8 @@ type Props = {
   pageSize: number;
   onChangePageSize: (pageSize: number) => void;
 };
-export const CITable: FC<Props> = ({
+
+export const CITableView: FC<Props> = ({
   projectName,
   loading,
   pageSize,
@@ -191,7 +203,7 @@ export const CITable: FC<Props> = ({
   return (
     <Table
       isLoading={loading}
-      options={{ paging: true, pageSize }}
+      options={{ paging: true, pageSize, padding: 'dense' }}
       totalCount={total}
       page={page}
       actions={[
@@ -202,7 +214,7 @@ export const CITable: FC<Props> = ({
           onClick: () => retry(),
         },
       ]}
-      data={builds}
+      data={builds ?? []}
       onChangePage={onChangePage}
       onChangeRowsPerPage={onChangePageSize}
       title={
@@ -216,3 +228,18 @@ export const CITable: FC<Props> = ({
     />
   );
 };
+
+export const CITable = () => {
+  const { owner, repo } = useProjectSlugFromEntity();
+
+  const [tableProps, { setPage, retry, setPageSize }] = useBuilds(owner, repo);
+
+  return (
+    <CITableView
+      {...tableProps}
+      retry={retry}
+      onChangePageSize={setPageSize}
+      onChangePage={setPage}
+    />
+  );
+};
diff --git a/plugins/jenkins/src/pages/BuildsPage/lib/CITable/index.ts b/plugins/jenkins/src/components/BuildsPage/lib/CITable/index.ts
similarity index 100%
rename from plugins/jenkins/src/pages/BuildsPage/lib/CITable/index.ts
rename to plugins/jenkins/src/components/BuildsPage/lib/CITable/index.ts
diff --git a/plugins/jenkins/src/pages/BuildsPage/lib/Status/JenkinsRunStatus.tsx b/plugins/jenkins/src/components/BuildsPage/lib/Status/JenkinsRunStatus.tsx
similarity index 100%
rename from plugins/jenkins/src/pages/BuildsPage/lib/Status/JenkinsRunStatus.tsx
rename to plugins/jenkins/src/components/BuildsPage/lib/Status/JenkinsRunStatus.tsx
diff --git a/plugins/jenkins/src/pages/BuildsPage/lib/Status/index.ts b/plugins/jenkins/src/components/BuildsPage/lib/Status/index.ts
similarity index 100%
rename from plugins/jenkins/src/pages/BuildsPage/lib/Status/index.ts
rename to plugins/jenkins/src/components/BuildsPage/lib/Status/index.ts
diff --git a/plugins/jenkins/src/components/JenkinsPluginWidget/JenkinsLastBuildWidget.tsx b/plugins/jenkins/src/components/Cards/Cards.tsx
similarity index 78%
rename from plugins/jenkins/src/components/JenkinsPluginWidget/JenkinsLastBuildWidget.tsx
rename to plugins/jenkins/src/components/Cards/Cards.tsx
index 9bd16bf9e6..5034effdcf 100644
--- a/plugins/jenkins/src/components/JenkinsPluginWidget/JenkinsLastBuildWidget.tsx
+++ b/plugins/jenkins/src/components/Cards/Cards.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Entity } from '@backstage/catalog-model';
 import { Link, Theme, makeStyles, LinearProgress } from '@material-ui/core';
 import { InfoCard, StructuredMetadataTable } from '@backstage/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
-import { useBuilds } from '../../state';
-import { JenkinsRunStatus } from '../../pages/BuildsPage/lib/Status';
+import { useBuilds } from '../useBuilds';
+import { JenkinsRunStatus } from '../BuildsPage/lib/Status';
+import { useProjectSlugFromEntity } from '../useProjectSlugFromEntity';
 
 const useStyles = makeStyles<Theme>({
   externalLinkIcon: {
@@ -38,6 +38,7 @@ const WidgetContent = ({
 }) => {
   const classes = useStyles();
   if (loading || !lastRun) return <LinearProgress />;
+
   return (
     <StructuredMetadataTable
       metadata={{
@@ -60,20 +61,10 @@ const WidgetContent = ({
   );
 };
 
-export const JenkinsLastBuildWidget = ({
-  entity,
-  branch = 'master',
-}: {
-  entity: Entity;
-  branch: string;
-}) => {
-  const [owner, repo] = (
-    entity?.metadata.annotations?.['backstage.io/jenkins-github-folder'] ?? '/'
-  ).split('/');
-  const [{ loading, value }] = useBuilds(owner, repo, branch);
-
-  const lastRun = value ?? {};
-
+export const LatestRunCard = ({ branch = 'master' }: { branch: string }) => {
+  const { owner, repo } = useProjectSlugFromEntity();
+  const [{ builds, loading }] = useBuilds(owner, repo, branch);
+  const lastRun = builds ?? {};
   return (
     <InfoCard title={`Last ${branch} build`}>
       <WidgetContent loading={loading} branch={branch} lastRun={lastRun} />
diff --git a/plugins/jenkins/src/components/Layout/index.ts b/plugins/jenkins/src/components/Cards/index.ts
similarity index 93%
rename from plugins/jenkins/src/components/Layout/index.ts
rename to plugins/jenkins/src/components/Cards/index.ts
index 236fc98851..dace09e1a9 100644
--- a/plugins/jenkins/src/components/Layout/index.ts
+++ b/plugins/jenkins/src/components/Cards/index.ts
@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './Layout';
+export { LatestRunCard } from './Cards';
diff --git a/plugins/jenkins/src/components/PluginHeader/PluginHeader.tsx b/plugins/jenkins/src/components/PluginHeader/PluginHeader.tsx
deleted file mode 100644
index 501649e49a..0000000000
--- a/plugins/jenkins/src/components/PluginHeader/PluginHeader.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { ContentHeader, SupportButton } from '@backstage/core';
-import { Box, Typography } from '@material-ui/core';
-
-export type Props = { title?: string };
-export const PluginHeader = ({ title = 'Jenkins' }) => {
-  return (
-    <ContentHeader
-      title={title}
-      titleComponent={() => (
-        <Box alignItems="center" display="flex">
-          <Typography variant="h4">{title}</Typography>
-        </Box>
-      )}
-    >
-      <SupportButton>
-        This plugin allows you to view and interact with your builds in Jenkins.
-      </SupportButton>
-    </ContentHeader>
-  );
-};
diff --git a/plugins/jenkins/src/components/Router.tsx b/plugins/jenkins/src/components/Router.tsx
new file mode 100644
index 0000000000..56df5456bc
--- /dev/null
+++ b/plugins/jenkins/src/components/Router.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { Route, Routes } from 'react-router';
+import { buildRouteRef, rootRouteRef } from '../plugin';
+import { DetailedViewPage } from './BuildWithStepsPage/';
+import { JENKINS_ANNOTATION } from '../constants';
+import { Entity } from '@backstage/catalog-model';
+import { WarningPanel } from '@backstage/core';
+import { CITable } from './BuildsPage/lib/CITable';
+
+export const isPluginApplicableToEntity = (entity: Entity) =>
+  Boolean(entity.metadata.annotations?.[JENKINS_ANNOTATION]) &&
+  entity.metadata.annotations?.[JENKINS_ANNOTATION] !== '';
+
+export const Router = ({ entity }: { entity: Entity }) => {
+  return !isPluginApplicableToEntity(entity) ? (
+    <WarningPanel title="Jenkins plugin:">
+      <pre>entity.metadata.annotations['{JENKINS_ANNOTATION}']</pre>
+      key is missing on the entity.
+    </WarningPanel>
+  ) : (
+    <Routes>
+      <Route path={`/${rootRouteRef.path}`} element={<CITable />} />
+      <Route path={`/${buildRouteRef.path}`} element={<DetailedViewPage />} />
+    </Routes>
+  );
+};
diff --git a/plugins/jenkins/src/state/useAsyncPolling.ts b/plugins/jenkins/src/components/useAsyncPolling.ts
similarity index 100%
rename from plugins/jenkins/src/state/useAsyncPolling.ts
rename to plugins/jenkins/src/components/useAsyncPolling.ts
diff --git a/plugins/jenkins/src/state/useBuildWithSteps.ts b/plugins/jenkins/src/components/useBuildWithSteps.ts
similarity index 97%
rename from plugins/jenkins/src/state/useBuildWithSteps.ts
rename to plugins/jenkins/src/components/useBuildWithSteps.ts
index 617b2b1f4f..86d8162612 100644
--- a/plugins/jenkins/src/state/useBuildWithSteps.ts
+++ b/plugins/jenkins/src/components/useBuildWithSteps.ts
@@ -16,7 +16,7 @@
 import { errorApiRef, useApi } from '@backstage/core';
 import { useCallback } from 'react';
 import { useAsyncRetry } from 'react-use';
-import { jenkinsApiRef } from '../api/index';
+import { jenkinsApiRef } from '../api';
 import { useAsyncPolling } from './useAsyncPolling';
 
 const INTERVAL_AMOUNT = 1500;
diff --git a/plugins/jenkins/src/state/useBuilds.ts b/plugins/jenkins/src/components/useBuilds.ts
similarity index 92%
rename from plugins/jenkins/src/state/useBuilds.ts
rename to plugins/jenkins/src/components/useBuilds.ts
index deb3125637..62e3719dbd 100644
--- a/plugins/jenkins/src/state/useBuilds.ts
+++ b/plugins/jenkins/src/components/useBuilds.ts
@@ -56,8 +56,9 @@ export function useBuilds(owner: string, repo: string, branch?: string) {
     });
   }, [repo, getBuilds]);
 
-  const { loading, value, retry } = useAsyncRetry(
-    () => getBuilds().then(builds => builds ?? [], restartBuild),
+  const { loading, value: builds, retry } = useAsyncRetry(
+    () =>
+      getBuilds().then(retrievedBuilds => retrievedBuilds ?? [], restartBuild),
     [page, pageSize, getBuilds],
   );
 
@@ -67,12 +68,12 @@ export function useBuilds(owner: string, repo: string, branch?: string) {
       page,
       pageSize,
       loading,
-      value,
+      builds,
       projectName,
       total,
     },
     {
-      getBuilds,
+      builds,
       setPage,
       setPageSize,
       restartBuild,
diff --git a/plugins/jenkins/src/components/JenkinsPluginWidget/JenkinsBuildsWidget.tsx b/plugins/jenkins/src/components/useProjectSlugFromEntity.ts
similarity index 65%
rename from plugins/jenkins/src/components/JenkinsPluginWidget/JenkinsBuildsWidget.tsx
rename to plugins/jenkins/src/components/useProjectSlugFromEntity.ts
index 469869af69..1dca918990 100644
--- a/plugins/jenkins/src/components/JenkinsPluginWidget/JenkinsBuildsWidget.tsx
+++ b/plugins/jenkins/src/components/useProjectSlugFromEntity.ts
@@ -13,15 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useEntity } from '@backstage/plugin-catalog';
+import { JENKINS_ANNOTATION } from '../constants';
 
-import React from 'react';
-import { Builds } from '../../pages/BuildsPage/lib/Builds';
-import { Entity } from '@backstage/catalog-model';
+export const useProjectSlugFromEntity = () => {
+  const { entity } = useEntity();
 
-export const JenkinsBuildsWidget = ({ entity }: { entity: Entity }) => {
   const [owner, repo] = (
-    entity?.metadata.annotations?.['backstage.io/jenkins-github-folder'] ?? '/'
+    entity.metadata.annotations?.[JENKINS_ANNOTATION] ?? ''
   ).split('/');
-
-  return <Builds owner={owner} repo={repo} />;
+  return { owner, repo };
 };
diff --git a/plugins/jenkins/src/components/PluginHeader/index.ts b/plugins/jenkins/src/constants.ts
similarity index 90%
rename from plugins/jenkins/src/components/PluginHeader/index.ts
rename to plugins/jenkins/src/constants.ts
index 4de972f6f2..fe8980de73 100644
--- a/plugins/jenkins/src/components/PluginHeader/index.ts
+++ b/plugins/jenkins/src/constants.ts
@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './PluginHeader';
+export const JENKINS_ANNOTATION = 'jenkins.io/github-folder';
diff --git a/plugins/jenkins/src/index.ts b/plugins/jenkins/src/index.ts
index c7f2d8dc28..30fa0c70a5 100644
--- a/plugins/jenkins/src/index.ts
+++ b/plugins/jenkins/src/index.ts
@@ -14,5 +14,8 @@
  * limitations under the License.
  */
 
-export { plugin, JenkinsBuildsWidget, JenkinsLastBuildWidget } from './plugin';
+export { plugin } from './plugin';
+export { LatestRunCard } from './components/Cards';
+export { Router, isPluginApplicableToEntity } from './components/Router';
+export { JENKINS_ANNOTATION } from './constants';
 export * from './api';
diff --git a/plugins/jenkins/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/jenkins/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
deleted file mode 100644
index ab4fc3f34f..0000000000
--- a/plugins/jenkins/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React, { FC, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { Content, InfoCard, Progress } from '@backstage/core';
-import { Grid, Box, Link, IconButton } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PluginHeader } from '../../components/PluginHeader';
-import { ActionOutput } from './lib/ActionOutput/ActionOutput';
-import { Layout } from '../../components/Layout';
-import LaunchIcon from '@material-ui/icons/Launch';
-import GitHubIcon from '@material-ui/icons/GitHub';
-import { useBuildWithSteps } from '../../state/useBuildWithSteps';
-
-const IconLink = IconButton as typeof Link;
-const BuildName: FC<{ build?: any }> = ({ build }) => (
-  <Box display="flex" alignItems="center">
-    {build?.buildName}
-    <IconLink href={build?.url} target="_blank" title="View on Jenkins">
-      <LaunchIcon /> {/* TODO use Jenkins logo*/}
-    </IconLink>
-    <IconLink href={build?.source.url} target="_blank" title="View on GitHub">
-      <GitHubIcon />
-    </IconLink>
-  </Box>
-);
-const useStyles = makeStyles(theme => ({
-  neutral: {},
-  failed: {
-    position: 'relative',
-    '&:after': {
-      pointerEvents: 'none',
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      boxShadow: `inset 4px 0px 0px ${theme.palette.error.main}`,
-    },
-  },
-  running: {
-    position: 'relative',
-    '&:after': {
-      pointerEvents: 'none',
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      boxShadow: `inset 4px 0px 0px ${theme.palette.info.main}`,
-    },
-  },
-  cardContent: {
-    backgroundColor: theme.palette.background.default,
-  },
-  success: {
-    position: 'relative',
-    '&:after': {
-      pointerEvents: 'none',
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      boxShadow: `inset 4px 0px 0px ${theme.palette.success.main}`,
-    },
-  },
-}));
-
-const pickClassName = (
-  classes: ReturnType<typeof useStyles>,
-  build: any = {},
-) => {
-  if (build.result === 'UNSTABLE') return classes.failed;
-  if (build.result === 'FAILURE') return classes.failed;
-  if (build.building) return classes.running;
-  if (build.status === 'SUCCESS') return classes.success;
-
-  return classes.neutral;
-};
-
-const Page = () => (
-  <Layout>
-    <Content>
-      <BuildWithStepsView />
-    </Content>
-  </Layout>
-);
-
-const BuildWithStepsView = () => {
-  const [searchParams] = useSearchParams();
-  const buildPath = searchParams.get('url') || '';
-  const classes = useStyles();
-  const [{ loading, value }, { startPolling, stopPolling }] = useBuildWithSteps(
-    buildPath,
-  );
-
-  useEffect(() => {
-    startPolling();
-    return () => stopPolling();
-  }, [buildPath, startPolling, stopPolling]);
-  return (
-    <>
-      <PluginHeader title={value?.source.displayName || 'Build details'} />
-
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <InfoCard
-            className={pickClassName(classes, value)}
-            title={<BuildName build={value} />}
-            cardClassName={classes.cardContent}
-          >
-            {loading ? <Progress /> : <BuildsList build={value} />}
-          </InfoCard>
-        </Grid>
-      </Grid>
-    </>
-  );
-};
-
-const BuildsList: FC<{ build?: any }> = ({ build }) => (
-  <Box>
-    {build &&
-      build.steps &&
-      build.steps.map(({ name, actions }: { name: string; actions: any[] }) => (
-        <ActionsList name={name} actions={actions} />
-      ))}
-  </Box>
-);
-
-const ActionsList: FC<{ actions: any[]; name: string }> = ({ actions }) => {
-  const classes = useStyles();
-  return (
-    <>
-      {actions.map((action: any) => (
-        <ActionOutput
-          className={action.failed ? classes.failed : classes.success}
-          action={action}
-          name={action.name}
-          url={action.output_url || ''}
-        />
-      ))}
-    </>
-  );
-};
-
-export default Page;
-export { BuildWithStepsView as BuildWithSteps };
diff --git a/plugins/jenkins/src/pages/BuildsPage/lib/Builds/Builds.tsx b/plugins/jenkins/src/pages/BuildsPage/lib/Builds/Builds.tsx
deleted file mode 100644
index 79f081c82d..0000000000
--- a/plugins/jenkins/src/pages/BuildsPage/lib/Builds/Builds.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { CITable } from '../CITable';
-import { useBuilds } from '../../../../state';
-
-export const Builds = ({ owner, repo }: { owner: string; repo: string }) => {
-  const [
-    { total, loading, value, projectName, page, pageSize },
-    { setPage, retry, setPageSize },
-  ] = useBuilds(owner, repo);
-  return (
-    <CITable
-      total={total}
-      loading={loading}
-      retry={retry}
-      builds={value ?? []}
-      projectName={projectName}
-      page={page}
-      onChangePage={setPage}
-      pageSize={pageSize}
-      onChangePageSize={setPageSize}
-    />
-  );
-};
diff --git a/plugins/jenkins/src/pages/BuildsPage/lib/Builds/index.ts b/plugins/jenkins/src/pages/BuildsPage/lib/Builds/index.ts
deleted file mode 100644
index e91a9496b7..0000000000
--- a/plugins/jenkins/src/pages/BuildsPage/lib/Builds/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Builds } from './Builds';
diff --git a/plugins/jenkins/src/plugin.ts b/plugins/jenkins/src/plugin.ts
index 4d1af322c4..8282f6b7f9 100644
--- a/plugins/jenkins/src/plugin.ts
+++ b/plugins/jenkins/src/plugin.ts
@@ -20,11 +20,15 @@ import {
   createApiFactory,
   configApiRef,
 } from '@backstage/core';
-import { DetailedViewPage } from './pages/BuildWithStepsPage';
 import { jenkinsApiRef, JenkinsApi } from './api';
 
+export const rootRouteRef = createRouteRef({
+  path: '',
+  title: 'Jenkins',
+});
+
 export const buildRouteRef = createRouteRef({
-  path: '/jenkins/job',
+  path: 'run/:branch/:buildNumber',
   title: 'Jenkins run',
 });
 
@@ -40,10 +44,4 @@ export const plugin = createPlugin({
         ),
     }),
   ],
-  register({ router }) {
-    router.addRoute(buildRouteRef, DetailedViewPage);
-  },
 });
-
-export { JenkinsBuildsWidget } from './components/JenkinsPluginWidget/JenkinsBuildsWidget';
-export { JenkinsLastBuildWidget } from './components/JenkinsPluginWidget/JenkinsLastBuildWidget';
diff --git a/plugins/jenkins/src/state/index.ts b/plugins/jenkins/src/state/index.ts
deleted file mode 100644
index d21a380c2a..0000000000
--- a/plugins/jenkins/src/state/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export * from './useBuilds';
-export * from './useBuildWithSteps';
diff --git a/plugins/scaffolder-backend/package.json b/plugins/scaffolder-backend/package.json
index 2283dd5d05..e0a9ae5129 100644
--- a/plugins/scaffolder-backend/package.json
+++ b/plugins/scaffolder-backend/package.json
@@ -23,6 +23,8 @@
     "@backstage/backend-common": "^0.1.1-alpha.21",
     "@backstage/catalog-model": "^0.1.1-alpha.21",
     "@backstage/config": "^0.1.1-alpha.21",
+    "@gitbeaker/core": "^23.5.0",
+    "@gitbeaker/node": "^23.5.0",
     "@octokit/rest": "^18.0.0",
     "@types/dockerode": "^2.5.32",
     "@types/express": "^4.17.6",
@@ -33,11 +35,12 @@
     "express": "^4.17.1",
     "express-promise-router": "^3.0.3",
     "fs-extra": "^9.0.0",
-    "git-url-parse": "^11.1.2",
+    "git-url-parse": "^11.2.0",
     "globby": "^11.0.0",
     "helmet": "^4.0.0",
+    "jsonschema": "^1.2.6",
     "morgan": "^1.10.0",
-    "nodegit": "0.26.5",
+    "nodegit": "0.27.0",
     "uuid": "^8.2.0",
     "winston": "^3.2.1",
     "yaml": "^1.10.0"
diff --git a/plugins/scaffolder-backend/sample-templates/docs-template/template.yaml b/plugins/scaffolder-backend/sample-templates/docs-template/template.yaml
index b4bd45d163..31b57135ad 100644
--- a/plugins/scaffolder-backend/sample-templates/docs-template/template.yaml
+++ b/plugins/scaffolder-backend/sample-templates/docs-template/template.yaml
@@ -17,6 +17,7 @@ spec:
   schema:
     required: 
       - component_id
+      - description
     properties:
       component_id:
         title: Name
diff --git a/plugins/scaffolder-backend/src/scaffolder/__mocks__/@gitbeaker/node/index.ts b/plugins/scaffolder-backend/src/scaffolder/__mocks__/@gitbeaker/node/index.ts
new file mode 100644
index 0000000000..abf6a25be6
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/__mocks__/@gitbeaker/node/index.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const mockGitlabClient = {
+  Namespaces: {
+    show: jest.fn(),
+  },
+  Projects: {
+    create: jest.fn(),
+  },
+  Users: {
+    current: jest.fn(),
+  },
+};
+
+export class Gitlab {
+  constructor() {
+    return mockGitlabClient;
+  }
+}
diff --git a/plugins/scaffolder-backend/src/scaffolder/__mocks__/@octokit/rest/index.ts b/plugins/scaffolder-backend/src/scaffolder/__mocks__/@octokit/rest/index.ts
index a302bc5931..e0e9efa479 100644
--- a/plugins/scaffolder-backend/src/scaffolder/__mocks__/@octokit/rest/index.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/__mocks__/@octokit/rest/index.ts
@@ -18,10 +18,14 @@ export const mockGithubClient = {
   repos: {
     createInOrg: jest.fn(),
     createForAuthenticatedUser: jest.fn(),
+    addCollaborator: jest.fn(),
   },
   users: {
     getByUsername: jest.fn(),
   },
+  teams: {
+    addOrUpdateRepoPermissionsInOrg: jest.fn(),
+  },
 };
 
 export class Octokit {
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/helpers.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/helpers.test.ts
similarity index 100%
rename from plugins/scaffolder-backend/src/scaffolder/stages/prepare/helpers.test.ts
rename to plugins/scaffolder-backend/src/scaffolder/stages/helpers.test.ts
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/helpers.ts b/plugins/scaffolder-backend/src/scaffolder/stages/helpers.ts
similarity index 100%
rename from plugins/scaffolder-backend/src/scaffolder/stages/prepare/helpers.ts
rename to plugins/scaffolder-backend/src/scaffolder/stages/helpers.ts
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/index.ts b/plugins/scaffolder-backend/src/scaffolder/stages/index.ts
index 78ea30db79..dfe49a8aa5 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/index.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/index.ts
@@ -16,3 +16,4 @@
 export * from './prepare';
 export * from './publish';
 export * from './templater';
+export * from './helpers';
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts
index 7a8361d6ea..b5ac846cf2 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts
@@ -17,7 +17,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import os from 'os';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
-import { parseLocationAnnotation } from './helpers';
+import { parseLocationAnnotation } from '../helpers';
 import { InputError } from '@backstage/backend-common';
 import { PreparerBase } from './types';
 
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.ts
index f53151e55d..ba4adcabd9 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.ts
@@ -17,7 +17,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import os from 'os';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
-import { parseLocationAnnotation } from './helpers';
+import { parseLocationAnnotation } from '../helpers';
 import { InputError } from '@backstage/backend-common';
 import { PreparerBase } from './types';
 import GitUriParser from 'git-url-parse';
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.test.ts
new file mode 100644
index 0000000000..b25886b027
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.test.ts
@@ -0,0 +1,143 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const mocks = {
+  Clone: { clone: jest.fn() },
+  CheckoutOptions: jest.fn(() => {}),
+};
+jest.doMock('nodegit', () => mocks);
+
+import { GitlabPreparer } from './gitlab';
+import {
+  TemplateEntityV1alpha1,
+  LOCATION_ANNOTATION,
+} from '@backstage/catalog-model';
+import { ConfigReader } from '@backstage/config';
+
+const mockEntityWithProtocol = (protocol: string): TemplateEntityV1alpha1 => ({
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Template',
+  metadata: {
+    annotations: {
+      [LOCATION_ANNOTATION]: `${protocol}:https://gitlab.com/benjdlambert/backstage-graphql-template/-/blob/master/template.yaml`,
+    },
+    name: 'graphql-starter',
+    title: 'GraphQL Service',
+    description:
+      'A GraphQL starter template for backstage to get you up and running\nthe best pracices with GraphQL\n',
+    uid: '9cf16bad-16e0-4213-b314-c4eec773c50b',
+    etag: 'ZTkxMjUxMjUtYWY3Yi00MjU2LWFkYWMtZTZjNjU5ZjJhOWM2',
+    generation: 1,
+  },
+  spec: {
+    type: 'website',
+    templater: 'cookiecutter',
+    path: './template',
+    schema: {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      required: ['storePath', 'owner'],
+      properties: {
+        owner: {
+          type: 'string',
+          title: 'Owner',
+          description: 'Who is going to own this component',
+        },
+        storePath: {
+          type: 'string',
+          title: 'Store path',
+          description: 'GitHub store path in org/repo format',
+        },
+      },
+    },
+  },
+});
+
+describe('GitLabPreparer', () => {
+  let mockEntity: TemplateEntityV1alpha1;
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  ['gitlab', 'gitlab/api'].forEach(protocol => {
+    it(`calls the clone command with the correct arguments for a repository using the ${protocol} protocol`, async () => {
+      const preparer = new GitlabPreparer(ConfigReader.fromConfigs([]));
+      mockEntity = mockEntityWithProtocol(protocol);
+      await preparer.prepare(mockEntity);
+      expect(mocks.Clone.clone).toHaveBeenNthCalledWith(
+        1,
+        'https://gitlab.com/benjdlambert/backstage-graphql-template',
+        expect.any(String),
+        {},
+      );
+    });
+
+    it(`calls the clone command with the correct arguments if an access token is provided for a repository using the ${protocol} protocol`, async () => {
+      const preparer = new GitlabPreparer(
+        ConfigReader.fromConfigs([
+          {
+            context: '',
+            data: {
+              catalog: {
+                processors: {
+                  gitlabApi: {
+                    privateToken: 'fake-token',
+                  },
+                },
+              },
+            },
+          },
+        ]),
+      );
+      mockEntity = mockEntityWithProtocol(protocol);
+      await preparer.prepare(mockEntity);
+      expect(mocks.Clone.clone).toHaveBeenNthCalledWith(
+        1,
+        'https://gitlab.com/benjdlambert/backstage-graphql-template',
+        expect.any(String),
+        {
+          fetchOpts: {
+            callbacks: {
+              credentials: expect.anything(),
+            },
+          },
+        },
+      );
+    });
+
+    it(`calls the clone command with the correct arguments for a repository when no path is provided using the ${protocol} protocol`, async () => {
+      const preparer = new GitlabPreparer(ConfigReader.fromConfigs([]));
+      mockEntity = mockEntityWithProtocol(protocol);
+      delete mockEntity.spec.path;
+      await preparer.prepare(mockEntity);
+      expect(mocks.Clone.clone).toHaveBeenNthCalledWith(
+        1,
+        'https://gitlab.com/benjdlambert/backstage-graphql-template',
+        expect.any(String),
+        {},
+      );
+    });
+
+    it(`return the temp directory with the path to the folder if it is specified using the ${protocol} protocol`, async () => {
+      const preparer = new GitlabPreparer(ConfigReader.fromConfigs([]));
+      mockEntity = mockEntityWithProtocol(protocol);
+      mockEntity.spec.path = './template/test/1/2/3';
+      const response = await preparer.prepare(mockEntity);
+
+      expect(response.split('\\').join('/')).toMatch(
+        /\/template\/test\/1\/2\/3$/,
+      );
+    });
+  });
+});
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.ts
new file mode 100644
index 0000000000..8efc158a96
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import fs from 'fs-extra';
+import path from 'path';
+import os from 'os';
+import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
+import { parseLocationAnnotation } from '../helpers';
+import { InputError } from '@backstage/backend-common';
+import { PreparerBase } from './types';
+import GitUriParser from 'git-url-parse';
+import { Clone, Cred } from 'nodegit';
+import { Config } from '@backstage/config';
+
+export class GitlabPreparer implements PreparerBase {
+  private readonly privateToken: string;
+
+  constructor(config: Config) {
+    this.privateToken =
+      config.getOptionalString('catalog.processors.gitlabApi.privateToken') ??
+      '';
+  }
+
+  async prepare(template: TemplateEntityV1alpha1): Promise<string> {
+    const { protocol, location } = parseLocationAnnotation(template);
+
+    if (['gitlab', 'gitlab/api'].indexOf(protocol) < 0) {
+      throw new InputError(
+        `Wrong location protocol: ${protocol}, should be 'gitlab' or 'gitlab/api'`,
+      );
+    }
+    const templateId = template.metadata.name;
+
+    const parsedGitLocation = GitUriParser(location);
+    const repositoryCheckoutUrl = parsedGitLocation.toString('https');
+
+    const tempDir = await fs.promises.mkdtemp(
+      path.join(os.tmpdir(), templateId),
+    );
+
+    const templateDirectory = path.join(
+      `${path.dirname(parsedGitLocation.filepath)}`,
+      template.spec.path ?? '.',
+    );
+
+    const options = this.privateToken
+      ? {
+          fetchOpts: {
+            callbacks: {
+              credentials: () =>
+                Cred.userpassPlaintextNew('oauth2', this.privateToken),
+            },
+          },
+        }
+      : {};
+
+    await Clone.clone(repositoryCheckoutUrl, tempDir, options);
+
+    return path.resolve(tempDir, templateDirectory);
+  }
+}
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/index.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/index.ts
index 4ae4f68164..80a7dc620d 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/index.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/index.ts
@@ -15,6 +15,6 @@
  */
 export * from './preparers';
 export * from './types';
-export * from './helpers';
 export * from './file';
 export * from './github';
+export * from './gitlab';
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/preparers.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/preparers.ts
index 046890bdca..5efb3ad60d 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/preparers.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/preparers.ts
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import { PreparerBase, RemoteProtocol, PreparerBuilder } from './types';
+import { PreparerBase, PreparerBuilder } from './types';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
-import { parseLocationAnnotation } from './helpers';
+import { parseLocationAnnotation } from '../helpers';
+import { RemoteProtocol } from '../types';
 
 export class Preparers implements PreparerBuilder {
   private preparerMap = new Map<RemoteProtocol, PreparerBase>();
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/types.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/types.ts
index adbc38ef58..c9dd14c0a3 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/types.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/types.ts
@@ -15,6 +15,7 @@
  */
 import type { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import { Logger } from 'winston';
+import { RemoteProtocol } from '../types';
 
 export type PreparerBase = {
   /**
@@ -32,5 +33,3 @@ export type PreparerBuilder = {
   register(protocol: RemoteProtocol, preparer: PreparerBase): void;
   get(template: TemplateEntityV1alpha1): PreparerBase;
 };
-
-export type RemoteProtocol = 'file' | 'github';
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts
index 718c01438c..e68b0d0447 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts
@@ -30,6 +30,7 @@ const { mockGithubClient } = require('@octokit/rest') as {
   mockGithubClient: {
     repos: jest.Mocked<Octokit['repos']>;
     users: jest.Mocked<Octokit['users']>;
+    teams: jest.Mocked<Octokit['teams']>;
   };
 };
 
@@ -53,14 +54,235 @@ const {
 };
 
 describe('GitHub Publisher', () => {
-  const publisher = new GithubPublisher({ client: new Octokit() });
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  describe('publish: createRemoteInGithub', () => {
-    it('should use octokit to create a repo in an organisation if the organisation property is set', async () => {
+  describe('with public repo visibility', () => {
+    const publisher = new GithubPublisher({
+      client: new Octokit(),
+      token: 'abc',
+      repoVisibility: 'public',
+    });
+
+    describe('publish: createRemoteInGithub', () => {
+      it('should use octokit to create a repo in an organisation if the organisation property is set', async () => {
+        mockGithubClient.repos.createInOrg.mockResolvedValue({
+          data: {
+            clone_url: 'mockclone',
+          },
+        } as OctokitResponse<ReposCreateInOrgResponseData>);
+
+        await publisher.publish({
+          values: {
+            storePath: 'blam/test',
+            owner: 'bob',
+            access: 'blam/team',
+          },
+          directory: '/tmp/test',
+        });
+
+        expect(mockGithubClient.repos.createInOrg).toHaveBeenCalledWith({
+          org: 'blam',
+          name: 'test',
+          private: false,
+          visibility: 'public',
+        });
+        expect(
+          mockGithubClient.teams.addOrUpdateRepoPermissionsInOrg,
+        ).toHaveBeenCalledWith({
+          org: 'blam',
+          team_slug: 'team',
+          owner: 'blam',
+          repo: 'test',
+          permission: 'admin',
+        });
+      });
+
+      it('should use octokit to create a repo in the authed user if the organisation property is not set', async () => {
+        mockGithubClient.repos.createForAuthenticatedUser.mockResolvedValue({
+          data: {
+            clone_url: 'mockclone',
+          },
+        } as OctokitResponse<ReposCreateInOrgResponseData>);
+        mockGithubClient.users.getByUsername.mockResolvedValue({
+          data: {
+            type: 'User',
+          },
+        } as OctokitResponse<UsersGetByUsernameResponseData>);
+
+        await publisher.publish({
+          values: {
+            storePath: 'blam/test',
+            owner: 'bob',
+            access: 'blam',
+          },
+          directory: '/tmp/test',
+        });
+
+        expect(
+          mockGithubClient.repos.createForAuthenticatedUser,
+        ).toHaveBeenCalledWith({
+          name: 'test',
+          private: false,
+        });
+        expect(mockGithubClient.repos.addCollaborator).not.toHaveBeenCalled();
+      });
+    });
+
+    it('should invite other user in the authed user', async () => {
+      mockGithubClient.repos.createForAuthenticatedUser.mockResolvedValue({
+        data: {
+          clone_url: 'mockclone',
+        },
+      } as OctokitResponse<ReposCreateInOrgResponseData>);
+      mockGithubClient.users.getByUsername.mockResolvedValue({
+        data: {
+          type: 'User',
+        },
+      } as OctokitResponse<UsersGetByUsernameResponseData>);
+
+      await publisher.publish({
+        values: {
+          storePath: 'blam/test',
+          owner: 'bob',
+          access: 'bob',
+          description: 'description',
+        },
+        directory: '/tmp/test',
+      });
+
+      expect(
+        mockGithubClient.repos.createForAuthenticatedUser,
+      ).toHaveBeenCalledWith({
+        description: 'description',
+        name: 'test',
+        private: false,
+      });
+      expect(mockGithubClient.repos.addCollaborator).toHaveBeenCalledWith({
+        owner: 'blam',
+        repo: 'test',
+        username: 'bob',
+        permission: 'admin',
+      });
+    });
+
+    describe('publish: createGitDirectory', () => {
+      const values = {
+        storePath: 'blam/test',
+        owner: 'lols',
+        access: 'lols',
+      };
+
+      const mockDir = '/tmp/test/dir';
+
+      mockGithubClient.repos.createInOrg.mockResolvedValue({
+        data: {
+          clone_url: 'mockclone',
+        },
+      } as OctokitResponse<ReposCreateInOrgResponseData>);
+      mockGithubClient.users.getByUsername.mockResolvedValue({
+        data: {
+          type: 'Organization',
+        },
+      } as OctokitResponse<UsersGetByUsernameResponseData>);
+
+      it('should call init on the repo with the directory', async () => {
+        await publisher.publish({
+          values,
+          directory: mockDir,
+        });
+
+        expect(Repository.init).toHaveBeenCalledWith(mockDir, 0);
+      });
+
+      it('should call refresh index on the index and write the new files', async () => {
+        await publisher.publish({
+          values,
+          directory: mockDir,
+        });
+
+        expect(mockRepo.refreshIndex).toHaveBeenCalled();
+      });
+
+      it('should call add all files and write', async () => {
+        await publisher.publish({
+          values,
+          directory: mockDir,
+        });
+
+        expect(mockIndex.addAll).toHaveBeenCalled();
+        expect(mockIndex.write).toHaveBeenCalled();
+        expect(mockIndex.writeTree).toHaveBeenCalled();
+      });
+
+      it('should create a commit with on head with the right name and commiter', async () => {
+        const mockSignature = { mockSignature: 'bloblly' };
+        Signature.now.mockReturnValue(mockSignature);
+
+        await publisher.publish({
+          values,
+          directory: mockDir,
+        });
+
+        expect(Signature.now).toHaveBeenCalledTimes(2);
+        expect(Signature.now).toHaveBeenCalledWith(
+          'Scaffolder',
+          'scaffolder@backstage.io',
+        );
+
+        expect(mockRepo.createCommit).toHaveBeenCalledWith(
+          'HEAD',
+          mockSignature,
+          mockSignature,
+          'initial commit',
+          'mockoid',
+          [],
+        );
+      });
+
+      it('creates a remote with the repo and remote', async () => {
+        await publisher.publish({
+          values,
+          directory: mockDir,
+        });
+
+        expect(Remote.create).toHaveBeenCalledWith(
+          mockRepo,
+          'origin',
+          'mockclone',
+        );
+      });
+
+      it('shoud push to the remote repo', async () => {
+        await publisher.publish({
+          values,
+          directory: mockDir,
+        });
+
+        const [remotes, { callbacks }] = mockRemote.push.mock
+          .calls[0] as NodeGit.PushOptions[];
+
+        expect(remotes).toEqual(['refs/heads/master:refs/heads/master']);
+
+        callbacks?.credentials?.();
+
+        expect(Cred.userpassPlaintextNew).toHaveBeenCalledWith(
+          'abc',
+          'x-oauth-basic',
+        );
+      });
+    });
+  });
+
+  describe('with internal repo visibility', () => {
+    const publisher = new GithubPublisher({
+      client: new Octokit(),
+      token: 'abc',
+      repoVisibility: 'internal',
+    });
+
+    it('creates a private repository in the organization with visibility set to internal', async () => {
       mockGithubClient.repos.createInOrg.mockResolvedValue({
         data: {
           clone_url: 'mockclone',
@@ -74,6 +296,7 @@ describe('GitHub Publisher', () => {
 
       await publisher.publish({
         values: {
+          isOrg: true,
           storePath: 'blam/test',
           owner: 'bob',
         },
@@ -83,10 +306,20 @@ describe('GitHub Publisher', () => {
       expect(mockGithubClient.repos.createInOrg).toHaveBeenCalledWith({
         org: 'blam',
         name: 'test',
+        private: true,
+        visibility: 'internal',
       });
     });
+  });
 
-    it('should use octokit to create a repo in the authed user if the organisation property is not set', async () => {
+  describe('private visibility in a user account', () => {
+    const publisher = new GithubPublisher({
+      client: new Octokit(),
+      token: 'abc',
+      repoVisibility: 'private',
+    });
+
+    it('creates a private repository', async () => {
       mockGithubClient.repos.createForAuthenticatedUser.mockResolvedValue({
         data: {
           clone_url: 'mockclone',
@@ -110,116 +343,8 @@ describe('GitHub Publisher', () => {
         mockGithubClient.repos.createForAuthenticatedUser,
       ).toHaveBeenCalledWith({
         name: 'test',
+        private: true,
       });
     });
   });
-
-  describe('publish: createGitDirectory', () => {
-    const values = {
-      isOrg: true,
-      storePath: 'blam/test',
-      owner: 'lols',
-    };
-
-    const mockDir = '/tmp/test/dir';
-
-    mockGithubClient.repos.createInOrg.mockResolvedValue({
-      data: {
-        clone_url: 'mockclone',
-      },
-    } as OctokitResponse<ReposCreateInOrgResponseData>);
-    mockGithubClient.users.getByUsername.mockResolvedValue({
-      data: {
-        type: 'Organization',
-      },
-    } as OctokitResponse<UsersGetByUsernameResponseData>);
-
-    it('should call init on the repo with the directory', async () => {
-      await publisher.publish({
-        values,
-        directory: mockDir,
-      });
-
-      expect(Repository.init).toHaveBeenCalledWith(mockDir, 0);
-    });
-
-    it('should call refresh index on the index and write the new files', async () => {
-      await publisher.publish({
-        values,
-        directory: mockDir,
-      });
-
-      expect(mockRepo.refreshIndex).toHaveBeenCalled();
-    });
-
-    it('should call add all files and write', async () => {
-      await publisher.publish({
-        values,
-        directory: mockDir,
-      });
-
-      expect(mockIndex.addAll).toHaveBeenCalled();
-      expect(mockIndex.write).toHaveBeenCalled();
-      expect(mockIndex.writeTree).toHaveBeenCalled();
-    });
-
-    it('should create a commit with on head with the right name and commiter', async () => {
-      const mockSignature = { mockSignature: 'bloblly' };
-      Signature.now.mockReturnValue(mockSignature);
-
-      await publisher.publish({
-        values,
-        directory: mockDir,
-      });
-
-      expect(Signature.now).toHaveBeenCalledTimes(2);
-      expect(Signature.now).toHaveBeenCalledWith(
-        'Scaffolder',
-        'scaffolder@backstage.io',
-      );
-
-      expect(mockRepo.createCommit).toHaveBeenCalledWith(
-        'HEAD',
-        mockSignature,
-        mockSignature,
-        'initial commit',
-        'mockoid',
-        [],
-      );
-    });
-
-    it('creates a remote with the repo and remote', async () => {
-      await publisher.publish({
-        values,
-        directory: mockDir,
-      });
-
-      expect(Remote.create).toHaveBeenCalledWith(
-        mockRepo,
-        'origin',
-        'mockclone',
-      );
-    });
-
-    it('shoud push to the remote repo', async () => {
-      await publisher.publish({
-        values,
-        directory: mockDir,
-      });
-
-      const [remotes, { callbacks }] = mockRemote.push.mock
-        .calls[0] as NodeGit.PushOptions[];
-
-      expect(remotes).toEqual(['refs/heads/master:refs/heads/master']);
-
-      process.env.GITHUb_ACCESS_TOKEN = 'blob';
-
-      callbacks?.credentials?.();
-
-      expect(Cred.userpassPlaintextNew).toHaveBeenCalledWith(
-        process.env.GITHUB_ACCESS_TOKEN,
-        'x-oauth-basic',
-      );
-    });
-  });
 });
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.ts
index f3306e3662..d3aafb1e07 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.ts
@@ -21,10 +21,27 @@ import { JsonValue } from '@backstage/config';
 import { RequiredTemplateValues } from '../templater';
 import { Repository, Remote, Signature, Cred } from 'nodegit';
 
+export type RepoVisilityOptions = 'private' | 'internal' | 'public';
+
+interface GithubPublisherParams {
+  client: Octokit;
+  token: string;
+  repoVisibility: RepoVisilityOptions;
+}
+
 export class GithubPublisher implements PublisherBase {
   private client: Octokit;
-  constructor({ client }: { client: Octokit }) {
+  private token: string;
+  private repoVisibility: RepoVisilityOptions;
+
+  constructor({
+    client,
+    token,
+    repoVisibility = 'public',
+  }: GithubPublisherParams) {
     this.client = client;
+    this.token = token;
+    this.repoVisibility = repoVisibility;
   }
 
   async publish({
@@ -44,16 +61,47 @@ export class GithubPublisher implements PublisherBase {
     values: RequiredTemplateValues & Record<string, JsonValue>,
   ) {
     const [owner, name] = values.storePath.split('/');
+    const description = values.description as string;
 
     const user = await this.client.users.getByUsername({ username: owner });
 
     const repoCreationPromise =
       user.data.type === 'Organization'
-        ? this.client.repos.createInOrg({ name, org: owner })
-        : this.client.repos.createForAuthenticatedUser({ name });
+        ? this.client.repos.createInOrg({
+            name,
+            org: owner,
+            private: this.repoVisibility !== 'public',
+            visibility: this.repoVisibility,
+            description,
+          })
+        : this.client.repos.createForAuthenticatedUser({
+            name,
+            private: this.repoVisibility === 'private',
+            description,
+          });
 
     const { data } = await repoCreationPromise;
 
+    const access = values.access as string;
+    if (access?.startsWith(`${owner}/`)) {
+      const [, team] = access.split('/');
+      await this.client.teams.addOrUpdateRepoPermissionsInOrg({
+        org: owner,
+        team_slug: team,
+        owner,
+        repo: name,
+        permission: 'admin',
+      });
+      // no need to add access if it's the person who own's the personal account
+    } else if (access && access !== owner) {
+      await this.client.repos.addCollaborator({
+        owner,
+        repo: name,
+        username: access,
+        permission: 'admin',
+      });
+    }
+
     return data?.clone_url;
   }
 
@@ -76,10 +124,7 @@ export class GithubPublisher implements PublisherBase {
     await remoteRepo.push(['refs/heads/master:refs/heads/master'], {
       callbacks: {
         credentials: () => {
-          return Cred.userpassPlaintextNew(
-            process.env.GITHUB_ACCESS_TOKEN as string,
-            'x-oauth-basic',
-          );
+          return Cred.userpassPlaintextNew(this.token, 'x-oauth-basic');
         },
       },
     });
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.test.ts
new file mode 100644
index 0000000000..43b19859de
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.test.ts
@@ -0,0 +1,205 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+jest.mock('nodegit');
+jest.mock('@gitbeaker/node');
+
+import { GitlabPublisher } from './gitlab';
+import { Gitlab as GitlabAPI } from '@gitbeaker/core';
+import { Gitlab } from '@gitbeaker/node';
+import * as NodeGit from 'nodegit';
+
+const { mockGitlabClient } = require('@gitbeaker/node') as {
+  mockGitlabClient: {
+    Namespaces: jest.Mocked<GitlabAPI['Namespaces']>;
+    Projects: jest.Mocked<GitlabAPI['Projects']>;
+    Users: jest.Mocked<GitlabAPI['Users']>;
+  };
+};
+
+const {
+  Repository,
+  mockRepo,
+  mockIndex,
+  Signature,
+  Remote,
+  mockRemote,
+  Cred,
+} = require('nodegit') as {
+  Repository: jest.Mocked<{ init: any }>;
+  Signature: jest.Mocked<{ now: any }>;
+  Cred: jest.Mocked<{ userpassPlaintextNew: any }>;
+  Remote: jest.Mocked<{ create: any }>;
+
+  mockIndex: jest.Mocked<NodeGit.Index>;
+  mockRepo: jest.Mocked<NodeGit.Repository>;
+  mockRemote: jest.Mocked<NodeGit.Remote>;
+};
+
+describe('GitLab Publisher', () => {
+  const publisher = new GitlabPublisher(new Gitlab({}), 'fake-token');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('publish: createRemoteInGitLab', () => {
+    it('should use gitbeaker to create a repo in a namespace if the namespace property is set', async () => {
+      mockGitlabClient.Namespaces.show.mockResolvedValue({
+        id: 42,
+      } as { id: number });
+
+      await publisher.publish({
+        values: {
+          isOrg: true,
+          storePath: 'blam/test',
+          owner: 'bob',
+        },
+        directory: '/tmp/test',
+      });
+
+      expect(mockGitlabClient.Projects.create).toHaveBeenCalledWith({
+        namespace_id: 42,
+        name: 'test',
+      });
+    });
+
+    it('should use gitbeaker to create a repo in the authed user if the namespace property is not set', async () => {
+      mockGitlabClient.Namespaces.show.mockResolvedValue({});
+      mockGitlabClient.Users.current.mockResolvedValue({
+        id: 21,
+      } as { id: number });
+      mockGitlabClient.Projects.create.mockResolvedValue({
+        http_url_to_repo: 'mockclone',
+      } as { http_url_to_repo: string });
+
+      await publisher.publish({
+        values: {
+          storePath: 'blam/test',
+          owner: 'bob',
+        },
+        directory: '/tmp/test',
+      });
+
+      expect(mockGitlabClient.Users.current).toHaveBeenCalled();
+
+      expect(mockGitlabClient.Projects.create).toHaveBeenCalledWith({
+        namespace_id: 21,
+        name: 'test',
+      });
+    });
+  });
+
+  describe('publish: createGitDirectory', () => {
+    const values = {
+      isOrg: true,
+      storePath: 'blam/test',
+      owner: 'lols',
+    };
+
+    const mockDir = '/tmp/test/dir';
+
+    mockGitlabClient.Projects.create.mockResolvedValue({
+      http_url_to_repo: 'mockclone',
+    } as { http_url_to_repo: string });
+
+    it('should call init on the repo with the directory', async () => {
+      await publisher.publish({
+        values,
+        directory: mockDir,
+      });
+
+      expect(Repository.init).toHaveBeenCalledWith(mockDir, 0);
+    });
+
+    it('should call refresh index on the index and write the new files', async () => {
+      await publisher.publish({
+        values,
+        directory: mockDir,
+      });
+
+      expect(mockRepo.refreshIndex).toHaveBeenCalled();
+    });
+
+    it('should call add all files and write', async () => {
+      await publisher.publish({
+        values,
+        directory: mockDir,
+      });
+
+      expect(mockIndex.addAll).toHaveBeenCalled();
+      expect(mockIndex.write).toHaveBeenCalled();
+      expect(mockIndex.writeTree).toHaveBeenCalled();
+    });
+
+    it('should create a commit with on head with the right name and commiter', async () => {
+      const mockSignature = { mockSignature: 'bloblly' };
+      Signature.now.mockReturnValue(mockSignature);
+
+      await publisher.publish({
+        values,
+        directory: mockDir,
+      });
+
+      expect(Signature.now).toHaveBeenCalledTimes(2);
+      expect(Signature.now).toHaveBeenCalledWith(
+        'Scaffolder',
+        'scaffolder@backstage.io',
+      );
+
+      expect(mockRepo.createCommit).toHaveBeenCalledWith(
+        'HEAD',
+        mockSignature,
+        mockSignature,
+        'initial commit',
+        'mockoid',
+        [],
+      );
+    });
+
+    it('creates a remote with the repo and remote', async () => {
+      await publisher.publish({
+        values,
+        directory: mockDir,
+      });
+
+      expect(Remote.create).toHaveBeenCalledWith(
+        mockRepo,
+        'origin',
+        'mockclone',
+      );
+    });
+
+    it('shoud push to the remote repo', async () => {
+      await publisher.publish({
+        values,
+        directory: mockDir,
+      });
+
+      const [remotes, { callbacks }] = mockRemote.push.mock
+        .calls[0] as NodeGit.PushOptions[];
+
+      expect(remotes).toEqual(['refs/heads/master:refs/heads/master']);
+
+      callbacks?.credentials?.();
+
+      expect(Cred.userpassPlaintextNew).toHaveBeenCalledWith(
+        'oauth2',
+        'fake-token',
+      );
+    });
+  });
+});
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.ts
new file mode 100644
index 0000000000..a755a138b5
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.ts
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PublisherBase } from './types';
+import { Gitlab } from '@gitbeaker/core';
+
+import { JsonValue } from '@backstage/config';
+import { RequiredTemplateValues } from '../templater';
+import { Repository, Remote, Signature, Cred } from 'nodegit';
+
+export class GitlabPublisher implements PublisherBase {
+  private readonly client: Gitlab;
+  private readonly token: string;
+
+  constructor(client: Gitlab, token: string) {
+    this.client = client;
+    this.token = token;
+  }
+
+  async publish({
+    values,
+    directory,
+  }: {
+    values: RequiredTemplateValues & Record<string, JsonValue>;
+    directory: string;
+  }): Promise<{ remoteUrl: string }> {
+    const remoteUrl = await this.createRemote(values);
+    await this.pushToRemote(directory, remoteUrl);
+
+    return { remoteUrl };
+  }
+
+  private async createRemote(
+    values: RequiredTemplateValues & Record<string, JsonValue>,
+  ) {
+    const [owner, name] = values.storePath.split('/');
+
+    let targetNamespace = ((await this.client.Namespaces.show(owner)) as {
+      id: number;
+    }).id;
+    if (!targetNamespace) {
+      targetNamespace = ((await this.client.Users.current()) as { id: number })
+        .id;
+    }
+
+    const project = (await this.client.Projects.create({
+      namespace_id: targetNamespace,
+      name: name,
+    })) as { http_url_to_repo: string };
+
+    return project?.http_url_to_repo;
+  }
+
+  private async pushToRemote(directory: string, remote: string): Promise<void> {
+    const repo = await Repository.init(directory, 0);
+    const index = await repo.refreshIndex();
+    await index.addAll();
+    await index.write();
+    const oid = await index.writeTree();
+    await repo.createCommit(
+      'HEAD',
+      Signature.now('Scaffolder', 'scaffolder@backstage.io'),
+      Signature.now('Scaffolder', 'scaffolder@backstage.io'),
+      'initial commit',
+      oid,
+      [],
+    );
+
+    const remoteRepo = await Remote.create(repo, 'origin', remote);
+
+    await remoteRepo.push(['refs/heads/master:refs/heads/master'], {
+      callbacks: {
+        credentials: () => Cred.userpassPlaintextNew('oauth2', this.token),
+      },
+    });
+  }
+}
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/index.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/index.ts
index 38a96480c2..1d89cd37f0 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/index.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/index.ts
@@ -13,5 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export * from './publishers';
 export * from './github';
+export * from './gitlab';
 export * from './types';
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.test.ts
new file mode 100644
index 0000000000..b8181b0134
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.test.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Publishers } from './publishers';
+import {
+  LOCATION_ANNOTATION,
+  TemplateEntityV1alpha1,
+} from '@backstage/catalog-model';
+import { GithubPublisher } from './github';
+import { Octokit } from '@octokit/rest';
+
+jest.mock('@octokit/rest');
+
+describe('Publishers', () => {
+  const mockTemplate: TemplateEntityV1alpha1 = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Template',
+    metadata: {
+      annotations: {
+        [LOCATION_ANNOTATION]:
+          'github:https://github.com/benjdlambert/backstage-graphql-template/blob/master/template.yaml',
+      },
+      name: 'graphql-starter',
+      title: 'GraphQL Service',
+      description:
+        'A GraphQL starter template for backstage to get you up and running\nthe best pracices with GraphQL\n',
+      uid: '9cf16bad-16e0-4213-b314-c4eec773c50b',
+      etag: 'ZTkxMjUxMjUtYWY3Yi00MjU2LWFkYWMtZTZjNjU5ZjJhOWM2',
+      generation: 1,
+    },
+    spec: {
+      type: 'website',
+      templater: 'cookiecutter',
+      path: './template',
+      schema: {
+        $schema: 'http://json-schema.org/draft-07/schema#',
+        required: ['storePath', 'owner'],
+        properties: {
+          owner: {
+            type: 'string',
+            title: 'Owner',
+            description: 'Who is going to own this component',
+          },
+          storePath: {
+            type: 'string',
+            title: 'Store path',
+            description: 'GitHub store path in org/repo format',
+          },
+        },
+      },
+    },
+  };
+
+  it('should throw an error when the publisher for the source location is not registered', () => {
+    const publishers = new Publishers();
+
+    expect(() => publishers.get(mockTemplate)).toThrow(
+      expect.objectContaining({
+        message: 'No publisher registered for type: "github"',
+      }),
+    );
+  });
+
+  it('should return the correct preparer when the source matches', () => {
+    const publishers = new Publishers();
+    const publisher = new GithubPublisher({
+      client: new Octokit(),
+      token: 'fake',
+      repoVisibility: 'public',
+    });
+    publishers.register('github', publisher);
+
+    expect(publishers.get(mockTemplate)).toBe(publisher);
+  });
+
+  it('should throw an error if the metadata tag does not exist in the entity', () => {
+    const brokenTemplate: TemplateEntityV1alpha1 = {
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'Template',
+      metadata: {
+        annotations: {},
+        name: 'react-ssr-template',
+        title: 'React SSR Template',
+        description:
+          'Next.js application skeleton for creating isomorphic web applications.',
+        uid: '7357f4c5-aa58-4a1e-9670-18931eef771f',
+        etag: 'YWUxZWQyY2EtZDkxMC00MDM0LWI0ODAtMDgwMWY0YzdlMWIw',
+        generation: 1,
+      },
+      spec: {
+        type: 'website',
+        templater: 'cookiecutter',
+        path: '.',
+        schema: {
+          $schema: 'http://json-schema.org/draft-07/schema#',
+          required: ['storePath', 'owner'],
+          properties: {
+            owner: {
+              type: 'string',
+              title: 'Owner',
+              description: 'Who is going to own this component',
+            },
+            storePath: {
+              type: 'string',
+              title: 'Store path',
+              description: 'GitHub store path in org/repo format',
+            },
+          },
+        },
+      },
+    };
+
+    const publishers = new Publishers();
+
+    expect(() => publishers.get(brokenTemplate)).toThrow(
+      expect.objectContaining({
+        message: expect.stringContaining('No location annotation provided'),
+      }),
+    );
+  });
+});
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.ts
new file mode 100644
index 0000000000..a88acc518d
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
+import { parseLocationAnnotation } from '../helpers';
+import { PublisherBase, PublisherBuilder } from './types';
+import { RemoteProtocol } from '../types';
+
+export class Publishers implements PublisherBuilder {
+  private publisherMap = new Map<RemoteProtocol, PublisherBase>();
+
+  register(protocol: RemoteProtocol, publisher: PublisherBase) {
+    this.publisherMap.set(protocol, publisher);
+  }
+
+  get(template: TemplateEntityV1alpha1): PublisherBase {
+    const { protocol } = parseLocationAnnotation(template);
+    const publisher = this.publisherMap.get(protocol);
+
+    if (!publisher) {
+      throw new Error(`No publisher registered for type: "${protocol}"`);
+    }
+
+    return publisher;
+  }
+}
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/types.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/types.ts
index 5d4e9dd521..6e9c45ba43 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/types.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/types.ts
@@ -16,6 +16,7 @@
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import { RequiredTemplateValues } from '../templater';
 import { JsonValue } from '@backstage/config';
+import { RemoteProtocol } from '../types';
 
 /**
  * Publisher is in charge of taking a folder created by
@@ -34,3 +35,8 @@ export type PublisherBase = {
     directory: string;
   }): Promise<{ remoteUrl: string }>;
 };
+
+export type PublisherBuilder = {
+  register(protocol: RemoteProtocol, publisher: PublisherBase): void;
+  get(template: TemplateEntityV1alpha1): PublisherBase;
+};
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/types.ts b/plugins/scaffolder-backend/src/scaffolder/stages/types.ts
new file mode 100644
index 0000000000..13817ba190
--- /dev/null
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/types.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type RemoteProtocol = 'file' | 'github' | 'gitlab' | 'gitlab/api';
diff --git a/plugins/scaffolder-backend/src/service/router.test.ts b/plugins/scaffolder-backend/src/service/router.test.ts
new file mode 100644
index 0000000000..35d6b50ece
--- /dev/null
+++ b/plugins/scaffolder-backend/src/service/router.test.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getVoidLogger } from '@backstage/backend-common';
+import express from 'express';
+import request from 'supertest';
+import { createRouter } from './router';
+import { Templaters, Preparers, Publishers } from '../scaffolder';
+import Docker from 'dockerode';
+
+jest.mock('dockerode');
+
+describe('createRouter', () => {
+  let app: express.Express;
+
+  beforeAll(async () => {
+    const router = await createRouter({
+      logger: getVoidLogger(),
+      preparers: new Preparers(),
+      templaters: new Templaters(),
+      publishers: new Publishers(),
+      dockerClient: new Docker(),
+    });
+    app = express().use(router);
+  });
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('POST /v1/jobs', () => {
+    const template = {
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'Template',
+      metadata: {
+        description: 'Create a new CRA website project',
+        name: 'create-react-app-template',
+        tags: ['experimental', 'react', 'cra'],
+        title: 'Create React App Template',
+      },
+      spec: {
+        owner: 'web@example.com',
+        path: '.',
+        schema: {
+          properties: {
+            component_id: {
+              description: 'Unique name of the component',
+              title: 'Name',
+              type: 'string',
+            },
+            description: {
+              description: 'Description of the component',
+              title: 'Description',
+              type: 'string',
+            },
+            use_typescript: {
+              default: true,
+              description: 'Include typescript',
+              title: 'Use Typescript',
+              type: 'boolean',
+            },
+          },
+          required: ['component_id', 'use_typescript'],
+        },
+        templater: 'cra',
+        type: 'website',
+      },
+    };
+
+    it('rejects template values which do not match the template schema definition', async () => {
+      const response = await request(app).post('/v1/jobs').send({
+        template,
+        values: {},
+      });
+
+      expect(response.status).toEqual(400);
+    });
+  });
+});
diff --git a/plugins/scaffolder-backend/src/service/router.ts b/plugins/scaffolder-backend/src/service/router.ts
index 1b96158fa4..f61d2566b9 100644
--- a/plugins/scaffolder-backend/src/service/router.ts
+++ b/plugins/scaffolder-backend/src/service/router.ts
@@ -26,13 +26,14 @@ import {
   RequiredTemplateValues,
   StageContext,
   TemplaterBuilder,
-  PublisherBase,
+  PublisherBuilder,
 } from '../scaffolder';
+import { validate, ValidatorResult } from 'jsonschema';
 
 export interface RouterOptions {
   preparers: PreparerBuilder;
   templaters: TemplaterBuilder;
-  publisher: PublisherBase;
+  publishers: PublisherBuilder;
 
   logger: Logger;
   dockerClient: Docker;
@@ -47,7 +48,7 @@ export async function createRouter(
   const {
     preparers,
     templaters,
-    publisher,
+    publishers,
     logger: parentLogger,
     dockerClient,
   } = options;
@@ -84,6 +85,15 @@ export async function createRouter(
       const values: RequiredTemplateValues & Record<string, JsonValue> =
         req.body.values;
 
+      const validationResult: ValidatorResult = validate(
+        values,
+        template.spec.schema,
+      );
+      if (!validationResult.valid) {
+        res.status(400).json({ errors: validationResult.errors });
+        return;
+      }
+
       const job = jobProcessor.create({
         entity: template,
         values,
@@ -115,6 +125,7 @@ export async function createRouter(
           {
             name: 'Publish template',
             handler: async (ctx: StageContext<{ resultDir: string }>) => {
+              const publisher = publishers.get(ctx.entity);
               ctx.logger.info('Will now store the template');
               const { remoteUrl } = await publisher.publish({
                 entity: ctx.entity,
diff --git a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
index 102e93f91d..87b70a9553 100644
--- a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
+++ b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
@@ -72,7 +72,7 @@ export const JobStatusModal = ({
       {entity && (
         <DialogActions>
           <Button
-            to={generatePath(entityRoute.path, {
+            to={generatePath(`/catalog/${entityRoute.path}`, {
               kind: entity.kind,
               optionalNamespaceAndName: [
                 entity.metadata.namespace,
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index 1ed0504894..e68c795bd6 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -67,6 +67,11 @@ const OWNER_REPO_SCHEMA = {
       title: 'Store path',
       description: 'GitHub store path in org/repo format',
     },
+    access: {
+      type: 'string' as const,
+      title: 'Access',
+      description: 'Who should have access, in org/team or user format',
+    },
   },
 };
 
diff --git a/plugins/techdocs-backend/package.json b/plugins/techdocs-backend/package.json
index 47b2ebc8aa..b9c2953d28 100644
--- a/plugins/techdocs-backend/package.json
+++ b/plugins/techdocs-backend/package.json
@@ -25,12 +25,13 @@
     "@backstage/config": "^0.1.1-alpha.21",
     "@types/dockerode": "^2.5.34",
     "@types/express": "^4.17.6",
+    "command-exists-promise": "^2.0.2",
     "default-branch": "^1.0.8",
     "dockerode": "^3.2.1",
     "express": "^4.17.1",
     "express-promise-router": "^3.0.3",
     "fs-extra": "^9.0.1",
-    "git-url-parse": "^11.1.3",
+    "git-url-parse": "^11.2.0",
     "knex": "^0.21.1",
     "node-fetch": "^2.6.0",
     "nodegit": "^0.27.0",
diff --git a/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.test.ts b/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.test.ts
index 799e79ef67..283560f0ce 100644
--- a/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.test.ts
+++ b/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.test.ts
@@ -51,6 +51,10 @@ describe('helpers', () => {
       jest
         .spyOn(mockDocker, 'run')
         .mockResolvedValue([{ Error: null, StatusCode: 0 }]);
+
+      jest
+        .spyOn(mockDocker, 'ping')
+        .mockResolvedValue(Buffer.from('OK', 'utf-8'));
     });
 
     const imageName = 'spotify/techdocs';
@@ -99,5 +103,39 @@ describe('helpers', () => {
         },
       );
     });
+
+    it('should ping docker to test availability', async () => {
+      await runDockerContainer({
+        imageName,
+        args,
+        docsDir,
+        resultDir,
+        dockerClient: mockDocker,
+      });
+
+      expect(mockDocker.ping).toHaveBeenCalled();
+    });
+
+    describe('where docker is unavailable', () => {
+      const dockerError = 'a docker error';
+
+      beforeEach(() => {
+        jest.spyOn(mockDocker, 'ping').mockImplementationOnce(() => {
+          throw new Error(dockerError);
+        });
+      });
+
+      it('should throw with a descriptive error message including the docker error message', async () => {
+        await expect(
+          runDockerContainer({
+            imageName,
+            args,
+            docsDir,
+            resultDir,
+            dockerClient: mockDocker,
+          }),
+        ).rejects.toThrow(new RegExp(`.+: ${dockerError}`));
+      });
+    });
   });
 });
diff --git a/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.ts b/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.ts
index 88667f9903..d68bb74aa6 100644
--- a/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.ts
+++ b/plugins/techdocs-backend/src/techdocs/stages/generate/helpers.ts
@@ -18,6 +18,7 @@ import { Entity } from '@backstage/catalog-model';
 import { Writable, PassThrough } from 'stream';
 import Docker from 'dockerode';
 import { SupportedGeneratorKey } from './types';
+import { spawn } from 'child_process';
 
 // TODO: Implement proper support for more generators.
 export function getGeneratorKey(entity: Entity): SupportedGeneratorKey {
@@ -38,6 +39,13 @@ type RunDockerContainerOptions = {
   createOptions?: Docker.ContainerCreateOptions;
 };
 
+export type RunCommandOptions = {
+  command: string;
+  args: string[];
+  options: object;
+  logStream?: Writable;
+};
+
 export async function runDockerContainer({
   imageName,
   args,
@@ -47,6 +55,14 @@ export async function runDockerContainer({
   dockerClient,
   createOptions,
 }: RunDockerContainerOptions) {
+  try {
+    await dockerClient.ping();
+  } catch (e) {
+    throw new Error(
+      `This operation requires Docker. Docker does not appear to be available. Docker.ping() failed with: ${e.message}`,
+    );
+  }
+
   await new Promise((resolve, reject) => {
     dockerClient.pull(imageName, {}, (err, stream) => {
       if (err) return reject(err);
@@ -88,3 +104,41 @@ export async function runDockerContainer({
 
   return { error, statusCode };
 }
+
+/**
+ *
+ * @param options the options object
+ * @param options.command the command to run
+ * @param options.args the arguments to pass the command
+ * @param options.options options used in spawn
+ * @param options.logStream the log streamer to capture log messages
+ */
+export const runCommand = async ({
+  command,
+  args,
+  options,
+  logStream = new PassThrough(),
+}: RunCommandOptions) => {
+  await new Promise((resolve, reject) => {
+    const process = spawn(command, args, options);
+
+    process.stdout.on('data', stream => {
+      logStream.write(stream);
+    });
+
+    process.stderr.on('data', stream => {
+      logStream.write(stream);
+    });
+
+    process.on('error', error => {
+      return reject(error);
+    });
+
+    process.on('close', code => {
+      if (code !== 0) {
+        return reject(`Command ${command} failed, exit code: ${code}`);
+      }
+      return resolve();
+    });
+  });
+};
diff --git a/plugins/techdocs-backend/src/techdocs/stages/generate/techdocs.ts b/plugins/techdocs-backend/src/techdocs/stages/generate/techdocs.ts
index 40cd7590b6..cb89b42e38 100644
--- a/plugins/techdocs-backend/src/techdocs/stages/generate/techdocs.ts
+++ b/plugins/techdocs-backend/src/techdocs/stages/generate/techdocs.ts
@@ -24,7 +24,9 @@ import {
   GeneratorRunOptions,
   GeneratorRunResult,
 } from './types';
-import { runDockerContainer } from './helpers';
+import { runDockerContainer, runCommand } from './helpers';
+
+const commandExists = require('command-exists-promise');
 
 export class TechdocsGenerator implements GeneratorBase {
   private readonly logger: Logger;
@@ -46,17 +48,29 @@ export class TechdocsGenerator implements GeneratorBase {
     );
 
     try {
-      await runDockerContainer({
-        imageName: 'spotify/techdocs',
-        args: ['build', '-d', '/result'],
-        logStream,
-        docsDir: directory,
-        resultDir,
-        dockerClient,
-      });
-      this.logger.info(
-        `[TechDocs]: Successfully generated docs from ${directory} into ${resultDir}`,
-      );
+      const mkdocsInstalled = await commandExists('mkdocs');
+      if (mkdocsInstalled) {
+        await runCommand({
+          command: 'mkdocs',
+          args: ['build', '-d', resultDir, '-v'],
+          options: {
+            cwd: directory,
+          },
+          logStream,
+        });
+      } else {
+        await runDockerContainer({
+          imageName: 'spotify/techdocs',
+          args: ['build', '-d', '/result'],
+          logStream,
+          docsDir: directory,
+          resultDir,
+          dockerClient,
+        });
+        this.logger.info(
+          `[TechDocs]: Successfully generated docs from ${directory} into ${resultDir}`,
+        );
+      }
     } catch (error) {
       this.logger.debug(
         `[TechDocs]: Failed to generate docs from ${directory} into ${resultDir}`,
diff --git a/yarn.lock b/yarn.lock
index 38f5d6c799..449148e487 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1400,6 +1400,34 @@
   dependencies:
     yaml-ast-parser "0.0.43"
 
+"@gitbeaker/core@^23.5.0":
+  version "23.5.0"
+  resolved "https://registry.npmjs.org/@gitbeaker/core/-/core-23.5.0.tgz#e0be44eecd0d7bf5418c161997c36d45b0c1ba81"
+  integrity sha512-5geLk7SxAttABBJZxfuSp72lSYWRyRId583vGCpKB6ISkoDhP+vJxdE6ypmtOJPV4CaSRZhluAGAZd968pi9ng==
+  dependencies:
+    "@gitbeaker/requester-utils" "^23.5.0"
+    form-data "^3.0.0"
+    li "^1.3.0"
+    xcase "^2.0.1"
+
+"@gitbeaker/node@^23.5.0":
+  version "23.5.0"
+  resolved "https://registry.npmjs.org/@gitbeaker/node/-/node-23.5.0.tgz#0243be78aad148e7d6b5d79b7acc340748b5fa94"
+  integrity sha512-GEyhcrF1Lm8YmsmwntfzuhXnq00TrG14wNZP2Hg+DGgexG25eBbbcyFXuFZlBFSaGMQlsc8aPeuEyfyGmgpwnw==
+  dependencies:
+    "@gitbeaker/core" "^23.5.0"
+    "@gitbeaker/requester-utils" "^23.5.0"
+    got "^11.1.4"
+    xcase "^2.0.1"
+
+"@gitbeaker/requester-utils@^23.5.0":
+  version "23.5.0"
+  resolved "https://registry.npmjs.org/@gitbeaker/requester-utils/-/requester-utils-23.5.0.tgz#e6f5d0216cb978be95e6bf40adf606f23d426f14"
+  integrity sha512-MdmInOO4unkApvtbv6PnIpDYXosgZgClSOqbxF5S4aJRCZVTJ6oPjMoNP8luhyT9xQeknpKxn9Iv8psEh7IC1Q==
+  dependencies:
+    query-string "^6.12.1"
+    xcase "^2.0.1"
+
 "@graphql-tools/delegate@6.0.15":
   version "6.0.15"
   resolved "https://registry.npmjs.org/@graphql-tools/delegate/-/delegate-6.0.15.tgz#9e060bfc31fe7735bd5b2b401e98dea3fa5d3b25"
@@ -5796,7 +5824,7 @@ arrify@^1.0.1:
   resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@^2.0.0, asap@~2.0.3, asap@~2.0.6:
+asap@^2.0.0, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -10695,13 +10723,20 @@ git-up@^4.0.0:
     is-ssh "^1.3.0"
     parse-url "^5.0.0"
 
-git-url-parse@^11.1.2, git-url-parse@^11.1.3:
+git-url-parse@^11.1.2:
   version "11.1.3"
   resolved "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.1.3.tgz#03625b6fc09905e9ad1da7bb2b84be1bf9123143"
   integrity sha512-GPsfwticcu52WQ+eHp0IYkAyaOASgYdtsQDIt4rUp6GbiNt1P9ddrh3O0kQB0eD4UJZszVqNT3+9Zwcg40fywA==
   dependencies:
     git-up "^4.0.0"
 
+git-url-parse@^11.2.0:
+  version "11.2.0"
+  resolved "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.2.0.tgz#2955fd51befd6d96ea1389bbe2ef57e8e6042b04"
+  integrity sha512-KPoHZg8v+plarZvto4ruIzzJLFQoRx+sUs5DQSr07By9IBKguVd+e6jwrFR6/TP6xrCJlNV1tPqLO1aREc7O2g==
+  dependencies:
+    git-up "^4.0.0"
+
 gitconfiglocal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
@@ -10944,6 +10979,23 @@ got@^10.7.0:
     to-readable-stream "^2.0.0"
     type-fest "^0.10.0"
 
+got@^11.1.4:
+  version "11.6.2"
+  resolved "https://registry.npmjs.org/got/-/got-11.6.2.tgz#79d7bb8c11df212b97f25565407a1f4ae73210ec"
+  integrity sha512-/21qgUePCeus29Jk7MEti8cgQUNXFSWfIevNIk4H7u1wmXNDrGPKPY6YsPY+o9CIT/a2DjCjRz0x1nM9FtS2/A==
+  dependencies:
+    "@sindresorhus/is" "^3.1.1"
+    "@szmarczak/http-timer" "^4.0.5"
+    "@types/cacheable-request" "^6.0.1"
+    "@types/responselike" "^1.0.0"
+    cacheable-lookup "^5.0.3"
+    cacheable-request "^7.0.1"
+    decompress-response "^6.0.0"
+    http2-wrapper "^1.0.0-beta.5.2"
+    lowercase-keys "^2.0.0"
+    p-cancelable "^2.0.0"
+    responselike "^2.0.0"
+
 got@^11.5.2:
   version "11.6.0"
   resolved "https://registry.npmjs.org/got/-/got-11.6.0.tgz#4978c78f3cbc3a45ee95381f8bb6efd1db1f4638"
@@ -13288,6 +13340,11 @@ jsonpointer@^4.0.1:
   resolved "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
   integrity sha1-T9kss04OnbPInIYi7PUfm5eMbLk=
 
+jsonschema@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/jsonschema/-/jsonschema-1.2.6.tgz#52b0a8e9dc06bbae7295249d03e4b9faee8a0c0b"
+  integrity sha512-SqhURKZG07JyKKeo/ir24QnS4/BV7a6gQy93bUSe4lUdNp0QNpIz2c9elWJQ9dpc5cQYY6cvCzgRwy0MQCLyqA==
+
 jspdf-autotable@3.5.3:
   version "3.5.3"
   resolved "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.5.3.tgz#2f73adb07f340e7dbf22950e3e6c8bf853991479"
@@ -13584,6 +13641,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+li@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/li/-/li-1.3.0.tgz#22c59bcaefaa9a8ef359cf759784e4bf106aea1b"
+  integrity sha1-IsWbyu+qmo7zWc91l4TkvxBq6hs=
+
 liftoff@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/liftoff/-/liftoff-3.1.0.tgz#c9ba6081f908670607ee79062d700df062c52ed3"
@@ -15040,30 +15102,7 @@ node-request-interceptor@^0.3.5:
     debug "^4.1.1"
     headers-utils "^1.2.0"
 
-nodegit-promise@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/nodegit-promise/-/nodegit-promise-4.0.0.tgz#5722b184f2df7327161064a791d2e842c9167b34"
-  integrity sha1-VyKxhPLfcycWEGSnkdLoQskWezQ=
-  dependencies:
-    asap "~2.0.3"
-
-nodegit@0.26.5:
-  version "0.26.5"
-  resolved "https://registry.npmjs.org/nodegit/-/nodegit-0.26.5.tgz#1534d8aaa52de7acfbbe18de28df2075de86f7d2"
-  integrity sha512-l9l2zhcJ0V7FYzPdXIsuJcXN8UnLuhQgM+377HJfCYE/eupL/OWtMVvUOq42F9dRsgC3bAYH9j2Xbwr0lpYVZQ==
-  dependencies:
-    fs-extra "^7.0.0"
-    json5 "^2.1.0"
-    lodash "^4.17.14"
-    nan "^2.14.0"
-    node-gyp "^4.0.0"
-    node-pre-gyp "^0.13.0"
-    promisify-node "~0.3.0"
-    ramda "^0.25.0"
-    request-promise-native "^1.0.5"
-    tar-fs "^1.16.3"
-
-nodegit@^0.27.0:
+nodegit@0.27.0, nodegit@^0.27.0:
   version "0.27.0"
   resolved "https://registry.npmjs.org/nodegit/-/nodegit-0.27.0.tgz#4e8cc236f60e1c97324a5acff99056fe116a6ebe"
   integrity sha512-E9K4gPjWiA0b3Tx5lfWCzG7Cvodi2idl3V5UD2fZrOrHikIfrN7Fc2kWLtMUqqomyoToYJLeIC8IV7xb1CYRLA==
@@ -16990,13 +17029,6 @@ promise@^8.0.3:
   dependencies:
     asap "~2.0.6"
 
-promisify-node@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/promisify-node/-/promisify-node-0.3.0.tgz#b4b55acf90faa7d2b8b90ca396899086c03060cf"
-  integrity sha1-tLVaz5D6p9K4uQyjlomQhsAwYM8=
-  dependencies:
-    nodegit-promise "~4.0.0"
-
 prompts@^2.0.1:
   version "2.3.2"
   resolved "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
@@ -17175,6 +17207,15 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.12.1:
+  version "6.13.1"
+  resolved "https://registry.npmjs.org/query-string/-/query-string-6.13.1.tgz#d913ccfce3b4b3a713989fe6d39466d92e71ccad"
+  integrity sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-browser@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/querystring-browser/-/querystring-browser-1.0.4.tgz#f2e35881840a819bc7b1bf597faf0979e6622dc6"
@@ -19303,6 +19344,11 @@ split-ca@^1.0.1:
   resolved "https://registry.npmjs.org/split-ca/-/split-ca-1.0.1.tgz#6c83aff3692fa61256e0cd197e05e9de157691a6"
   integrity sha1-bIOv82kvphJW4M0ZfgXp3hV2kaY=
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -19570,6 +19616,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-argv@0.3.1:
   version "0.3.1"
   resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
@@ -21813,6 +21864,11 @@ x-is-string@^0.1.0:
   resolved "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
   integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
 
+xcase@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/xcase/-/xcase-2.0.1.tgz#c7fa72caa0f440db78fd5673432038ac984450b9"
+  integrity sha1-x/pyyqD0QNt4/VZzQyA4rJhEULk=
+
 xdg-basedir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"