diff --git a/src/app/components/shared/content-groups/content-groups.component.html b/src/app/components/shared/content-groups/content-groups.component.html
index 105b7bcaffda409a817eb302be6603fc9626cd64..5e3f715c19ea95d13c8c6f8c22e720e411bcb2e8 100644
--- a/src/app/components/shared/content-groups/content-groups.component.html
+++ b/src/app/components/shared/content-groups/content-groups.component.html
@@ -1,10 +1,12 @@
 <mat-card *ngFor="let contentGroup of contentGroups" (click)="viewContents(contentGroup)">
   <mat-card-header>
-    <mat-card-title>
-      <h4 *ngIf="!(contentGroup.name === 'Default')">{{contentGroup.name}}</h4>
-      <h4 *ngIf="contentGroup.name === 'Default'">{{'room-page.default-content-group' | translate}}</h4>
+    <mat-card-title *ngIf="contentGroup.name === 'Default'">
+      {{'room-page.default-content-group' | translate}}
     </mat-card-title>
-    <mat-icon color="accent" matBadge="{{contentGroup.contentIds.length}}" 
+    <mat-card-title *ngIf="!(contentGroup.name === 'Default')">
+      {{contentGroup.name}}
+    </mat-card-title>
+    <mat-icon color="accent" matBadge="{{contentGroup.contentIds.length}}"
       matBadgePosition="after" matBadgeColor="accent"></mat-icon>
   </mat-card-header>
 </mat-card>
diff --git a/src/app/components/shared/content-groups/content-groups.component.scss b/src/app/components/shared/content-groups/content-groups.component.scss
index f88a6a0f35dbbba8df0e94deaf928ce1f4604768..746ec783c3da8eec01c23a308ab67a89e04acf13 100644
--- a/src/app/components/shared/content-groups/content-groups.component.scss
+++ b/src/app/components/shared/content-groups/content-groups.component.scss
@@ -23,3 +23,7 @@
 mat-icon {
   margin-top: 20px;
 }
+
+mat-card-title {
+  margin-top: 18px;
+}