diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
index 2b7dde9933..455b3a0735 100644
--- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
+++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -118,7 +118,7 @@ describe('dataset pages', () => {
           .find('.font-title')
           .next()
           .as('infoBar')
-        cy.get('@infoBar').children('div').should('have.length', 3)
+        cy.get('@infoBar').children().should('have.length', 3)
       })
       it('should return to the dataset list', () => {
         cy.get('datahub-header-record')
diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
index 468272bcc0..93eaf33a33 100644
--- a/apps/datahub/src/app/record/header-record/header-record.component.html
+++ b/apps/datahub/src/app/record/header-record/header-record.component.html
@@ -38,19 +38,21 @@
       {{ metadata.title }}
     </div>
     <div
-      class="flex flex-row flex-wrap gap-2 mb-4 ml-4 sm:mr-[332px]"
+      class="flex flex-row flex-wrap gap-4 mb-4 ml-4 sm:mr-[332px]"
       [style.color]="foregroundColor"
     >
-      <div
+      <gn-ui-badge
         *ngIf="(isGeodata$ | async) === true"
-        class="flex flex-row bg-primary-darker rounded"
+        [style.--gn-ui-badge-padding]="'0.4em 0.75em'"
+        [style.--gn-ui-badge-background-color]="'var(--color-primary-darker)'"
+        [style.--gn-ui-badge-opacity]="'1'"
       >
-        <span class="material-symbols-outlined mt-0.5 ml-2 text-[20px]">
+        <mat-icon class="material-symbols-outlined mt-0.5 ml-2 text-[20px]">
           my_location
-        </span>
-        <p class="ml-2 mr-2" translate>record.metadata.type</p>
-      </div>
-      <div *ngIf="metadata.recordUpdated" class="flex flex-row gap-1">
+        </mat-icon>
+        <span class="ml-2 mr-2" translate>record.metadata.type</span>
+      </gn-ui-badge>
+      <div *ngIf="metadata.recordUpdated">
         <p translate [translateParams]="{ date: lastUpdate }">
           record.metadata.lastUpdate
         </p>
diff --git a/tailwind.base.css b/tailwind.base.css
index 9bce5e4729..db753d1abc 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -115,7 +115,8 @@
     --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
-    @apply inline-block opacity-70 p-[--padding] rounded-[--rounded]
+    --opacity: var(--gn-ui-badge-opacity, 0.7);
+    @apply inline-block opacity-[--opacity] p-[--padding] rounded-[--rounded]
       font-medium text-[length:0.875em] leading-none text-[color:--text-color] bg-[color:--background-color];
   }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */