diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
new file mode 100644
index 00000000..f7c3c454
--- /dev/null
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -0,0 +1,137 @@
+@use "../../../styles/variables" as vars;
+@use "../../../styles/colors" as colors;
+@use "../../../styles/fonts" as fonts;
+@use "../../../styles/screen" as screen;
+
+.flight-details {
+  &--error,
+  &--not-found {
+    padding: vars.$space-xl;
+    text-align: center;
+  }
+
+  &__status {
+    padding: vars.$space-m vars.$space-xl;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: vars.$space-xl;
+  }
+
+  &__flight-number {
+    font-size: fonts.$font-size-xl2;
+    margin: 0;
+  }
+
+  &__overall-status {
+    font-weight: fonts.$font-medium;
+  }
+
+  &__operating {
+    padding: 0 vars.$space-xl vars.$space-xl;
+    color: colors.$light-gray;
+  }
+
+  &__flying-time {
+    padding: vars.$space-xl;
+    color: colors.$light-gray;
+  }
+
+  &__legs {
+    padding: 0 vars.$space-xl;
+  }
+
+  &__leg {
+    padding: vars.$space-xl 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px dashed colors.$border;
+    }
+  }
+
+  &__leg-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: vars.$space-m;
+  }
+
+  &__leg-index {
+    font-weight: fonts.$font-medium;
+  }
+
+  &__leg-stations {
+    display: flex;
+    justify-content: space-between;
+
+    @include screen.mobile {
+      flex-direction: column;
+      gap: vars.$space-xl;
+    }
+  }
+
+  &__leg-departure,
+  &__leg-arrival {
+    display: flex;
+    flex-direction: column;
+    gap: vars.$space-s;
+  }
+
+  &__leg-duration {
+    display: flex;
+    align-items: center;
+    color: colors.$light-gray;
+  }
+
+  &__station-code {
+    font-size: fonts.$font-size-xl;
+    font-weight: fonts.$font-medium;
+  }
+
+  &__station-name,
+  &__station-city {
+    color: colors.$light-gray;
+    font-size: fonts.$font-size-s;
+  }
+
+  &__terminal,
+  &__gate,
+  &__bag-belt {
+    font-size: fonts.$font-size-s;
+    color: colors.$light-gray;
+  }
+
+  &__time {
+    font-size: fonts.$font-size-l;
+  }
+
+  &__time-actual {
+    font-size: fonts.$font-size-s;
+    color: colors.$orange;
+  }
+
+  &__aircraft {
+    margin-top: vars.$space-m;
+    color: colors.$light-gray;
+    font-size: fonts.$font-size-s;
+  }
+
+  // Angular overrides ported (without ::ng-deep)
+  .flight-props-caption {
+    width: 30%;
+  }
+
+  .flight-details-section__caption {
+    width: calc(30% - #{vars.$space-xl});
+  }
+
+  .board-details-day-selector {
+    @include screen.mobile {
+      display: flex;
+      flex-direction: column;
+      padding: vars.$space-xl;
+    }
+  }
+}
diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
index a042b80c..68a6208a 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
@@ -9,6 +9,7 @@
 
 import type { FC } from "react";
 import { useTranslation } from "@/i18n/provider.js";
+import "./OnlineBoardDetailsPage.scss";
 import { FlightCard } from "@/ui/flights/FlightCard.js";
 import { FlightListSkeleton } from "@/ui/flights/FlightListSkeleton.js";
 import { SeoHead } from "@/ui/seo/SeoHead.js";
diff --git a/src/features/online-board/components/OnlineBoardSearchPage.scss b/src/features/online-board/components/OnlineBoardSearchPage.scss
new file mode 100644
index 00000000..bd2ca8fb
--- /dev/null
+++ b/src/features/online-board/components/OnlineBoardSearchPage.scss
@@ -0,0 +1,81 @@
+@use "../../../styles/variables" as vars;
+@use "../../../styles/colors" as colors;
+@use "../../../styles/screen" as screen;
+
+.online-board-search {
+  &__status {
+    padding: vars.$space-m vars.$space-xl;
+  }
+
+  &__calendar {
+    display: flex;
+    gap: vars.$space-s;
+    padding: vars.$space-xl;
+    overflow-x: auto;
+
+    @include screen.mobile {
+      flex-direction: column;
+      padding: vars.$space-xl;
+    }
+  }
+
+  &__error {
+    padding: vars.$space-xl;
+    color: colors.$red;
+  }
+
+  &__actions {
+    display: none;
+  }
+}
+
+.board-day-selector {
+  @include screen.mobile {
+    display: flex;
+    flex-direction: column;
+    padding: vars.$space-xl;
+  }
+}
+
+.calendar-day {
+  padding: vars.$space-s2 vars.$space-m;
+  border: 1px solid colors.$border;
+  border-radius: vars.$border-radius;
+  background: colors.$white;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    border-color: colors.$blue-light;
+  }
+
+  &--active {
+    background-color: colors.$blue;
+    color: colors.$white;
+    border-color: colors.$blue;
+  }
+}
+
+.connection-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px vars.$space-s2;
+  border-radius: vars.$border-radius;
+  font-size: 12px;
+  font-weight: 500;
+
+  &--live {
+    background-color: colors.$green;
+    color: colors.$white;
+  }
+
+  &--reconnecting {
+    background-color: colors.$orange;
+    color: colors.$white;
+  }
+
+  &--offline {
+    background-color: colors.$light-gray;
+    color: colors.$white;
+  }
+}
diff --git a/src/features/online-board/components/OnlineBoardSearchPage.tsx b/src/features/online-board/components/OnlineBoardSearchPage.tsx
index 589986ab..801f4d59 100644
--- a/src/features/online-board/components/OnlineBoardSearchPage.tsx
+++ b/src/features/online-board/components/OnlineBoardSearchPage.tsx
@@ -16,6 +16,7 @@ import type { FC } from "react";
 import { useCallback } from "react";
 import { useNavigate, useParams } from "@modern-js/runtime/router";
 import { FlightList } from "@/ui/flights/FlightList.js";
+import "./OnlineBoardSearchPage.scss";
 import { JsonLdRenderer } from "@/shared/seo/json-ld.js";
 import { useOnlineBoard } from "../hooks/useOnlineBoard.js";
 import { useLiveBoardSearch } from "../hooks/useLiveBoardSearch.js";