diff --git a/app/src/app/communities/communities.component.html b/app/src/app/communities/communities.component.html
index e8f8841..9daf96a 100644
--- a/app/src/app/communities/communities.component.html
+++ b/app/src/app/communities/communities.component.html
@@ -61,7 +61,7 @@
 </mat-card> -->
 
 <div class="container responsive-grid">
-  @for(community of dataSource.data; track community) {
+  @if (dataSource) { @for(community of dataSource.data; track community) {
   <mat-card>
     <mat-card-header>
       <mat-card-title
@@ -81,7 +81,7 @@
       <button mat-button (click)="join(community.id)">JOIN</button>
     </mat-card-actions>
   </mat-card>
-  }
+  } }
 
   <!-- @for(card of cards(); track card) {
   <mat-card>
diff --git a/app/src/app/communities/communities.component.ts b/app/src/app/communities/communities.component.ts
index 237a94d..14f048b 100644
--- a/app/src/app/communities/communities.component.ts
+++ b/app/src/app/communities/communities.component.ts
@@ -94,7 +94,7 @@ export class CommunitiesComponent {
   // }
 
   //viewStyle = signal('card');
-  viewStyle = model<string>('table');
+  viewStyle = model<string>('card');
 
   checked = model<boolean>(false);