diff --git a/css/style.css b/css/style.css
index ba83dbd..a474188 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,20 +1,25 @@
 html    {
-    background-color: rgb(13, 26, 44);
-    color: antiquewhite;
-}
+    background-color: #2D132C;
+    color: #EE4540;
+    font-family: "JetBrains Mono", monospace;
+    font-optical-sizing: auto;
+    font-weight: 300;
+    font-style: normal;;}
+    
+h1,h2,h3,h4,h5,h6 {color:#e5ff00;}
 
 #WIP    {
-    color: rgb(255, 255, 255);
     text-align: center;
     margin: 0;
-    background-color: black;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    position: inherit;
+    background-color: rgba(0, 0, 0, 0.692);
+    position: fixed;
+    width: 100%;
 }
 .page-container {
+    padding-top: 70px; /*DOČASNÝ KVŮLI WIP BARU PŘI LOADU ABY NEZAKRÝVAL PFP*/
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
-    grid-template-rows: 0.5fr 1fr 1fr 2fr 0.5fr;
+    grid-template-rows: 0.5fr 0.5fr 0.5fr 2fr 0.5fr;
     gap: 30px 0px; 
     grid-auto-flow: row;
     grid-template-areas:
@@ -28,14 +33,16 @@ html    {
     grid-area: name;
     text-align: center;
     margin-right: 150px;
-    margin-left: 150px;
-    font-family:monospace;}
+    margin-left: 150px;}
 
 .name h1 {
     font-size: 40px;
     font-weight: 1000;
     text-transform: uppercase;}
 
+.name h2 {color:#EE4540;}
+.name h3 {color:#801336;}
+
 .profile-pic {
     float: left;}
 
@@ -44,16 +51,13 @@ html    {
     text-align: center;
     margin-left: 15%;
     margin-right: 15%;
-    font-family: monospace;
     font-size: larger;
     text-align: justify;}
 
 
 .about-me h2 {
     text-align: center;
-    font-family: monospace;
-    text-transform: uppercase;
-}
+    text-transform: uppercase;}
 
 .skills {
     grid-area: skills;
@@ -62,56 +66,67 @@ html    {
     flex-wrap: wrap;
     justify-content: space-evenly;
     align-items: baseline;
-    font-family: monospace;
-    font-size: larger;
-}
+    font-size: larger;}
+
+.dev-skills > label, .other-skills > label {
+    margin-bottom: 5px;
+    margin-top: 15px;}
 
 .skills h3 {
-    text-transform: uppercase;
-}
+    text-transform: uppercase;}
 
 progress {
-    border-radius: 10px;
-  }
+    border-radius: 10px;}
   
   progress::-webkit-progress-bar {
-    background-color: #151625f1;
-    border-radius: 10px;
-  }
+    background-color: #801336;
+    border-radius: 10px;}
   
   progress::-webkit-progress-value {
-    background-color: #78fff8;
-    border-radius: 10px;
-  }
+    background-color: #e5ff00;
+    border-radius: 10px;}
   
   progress::-moz-progress-bar {
     background-color: #78fff8;
-    border-radius: 10px;
-  }
+    border-radius: 10px;}
 
 .dev-skills {
     display: grid;
     justify-items: center;
-    align-content:center ;
-}
+    align-content:center ;}
 
 .other-skills {
     display: grid;
     justify-items: center;
-    align-content:center ;
-}
-
-.my-projects {
-    grid-area: my-projects;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 20px 20px;}
+    align-content:center ;}
 
+    .my-projects {
+        grid-area: my-projects;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap; /* Allow projects to wrap if needed */
+        justify-content: center; /* Center the projects */
+        align-items: flex-start; /* Align the top of each project */
+        gap: 20px; /* Add some space between the projects */
+        width: 100%; /* Make sure the container uses full width */
+    }
+    
+    .project {
+        width: 300px; /* Fixed width */
+        display: flex;
+        flex-direction: column; /* Align the content inside the project vertically */
+        flex-grow: 0; /* Prevent growing */
+        flex-shrink: 0; /* Prevent shrinking */
+        align-self: auto;
+        order: 0;
+        text-align: center; /* Center text and content inside project */
+    }
+.project img {
+    width: 300px;}
+ 
 .get-in-touch {
     display: inline-flex;
     grid-area: get-in-touch;
     flex-direction: row;
     justify-content: space-evenly;
-    align-items: center;
-}
+    align-items: center;}
diff --git a/index.html b/index.html
index e08845f..5013d72 100644
--- a/index.html
+++ b/index.html
@@ -6,10 +6,13 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <html lang="en">
         <title>[WIP] @davehornik - My Resume</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="css/style.css">
     </head>
     <body>
@@ -17,7 +20,7 @@
             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
         <section id="WIP">
-            <h1 style="margin-top: 0;">❤️ Work in progress ❤️</h1>
+            <h1 style="margin: 0; color: rgb(0, 255, 157)";>⚠️ WORK IN PROGRESS ⚠️</h1>
         </section>
         <div class="page-container">
             <div class="name">
@@ -36,41 +39,41 @@ <h2>About Me</h2>
             <div class="skills">
                 <div class="dev-skills">
                     <h3>Programming Skills</h3>
-                    <label for="file">HTML5:</label>
-                    <progress id="file" max="100" value="70">70%</progress>
-                    <label for="file">CSS3:</label>
-                    <progress id="file" max="100" value="30">30%</progress>
-                    <label for="file">JavaScript:</label>
-                    <progress id="file" max="100" value="15">15%</progress>
-                    <label for="file">Python:</label>
-                    <progress id="file" max="100" value="5">5%</progress>
-                    <label for="file">Node/React:</label>
-                    <progress id="file" max="100" value="3">2%</progress>
+                    <label>HTML5:</label>
+                    <progress max="100" value="70">70%</progress>
+                    <label>CSS3:</label>
+                    <progress max="100" value="30">30%</progress>
+                    <label>JavaScript:</label>
+                    <progress max="100" value="15">15%</progress>
+                    <label>Python:</label>
+                    <progress max="100" value="5">5%</progress>
+                    <label>Node/React:</label>
+                    <progress max="100" value="3">2%</progress>
                 </div>
                 <div class="other-skills">
                     <h3>Other Skills</h3>
-                    <label for="file">Photoshop:</label>
-                    <progress id="file" max="100" value="65">65%</progress>
-                    <label for="file">3D Modeling:</label>
-                    <progress id="file" max="100" value="20">20%</progress>
+                    <label>Photoshop:</label>
+                    <progress max="100" value="65">65%</progress>
+                    <label>3D Modeling:</label>
+                    <progress max="100" value="20">20%</progress>
                 </div>
             </div>
 
             <div class="my-projects">
                 <div class="project">
-                    <img src="content/img/sample-square0.png" alt="" width="200px">
+                    <img class=project-sample src="content/img/sample-square0.png" alt="sample">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
                 </div>
                 <div class="project">
-                    <img src="content/img/sample-square1.png" alt="" width="200px">
+                    <img class=project-sample src="content/img/sample-square1.png" alt="sample">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
                 </div>
                 <div class="project">
-                    <img src="content/img/sample-square2.png" alt="" width="200px">
+                    <img class=project-sample src="content/img/sample-square2.png" alt="sample">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
                 </div>
                 <div class="project">
-                    <img src="content/img/sample-square3.png" alt="" width="200px">
+                    <img class=project-sample src="content/img/sample-square3.png" alt="sample">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quidem.</p>
                 </div>
             </div>