diff --git a/index.html b/index.html
index c5dd7a8..cf77804 100644
--- a/index.html
+++ b/index.html
@@ -1,66 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
     <title>ESEP</title>
-    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-<div class="row">
-    <div class="PBP-container col-md-6 col-sm-12">
-        <header class="PBP-header p-2">
-            <div class="logo-container">
-                <p><b>ESEP </b>ПБП</p>
-                <p class="sm-text">БЮДЖЕТНОЕ ПЛАНИРОВАНИЕ</p>
-            </div>
-        </header>
-        <main class="d-flex justify-content-center align-items-center">
-            <img src="img/pb_bg.jpg" alt="">
-            <div class="container px-2">
-                <div class="main-text-wrapper">
-                    <h1>
-                        ПОРТАЛ<br>
-                        БЮДЖЕТНОГО ПЛАНИРОВАНИЯ
-                    </h1>
-                    <div class="line"></div>
+    <div class="row">
+        <div class="PBP-container col-12 col-sm-12 col-md-6">
+            <header class="PBP-header p-2">
+                <div class="logo-container">
+                    <p><b>ESEP </b>ПБП</p>
+                    <p class="sm-text">БЮДЖЕТНОЕ ПЛАНИРОВАНИЕ</p>
                 </div>
-                <a href="https://planner.kz/" class="btn btn-pb">Перейти</a>
-                <div class="contact-us-wrapper d-flex flex-column justify-content-center align-items-center">
-                    <h5>СВЯЗАТЬСЯ С НАМИ</h5>
-                    <div class="line"></div>
-                    <p>e-mail</p>
-                    <p>sup.bplan@gmail.com</p>
+            </header>
+            <main class="d-flex justify-content-center align-items-center">
+                <img src="img/pb_bg.jpg" alt="">
+                <div class="main-container px-2">
+                    <div class="main-text-wrapper">
+                        <h1>
+                            ПОРТАЛ<br>
+                            БЮДЖЕТНОГО ПЛАНИРОВАНИЯ
+                        </h1>
+                        <div class="line"></div>
+                    </div>
+                    <a href="https://planner.kz/" class="btn btn-pb">Перейти</a>
+                    <div class="contact-us-wrapper d-flex flex-column justify-content-center align-items-center">
+                        <h5>СВЯЗАТЬСЯ С НАМИ</h5>
+                        <div class="line"></div>
+                        <p>e-mail</p>
+                        <p>sup.bplan@gmail.com</p>
+                    </div>
                 </div>
-            </div>
-        </main>
+            </main>
+        </div>
+        <div class="PF-container col-12 col-sm-12 col-md-6">
+            <header class="PF-header p-2">
+                <div class="logo-container">
+                    <p><b>ESEP </b>ПЛАН<span>ФАКТ</span></p>
+                    <p class="sm-text">ОБЛАЧНАЯ БУХГАЛТЕРИЯ</p>
+                </div>
+            </header>
+            <main class="main-pf d-flex justify-content-center align-items-center">
+                <img src="img/pf_bg.jpg" alt="">
+                <div class="main-container px-2">
+                    <div class="main-text-wrapper">
+                        <h1>
+                            ОБЛАЧНАЯ БУХГАЛТЕРИЯ
+                        </h1>
+                        <div class="line"></div>
+                    </div>
+                    <a href="https://planfact.kz/ru/" class="btn btn-pf">Перейти</a>
+                    <div class="contact-us-wrapper d-flex flex-column justify-content-center align-items-center">
+                        <h5>СВЯЗАТЬСЯ С НАМИ</h5>
+                        <div class="line"></div>
+                        <p>+7 7172 97-20-76</p>
+                        <p>8 800 004-04-33</p>
+                    </div>
+                </div>
+            </main>
+        </div>
     </div>
-    <div class="PF-container col-md-6 col-sm-12">
-        <header class="PF-header p-2">
-            <div class="logo-container">
-            <p><b>ESEP </b>ПЛАН<span>ФАКТ</span></p>
-            <p class="sm-text">ОБЛАЧНАЯ БУХГАЛТЕРИЯ</p>
-            </div>
-        </header>
-        <main class="main-pf d-flex justify-content-center align-items-end">
-            <img src="img/pf_bg.jpg" alt="">
-            <div class="container px-2">
-                <div class="main-text-wrapper">
-                    <h1>
-                        ОБЛАЧНАЯ БУХГАЛТЕРИЯ
-                    </h1>
-                    <div class="line"></div>
-                </div>
-                <a href="https://planfact.kz/ru/" class="btn btn-pf">Перейти</a>
-                <div class="contact-us-wrapper d-flex flex-column justify-content-center align-items-center">
-                    <h5>СВЯЗАТЬСЯ С НАМИ</h5>
-                    <div class="line"></div>
-                    <p>+7 7172 97-20-76</p>
-                    <p>8 800 004-04-33</p>
-                </div>
-            </div>
-        </main>
-    </div>
-</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 9e0b482..b9fb7ac 100644
--- a/styles.css
+++ b/styles.css
@@ -1,6 +1,7 @@
 html,
 body {
   font-family: "Roboto", sans-serif;
+  font-size: 1rem;
 }
 
 .row, p {
@@ -11,11 +12,12 @@ header {
   height: 70px;
 }
 
-.container {
-  max-height: 50vh;
+.main-container {
+  max-height: 100%;
   display: flex;
-  justify-content: end;
+  justify-content: center;
   flex-direction: column;
+  flex-grow: 1;
   align-items: center;
   position: absolute;
   bottom: 5%;
@@ -164,4 +166,15 @@ header {
   background-color: #001529;
 }
 
+@media screen and (max-width: 768px) {
+  .main-container {
+    bottom: 25%;
+  }
+}
+@media screen and (max-width: 992px) {
+  .main-container {
+    bottom: 25%;
+  }
+}
+
 /*# sourceMappingURL=styles.css.map */
diff --git a/styles.css.map b/styles.css.map
index 8e6fc7a..3e2a7cc 100644
--- a/styles.css.map
+++ b/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAQJ;EACE;;AAEF;EACE;;;AAOF;EACE;;AAEF;EACE","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAQJ;EACE;;AAEF;EACE;;;AAOF;EACE;;AAEF;EACE;;;AAIN;EACE;IACE;;;AAGJ;EACE;IACE","file":"styles.css"}
\ No newline at end of file
diff --git a/styles.scss b/styles.scss
index 7a89e52..0ad00fb 100644
--- a/styles.scss
+++ b/styles.scss
@@ -1,6 +1,7 @@
 html,
 body {
   font-family: 'Roboto', sans-serif;
+  font-size: 1rem;
 }
 
 .row, p {
@@ -11,11 +12,12 @@ header {
   height: 70px;
 }
 
-.container {
-  max-height: 50vh;
+.main-container {
+  max-height: 100%;
   display: flex;
-  justify-content: end;
+  justify-content: center;
   flex-direction: column;
+  flex-grow: 1;
   align-items: center;
   position: absolute;
   bottom: 5%;
@@ -193,4 +195,13 @@ header {
     }
   }
 }
-
+@media screen and (max-width: 768px) {
+  .main-container {
+    bottom: 25%;
+  }
+}
+@media screen and (max-width: 992px) {
+  .main-container {
+    bottom: 25%;
+  }
+}
