diff --git a/src/App.js b/src/App.js
index ba4a70d..eff9157 100644
--- a/src/App.js
+++ b/src/App.js
@@ -87,7 +87,7 @@ class App extends React.Component {
                 <Redirect from='/home' to='/doctors' />
                 <Redirect from='/index.html' to='/doctors' /> */}
                 <Route exact path='/'>
-                  <HomePage/>
+                  <HomePage isLoggedIn={this.state.isLoggedIn}/>
                 </Route>
                 <Route path='/doctors'>
                   <DoctorsPage/>
diff --git a/src/components/AppointmentBlock.css b/src/components/AppointmentBlock.css
index 0132953..be97f03 100644
--- a/src/components/AppointmentBlock.css
+++ b/src/components/AppointmentBlock.css
@@ -6,4 +6,12 @@
     height: 300px;
     display: flex;
     justify-content: center;
+}
+
+@media (max-width: 1050px) {
+    .AppointmentBlock {
+        margin: 0;
+        padding: 0;
+        height: fit-content;
+    }
 }
\ No newline at end of file
diff --git a/src/components/AppointmentForm.css b/src/components/AppointmentForm.css
index a01aae3..7cbbb82 100644
--- a/src/components/AppointmentForm.css
+++ b/src/components/AppointmentForm.css
@@ -93,4 +93,40 @@
 .AppButton {
     max-width: 500px;
     min-width: 300px;
+}
+
+@media (max-width: 935px) {
+    .AppForm-UpperBlock {
+        flex-direction: column;
+    }
+
+    .AppForm-Container.Date, .AppForm-Container.Time {
+        margin-right: 0;
+    }
+}
+
+@media (max-width: 400px) {
+    .AppForm-TimeSlots {
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 400px;
+    }
+
+    .AppForm-Container.Time {
+        width: 100%;
+        max-width: 300px;
+    }
+
+    .TimeSlotButton {
+        margin: 5px;
+        width: 100%;
+        max-width: 200px;
+        min-width: 50px;
+    }
+
+    .AppButton {
+        width: 100%;
+        min-width: 50px;
+    }
 }
\ No newline at end of file
diff --git a/src/components/DoctorPage.css b/src/components/DoctorPage.css
index 9db8348..5054d47 100644
--- a/src/components/DoctorPage.css
+++ b/src/components/DoctorPage.css
@@ -68,4 +68,22 @@
 .Doctor-Info-Rating {
     background-color: aliceblue;
     height: 30px;
+}
+
+@media (max-width: 1050px) {
+    .Doctor-Info {
+        flex-direction: column;
+    }
+
+    .Doctor-Info-Left {
+        align-self: center;
+    }
+
+    .Doctor-Info-Right {
+        padding: 20px 0;
+    }
+
+    .Doctor-Info-type {
+        flex-direction: column;
+    }
 }
\ No newline at end of file
diff --git a/src/components/DoctorShowcase.css b/src/components/DoctorShowcase.css
index 2b819cd..d8cfbaa 100644
--- a/src/components/DoctorShowcase.css
+++ b/src/components/DoctorShowcase.css
@@ -44,4 +44,27 @@
 .DoctorShowcase-Type {
     font-weight: bold;
     color: steelblue;
+    font-size: 16px;
+}
+
+@media (max-width: 1024px) {
+    .DoctorShowcase {
+        max-width: 200px;
+    }
+
+    .DoctorShowcase-Img {
+        height: 200px;
+    }
+
+    .DoctorShowcase-Name {
+        font-size: 16px;
+    }
+
+    .DoctorShowcase-Type {
+        font-size: 14px;
+    }
+
+    .DoctorShowcase-extraInfo {
+        font-size: 14px;
+    }
 }
\ No newline at end of file
diff --git a/src/components/HistoryTable.css b/src/components/HistoryTable.css
index 21e22d7..56532e5 100644
--- a/src/components/HistoryTable.css
+++ b/src/components/HistoryTable.css
@@ -10,6 +10,7 @@
     flex-direction: column;
     align-items: center;
     margin: 20px auto;
+    width: 100%;
 }
 
 .HistoryTable td {
diff --git a/src/components/MainMenu.css b/src/components/MainMenu.css
index 5c05681..478b06c 100644
--- a/src/components/MainMenu.css
+++ b/src/components/MainMenu.css
@@ -40,7 +40,11 @@
     flex: 1;
 }
 
-.Menu-buttons a, .Menu-buttons button {
+.Menu-buttons-Navs {
+    display: flex;
+}
+
+.MenuButton {
     display: flex;
     text-decoration: none;
     text-align: center;
@@ -55,15 +59,15 @@
     transition: all 0.1s ease-in-out;
 }
 
-.Menu-buttons a:hover {
+.MenuButton:hover {
     border-bottom: 4px solid rgba(70, 131, 180, 0.5);
 }
 
-.Menu-buttons a:active, .Menu-buttons a.active {
+.MenuButton:active, .MenuButton.active {
     border-bottom: 4px solid steelblue;
 }
 
-@media (max-width: 425px) {
+@media (max-width: 655px) {
     .Menu-logo {
         display: none;
     }
@@ -75,9 +79,21 @@
 }
 
 .Menu-DropdownButton {
+    display: flex;
+    text-decoration: none;
+    text-align: center;
+    align-items: center;
+    padding: 0 20px;
+    white-space: nowrap;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    color: steelblue;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+    
     font-family: inherit;
     margin: 0;
-    transition: all 0.1s ease-in-out;
     height: 100%;
 }
 
@@ -96,13 +112,20 @@
 }
 
 .Menu-DropdownMenu a {
+    text-decoration: none;
+    text-align: center;
+    align-items: center;
+    white-space: nowrap;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+
     /* float: none; */
     padding: 10px 10px;
     color: white;
-    text-decoration: none;
     display: block;
     transition: all 0.2s ease-in-out;
-    border: none;
 }
 
 .Menu-DropdownMenu a:hover {
@@ -119,4 +142,118 @@
 .Menu-Dropdown:hover .Menu-DropdownMenu {
     opacity: 1;
     visibility: visible;
+}
+
+#OpenMenu {
+    display: none;
+    text-decoration: none;
+    text-align: center;
+    align-items: center;
+    padding: 0 20px;
+    white-space: nowrap;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    color: steelblue;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+    
+    font-family: inherit;
+    margin: 0;
+    height: 100%;
+}
+
+
+@media (max-width: 1030px) {
+    #OpenMenu {
+        display: block;
+        font-size: 18px;
+        /* background-color: aliceblue;
+        border-radius: 50px;
+        margin: 10px; */
+    }
+    
+    .Main-menu {
+        justify-content: space-between;
+    }
+    
+    .Menu-buttons {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        margin: 0;
+        flex: 0;
+        z-index: 1;
+        transition: none;
+    }
+    
+    .Menu-buttons:hover #OpenMenu {
+        background-color: steelblue;
+        color: white;
+    }
+    
+    .Menu-buttons:hover .Menu-buttons-Navs {
+        opacity: 1;
+        visibility: visible;
+    }
+    
+    .Menu-buttons-Navs {
+        opacity: 0;
+        visibility: hidden;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        margin-top: 60px;
+        border: 1px solid steelblue;
+        background-color: white;
+        transition: none;
+    }
+    
+    .MenuButton, .Menu-DropdownButton {
+        min-height: 60px;
+        width: 100%;
+    }
+    
+    .MenuButton:hover {
+        border-left: 6px solid rgba(70, 131, 180, 0.5);
+        border-bottom: none;
+    }
+    
+    .MenuButton:active, .MenuButton.active {
+        border-left: 6px solid steelblue;
+        border-bottom: none;
+    }
+    
+    .Menu-Dropdown {
+        display: flex;
+        flex-direction: column;
+        transition: none;
+    }
+    
+    .Menu-DropdownButton {
+        display: none;
+    }
+    
+    .Menu-DropdownMenu {
+        opacity: 1;
+        visibility: inherit;
+        position: relative;
+        background-color: steelblue;
+        box-shadow: 0 3px 3px 1px steelblue;
+        border: 1px solid steelblue;
+        transition: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .MenuButton, .Menu-DropdownButton {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        min-height: 0;
+        font-size: 16px;
+    }
+
+    .Menu-DropdownMenu a {
+        font-size: 16px;
+    }
 }
\ No newline at end of file
diff --git a/src/components/MainMenu.js b/src/components/MainMenu.js
index 2e583fc..701e2ee 100644
--- a/src/components/MainMenu.js
+++ b/src/components/MainMenu.js
@@ -42,15 +42,19 @@ class MainMenu extends React.Component {
                 <div className='Main-menu'>
                     <MenuLogo />
                     <nav className='Menu-buttons'>
-                        <NavLink exact to="/" activeClassName="active">Головна сторінка</NavLink>
-                        <NavLink to="/doctors" activeClassName="active">Список лікарів</NavLink>
-                        {profileButton}
-                        <NavLink to="/contacts" activeClassName="active">Контакти</NavLink>
+                        <button id='OpenMenu'>Меню</button>
+                        <div className='Menu-buttons-Navs'>
+                            <NavLink className='MenuButton' exact to="/" activeClassName="active">Головна сторінка</NavLink>
+                            <NavLink className='MenuButton' to="/doctors" activeClassName="active">Список лікарів</NavLink>
+                            {profileButton}
+                            <NavLink className='MenuButton' to="/contacts" activeClassName="active">Контакти</NavLink>
+                        </div>
                     </nav>
                     <SearchBar />
                     <LoginControl isLoggedIn={this.props.loginControl.isLoggedIn}
                      onLogOut={this.onLogOut} />
                 </div>
+                <SearchBar mobile={true} />
             </div>
         );
     }
diff --git a/src/components/MainPageBlock.css b/src/components/MainPageBlock.css
new file mode 100644
index 0000000..cb72e4d
--- /dev/null
+++ b/src/components/MainPageBlock.css
@@ -0,0 +1,51 @@
+.MainPageBlock {
+    display: flex;
+    flex-direction: row;
+    /* flex-wrap: wrap; */
+}
+
+.MainPageBlock.inverse {
+    flex-direction: row-reverse;
+}
+
+.MainPageBlock-Info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 50%;
+    text-align: center;
+}
+
+.MainPageBlock-Info p {
+    font-size: 18px;
+}
+
+.MainPageBlock-ImageContainer {
+    flex: 1 1 50%;
+    padding: 20px;
+    width: 100%;
+    height: 500px;
+}
+
+.MainPageBlock-ImageContainer img {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+    clip-path: circle();
+}
+
+@media (max-width: 760px) {
+    .MainPageBlock, .MainPageBlock.inverse {
+        flex-direction: column;
+    }
+
+    .MainPageBlock-ImageContainer {
+        height: 300px;
+    }
+
+    .MainPageBlock-Info p {
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/MainPageBlock.js b/src/components/MainPageBlock.js
new file mode 100644
index 0000000..cdbf431
--- /dev/null
+++ b/src/components/MainPageBlock.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import './MainPageBlock.css';
+import './inputs.css';
+
+export default class MainPageBlock extends React.Component {
+    render() {
+        return (
+            <div className={this.props.inverse ? 'MainPageBlock inverse'
+            : 'MainPageBlock'}>
+                <div className='MainPageBlock-Info'>
+                    <h1>{this.props.title}</h1>
+                    <p>{this.props.text}</p>
+                    {this.props.btnText &&
+                        <button className='PrimaryButton' onClick={this.props.btnCallback}>
+                            {this.props.btnText}
+                        </button>
+                    }
+                </div>
+                <div className='MainPageBlock-ImageContainer'>
+                    <img src={this.props.img} alt={this.props.imgAlt}></img>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/components/Search.css b/src/components/Search.css
index 3410605..eee28d4 100644
--- a/src/components/Search.css
+++ b/src/components/Search.css
@@ -4,6 +4,13 @@
     width: 100%;
 }
 
+.SearchContainer.mobile {
+    display: none;
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
 .SearchInputContainer {
     width: 100%;
     height: 100%;
@@ -16,8 +23,10 @@
     position: absolute;
     display: flex;
     flex-direction: column;
-    width: 100%;
-    min-width: 350px;
+    /* width: 100%; */
+    width: calc(100% - 20px);
+    min-width: 250px;
+    /* max-width: 600px; */
     border-radius: 10px;
     margin: 10px;
     visibility: hidden;
@@ -77,10 +86,10 @@
 
 .SearchResult {
     background-color: steelblue;
-    padding: 5px;
+    /* padding: 5px; */
     color: white;
     cursor: pointer;
-    display: flex;
+    /* display: flex; */
     justify-content: space-between;
 }
 
@@ -93,8 +102,32 @@
 .SearchResult-Type {
     font-size: 14px;
     font-weight: bold;
+    padding: 5px;
+    text-align: right;
 }
 
 .SearchResult-Name {
     font-size: 16px;
+    padding: 5px;
+}
+
+@media (max-width: 450px) {
+    .SearchContainer {
+        display: none;
+    }
+
+    .SearchContainer.mobile {
+        display: block;
+        width: 100%;
+    }
+
+    .SearchContainer.mobile .SearchInputContainer {
+        justify-content: center;
+    }
+
+    .SearchContainer.mobile .SearchInputContainer .Search {
+        width: 100%;
+        height: 30px;
+        margin-bottom: 10px;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Search.js b/src/components/Search.js
index 08e2e1a..6237ce5 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -97,7 +97,7 @@ class SearchBar extends React.Component {
         }
 
         return (
-            <div className='SearchContainer'>
+            <div className={this.props.mobile ? 'SearchContainer mobile' : 'SearchContainer'}>
                 <div className='SearchInputContainer'>
                     <div className='Search'>
                         <span><SearchIcon /></span>
@@ -108,7 +108,11 @@ class SearchBar extends React.Component {
                     </div>
                 </div>
                 <div className='SearchResults'>
-                    {content}
+                    <table style={{margin: '0'}}>
+                        <tbody style={{width: '100%'}}>
+                            {content}
+                        </tbody>
+                    </table>
                 </div>
             </div>
         );
@@ -118,10 +122,10 @@ class SearchBar extends React.Component {
 class SearchResult extends React.Component {
     render() {
         return (
-            <div onClick={this.props.onClick} className='SearchResult'>
-                <span className='SearchResult-Name'>{this.props.name}</span>
-                <span className='SearchResult-Type'>{this.props.type}</span>
-            </div>
+            <tr onClick={this.props.onClick} className='SearchResult'>
+                <td className='SearchResult-Name'>{this.props.name}</td>
+                <td className='SearchResult-Type'>{this.props.type}</td>
+            </tr>
         );
     }
 }
diff --git a/src/components/SideMenu.css b/src/components/SideMenu.css
index 17f81d5..0782675 100644
--- a/src/components/SideMenu.css
+++ b/src/components/SideMenu.css
@@ -83,4 +83,21 @@
 .SideMenu-Item:active, .SideMenu-Item.active {
     border-left: 4px solid steelblue;
     background-color: aliceblue;
+}
+
+@media (max-width: 870px) {
+    .SideMenu {
+        position: static;
+        align-self: center;
+        height: 400px;
+        margin: 10px;
+    }
+
+    .SMCategory-Button {
+        font-size: 20px;
+    }
+
+    .SideMenu-Item {
+        font-size: 12px;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Slideshow/Slideshow.css b/src/components/Slideshow/Slideshow.css
index bff0ba0..374dc9b 100644
--- a/src/components/Slideshow/Slideshow.css
+++ b/src/components/Slideshow/Slideshow.css
@@ -105,4 +105,10 @@ html {
     padding: 10px;
     color: white;
     box-shadow: 0 0 10px 1px black;
+}
+
+@media (max-width: 425px) {
+    .Slideshow-container {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Slideshow/Slideshow.js b/src/components/Slideshow/Slideshow.js
index 940fe1d..32600f3 100644
--- a/src/components/Slideshow/Slideshow.js
+++ b/src/components/Slideshow/Slideshow.js
@@ -30,6 +30,10 @@ export class Slideshow extends React.Component {
         this.autoScroll = setInterval(this.scrollRight, 4000);
     }
 
+    componentWillUnmount() {
+        clearInterval(this.autoScroll);
+    }
+
     scrollRight() {
         if (this.curSlideId === this.slideCount + this.id) {
             this.curSlideId = this.slidesComponents[0].props.id;
diff --git a/src/components/inputs.css b/src/components/inputs.css
index c1ebf7e..0147c25 100644
--- a/src/components/inputs.css
+++ b/src/components/inputs.css
@@ -107,6 +107,7 @@
 .InputRow {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-evenly;
 }
@@ -121,12 +122,18 @@
     white-space: nowrap;
 }
 
+.tableOverflowContainer {
+    width: 100%;
+    overflow-x: auto;
+    margin: 10px;
+}
+
 table {
     background-color: aliceblue;
-    margin: 10px;
     border-radius: 10px;
     border-collapse: collapse;
     border-spacing: 0px;
+    width: 100%;
 }
 
 thead {
@@ -146,4 +153,5 @@ th:last-child {
 
 th {
     padding: 4px;
-}
\ No newline at end of file
+}
+
diff --git a/src/pages/DoctorProfilePage.js b/src/pages/DoctorProfilePage.js
index 3d55064..648fc31 100644
--- a/src/pages/DoctorProfilePage.js
+++ b/src/pages/DoctorProfilePage.js
@@ -260,28 +260,30 @@ class DoctorProfilePage extends React.Component {
                 openTable = (
                     <>
                     <h3>Поточні записи</h3>
-                    <table className='HistoryTable'>
-                        <thead>
-                            <tr>
-                                <th>Ім'я пацієнта</th>
-                                <th>Номер телефону</th>
-                                <th>Час</th>
-                                <th>Дата</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {open.map(a => {
-                            return (
-                                <tr key={a.id}>
-                                    <td>{`${a.user.firstName} ${a.user.lastName}`}</td>
-                                    <td>{a.user.phone}</td>
-                                    <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
-                                    <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
+                    <div className='tableOverflowContainer'>
+                        <table className='HistoryTable'>
+                            <thead>
+                                <tr>
+                                    <th>Ім'я пацієнта</th>
+                                    <th>Номер телефону</th>
+                                    <th>Час</th>
+                                    <th>Дата</th>
                                 </tr>
-                            );
-                        })}
-                        </tbody>
-                    </table>
+                            </thead>
+                            <tbody>
+                            {open.map(a => {
+                                return (
+                                    <tr key={a.id}>
+                                        <td>{`${a.user.firstName} ${a.user.lastName}`}</td>
+                                        <td>{a.user.phone}</td>
+                                        <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
+                                        <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
+                                    </tr>
+                                );
+                            })}
+                            </tbody>
+                        </table>
+                    </div>
                     </>
                 );
             } else openTable = <h3>Поточні записи відсутні.</h3>
@@ -290,28 +292,30 @@ class DoctorProfilePage extends React.Component {
                 closeTable = (
                     <>
                     <h3>Пройдені записи</h3>
-                    <table className='HistoryTable'>
-                        <thead>
-                            <tr>
-                                <th>Ім'я пацієнта</th>
-                                <th>Номер телефону</th>
-                                <th>Час</th>
-                                <th>Дата</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {close.map(a => {
-                            return (
-                                <tr key={a.id}>
-                                    <td>{`${a.user.firstName} ${a.user.lastName}`}</td>
-                                    <td>{a.user.phone}</td>
-                                    <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
-                                    <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
+                    <div className='tableOverflowContainer'>
+                        <table className='HistoryTable'>
+                            <thead>
+                                <tr>
+                                    <th>Ім'я пацієнта</th>
+                                    <th>Номер телефону</th>
+                                    <th>Час</th>
+                                    <th>Дата</th>
                                 </tr>
-                            );
-                        })}
-                        </tbody>
-                    </table>
+                            </thead>
+                            <tbody>
+                            {close.map(a => {
+                                return (
+                                    <tr key={a.id}>
+                                        <td>{`${a.user.firstName} ${a.user.lastName}`}</td>
+                                        <td>{a.user.phone}</td>
+                                        <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
+                                        <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
+                                    </tr>
+                                );
+                            })}
+                            </tbody>
+                        </table>
+                    </div>
                     </>
                 );
             } else closeTable = <h3>Пройдені записи відсутні.</h3>
@@ -351,7 +355,8 @@ class DoctorProfilePage extends React.Component {
                 {/* Створення робочих днів */}
                 <div className='HistoryContainer'>
                     <h2>Додати робочий день</h2>
-                    <form onSubmit={this.createWorkDay} className='InputForm' style={{alignItems: 'center'}}>
+                    <form onSubmit={this.createWorkDay} className='InputForm' style={{alignItems: 'center',
+                    maxWidth: '100%'}}>
                         <label>Виберіть день:</label>
                         <ReactDatePicker className='DateInput'
                             dateFormat='dd/MM/yyyy'
diff --git a/src/pages/HistoryPage.js b/src/pages/HistoryPage.js
index 57819a5..06f55d3 100644
--- a/src/pages/HistoryPage.js
+++ b/src/pages/HistoryPage.js
@@ -115,31 +115,33 @@ class HistoryPage extends React.Component {
                 openTable = (
                     <>
                     <h3>Поточні записи</h3>
-                    <table className='HistoryTable'>
-                        <thead>
-                            <tr>
-                                <th>Спеціальність лікаря</th>
-                                <th>Ім'я лікаря</th>
-                                <th>Час</th>
-                                <th>Дата</th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {open.map(a => {
-                            return (
-                                <tr key={a.id}>
-                                    <td>{a.doctor.type.typeName}</td>
-                                    <td>{`${a.doctor.firstName} ${a.doctor.lastName}`}</td>
-                                    <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
-                                    <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
-                                    <td><button className='SecondaryButton' style={{margin: '0'}}
-                                     onClick={(e) => this.cancelAppointment(a.id)}>Відмінити</button></td>
+                    <div className='tableOverflowContainer'>
+                        <table className='HistoryTable'>
+                            <thead>
+                                <tr>
+                                    <th>Спеціальність лікаря</th>
+                                    <th>Ім'я лікаря</th>
+                                    <th>Час</th>
+                                    <th>Дата</th>
+                                    <th></th>
                                 </tr>
-                            );
-                        })}
-                        </tbody>
-                    </table>
+                            </thead>
+                            <tbody>
+                            {open.map(a => {
+                                return (
+                                    <tr key={a.id}>
+                                        <td>{a.doctor.type.typeName}</td>
+                                        <td>{`${a.doctor.firstName} ${a.doctor.lastName}`}</td>
+                                        <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
+                                        <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
+                                        <td><button className='SecondaryButton' style={{margin: '0'}}
+                                        onClick={(e) => this.cancelAppointment(a.id)}>Відмінити</button></td>
+                                    </tr>
+                                );
+                            })}
+                            </tbody>
+                        </table>
+                    </div>
                     </>
                 );
             } else openTable = <h3>Поточні записи відсутні.</h3>
@@ -148,28 +150,30 @@ class HistoryPage extends React.Component {
                 closeTable = (
                     <>
                     <h3>Пройдені записи</h3>
-                    <table className='HistoryTable'>
-                        <thead>
-                            <tr>
-                                <th>Спеціальність лікаря</th>
-                                <th>Ім'я лікаря</th>
-                                <th>Час</th>
-                                <th>Дата</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {close.map(a => {
-                            return (
-                                <tr key={a.id}>
-                                    <td>{a.doctor.type.typeName}</td>
-                                    <td>{`${a.doctor.firstName} ${a.doctor.lastName}`}</td>
-                                    <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
-                                    <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
+                    <div className='tableOverflowContainer'>
+                        <table className='HistoryTable'>
+                            <thead>
+                                <tr>
+                                    <th>Спеціальність лікаря</th>
+                                    <th>Ім'я лікаря</th>
+                                    <th>Час</th>
+                                    <th>Дата</th>
                                 </tr>
-                            );
-                        })}
-                        </tbody>
-                    </table>
+                            </thead>
+                            <tbody>
+                            {close.map(a => {
+                                return (
+                                    <tr key={a.id}>
+                                        <td>{a.doctor.type.typeName}</td>
+                                        <td>{`${a.doctor.firstName} ${a.doctor.lastName}`}</td>
+                                        <td>{moment(a.timeSlot.time).format('HH:mm')}</td>
+                                        <td>{moment(a.timeSlot.time).format('DD.MM.YYYY')}</td>
+                                    </tr>
+                                );
+                            })}
+                            </tbody>
+                        </table>
+                    </div>
                     </>
                 );
             } else closeTable = <h3>Пройдені записи відсутні.</h3>
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index c95b06a..4452c93 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,14 +1,75 @@
 import React from 'react';
 import Page from './Page';
+import MainPageBlock from '../components/MainPageBlock';
+import { withRouter } from 'react-router-dom';
+
+import img1 from '../images/slide_doctors.jpg';
+import img2 from '../images/slide_app.jpg';
+import img3 from '../images/slide_3.jpg';
+
+class HomePage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.redirectToDoctors = this.redirectToDoctors.bind(this);
+        this.redirectToLogin = this.redirectToLogin.bind(this);
+        this.redirectToContacts = this.redirectToContacts.bind(this);
+        this.redirectToHistory = this.redirectToHistory.bind(this);
+    }
+
+    redirectToDoctors() {
+        this.props.history.push('/doctors');
+    }
+
+    redirectToLogin() {
+        this.props.history.push('/login');
+    }
+
+    redirectToHistory() {
+        this.props.history.push('/profile/history');
+    }
+
+    redirectToContacts() {
+        this.props.history.push('/contacts');
+    }
 
-export default class HomePage extends React.Component {
     render() {
         return (
             <Page>
-                <h2>Home Page</h2>
-                <p> Some text of home page.</p>
-                <button>List of doctors</button>
+                <MainPageBlock
+                    title='Професійні лікарі'
+                    text='На нашому сайті ви знайдете лише найкращих лікарів.'
+                    btnText='Список лікарів'
+                    btnCallback={this.redirectToDoctors}
+                    img={img1}
+                    imgAlt='Професійні лікарі'
+                />
+                <MainPageBlock
+                    title='Швидкий запис на прийом'
+                    text={this.props.isLoggedIn ?
+                    `Записатися на прийом дуже легко і швидко.
+                    Окрім того, ви завжди можете переглянути історію своїх записів.`
+                    : `Записатися на прийом дуже легко і швидко. Увійдіть
+                    до свого облікового запису та запишіться прямо зараз.`}
+                    btnText={this.props.isLoggedIn ?
+                    'Переглянути історію записів' : 'Увійти'}
+                    btnCallback={this.props.isLoggedIn ?
+                        this.redirectToHistory : this.redirectToLogin}
+                    img={img2}
+                    imgAlt='Швидкий запис на прийом'
+                    inverse
+                />
+                <MainPageBlock
+                    title='Якісні поліклініки'
+                    text='Наші лікарі працюють в найкращих поліклініках.
+                    Переглянути їх місцезнаходження можна на сторінці контактів.'
+                    btnText='Переглянути місцезнаходження'
+                    btnCallback={this.redirectToContacts}
+                    img={img3}
+                    imgAlt='Якісні поліклініки'
+                />
             </Page>
         );
     }
-}
\ No newline at end of file
+}
+
+export default withRouter(HomePage);
\ No newline at end of file
diff --git a/src/pages/Page.css b/src/pages/Page.css
index 3f89cfe..ad4186e 100644
--- a/src/pages/Page.css
+++ b/src/pages/Page.css
@@ -13,6 +13,18 @@
     flex-grow: 1;
 }
 
+@media (max-width: 768px) {
+    .PageMarginContainer {
+        margin: 20px 20px;
+    }
+}
+
+@media (max-width: 375px) {
+    .PageMarginContainer {
+        margin: 20px 5px;
+    }
+}
+
 .PageTitle {
     text-align: center;
 }
@@ -58,6 +70,32 @@
     font-size: 16px;
 }
 
+@media (max-width: 510px) {
+    .SortingBlock {
+        background-color: aliceblue;
+        padding: 5px;
+        margin: 0;
+        border-radius: 10px;
+    }
+    
+    .SortingBlock select {
+        margin: 0;
+        padding: 5px;
+        border-radius: inherit;
+        color: steelblue;
+        border-color: steelblue;
+        font-size: 14px;
+        text-overflow: ellipsis;
+        white-space: pre;
+        overflow: hidden;
+        max-width: 100%;
+    }
+
+    .Page {
+        padding: 10px;
+    }
+}
+
 .ContactBlock {
     display: flex;
     flex-direction: row;
@@ -86,4 +124,14 @@
 
 .ContactInfo div {
     margin: 10px 0px;
+}
+
+@media (max-width: 870px) {
+    .PageContainer {
+        flex-direction: column;
+    }
+
+    .PageMarginContainer {
+        margin: 10px;
+    }
 }
\ No newline at end of file