diff --git a/index.css b/index.css
index aae359f..b0846a2 100644
--- a/index.css
+++ b/index.css
@@ -2,21 +2,36 @@
 .menu {
     border-top: double 4px silver;
     border-bottom: double 4px silver;
-    text-align: right;
-    font-size:  0;
+    font-size: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+@media screen and (max-width: 800px) {
+    .menu {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr 1fr;
+    }
+
+    .menu .selected {
+        border-bottom: double 4px silver;
+
+    }
 }
 
 .menu-item {
     display: inline-block;
-    width: 8%;
+    width: 100%;
     height: 3em;
-    line-height: 3em; /* to align to center */
+    line-height: 3em;
+    /* to align to center */
     text-align: center;
     vertical-align: middle;
     margin: 0 1%;
     overflow: hidden;
-    text-overflow: ellipsis ;
-    font-size:  medium;
+    text-overflow: ellipsis;
+    font-size: medium;
 
 }
 
@@ -38,168 +53,78 @@
 }
 
 
-/* 4 images part */
+/* 3 images part */
 .images-container {
+    display: inline-flex;
+    flex-direction: row;
     width: 90%;
-    height: 200pt;
     margin: auto;
-    overflow: hidden;
 }
 
-.half-size {
-    width: 49%;
-    margin: 0.2%;
-    float: left;
-}
-
-.quarter-size {
-    width: 24%;
-    margin: 0.2%;
-    float: left;
-}
-
-.image-column-container {
-    width: 24%;
-    height:100%;
-    margin: 0.15%;
-    float: left;
-
-}
-
-.image-column-container > div {
+.images-container > img {
+    margin: auto;
     width: 100%;
-    height: 50%;
-    margin-bottom: 1.4%;
-    overflow: hidden;
-
-    /* text-align: center; */
+    height: 30vw;
 }
 
-.images-container img{
-    width:100% 
-}
+@media screen and (max-width: 800px) {
+    .images-container {
+        flex-direction: column;
+    }
 
-/* main block part */
-
-.main-block{
-    width:80%;
-    margin:1.2% auto;
-
-}
-.main-column{
-    display: inline-block;
-    width:25%;
-}
-.main-center{
-    vertical-align: top;
-    width: 48%;
-    height:100%;
-    display: inline-block;
-    
-}
-.info-block{
-    height:10%;
-    padding: 5%;
-}
-
-.bg-aqua{
-    background: #80DEEA;
-}
-.bg-grey{
-    background: #B0BFC6;
-}
-.bg-blue{
-    background: #BBDEFA;
-}
-.bg-yellow{
-    background: #FFE0B2;
+    .images-container>img {
+        width: 90%;
+        height: 90%;
+        /* object-fit: fill; */
+    }
 }
 
 
+/* text block part */
 .info-block-header{
     display: block;
-    margin:auto;
-    text-align: center;
-    font-size: 1.5em;
     font-weight: bold;
+    text-align: center;
 }
-.info-block-text{
-    display: block;
+
+.block-border{
+    border: solid black 2px;
+    padding:2vw;
+}
+.block-a-container{
+    display: grid;
+    grid-template-columns: 3fr 3fr 2fr;
+    grid-template-rows: 1fr;
+}
+@media screen and (max-width: 800px) {
+  .block-a-container{
+    display: flex;
+    flex-direction: column;
+}
+}
+
+.block-b-container{
+    display: grid;
+    grid-template-columns: 4fr 7fr 4fr;
+    grid-template-rows: 1fr;
+}
+@media screen and (max-width: 800px) {
+  .block-b-container{
+    display: flex;
+    flex-direction: column;
+}
+}
+
+
+.h-block *{
+    margin: 2vw;
+}
+.h-block >span{
     text-align: justify;
 }
-.info-block-image{
-    margin: 0% 5% 5%;
-    width:90%;
-    overflow: hidden;
-}
-.info-block-image >img{
-    width: 100%;
-}
-.rounded{
-    border-radius: 20px;
-    overflow: hidden;
-}
-.info-block-button{
-    float: right;
-    color:white;
-    background-color: #2294F4;
-    border-radius: 5px;
-}
-.button-left{
-    float: left;
-}
-.pad-down{
-    margin-top: 40%;
-    bottom: 0;
-}
-/* main block center part */
-.center-upper, .center-lower, .center-center{
-    /* background-color: lightblue; DEBUG*/
-    margin:5%;
-}
-.info-block-image-small{
-    display: inline-block;
-    width: 20%;
-    height: 100px;
-    background-color:black ;
-    overflow: hidden;
-    vertical-align: top;
-}
-.info-block-image-small >img{
-    width: 100%;
-}
-.align-left{
-    text-align: left;
-}
-.align-right{
-    text-align: right;
-}
-.inline {
-    display: inline-block;
 
-}
-.info-block-wide-text-container{
-    width: 77%;
-}
-
-.link{
-    display: block;
-    color:gray;
-    margin-bottom: 0px;
-    white-space: nowrap;
-}
-.info-block-image-center{
-    display: inline-block;
-    width: 50%;
-    /* height: 100px; */
-    background-color:black ;
-    overflow: hidden;
-    vertical-align: top;
-}
-.info-block-image-center >img{
+.h-block >img{
+    margin: auto;
     width: 100%;
+    /* height: 30vw; */
 }
-.small-w{
-    vertical-align: top;
-    width: 23%;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index a2681d8..8d2ec26 100644
--- a/index.html
+++ b/index.html
@@ -34,33 +34,47 @@
 
 
     <div class="images-container">
-        <div class="half-size">
-            <img src="./images/arduino.png" alt="Arduino">
-        </div>
+        <img src="./images/arduino.png" alt="Arduino">
+        <img src="./images/esp32.png" alt="ESP32">
+        <img src="./images/institute.png" alt="Institute">
+    </div>
 
-        <div class="quarter-size">
-            <img src="./images/esp32.png" alt="ESP32">
-        </div>
+    <div class="block-border">
+        <span class="info-block-header">Embedded Systems</span>
+        <div class="block-a-container h-block">
+            <span>Had a serval projects with different MCUs and wrote firmware for them.
+                My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
+            </span>
+            <span>I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on
+                any other hardware and can work autunomously
+            </span>
+            <img src="./images/AQ_monitor.png" alt="ESP32">
+
+        </div>
+    </div>
+
+    <div class="block-border">
+        <span class="info-block-header">Embedded Systems</span>
+        <div class="block-b-container h-block">
+            <span>Had a serval projects with different MCUs and wrote firmware for them.
+                My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
+            </span>
+            <img src="./images/AQ_monitor.png" alt="ESP32">
+            <span>I love embeded development beceuse of autonomity of produced devices, the redices are not dependant on
+                any other hardware and can work autunomously
+            </span>
 
-        <div class="image-column-container">
-            <div>
-                <img src="./images/institute.png" alt="ESP32">
-            </div>
-            <div>
-                <img src="./images/arucos.png" alt="ESP32">
-            </div>
         </div>
     </div>
 
     <div class="main-block">
         <div class="main-column">
             <div class="info-block rounded bg-aqua">
-                <span class="info-block-header">Embedded Systems</span>
+
                 <span class="info-block-text">THad a serval projects with different MCUs and wrote firmware for them.
                     My main stack consists of Platformio+EspIdf or Arduino, also tried STM32
                 </span>
                 <div class="info-block-image rounded">
-                    <img src="./images/16x9/esp32.png" alt="ESP32">
                 </div>
                 <button type="button" class="info-block-button">More info»</button>
             </div>