diff --git a/index.css b/index.css
index e69de29..30d4507 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,71 @@
+/* menu part */
+.menu {
+    border-top: double 5px silver;
+    border-bottom: double 5px silver;
+    text-align: right;
+}
+
+.menu-item {
+    display: inline-block;
+    width: 8%;
+    height: 3em;
+    line-height: 3em;
+    text-align: center;
+    vertical-align: middle;
+    margin: 0 1%;
+    overflow: hidden;
+    text-overflow: ellipsis ;
+}
+
+.menu .selected {
+    color: green;
+    font-weight: bold;
+    border-left: double 5px silver;
+    border-right: double 5px silver;
+}
+
+.menu .menu-header {
+    color: green;
+    font-weight: bold;
+    float: left;
+}
+
+.menu a {
+    color: black;
+}
+
+/* 4 images part */
+.images-container{
+    width: 90%;
+    height:20%;
+    margin:auto; 
+    overflow: hidden;
+    margin: 1%;
+}
+
+.images-container .half-size{
+    float: left;
+    width: 50%;
+    height: 100%;
+}
+
+.images-container .quarter-size{
+    float: left;
+    width: 25%;
+    height: 100%;
+}
+
+.images-container .image-column-container{
+    float: left;
+    width: 25%;
+    height: 100%;
+}
+
+.images-container img{
+    width: 100%;
+    height: 100%;
+}
+
+.image-column-container div{
+    height: 50%;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a446d54..9bcedb7 100644
--- a/index.html
+++ b/index.html
@@ -6,20 +6,61 @@
     <title>
         "Portfolio"
     </title>
+    <link rel="stylesheet" href="./index.css">
 </head>
 
 <body bgcolor="#F0F8FF">
-    <details>
-        <summary>Menu</summary>
-        <ul>
-            <li><a href="./index.html"><h4>Home</h4></a></li>
-            <li><a href="./embeded_details.html">Embeded Details</a></li>
-            <li><a href="./opencv_details.html">OpenCV Details</a></li>
-            <li><a href="./photography_details.html">Photography Details</a></li>
-            <li><a href="./table.html">Table with filters (not working yet)</a></li>
-            <li><a href="./images/institute.png">Institute</a></li>
-        </ul>
-    </details>
+    <div class="menu">
+        <div class="menu-item menu-header">Portfolio Site </div>
+        <a href="./index.html">
+            <div class="menu-item selected">Home</div>
+        </a>
+        <a href="./embeded_details.html">
+            <div class="menu-item">Embeded </div>
+        </a>
+        <a href="./opencv_details.html">
+            <div class="menu-item">OpenCV </div>
+        </a>
+        <a href="./photography_details.html">
+            <div class="menu-item">Photography </div>
+        </a>
+        <a href="./table.html">
+            <div class="menu-item">Table</div>
+        </a>
+        <a href="./images/institute.png">
+            <div class="menu-item">Institute</div>
+        </a>
+    </div>
+
+    <div class="images-container">
+        <div class="half-size">
+            <img src="./images/arduino.png" alt="Arduino">
+        </div>
+
+        <div class="quarter-size">
+            <img src="./images/esp32.png" alt="ESP32">
+        </div>
+
+        <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>
+
+
+
+
+
+
+
+
+
+
+
     <h2 align="center">OkunElya's Portfolio</h2>
     <p align="center">
         <b>Q:</b> What's this site for? <br>
@@ -48,7 +89,7 @@
         My main stack consists of Platformio+EspIdf or Arduino, also tried STM32</p>
 
     <a href="https://github.com/OkunElya/Air-Quality-Monitor-Device">
-        <img src="./images/AQ_monitor.png" width="500"  alt="Air Quality Monitor Device"><br>
+        <img src="./images/AQ_monitor.png" width="500" alt="Air Quality Monitor Device"><br>
         <p><i>Click the image to check GitHub Project</i></p>
     </a>
 
@@ -70,17 +111,19 @@
     <h3>Hobbies:</h3>
     <ol>
         <li>
-            <p>Reading:<br> I love Stephen King's books , especially "<a href="./images/institute.png">Insitite</a>"</p>
+            <p>Reading:<br> I love Stephen King's books , especially "<a href="./images/institute.png">Insitite</a>"
+            </p>
         </li>
         <li>
-            <p><a href="./photography_details.html">Photography:</a><br> If I have some <i>free time</i> I may take some pictures and post them <a
-                    href="https://t.me/iTakePhotosOnTapok">here</a> </p>
+            <p><a href="./photography_details.html">Photography:</a><br> If I have some <i>free time</i> I may take
+                some pictures and post them <a href="https://t.me/iTakePhotosOnTapok">here</a> </p>
         </li>
     </ol>
     <hr width="800" align="center">
 
     <h3><a href="./table.html"> Table!!!! With Filters!!! (not working yet)</a></h3>
-<p align="right">Author: Kulesh <br>
-Group: Б9123-09.03.04</p>
+    <p align="right">Author: Kulesh <br>
+        Group: Б9123-09.03.04</p>
 </body>
+
 </html>
\ No newline at end of file
