diff --git a/images/defaultImage.png b/images/defaultImage.png
new file mode 100644
index 0000000..516331e
Binary files /dev/null and b/images/defaultImage.png differ
diff --git a/images/elektroinstalacije_slika.jpg b/images/elektroinstalacije_slika.jpg
new file mode 100644
index 0000000..7b8c360
Binary files /dev/null and b/images/elektroinstalacije_slika.jpg differ
diff --git a/images/elektroinstalacije_slika.png b/images/elektroinstalacije_slika.png
new file mode 100644
index 0000000..7990816
Binary files /dev/null and b/images/elektroinstalacije_slika.png differ
diff --git a/images/pametne_instalacije_slika.png b/images/pametne_instalacije_slika.png
new file mode 100644
index 0000000..2ff0261
Binary files /dev/null and b/images/pametne_instalacije_slika.png differ
diff --git a/images/telekomunikacije_slika.jpg b/images/telekomunikacije_slika.jpg
new file mode 100644
index 0000000..05e430a
Binary files /dev/null and b/images/telekomunikacije_slika.jpg differ
diff --git a/images/telekomunikacije_slika.png b/images/telekomunikacije_slika.png
new file mode 100644
index 0000000..76d45a0
Binary files /dev/null and b/images/telekomunikacije_slika.png differ
diff --git a/index.html b/index.html
index b747864..c7821ce 100644
--- a/index.html
+++ b/index.html
@@ -12,49 +12,47 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
 </head>
 <body>
-    <div class="header">
+    <div id="header">
         
-        <div class="header_content">
-            <div class="logo1">
-                <img  src="images/intelidom_logo_1.png"> </img>
-            </div>
-            <div class="logo2">
+        <div id="header_background_fade"></div>
+
+        <div id="logo">
                 <img  src="images/intelidom_logo_2.png"> </img>
-            </div>
-            <div class="contact">
-                <div class="contact_box">
-                    <h1>k o n t a k t</h1>
-                    <div class="contact_info_box">
-                        <img src="images/mail_icon.png" alt="">
-                        <a href="mailto:info@intelidom.si">info@intelidom.si</a>
-                    </div>
-                    <div class="contact_info_box">
-                        <img src="images/tel_icon.png" alt="">
-                        <a href="tel:+386 40 771 166">040 77 11 66</a>    
-                    </div>
-                </div>
-            </div>
         </div>
-        <div class="header_background_fade">
-            
+
+        <div id="contact">
+
+            <a id="contact_email" href="mailto:info@intelidom.si">
+                <img src="images/mail_icon.png" alt=""></img>
+                <p>info@intelidom.si</p>
+            </a>
+
+            <a id="contact_tel" href="tel:+386 40 771 166">
+                <img src="images/tel_icon.png" alt=""></img>
+                <p>040 77 11 66</p>
+            </a>
         </div>
+
     </div>
 
-    <div class="main">
-        <h1>s t o r i t v e</h1>
-        <div class="services">
-            <div class="service_box">
-                <h2>elektroinštalacije</h2>
+    <div id="main">
+        <div class="service">
+            <h2>pametne inštalacije</h2>
+            <div class="service_content">
                 <ul>
-                    <li>Napeljava električnih inštalacij</li>
-                    <li>Zamenjava dotrajanih inštalacij</li>
-                    <li>Zamenjava rezdelilnih omaric, varovalk, vtičnic in stikal</li>
-                    <li>Montaža luči</li>
+                    <li>Inštalacija in zagon <a href="https://www.loxone.com/int/">Loxone</a> sistema za pametno hišo</li>
+                    <li>Montaža in zagon domofonskih sistemov</li>
+                    <li>Odpiranje vrat na pin kodo ali kartico</li>
                 </ul>
+                <img src="images/pametne_instalacije_slika.png" alt="">
             </div>
+        </div>
+        
 
-            <div class="service_box">
-                <h2>telekomunikacije</h2>
+        <div class="service">
+            <h2>telekomunikacije</h2>
+            <div class="service_content">
+                <img src="images/telekomunikacije_slika.png" alt="">
                 <ul>
                     <li>Napeljava podatkovnih kablov za računalniška omrežja</li>
                     <li>Montaža komunikacijskih omaric</li>
@@ -62,18 +60,23 @@
                     <li>Montaža in konfiguracija WiFi dostopnih točk</li>
                 </ul>
             </div>
+        </div>
 
-            <div class="service_box">
-                <h2>pametne inštalacije</h2>
+        <div class="service">
+            <h2>elektroinštalacije</h2>
+            <div class="service_content">
                 <ul>
-                    <li>Montaža in zagon domofonskih sistemov</li>
-                    <li>Odpiranje vrat na pin kodo ali kartico</li>
+                    <li>Napeljava električnih inštalacij</li>
+                    <li>Zamenjava dotrajanih inštalacij</li>
+                    <li>Zamenjava rezdelilnih omaric, varovalk, vtičnic in stikal</li>
+                    <li>Montaža luči</li>
                 </ul>
+                <img src="images/elektroinstalacije_slika.png" alt="">
             </div>
         </div>
     </div>
 
-    <div class="footer">
+    <div id="footer">
         <p>2025 Intelidom d.o.o.</p>
     </div>
 </body>
diff --git a/style.css b/style.css
index dc42f1d..a34a768 100644
--- a/style.css
+++ b/style.css
@@ -1,246 +1,209 @@
-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2em;
-
+body{
     background-color: black;
-
-    padding: 0%;
-    margin: 0%;
-
-    color: rgba(255, 255, 255, 1);
+    color: white;
 
     font-family: "Roboto Condensed", serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
-}
 
-h1 {
-    text-transform:uppercase;
-    font-size: 3em;
-    margin: 0%;
-}
-
-h2 {
-    text-transform:uppercase;
-    font-size: 1.7em;
-    margin: 0 0 1em 0;
-    text-align: center;
-}
-
-a {
-    text-decoration: none;
-    color: rgba(255, 255, 255, 1);
-    font-size: 1.5em;
-}
-
-a:hover {
-    color: rgba(200, 200, 200, 1);
-}
-
-.header {
     width: 100%;
-    height: auto;
+    height: 100%;
+
+    padding: 0%;
+    margin: 0%;
 
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 5em;
+}
 
+/*  HEADER  */
+
+#header{
+
+    height: 5em;
+    position: relative;
+    width: 100%;
+    
     background-image: linear-gradient(to right, rgba(87,230,74,0.4), rgba(52,178,249,0.4));
 }
 
-.header_content {
-    width: 1200px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
-}
-
-.header_background_fade {
-    position: relative;
-    bottom: 0;
-    background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(255, 255, 255, 0));
-    width: 100%;
-    height: 15em;
-}
-
-.logo1 {
-    display: block;
-    position:relative;
-    visibility: visible;
-    padding: 2em;
-    filter: drop-shadow(5px 5px 5px #222);
-}
-
-.logo1 > img {
-    width: 500px;
-}
-
-.logo2 {
-    display: none;
+#logo{
     position: absolute;
-    visibility: hidden;
-}
-
-.contact {
+    width: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 }
 
-.contact_box {
-    background-color: rgba(0,0,0,0.5);
-    padding: 3em;
-    border-radius: 2em;
+#logo>img {
+     
     width: 20em;
-    height: 20em;
+
+    padding-top: 1em;
+}
+
+#header_background_fade{
+    position: absolute;
+    width: 100%;
+    height: 5em;
+    background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(255, 255, 255, 0));
+}
+
+#contact{
+    position: absolute;
+    width: 12em;
 
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 2em;
+    margin: 1em;
+    gap: 1em;
+
+    right: 0em;
 }
 
-.contact_info_box {
-    width: auto;
-    
-    margin-top: 2em;
+#contact_email, #contact_tel{
+    font-size: 1em;
+    padding: 0.1em;
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 1em;
+    color: white;
+    text-decoration: none;
+    transition-duration: 0.2s;
 }
 
-.contact_info_box > img {
-    width: 3em;
+#contact_email:hover{
+    cursor:pointer;
+    color: #57E64A;
+    font-size: 1.1em;
+    transition-duration: 0.2s;
+    text-shadow: 0 0 5px black;
 }
 
-.main {
-    width: 1200px;
+#contact_tel:hover{
+    cursor:pointer;
+    color: #34B2F9;
+    font-size: 1.1em;
+    transition-duration: 0.2s;
+    text-shadow: 0 0 5px black;
+}
+
+#contact_email > img, #contact_tel > img{
+    width: 1.5em;
+    height: 1.5em;
+}
+
+#contact_email > p, #contact_tel > p{
+    margin: 0%;
+}
+
+/*  MAIN  */
+
+#main{
+
+    width: 60em;
+
+    display: flex;
+    flex-direction: column;
+    gap: 3em;
+    justify-content: center;
+    align-items: center;
+}
+
+.service{
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1em;
 }
 
-.services{
-    display: flex;
-    width: 100%;
-    gap: 2em;
-    justify-content: space-around;
+.service>h2{
+    font-size: 2em;
+    text-transform:uppercase
 }
 
-.service_box {
+.service_content{
+
     display: flex;
-    flex-direction: column;
-    background-color: rgba(25, 28, 31, 0.5);
+    flex-direction: row;
+    justify-content: center;
+    gap: 5em;
+}
+
+.service_content>ul{
+    width: 40%;
+    font-size: 1.25em;
+}
+
+.service_content>img{
+    width: 40%;
     border-radius: 2em;
-    padding: 2em;
-    width: 25%;
 }
 
-.service_box > ul > li {
-    margin-bottom: 1em;
+.service_content>ul>li>a{
+    text-decoration: none;
+    font-weight: bold;
+    color: rgb(66, 175, 56);
 }
 
-.footer {
+/*  FOOTER  */
+
+#footer{
     background-color: rgba(25, 28, 31, 0.5);
+    width: 100%;
     text-align: center;
     padding-top: 5em;
     margin-top: 5em;
-    width: 100%;
 }
 
 @media (max-width: 1000px) {
 
-    html{
-        width: 100%;
-        padding: 0%;
-        margin: 0%;
+    .service_content>img{
+
+        position: absolute;
+        z-index: -1;
+        visibility: hidden;
     }
 
-    body {
-        width: auto;
-        padding: 0;
-        margin: 0;
-    }
+    #header{
 
-    h1 {
-        font-size: 2.5em;
-    }
-
-    .header{
-        align-items: center;
-        width: 100%;
-    }
-
-    .header_content {
-        width: 100%;
+        display: flex;
+        height: auto;
         flex-direction: column;
         align-items: center;
+    }
+
+    #contact{
+        position: relative;
+        flex-direction: row;
+        width: 100%;
         justify-content: center;
     }
 
-    .logo1 {
+    #logo{
+        position: relative;
+        
+    }
+
+    #logo>img{
+        width: 90%;
+    }
+
+    #header_background_fade{
         position: absolute;
-        visibility: hidden;
-        display: none;
-        width: 0;
-        height: 0;
+        width: 100%;
+        height: 100%;
+        background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(255, 255, 255, 0));
     }
 
-    .logo2 {
-        display: block;
-        position:relative;
-        visibility: visible;
-        padding: 2em 0;
-        width: 90%;
-        filter: drop-shadow(5px 5px 5px #222);
-    }
-    
-    .logo2 > img {
-       width: 100%;
-    }
-
-    .contact {
+    #main{
         width: 100%;
     }
 
-    .contact_box {
-        margin: 3em;
-        padding: 2em;
-        padding-bottom: 4em;
-        width: 70%;
-        height: auto;
+    .service_content>ul{
+        width: 80%;
     }
-
-    .contact_info_box {
-        padding: 0;
-    }
-
-    .contact_info_box > img {
-        width: 2em;
-    }
-
-    .main{
-        width: 100%;
-    }
-
-    .services{
-        display: flex;
-        flex-direction: column;
-        width: 90%;
-        gap: 2em;
-        justify-content: space-around;
-        align-items: center;
-    }
-
-    .service_box {
-        width: auto;
-    }
-    
 }
\ No newline at end of file
