diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html
index e3e3972ab5..cfaa71f751 100644
--- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html
+++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html
@@ -1,10 +1,11 @@
 <main *ngIf="challenge">
   <div id="bio">
     <h3 class="top-section-title">Overview</h3>
-    <p>{{ use_default(challenge.description) }}</p>
+    <p>{{ useNaIfFalsey(challenge.description) }}</p>
     <div *ngIf="challenge.description.endsWith('...')">
       <a class="read-more" href="{{ challenge.websiteUrl }}"
-        >Continue reading <mat-icon aria-hidden="true" inline="true">open_in_new</mat-icon></a>
+        >Continue reading <mat-icon aria-hidden="true" inline="true">open_in_new</mat-icon></a
+      >
     </div>
   </div>
   <div id="details">
@@ -13,11 +14,15 @@ <h3 class="section-title">Challenge Details</h3>
       <tbody>
         <tr>
           <td class="text-right">Start Date</td>
-          <td>{{ challenge.startDate }}</td>
+          <td [ngClass]="{ 'text-grey': challenge.startDate === null }">
+            {{ useNaIfFalsey(challenge.startDate) }}
+          </td>
         </tr>
         <tr>
           <td class="text-right">End Date</td>
-          <td>{{ challenge.endDate }}</td>
+          <td [ngClass]="{ 'text-grey': challenge.endDate === null }">
+            {{ useNaIfFalsey(challenge.endDate) }}
+          </td>
         </tr>
         <tr>
           <td class="text-right">Status</td>
@@ -26,7 +31,7 @@ <h3 class="section-title">Challenge Details</h3>
         <tr>
           <td class="text-right">Platform</td>
           <td [ngClass]="{ 'text-grey': challenge.platform.name === '' }">
-            {{ use_default(challenge.platform.name) }}
+            {{ useNaIfFalsey(challenge.platform.name) }}
           </td>
         </tr>
         <tr>
diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts
index 3d5d3fb96b..c0089433f8 100644
--- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts
+++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts
@@ -19,8 +19,8 @@ export class ChallengeOverviewComponent {
   organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS;
   // mockTopics = ['breast', 'cancer'];
 
-  use_default(str: string) {
-    return str === '' ? 'Not available' : str;
+  useNaIfFalsey(str: string | null | undefined) {
+    return str || 'Not available';
   }
 
   prettify(camel: string | undefined) {
diff --git a/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.html b/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.html
index 07e977829a..b849e59811 100644
--- a/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.html
+++ b/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.html
@@ -2,7 +2,7 @@
   <div id="bio" class="row">
     <div class="col">
       <h3>Overview</h3>
-      <p>{{ use_default(org.description) }}</p>
+      <p>{{ useNaIfFalsey(org.description) }}</p>
       <div *ngIf="org.description.endsWith('...')">
         <a class="read-more" href="{{ org.websiteUrl }}"
           >Continue reading <mat-icon aria-hidden="true" inline="true">open_in_new</mat-icon></a>
@@ -15,11 +15,11 @@ <h3 class="section-title">Organization Details</h3>
       <tbody>
         <tr>
           <td class="text-right">Acronym</td>
-          <td [ngClass]="{ 'text-grey': org.acronym === '' }">{{ use_default(org.acronym) }}</td>
+          <td [ngClass]="{ 'text-grey': org.acronym === '' }">{{ useNaIfFalsey(org.acronym) }}</td>
         </tr>
         <tr>
           <td class="text-right">Contact Email</td>
-          <td [ngClass]="{ 'text-grey': org.email === '' }">{{ use_default(org.email) }}</td>
+          <td [ngClass]="{ 'text-grey': org.email === '' }">{{ useNaIfFalsey(org.email) }}</td>
         </tr>
       </tbody>
     </table>
diff --git a/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.ts b/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.ts
index 37663e43f3..aad5edc31f 100644
--- a/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.ts
+++ b/libs/openchallenges/org-profile/src/lib/org-profile-overview/org-profile-overview.component.ts
@@ -18,7 +18,7 @@ export class OrgProfileOverviewComponent {
   @Input({ required: true }) organization!: Organization;
   organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS;
 
-  use_default(str: string | undefined) {
-    return str === '' ? 'Not available' : str;
+  useNaIfFalsey(str: string | undefined) {
+    return str || 'Not available';
   }
 }