diff --git a/apps/react/src/app/components/button/button.scss b/apps/react/src/app/components/button/button.scss
new file mode 100644
index 000000000..be1a47db7
--- /dev/null
+++ b/apps/react/src/app/components/button/button.scss
@@ -0,0 +1,87 @@
+.button {
+  min-height: 35px;
+  cursor: pointer;
+  transition-duration: 0.2s;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  padding: 0 15px;
+
+  // Size variants
+  &--small {
+    min-height: 28px;
+    font-size: 12px;
+    padding: 0 12px;
+  }
+
+  &--medium {
+    min-height: 35px;
+    font-size: 14px;
+    padding: 0 15px;
+  }
+
+  &--large {
+    min-height: 42px;
+    font-size: 16px;
+    padding: 0 18px;
+  }
+
+  // Color variants
+  &--primary {
+    background-color: #0099ff;
+    color: white;
+
+    &:hover:not(:disabled) {
+      background-color: #0080d9;
+    }
+
+    &:disabled {
+      background-color: #b3d9ff;
+      cursor: not-allowed;
+    }
+  }
+
+  &--secondary {
+    background-color: white;
+    color: #666666;
+    border: 1.3px solid #e0e0e0;
+
+    &:hover:not(:disabled) {
+      background-color: #f5f5f5;
+      border-color: #b3d9ff;
+    }
+
+    &:disabled {
+      background-color: #f9f9f9;
+      color: #cccccc;
+      cursor: not-allowed;
+    }
+  }
+
+  &--tertiary {
+    background-color: transparent;
+    color: #0099ff;
+    border: 1px solid transparent;
+
+    &:hover:not(:disabled) {
+      background-color: transparent;
+      border-color: #e0e0e0;
+    }
+
+    &:disabled {
+      color: #b3d9ff;
+      cursor: not-allowed;
+    }
+  }
+
+  // Loading state
+  &__loader {
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  // Disabled state
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
diff --git a/apps/react/src/app/components/button/button.tsx b/apps/react/src/app/components/button/button.tsx
new file mode 100644
index 000000000..81a02fc7d
--- /dev/null
+++ b/apps/react/src/app/components/button/button.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import './button.scss'
+
+export interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'data-testid'> {
+  variant?: 'primary' | 'secondary' | 'tertiary'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  loading?: boolean
+  children: React.ReactNode
+  'data-testid'?: string
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  loading = false,
+  className = '',
+  ...props
+}) => {
+  const { 'data-testid': dataTestId = 'button', ...buttonProps } = props as any
+
+  return (
+    <button
+      className={`button button--${variant} button--${size} ${className}`.trim()}
+      disabled={disabled || loading}
+      data-testid={dataTestId}
+      {...buttonProps}
+    >
+      {loading ? <span className="button__loader">Loading...</span> : props.children}
+    </button>
+  )
+}
diff --git a/apps/react/src/app/components/button/index.ts b/apps/react/src/app/components/button/index.ts
new file mode 100644
index 000000000..99ce4abd4
--- /dev/null
+++ b/apps/react/src/app/components/button/index.ts
@@ -0,0 +1,2 @@
+export { Button } from './button'
+export type { ButtonProps } from './button'
diff --git a/apps/react/src/styles/_buttons.scss b/apps/react/src/styles/_buttons.scss
index 3a7d7d2c9..2f389a874 100644
--- a/apps/react/src/styles/_buttons.scss
+++ b/apps/react/src/styles/_buttons.scss
@@ -59,7 +59,7 @@ a {
             border: 1.3px solid $border-blue !important;
             height: $medium-button-height;
             border-radius: 0 $border-radius $border-radius 0;
-            background-image: url('~src/assets/img/arr-down.svg');
+            background-image: url('../assets/img/arr-down.svg');
             background-position: center center;
             background-repeat: no-repeat;
             margin-left: -1px;
diff --git a/apps/react/src/styles/_icons.scss b/apps/react/src/styles/_icons.scss
index 4fe9cefc2..d96073c5c 100644
--- a/apps/react/src/styles/_icons.scss
+++ b/apps/react/src/styles/_icons.scss
@@ -31,19 +31,19 @@
 }
 
 .svg--share {
-    background-image: url('~src/assets/img/share.svg');
+    background-image: url('../assets/img/share.svg');
 }
 
 .svg--print {
-    background-image: url('~src/assets/img/print.svg');
+    background-image: url('../assets/img/print.svg');
 }
 
 .svg--pin {
-    background-image: url('~src/assets/img/pin-24.svg');
+    background-image: url('../assets/img/pin-24.svg');
 }
 
 .svg--expand {
-    background-image: url('~src/assets/img/expand.svg');
+    background-image: url('../assets/img/expand.svg');
 }
 
 svg {
@@ -65,7 +65,7 @@ svg {
 }
 
 .svg--calendar {
-    background-image: url('~src/assets/img/calendar.svg');
+    background-image: url('../assets/img/calendar.svg');
 }
 
 .svg--arrow {
diff --git a/apps/react/src/styles/_layout.scss b/apps/react/src/styles/_layout.scss
index 3e222d71d..370bfcfed 100644
--- a/apps/react/src/styles/_layout.scss
+++ b/apps/react/src/styles/_layout.scss
@@ -37,7 +37,7 @@ html {
 
 body {
     background-color: $blue-dark !important;
-    background-image: url('~src/assets/img/background.jpg');
+    background-image: url('../assets/img/background.jpg');
     background-repeat: no-repeat;
     background-size: 100%;
 
@@ -206,7 +206,7 @@ p-checkbox {
         @include control-border-shadow();
         background-position: center center;
         background-repeat: no-repeat;
-        background-image: url('~src/assets/img/check.svg');
+        background-image: url('../assets/img/check.svg');
         background-size: 0 auto;
 
         &.p-highlight {
@@ -278,23 +278,23 @@ body {
                     }
 
                     &.facebook {
-                        background-image: url('~src/assets/img/share/facebook.svg');
+                        background-image: url('../assets/img/share/facebook.svg');
                     }
 
                     &.vk {
-                        background-image: url('~src/assets/img/share/vk.svg');
+                        background-image: url('../assets/img/share/vk.svg');
                     }
 
                     &.twitter {
-                        background-image: url('~src/assets/img/share/twitter.svg');
+                        background-image: url('../assets/img/share/twitter.svg');
                     }
 
                     &.copy {
-                        background-image: url('~src/assets/img/share/copy.svg');
+                        background-image: url('../assets/img/share/copy.svg');
                     }
 
                     &.weibo {
-                        background-image: url('~src/assets/img/share/weibo.svg');
+                        background-image: url('../assets/img/share/weibo.svg');
                         background-size: 29px;
                     }
                 }
@@ -315,7 +315,7 @@ p-accordion .p-accordion-content button.button-clear {
     background: linear-gradient(270deg, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
 
     .p-button-label {
-        background-image: url('~src/assets/img/close.svg');
+        background-image: url('../assets/img/close.svg');
         background-repeat: no-repeat;
         background-size: 10px 10px;
         height: 100%;
@@ -374,5 +374,5 @@ p-accordion .p-accordion-content button.button-clear {
     height: 25px;
 }
 
-@import '~src/styles/pages/adaptive/layout-adaptive';
-@import '~src/styles/_layout-print';
+@import './pages/adaptive/layout-adaptive';
+@import './_layout-print';
diff --git a/apps/react/src/styles/_logos.scss b/apps/react/src/styles/_logos.scss
index db20bcb8b..a441c7502 100644
--- a/apps/react/src/styles/_logos.scss
+++ b/apps/react/src/styles/_logos.scss
@@ -35,161 +35,161 @@ $width-base: 120px;
     &--SU {
         @include scale($width-base, 0.258);
 
-        background-image: url('~src/assets/img/airlines-logo/aeroflot/large/en.png') !important;
+        background-image: url('../assets/img/airlines-logo/aeroflot/large/en.png') !important;
 
         &.ru {
-            background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
+            background-image: url('../assets/img/airlines-logo/aeroflot/large/ru.png') !important;
         }
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/aeroflot/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/aeroflot/round.png') !important;
         }
     }
 
     &--HZ {
         @include scale(80px, 0.5556);
 
-        background-image: url('~src/assets/img/airlines-logo/aurora/large/en.svg') !important;
+        background-image: url('../assets/img/airlines-logo/aurora/large/en.svg') !important;
 
         &.ru {
-            background-image: url('~src/assets/img/airlines-logo/aurora/large/ru.svg') !important;
+            background-image: url('../assets/img/airlines-logo/aurora/large/ru.svg') !important;
         }
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/aurora/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/aurora/round.png') !important;
         }
     }
 
     &--F7 {
         @include scale($width-base, 0.258);
 
-        background-image: url('~src/assets/img/airlines-logo/aeroflot/large/en.png') !important;
+        background-image: url('../assets/img/airlines-logo/aeroflot/large/en.png') !important;
 
         &.ru {
-            background-image: url('~src/assets/img/airlines-logo/aeroflot/large/ru.png') !important;
+            background-image: url('../assets/img/airlines-logo/aeroflot/large/ru.png') !important;
         }
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/aeroflot/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/aeroflot/round.png') !important;
         }
     }
 
     &--FV {
         @include scale(90px, 0.1667);
 
-        background-image: url('~src/assets/img/airlines-logo/rossiya/large/en.svg') !important;
+        background-image: url('../assets/img/airlines-logo/rossiya/large/en.svg') !important;
 
         &.ru {
-            background-image: url('~src/assets/img/airlines-logo/rossiya/large/ru.svg') !important;
+            background-image: url('../assets/img/airlines-logo/rossiya/large/ru.svg') !important;
         }
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/rossiya/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/rossiya/round.png') !important;
         }
     }
 
     &--RO {
         @include scale($width-base, 0.3334);
 
-        background-image: url('~src/assets/img/airlines-logo/tarom/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/tarom/large.png') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/tarom/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/tarom/round.svg') !important;
         }
     }
 
     &--DP {
         @include scale($width-base, 0.1889);
-        background-image: url('~src/assets/img/airlines-logo/pobeda/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/pobeda/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/pobeda/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/pobeda/round.png') !important;
         }
     }
 
     &--OM {
-        background-image: url('~src/assets/img/airlines-logo/miat/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/miat/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/miat/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/miat/round.svg') !important;
         }
     }
 
     &--KL {
         @include scale($width-base, 0.4444);
-        background-image: url('~src/assets/img/airlines-logo/klm/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/klm/large.png') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/klm/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/klm/round.png') !important;
         }
     }
 
     &--AY {
-        background-image: url('~src/assets/img/airlines-logo/finnair/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/finnair/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/finnair/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/finnair/round.png') !important;
         }
     }
 
     &--DL {
-        background-image: url('~src/assets/img/airlines-logo/delta/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/delta/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/delta/round.png') !important;
+            background-image: url('../assets/img/airlines-logo/delta/round.png') !important;
         }
     }
 
     &--OK {
-        background-image: url('~src/assets/img/airlines-logo/czech-airline/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/czech-airline/large.png') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/czech-airline/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/czech-airline/round.svg') !important;
         }
     }
 
     &--JU {
-        background-image: url('~src/assets/img/airlines-logo/air-serbia/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/air-serbia/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/air-serbia/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/air-serbia/round.svg') !important;
         }
     }
 
     &--UX {
-        background-image: url('~src/assets/img/airlines-logo/air-europa/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/air-europa/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/air-europa/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/air-europa/round.svg') !important;
         }
     }
 
     &--BT {
-        background-image: url('~src/assets/img/airlines-logo/air-baltic/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/air-baltic/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/air-baltic/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/air-baltic/round.svg') !important;
         }
     }
 
     &--AM {
-        background-image: url('~src/assets/img/airlines-logo/aeromexico/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/aeromexico/large.svg') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/aeromexico/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/aeromexico/round.svg') !important;
         }
     }
 
     &--AR {
-        background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/aerolineas-argentinas/large.png') !important;
 
         &.round {
-            background-image: url('~src/assets/img/airlines-logo/aerolineas-argentinas/round.svg') !important;
+            background-image: url('../assets/img/airlines-logo/aerolineas-argentinas/round.svg') !important;
         }
     }
 
     &--KM {
-        background-image: url('~src/assets/img/airlines-logo/airmalta/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/airmalta/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -198,7 +198,7 @@ $width-base: 120px;
 
     &--AF {
         @include scale($width-base, 0.1222);
-        background-image: url('~src/assets/img/airlines-logo/airfrance/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/airfrance/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -207,7 +207,7 @@ $width-base: 120px;
 
     &--AZ {
         @include scale($width-base, 0.2444);
-        background-image: url('~src/assets/img/airlines-logo/alitalia/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/alitalia/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -215,7 +215,7 @@ $width-base: 120px;
     }
 
     &--PG {
-        background-image: url('~src/assets/img/airlines-logo/bangkok-airways/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/bangkok-airways/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -224,7 +224,7 @@ $width-base: 120px;
 
     &--SN {
         @include scale($width-base, 0.1667);
-        background-image: url('~src/assets/img/airlines-logo/brussels-airlines/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/brussels-airlines/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -233,7 +233,7 @@ $width-base: 120px;
 
     &--FB {
         @include scale($width-base, 0.296);
-        background-image: url('~src/assets/img/airlines-logo/bulgaria-air/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/bulgaria-air/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -242,7 +242,7 @@ $width-base: 120px;
 
     &--CI {
         @include scale($width-base, 0.1556);
-        background-image: url('~src/assets/img/airlines-logo/china-airlines/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/china-airlines/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -250,7 +250,7 @@ $width-base: 120px;
     }
 
     &--MU {
-        background-image: url('~src/assets/img/airlines-logo/china-eastern/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/china-eastern/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -258,7 +258,7 @@ $width-base: 120px;
     }
 
     &--CZ {
-        background-image: url('~src/assets/img/airlines-logo/china-southern/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/china-southern/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -266,7 +266,7 @@ $width-base: 120px;
     }
 
     &--GA {
-        background-image: url('~src/assets/img/airlines-logo/garuda-indonesia/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/garuda-indonesia/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -274,7 +274,7 @@ $width-base: 120px;
     }
 
     &--FI {
-        background-image: url('~src/assets/img/airlines-logo/icelandair/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/icelandair/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -282,7 +282,7 @@ $width-base: 120px;
     }
 
     &--KO {
-        background-image: url('~src/assets/img/airlines-logo/kenya-airways/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/kenya-airways/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -290,7 +290,7 @@ $width-base: 120px;
     }
 
     &--KE {
-        background-image: url('~src/assets/img/airlines-logo/korean-air/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/korean-air/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -298,7 +298,7 @@ $width-base: 120px;
     }
 
     &--JL {
-        background-image: url('~src/assets/img/airlines-logo/japan-airlines/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/japan-airlines/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -306,7 +306,7 @@ $width-base: 120px;
     }
 
     &--LO {
-        background-image: url('~src/assets/img/airlines-logo/polish-airlines/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/polish-airlines/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -314,7 +314,7 @@ $width-base: 120px;
     }
 
     &--ME {
-        background-image: url('~src/assets/img/airlines-logo/mea/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/mea/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -323,7 +323,7 @@ $width-base: 120px;
 
     &--S7 {
         @include scale($width-base, 0.3333);
-        background-image: url('~src/assets/img/airlines-logo/s7/large.svg') !important;
+        background-image: url('../assets/img/airlines-logo/s7/large.svg') !important;
 
         &.round {
             background-image: none !important;
@@ -331,7 +331,7 @@ $width-base: 120px;
     }
 
     &--SV {
-        background-image: url('~src/assets/img/airlines-logo/saudi-arabian-airlines/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/saudi-arabian-airlines/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -339,7 +339,7 @@ $width-base: 120px;
     }
 
     &--VN {
-        background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/vietnam-airlines/large.png') !important;
 
         &.round {
             background-image: none !important;
@@ -347,7 +347,7 @@ $width-base: 120px;
     }
 
     &--MF {
-        background-image: url('~src/assets/img/airlines-logo/vietnam-airlines/large.png') !important;
+        background-image: url('../assets/img/airlines-logo/vietnam-airlines/large.png') !important;
 
         &.round {
             background-image: none !important;
diff --git a/apps/react/src/styles/_prime-calendar.scss b/apps/react/src/styles/_prime-calendar.scss
index dbe9e6bda..33959c301 100644
--- a/apps/react/src/styles/_prime-calendar.scss
+++ b/apps/react/src/styles/_prime-calendar.scss
@@ -4,7 +4,7 @@ p-calendar {
 
         .p-datepicker-header {
             .p-datepicker-prev {
-                background-image: url('~src/assets/img/arrow-left.svg');
+                background-image: url('../assets/img/arrow-left.svg');
                 background-position: center center;
                 background-repeat: no-repeat;
 
@@ -29,7 +29,7 @@ p-calendar {
             }
 
             .p-datepicker-next {
-                background-image: url('~src/assets/img/arrow-right.svg');
+                background-image: url('../assets/img/arrow-right.svg');
                 background-position: center center;
                 background-repeat: no-repeat;
 
diff --git a/apps/react/src/styles/_shadows.scss b/apps/react/src/styles/_shadows.scss
index ecc30af38..ab8f33f1e 100644
--- a/apps/react/src/styles/_shadows.scss
+++ b/apps/react/src/styles/_shadows.scss
@@ -10,7 +10,7 @@
 }
 
 @mixin box-shadow--focus-inset {
-    box-shadow: inset 0 0 0 0.2em $focus-shadow !important;
+    box-shadow: inset 0 0 0 0.2em colors.$focus-shadow !important;
 }
 
 @mixin control-border-shadow {
diff --git a/apps/react/src/styles/components/flights-map/index.scss b/apps/react/src/styles/components/flights-map/index.scss
new file mode 100644
index 000000000..d070b347c
--- /dev/null
+++ b/apps/react/src/styles/components/flights-map/index.scss
@@ -0,0 +1,9 @@
+/* Flights Map Feature Components */
+
+@import './flights-map-body.component.scss';
+@import './flights-map-filter.component.scss';
+@import './flights-map-meta-tags.component.scss';
+@import './flights-map-start-page-title.component.scss';
+@import './flights-map-start-page.component.scss';
+@import './loader-sheet.component.scss';
+@import './no-directions-sheet.component.scss';
diff --git a/apps/react/src/styles/components/index.scss b/apps/react/src/styles/components/index.scss
new file mode 100644
index 000000000..843960776
--- /dev/null
+++ b/apps/react/src/styles/components/index.scss
@@ -0,0 +1,19 @@
+/* Component Styles - All components organized by feature area */
+
+/* Shared UI Components */
+@import './shared/index.scss';
+
+/* Feature-specific Components */
+@import './online-board/index.scss';
+@import './flights-map/index.scss';
+@import './schedule/index.scss';
+@import './popular-requests/index.scss';
+
+/* Toolkit Components - Reusable UI elements */
+@import './toolkit/index.scss';
+
+/* Module Components - Common components used across features */
+@import './modules-components/index.scss';
+
+/* Module Pages - Page-specific components */
+@import './modules-pages/index.scss';
diff --git a/apps/react/src/styles/components/modules-components/app-version.component.scss b/apps/react/src/styles/components/modules-components/app-version.component.scss
new file mode 100644
index 000000000..211d7929b
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/app-version.component.scss
@@ -0,0 +1,26 @@
+.app-version {
+  position: fixed;
+  right: 0;
+  top: 0;
+  padding: 2px 16px;
+  background-color: #f37b09;
+  color: #fff;
+  font-size: 12px;
+  z-index: 100000;
+  opacity: 0.6;
+  transition-duration: 0.2s;
+  display: flex;
+  cursor: pointer;
+}
+
+.app-version:hover {
+  opacity: 1;
+}
+
+.app-version > div {
+  display: none;
+}
+
+.app-version:hover > div {
+  display: inline-block;
+}
diff --git a/apps/react/src/styles/components/modules-components/buy-ticket-button.component.scss b/apps/react/src/styles/components/modules-components/buy-ticket-button.component.scss
new file mode 100644
index 000000000..53cfa26f1
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/buy-ticket-button.component.scss
@@ -0,0 +1,7 @@
+:host {
+    display: flex;
+
+    button {
+        flex: 1;
+    }
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/captioned-time-group.component.scss b/apps/react/src/styles/components/modules-components/captioned-time-group.component.scss
new file mode 100644
index 000000000..0923debf6
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/captioned-time-group.component.scss
@@ -0,0 +1,33 @@
+@use 'src/styles/colors' as *;
+@use 'src/styles/fonts' as *;
+@use 'src/styles/screen' as *;
+
+:host {
+  // prevents component from growing in height due to font-size inheritance
+  font-size: 0;
+}
+
+.captioned-time-group {
+  display: inline-flex;
+  flex-direction: column;
+
+  &__caption {
+    margin-bottom: 2px;
+  }
+}
+
+.captioned-time-group--right {
+  align-items: flex-end;
+}
+
+.captioned-time-group--mobile-right {
+  @include mobile {
+    align-items: flex-end;
+  }
+}
+
+.captioned-time-group--mobile-left {
+  @include gt-mobile {
+    align-items: flex-end;
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/day-change-square-legacy.component.scss b/apps/react/src/styles/components/modules-components/day-change-square-legacy.component.scss
new file mode 100644
index 000000000..0081953b8
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/day-change-square-legacy.component.scss
@@ -0,0 +1,12 @@
+@use './src/styles/framework' as *;
+
+.day-change-square-legacy {
+    border: 1px solid $blue-icon;
+    color: $blue-light;
+    border-radius: $border-radius;
+    font-size: 10px;
+    font-weight: $font-bold;
+    width: $label-shift-width;
+    background-color: $white;
+    text-align: center;
+}
diff --git a/apps/react/src/styles/components/modules-components/day-change-square.component.scss b/apps/react/src/styles/components/modules-components/day-change-square.component.scss
new file mode 100644
index 000000000..e9e6f2961
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/day-change-square.component.scss
@@ -0,0 +1,16 @@
+@use 'src/styles/colors' as *;
+@use 'src/styles/fonts' as *;
+
+.day-change-square {
+  box-sizing: border-box;
+  padding: 0 3px;
+
+  border: 1px solid $blue-icon;
+  border-radius: 2px;
+
+  font-size: $font-size-xs;
+  line-height: 11px;
+  text-align: center;
+  color: $blue-light;
+  font-weight: $font-bold;
+}
diff --git a/apps/react/src/styles/components/modules-components/details-header-badge.component.scss b/apps/react/src/styles/components/modules-components/details-header-badge.component.scss
new file mode 100644
index 000000000..f0a253005
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/details-header-badge.component.scss
@@ -0,0 +1,35 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    @include v-spacing($space-m);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .detail-header-badge-flight-number {
+        display: flex;
+        align-items: flex-start;
+        font-weight: $font-medium;
+        font-size: $font-size-xl;
+        @include h-spacing($space-m);
+
+        & > div {
+            @include v-spacing($space-s);
+
+            .description {
+                @include mobile() {
+                    white-space: normal !important;
+                }
+            }
+        }
+
+        @include mobile() {
+            flex: 1;
+            justify-content: space-between;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/details-header-badges.component.scss b/apps/react/src/styles/components/modules-components/details-header-badges.component.scss
new file mode 100644
index 000000000..fe9323dc8
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/details-header-badges.component.scss
@@ -0,0 +1,27 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    display: flex;
+
+    @include gt-mobile() {
+        & > *:not(:last-child) {
+            padding-right: $space-xl;
+            margin-right: $space-xl;
+            border-right: 1px solid $border;
+        }
+    }    
+
+    @include mobile() {
+        flex: 1;
+        flex-wrap: wrap;
+        @include v-spacing($space-m);
+
+        details-header-badge {
+            flex: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/duration.component.scss b/apps/react/src/styles/components/modules-components/duration.component.scss
new file mode 100644
index 000000000..ca15e5e9b
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/duration.component.scss
@@ -0,0 +1,9 @@
+@use './src/styles/framework' as *;
+
+.duration {
+    @include font-overflow;
+
+    &--clarifying {
+        color: $orange;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-actions.component.scss b/apps/react/src/styles/components/modules-components/flight-actions.component.scss
new file mode 100644
index 000000000..f381f3713
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-actions.component.scss
@@ -0,0 +1,58 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/screen' as *;
+
+@mixin main-buttons() {
+    buy-ticket-button,
+    registration-button,
+    flight-status-button,
+    flight-details-button {
+        @content();
+    }
+}
+
+@mixin small-buttons() {
+    print-button,
+    share-button {
+        @content();
+    }
+}
+:host {
+    display: flex;
+    justify-content: flex-end;
+
+    & > .k-space {
+        flex: 1;
+
+        @include mobile() {
+            display: none;
+        }
+    }
+
+    @include gt-mobile() {
+        @include h-spacing($space-m);
+
+        @include main-buttons() {
+            width: 150px;
+        }
+    }
+
+    @include mobile() {
+        flex-wrap: wrap;
+        justify-content: start;
+        @include v-spacing($space-l, true);
+
+        @include main-buttons() {
+            order: 1;
+            flex: 100%;
+        }
+
+        @include small-buttons() {
+            order: 2;
+        }
+
+        share-button {
+            margin-bottom: 0;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-brief.component.scss b/apps/react/src/styles/components/modules-components/flight-brief.component.scss
new file mode 100644
index 000000000..5a1b7a129
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-brief.component.scss
@@ -0,0 +1,24 @@
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/fonts' as *;
+
+:host {
+    display: block;
+
+    .leg-point-brief {
+        padding: $space-xl 0;
+        margin: 0 $space-xl;
+        display: flex;
+        justify-content: space-between;
+
+        time-group-legacy {
+            font-size: $font-size-xl2;
+            width: 90px;
+        }
+    }
+}
+
+.leg-point-brief + .leg-point-brief {
+    border-top: 1px dashed $border;
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-details-button.component.scss b/apps/react/src/styles/components/modules-components/flight-details-button.component.scss
new file mode 100644
index 000000000..53cfa26f1
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-details-button.component.scss
@@ -0,0 +1,7 @@
+:host {
+    display: flex;
+
+    button {
+        flex: 1;
+    }
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/flight-details-icon.component.scss b/apps/react/src/styles/components/modules-components/flight-details-icon.component.scss
new file mode 100644
index 000000000..3f196837d
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-details-icon.component.scss
@@ -0,0 +1,58 @@
+@use "src/styles/framework" as *;
+
+.flight-details-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: $space-xl;
+  width: 120px;
+
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  border-radius: $border-radius;
+  transition-duration: 0.2s;
+
+  &:hover {
+    background-color: $blue-extra-light;
+  }
+
+  @include mobile {
+    flex-direction: row;
+
+    padding: $space-m;
+    width: 110px;
+  }
+
+  &__image {
+    width: 32px;
+    height: 32px;
+    margin-bottom: $space-s2;
+
+    @include smTablet {
+      margin-bottom: 4px;
+    }
+
+    @include mobile {
+      margin-bottom: 0;
+      margin-right: $space-m;
+    }
+  }
+
+  &__description {
+    font-size: $font-size-s;
+    line-height: 16px;
+    font-weight: $font-medium;
+    color: $blue-light;
+
+    white-space: normal !important;
+    text-align: center;
+
+    @include mobile {
+      font-size: $font-size-xs;
+      line-height: 13px;
+      text-align: left;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-details-section.component.scss b/apps/react/src/styles/components/modules-components/flight-details-section.component.scss
new file mode 100644
index 000000000..3138d7fe9
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-details-section.component.scss
@@ -0,0 +1,35 @@
+@use './src/styles/framework' as *;
+
+.flight-details-section {
+  display: flex;
+  align-items: flex-start;
+
+  @include mobile {
+    flex-direction: column;
+  }
+
+  &__caption {
+    display: flex;
+    flex-shrink: 0;
+
+    margin-right: $space-xl;
+    width: 210px;
+
+    font-size: $font-size-s;
+    line-height: 16px;
+    color: $gray;
+
+    @include mobile {
+      margin-right: 0;
+      margin-bottom: $space-m;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    @include h-deep-spacing($space-xl);
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-events.component.scss b/apps/react/src/styles/components/modules-components/flight-events.component.scss
new file mode 100644
index 000000000..45de5e715
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-events.component.scss
@@ -0,0 +1,49 @@
+@use './src/styles/framework' as *;
+
+@mixin column-layout() {
+    flex-direction: column;
+    align-items: flex-start;
+
+    @include h-spacing(0);
+    @include v-spacing($space-s2);
+}
+
+.flight-events {
+    display: flex;
+    @include h-spacing($space-m);
+
+    &__event {
+        display: flex;
+        align-items: center;
+
+        height: 28px;
+        padding: 0 $space-m;
+
+        border-radius: $border-radius;
+        border: 1px solid $border;
+
+        @include h-spacing($space-m);
+    }
+
+    &__event-description {
+        font-size: $font-size-s;
+        line-height: 16px;
+        color: $gray;
+    }
+
+    &--column {
+        @include column-layout;
+    }
+
+    &--column-mobile {
+        @include mobile {
+            @include column-layout;
+        }
+    }
+
+    &--row-mobile {
+        @include gt-mobile {
+            @include column-layout;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-props.component.scss b/apps/react/src/styles/components/modules-components/flight-props.component.scss
new file mode 100644
index 000000000..877904e55
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-props.component.scss
@@ -0,0 +1,80 @@
+@use './src/styles/variables' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/layouts' as *;
+
+.flight-props {
+    display: flex;
+    color: $text-color;
+    font-weight: $font-medium;
+    position: relative;
+
+    &-caption {
+        display: flex;
+        flex-shrink: 0;
+
+        @include h-spacing($space-xl);
+
+        @include mobile() {
+            flex: 100%;
+            align-items: center;
+
+            height: 24px;
+        }
+    }
+
+    &-body {
+        flex: 1;
+        display: grid;
+
+        column-gap: $space-l;
+        row-gap: $space-l;
+
+        @include mobile() {
+            grid-template-columns: 3fr 2fr;
+
+            margin-top: $space-xl;
+
+            &:empty {
+                margin-top: 0;
+            }
+        }
+
+        @include tablets() {
+            grid-template-columns: repeat(4, var(--property-column-width, 1fr));
+        }
+
+        @include desktop() {
+            grid-template-columns: repeat(5, var(--property-column-width, 1fr));
+        }
+    }
+
+    @include gt-mobile() {
+        @include h-spacing($space-m);
+    }
+
+    @include mobile() {
+        flex-wrap: wrap;
+    }
+
+    time-note {
+        grid-column-start: 1;
+        grid-column-end: 3; // span for 2 columns
+    }
+
+    &.equal-columns {
+        .flight-props-body {
+            @include mobile() {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+    }
+
+    arrow-down-icon {
+        @include mobile {
+            position: absolute;
+            right: 20px;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-status-button.component.scss b/apps/react/src/styles/components/modules-components/flight-status-button.component.scss
new file mode 100644
index 000000000..e424d75bf
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-status-button.component.scss
@@ -0,0 +1,15 @@
+@use './src/styles/colors' as *;
+
+:host {
+    display: flex;
+
+    button {
+        &:not(.small) {
+            flex: 1;
+        }
+    }
+
+    .flight-status-button {
+        padding: 0 7px;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-status.component.scss b/apps/react/src/styles/components/modules-components/flight-status.component.scss
new file mode 100644
index 000000000..4905d1923
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-status.component.scss
@@ -0,0 +1,31 @@
+@use "src/styles/variables" as vars;
+@use "src/styles/colors";
+@use "src/styles/layouts";
+
+.flight-status {
+  &__content {
+    display: flex;
+    align-items: center;
+
+    @include layouts.h-spacing(vars.$space-s2);
+  }
+
+  &__indicator {
+    width: vars.$status-indicator-size;
+    height: vars.$status-indicator-size;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: colors.$light-gray;
+    border: 1px solid colors.$light-gray;
+
+    &--Finished {
+      background-color: colors.$red;
+      border-color: colors.$red;
+    }
+
+    &--InProgress {
+      background-color: colors.$green;
+      border-color: colors.$green;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-transition.component.layout.scss b/apps/react/src/styles/components/modules-components/flight-transition.component.layout.scss
new file mode 100644
index 000000000..b29b2a129
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-transition.component.layout.scss
@@ -0,0 +1,63 @@
+@use 'src/styles/screen';
+@use 'src/styles/variables' as vars;
+@use '/src/styles/grid-sizes' as gridSizes;
+
+@mixin intermediateScreens() {
+  @media (min-width: vars.$media-breakpoint-desktop-min) and (max-width: 1180px) {
+    @content;
+  }
+
+  @media (min-width: vars.$media-breakpoint-small-tablet-min) and (max-width: 880px) {
+    @content;
+  }
+}
+
+
+@mixin templateColumns($title: gridSizes.$title-column-width) {
+  grid-template-columns:
+                [title] $title
+                [status] gridSizes.$status-width
+                [beginning-time] gridSizes.$time-width
+                [finish-time] minmax(gridSizes.$time-width, 1fr)
+                [first-property] minmax(min-content, gridSizes.$time-group-width)
+                [second-property] minmax(min-content, 160px);
+}
+
+.transition {
+  display: grid;
+  grid-gap: gridSizes.$gap-medium;
+  @include templateColumns;
+
+  @include screen.tablets {
+    grid-gap: gridSizes.$gap-small;
+    @include templateColumns(gridSizes.$title-column-width-tablets);
+  }
+
+  &__first-property {
+    grid-area: 1 / 5 / 2 / 6; // fifth column of the first row
+
+    @include intermediateScreens {
+      grid-area: 2 / 2 / 3 / 3; // second column of the second row
+    }
+  }
+
+  &__second-property {
+    grid-area: 1 / 6 / 2 / 7; // sixth column of the first row
+
+    @include intermediateScreens {
+      grid-area: 2 / 3 / 3 / 4; // third column of the second row
+    }
+  }
+
+  &__third-property {
+    grid-area: 2 / 2 / 3 / 4; // second and third columns of the second row
+
+    @include intermediateScreens {
+      grid-area: 2 / 4 / 3 / 6; // fourth and fifth columns of the second row
+    }
+  }
+
+  &__bag-belt.transition__first-property {
+    grid-area: 1 / 5 / 2 / 7; // fifth and sixth columns of the first row
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/flight-transition.component.mobile-layout.scss b/apps/react/src/styles/components/modules-components/flight-transition.component.mobile-layout.scss
new file mode 100644
index 000000000..382284887
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/flight-transition.component.mobile-layout.scss
@@ -0,0 +1,41 @@
+@use "src/styles/screen";
+@use "src/styles/grid-sizes" as gridSizes;
+
+.transition {
+  @include screen.mobile {
+    grid-gap: gridSizes.$gap-small;
+    grid-template-columns: repeat(2, minmax(gridSizes.$time-width, 1fr));
+
+    &__title {
+      grid-area: 1 / 1 / 2 / 2; // first column of first row
+    }
+
+    &__status {
+      grid-area: 2 / 1 / 3 / 2; // first column of second row
+    }
+
+    &__beginning-time {
+      grid-area: 3 / 1 / 4 / 2; // first column of third row
+    }
+
+    &__finish-time {
+      grid-area: 3 / 2 / 4 / 3; // second column of third row
+    }
+
+    &__first-property {
+      grid-area: 4 / 1 / 5 / 2; // first column of fourth row
+    }
+
+    &__second-property {
+      grid-area: 4 / 2 / 5 / 3; // second column of fourth row
+    }
+
+    &__third-property {
+      grid-area: 5 / 1 / 6 / 3; // first and second columns of fifth row
+    }
+
+    &__bag-belt.transition__first-property {
+      grid-area: 4 / 1 / 5 / 3; // first and second columns of fourth row
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/index.scss b/apps/react/src/styles/components/modules-components/index.scss
new file mode 100644
index 000000000..fbe1093eb
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/index.scss
@@ -0,0 +1,50 @@
+/* Module Components - Common UI Components */
+
+@import './app-version.component.scss';
+@import './buy-ticket-button.component.scss';
+@import './captioned-time-group.component.scss';
+@import './day-change-square-legacy.component.scss';
+@import './day-change-square.component.scss';
+@import './details-header-badge.component.scss';
+@import './details-header-badges.component.scss';
+@import './duration.component.scss';
+@import './flight-actions.component.scss';
+@import './flight-brief.component.scss';
+@import './flight-details-button.component.scss';
+@import './flight-details-icon.component.scss';
+@import './flight-details-section.component.scss';
+@import './flight-events.component.scss';
+@import './flight-props.component.scss';
+@import './flight-status-button.component.scss';
+@import './flight-status.component.scss';
+@import './flight-transition.component.layout.scss';
+@import './flight-transition.component.mobile-layout.scss';
+@import './index.scss';
+@import './last-update.component.scss';
+@import './link-to-old-version.component.scss';
+@import './note.component.scss';
+@import './operator-logo-and-model.component.scss';
+@import './operator-logo.component.scss';
+@import './page-empty-list.component.scss';
+@import './page-title.component.scss';
+@import './partners-redirect-note.component.scss';
+@import './print-button.component.scss';
+@import './property.component.scss';
+@import './registration-button.component.scss';
+@import './section-number.component.scss';
+@import './share-button.component.scss';
+@import './spin-lock.component.scss';
+@import './station-change.component.scss';
+@import './station.component.scss';
+@import './terminal-link.component.scss';
+@import './time-group-legacy.component.scss';
+@import './time-group-positioning.component.scss';
+@import './time-group-sizes.component.scss';
+@import './time-group.component.scss';
+@import './timeline.component.scss';
+@import './transfer-inline-extended.component.scss';
+@import './transfer-inline.component.scss';
+@import './transfer-section.component.scss';
+@import './transfer-time.component.scss';
+@import './warning-ifly-carrier-detail.component.scss';
+@import './warning-ifly-carrier-small.component.scss';
diff --git a/apps/react/src/styles/components/modules-components/last-update.component.scss b/apps/react/src/styles/components/modules-components/last-update.component.scss
new file mode 100644
index 000000000..49811ef90
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/last-update.component.scss
@@ -0,0 +1,28 @@
+@use './src/styles/screen';
+
+:host {
+    display: flex;
+
+    align-items: center;
+
+    @include screen.gt-mobile() {
+        justify-content: flex-end;
+    }
+
+    @include screen.mobile() {
+        justify-content: space-between;
+    }
+
+    .last-update__description {
+        display: flex;
+        flex-wrap: wrap;
+
+        justify-content: flex-end;
+    }
+
+    share-button {
+        @include screen.gt-mobile() {
+            display: none;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/link-to-old-version.component.scss b/apps/react/src/styles/components/modules-components/link-to-old-version.component.scss
new file mode 100644
index 000000000..9c87e0907
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/link-to-old-version.component.scss
@@ -0,0 +1,15 @@
+:host {
+    a {
+        display: inline-flex;
+        text-align: center;        
+        border: none;
+        background-color: #e2740b;
+        padding: 3px 10px 4px 10px;
+        color: #fff;
+        border-radius: 3px;
+        font-size: 12px;
+        margin-bottom: 10px;
+        height: 25px;
+        line-height: 1.6;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/note.component.scss b/apps/react/src/styles/components/modules-components/note.component.scss
new file mode 100644
index 000000000..f6e186a0f
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/note.component.scss
@@ -0,0 +1,19 @@
+@use "src/styles/variables" as vars;
+@use "src/styles/screen";
+
+.note {
+  display: flex;
+  flex-wrap: nowrap;
+
+  ::ng-deep .text {
+    line-height: 17px !important;
+  }
+
+  &__symbol {
+    margin-right: vars.$space-s;
+  }
+
+  &__text {
+    white-space: pre-line;
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/operator-logo-and-model.component.scss b/apps/react/src/styles/components/modules-components/operator-logo-and-model.component.scss
new file mode 100644
index 000000000..823dea2e6
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/operator-logo-and-model.component.scss
@@ -0,0 +1,30 @@
+@use './src/styles/variables' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/screen' as *;
+
+operator-logo-and-model {
+    display: flex;
+    flex-direction: column;
+
+    @include gt-mobile() {
+        @include v-spacing($space-s);
+    }
+
+    .aircraft-name {
+        &--right {
+            align-self: flex-end;
+        }
+
+        &--mobile-right {
+            @include mobile {
+                align-self: flex-end;
+            }
+        }
+
+        &--mobile-left {
+            @include mobile {
+                align-self: flex-start;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/operator-logo.component.scss b/apps/react/src/styles/components/modules-components/operator-logo.component.scss
new file mode 100644
index 000000000..f603b9e32
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/operator-logo.component.scss
@@ -0,0 +1,19 @@
+@use './src/styles/variables' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/screen' as *;
+
+operator-logo {
+    display: block;
+    & > div.company-logo {
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: left top;
+    }
+    @include v-spacing($space-s);
+
+    @include mobile() {
+        & > div.description {
+            display: none;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/page-empty-list.component.scss b/apps/react/src/styles/components/modules-components/page-empty-list.component.scss
new file mode 100644
index 000000000..89d6755c1
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/page-empty-list.component.scss
@@ -0,0 +1,42 @@
+@use 'src/styles/framework' as *;
+
+.page-empty {
+  padding: 50px 40px 50px 124px;
+
+  background-color: $white;
+  background-image: url('../assets/img/icon-not-found.svg');
+  background-position: 40px center;
+  background-repeat: no-repeat;
+  background-size: 55px auto;
+
+  @include mobile {
+    padding: 124px 40px 50px 40px;
+
+    background-position: center 40px;
+  }
+
+  &__title {
+    margin-bottom: $space-s;
+
+    font-size: $font-size-xl;
+    font-weight: $font-bold;
+    color: $text-color;
+
+    @include mobile {
+      text-align: center;
+    }
+  }
+
+  &__text {
+    max-width: 80%;
+
+    font-size: $font-size-m;
+    line-height: 22px;
+    color: $gray;
+
+    @include mobile {
+      text-align: center;
+      max-width: initial;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/page-title.component.scss b/apps/react/src/styles/components/modules-components/page-title.component.scss
new file mode 100644
index 000000000..cc7c8b823
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/page-title.component.scss
@@ -0,0 +1,28 @@
+@use "src/styles/framework" as *;
+
+:host {
+  h1 {
+    @include font-overflow();
+  }
+
+  @include smTablet {
+    h1 {
+      font-size: $font-size-xxxl--tablet;
+      margin-bottom: $space-m + $space-s;
+
+      overflow: visible;
+      white-space: normal;
+    }
+  }
+
+  @include mobile {
+    h1 {
+      font-size: $font-size-xxxl--mobile;
+      margin-bottom: $space-m + $space-s;
+      margin-top: $space-m;
+
+      overflow: visible;
+      white-space: normal;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/partners-redirect-note.component.scss b/apps/react/src/styles/components/modules-components/partners-redirect-note.component.scss
new file mode 100644
index 000000000..ecfd1c85a
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/partners-redirect-note.component.scss
@@ -0,0 +1,29 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+
+
+:host {
+    section.empty-list {
+        padding: 124px 40px 50px 40px;
+        border-radius: 0;
+        background-image: url('../assets/img/icon-not-found.svg');
+        background-position: center 40px;
+        background-repeat: no-repeat;
+        background-size: 55px auto;
+        text-align: justify;
+
+        .text-header {
+            font-size: $font-size-xl;
+            color: $text-color;
+            font-weight: $font-bold;
+            margin-bottom: $space-s;
+        }
+
+        .text-info {
+            font-size: $font-size-m;
+            line-height: 22px;
+            color: $gray;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/print-button.component.scss b/apps/react/src/styles/components/modules-components/print-button.component.scss
new file mode 100644
index 000000000..0d7c2c3e2
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/print-button.component.scss
@@ -0,0 +1,5 @@
+:host {
+    a {
+        display: block;
+    }
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/property.component.scss b/apps/react/src/styles/components/modules-components/property.component.scss
new file mode 100644
index 000000000..03ec6f4c5
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/property.component.scss
@@ -0,0 +1,7 @@
+@use './src/styles/layouts' as *;
+
+:host {
+    display: block;
+
+    @include v-spacing(2px);
+}
diff --git a/apps/react/src/styles/components/modules-components/registration-button.component.scss b/apps/react/src/styles/components/modules-components/registration-button.component.scss
new file mode 100644
index 000000000..4cfc47f01
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/registration-button.component.scss
@@ -0,0 +1,11 @@
+:host {
+    display: flex;
+
+    button {
+        flex: 1;
+    }
+}
+
+:host ::ng-deep .app-registration-btn .p-button-label {
+  padding: 0.429em 0.8em;
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/section-number.component.scss b/apps/react/src/styles/components/modules-components/section-number.component.scss
new file mode 100644
index 000000000..d3f80ad1b
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/section-number.component.scss
@@ -0,0 +1,27 @@
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/variables' as *;
+
+.section-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+
+    border-radius: 3px;
+    border: 1px solid $blue-light2;
+
+    font-size: $font-size-m;
+    line-height: 19px;
+    color: $blue-dark;
+
+    &--small {
+        width: 20px;
+        height: 20px;
+
+        font-size: $font-size-s;
+        line-height: 16px;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/share-button.component.scss b/apps/react/src/styles/components/modules-components/share-button.component.scss
new file mode 100644
index 000000000..cbcf6ef2f
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/share-button.component.scss
@@ -0,0 +1,11 @@
+@use 'src/styles/framework' as *;
+
+// Double class to increase style specificity.
+// Otherwise will be overwritten by .transparent
+.share-button.share-button {
+  &:hover {
+    border: none;
+
+    background-color: $blue-icon !important;
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/spin-lock.component.scss b/apps/react/src/styles/components/modules-components/spin-lock.component.scss
new file mode 100644
index 000000000..65582e5a4
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/spin-lock.component.scss
@@ -0,0 +1,7 @@
+.spin-lock {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2000;
+    opacity: 50%;
+}
diff --git a/apps/react/src/styles/components/modules-components/station-change.component.scss b/apps/react/src/styles/components/modules-components/station-change.component.scss
new file mode 100644
index 000000000..6cfa6fac4
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/station-change.component.scss
@@ -0,0 +1,30 @@
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    overflow: hidden;
+
+    .city {
+        @include desktop() {
+            @include font-overflow;
+        }
+    }
+
+    @include v-spacing($space-s);
+
+    ._row {
+        display: flex;
+        @include h-spacing($space-m);
+        justify-content: center;
+        align-items: center;
+    }
+
+    .arrow {
+        color: $gray;
+        font-size: $font-size-xl;
+        font-weight: $font-medium;
+    }
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/station.component.scss b/apps/react/src/styles/components/modules-components/station.component.scss
new file mode 100644
index 000000000..268a0939f
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/station.component.scss
@@ -0,0 +1,55 @@
+@use 'src/styles/screen';
+
+:host {
+  font-size: 0;
+}
+
+.station {
+  display: flex;
+  flex-direction: column;
+
+  &__city {
+    max-width: 100%;
+  }
+
+  &__old-city {
+    text-decoration: line-through;
+  }
+
+  &__terminal {
+    // todo: remove after terminal-link deprecation
+    @include screen.smTablet {
+      max-height: initial;
+    }
+  }
+
+  &--right {
+    align-items: flex-end;
+
+    // todo: remove after terminal-link deprecation
+    .station__terminal {
+      text-align: right;
+    }
+  }
+
+  &--mobile-right {
+    @include screen.mobile {
+      align-items: flex-end;
+
+      // todo: remove after terminal-link deprecation
+      .station__terminal {
+        text-align: right;
+      }
+    }
+  }
+
+  &--mobile-left {
+    @include screen.gt-mobile {
+      align-items: flex-end;
+    }
+  }
+
+  &--center {
+    align-items: center;
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/terminal-link.component.scss b/apps/react/src/styles/components/modules-components/terminal-link.component.scss
new file mode 100644
index 000000000..40c2a4d87
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/terminal-link.component.scss
@@ -0,0 +1,41 @@
+@use './src/styles/framework' as *;
+
+terminal-link {
+    overflow: hidden;
+    display: inline-flex;
+    max-width: 100%;
+    max-height: 16px;
+
+    @include tablets {
+        display: block;
+    }
+
+    a,
+    span {
+        padding: 0;
+        display: inline-block;
+        max-width: 100%;
+
+        @include font-small();
+        @include desktop() {
+            @include font-overflow();
+        }
+        cursor: pointer;
+        color: $light-gray;
+        line-height: 16px;
+    }
+
+    a {
+        text-decoration: underline;
+
+        &:hover {
+            color: $blue-light !important;
+        }
+    }
+}
+
+.terminal-link--old,
+.terminal-link--old a{
+    color: $red !important;
+    text-decoration: line-through !important;
+}
diff --git a/apps/react/src/styles/components/modules-components/time-group-legacy.component.scss b/apps/react/src/styles/components/modules-components/time-group-legacy.component.scss
new file mode 100644
index 000000000..8cd066564
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/time-group-legacy.component.scss
@@ -0,0 +1,111 @@
+@use './src/styles/framework' as *;
+@use 'sass:math';
+
+time-group-legacy {
+    // self
+    @include v-spacing($space-s);
+
+    .time-group {
+        &__container {
+            display: flex;
+            gap: $space-s;
+        }
+
+        &__old-time {
+            @include font-small();
+            color: $orange;
+            text-decoration: line-through;
+        }
+
+        &__utc-offset {
+            @include font-small();
+            font-size: $font-size-xs;
+        }
+
+        &__date {
+            @include font-small();
+            color: $blue;
+        }
+    }
+
+    // variations
+
+    &.right-layout {
+        @include mobile {
+            align-items: flex-end;
+
+            day-change-square-legacy {
+                order: 1;
+            }
+
+            .time-group__main {
+                order: 2;
+            }
+
+            .time-group__utc-offset {
+                order: 3;
+            }
+        }
+    }
+
+    &.sparse {
+        .time-group__main {
+            @include v-spacing($space-s);
+        }
+    }
+    &.day-change-left {
+        .time-group__main {
+            order: 2;
+        }
+
+        day-change-square-legacy {
+            order: 1;
+        }
+    }
+
+    &.day-change-floating {
+        .time-group__container {
+            position: relative;
+            day-change-square-legacy {
+                position: absolute;
+                top: -$space-s;
+                right: -6 * $space-s;
+                background: $white;
+                z-index: 1;
+                padding: $space-s;
+            }
+        }
+
+        &.day-change-left {
+            .time-group__container {
+                day-change-square-legacy {
+                    left: -6 * $space-s;
+                    right: auto;
+                }
+            }
+        }
+    }
+
+    &.mini-list {
+        .time-group {
+            &__container {
+                margin-bottom: 0;
+            }
+
+            &__main {
+                margin-right: 0;
+            }
+
+            &__date {
+                font-size: $font-size-xs;
+                font-weight: $font-medium;
+                color: $gray;
+            }
+        }
+
+        day-change-square-legacy {
+            padding-top: math.div($space-s, 2);
+            padding-right: math.div($space-s, 2);
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/time-group-positioning.component.scss b/apps/react/src/styles/components/modules-components/time-group-positioning.component.scss
new file mode 100644
index 000000000..bebb4deee
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/time-group-positioning.component.scss
@@ -0,0 +1,86 @@
+@use 'src/styles/screen' as *;
+@use 'src/styles/variables' as *;
+
+
+@mixin right-to-left() {
+  .time-group__day-change {
+    order: 1;
+
+    margin-right: $space-s;
+    margin-left: 0;
+  }
+
+  .time-group__times {
+    order: 2;
+  }
+}
+
+@mixin right-layout {
+  @include right-to-left;
+
+  .time-group__times {
+    align-items: flex-end;
+  }
+}
+
+.time-group--right {
+  justify-content: flex-end;
+}
+
+.time-group--day-change-left {
+  @include right-to-left;
+}
+
+.time-group--day-change-mobile-left {
+  @include mobile {
+    @include right-to-left;
+  }
+}
+
+.time-group--day-change-mobile-right {
+  @include gt-mobile {
+    @include right-to-left;
+  }
+}
+
+.time-group--right {
+  @include right-layout;
+}
+
+.time-group--mobile-right {
+  @include mobile {
+    @include right-layout;
+  }
+}
+
+.time-group--mobile-left {
+  @include gt-mobile {
+    @include right-layout;
+  }
+}
+
+.time-group--day-change-absolute {
+  position: relative;
+
+  .time-group__day-change {
+    position: absolute;
+    top: 0;
+    left: 100%;
+  }
+}
+
+.time-group--mobile-right.time-group--day-change-absolute {
+  @include mobile {
+    .time-group__day-change {
+      left: auto;
+      right: 100%;
+    }
+  }
+}
+
+.time-group--right.time-group--day-change-absolute {
+  .time-group__day-change {
+    left: auto;
+    right: 100%;
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/time-group-sizes.component.scss b/apps/react/src/styles/components/modules-components/time-group-sizes.component.scss
new file mode 100644
index 000000000..6fe500a41
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/time-group-sizes.component.scss
@@ -0,0 +1,21 @@
+@use 'src/styles/fonts' as *;
+
+.time-group--medium {
+  .time-group__day-change {
+    margin-top: 3px;
+  }
+}
+
+.time-group--small,
+.time-group--extra-small {
+  .time-group__utc {
+    margin-top: 0;
+
+    font-size: $font-size-xs;
+    line-height: 13px;
+  }
+
+  .time-group__day-change {
+    margin-top: 1px;
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/time-group.component.scss b/apps/react/src/styles/components/modules-components/time-group.component.scss
new file mode 100644
index 000000000..1c31d275f
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/time-group.component.scss
@@ -0,0 +1,41 @@
+@use 'src/styles/fonts' as *;
+@use 'src/styles/colors' as *;
+@use 'src/styles/variables' as *;
+
+:host {
+  display: flex;
+}
+
+.time-group {
+  display: inline-flex;
+
+  &__times {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__actual {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__utc {
+    margin-top: 2px;
+    margin-left: $space-s;
+  }
+
+  &__day-change {
+    margin-top: $space-s;
+    margin-left: $space-s;
+  }
+
+  &__old-time {
+    text-decoration: line-through;
+  }
+
+  &__specifying {
+    display: flex;
+    align-items: center;
+  }
+}
diff --git a/apps/react/src/styles/components/modules-components/timeline.component.scss b/apps/react/src/styles/components/modules-components/timeline.component.scss
new file mode 100644
index 000000000..d75d5ee54
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/timeline.component.scss
@@ -0,0 +1,105 @@
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    display: flex;
+
+    .time-line-station {
+        flex: 1 1 auto;
+    }
+
+    station.time-line-station {
+        width: 100px;
+    }
+
+    .k-timeline-content {
+        flex: 1;
+        max-width: 100%;
+        padding: $space-xl;
+
+        @include v-spacing($space-xl);
+    }
+    .k-timeline {
+        display: flex;
+        justify-content: space-between;
+
+        @include h-spacing($space-s);
+
+        .time-line-station--change {
+            text-align: center;
+        }
+    }
+
+    .k-timeline-section {
+        flex: 1;
+        display: flex;
+        position: relative;
+
+        .k-timeline-duration {
+            position: absolute;
+            left: 50%;
+            top: 24px;
+            transform: translateX(-50%);
+        }
+    }
+
+    .k-separator {
+        flex: 1;
+        height: 1px;
+        margin-top: 11px;
+
+        background-color: $border;
+    }
+
+    section-number {
+        margin-top: 2px;
+    }
+
+    transfer-time {
+        margin-top: 5px;
+    }
+
+    .k-timeline-point {
+        display: flex;
+        font-size: $font-size-xl1;
+        background: $white;
+        @include h-spacing($space-s);
+        .k-separator {
+            min-width: $space-s;
+        }
+    }
+
+    .k-timeline-navigation {
+        //transform: rotate(90deg);
+        align-self: stretch;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        padding: 0 $space-xl;
+
+        &[role='previous'] {
+            margin-right: -$space-xl;
+            &:hover {
+                background-image: linear-gradient(to left, rgba(255, 0, 0, 0), rgba($blue-light, 0.2));
+            }
+            ::ng-deep svg {
+                transform: rotate(-90deg);
+            }
+        }
+        &[role='next'] {
+            margin-left: -$space-xl;
+            &:hover {
+                background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba($blue-light, 0.2));
+            }
+            ::ng-deep svg {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    .timeline-duration--specifying {
+        color: $orange;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/transfer-inline-extended.component.scss b/apps/react/src/styles/components/modules-components/transfer-inline-extended.component.scss
new file mode 100644
index 000000000..3d9230c70
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/transfer-inline-extended.component.scss
@@ -0,0 +1,94 @@
+@use 'src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    background-color: $white;
+    border-left: 1px dashed $border;
+    border-right: 1px dashed $border;
+    color: $text-color;
+    display: flex;
+    justify-content: center;
+    font-size: $font-size-s;
+    margin-bottom: -$space-s;
+    margin-top: -$space-s;
+    position: relative;
+
+    .transfer {
+        &-box {
+            align-items: center;
+            background: $white;
+            border-radius: 3px;
+            border: 1px solid $border;
+            display: flex;
+            @include h-spacing($space-s);
+            position: relative;
+            overflow-x: hidden;
+            z-index: 1;
+
+            @include mobile() {
+                width: 90%;
+            }
+        }
+
+        &-icon {
+            display: flex;
+            align-items: flex-start;
+            align-self: stretch;
+
+            padding: $space-m2 $space-m 0;
+
+            border-right: 1px solid $border;
+
+            svg {
+                fill: $orange;
+                height: 6.5px;
+                width: 20.5px;
+            }
+        }
+
+        &-caption {
+            font-weight: $font-medium;
+
+            @include mobile() {
+                width: 100%;
+            }
+        }
+
+        &-time {
+            align-items: center;
+            display: flex;
+            @include h-spacing($space-s);
+        }
+
+        &-content {
+            align-items: center;
+            display: flex;
+            flex: 1;
+            padding: $space-s;
+
+            @include gt-mobile() {
+                @include h-spacing($space-s);
+            }
+
+            @include mobile() {
+                @include v-spacing($space-s);
+                flex-wrap: wrap;
+                & > * {
+                    flex: 100%;
+                }
+            }
+        }
+    }
+
+    &:after {
+        border-top: 1px dotted $border;
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        z-index: 0;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/transfer-inline.component.scss b/apps/react/src/styles/components/modules-components/transfer-inline.component.scss
new file mode 100644
index 000000000..5678d4c45
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/transfer-inline.component.scss
@@ -0,0 +1,63 @@
+@use 'sass:math';
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    padding: 0 !important;
+    margin-right: 0 !important;
+
+    .flight-options-icon__icon {
+        align-items: flex-start;
+
+        padding-top: $space-m;
+        height: 100%;
+        border-right: 1px solid $border;
+    }
+
+    .transfer-info {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        padding: $space-s $space-m;
+
+        span {
+            @include font-small();
+            @include font-overflow();
+
+            &.embolded {
+                font-weight: $font-bold;
+            }
+        }
+
+        .multi-transfers {
+            display: flex;
+
+            @include h-spacing($space-s);
+        }
+
+        .dash {
+            @include mobile {
+                display: none;
+            }
+        }
+
+        @include h-spacing($space-s);
+
+        @include mobile() {
+            flex-direction: column;
+            align-items: flex-start;
+            overflow: hidden;
+            flex: 1;
+
+            @include v-spacing($space-s);
+        }
+    }
+
+    @include mobile() {
+        width: 100% !important;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/transfer-section.component.scss b/apps/react/src/styles/components/modules-components/transfer-section.component.scss
new file mode 100644
index 000000000..2c7237028
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/transfer-section.component.scss
@@ -0,0 +1,40 @@
+@use 'sass:math';
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    @include font-small();
+    @include h-spacing($space-s);
+
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    color: $text-color;
+
+    span {
+        @include font-overflow();
+
+        &.embolded {
+            font-weight: $font-medium;
+        }
+    }
+
+    @include mobile() {
+        flex-wrap: wrap;
+        @include v-spacing($space-s, true);
+
+        .transfer {
+            &-change {
+                flex: 100%;
+            }
+
+            &-city {
+                flex: 100%;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-components/transfer-time.component.scss b/apps/react/src/styles/components/modules-components/transfer-time.component.scss
new file mode 100644
index 000000000..91a782fce
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/transfer-time.component.scss
@@ -0,0 +1,3 @@
+transfer-time {
+    display: inline-flex;
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/warning-ifly-carrier-detail.component.scss b/apps/react/src/styles/components/modules-components/warning-ifly-carrier-detail.component.scss
new file mode 100644
index 000000000..27e395f85
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/warning-ifly-carrier-detail.component.scss
@@ -0,0 +1,23 @@
+.flights-warning-container {
+    display: flex;
+    align-items: center; /* Вертикальное выравнивание по центру */
+    padding: 10px 20px;
+    /* По горизонтали элементы располагаются слева направо (по умолчанию), поэтому justify-content не нужен */
+  }
+
+  .vertical-bar {
+    width: 0.3rem;           /* Толщина полосы */
+    height: 80px;         /* Высота полосы */
+    background-color: #e2740b;
+    // margin: 0 15px;       /* Отступы слева и справа по 15px */
+  }
+
+  .warning-text {
+    text-align: left;     /* Текст выравнивается по левому краю */
+    padding: 20px;
+  }
+
+  .warning-highlight {
+    font-weight: bold;    /* Жирное начертание */
+    color: #e2740b;        /* Оранжевый цвет */
+  }
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-components/warning-ifly-carrier-small.component.scss b/apps/react/src/styles/components/modules-components/warning-ifly-carrier-small.component.scss
new file mode 100644
index 000000000..e842581a5
--- /dev/null
+++ b/apps/react/src/styles/components/modules-components/warning-ifly-carrier-small.component.scss
@@ -0,0 +1,11 @@
+@use './src/styles/variables' as *;
+
+:host{
+    display: block;
+    padding: $space-l $space-xl;
+}
+
+.warning-highlight {
+    font-weight: bold;    /* Жирное начертание */
+    color: #e2740b;        /* Оранжевый цвет */
+  }
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-pages/board-details-header.component.scss b/apps/react/src/styles/components/modules-pages/board-details-header.component.scss
new file mode 100644
index 000000000..9cfeec7bf
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/board-details-header.component.scss
@@ -0,0 +1,62 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/screen' as *;
+:host {
+    display: grid;
+    grid-template: auto auto / auto auto;
+    padding: $space-l $space-xl;
+    align-items: start;
+    gap: $space-m;
+
+    @include mobile() {
+        grid-template: auto / auto;
+
+        ::ng-deep {
+            flight-actions share-button {
+                display: none;
+            }
+        }
+    }
+
+    last-update {
+        align-self: flex-end;
+    }
+
+    flight-actions {
+        flex-wrap: wrap;
+
+        margin-right: -$space-m;
+
+        ::ng-deep .flight-actions__action {
+            flex-shrink: 1;
+
+            margin-bottom: $space-m;
+        }
+        ::ng-deep .flight-actions__action:last-child {
+            margin-right: $space-m;
+
+            @include mobile {
+                margin-right: 0;
+            }
+        }
+    }
+
+    .block-route-update {
+        display: flex;
+        @include h-spacing($space-m);
+
+        last-update {
+            flex: 1;
+        }
+
+        @include gt-mobile() {
+        }
+
+        @include mobile() {
+            align-items: stretch;
+            flex-direction: column;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/board-flight-body.component.scss b/apps/react/src/styles/components/modules-pages/board-flight-body.component.scss
new file mode 100644
index 000000000..a59bc860e
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/board-flight-body.component.scss
@@ -0,0 +1,34 @@
+@use './src/styles/screen' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+
+:host {
+    --property-column-width: 100px;
+
+    ::ng-deep .flight-props-caption {
+        width: 200px;
+
+        @include tablets() {
+            width: 145px;
+        }
+    }
+
+    ::ng-deep .code-sharing__description {
+        width: 200px;
+
+        white-space: initial;
+        text-overflow: initial;
+        overflow: initial;
+
+        @include tablets() {
+            width: 145px;
+        }
+    }
+
+    code-sharing {
+        margin: 0 $space-xl;
+        padding: $space-m 0;
+
+        border-bottom: 1px dotted $border;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/board-flight-bottom.component.scss b/apps/react/src/styles/components/modules-pages/board-flight-bottom.component.scss
new file mode 100644
index 000000000..d958cb974
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/board-flight-bottom.component.scss
@@ -0,0 +1,6 @@
+@use './src/styles/variables' as *;
+:host {
+    display: block;
+
+    margin-top: $space-l;
+}
diff --git a/apps/react/src/styles/components/modules-pages/board-flight-header.component.mobile.scss b/apps/react/src/styles/components/modules-pages/board-flight-header.component.mobile.scss
new file mode 100644
index 000000000..8d7367ce0
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/board-flight-header.component.mobile.scss
@@ -0,0 +1,75 @@
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    @include mobile() {
+        .flight {
+            grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
+            gap: $space-l 0;
+            grid-template-areas:
+                'logo logo status status number number'
+                'depart-at depart-at depart-at arrive-at arrive-at arrive-at'
+                'depart-from depart-from depart-from arrive-to arrive-to arrive-to';
+
+            operator-logo {
+                grid-area: logo;
+            }
+
+            &-status {
+                grid-area: status;
+                .status {
+                    display: none;
+                }
+            }
+
+            .flight-number {
+                grid-area: number;
+                justify-self: end;
+                .status {
+                    display: block;
+                }
+
+                div {
+                    text-align: right;
+                }
+            }
+
+            time-group {
+                &:first-of-type {
+                    grid-area: depart-at;
+                }
+                &:last-of-type {
+                    grid-area: arrive-at;
+                    justify-self: end;
+                    text-align: right;
+                    margin-right: 0;
+                }
+            }
+
+            station {
+                &:first-of-type {
+                    grid-area: depart-from;
+                }
+                &:last-of-type {
+                    grid-area: arrive-to;
+                }
+            }
+
+            .arrow-icon {
+                display: none;
+            }
+        }
+
+        .icons-row {
+            flex-wrap: wrap;
+            @include v-spacing($space-m);
+
+            transfer-inline {
+                flex: 100%;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/board-flight-header.component.scss b/apps/react/src/styles/components/modules-pages/board-flight-header.component.scss
new file mode 100644
index 000000000..42d4d9c34
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/board-flight-header.component.scss
@@ -0,0 +1,54 @@
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    position: relative;
+
+    display: block;
+    padding: $space-xl;
+    @include v-spacing($space-xl);
+
+    &:hover {
+        .arrow-icon {
+            display: initial;
+        }
+    }
+
+    .arrow-icon {
+        position: absolute;
+        right: 20px;
+
+        display: none;
+    }
+
+    .arrow-icon--visible {
+        display: initial;
+    }
+
+    .flight {
+        display: grid;
+        grid-template: auto / [number] 80px [logo] 120px [departure-time] 100px [departure-station] minmax(45px, 145px) [status] minmax(85px, 145px) [arrival-time] 120px [arrival-station] minmax(45px, 145px) [arrow] 10px;
+        gap: 0 $space-l;
+
+        .flight-number {
+            font-size: $font-size-xl;
+            font-weight: $font-regular;
+
+            .status {
+                display: none;
+            }
+        }
+    }
+
+    .icons-row {
+        display: flex;
+        @include h-spacing($space-m);
+
+        flight-events:empty {
+            margin-right: 0;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/board-flight-header.component.tablets.scss b/apps/react/src/styles/components/modules-pages/board-flight-header.component.tablets.scss
new file mode 100644
index 000000000..31c766715
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/board-flight-header.component.tablets.scss
@@ -0,0 +1,21 @@
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    @include tablets {
+        padding: $space-l;
+
+        .arrow-icon {
+            right: 12px;
+        }
+
+        .flight {
+            display: grid;
+            grid-template: auto / [number] 70px [logo] 90px [departure-time] 90px [departure-station] 1fr [status] 85px [arrival-time] 90px [arrival-station] 1fr [arrow] 10px;
+            gap: 0 $space-m;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/board-multi-flight-body.component.scss b/apps/react/src/styles/components/modules-pages/board-multi-flight-body.component.scss
new file mode 100644
index 000000000..afc56b5a5
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/board-multi-flight-body.component.scss
@@ -0,0 +1,20 @@
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+
+:host {
+    ::ng-deep .code-sharing__description {
+        width: 200px;
+
+        white-space: initial;
+        text-overflow: initial;
+        overflow: initial;
+    }
+
+    ::ng-deep .flight-props-caption {
+        width: 200px;
+    }
+
+    .with-top-border {
+        border-top: 1px dotted $border;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/code-sharing.component.scss b/apps/react/src/styles/components/modules-pages/code-sharing.component.scss
new file mode 100644
index 000000000..bd3092ce0
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/code-sharing.component.scss
@@ -0,0 +1,33 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    display: flex;
+
+    .description {
+        font-weight: $font-medium;
+    }
+
+    .code-sharing-flight-number {
+        color: $gray;
+        font-size: $font-size-s;
+    }
+
+    @include gap($space-m);
+
+    @include mobile() {
+        flex-direction: column;
+    }
+
+    // variations
+    &.boxed {
+        padding: $space-m $space-xl;
+
+        border-radius: 3px;
+        background-color: $white;
+        border: 1px dashed $border;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/connecting-flight-body.component.scss b/apps/react/src/styles/components/modules-pages/connecting-flight-body.component.scss
new file mode 100644
index 000000000..4a1a8b613
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/connecting-flight-body.component.scss
@@ -0,0 +1,7 @@
+@use './src/styles/variables' as *;
+
+:host {
+    flight-details-body-actions {
+        margin-top: $space-m;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/error-page.component.scss b/apps/react/src/styles/components/modules-pages/error-page.component.scss
new file mode 100644
index 000000000..723aa24d3
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/error-page.component.scss
@@ -0,0 +1,149 @@
+@use './src/styles/screen' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    display: block;
+    padding-top: 1rem;
+
+    section {
+        width: 100%;
+        margin: auto;
+        display: flex;
+        @include v-spacing(2rem);
+        @include h-spacing(2rem);
+        padding: 2rem;
+
+        @include desktop() {
+            padding-top: 3rem;
+            max-width: 960px;
+            width: 75%;
+        }
+
+        .error-page {
+            &-girl {
+                flex: 30%;
+                background-image: url('../assets/img/lady404.png');
+                background-position: bottom;
+                background-repeat: no-repeat;
+                background-size: contain;
+                margin-bottom: -2rem;
+
+                @include mobile() {
+                    display: none;
+                }
+            }
+
+            &-code {
+                font-size: 8rem;
+                color: #a3a3a3;
+            }
+
+            &-title {
+                font-size: 3rem;
+                color: $text-color;
+            }
+
+            &-search {
+                width: 100%;
+
+                @include desktop() {
+                    width: 17rem;
+                }
+
+                margin-bottom: 1rem;
+
+                &-control {
+                    position: relative;
+
+                    &-icon {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        background: no-repeat;
+                        background-image: url('../assets/img/icon--search.svg');
+                        width: 2.25rem;
+                        height: 2.25rem;
+                        background-position: center;
+                        cursor: pointer;
+
+                        &:hover {
+                            background-image: url('../assets/img/icon--search-blue.svg');
+                        }
+                    }
+                }
+
+                input {
+                    font-size: 0.875rem;
+                    box-sizing: border-box;
+                    width: 100%;
+                    height: 2.25rem;
+                    padding: 0.25rem 0.5rem;
+                    border: 1px solid #dfdfdf;
+                    background: #fff;
+                    -webkit-appearance: none;
+                    -moz-appearance: none;
+                    appearance: none;
+                    transition: all 0.2s;
+                    outline: 0 solid transparent;
+                    border-radius: 0.1875rem;
+                    position: relative;
+                    top: 0;
+                    left: 0;
+
+                    &:focus {
+                        border: 1px solid #b7d3f3;
+                        box-shadow: 0 0.0625rem 0.1875rem #cad6e5;
+                    }
+                }
+            }
+
+            &-content {
+                flex: 70%;
+                @include v-spacing(1rem);
+
+                @include mobile() {
+                    flex: 100%;
+                }
+            }
+
+            &-actions {
+                display: flex;
+                padding: 2rem 0;
+                flex-wrap: wrap;
+
+                @include gt-mobile() {
+                    @include h-spacing(1rem);
+                }
+
+                @include mobile() {
+                    flex-wrap: wrap;
+                    @include v-spacing(1rem);
+                }
+
+                a {
+                    height: 35px;
+                    display: flex;
+                    align-items: center;
+
+                    ::ng-deep .p-button-label {
+                        font-size: 1rem;
+                    }
+
+
+
+                    @include mobile() {
+
+                        &[name='buy-ticket'] {
+                            justify-content: center;
+                            flex: 100%;
+                        }
+
+                        justify-content: space-between;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-board-details.component.mobile.scss b/apps/react/src/styles/components/modules-pages/flight-board-details.component.mobile.scss
new file mode 100644
index 000000000..51e378ce2
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-board-details.component.mobile.scss
@@ -0,0 +1,81 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    @include mobile() {
+        .multileg-flight-header {
+            position: relative;
+
+            display: flex;
+            flex-direction: column !important;
+
+            &__bottom,
+            &__top {
+                width: 100%;
+
+                @include h-spacing($space-m);
+            }
+
+            &__top {
+                margin-bottom: $space-s;
+            }
+
+            &__logo {
+                order: 2;
+
+                margin-right: 0;
+            }
+
+            &__events {
+                order: 1;
+                flex-grow: 0;
+
+                margin-right: $space-m;
+            }
+        }
+
+        .flight-route {
+            margin-bottom: $space-m;
+            font-size: $font-size-xl3;
+            grid-template: auto auto auto auto auto / 100px auto;
+            grid-template-areas:
+                'depart-at depart-from'
+                'scheduled-depart-at latest-depart-at'
+                'status status'
+                'arrive-at arrive-to'
+                'scheduled-arrive-at latest-arrive-at'
+                'note note';
+
+            time-group[role^='primary'] {
+                &:first-of-type {
+                    grid-area: depart-at;
+                }
+                &:last-of-type {
+                    grid-area: arrive-at;
+                }
+            }
+
+            captioned-time-group[role^='secondary'] {
+                &[role*='latest'] {
+                    justify-self: end;
+                }
+            }
+
+            route-status {
+                grid-area: status;
+            }
+
+            station {
+                &:first-of-type {
+                    grid-area: depart-from;
+                }
+                &:last-of-type {
+                    grid-area: arrive-to;
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-board-details.component.scss b/apps/react/src/styles/components/modules-pages/flight-board-details.component.scss
new file mode 100644
index 000000000..2b9ddcc8f
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-board-details.component.scss
@@ -0,0 +1,94 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    background: $white;
+
+    .multileg-flight-header {
+        display: flex;
+
+        &__bottom,
+        &__top {
+            display: flex;
+
+            @include h-spacing($space-xl);
+        }
+
+        arrow-down-icon {
+            position: absolute;
+            right: 20px;
+        }
+    }
+
+    .flight-route {
+        margin-bottom: $space-xl;
+        padding: $space-xl $space-xl 0 $space-xl;
+        font-size: $font-size-xxl;
+
+        display: grid;
+
+        grid-template: auto auto auto/
+            [depart-at] fit-content(120px)
+            [depart-to] fit-content(30%)
+            [status] minmax(150px, 1fr)
+            [arrive-at] fit-content(120px)
+            [arrive-to] fit-content(30%);
+        grid-template-areas:
+            '. . . . .'
+            'scheduled-depart-at latest-depart-at . scheduled-arrive-at latest-arrive-at'
+            'note note note note .';
+        gap: $space-xl $space-m;
+
+        time-group,
+        captioned-time-group {
+            font-size: initial;
+        }
+
+        note {
+            grid-area: note;
+        }
+
+        captioned-time-group[role^='secondary'] {
+            &[role*='scheduled departure'] {
+                grid-area: scheduled-depart-at;
+            }
+            &[role*='latest departure'] {
+                grid-area: latest-depart-at;
+            }
+            &[role*='scheduled arrival'] {
+                grid-area: scheduled-arrive-at;
+            }
+            &[role*='latest arrival'] {
+                grid-area: latest-arrive-at;
+            }
+        }
+
+        &__departure,
+        &__arrival {
+            max-width: 260px;
+        }
+    }
+
+    .details-accordion__header {
+        justify-content: space-between;
+        .block-route-update {
+            flex: 1;
+
+            .block-route {
+                margin-right: $space-m;
+            }
+        }
+    }
+
+    leg-time-pair {
+        font-size: $font-size-l;
+    }
+
+    flight-events {
+        flex: 1;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.mobile.scss b/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.mobile.scss
new file mode 100644
index 000000000..9c336f93c
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.mobile.scss
@@ -0,0 +1,58 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    @include mobile() {
+        code-sharing {
+            margin-left: 0;
+        }
+
+        .k-leg {
+            gap: $space-l 0;
+            grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
+            grid-template-areas:
+                'section-number logo logo logo flight-number flight-number'
+                'depart-at depart-at duration duration arrive-at arrive-at'
+                'depart-from depart-from depart-from arrive-to arrive-to arrive-to';
+
+            section-number {
+                grid-area: section-number;
+                align-self: center;
+            }
+
+            &-flight-number {
+                grid-area: flight-number;
+                justify-self: end;
+            }
+
+            &-duration {
+                grid-area: duration;
+            }
+
+            operator-logo-and-model {
+                grid-area: logo;
+            }
+
+            .departure-time-group {
+                grid-area: depart-at;
+            }
+
+            .arrival-time-group {
+                grid-area: arrive-at;
+                justify-self: end;
+                text-align: right;
+            }
+
+            .departure-station {
+                grid-area: depart-from;
+            }
+
+            .arrival-station {
+                grid-area: arrive-to;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.scss b/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.scss
new file mode 100644
index 000000000..8af6ba72c
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.scss
@@ -0,0 +1,32 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    display: block;
+    padding: $space-l $space-xl;
+    font-size: $font-size-xl;
+    font-weight: $font-regular;
+    @include v-spacing($space-l);
+
+    .k-leg {
+        display: grid;
+        grid-template: auto / [number] 30px [flight-number] 80px [logo] 120px [departure-time] 70px [departure-station] minmax(45px, 240px) [duration] 100px [arrival-time] 70px [arrival-station] minmax(45px, 240px);
+        gap: 0 $space-l;
+
+        &-duration {
+            align-self: center;
+            border-top: 1px solid $border;
+            flex: 1;
+            margin-top: $space-s;
+            padding-top: $space-s;
+            text-align: center;
+        }
+    }
+
+    code-sharing {
+        margin-left: 32px;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.tablets.scss b/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.tablets.scss
new file mode 100644
index 000000000..7086b511b
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-body-part-header.component.tablets.scss
@@ -0,0 +1,16 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    @include tablets() {
+        padding: $space-m $space-l;
+
+        .k-leg {
+            grid-template: auto / [number] 30px [flight-number] 70px [logo] 90px [departure-time] 65px [departure-station] minmax(45px, 240px) [duration] 70px [arrival-time] 65px [arrival-station] minmax(45px, 240px);
+            gap: 0 $space-m;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-airplane.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-airplane.component.scss
new file mode 100644
index 000000000..5f5e06aa4
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-airplane.component.scss
@@ -0,0 +1,18 @@
+@use './src/styles/screen' as *;
+:host {
+    @include mobile() {
+        property {
+            order: 0;
+
+            &[name='airplane-title'] {
+                order: 1;
+                flex: 100%;
+            }
+
+            &[name='airplane-previous'] {
+                order: 2;
+                flex: 100%;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-boarding.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-boarding.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-body-actions.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-body-actions.component.scss
new file mode 100644
index 000000000..e83c45b31
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-body-actions.component.scss
@@ -0,0 +1,8 @@
+@use './src/styles/variables' as *;
+
+:host {
+    flight-actions {
+        padding-top: $space-m;
+        flex: 100%;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-deboarding.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-deboarding.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-full-route.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-full-route.component.scss
new file mode 100644
index 000000000..ea3458bd4
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-full-route.component.scss
@@ -0,0 +1,12 @@
+@use 'src/styles/fonts';
+@use 'src/styles/screen';
+
+:host {
+    font-size: fonts.$font-size-xl2;
+
+    timeline {
+        @include screen.mobile {
+            display: none;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-meal.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-meal.component.scss
new file mode 100644
index 000000000..26c4dc04d
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-meal.component.scss
@@ -0,0 +1,28 @@
+@use './src/styles/_variables' as *;
+@use './src/styles/_layouts' as *;
+@use './src/styles/_fonts' as *;
+@use './src/styles/_colors' as *;
+@use './src/styles/_screen' as *;
+
+.flight-meal {
+    ::ng-deep .flight-details-section__content {
+        margin-left: -$space-m;
+    }
+
+    &__caption {
+        display: flex;
+        align-items: center;
+
+        @include h-spacing($space-xl);
+    }
+
+    &__caption-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        margin-right: $space-xl;
+        width: 48px;
+        height: 48px;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-registration.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-registration.component.scss
new file mode 100644
index 000000000..2bd9cf3bc
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-registration.component.scss
@@ -0,0 +1,7 @@
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/variables' as *;
+
+:host {
+  
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-boarding.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-boarding.component.scss
new file mode 100644
index 000000000..021574d38
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-boarding.component.scss
@@ -0,0 +1,15 @@
+@use 'src/styles/fonts';
+@use 'src/styles/screen';
+@use 'src/styles/colors';
+@use 'src/styles/variables' as vars;
+
+:host {
+    display: block;
+    padding: vars.$space-xl 0;
+    margin: 0 vars.$space-xl;
+    font-weight: fonts.$font-regular;
+
+    &:not(:first-child) {
+        border-top: 1px dotted colors.$border;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-disembarkation.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-disembarkation.component.scss
new file mode 100644
index 000000000..0f7b12ecb
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-disembarkation.component.scss
@@ -0,0 +1,16 @@
+@use './src/styles/variables' as vars;
+@use './src/styles/fonts' as *;
+@use './src/styles/colors' as *;
+
+:host {
+    font-weight: $font-regular;
+
+    &:not(:first-child) {
+        .deboarding {
+            padding: vars.$space-xl 0;
+            margin: 0 vars.$space-xl;
+
+            border-top: 1px dotted $border;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.mobile.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.mobile.scss
new file mode 100644
index 000000000..f1cdac65d
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.mobile.scss
@@ -0,0 +1,61 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    display: block;
+    padding: $space-l $space-xl;
+    font-size: $font-size-xl;
+    font-weight: $font-regular;
+    @include v-spacing($space-l);
+
+    .k-leg {
+        @include mobile() {
+            &-status {
+                text-align: right;
+            }
+
+            gap: $space-l 0;
+            grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
+            grid-template-areas:
+                'number logo logo logo status status'
+                'depart-at depart-at depart-at arrive-at arrive-at arrive-at'
+                'depart-from depart-from depart-from arrive-to arrive-to arrive-to';
+
+            section-number {
+                grid-area: number;
+                align-self: center;
+            }
+
+            operator-logo-and-model {
+                grid-area: logo;
+            }
+
+            &-status {
+                grid-area: status;
+            }
+
+            time-group-legacy {
+                &:first-of-type {
+                    grid-area: depart-at;
+                }
+                &:last-of-type {
+                    grid-area: arrive-at;
+                    justify-self: end;
+                    text-align: right;
+                }
+            }
+
+            station {
+                &:first-of-type {
+                    grid-area: depart-from;
+                }
+                &:last-of-type {
+                    grid-area: arrive-to;
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.scss
new file mode 100644
index 000000000..6ca8364bb
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.scss
@@ -0,0 +1,23 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    display: block;
+    padding: $space-l $space-xl;
+    font-size: $font-size-xl;
+    font-weight: $font-regular;
+    @include v-spacing($space-l);
+
+    .k-leg {
+        display: grid;
+        grid-template: auto / [number] 60px [logo] 120px [departure-time] 100px [departure-station] 1fr [status] minmax(85px, 145px) [arrival-time] 120px [arrival-station] 1fr;
+        gap: 0 $space-l;
+
+        &-status {
+            text-align: center;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.tablets.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.tablets.scss
new file mode 100644
index 000000000..596afbfce
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-part-header.component.tablets.scss
@@ -0,0 +1,18 @@
+@use './src/styles/layouts' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+
+    @include tablets() {
+        padding: $space-l;
+
+        .k-leg {
+            display: grid;
+            grid-template: auto / [number] 50px [logo] 90px [departure-time] 100px [departure-station] 1fr [status] 85px [arrival-time] 100px [arrival-station] 1fr;
+            gap: 0 $space-m;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-registrations.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-registrations.component.scss
new file mode 100644
index 000000000..ef30f5ec1
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-registrations.component.scss
@@ -0,0 +1,15 @@
+@use './src/styles/framework' as *;
+@use '/src/styles/grid-sizes' as gridSizes;
+
+:host {
+    .registration {
+        padding: $space-l 0;
+        margin: 0 $space-xl;
+    }
+
+    &:not(:first-child) {
+        .registration {
+            border-top: 1px dotted $border;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-time.component.mobile.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-time.component.mobile.scss
new file mode 100644
index 000000000..2fad06dd8
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-time.component.mobile.scss
@@ -0,0 +1,16 @@
+@use './src/styles/framework' as *;
+
+:host {
+    @include mobile() {
+        grid-template-rows: auto auto auto;
+        grid-template-columns: 3fr 2fr;
+        grid-template-areas: 
+            'description description'
+            'scheduled-departure scheduled-arrival'
+            'latest-departure latest-arrival';
+
+        & > .description {
+            grid-area: description;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-row-time.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-row-time.component.scss
new file mode 100644
index 000000000..2c2881f96
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-row-time.component.scss
@@ -0,0 +1,34 @@
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/colors' as *;
+:host {
+    display: grid;
+    gap: 15px;
+    grid-template-columns: [description] 195px [time] 100px [time] 1fr [space] minmax(0, 145px) [time] 120px [time] 1fr;
+    @include tablets() {
+        grid-template-columns: [description] 145px [time] 100px [time] 1fr [space] minmax(0, 80px) [time] 120px [time] 1fr;
+        gap: 10px;
+    }
+    grid-template-areas: 'description scheduled-departure latest-departure . scheduled-arrival latest-arrival';
+
+    padding: $space-l 0;
+    margin: 0 25px 0 $space-xl;
+
+    font-weight: $font-medium;
+
+    captioned-time-group {
+        &[role*='scheduled departure'] {
+            grid-area: scheduled-departure;
+        }
+        &[role*='scheduled arrival'] {
+            grid-area: scheduled-arrival;
+        }
+        &[role*='latest departure'] {
+            grid-area: latest-departure;
+        }
+        &[role*='latest arrival'] {
+            grid-area: latest-arrival;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-services.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-services.component.scss
new file mode 100644
index 000000000..fb0ba08e3
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-services.component.scss
@@ -0,0 +1,16 @@
+@use './src/styles/variables' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    ::ng-deep .flight-details-section__content {
+        margin-left: -$space-m;
+    }
+
+    .flight-details-services__caption {
+        display: flex;
+        align-items: center;
+
+        @include h-spacing($space-xl);
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-details-wrapper.component.scss b/apps/react/src/styles/components/modules-pages/flight-details-wrapper.component.scss
new file mode 100644
index 000000000..6a8eae56a
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-details-wrapper.component.scss
@@ -0,0 +1,26 @@
+@use './src/styles/fonts' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/screen' as *;
+
+:host {
+     //details-accordion__header is used in many places;
+     //Set !important can break layout in many places
+     //So just added .flight-details__header with !important
+    .details-accordion__header {
+        justify-content: space-between;
+    }
+
+    .flight-details__header {
+        align-items: center !important;
+        justify-content: space-between !important;
+
+        font-size: $font-size-m !important;
+        color: $light-gray !important;
+
+        @include mobile {
+            font-size: $font-size-s !important;
+        }
+    }
+
+    font-size: $font-size-l;
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-legs-switcher.component.scss b/apps/react/src/styles/components/modules-pages/flight-legs-switcher.component.scss
new file mode 100644
index 000000000..50483bd37
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-legs-switcher.component.scss
@@ -0,0 +1,5 @@
+:host {
+    & > div {
+        padding: 0 !important; // canceling complex styles
+    }
+}
\ No newline at end of file
diff --git a/apps/react/src/styles/components/modules-pages/flight-schedule-details.component.mobile.scss b/apps/react/src/styles/components/modules-pages/flight-schedule-details.component.mobile.scss
new file mode 100644
index 000000000..acbfa9cf1
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-schedule-details.component.mobile.scss
@@ -0,0 +1,48 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    @include mobile() {
+        ::ng-deep {
+            flight-actions {
+                flight-status-button {
+                    display: none;
+                }
+            }
+        }
+
+        .flight-route {
+            font-size: $font-size-xl3;
+            grid-template: auto auto auto / 100px auto;
+            grid-template-areas:
+                'depart-at depart-from'
+                'status status'
+                'arrive-at arrive-to';
+
+            time-group-legacy {
+                &:first-of-type {
+                    grid-area: depart-at;
+                }
+                &:last-of-type {
+                    grid-area: arrive-at;
+                }
+            }
+
+            .status-line {
+                grid-area: status;
+            }
+
+            station {
+                &:first-of-type {
+                    grid-area: depart-from;
+                }
+                &:last-of-type {
+                    grid-area: arrive-to;
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-schedule-details.component.scss b/apps/react/src/styles/components/modules-pages/flight-schedule-details.component.scss
new file mode 100644
index 000000000..7bc95a705
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-schedule-details.component.scss
@@ -0,0 +1,30 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    background: $white;
+
+    .flight-route {
+        padding: $space-xl;
+        font-size: $font-size-xxl;
+
+        display: grid;
+        grid-template: auto /
+            [depart-at] 100px
+            [depart-to] minmax(80px, 260px)
+            [status] minmax(150px, 1fr)
+            [arrive-at] 100px
+            [arrive-to] minmax(80px, 260px);
+
+        gap: $space-xl $space-m;
+
+        .status-line {
+            height: 1px;
+            align-self: center;
+            background-color: $border;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flight-schedule.component.scss b/apps/react/src/styles/components/modules-pages/flight-schedule.component.scss
new file mode 100644
index 000000000..fddc554eb
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flight-schedule.component.scss
@@ -0,0 +1,54 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    font-size: $font-size-l;
+    flight-props {
+        padding: $space-xl;
+    }
+
+    .schedule-title {
+        font-size: $font-size-m;
+        color: $light-gray;
+        font-weight: $font-medium;
+
+        @include mobile {
+            font-size: $font-size-s;
+        }
+    }
+
+    ::ng-deep property,
+    ::ng-deep time-group-legacy {
+        .description {
+            color: $light-gray;
+        }
+    }
+
+    .days {
+        grid-column: 1 / -1; // span all columns
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        @include h-spacing($space-m);
+        @include v-spacing($space-m);
+
+        .day {
+            @include font-small();
+            background-color: $day-color;
+            border-radius: $border-radius;
+            padding: $space-s $space-m;
+            &.inactive {
+                background-color: $day-color-inactive;
+                color: transparentize($color: $gray, $amount: 0.5);
+            }
+        }
+    }
+
+    note {
+        grid-column: 1 / -1; // span all columns
+        flex: 100%;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flights-details-list-flight.component.scss b/apps/react/src/styles/components/modules-pages/flights-details-list-flight.component.scss
new file mode 100644
index 000000000..a6e45d5de
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flights-details-list-flight.component.scss
@@ -0,0 +1,86 @@
+@use './src/styles/framework' as *;
+
+:host {
+    &.selected {
+        .flight-card {
+            border: 2px solid $blue-light;
+        }
+
+        .flight-card-wrapper {
+            border: none;
+        }
+    }
+
+    time-group-legacy {
+        font-size: $font-size-xl1;
+        font-weight: $font-medium;
+        color: $blue-dark;
+    }
+
+    .flight-card-wrapper {
+        padding: 0 $space-s2;
+        border-bottom: 1px solid $border;
+    }
+
+    &:last-of-type .flight-card-wrapper {
+        border: none;
+    }
+
+    .flight-card {
+        padding: $space-m2;
+
+        &__content {
+            display: grid;
+            column-gap: $space-s;
+            row-gap: $space-m;
+            grid-template: auto auto / 1fr $space-m $space-m 1fr;
+            grid-template-areas:
+                'depart-at status status arrive-at'
+                'depart-from depart-from arrive-to arrive-to';
+        }
+
+        time-group-legacy {
+            &:first-of-type {
+                grid-area: depart-at;
+            }
+
+            &:last-of-type {
+                grid-area: arrive-at;
+                justify-self: end;
+                text-align: right;
+            }
+        }
+
+        flight-status-icon {
+            grid-area: status;
+            justify-self: center;
+        }
+
+        station {
+            max-width: 100%;
+            &:first-of-type {
+                grid-area: depart-from;
+            }
+
+            &:last-of-type {
+                grid-area: arrive-to;
+                justify-self: end;
+                text-align: right;
+            }
+        }
+
+        &__flight-number {
+            margin-bottom: 2px;
+
+            font-size: $font-size-xs;
+            line-height: 13px;
+            color: $gray;
+        }
+
+        &__station {
+            font-size: $font-size-s;
+            font-weight: $font-bold;
+            color: $blue-dark;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/flights-details-list-schedule-header.component.scss b/apps/react/src/styles/components/modules-pages/flights-details-list-schedule-header.component.scss
new file mode 100644
index 000000000..8fbd1202b
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/flights-details-list-schedule-header.component.scss
@@ -0,0 +1,18 @@
+@use '../../../../../../styles/variables.scss' as *;
+@use '../../../../../../styles/colors.scss' as *;
+@use '../../../../../../styles/fonts.scss' as *;
+
+.flights-details-list-schedule-header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+
+    h3 {
+        margin-top: $text-margin-bottom;
+        color: $blue;
+        font-weight: $font-medium;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/index.scss b/apps/react/src/styles/components/modules-pages/index.scss
new file mode 100644
index 000000000..799dc520d
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/index.scss
@@ -0,0 +1,55 @@
+/* Module Pages - Page-specific Components */
+
+/* Board Page Components */
+@import './board-details-header.component.scss';
+@import './board-flight-body.component.scss';
+@import './board-flight-bottom.component.scss';
+@import './board-flight-header.component.mobile.scss';
+@import './board-flight-header.component.scss';
+@import './board-flight-header.component.tablets.scss';
+@import './board-multi-flight-body.component.scss';
+@import './code-sharing.component.scss';
+
+/* Flight Details Components */
+@import './board-details-header.component.scss';
+@import './flight-board-details.component.mobile.scss';
+@import './flight-board-details.component.scss';
+@import './flight-details-airplane.component.scss';
+@import './flight-details-boarding.component.scss';
+@import './flight-details-body-actions.component.scss';
+@import './flight-details-deboarding.component.scss';
+@import './flight-details-full-route.component.scss';
+@import './flight-details-meal.component.scss';
+@import './flight-details-registration.component.scss';
+@import './flight-details-row-boarding.component.scss';
+@import './flight-details-row-disembarkation.component.scss';
+@import './flight-details-row-part-header.component.mobile.scss';
+@import './flight-details-row-part-header.component.scss';
+@import './flight-details-row-part-header.component.tablets.scss';
+@import './flight-details-row-registrations.component.scss';
+@import './flight-details-row-time.component.mobile.scss';
+@import './flight-details-row-time.component.scss';
+@import './flight-details-services.component.scss';
+@import './flight-details-wrapper.component.scss';
+@import './flight-schedule-details.component.mobile.scss';
+@import './flight-schedule-details.component.scss';
+@import './flight-schedule.component.scss';
+
+/* Schedule Page Components */
+@import './connecting-flight-body.component.scss';
+@import './flight-body-part-header.component.mobile.scss';
+@import './flight-body-part-header.component.scss';
+@import './flight-body-part-header.component.tablets.scss';
+@import './flight-legs-switcher.component.scss';
+@import './schedule-details-header.component.scss';
+@import './schedule-list-flight-header.component.mobile.scss';
+@import './schedule-list-flight-header.component.scss';
+@import './schedule-list-flight-header.component.tablets.scss';
+
+/* Other Components */
+@import './error-page.component.scss';
+@import './flights-details-list-flight.component.scss';
+@import './flights-details-list-schedule-header.component.scss';
+@import './index.scss';
+@import './route-status.component.scss';
+@import './transfer.component.scss';
diff --git a/apps/react/src/styles/components/modules-pages/route-status.component.scss b/apps/react/src/styles/components/modules-pages/route-status.component.scss
new file mode 100644
index 000000000..e8f30f65b
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/route-status.component.scss
@@ -0,0 +1,47 @@
+@use './src/styles/colors' as *;
+
+:host {
+    background: $white;
+    display: flex;
+
+    .status--text-center {
+        display: flex;
+        padding-right: 32px;
+        margin-left: -100%;
+        overflow: visible;
+        justify-content: center;
+    }
+
+    .status--text-right {
+        margin-left: auto;
+        text-align: right;
+    }
+
+    .status--text-left {
+        margin-right: auto;
+        text-align: left;
+    }
+}
+
+.flight-route {
+    &__in-flight-status {
+        display: flex;
+        overflow: visible;
+        justify-content: flex-end;
+    }
+
+    &__in-flight-status-text {
+        position: relative;
+        right: calc(-50% + 16px);
+    }
+
+    &__in-flight-status-text-container {
+        display: flex;
+    }
+}
+
+.flight-route__in-flight-status--right {
+    .flight-route__in-flight-status-text {
+        right: 0;
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/schedule-details-header.component.scss b/apps/react/src/styles/components/modules-pages/schedule-details-header.component.scss
new file mode 100644
index 000000000..679e5291a
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/schedule-details-header.component.scss
@@ -0,0 +1,39 @@
+@use './src/styles/colors' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/layouts' as *;
+@use './src/styles/screen' as *;
+
+:host {
+    display: flex;
+    justify-content: space-between;
+    padding: $space-l $space-xl;
+
+    @include mobile() {
+        flex-direction: column;
+        @include v-spacing($space-l);
+    }
+
+    .schedule-details-header-right {
+        display: flex;
+        flex-direction: column;
+
+        @include gt-mobile() {
+            justify-content: space-between;
+            align-items: flex-end;
+            @include v-spacing($space-m);
+        }
+
+        @include mobile() {
+            @include v-spacing($space-m);
+
+            ::ng-deep {
+                flight-actions {
+                    share-button {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.mobile.scss b/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.mobile.scss
new file mode 100644
index 000000000..71b0df3ce
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.mobile.scss
@@ -0,0 +1,51 @@
+@use './src/styles/screen' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    @include mobile() {
+        .flight {
+            grid-template: auto auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
+            gap: $space-l 0;
+            grid-template-areas:
+                'number number . logo logo logo'
+                'depart-at depart-at time time arrive-at arrive-at'
+                'depart-from depart-from depart-from arrive-to arrive-to arrive-to';
+
+            &-number {
+                grid-area: number;
+            }
+
+            &-time {
+                grid-area: time;
+            }
+            .operator-logos {
+                grid-area: logo;
+                justify-self: end;
+            }
+
+            .arrow-icon {
+                display: none;
+            }
+        }
+
+        .schedule-flight-header {
+            &__departure-time {
+                grid-area: depart-at;
+            }
+
+            &__arrival-time {
+                grid-area: arrive-at;
+                justify-self: flex-end;
+            }
+
+            &__departure-station {
+                grid-area: depart-from;
+            }
+
+            &__arrival-station {
+                grid-area: arrive-to;
+            }
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.scss b/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.scss
new file mode 100644
index 000000000..7f9f53346
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.scss
@@ -0,0 +1,71 @@
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/variables' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    display: block;
+    padding: $space-xl;
+    @include v-spacing($space-xl);
+
+    &:hover {
+        .arrow-icon {
+            display: initial;
+        }
+    }
+
+    .arrow-icon {
+        position: absolute;
+        right: 20px;
+
+        display: none;
+    }
+
+    .arrow-icon--visible {
+        display: initial;
+    }
+
+    .flight {
+        display: grid;
+        grid-template: auto / [number] 80px [logo] 120px [departure-time] 100px [departure-station] minmax(45px, 240px) [duration] 100px [arrival-time] 100px [arrival-station] minmax(45px, 240px) [arrow] 10px;
+        gap: 0 $space-l;
+
+        &-number {
+            font-size: $font-size-xl;
+            font-weight: $font-regular;
+        }
+
+        .operator-logos {
+            @include h-spacing($space-m);
+            display: flex;
+
+            operator-logo-and-model {
+                max-width: 100%;
+            }
+        }
+
+        &-time {
+            @include font-small();
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .time {
+                background-position: center top;
+                background-repeat: no-repeat;
+                background-image: url('../assets/img/time-blue.svg');
+                white-space: nowrap;
+                display: flex;
+                align-items: flex-end;
+                height: $small-button-height;
+            }
+        }
+    }
+
+    .transfer-container {
+        display: flex;
+        @include desktop() {
+            margin-left: 80px + 120px + 2 * $space-xl;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.tablets.scss b/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.tablets.scss
new file mode 100644
index 000000000..f12ea363d
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/schedule-list-flight-header.component.tablets.scss
@@ -0,0 +1,17 @@
+@use './src/styles/variables' as *;
+@use './src/styles/colors' as *;
+@use './src/styles/fonts' as *;
+@use './src/styles/screen' as *;
+@use './src/styles/layouts' as *;
+
+:host {
+    @include tablets {
+        padding: $space-l;
+
+        .flight {
+            display: grid;
+            grid-template: auto / [number] 70px [logo] 90px [departure-time] 90px [departure-station] minmax(45px, 240px) [duration] 70px [arrival-time] 90px [arrival-station] minmax(45px, 240px) [arrow] 10px;
+            gap: 0 $space-m;
+        }
+    }
+}
diff --git a/apps/react/src/styles/components/modules-pages/transfer.component.scss b/apps/react/src/styles/components/modules-pages/transfer.component.scss
new file mode 100644
index 000000000..b47aa35f0
--- /dev/null
+++ b/apps/react/src/styles/components/modules-pages/transfer.component.scss
@@ -0,0 +1,81 @@
+@use 'src/styles/variables' as *;
+@use 'src/styles/colors' as *;
+@use 'src/styles/fonts' as *;
+@use 'src/styles/screen' as *;
+@use 'src/styles/layouts' as *;
+
+@mixin _layout($space: $space-m) {
+    display: flex;
+    align-items: center;
+    @include h-spacing($space);
+}
+
+:host {
+    @include _layout($space-l);
+    font-size: $font-size-s;
+    background-color: $blue-extra-light;
+    border: 1px solid $blue-light2;
+    padding: $space-m $space-l;
+    min-height: 50px;
+
+    .transfer {
+        &-icon {
+            svg {
+                fill: $orange;
+                width: 20.5px;
+                height: 6.5px;
+            }
+
+            @include mobile {
+                align-self: flex-start;
+            }
+        }
+
+        &-content {
+            @include _layout();
+            flex: 1;
+
+            @include mobile() {
+                @include v-spacing($space-s);
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+
+        &-type {
+            font-weight: $font-medium;
+        }
+
+        &-duration {
+            @include _layout();
+
+            flex: 1;
+        }
+
+        &-times {
+            flex-shrink: 0;
+
+            @include _layout();
+        }
+
+        &-time {
+            @include _layout();
+        }
+
+        &-section {
+            @include gt-mobile {
+                justify-content: flex-end;
+            }
+        }
+    }
+
+    .description {
+        color: $blue-dark;
+    }
+
+    // variations
+    &.separated {
+        margin: $space-m 0;
+        border-radius: 3px;
+    }
+}
diff --git a/apps/react/src/styles/components/online-board/index.scss b/apps/react/src/styles/components/online-board/index.scss
new file mode 100644
index 000000000..dde62e429
--- /dev/null
+++ b/apps/react/src/styles/components/online-board/index.scss
@@ -0,0 +1,4 @@
+/* Online Board Feature Components */
+
+@import './online-board-details.component.scss';
+@import './online-board-search.component.scss';
diff --git a/apps/react/src/styles/components/popular-requests/index.scss b/apps/react/src/styles/components/popular-requests/index.scss
new file mode 100644
index 000000000..e2f50f04f
--- /dev/null
+++ b/apps/react/src/styles/components/popular-requests/index.scss
@@ -0,0 +1,5 @@
+/* Popular Requests Feature Components */
+
+@import './popular-requests.component.scss';
+@import './popular-request.component.scss';
+@import './request-info.component.scss';
diff --git a/apps/react/src/styles/components/schedule/index.scss b/apps/react/src/styles/components/schedule/index.scss
new file mode 100644
index 000000000..4be2894ff
--- /dev/null
+++ b/apps/react/src/styles/components/schedule/index.scss
@@ -0,0 +1,8 @@
+/* Schedule Feature Components */
+
+@import './schedule-filter.component.scss';
+@import './schedule-flight-details-view.component.scss';
+@import './schedule-flights-mini-list.component.scss';
+@import './schedule-search-view.component.scss';
+@import './schedule-direction-switch.component.scss';
+@import './bottom-description.component.scss';
diff --git a/apps/react/src/styles/components/shared/index.scss b/apps/react/src/styles/components/shared/index.scss
new file mode 100644
index 000000000..6efa4c75c
--- /dev/null
+++ b/apps/react/src/styles/components/shared/index.scss
@@ -0,0 +1,11 @@
+/* Shared UI Components */
+
+@import './city-autocomplete.component.scss';
+@import './city-autocomplete-item.component.scss';
+@import './city-select.component.scss';
+@import './page-layout.component.scss';
+@import './feedback-button.component.scss';
+@import './feedback-form.component.scss';
+@import './scroll-up-button.component.scss';
+@import './search-history.component.scss';
+@import './search-history-item.component.scss';
diff --git a/apps/react/src/styles/components/shared/page-layout.component.scss b/apps/react/src/styles/components/shared/page-layout.component.scss
index 584b8ca2c..8a0f71713 100644
--- a/apps/react/src/styles/components/shared/page-layout.component.scss
+++ b/apps/react/src/styles/components/shared/page-layout.component.scss
@@ -149,7 +149,7 @@
     height: positioning.$sticky-threshold + 5px; // increase height to prevent content revealing when sticky element corners rounded
 
     background-color: $blue-dark !important;
-    background-image: url('~src/assets/img/background.jpg');
+    background-image: url('../assets/img/background.jpg');
     background-repeat: no-repeat;
     background-size: 100vw;
   }
diff --git a/apps/react/src/styles/components/shared/scroll-up-button.component.scss b/apps/react/src/styles/components/shared/scroll-up-button.component.scss
index 10b1e0350..0e2d6d9f3 100644
--- a/apps/react/src/styles/components/shared/scroll-up-button.component.scss
+++ b/apps/react/src/styles/components/shared/scroll-up-button.component.scss
@@ -20,7 +20,7 @@
     height: 40px;
 
     background-color: colors.$extra-blue;
-    background-image: url("~src/assets/img/arrow-up.svg");
+    background-image: url("../assets/img/arrow-up.svg");
     background-repeat: no-repeat;
     background-position: center center;
 
diff --git a/apps/react/src/styles/components/shared/search-history-item.component.scss b/apps/react/src/styles/components/shared/search-history-item.component.scss
new file mode 100644
index 000000000..83bcb48fb
--- /dev/null
+++ b/apps/react/src/styles/components/shared/search-history-item.component.scss
@@ -0,0 +1,29 @@
+@use 'src/styles/colors';
+
+.search-history-item {
+  display: flex !important;
+
+  &:hover .search-history-item__icon svg {
+    fill: colors.$blue;
+  }
+
+  &__icon {
+    display: flex !important;
+    align-items: center;
+    flex-grow: 0;
+  }
+
+  &__data {
+    display: flex !important;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .description-row {
+      flex-wrap: wrap;
+    }
+
+    .description {
+      white-space: normal;
+    }
+  }
+}
diff --git a/apps/react/src/styles/components/toolkit/date-select.component.scss b/apps/react/src/styles/components/toolkit/date-select.component.scss
index 799ca15ed..3f6375706 100644
--- a/apps/react/src/styles/components/toolkit/date-select.component.scss
+++ b/apps/react/src/styles/components/toolkit/date-select.component.scss
@@ -26,7 +26,7 @@
     }
 
     .p-dropdown-trigger {
-      background-image: url('~src/assets/img/arr-down.svg');
+      background-image: url('../assets/img/arr-down.svg');
       background-repeat: no-repeat;
       background-size: 9px 4px;
       background-position: center center;
diff --git a/apps/react/src/styles/components/toolkit/date-tabs.component.scss b/apps/react/src/styles/components/toolkit/date-tabs.component.scss
index 28b9751a1..0b9b0b1be 100644
--- a/apps/react/src/styles/components/toolkit/date-tabs.component.scss
+++ b/apps/react/src/styles/components/toolkit/date-tabs.component.scss
@@ -76,7 +76,7 @@
   }
 
   ::ng-deep .p-carousel-prev-icon.pi-chevron-left {
-    @include prevIcon(url("~src/assets/img/arrow-left.svg"));
+    @include prevIcon(url("../assets/img/arrow-left.svg"));
 
     &::after {
       right: -25px;
@@ -87,7 +87,7 @@
 
   ::ng-deep .p-carousel-next-icon.pi-chevron-right,
   ::ng-deep .p-carousel-prev-icon.pi-chevron-right {
-    @include prevIcon(url("~src/assets/img/arrow-right.svg"));
+    @include prevIcon(url("../assets/img/arrow-right.svg"));
 
     &::after {
       left: -25px;
diff --git a/apps/react/src/styles/components/toolkit/index.scss b/apps/react/src/styles/components/toolkit/index.scss
new file mode 100644
index 000000000..09160030d
--- /dev/null
+++ b/apps/react/src/styles/components/toolkit/index.scss
@@ -0,0 +1,35 @@
+/* Toolkit Components - Reusable UI Elements */
+
+/* Cards */
+@import './card.component.scss';
+
+/* Chat Bot */
+@import './chat-bot.component.scss';
+
+/* Date Components */
+@import './date-tabs.component.scss';
+@import './date-select.component.scss';
+@import './tab-button.component.scss';
+
+/* Icons */
+@import './additional-services-icon.component.scss';
+@import './alarm-clock-icon.component.scss';
+@import './arrow-down-icon.component.scss';
+@import './change-icon.component.scss';
+@import './dining-icon.component.scss';
+@import './flight-transfer-icon.component.scss';
+@import './intermediate-landing-icon.component.scss';
+@import './multi-landings-icon.component.scss';
+@import './plane-icon.component.scss';
+@import './return-icon.component.scss';
+
+/* Text & Typography */
+@import './text.component.scss';
+@import './title.component.scss';
+
+/* Form Controls */
+@import './time-selector.component.scss';
+@import './toggle-switch.component.scss';
+
+/* Tooltips */
+@import './tooltip.component.scss';
diff --git a/apps/react/src/styles/components/toolkit/time-selector.component.scss b/apps/react/src/styles/components/toolkit/time-selector.component.scss
index 2d469287c..49794d81e 100644
--- a/apps/react/src/styles/components/toolkit/time-selector.component.scss
+++ b/apps/react/src/styles/components/toolkit/time-selector.component.scss
@@ -130,22 +130,22 @@ time-selector {
 
         .p-carousel-next {
           // margin-left: -1px;
-          background-image: url('~src/assets/img/arrow-right.svg');
+          background-image: url('../assets/img/arrow-right.svg');
           border-radius: 0 $border-radius 0 0;
 
           &::before {
             left: -21px;
-            background-image: url('~src/assets/img/tabs-shadow-right.svg');
+            background-image: url('../assets/img/tabs-shadow-right.svg');
           }
         }
 
         .p-carousel-prev {
-          background-image: url('~src/assets/img/arrow-left.svg');
+          background-image: url('../assets/img/arrow-left.svg');
           border-radius: $border-radius 0 0 0;
 
           &::before {
             right: -21px;
-            background-image: url('~src/assets/img/tabs-shadow-left.svg');
+            background-image: url('../assets/img/tabs-shadow-left.svg');
           }
         }
       }
diff --git a/apps/react/src/styles/index.scss b/apps/react/src/styles/index.scss
index 2261123e7..e68d6c286 100644
--- a/apps/react/src/styles/index.scss
+++ b/apps/react/src/styles/index.scss
@@ -1,8 +1,10 @@
 /* Global styles for Aeroflot Flights React App */
-/* Imported from Angular migration */
+/* Migrated from Angular */
 
-// Import framework styles from Angular
+// Import framework variables, colors, fonts first
 @import './framework';
+
+// Import global utility and component styles
 @import './reset';
 @import './common';
 @import './mixins';
@@ -19,7 +21,3 @@
 @import './prime-styles';
 @import './prime-calendar';
 @import './leaflet-popup';
-
-// Page-specific styles
-@import './pages/board/index';
-@import './pages/schedule/index';
diff --git a/apps/react/src/styles/pages/board/components/city-autocomplite.scss b/apps/react/src/styles/pages/board/components/city-autocomplite.scss
index 17b898627..e38f83576 100644
--- a/apps/react/src/styles/pages/board/components/city-autocomplite.scss
+++ b/apps/react/src/styles/pages/board/components/city-autocomplite.scss
@@ -1,5 +1,5 @@
 .city-autocomplete__search-button.p-button {
-        background-image: url('~src/assets/img/arr-down.svg');
+        background-image: url('../assets/img/arr-down.svg');
         background-repeat: no-repeat;
         background-size: 9px 4px;
         background-position: center center;
diff --git a/apps/react/src/styles/pages/board/components/page-filters.scss b/apps/react/src/styles/pages/board/components/page-filters.scss
index aa299cfaf..d4e25220f 100644
--- a/apps/react/src/styles/pages/board/components/page-filters.scss
+++ b/apps/react/src/styles/pages/board/components/page-filters.scss
@@ -108,7 +108,7 @@
 
         &--calendar {
             padding-right: 32px;
-            background-image: url('~src/assets/img/calendar.svg');
+            background-image: url('../assets/img/calendar.svg');
             background-repeat: no-repeat;
             background-size: 16px 16px;
             background-position: right 8px center;
@@ -232,5 +232,5 @@ flights-map-filter {
     }
 }
 
-@import '~src/styles/pages/adaptive/_page-filters-adaptive.scss';
-@import '~src/styles/pages/adaptive/fligjts-map-filters-adaptive.scss';
\ No newline at end of file
+@import '../../../pages/adaptive/_page-filters-adaptive.scss';
+@import '../../../pages/adaptive/fligjts-map-filters-adaptive.scss';
\ No newline at end of file
diff --git a/apps/react/src/styles/pages/board/start.scss b/apps/react/src/styles/pages/board/start.scss
index ef844e489..03ec08a7b 100644
--- a/apps/react/src/styles/pages/board/start.scss
+++ b/apps/react/src/styles/pages/board/start.scss
@@ -34,19 +34,19 @@ schedule-start {
                 }
 
                 &.title1 {
-                    background-image: url('~src/assets/img/title-icon-1.svg');
+                    background-image: url('../assets/img/title-icon-1.svg');
                 }
 
                 &.title2 {
-                    background-image: url('~src/assets/img/title-icon-2.svg');
+                    background-image: url('../assets/img/title-icon-2.svg');
                 }
 
                 &.title3 {
-                    background-image: url('~src/assets/img/title-icon-3.svg');
+                    background-image: url('../assets/img/title-icon-3.svg');
                 }
 
                 &.title4 {
-                    background-image: url('~src/assets/img/title-icon-4.svg');
+                    background-image: url('../assets/img/title-icon-4.svg');
                 }
             }
         }
@@ -55,7 +55,7 @@ schedule-start {
     .not-found-location {
         background-repeat: no-repeat;
         background-position: left center;
-        background-image: url('~src/assets/img/not-found-location.svg');
+        background-image: url('../assets/img/not-found-location.svg');
         padding-left: 40px;
         @include font-small();
         color: transparentize($color: $white, $amount: 0.3);
@@ -103,27 +103,27 @@ schedule-start {
     .titles-container {
         .title {
             &.title1 {
-                background-image: url('~src/assets/img/schedule-title-icon-1.svg') !important;
+                background-image: url('../assets/img/schedule-title-icon-1.svg') !important;
             }
 
             &.title2 {
-                background-image: url('~src/assets/img/schedule-title-icon-2.svg') !important;
+                background-image: url('../assets/img/schedule-title-icon-2.svg') !important;
             }
 
             &.title3 {
-                background-image: url('~src/assets/img/schedule-title-icon-3.svg') !important;
+                background-image: url('../assets/img/schedule-title-icon-3.svg') !important;
             }
 
             &.title4 {
-                background-image: url('~src/assets/img/schedule-title-icon-4.svg') !important;
+                background-image: url('../assets/img/schedule-title-icon-4.svg') !important;
             }
 
             &.title5 {
-                background-image: url('~src/assets/img/schedule-title-icon-5.svg') !important;
+                background-image: url('../assets/img/schedule-title-icon-5.svg') !important;
             }
 
             &.title6 {
-                background-image: url('~src/assets/img/schedule-title-icon-6.svg') !important;
+                background-image: url('../assets/img/schedule-title-icon-6.svg') !important;
             }
         }
     }
diff --git a/e2e/cypress/integration/base.spec.ts b/e2e/cypress/integration/base.spec.ts
new file mode 100644
index 000000000..0c81a7331
--- /dev/null
+++ b/e2e/cypress/integration/base.spec.ts
@@ -0,0 +1,40 @@
+/**
+ * Base test template for all feature tests
+ * Copy this file and modify for each feature area
+ */
+
+import { uiHelpers } from '../support/helpers/ui-helpers'
+import { apiHelpers } from '../support/helpers/api-helpers'
+import { dataHelpers } from '../support/helpers/data-helpers'
+
+describe('Feature: [Feature Name]', () => {
+  beforeEach(() => {
+    // Navigate to app
+    cy.visit('http://localhost:3001')
+
+    // Mock API responses
+    apiHelpers.mockFlightSearch()
+
+    // Get test data
+    const dates = dataHelpers.getTestDates()
+  })
+
+  afterEach(() => {
+    // Clear localStorage (handled by support/index.ts)
+  })
+
+  describe('Scenario: User interaction', () => {
+    it('should perform action and verify result', () => {
+      // Arrange
+      // Setup is in beforeEach
+
+      // Act
+      uiHelpers.fillInput('test-input', 'test-value')
+      uiHelpers.clickAndWait('submit-button', 'flightSearch')
+
+      // Assert
+      uiHelpers.isVisible('results')
+      uiHelpers.hasText('results', 'expected-text')
+    })
+  })
+})
diff --git a/e2e/cypress/integration/components/button.cy.ts b/e2e/cypress/integration/components/button.cy.ts
new file mode 100644
index 000000000..b39689e84
--- /dev/null
+++ b/e2e/cypress/integration/components/button.cy.ts
@@ -0,0 +1,27 @@
+describe('Button Component', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3001')
+  })
+
+  it('should render button with text', () => {
+    cy.get('[data-testid="button"]').should('exist')
+  })
+
+  it('should have correct styling', () => {
+    cy.get('[data-testid="button"]')
+      .should('have.css', 'padding')
+      .should('have.css', 'border-radius')
+  })
+
+  it('should support variant classes', () => {
+    cy.get('[data-testid="button"]').should('have.class', 'button')
+  })
+
+  it('should support size classes', () => {
+    cy.get('[data-testid="button"]').should('have.class', 'button--medium')
+  })
+
+  it('should handle disabled state', () => {
+    cy.get('[data-testid="button"]').should('not.be.disabled')
+  })
+})
diff --git a/e2e/cypress/support/helpers/api-helpers.ts b/e2e/cypress/support/helpers/api-helpers.ts
new file mode 100644
index 000000000..49d684e46
--- /dev/null
+++ b/e2e/cypress/support/helpers/api-helpers.ts
@@ -0,0 +1,54 @@
+/**
+ * API helper functions for e2e tests
+ */
+
+export const apiHelpers = {
+  /**
+   * Get auth token (mock for now, will be real API later)
+   */
+  getAuthToken: () => {
+    return cy.window().then(win => win.localStorage.getItem('auth_token'))
+  },
+
+  /**
+   * Set auth token in localStorage
+   */
+  setAuthToken: (token: string) => {
+    cy.window().then(win => {
+      win.localStorage.setItem('auth_token', token)
+    })
+  },
+
+  /**
+   * Make API call via cy.request
+   */
+  apiCall: (method: string, endpoint: string, body?: any) => {
+    return cy.request({
+      method,
+      url: `http://localhost:3000/api${endpoint}`,
+      body,
+      failOnStatusCode: false,
+    })
+  },
+
+  /**
+   * Mock flight search response
+   */
+  mockFlightSearch: () => {
+    cy.intercept('GET', '**/api/flights/**', {
+      statusCode: 200,
+      body: {
+        flights: [
+          {
+            id: '1',
+            number: 'SU123',
+            departureTime: '10:00',
+            arrivalTime: '12:00',
+            from: 'SVO',
+            to: 'LED',
+          },
+        ],
+      },
+    }).as('flightSearch')
+  },
+}
diff --git a/e2e/cypress/support/helpers/data-helpers.ts b/e2e/cypress/support/helpers/data-helpers.ts
new file mode 100644
index 000000000..5adcae551
--- /dev/null
+++ b/e2e/cypress/support/helpers/data-helpers.ts
@@ -0,0 +1,47 @@
+/**
+ * Test data helpers
+ */
+
+export const dataHelpers = {
+  /**
+   * Generate random flight number
+   */
+  generateFlightNumber: () => {
+    return `SU${Math.floor(Math.random() * 9000 + 1000)}`
+  },
+
+  /**
+   * Generate test dates (today, tomorrow, in 7 days)
+   */
+  getTestDates: () => {
+    const today = new Date()
+    const tomorrow = new Date(today)
+    tomorrow.setDate(tomorrow.getDate() + 1)
+    const weekLater = new Date(today)
+    weekLater.setDate(weekLater.getDate() + 7)
+
+    return {
+      today: today.toISOString().split('T')[0],
+      tomorrow: tomorrow.toISOString().split('T')[0],
+      weekLater: weekLater.toISOString().split('T')[0],
+    }
+  },
+
+  /**
+   * Get major Russian cities for testing
+   */
+  getMajorCities: () => [
+    { code: 'SVO', name: 'Moscow (Sheremetyevo)' },
+    { code: 'LED', name: 'St. Petersburg' },
+    { code: 'AER', name: 'Sochi' },
+    { code: 'VVO', name: 'Vladivostok' },
+    { code: 'SVX', name: 'Ekaterinburg' },
+  ],
+
+  /**
+   * Store test data in cy.wrap for later use
+   */
+  storeData: (key: string, value: any) => {
+    cy.wrap({ [key]: value }).as(key)
+  },
+}
diff --git a/e2e/cypress/support/helpers/ui-helpers.ts b/e2e/cypress/support/helpers/ui-helpers.ts
new file mode 100644
index 000000000..27352eb60
--- /dev/null
+++ b/e2e/cypress/support/helpers/ui-helpers.ts
@@ -0,0 +1,58 @@
+/**
+ * UI interaction helper functions
+ */
+
+export const uiHelpers = {
+  /**
+   * Fill input field and verify value
+   */
+  fillInput: (testId: string, value: string) => {
+    cy.getByTestId(testId).clear().type(value).should('have.value', value)
+  },
+
+  /**
+   * Select dropdown option
+   */
+  selectDropdown: (testId: string, optionText: string) => {
+    cy.getByTestId(testId).click()
+    cy.contains(optionText).click()
+  },
+
+  /**
+   * Click button and wait for response
+   */
+  clickAndWait: (testId: string, waitAlias?: string) => {
+    cy.getByTestId(testId).click()
+    if (waitAlias) {
+      cy.wait(`@${waitAlias}`)
+    }
+  },
+
+  /**
+   * Verify element is visible
+   */
+  isVisible: (testId: string) => {
+    return cy.getByTestId(testId).should('be.visible')
+  },
+
+  /**
+   * Verify element has text
+   */
+  hasText: (testId: string, text: string) => {
+    return cy.getByTestId(testId).should('contain', text)
+  },
+
+  /**
+   * Scroll to element
+   */
+  scrollTo: (testId: string) => {
+    cy.getByTestId(testId).scrollIntoView()
+  },
+
+  /**
+   * Check element exists
+   */
+  exists: (testId: string) => {
+    return cy.getByTestId(testId).should('exist')
+  },
+}
diff --git a/e2e/cypress/support/index.ts b/e2e/cypress/support/index.ts
index efdc791c3..403441023 100644
--- a/e2e/cypress/support/index.ts
+++ b/e2e/cypress/support/index.ts
@@ -1,4 +1,18 @@
 import './commands'
+import { apiHelpers } from './helpers/api-helpers'
+import { uiHelpers } from './helpers/ui-helpers'
+import { dataHelpers } from './helpers/data-helpers'
+
+// Make helpers available globally
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      apiHelpers: typeof apiHelpers
+      uiHelpers: typeof uiHelpers
+      dataHelpers: typeof dataHelpers
+    }
+  }
+}
 
 afterEach(() => {
   // Clean up after each test