diff --git a/packages/vsx-registry/src/browser/style/index.css b/packages/vsx-registry/src/browser/style/index.css
index 7240df47ea591..2f8e79a102a4b 100644
--- a/packages/vsx-registry/src/browser/style/index.css
+++ b/packages/vsx-registry/src/browser/style/index.css
@@ -90,11 +90,11 @@
     font-size: 80%;
 }
 
-
 .theia-vsx-extension-content .title .stat .average-rating > i {
     color: #ff8e00;
 }
 
+.theia-vsx-extension-editor .download-count > i,
 .theia-vsx-extension-content .title .stat .average-rating > i,
 .theia-vsx-extension-content .title .stat .download-count > i {
     padding-right: calc(var(--theia-ui-padding)/2);
diff --git a/packages/vsx-registry/src/browser/vsx-extension.tsx b/packages/vsx-registry/src/browser/vsx-extension.tsx
index 073c4de96348d..b5172cf9d4fcf 100644
--- a/packages/vsx-registry/src/browser/vsx-extension.tsx
+++ b/packages/vsx-registry/src/browser/vsx-extension.tsx
@@ -332,8 +332,8 @@ export class VSXExtensionComponent extends AbstractVSXExtensionComponent {
                         <span className='name'>{displayName}</span> <span className='version'>{version}</span>
                     </div>
                     <div className='stat'>
-                        {downloadCount && <span className='download-count'><i className='fa fa-download' />{downloadCompactFormatter.format(downloadCount)}</span>}
-                        {averageRating && <span className='average-rating'><i className='fa fa-star' />{averageRating.toFixed(1)}</span>}
+                        {!!downloadCount && <span className='download-count'><i className='fa fa-download' />{downloadCompactFormatter.format(downloadCount)}</span>}
+                        {!!averageRating && <span className='average-rating'><i className='fa fa-star' />{averageRating.toFixed(1)}</span>}
                     </div>
                 </div>
                 <div className='noWrapInfo theia-vsx-extension-description'>{description}</div>
@@ -369,8 +369,9 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
                             {this.renderNamespaceAccess()}
                             {publisher}
                         </span>
-                        {downloadCount && <span className='fa fa-download download-count' onClick={this.openExtension}>{downloadFormatter.format(downloadCount)}</span>}
-                        {averageRating && <span className='average-rating' onClick={this.openAverageRating}>{this.renderStars()}</span>}
+                        {!!downloadCount && <span className='download-count' onClick={this.openExtension}>
+                            <i className="fa fa-download" />{downloadFormatter.format(downloadCount)}</span>}
+                        {averageRating !== undefined && <span className='average-rating' onClick={this.openAverageRating}>{this.renderStars()}</span>}
                         {repository && <span className='repository' onClick={this.openRepository}>Repository</span>}
                         {license && <span className='license' onClick={this.openLicense}>{license}</span>}
                     </div>
@@ -403,10 +404,8 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
     }
 
     protected renderStars(): React.ReactNode {
-        const rating = this.props.extension.averageRating;
-        if (typeof rating !== 'number') {
-            return undefined;
-        }
+        const rating = this.props.extension.averageRating || 0;
+
         const renderStarAt = (position: number) => position <= rating ?
             <i className='fa fa-star' /> :
             position > rating && position - rating < 1 ?