diff --git a/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss b/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss
index d5983d4a..dc110c42 100644
--- a/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss
+++ b/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss
@@ -55,14 +55,31 @@
   }
 }
 
+// Mirrors Angular's detail-header-badge-flight-number:
+//   font-weight: $font-medium (500), font-size: $font-size-xl (18px).
+// React previously used 28px / 600 which read as a page title and
+// dwarfed the logo in the adjacent column.
 .details-header-badge {
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 10px; // Angular h-spacing($space-m) between flight number + logo
 
-  &__flight-number { display: flex; flex-direction: column; }
-  &__primary { font-size: 28px; font-weight: 600; color: #1a3a5c; }
-  &__codesharing { font-size: 12px; color: #666; margin-top: 2px; }
+  &__flight-number {
+    display: flex;
+    flex-direction: column;
+    font-weight: 500;
+    font-size: 18px;
+  }
+  &__primary {
+    font-size: 18px;
+    font-weight: 500;
+    color: colors.$text-color;
+  }
+  &__codesharing {
+    font-size: 12px;
+    color: colors.$light-gray;
+    margin-top: 2px;
+  }
 
   &__airline {
     display: flex;
@@ -87,7 +104,7 @@
     align-items: center;
     gap: 6px;
     padding: 4px 10px;
-    border: 1px solid #ddd;
+    border: 1px solid colors.$border;
     border-radius: 14px;
     height: 28px;
     font-size: 12px;
@@ -99,10 +116,10 @@
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: #333;
+  color: colors.$text-color;
 
-  &__description { font-size: 12px; color: #333; }
-  &__time { font-size: 12px; color: #333; }
+  &__description { font-size: 12px; color: colors.$text-color; }
+  &__time { font-size: 12px; color: colors.$text-color; }
 
   .share-button-wrap {
     @media (min-width: 769px) { display: none; }
@@ -117,7 +134,7 @@
     top: 100%;
     right: 0;
     background: #fff;
-    border: 1px solid #b8d4f1;
+    border: 1px solid colors.$border-blue;
     border-radius: 3px;
     padding: 20px;
     box-shadow: 0 2px 2px rgba(177, 177, 177, 0.15);
@@ -139,7 +156,7 @@
       align-items: center;
       text-align: center;
       font-size: 10px;
-      color: #1a3a5c;
+      color: colors.$blue;
       width: 60px;
       height: 55px;
       padding-top: 32px;
@@ -149,7 +166,7 @@
       cursor: pointer;
       transition: color 0.2s;
 
-      &:hover { color: #2060c0; }
+      &:hover { color: colors.$blue-light; }
 
       &.facebook { background-image: url('/assets/img/share/facebook.svg'); }
       &.vk { background-image: url('/assets/img/share/vk.svg'); }