diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
new file mode 100644
index 00000000..dd737878
--- /dev/null
+++ b/src/styles/_buttons.scss
@@ -0,0 +1,217 @@
+button {
+    min-height: 35px;
+}
+button,
+a {
+    cursor: pointer;
+    transition-duration: 0.2s;
+
+    .p-button-label {
+        @include font-small();
+        font-weight: $font-medium;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    &.color {
+        border: none !important;
+
+        .p-button-label {
+            color: $white;
+        }
+
+        &.blue {
+            background-color: $blue;
+
+            &:hover {
+                background-color: $blue--hover;
+            }
+        }
+
+        &.white {
+            background-color: $white;
+            border: 1.3px solid $border !important;
+
+            &:hover {
+                background-color: $blue-extra-light;
+            }
+
+            .p-button-label {
+                color: $gray;
+            }
+        }
+
+        &.download-button {
+            border: 1.3px solid $border-blue !important;
+            height: $medium-button-height;
+            border-radius: $border-radius 0 0 $border-radius;
+            width: 100%;
+            transition-duration: 0.2s;
+
+            .p-button-label {
+                font-weight: $font-medium;
+                font-size: 14px;
+                text-align: left;
+            }
+        }
+
+        &.download-button-options {
+            border: 1.3px solid $border-blue !important;
+            height: $medium-button-height;
+            border-radius: 0 $border-radius $border-radius 0;
+            background-image: url('/assets/img/arr-down.svg');
+            background-position: center center;
+            background-repeat: no-repeat;
+            margin-left: -1px;
+            width: $medium-button-height;
+        }
+
+        &.orange {
+            background-color: $orange;
+
+            &:hover {
+                background-color: $orange--hover;
+            }
+        }
+
+        &.blue-light {
+            background-color: $blue-light;
+
+            &:hover {
+                background-color: $blue-light--hover;
+            }
+
+            &.text-only {
+                border-color: none;
+                background-color: $white;
+
+                .p-button-label {
+                    color: $blue-light;
+                }
+
+                &:hover {
+                    background-color: $blue-extra-light;
+                    border-color: $blue-light--hover;
+
+                    .p-button-label {
+                        color: $blue-light--hover;
+                    }
+                }
+            }
+        }
+
+        &.blue-glow {
+            background: white;
+
+            .p-button-label {
+                padding: 0px;
+                font-size: $font-size-m;
+                color: $blue-light;
+            }
+
+            padding: 0px;
+            margin: 0px;
+
+            &:hover {
+                padding: $space-s;
+                margin: -$space-s;
+                background: $blue-icon;
+            }
+        }
+
+        &.blue-home {
+            background: transparent;
+            border: 1.3px solid $blue-light !important;
+
+            .p-button-label {
+                color: $blue-light;
+            }
+
+            padding: 0px;
+            margin: 0px;
+
+            &:hover {
+                border: 1.3px solid $blue !important;
+
+                .p-button-label {
+                    color: $blue;
+                }
+            }
+        }
+    }
+
+    &.square {
+        .p-button-label {
+            visibility: hidden;
+            display: none;
+        }
+
+        .p-button-icon-left {
+            display: inline-block;
+            top: 0;
+            left: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        &.small {
+            width: $small-button-height;
+            height: $small-button-height;
+        }
+
+        &.medium {
+            width: $medium-button-height;
+            height: $medium-button-height;
+        }
+
+        &.standart {
+            width: $standard-button-height;
+            height: $standard-button-height;
+        }
+
+        &.big {
+            width: $big-button-height;
+            height: $big-button-height;
+        }
+    }
+
+    &.transparent {
+        background-color: transparent;
+        border: 1px solid transparent;
+
+        &:hover {
+            background-color: transparent !important;
+            border-color: $border !important;
+        }
+    }
+
+    &.close {
+        .p-button-label {
+            display: none;
+        }
+    }
+
+    &.icon-left {
+        padding-left: 30px;
+        background-position: 1em center;
+        background-repeat: no-repeat;
+
+        @include font-overflow();
+    }
+
+    &.button--spinner {
+        display: flex;
+        align-items: center;
+
+        .pi {
+            display: none;
+            color: $gray;
+            margin-left: $space-m + $space-s;
+
+            &.show-spinner {
+                display: inline-block;
+            }
+        }
+    }
+}
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
new file mode 100644
index 00000000..a4394182
--- /dev/null
+++ b/src/styles/_colors.scss
@@ -0,0 +1,38 @@
+$white: #ffffff;
+
+$text-color: #333333;
+
+$extra-blue: #065398;
+$blue-dark: #022040;
+
+$blue: #1b62b4;
+$blue-light: #4a90e2;
+$blue-light2: #d1dcea;
+$blue-link: #0074D9;
+$blue-extra-light: #f3f9ff;
+$dark-blue-opacity: rgba(32, 32, 32, 0.2);
+$blue-icon: #e3f0fd;
+
+$blue--hover: #1a5ba6;
+$blue-light--hover: #4286d5;
+$orange--hover: #e2740b;
+
+$focus-shadow: #8dcdff;
+
+$gray: #333333;
+$light-gray: #657282;
+
+$orange: #f37b09;
+$orange-light: #fbf0e5;
+$green: #25a24e;
+$red: #c8102e;
+
+$border: #d1dcea;
+$border-input: #dcdcdc;
+$border-blue: #bdccde;
+
+$day-color: #e6f1fb;
+$day-color-inactive: #f6f6f6;
+
+$breadcrumb-item-active-color: hsla(0, 0%, 100%, 0.75);
+$breadcrumb-item-separator: hsla(0, 0%, 100%, 0.3);
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
new file mode 100644
index 00000000..c783e707
--- /dev/null
+++ b/src/styles/_common.scss
@@ -0,0 +1,47 @@
+@use 'sass:math';
+
+.expanded-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+
+    width: math.div($space-xl, 3);
+    background-color: $blue-light;
+
+    @media (max-width: $media-breakpoint-mobile) {
+        width: math.div($space-xl, 6);
+    }
+}
+
+.flight-list-item {
+    cursor: pointer;
+    border-top: 1px solid $border;
+
+    &:hover {
+        background-color: $blue-extra-light;
+    }
+
+    &.selected {
+        background: $blue-extra-light;
+        position: relative;
+    }
+}
+
+.hide-button-label {
+    .p-button-label {
+        display: none;
+    }
+}
+
+.hidden {
+    display: none;
+}
+
+.banner--top {
+    z-index: 1001;
+}
+
+.wrapper-header {
+    z-index: 1002;
+}
diff --git a/src/styles/_font-faces.scss b/src/styles/_font-faces.scss
new file mode 100644
index 00000000..cc71faa5
--- /dev/null
+++ b/src/styles/_font-faces.scss
@@ -0,0 +1,2 @@
+// Google Fonts CDN for Roboto (replaces self-hosted woff2 files from Angular app)
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
diff --git a/src/styles/_fonts.classes.scss b/src/styles/_fonts.classes.scss
new file mode 100644
index 00000000..dc184d3b
--- /dev/null
+++ b/src/styles/_fonts.classes.scss
@@ -0,0 +1,37 @@
+h1 {
+    font-family: $font-family;
+    font-size: $font-size-xxxl;
+    font-weight: $font-regular;
+}
+
+h2 {
+    font-family: $font-family;
+    font-size: $font-size-xxl;
+    font-weight: $font-regular;
+}
+
+h3 {
+    font-family: $font-family;
+    font-size: $font-size-xl;
+    font-weight: $font-bold;
+}
+
+h4 {
+    font-family: $font-family;
+    font-size: $font-size-l;
+    font-weight: $font-regular;
+}
+
+h5 {
+    font-family: $font-family;
+    font-size: $font-size-m;
+    font-weight: $font-regular;
+}
+
+.text--white {
+    color: $white;
+}
+
+.embolded {
+    font-weight: 500;
+}
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
new file mode 100644
index 00000000..efadfa7a
--- /dev/null
+++ b/src/styles/_fonts.scss
@@ -0,0 +1,45 @@
+@use './colors' as colors;
+/* Font size */
+$font-size-xs: 10px;
+$font-size-s: 12px;
+$font-size-m: 14px;
+$font-size-l: 16px;
+$font-size-xl: 18px;
+$font-size-xl1: 20px;
+$font-size-xl2: 22px;
+$font-size-xl3: 26px;
+$font-size-xxl: 30px;
+$font-size-xxxl: 42px;
+$font-size-xxxl--tablet: 36px;
+$font-size-xxxl--mobile: 22px;
+
+$font-family: 'Roboto', Arial, Helvetica, sans-serif;
+
+$font-light: 300;
+$font-regular: 400;
+$font-medium: 500;
+$font-bold: 700;
+
+@mixin font-small($color-font-small: colors.$gray) {
+    font-size: $font-size-s;
+    font-family: $font-family;
+    font-weight: $font-regular;
+    color: $color-font-small;
+    line-height: normal;
+}
+
+@mixin font-overflow {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@mixin link {
+    color: $blue-light;
+    text-decoration: none;
+    border-bottom: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
diff --git a/src/styles/_icons.scss b/src/styles/_icons.scss
new file mode 100644
index 00000000..253b3a50
--- /dev/null
+++ b/src/styles/_icons.scss
@@ -0,0 +1,94 @@
+.p-accordion-header.p-highlight {
+    .arrow-down-icon svg {
+        transform: rotate(0deg) !important;
+    }
+}
+
+.svg--plane {
+    width: 19px;
+    height: 19px;
+    fill: $blue;
+}
+
+.svg--change-city {
+    width: 25px;
+    height: 12px;
+    fill: $blue;
+
+    transform: rotate(90deg);
+}
+
+.svg--details__body {
+    width: 47.488px;
+    min-width: 47.488px;
+    height: 46.928px;
+}
+
+.flight-icon {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+}
+
+.svg--share {
+    background-image: url('/assets/img/share.svg');
+}
+
+.svg--print {
+    background-image: url('/assets/img/print.svg');
+}
+
+.svg--pin {
+    background-image: url('/assets/img/pin-24.svg');
+}
+
+.svg--expand {
+    background-image: url('/assets/img/expand.svg');
+}
+
+svg {
+    &.green {
+        fill: $green;
+    }
+
+    &.red {
+        fill: $red;
+    }
+
+    &.orange {
+        fill: $orange;
+    }
+
+    &.blue {
+        fill: $blue;
+    }
+}
+
+.svg--calendar {
+    background-image: url('/assets/img/calendar.svg');
+}
+
+.svg--arrow {
+    width: 6.667px;
+    height: 3.333px;
+}
+
+.svg--close {
+    width: 14px;
+    height: 14px;
+}
+
+svg.flight-transfer {
+    width: 19.5px !important;
+    height: 6.5px !important;
+}
+
+svg.icon-return {
+    width: 13px;
+    height: 8px;
+}
+
+svg.icon-change {
+    width: 22px;
+    height: 12px;
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
new file mode 100644
index 00000000..84730102
--- /dev/null
+++ b/src/styles/_layout.scss
@@ -0,0 +1,470 @@
+@use 'sass:math';
+
+@mixin custom-input {
+    @include flex-center-align();
+    @include control-border-shadow();
+    height: $standard-button-height;
+    padding: 0 $space-l;
+    font-size: $font-size-l;
+    font-weight: $font-regular;
+    color: $text-color;
+    transition-duration: 0.2s;
+    @include font-overflow();
+
+    &:enabled:hover:not(.p-state-error) {
+        border-color: $blue-light;
+    }
+
+    &:enabled:focus:not(.p-state-error) {
+        box-shadow: 0 0 0 0.2em $focus-shadow;
+        border-color: $blue-light;
+    }
+}
+
+html {
+    overflow: auto;
+}
+
+body,
+html {
+    height: 100%;
+}
+
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    background-color: $blue-dark !important;
+    background-image: url('/assets/img/background.jpg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    font-size: $font-size-m;
+    font-family: $font-family;
+    font-weight: $font-regular;
+    color: $text-color;
+    line-height: normal;
+
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+
+    display: flex;
+    flex-direction: column;
+
+    span.pi {
+        display: none !important;
+    }
+
+    overflow: auto;
+}
+
+.header {
+    flex: 0 0 auto;
+}
+
+// React equivalent of Angular's `flights-root` element selector
+#root {
+    display: block;
+    flex: 1 0 auto;
+    padding: 0 24px;
+}
+
+.footer {
+    flex: 0 0 auto;
+
+    .main-module__footer {
+        margin-top: $space-xxxl;
+    }
+}
+
+.page-title {
+    width: auto;
+    display: inline-block;
+    max-width: 100%;
+    white-space: normal !important;
+}
+
+section.frame {
+    background-color: $white;
+    @include box-shadow-small;
+    border-radius: $border-radius;
+    padding: 0;
+}
+
+.sr-text-hide {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.description {
+    @include font-small();
+    @include font-overflow();
+}
+
+@mixin flex-center-align {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+
+.scroll--panel--custom {
+    width: 100%;
+    min-height: 100px;
+    height: 400px;
+
+    .p-scrollpanel {
+        padding: 3px 0;
+    }
+
+    .p-scrollpanel-bar {
+        background-color: $blue-light;
+        transition: background-color 0.3s, opacity 0.3s;
+        width: 5px;
+        margin-left: -3px;
+    }
+
+    .p-scrollpanel-bar:hover,
+    .p-scrollpanel-grabbed {
+        background-color: $blue;
+    }
+
+    .p-scrollpanel-bar-x {
+        display: none;
+    }
+
+    .p-scrollpanel-content {
+        padding-right: 0px;
+        padding-bottom: 0px;
+        overflow: scroll !important;
+    }
+}
+
+.you-search-panel {
+    height: auto !important;
+    min-height: 20px;
+}
+
+@mixin scrollBarY {
+    opacity: 1;
+    background-color: $blue-light;
+    width: 4px;
+    margin-left: -5px;
+    border-radius: 5px;
+
+    &:hover {
+        background-color: $blue;
+    }
+}
+
+.content--scroll-panel {
+    .p-scrollpanel {
+        padding: $space-s 0;
+
+        .p-scrollpanel-wrapper {
+            padding: $space-xl - $space-s 0;
+
+            .row {
+                display: flex;
+                padding: 0 0 0 $space-xl;
+
+                &.country-start-row {
+                    margin-top: $space-xl;
+
+                    &:first-child {
+                        margin-top: 0;
+                    }
+
+                    .contry {
+                        position: sticky;
+                    }
+                }
+            }
+        }
+
+        .p-scrollpanel-bar-y {
+            @include scrollBarY();
+        }
+    }
+}
+
+.p-tooltip {
+    z-index: 100001 !important;
+}
+
+// Checkbox styles (adapted from PrimeNG p-checkbox element selector)
+.p-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+
+    .p-checkbox div.p-checkbox-box {
+        @include control-border-shadow();
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-image: url('/assets/img/check.svg');
+        background-size: 0 auto;
+
+        &.p-highlight {
+            border-color: $blue-light;
+            background-color: $blue-extra-light;
+            background-size: 13.65px auto;
+
+            &:hover {
+                background-color: $blue-extra-light !important;
+            }
+        }
+    }
+
+    .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
+        background-color: $blue-extra-light;
+        border-color: $blue-light;
+    }
+
+    &:hover {
+        .p-checkbox-box:not(.p-disabled):hover {
+            border-color: $blue-light;
+        }
+    }
+}
+
+body {
+    .p-overlaypanel {
+        border: 1px solid $border-blue;
+        box-shadow: 0 2px 2px #b1b1b125;
+        border-radius: 3px;
+
+        &:before {
+            border-bottom-color: $border-blue;
+        }
+
+        .p-overlaypanel-content {
+            padding: 20px;
+
+            .share-elements {
+                display: flex;
+                align-items: flex-start;
+
+                > div + div {
+                    margin-left: $space-m;
+                }
+
+                .share-element {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: flex-end;
+                    align-items: center;
+                    text-align: center;
+                    @include font-small();
+                    font-size: 10px;
+                    width: 60px;
+                    height: 55px;
+                    margin-right: 15px;
+                    background-position: center top;
+                    background-repeat: no-repeat;
+                    cursor: pointer;
+                    transition-duration: 0.2s;
+
+                    &:hover {
+                        color: $blue-light;
+                    }
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+
+                    &.facebook {
+                        background-image: url('/assets/img/share/facebook.svg');
+                    }
+
+                    &.vk {
+                        background-image: url('/assets/img/share/vk.svg');
+                    }
+
+                    &.twitter {
+                        background-image: url('/assets/img/share/twitter.svg');
+                    }
+
+                    &.copy {
+                        background-image: url('/assets/img/share/copy.svg');
+                    }
+
+                    &.weibo {
+                        background-image: url('/assets/img/share/weibo.svg');
+                        background-size: 29px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Accordion button-clear (adapted from PrimeNG p-accordion element selector)
+.p-accordion .p-accordion-content button.button-clear {
+    display: none;
+    position: absolute;
+    right: $buttons-width;
+    top: 0px;
+    bottom: 0px;
+    width: $buttons-width !important;
+    border: none;
+    border-radius: 0;
+    background: rgb(255, 255, 255);
+    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
+
+    .p-button-label {
+        background-image: url('/assets/img/close.svg');
+        background-repeat: no-repeat;
+        background-size: 10px 10px;
+        height: 100%;
+        background-position: center center;
+        transition-duration: 0.2s;
+        position: relative;
+
+        &:before {
+            display: none;
+            position: absolute;
+            content: '';
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 1px;
+            background-color: $border-input;
+        }
+    }
+
+    &-opened {
+        .p-button-label {
+            transform: rotate(180deg);
+        }
+    }
+
+    &:hover {
+        background-color: $white !important;
+
+        .p-button-label {
+            &:before {
+                display: block;
+            }
+        }
+    }
+}
+
+.app-show-debug {
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    border: none;
+    background-color: #e2740b;
+    padding: 3px 10px 4px 10px;
+    margin-bottom: 5px;
+    color: #fff;
+    border-radius: 3px;
+    font-size: 12px;
+    margin-bottom: 10px;
+    height: 25px;
+    margin-right: 10px;
+}
+
+.app-hide-debug {
+    width: auto;
+    margin-bottom: 10px;
+    height: 25px;
+}
+
+// Print styles
+.p-d-none {
+    display: none !important;
+}
+
+@media print {
+    * {
+        -webkit-print-color-adjust: exact;
+        color-adjust: exact !important;
+    }
+
+    .p-print-none {
+        display: none !important;
+    }
+
+    .p-tooltip {
+        display: none;
+    }
+
+    .p-print-block {
+        display: block !important;
+    }
+
+    body {
+        background-image: none !important;
+        background-color: #fff !important;
+    }
+
+    // Adapted from Angular component selectors to class-based selectors
+    .schedule-flight-details-view,
+    .online-board-flight-details-page {
+        .flight-route,
+        .full-route__icons-status,
+        .details-accordion__header.flight-info {
+            background-color: transparent;
+        }
+
+        section.frame {
+            box-shadow: none !important;
+            padding: 0;
+        }
+
+        .flight-route,
+        .full-route__icons-status,
+        .details-accordion__header {
+            padding: 20px 0 !important;
+        }
+
+        .left__part2.departure--time,
+        .right__part2.arrival--time {
+            margin-top: 20px !important;
+        }
+
+        .note {
+            padding-left: 0 !important;
+        }
+
+        .status--texts {
+            justify-content: center !important;
+        }
+
+        .details-accordion__body {
+            padding: 0 !important;
+            padding-bottom: 20px !important;
+        }
+
+        .details__body__row {
+            svg {
+                display: none;
+            }
+        }
+
+        .details__data {
+            .icon {
+                display: none;
+            }
+        }
+
+        .page-title {
+            color: #000 !important;
+        }
+    }
+}
+
+// Responsive layout (adapted from Angular adaptive styles)
+@media (max-width: $media-breakpoint-tablet) {
+    #root {
+        padding: 0 16px;
+    }
+}
+
+@media (max-width: $media-breakpoint-mobile) {
+    #root {
+        padding: 0 10px;
+    }
+}
diff --git a/src/styles/_layouts.scss b/src/styles/_layouts.scss
new file mode 100644
index 00000000..d648bdc7
--- /dev/null
+++ b/src/styles/_layouts.scss
@@ -0,0 +1,45 @@
+@use './screen' as screen;
+
+@mixin h-spacing($size, $withLast: false) {
+    @if $withLast {
+        & > * {
+            margin-right: $size;
+        }
+    } @else {
+        & > *:not(:last-child) {
+            margin-right: $size;
+        }
+    }
+}
+
+@mixin v-spacing($size, $withLast: false) {
+    @if $withLast {
+        & > * {
+            margin-bottom: $size;
+        }
+    } @else {
+        & > *:not(:last-child) {
+            margin-bottom: $size;
+        }
+    }
+}
+
+@mixin gap($size) {
+    @supports (gap: $size) {
+        gap: $size;
+    }
+
+    @supports not (gap: $size) {
+        @include screen.mobile() {
+            flex-direction: column;
+            & > *:not(:last-child) {
+                margin-bottom: $size;
+            }
+        }
+        @include screen.gt-mobile() {
+            & > *:not(:last-child) {
+                margin-right: $size;
+            }
+        }
+    }
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 00000000..fe691144
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,45 @@
+@use './colors' as colors;
+@use './shadows' as shadows;
+@use './fonts' as fonts;
+@use './variables' as vars;
+
+@mixin button($background-color: colors.$blue-light) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 16px 0;
+
+  border: none;
+  outline: 0 none;
+  background-color: $background-color;
+  border-radius: vars.$border-radius;
+
+  &:focus {
+    box-shadow: 0 0 0 0.2em colors.$focus-shadow;
+  }
+}
+
+@mixin input {
+  display: flex;
+  align-items: center;
+
+  @include shadows.control-border-shadow();
+
+  height: vars.$standard-button-height;
+  padding: 0 vars.$space-l;
+  font-size: fonts.$font-size-l;
+  font-weight: fonts.$font-regular;
+  color: colors.$text-color;
+  transition-duration: 0.2s;
+  @include fonts.font-overflow();
+
+  &:enabled:hover:not(.p-state-error) {
+    border-color: colors.$blue-light;
+  }
+
+  &:enabled:focus:not(.p-state-error) {
+    box-shadow: 0 0 0 0.2em colors.$focus-shadow;
+    border-color: colors.$blue-light;
+  }
+}
diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss
new file mode 100644
index 00000000..5d601c80
--- /dev/null
+++ b/src/styles/_overrides.scss
@@ -0,0 +1,4 @@
+a:focus {
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
new file mode 100644
index 00000000..0c35d11f
--- /dev/null
+++ b/src/styles/_reset.scss
@@ -0,0 +1,341 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0-modified | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+:focus,
+*:focus {
+    outline: 0 none !important;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+input[type='search'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+    resize: vertical;
+}
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    max-width: 100%;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+[hidden] {
+    display: none;
+}
+
+html {
+    font-size: 100%;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+a:focus {
+    outline: 0 none !important;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+img {
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
+
+figure {
+    margin: 0;
+}
+
+form {
+    margin: 0;
+}
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+    border: 0;
+    padding: 0;
+    white-space: normal;
+    *margin-left: -7px;
+}
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%;
+    margin: 0;
+    vertical-align: baseline;
+    *vertical-align: middle;
+}
+
+body,
+button,
+input {
+    line-height: normal;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+    -webkit-appearance: button;
+    cursor: pointer;
+    *overflow: visible;
+}
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+    box-sizing: border-box;
+    padding: 0;
+    *height: 13px;
+    *width: 13px;
+}
+
+input[type='search'] {
+    -webkit-appearance: textfield;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+img {
+    vertical-align: middle;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+.chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+*,
+*:before,
+*:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.wrapper-header {
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+
+    &:before,
+    &:after,
+    *,
+    *:before,
+    *:after {
+        -moz-box-sizing: content-box;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+    }
+}
diff --git a/src/styles/_screen.scss b/src/styles/_screen.scss
new file mode 100644
index 00000000..777513e9
--- /dev/null
+++ b/src/styles/_screen.scss
@@ -0,0 +1,49 @@
+@use './variables' as variables;
+
+@mixin mobile() {
+    @media (max-width: variables.$media-breakpoint-mobile) {
+        @content();
+    }
+}
+
+@mixin desktop() {
+    @media (min-width: variables.$media-breakpoint-desktop-min) {
+        @content();
+    }
+}
+
+@mixin gt-mobile() {
+    @media (min-width: variables.$media-breakpoint-small-tablet-min) {
+        @content();
+    }
+}
+
+@mixin smTablet() {
+    @media (max-width: variables.$media-breakpoint-tablet) {
+        @content();
+    }
+}
+
+@mixin tablet() {
+    @media (min-width: variables.$media-breakpoint-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
+        @content();
+    }
+}
+
+@mixin tablet-small() {
+    @media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-small-tablet) {
+        @content();
+    }
+}
+
+@mixin tablets() {
+    @media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
+        @content();
+    }
+}
+
+@mixin print() {
+    @media print {
+        @content();
+    }
+}
diff --git a/src/styles/_shadows.scss b/src/styles/_shadows.scss
new file mode 100644
index 00000000..e13e5ee0
--- /dev/null
+++ b/src/styles/_shadows.scss
@@ -0,0 +1,20 @@
+@use './colors' as colors;
+@use './variables' as variables;
+
+@mixin box-shadow-small {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+@mixin box-shadow-big {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+@mixin box-shadow--focus-inset {
+    box-shadow: inset 0 0 0 0.2em $focus-shadow !important;
+}
+
+@mixin control-border-shadow {
+    border: 1px solid colors.$border-input;
+    border-radius: variables.$border-radius;
+    box-shadow: 0 2px 2px transparentize($color: #b1b1b1, $amount: 0.84);
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 00000000..41dfcbaf
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,68 @@
+$border-radius: 3px;
+
+/* Paddings and Margins */
+$space-s: 5px;
+$space-s2: 8px;
+$space-m: 10px;
+$space-m2: 12px;
+$space-l: 15px;
+$space-xl: 20px;
+$space-xxl: 40px;
+$space-xxxl: 80px;
+
+$space-top-site: 32px;
+
+// SITE WIDTH
+$site-width: 1440px;
+$left-aside-width: 285px;
+$left-aside-width-desktop: 23.875%;
+$column-spacing: 1.5%;
+
+// MEDIA
+// When changing the size of breakpoints, you also need to change in the file screen-size.service.ts
+$media-breakpoint-desktop: 1300px;
+$media-breakpoint-desktop-min: 1051px;
+$media-breakpoint-tablet: 1050px;
+$media-breakpoint-tablet-min: 769px;
+$media-breakpoint-small-tablet: 768px;
+$media-breakpoint-small-tablet-min: 641px;
+$media-breakpoint-mobile: 640px;
+
+//BUTTON
+$button-height: 48px;
+$button-height--mobile: 38px;
+$button-sort-height: 12px;
+$small-button-height: 35px;
+$medium-button-height: 40px;
+$standard-button-height: 48px;
+$big-button-height: 56px;
+$slider-handle-size: 16px;
+$buttons-width: 32px;
+
+// MEDIA
+$desktopHeaderHeight: 103px;
+$tabletHeaderHeight: 103px;
+$mobileHeaderHeight: 103px;
+
+// FLIGHT
+$text-margin-bottom: 2px;
+$flight-height: 40px;
+$width-flight-number: 60px;
+$width-background-company: 120px;
+$width-dep-arr: 40%;
+$width-status: 20%;
+$width-flight-time: 75px;
+$width-flight-day-change: 25px;
+$button-expand-size: 32px;
+$label-shift-width: 20px;
+$label-shift-height: 18px;
+$status-indicator-size: 8px;
+$status-width: 100px;
+$flight-details-fit: 2%;
+//FLIGHT-DETAILS
+$margin-details-title: 20%;
+
+// FILTERS
+$label-margin-bottom: 10px;
+
+$scroll-width: 6px;
diff --git a/src/styles/framework.scss b/src/styles/framework.scss
new file mode 100644
index 00000000..620b08ec
--- /dev/null
+++ b/src/styles/framework.scss
@@ -0,0 +1,6 @@
+@forward './colors';
+@forward './variables';
+@forward './fonts';
+@forward './shadows';
+@forward './screen';
+@forward './layouts';