diff --git a/apps/cde-ui/src/app/app.component.ts b/apps/cde-ui/src/app/app.component.ts
index 96fa47a83..1416f2e00 100644
--- a/apps/cde-ui/src/app/app.component.ts
+++ b/apps/cde-ui/src/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 
-import { HeaderComponent } from './components/header/header.component';
 import { ScreenSizeNoticeComponent } from './components/screen-size-notice/screen-size-notice.component';
 
 /** Max width to show screen size notice */
@@ -14,7 +13,7 @@ export const SCREEN_SIZE_NOTICE_MAX_HEIGHT = 832;
  */
 @Component({
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent],
+  imports: [RouterOutlet],
   selector: 'cde-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
diff --git a/apps/cde-ui/src/app/components/header/header.component.html b/apps/cde-ui/src/app/components/header/header.component.html
deleted file mode 100644
index 65511a34a..000000000
--- a/apps/cde-ui/src/app/components/header/header.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<a class="hra-home" href="https://humanatlas.io" target="_blank" rel="noopener noreferrer">
-  <img class="logo large" [attr.src]="'assets/logo/hra_logo_black.svg' | assetUrl" alt="Human Reference Atlas home" />
-  <img class="logo small" [attr.src]="'assets/logo/hra_small.svg' | assetUrl" alt="Human Reference Atlas home" />
-</a>
-<a class="cde-home" routerLink="/">
-  <img [attr.src]="'assets/logo/cde_logo.svg' | assetUrl" alt="Cell Distance Explorer home" />
-  <span>
-    <div class="cde-label">Cell Distance Explorer</div>
-    <div class="preview-app">HRA Preview Application</div>
-  </span>
-</a>
-
-<div class="filler"></div>
-
-<!-- Disable until help page is made -->
-<!-- <a mat-button class="help" routerLink="/help">Help</a> -->
diff --git a/apps/cde-ui/src/app/components/header/header.component.scss b/apps/cde-ui/src/app/components/header/header.component.scss
deleted file mode 100644
index f9c8fc9c6..000000000
--- a/apps/cde-ui/src/app/components/header/header.component.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@use 'sass:math';
-
-:host {
-  $logo-height: 3rem;
-  --mat-text-button-hover-state-layer-opacity: 0;
-
-  display: flex;
-  margin: 0 1rem;
-  align-items: center;
-  gap: 1rem;
-  height: 5.25rem;
-
-  .hra-home,
-  .cde-home {
-    height: $logo-height;
-    border-radius: 0.5rem;
-
-    img {
-      height: $logo-height;
-    }
-  }
-
-  .cde-home {
-    display: inline-flex;
-    img {
-      margin-right: 0.75rem;
-    }
-
-    .cde-label {
-      color: #201e3d;
-      font-size: 1.25rem;
-      line-height: 1.875rem;
-    }
-
-    .preview-app {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      letter-spacing: 0.5px;
-      font-weight: 500;
-      color: #4b4b5e;
-    }
-  }
-
-  .logo.small {
-    display: none;
-  }
-
-  .help {
-    --mdc-text-button-label-text-size: 11px;
-    --mdc-text-button-label-text-tracking: 0.2px;
-    line-height: 16.5px;
-    $border-width: 0.125rem;
-    $bottom-border-width: 0rem;
-    height: 1.75rem;
-    min-width: fit-content;
-
-    &:not(:focus-visible) {
-      border-bottom-style: solid;
-      border-bottom-width: $bottom-border-width;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:focus-visible {
-      padding: (0.5rem - $border-width) (5rem - $border-width) (0.5rem - $border-width + $bottom-border-width)
-        (0.25rem - $border-width);
-      border-style: solid;
-      border-width: $border-width;
-    }
-  }
-
-  .filler {
-    flex-grow: 1;
-  }
-
-  @media (max-width: 544px) {
-    gap: 0.25rem;
-    .hra-home {
-      .large {
-        display: none;
-      }
-      .small {
-        display: block;
-      }
-      img {
-        height: 2.5rem;
-      }
-    }
-    .cde-home {
-      .cde-label {
-        font-size: 1rem;
-        line-height: 1.5rem;
-      }
-
-      .preview-app {
-        font-size: 0.75rem;
-        line-height: 18px;
-      }
-
-      img {
-        height: 2.5rem;
-      }
-    }
-  }
-
-  @media (min-width: 544px) {
-    .help {
-      --mdc-text-button-label-text-size: 0.875rem;
-      line-height: 21px;
-      padding: 0.75rem 1.5rem;
-      height: 45px;
-    }
-  }
-
-  @media (min-width: 1012px) {
-    .help {
-      border-bottom-width: 0.125rem !important;
-      padding: 0 5rem 0 0.25rem;
-      --mdc-text-button-label-text-size: 1.125rem;
-      line-height: 27px;
-    }
-  }
-}
diff --git a/apps/cde-ui/src/app/components/header/header.component.spec.ts b/apps/cde-ui/src/app/components/header/header.component.spec.ts
deleted file mode 100644
index 83cde141a..000000000
--- a/apps/cde-ui/src/app/components/header/header.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { render, screen } from '@testing-library/angular';
-import { HeaderComponent } from './header.component';
-import { RouterModule } from '@angular/router';
-
-describe('HeaderComponent', () => {
-  it('should render the logo', async () => {
-    await render(HeaderComponent);
-
-    const logo = screen.getAllByAltText('Human Reference Atlas home')[0];
-    expect(logo).toBeInTheDocument();
-  });
-
-  it('should have navigable links', async () => {
-    await render(HeaderComponent, {
-      imports: [RouterModule.forRoot([])],
-    });
-
-    const homeLink = screen.getByAltText('Cell Distance Explorer home');
-    expect(homeLink).toBeInTheDocument();
-  });
-});
diff --git a/apps/cde-ui/src/app/components/header/header.component.theme.scss b/apps/cde-ui/src/app/components/header/header.component.theme.scss
deleted file mode 100644
index 4e34d46ef..000000000
--- a/apps/cde-ui/src/app/components/header/header.component.theme.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin color($theme) {
-  cde-header {
-    .hra-home,
-    .cde-home {
-      &:focus-visible {
-        outline-color: mat.get-theme-color($theme, primary, default);
-      }
-    }
-
-    .help {
-      --mdc-text-button-label-text-color: #{mat.get-theme-color($theme, accent, default)};
-      border-color: mat.get-theme-color($theme, accent, lighter);
-
-      &:hover {
-        border-color: mat.get-theme-color($theme, primary, default);
-      }
-
-      &:active {
-        --mdc-text-button-label-text-color: #{mat.get-theme-color($theme, primary, darker)};
-        border-color: mat.get-theme-color($theme, primary, darker);
-      }
-
-      &:focus-visible {
-        --mat-text-button-state-layer-color: white;
-        border-color: mat.get-theme-color($theme, primary, default);
-      }
-    }
-  }
-}
-
-@mixin typography($theme) {
-  cde-header {
-    @include mat.button-typography($theme);
-  }
-}
-
-@mixin theme($theme) {
-  @if mat.theme-has($theme, color) {
-    @include color($theme);
-  }
-
-  @if mat.theme-has($theme, typography) {
-    @include typography($theme);
-  }
-}
diff --git a/apps/cde-ui/src/app/components/header/header.component.ts b/apps/cde-ui/src/app/components/header/header.component.ts
deleted file mode 100644
index 1fae38ff8..000000000
--- a/apps/cde-ui/src/app/components/header/header.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterModule } from '@angular/router';
-import { AssetUrlPipe } from '@hra-ui/cdk/app-href';
-
-/**
- * Component for header
- */
-@Component({
-  selector: 'cde-header',
-  standalone: true,
-  imports: [CommonModule, RouterModule, MatButtonModule, AssetUrlPipe],
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HeaderComponent {}
diff --git a/apps/cde-ui/src/app/components/visual-card/visual-card.component.html b/apps/cde-ui/src/app/components/visual-card/visual-card.component.html
index 8a9a1db4f..393058a98 100644
--- a/apps/cde-ui/src/app/components/visual-card/visual-card.component.html
+++ b/apps/cde-ui/src/app/components/visual-card/visual-card.component.html
@@ -1,9 +1,9 @@
 @for (card of cardData(); track card.label) {
   <a [routerLink]="card.route" class="visual-card cta-flat" rel="noopener noreferrer">
     <img [attr.src]="card.image" [alt]="card.alt" />
-    <div class="label">
+    <button class="label" mat-flat-button hraCallToActionButton hraSecondaryButton>
       {{ card.label }}
-      <mat-icon iconPositionEnd> east </mat-icon>
-    </div>
+      <mat-icon class="material-symbols-rounded" iconPositionEnd>arrow_right_alt</mat-icon>
+    </button>
   </a>
 }
diff --git a/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss b/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss
index 2a8691e0c..97f87fb78 100644
--- a/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss
+++ b/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss
@@ -1,87 +1,57 @@
-// @use '../../../styles/cta' as cta;
-
 :host {
   display: flex;
   flex-wrap: wrap;
   gap: 2.5rem;
   column-gap: 1.75rem;
-  justify-content: center;
+  margin: 0 auto;
+  width: min-content;
+
+  @media (min-width: 768px) {
+    margin: 0;
+    width: auto;
+  }
+
+  @media (min-width: 1280px) {
+    justify-content: space-between;
+  }
 
   .visual-card {
+    @media (min-width: 1012px) {
+      width: 24.5rem;
+      height: 24.5rem;
+    }
+
+    @media (min-width: 1920px) {
+      width: 30.5rem;
+      height: 30.5rem;
+    }
+
     border-radius: 1rem;
     overflow: hidden;
-    box-shadow: 0px 5px 1rem 0px rgba(32, 30, 61, 0.24);
+    box-shadow: 0px 5px 1rem 0px rgb(from var(--sys-shadow) r g b / 0.24);
     outline-offset: 0;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    font-family: Metropolis;
     width: 17.5rem;
     height: 17.5rem;
 
     &:hover {
-      box-shadow: 0px 5px 1rem 5px rgba(32, 30, 61, 0.24);
+      box-shadow: 0px 5px 1rem 5px rgb(from var(--sys-shadow) r g b / 0.24);
     }
 
-    // &:focus-visible .label {
-    //   @include cta.flatFocus();
-    // }
-
     img {
       width: 100%;
       object-fit: contain;
     }
 
     .label {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       margin: auto auto;
-      font-size: 0.75rem;
-      line-height: 1.125rem;
     }
 
     mat-icon {
-      vertical-align: middle;
-      height: 1rem;
-      width: 1rem;
-      font-size: 1rem;
-      margin-left: 0.5rem;
-    }
-  }
-
-  @media (min-width: 768px) {
-    justify-content: space-between;
-  }
-
-  @media (min-width: 1012px) {
-    .visual-card {
-      width: 24.5rem;
-      height: 24.5rem;
-
-      .label {
-        font-size: 1rem;
-        line-height: 1.5rem;
-      }
-
-      mat-icon {
-        height: 1.5rem;
-        width: 1.5rem;
-        font-size: 1.5rem;
-        margin-left: 0.75rem;
-      }
-    }
-  }
-
-  @media (min-width: 1280px) {
-    column-gap: 2rem;
-  }
-
-  @media (min-width: 1920px) {
-    .visual-card {
-      width: 30.5rem;
-      height: 30.5rem;
+      margin-left: 0.25rem;
     }
   }
 }
diff --git a/apps/cde-ui/src/app/components/visual-card/visual-card.component.ts b/apps/cde-ui/src/app/components/visual-card/visual-card.component.ts
index ab9ac7212..ddc998295 100644
--- a/apps/cde-ui/src/app/components/visual-card/visual-card.component.ts
+++ b/apps/cde-ui/src/app/components/visual-card/visual-card.component.ts
@@ -1,8 +1,8 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
+import { ButtonModule } from '@hra-ui/design-system/button';
 
 /**
  * Interface for the visual card
@@ -24,7 +24,7 @@ export interface VisualCard {
 @Component({
   selector: 'cde-visual-card',
   standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule],
+  imports: [CommonModule, ButtonModule, MatIconModule, RouterModule],
   templateUrl: './visual-card.component.html',
   styleUrl: './visual-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
index ccd079f51..4a63e3ecd 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss
@@ -10,13 +10,6 @@
     height: 5rem;
   }
 
-  ::ng-deep .app-logo .app-description {
-    border-radius: 0.125rem;
-    width: fit-content;
-    padding: 0 0.25rem;
-    font: 500 0.625rem/1rem Metropolis !important;
-  }
-
   .content {
     display: flex;
     flex-direction: column;
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
index 77ba3ef3e..fdf80d67b 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
@@ -5,11 +5,6 @@ cde-create-visualization-page {
     background-color: var(--sys-surface-container-high) !important;
   }
 
-  .app-description {
-    color: var(--sys-on-tertiary-fixed) !important;
-    background: rgb(from var(--sys-on-tertiary-container) r g b / 0.08);
-  }
-
   .card {
     background-color: var(--sys-surface-container-low);
 
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
index 77f2a3974..fb2a2aca2 100644
--- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
+++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts
@@ -34,7 +34,6 @@ import { ParseError } from 'papaparse';
 
 import { MarkEmptyFormControlDirective } from '../../components/empty-form-control/empty-form-control.directive';
 import { FileLoadError, FileUploadComponent } from '../../components/file-upload/file-upload.component';
-import { HeaderComponent } from '../../components/header/header.component';
 import { VisualizationDataService } from '../../services/visualization-data-service/visualization-data.service';
 import { validateInteger } from '../../shared/form-validators/is-integer';
 import { OrganEntry } from '../../shared/resolvers/organs/organs.resolver';
@@ -78,7 +77,6 @@ function optionalValue<T>(): T | null {
     ButtonModule,
     FileUploadComponent,
     FooterComponent,
-    HeaderComponent,
     MarkEmptyFormControlDirective,
     NavHeaderComponent,
     OverlayModule,
diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html
index ce6403f67..7786aa7a9 100644
--- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html
+++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html
@@ -1,9 +1,14 @@
-<cde-header></cde-header>
+<hra-nav-header
+  title="Cell Distance Explorer"
+  icon="assets/logo/cde_logo.svg"
+  link="https://apps.humanatlas.io/cde/"
+  description="Beta"
+></hra-nav-header>
 <section class="create-and-explore">
   <div class="create-explore-content">
     <div class="header">
-      <h1>Create and explore cell distance visualizations</h1>
-      <h4>
+      <h1 class="title">Create and explore cell distance visualizations</h1>
+      <h4 class="description">
         This website supports visualization and quantification of cells and cell-cell distance distributions in
         processed spatial molecular data. Resulting data and visualizations can be explored, downloaded, and can be
         embedded on websites.
@@ -20,7 +25,7 @@ <h2 class="background-header">
       </h2>
       <div class="content">
         <div class="paper">
-          <p>
+          <p class="background-text">
             The vasculature is the human body's delivery system. It is also a cornerstone of medicine, helping surgeons
             guide surgeries, pathologists diagnose disease, and serving as a landmark for medical practitioners of all
             stripes. The Vasculature Common Coordinate Framework (VCCF) taps into this organic infrastructure in order
@@ -28,28 +33,30 @@ <h2 class="background-header">
           </p>
           <div class="links">
             <a
+              class="vccf-paper"
               mat-flat-button
-              class="hra-btn cta-filled"
+              hraCallToActionButton
+              hraPrimaryButton
+              disableRipple
               href="https://doi.org/10.3389/fcvm.2020.00029"
               target="_blank"
               rel="noopener noreferrer"
-              color="primary"
-              disableRipple
             >
               Read VCCF Paper
-              <mat-icon iconPositionEnd> east </mat-icon>
+              <mat-icon class="material-symbols-rounded" iconPositionEnd>arrow_right_alt</mat-icon>
             </a>
+
             <a
-              mat-button
-              class="hra-btn cta-flat"
+              mat-flat-button
+              hraCallToActionButton
+              hraSecondaryButton
+              disableRipple
               [attr.href]="'assets/VCCF_March2024.pdf' | assetUrl"
               target="_blank"
               rel="noopener noreferrer"
-              color="primary"
-              disableRipple
             >
               VCCF Visualization Poster
-              <mat-icon iconPositionEnd> east </mat-icon>
+              <mat-icon class="material-symbols-rounded" iconPositionEnd>arrow_right_alt</mat-icon>
             </a>
           </div>
         </div>
diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss
index 759cf552b..3076bf4c3 100644
--- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss
+++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss
@@ -3,22 +3,27 @@
     margin: 0 auto;
   }
   display: block;
-  background-color: rgba(252, 252, 252, 1);
+  background-color: var(--sys-surface-container-low);
+  min-width: 20rem;
 
-  .create-and-explore {
-    max-width: 18rem;
+  hra-nav-header {
+    height: 5.25rem;
   }
 
   .create-explore-content {
-    padding: 3rem 0 5rem 0;
-  }
+    padding: 3rem 1rem 5rem 1rem;
 
-  .header h1 {
-    margin-bottom: 0.5rem;
-  }
+    .header .title {
+      font: var(--sys-display-small);
+      letter-spacing: var(--sys-display-small-tracking);
+      margin: 0 0 0.5rem 0;
+    }
 
-  .header h4 {
-    margin-bottom: 3rem;
+    .header .description {
+      font: var(--sys-body-splash);
+      letter-spacing: var(--sys-body-splash-tracking);
+      margin: 0 0 3rem 0;
+    }
   }
 
   .vccf-container {
@@ -38,14 +43,15 @@
     grid-template-areas:
       'video'
       'content-container';
+    row-gap: 3rem;
   }
 
   .vccf .content-container {
     grid-area: content-container;
-    background: white;
+    background: var(--sys-on-primary);
     padding: 2rem 1.5rem;
     border-radius: 1rem;
-    box-shadow: 0px 5px 16px 0px rgba(32, 30, 61, 0.24);
+    box-shadow: 0px 5px 16px 0px rgb(from var(--sys-shadow) r g b / 0.24);
   }
 
   .vccf .content {
@@ -58,45 +64,31 @@
     flex-direction: column;
   }
 
-  .paper p {
-    margin-bottom: 2rem;
-  }
-
   .background-header {
     grid-area: header;
-    margin-bottom: 0.5rem;
+    font: var(--sys-headline-small);
+    letter-spacing: var(--sys-headline-small-tracking);
+    line-height: 2.25rem;
+    margin: 0 0 0.5rem 0;
   }
 
-  .links {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  .background-text {
+    font: var(--sys-body-medium);
+    letter-spacing: var(--sys-body-medium-tracking);
+    margin: 0 0 2rem 0;
   }
 
-  .hra-btn {
-    --mdc-filled-button-label-text-size: 0.75rem;
-    --mdc-text-button-label-text-size: 0.75rem;
-    display: flex;
-    width: max-content;
-    height: 2rem;
-    padding: 0 0.6875rem 0 0.75rem;
-
-    .mat-icon {
-      vertical-align: middle;
-      height: 1rem;
-      width: 1rem;
-      font-size: 1rem;
-      margin-right: 0.25rem;
-      margin-left: 0.25rem;
+  .links {
+    .vccf-paper {
+      margin-bottom: 1rem;
     }
 
-    --mat-text-button-hover-state-layer-opacity: 0;
-    --mat-text-button-pressed-state-layer-opacity: 0;
-    --mat-text-button-focus-state-layer-opacity: 0;
+    mat-icon {
+      margin-left: 0.25rem;
+    }
   }
 
   .youtube-player {
-    margin-bottom: 3rem;
     grid-area: video;
 
     ::ng-deep .youtube-player-placeholder,
@@ -128,39 +120,31 @@
   }
 
   @media (min-width: 430px) {
-    .create-and-explore {
-      max-width: 24.875rem;
-    }
-
     .vccf {
       max-width: 23.75rem;
 
       .content-container {
         padding: 1.5rem 2rem;
       }
-    }
 
-    .links {
-      flex-direction: column;
-
-      .hra-btn {
-        --mdc-filled-button-label-text-size: 0.875rem;
-        --mdc-text-button-label-text-size: 0.875rem;
-
-        &.cta-filled {
-          padding-left: 1rem;
-        }
+      .background-header {
+        font: var(--sys-headline-medium);
+        letter-spacing: var(--sys-headline-medium-tracking);
+      }
 
-        .mat-icon {
-          margin-left: 0.5rem;
-        }
+      .background-text {
+        font: var(--sys-body-large);
+        letter-spacing: var(--sys-body-large-tracking);
       }
     }
   }
 
   @media (min-width: 544px) {
-    .create-and-explore {
-      max-width: 32rem;
+    .create-explore-content {
+      .header .title {
+        font: var(--sys-display-medium);
+        letter-spacing: var(--sys-display-medium-tracking);
+      }
     }
 
     .vccf {
@@ -172,8 +156,13 @@
     }
 
     .links {
+      display: flex;
       flex-direction: row;
       gap: 0.5rem;
+
+      .vccf-paper {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -182,6 +171,13 @@
       max-width: 38.75rem;
     }
 
+    .create-explore-content {
+      .header .title {
+        font: var(--sys-display-large);
+        letter-spacing: var(--sys-display-large-tracking);
+      }
+    }
+
     .vccf {
       max-width: 39.4375rem;
     }
@@ -191,22 +187,17 @@
     }
 
     .links {
-      flex-direction: row;
       gap: 2rem;
     }
-
-    .links a:last-of-type {
-      padding-left: unset;
-    }
   }
 
   @media (min-width: 1012px) {
     .create-and-explore {
       max-width: 53rem;
-    }
 
-    .create-explore-content {
-      padding: 3rem 0 5rem 0;
+      .create-explore-content {
+        padding: 3rem 0 5rem 0;
+      }
     }
 
     .header {
@@ -219,28 +210,15 @@
       .content-container {
         padding: 2rem 2.5rem;
       }
+
+      .background-header {
+        font: var(--sys-headline-large);
+        letter-spacing: var(--sys-headline-large-tracking);
+      }
     }
 
     .links {
       gap: 3rem;
-
-      .hra-btn {
-        --mdc-filled-button-label-text-size: 1rem;
-        --mdc-text-button-label-text-size: 1rem;
-        height: 2.5rem;
-        padding-right: 0.9375rem;
-
-        &.cta-filled {
-          padding-left: 1.5rem;
-        }
-
-        .mat-icon {
-          height: 1.5rem;
-          width: 1.5rem;
-          font-size: 1.5rem;
-          margin-left: 0.75rem;
-        }
-      }
     }
   }
 
@@ -249,10 +227,6 @@
       max-width: 77.5rem;
     }
 
-    .create-explore-content {
-      padding: 3rem 0 5rem 0;
-    }
-
     .vccf {
       max-width: 71.6875rem;
       grid-template-columns: 55% auto;
@@ -262,7 +236,6 @@
     }
 
     .youtube-player {
-      margin-bottom: 0;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -287,10 +260,10 @@
 
     .create-explore-content {
       padding: 5rem 0 7rem 0;
-    }
 
-    .header h4 {
-      margin-bottom: 4rem;
+      .header .description {
+        margin-bottom: 4rem;
+      }
     }
 
     .vccf {
diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss
index a6ec09585..2059e1bb4 100644
--- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss
+++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.theme.scss
@@ -1,54 +1,7 @@
-@use '@angular/material' as mat;
-@use '../../../styles/cta' as cta;
-@mixin color($theme) {
-  cde-landing-page {
-    .hra-btn.cta-flat {
-      color: mat.get-theme-color($theme, primary, 700);
+cde-landing-page {
+  color: var(--sys-secondary);
 
-      &:hover {
-        @include cta.flatHover();
-      }
-
-      &:active {
-        @include cta.flatActive();
-      }
-
-      &:focus-visible {
-        @include cta.flatFocus();
-      }
-    }
-  }
-}
-
-@mixin typography($theme) {
-  cde-landing-page {
-    h1 {
-      font: mat.get-theme-typography($theme, headline-5) !important;
-      letter-spacing: mat.get-theme-typography($theme, headline-5, letter-spacing) !important;
-    }
-
-    h4 {
-      font: mat.get-theme-typography($theme, body-1) !important;
-      letter-spacing: mat.get-theme-typography($theme, body-1, letter-spacing) !important;
-    }
-
-    h2 {
-      font: mat.get-theme-typography($theme, headline-6) !important;
-    }
-
-    p {
-      font: mat.get-theme-typography($theme, body-2) !important;
-      letter-spacing: mat.get-theme-typography($theme, body-2, letter-spacing) !important;
-    }
-  }
-}
-
-@mixin theme($theme) {
-  @if mat.theme-has($theme, color) {
-    @include color($theme);
-  }
-
-  @if mat.theme-has($theme, typography) {
-    @include typography($theme);
+  h4 {
+    color: var(--sys-primary);
   }
 }
diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts
index 03919b196..e297fe068 100644
--- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts
+++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { YouTubePlayerModule } from '@angular/youtube-player';
-
 import { AssetUrlPipe } from '@hra-ui/cdk/app-href';
+import { ButtonModule } from '@hra-ui/design-system/button';
 import { FooterComponent } from '@hra-ui/design-system/footer';
-import { HeaderComponent } from '../../components/header/header.component';
+import { NavHeaderComponent } from '@hra-ui/design-system/nav-header';
+
 import { VisualCard, VisualCardComponent } from '../../components/visual-card/visual-card.component';
 
 /**
@@ -19,11 +19,11 @@ import { VisualCard, VisualCardComponent } from '../../components/visual-card/vi
     CommonModule,
     VisualCardComponent,
     MatIconModule,
-    MatButtonModule,
+    ButtonModule,
     YouTubePlayerModule,
-    HeaderComponent,
     FooterComponent,
     AssetUrlPipe,
+    NavHeaderComponent,
   ],
   templateUrl: './landing-page.component.html',
   styleUrl: './landing-page.component.scss',
diff --git a/apps/cde-ui/src/styles.scss b/apps/cde-ui/src/styles.scss
index 8fd3e283b..c7c340360 100644
--- a/apps/cde-ui/src/styles.scss
+++ b/apps/cde-ui/src/styles.scss
@@ -1,6 +1,7 @@
 @use 'light-theme';
 @use 'theming';
 @use '../src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss' as create-visualization;
+@use '../src/app/pages/landing-page/landing-page.component.theme.scss' as landing-page;
 
 html {
   @include theming.theme(light-theme.$theme);
diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.html b/libs/design-system/app-logos/src/lib/app-logos.component.html
index 6cb449e7e..1f14751d6 100644
--- a/libs/design-system/app-logos/src/lib/app-logos.component.html
+++ b/libs/design-system/app-logos/src/lib/app-logos.component.html
@@ -13,7 +13,9 @@
   <span>
     <div class="mat-caption app-label">{{ appTitle() }}</div>
     @if (appDescription()) {
-      <div class="mat-caption app-description">{{ appDescription() }}</div>
+      <div class="mat-caption app-description" [class.beta-description]="appDescription() === 'Beta'">
+        {{ appDescription() }}
+      </div>
     }
   </span>
 </a>
diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.scss b/libs/design-system/app-logos/src/lib/app-logos.component.scss
index 0db5eb1d8..dbcbe4e40 100644
--- a/libs/design-system/app-logos/src/lib/app-logos.component.scss
+++ b/libs/design-system/app-logos/src/lib/app-logos.component.scss
@@ -47,6 +47,17 @@
       letter-spacing: var(--sys-label-medium-tracking);
       color: var(--sys-on-secondary-fixed);
     }
+
+    // Temporary
+    .beta-description {
+      font: var(--sys-label-micro) !important;
+      letter-spacing: var(--sys-label-micro-tracking) !important;
+      border-radius: 0.125rem;
+      width: fit-content;
+      padding: 0 0.25rem;
+      color: var(--sys-on-tertiary-fixed);
+      background: rgb(from var(--sys-on-tertiary-container) r g b / 0.08);
+    }
   }
 
   @media (max-width: 1012px) {
diff --git a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss
index 9a881d061..97b81f762 100644
--- a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss
+++ b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss
@@ -121,7 +121,7 @@ $y-multiplier: 0.4566;
   letter-spacing: var(--sys-label-medium-tracking);
   --mdc-filled-button-container-shape: 0.25rem;
   --mat-filled-button-horizontal-padding: 1rem;
-  --mdc-filled-button-container-height: 2rem;
+  --mdc-filled-button-container-height: 2.5rem;
 
   &:hover {
     box-shadow: 1px 2px 16px 0px rgb(from var(--sys-tertiary) r g b / 0.56);
@@ -134,7 +134,7 @@ $y-multiplier: 0.4566;
   }
 }
 
-// Custom class for Flat primary & Seconday
+// Custom class for Flat primary & Secondary
 :is(a, button)[mat-flat-button] {
   &.button-size-large {
     --mat-filled-button-horizontal-padding: 1rem;
diff --git a/libs/design-system/styles/_typography.scss b/libs/design-system/styles/_typography.scss
index 7905af7fa..2f0538842 100644
--- a/libs/design-system/styles/_typography.scss
+++ b/libs/design-system/styles/_typography.scss
@@ -122,4 +122,12 @@ $overrides: (
   --sys-wordmark-small-size: 0.75rem;
   --sys-wordmark-small-tracking: 0rem;
   --sys-wordmark-small-weight: 400;
+
+  // Micro label
+  --sys-label-micro: 500 0.625rem / 1rem #{$_brand};
+  --sys-label-micro-font: #{$_brand};
+  --sys-label-micro-line-height: 1rem;
+  --sys-label-micro-size: 0.625rem;
+  --sys-label-micro-tracking: 0rem;
+  --sys-label-micro-weight: 500;
 }