diff --git a/client/src/components/App/style.scss b/client/src/components/App/style.scss
index fe3e91a..7b885cd 100644
--- a/client/src/components/App/style.scss
+++ b/client/src/components/App/style.scss
@@ -117,3 +117,11 @@ ul {
     font-size: 32px;
   }
 }
+@media screen and (max-width: 800px) {
+  .button--submit {
+    width: 100px;
+    margin-top: 10px;
+    padding: 0;
+    font-size: 0.7rem;
+  }
+}
diff --git a/client/src/components/CinemaHall/Seat/style.scss b/client/src/components/CinemaHall/Seat/style.scss
index 57ee64d..d7a68b0 100644
--- a/client/src/components/CinemaHall/Seat/style.scss
+++ b/client/src/components/CinemaHall/Seat/style.scss
@@ -14,3 +14,10 @@
 .selected {
   background: #cc6600;
 }
+@media screen and (max-width: 800px) {
+  .hall__seat {
+    min-height: 10px;
+    padding: 4px;
+    margin: 0 2px;
+  }
+}
diff --git a/client/src/components/CinemaHall/style.scss b/client/src/components/CinemaHall/style.scss
index aa2f12e..73a2b4d 100644
--- a/client/src/components/CinemaHall/style.scss
+++ b/client/src/components/CinemaHall/style.scss
@@ -33,3 +33,24 @@
     }
   }
 }
+@media screen and (max-width: 800px) {
+  .cinema__hall {
+    &__name {
+      padding: 16px 0;
+      font-size: 0.7rem;
+    }
+    &__arrangement {
+      width: 50%;
+      padding: 16px;
+      &__seats {
+        padding-top: 20px;
+      }
+
+      &__screen {
+        width: 60%;
+        margin: 0 auto 8px auto;
+        font-size: 0.7rem;
+      }
+    }
+  }
+}
diff --git a/client/src/components/Footer/style.scss b/client/src/components/Footer/style.scss
index 33f2023..c9fa421 100644
--- a/client/src/components/Footer/style.scss
+++ b/client/src/components/Footer/style.scss
@@ -48,3 +48,32 @@
   color: #f1f1f1;
   letter-spacing: 2px;
 }
+@media screen and (max-width: 800px) {
+  .footer {
+    &__header {
+      letter-spacing: 6px;
+      font-size: 0.7rem;
+    }
+    &__list {
+      margin: 0 16px;
+      padding: 10px 0;
+      font-size: 7px;
+    }
+    &__item {
+      line-height: 1.5;
+      &:hover {
+        transition: none;
+      }
+      & span {
+        padding-right: 8px;
+      }
+    }
+    &-header {
+      font-size: 0.7rem;
+      letter-spacing: 3px;
+    }
+
+    font-size: 0.7rem;
+    letter-spacing: 1px;
+  }
+}
diff --git a/client/src/components/Navbar/CinemaForm/style.scss b/client/src/components/Navbar/CinemaForm/style.scss
index e027aff..ca55dbc 100644
--- a/client/src/components/Navbar/CinemaForm/style.scss
+++ b/client/src/components/Navbar/CinemaForm/style.scss
@@ -11,3 +11,17 @@
     border: thin solid gray;
   }
 }
+@media screen and (max-width: 800px) {
+  .cinema-city__form {
+    font-size: 0.7rem;
+    margin: 5px;
+    &__select {
+      width: 200px;
+      margin-left: 8px;
+      border: none;
+      padding: 7px;
+      font-size: 0.7rem;
+      border: thin solid gray;
+    }
+  }
+}
diff --git a/client/src/components/Navbar/style.scss b/client/src/components/Navbar/style.scss
index a8767cb..10b7d70 100644
--- a/client/src/components/Navbar/style.scss
+++ b/client/src/components/Navbar/style.scss
@@ -34,3 +34,9 @@
   display: flex;
   align-items: flex-start;
 }
+@media screen and (max-width: 800px) {
+  .navbar {
+    padding: 8px 16px;
+    font-size: 0.6rem;
+  }
+}
diff --git a/client/src/components/Ticket/style.scss b/client/src/components/Ticket/style.scss
index 84a3015..a660ef7 100644
--- a/client/src/components/Ticket/style.scss
+++ b/client/src/components/Ticket/style.scss
@@ -6,7 +6,7 @@
   &__heading {
     text-align: center;
   }
-  width: 432px;
+  max-width: 432px;
   border: 2px #6e093a solid;
   border-radius: 4px;
   background: $color-primary;
@@ -68,3 +68,23 @@
   width: 75%;
   margin: 0 auto;
 }
+@media screen and (max-width: 800px) {
+  .ticket {
+    max-width: 150px;
+    padding: 6px;
+    margin: 0 8px 16px;
+    &__heading {
+      font-size: 0.6rem;
+      margin: 0 auto;
+    }
+    &__type {
+      font-size: 0.5rem;
+    }
+    &__price {
+      font-size: 0.5rem;
+    }
+    & label {
+      padding: 5px;
+    }
+  }
+}
diff --git a/client/src/domain/MovieInfoBar/style.scss b/client/src/domain/MovieInfoBar/style.scss
index eeec3de..96fb000 100644
--- a/client/src/domain/MovieInfoBar/style.scss
+++ b/client/src/domain/MovieInfoBar/style.scss
@@ -44,3 +44,32 @@
     cursor: pointer;
   }
 }
+@media screen and (max-width: 800px) {
+  .movie {
+    &__image {
+      &-container {
+        width: 150px;
+      }
+    }
+    &__info {
+      font-size: 0.7rem;
+      padding-left: 20px;
+      line-height: 1.5;
+      &-title {
+        font-size: 0.7rem;
+      }
+      &-bar {
+        padding: 16px;
+      }
+      &-details {
+        font-size: 0.7rem;
+      }
+    }
+  }
+  .button--submit {
+    width: 100px;
+    margin-top: 10px;
+    padding: 0;
+    font-size: 0.7rem;
+  }
+}
diff --git a/client/src/domain/MovieSlider/style.scss b/client/src/domain/MovieSlider/style.scss
index 00fd997..7853a0b 100644
--- a/client/src/domain/MovieSlider/style.scss
+++ b/client/src/domain/MovieSlider/style.scss
@@ -32,3 +32,21 @@
     padding: 0 32px;
   }
 }
+@media screen and (max-width: 800px) {
+  .slick {
+    &-slider {
+      height: 40vh;
+      margin-bottom: 30px;
+    }
+  }
+  .slider {
+    &_container {
+      height: 40vh;
+      padding: 20px;
+    }
+    & h2 {
+      padding: 0 16px;
+      font-size: 0.7rem;
+    }
+  }
+}
diff --git a/client/src/domain/MovieView/style.scss b/client/src/domain/MovieView/style.scss
index 0859a54..56e2e63 100644
--- a/client/src/domain/MovieView/style.scss
+++ b/client/src/domain/MovieView/style.scss
@@ -49,3 +49,24 @@
     padding-top: 16px;
   }
 }
+@media screen and (max-width: 800px) {
+  .movie {
+    &__view {
+      &__container {
+        width: 40%;
+      }
+      & h3 {
+        font-size: 20px;
+      }
+    }
+
+    &-container {
+      padding: 20px;
+    }
+  }
+
+  &__header {
+    font-size: 16px;
+    padding-top: 8px;
+  }
+}
diff --git a/client/src/domain/Repertoire/RepertoireNav/index.js b/client/src/domain/Repertoire/RepertoireNav/index.js
index ee78320..0e2c047 100644
--- a/client/src/domain/Repertoire/RepertoireNav/index.js
+++ b/client/src/domain/Repertoire/RepertoireNav/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import './style.scss';
 import DatePicker from 'react-date-picker';
 import 'react-date-picker/dist/DatePicker.css';
 import CinemaForm from '../../../components/Navbar/CinemaForm';
+import './style.scss';
 
 function RepertoireNav({ selectedDate, setSelectedDate }) {
   const handleDate = (date) => {
diff --git a/client/src/domain/Repertoire/RepertoireNav/style.scss b/client/src/domain/Repertoire/RepertoireNav/style.scss
index 1531e7a..6a21443 100644
--- a/client/src/domain/Repertoire/RepertoireNav/style.scss
+++ b/client/src/domain/Repertoire/RepertoireNav/style.scss
@@ -17,3 +17,82 @@
     padding: 10px;
   }
 }
+@media screen and (max-width: 800px) {
+  .repertoire {
+    &__nav {
+      flex-direction: column;
+      align-items: center;
+      font-size: 0.7rem;
+      &__title {
+        font-size: 1rem;
+        margin: 5px;
+      }
+      &__picker {
+        background-color: #fff;
+        margin: 5px;
+      }
+    }
+  }
+  .react-date-picker {
+    &__button {
+      &__icon {
+        height: 12px;
+      }
+    }
+    &__wrapper {
+      padding: 5px;
+    }
+  }
+  .react-calendar {
+    max-width: 200px;
+    &__navigation {
+      &__label {
+        font-size: 0.6rem;
+      }
+      button {
+        min-width: 20px;
+      }
+    }
+    &__month {
+      &-view {
+        &__weekdays {
+          &__weekday {
+            font-size: 0.5rem;
+          }
+        }
+        &__days {
+          &__day {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+    &__year {
+      &-view {
+        &__months {
+          &__month {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+    &__decade {
+      &-view {
+        &__years {
+          &__year {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+    &__century {
+      &-view {
+        &__decades {
+          &__decade {
+            font-size: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/domain/ReservationView/style.scss b/client/src/domain/ReservationView/style.scss
index 3e1eedd..6d544bb 100644
--- a/client/src/domain/ReservationView/style.scss
+++ b/client/src/domain/ReservationView/style.scss
@@ -30,3 +30,25 @@
     }
   }
 }
+@media screen and (max-width: 800px) {
+  .reservation {
+    & h4 {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+    & h5 {
+      font-size: 20px;
+      margin-bottom: 16px;
+    }
+    &__form {
+      & input {
+        font-size: 0.7rem;
+        max-width: 200px;
+      }
+      & h5 {
+        margin-bottom: 20px;
+        font-size: 16px;
+      }
+    }
+  }
+}