diff --git a/localtypings/pxtpackage.d.ts b/localtypings/pxtpackage.d.ts
index 160a03e4b3d0..1a2f52fdf3ab 100644
--- a/localtypings/pxtpackage.d.ts
+++ b/localtypings/pxtpackage.d.ts
@@ -33,6 +33,7 @@ declare namespace pxt {
      */
     interface PackageConfig {
         name: string;
+        displayName?: string; // used for the codecard in the extension dialog
         version?: string;
         // installedVersion?: string; moved to Package class
         // url to icon -- support for built-in packages only
diff --git a/pxtlib/service.ts b/pxtlib/service.ts
index 716e2319571e..939016a348ad 100644
--- a/pxtlib/service.ts
+++ b/pxtlib/service.ts
@@ -1698,11 +1698,12 @@ namespace ts.pxtc.service {
     }
 
     export interface ExtensionMeta {
-        name: string,
-        fullName?: string,
-        description?: string,
-        imageUrl?: string,
-        type?: ExtensionType
+        name: string;
+        displayName?: string;
+        fullRepo?: string;
+        description?: string;
+        imageUrl?: string;
+        type?: ExtensionType;
         learnMoreUrl?: string;
 
         pkgConfig?: pxt.PackageConfig; // Added if the type is Bundled
diff --git a/webapp/src/extensionsBrowser.tsx b/webapp/src/extensionsBrowser.tsx
index 2155296b3f98..97af60c37f7d 100644
--- a/webapp/src/extensionsBrowser.tsx
+++ b/webapp/src/extensionsBrowser.tsx
@@ -303,7 +303,7 @@ export const ExtensionsBrowser = (props: ExtensionsProps) => {
             imageUrl: pxt.github.repoIconUrl(r),
             repo: r,
             description: r.description,
-            fullName: r.fullName
+            fullRepo: r.fullName
         }
     }
 
@@ -360,6 +360,7 @@ export const ExtensionsBrowser = (props: ExtensionsProps) => {
     function packageConfigToExtensionMeta(p: pxt.PackageConfig): ExtensionMeta {
         return {
             name: p.name,
+            displayName: p.displayName,
             imageUrl: p.icon,
             type: ExtensionType.Bundled,
             learnMoreUrl: `/reference/${p.name}`,
@@ -458,22 +459,23 @@ export const ExtensionsBrowser = (props: ExtensionsProps) => {
         const { extensionInfo } = props;
         const {
             description,
-            fullName,
+            fullRepo,
             imageUrl,
             learnMoreUrl,
             loading,
             name,
+            displayName,
             repo,
             type,
         } = extensionInfo;
 
         return <ExtensionCard
-            title={name || fullName}
+            title={displayName || name || fullRepo}
             description={description}
             imageUrl={imageUrl}
             extension={extensionInfo}
             onClick={installExtension}
-            learnMoreUrl={learnMoreUrl || (fullName ? `/pkg/${fullName}` : undefined)}
+            learnMoreUrl={learnMoreUrl || (fullRepo ? `/pkg/${fullRepo}` : undefined)}
             loading={loading}
             label={pxt.isPkgBeta(extensionInfo) ? lf("Beta") : undefined}
             showDisclaimer={type != ExtensionType.Bundled && repo?.status != pxt.github.GitRepoStatus.Approved}