diff --git a/aydinlatma.html b/aydinlatma.html
index 34929ce..7f92613 100644
--- a/aydinlatma.html
+++ b/aydinlatma.html
@@ -31,8 +31,8 @@
         <a class="nav-item" href="iletisim.html">İletişim</a>
     </nav>
 
-    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
-    <label for="toggle" id="toggle-label" class="dropdown-toggle">
+    <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
+    <label for="toggle" id="toggle-label">
         <span class="bar bar1"></span>
         <span class="bar bar2"></span>
         <span class="bar bar3"></span>
diff --git a/hakkimizda.html b/hakkimizda.html
index 007d646..1b00348 100644
--- a/hakkimizda.html
+++ b/hakkimizda.html
@@ -31,8 +31,8 @@
         <a class="nav-item" href="iletisim.html">İletişim</a>
     </nav>
 
-    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
-    <label for="toggle" id="toggle-label" class="dropdown-toggle">
+    <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
+    <label for="toggle" id="toggle-label">
         <span class="bar bar1"></span>
         <span class="bar bar2"></span>
         <span class="bar bar3"></span>
@@ -55,8 +55,20 @@
         <section id="hikaye" class="content-spacing">
             <h1>Kuruluş Hikâyemiz</h1>
         </section>
-        <section id="misyon" class="content-spacing"></section>
-        <section id="vizyon" class="content-spacing"></section>
+        <section id="misyon" class="content-spacing">
+            <h1>Misyonumuz</h1>
+            <p>Alanında deneyimli, güler yüzlü personelimiz ve sektördeki köklü geçmişimizin getirdiği bilgi birikimi ile müşterilerimizin ihtiyaçları doğrultusunda en doğru araca ulaşmalarını sağlıyoruz. Müşterilerimiz ile ilişkilerimizi kısa süreli görmüyor, süreç boyunca ve sonrasında doğru ve eksiksiz iletişimi sağlayarak sorunlarınıza çözüm üretiyoruz.</p>
+        </section>
+        <section id="vizyon" class="content-spacing">
+            <h1>Vizyonumuz</h1>
+            <p>Profesyonel altyapısı, köklü geçmişi ve geniş bilgi birikimi ile Uğur Galeri ve Uğur Koçak Treyler olarak kurulduğumuz bölgede büyük başarılara imza atmış bulunmaktayız.</p>
+            <p>Hedeflerimiz;</p>
+            <ul>
+                <li>Ağır vasıta ve ikinci el ticari araç pazarında alım satımını ve distribütörlüğünü yaptığımız markaların ulusal ölçekte önde gelen temsilcilerinden birisi olmak.</li>
+                <li>Hizmet verdiğimiz sektörde müşterilerimizin her birinin çalışmaktan güven duyduğu ve memnun kaldığı bir şirket konumuna yükselmek.</li>
+                <li>Ulusal pazarda ve ticari sektörde standartları ve doğruları belirlemek.</li>
+            </ul>
+        </section>
         <section id="yonetim" class="content-spacing"></section>
     </main>
     <button id="scroll-to-top" onclick="scrollToTop()"><img src="resources/img/scroll-to-top.svg" alt="Scroll to top"></button>
diff --git a/iletisim.html b/iletisim.html
index d379380..4363917 100644
--- a/iletisim.html
+++ b/iletisim.html
@@ -31,8 +31,8 @@
         <a class="nav-item" href="#">İletişim</a>
     </nav>
 
-    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
-    <label for="toggle" id="toggle-label" class="dropdown-toggle">
+    <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
+    <label for="toggle" id="toggle-label">
         <span class="bar bar1"></span>
         <span class="bar bar2"></span>
         <span class="bar bar3"></span>
diff --git a/index.html b/index.html
index 7577e70..340ba55 100644
--- a/index.html
+++ b/index.html
@@ -32,8 +32,8 @@
             <a class="nav-item" href="iletisim.html">İletişim</a>
         </nav>
 
-        <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
-        <label for="toggle" id="toggle-label" class="dropdown-toggle">
+        <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
+        <label for="toggle" id="toggle-label">
             <span class="bar bar1"></span>
             <span class="bar bar2"></span>
             <span class="bar bar3"></span>
@@ -52,23 +52,23 @@
             <div class="showcase content-spacing">
                 <h1 style="color: white; font: 500 45px Montserrat, sans-serif;">Güvenilir alışverişin<br>merkezine<br>hoşgeldiniz! </h1>
             </div>
+            <!-- TODO <section class="araclar">
+                <a href="https://ugurgaleri1.sahibinden.com/">Araçlarımızı incelemek için tıklayınız.</a>
+            </section>-->
             <div id="brands" class="table content-spacing">
                 <div class="table-item square">
                     <img src="resources/img/ugurgaleri-utek.png" alt="Uğur Galeri U logosu">
-                    <div class="vertical-separator"></div>
-                    <div class="horizontal-separator"></div>
+                    <hr>
                     <p>Şirketimiz 4 Nisan 2001 tarihinde Karacabey, Bursa'da ikinci el ticari araç ve ağır vasıta satışına başlamıştır. Köklü galericilik deneyimini, satış politikalarını ve zamana ayak uyduran yenilikçi bakış açısını bünyesinde harmanlayan, sektöre yön veren ve yapmış olduğu işler ile sektördeki varlığını kanıtlamış bir firmadır. <a href="iletisim.html#information">Satın alma için tıklayınız.</a></p>
                 </div>
                 <div class="table-item reverse">
                     <img src="resources/img/UKT/UKT.png" alt="Uğur Koçak Treyler logosu">
-                    <div class="vertical-separator"></div>
-                    <div class="horizontal-separator"></div>
+                    <hr>
                     <p>Uğur Koçak Treyler, müşteri gereksinimlerine istinaden 21 Eylül 2012 tarihinde <b>sıfır araç</b> satışı yapmak için kurulmuştur. Firma Uğur Galeri yerleşkesi içerisinde distribütörlük/bayilik anlaşması yapmış olduğu ağır vasıta sektörünün treyler grubunda öncü firmalar ile çalışmakta olup müşterilerin ihtiyaçlarına en hızlı, en doğru ve en kullanışlı biçimde cevap verebilecek niteliktedir.<br>Satış yelpazesinde <b><i>Krone, Makinsan ve Otokar</i></b> firmaları yer almaktadır. <a href="iletisim.html#information">Satın alma için tıklayınız.</a></p>
                 </div>
                 <div class="table-item">
                     <img src="resources/img/galericilerden.com/galericilerden.jpg" alt="galericilerden.com logosu">
-                    <div class="vertical-separator"></div>
-                    <div class="horizontal-separator"></div>
+                    <hr>
                     <p>2018 yılında interaktif satışın müşterilerin talepleri doğrultusunda mevcut ürünlerin tanıtımı ve pazarlanması amacıyla Uğur Galeri bünyesinde e-ticaret alışveriş sitesi olarak kurulmuştur. Hedefimiz, galeri sahiplerinin güvenilir bir platformda araçlarını detaylı biçimde sunabilmeleri; müşterilerin de ihtiyaçlarına göre güvenilir ve uygun şekilde ulaşmalarını sağlamaktır.</p>
                 </div>
             </div>
@@ -98,9 +98,9 @@
                 <div class="footer-column">
                     <h1>Kurumsal</h1>
                     <ul>
-                    <li><a>Misyonumuz</a></li>
-                    <li><a>Vizyonumuz</a></li>
-                    <li><a>Yönetim</a></li>
+                    <li><a href="hakkimizda.html#misyon">Misyonumuz</a></li>
+                    <li><a href="hakkimizda.html#vizyon">Vizyonumuz</a></li>
+                    <li><a href="hakkimizda.html#yonetim">Yönetim</a></li>
                     <li><a href="aydinlatma.html">KVKK Aydınlatma Metni</a></li>
                     <li><a href="kamera.html">Kamera Kullanımı</a></li>
                     </ul>
diff --git a/kamera.html b/kamera.html
index ccec26d..cf995fd 100644
--- a/kamera.html
+++ b/kamera.html
@@ -30,8 +30,8 @@
         <a class="nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
         <a class="nav-item" href="iletisim.html">İletişim</a>
     </nav>
-    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
-    <label for="toggle" id="toggle-label" class="dropdown-toggle">
+    <input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
+    <label for="toggle" id="toggle-label">
             <span class="bar bar1"></span>
             <span class="bar bar2"></span>
             <span class="bar bar3"></span>
diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss
index ddd8326..07fdd9e 100644
--- a/resources/css/mixins.scss
+++ b/resources/css/mixins.scss
@@ -71,4 +71,22 @@
   @media screen and (max-width: overflow.$kamera_sec_links-to-documents2) {
     @content;
   }
+}
+
+@mixin mx_iletisim_sec_information {
+  @media screen and (max-width: overflow.$iletisim_sec_information) {
+    @content;
+  }
+}
+
+@mixin mx_iletisim_sec_information2 {
+  @media screen and (max-width: overflow.$iletisim_sec_information2) {
+    @content;
+  }
+}
+
+@mixin mx_iletisim_sec_information3 {
+  @media screen and (max-width: overflow.$iletisim_sec_information3) {
+    @content;
+  }
 }
\ No newline at end of file
diff --git a/resources/css/overflow.scss b/resources/css/overflow.scss
index c393ac2..e2a5d24 100644
--- a/resources/css/overflow.scss
+++ b/resources/css/overflow.scss
@@ -1,2 +1,6 @@
 $kamera_sec_links-to-documents: 1215px;
-$kamera_sec_links-to-documents2: 610px;
\ No newline at end of file
+$kamera_sec_links-to-documents2: 610px;
+
+$iletisim_sec_information: 1235px;
+$iletisim_sec_information2: 1170px;
+$iletisim_sec_information3: 490px;
\ No newline at end of file
diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss
index 0906f5b..cd98741 100644
--- a/resources/css/partials/header.scss
+++ b/resources/css/partials/header.scss
@@ -2,15 +2,15 @@
 @use "../mixins.scss";
 @use "sass:math";
 
-$dropdown-toggle_l_width_no_unit: 36;
-$dropdown-toggle_s_width_no_unit: 28;
+$toggle-label_l_width_no_unit: 36;
+$toggle-label_s_width_no_unit: 28;
 
-$dropdown-toggle_l_width: $dropdown-toggle_l_width_no_unit * 1px;
-$dropdown-toggle_l_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_l_width_no_unit, 2))) * 1px;
-$dropdown-toggle_l_second_bar: math.div($dropdown-toggle_l_width - 4, 2);
-$dropdown-toggle_s_width: $dropdown-toggle_s_width_no_unit * 1px;
-$dropdown-toggle_s_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_s_width_no_unit, 2))) * 1px;
-$dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
+$toggle-label_l_width: $toggle-label_l_width_no_unit * 1px;
+$toggle-label_l_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_l_width_no_unit, 2))) * 1px;
+$toggle-label_l_second_bar: math.div($toggle-label_l_width - 4, 2);
+$toggle-label_s_width: $toggle-label_s_width_no_unit * 1px;
+$toggle-label_s_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_s_width_no_unit, 2))) * 1px;
+$toggle-label_s_second_bar: math.div($toggle-label_s_width - 4, 2);
 
 
 #header {
@@ -92,16 +92,16 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
     display: none;
   }
 
-  .dropdown-toggle {
+  #toggle-label {
     margin: 0;
-    width: $dropdown-toggle_l_width;
-    height: $dropdown-toggle_l_width;
+    width: $toggle-label_l_width;
+    height: $toggle-label_l_width;
     position: relative;
     cursor: pointer;
 
     .bar {
       padding: 0;
-      width: $dropdown-toggle_l_width;
+      width: $toggle-label_l_width;
       height: 4px;
       background-color: variables.$clr_brand;
       display: block;
@@ -119,11 +119,11 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
     }
 
     @include mixins.header_overflow2 {
-      width: $dropdown-toggle_s_width;
-      height: $dropdown-toggle_s_width;
+      width: $toggle-label_s_width;
+      height: $toggle-label_s_width;
 
       .bar {
-        width: $dropdown-toggle_s_width;
+        width: $toggle-label_s_width;
       }
     }
   }
@@ -134,10 +134,10 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
 
   .bar2,
   .bar3 {
-    top: $dropdown-toggle_l_second_bar;
+    top: $toggle-label_l_second_bar;
 
     @include mixins.header_overflow2 {
-      top: $dropdown-toggle_s_second_bar;
+      top: $toggle-label_s_second_bar;
     }
   }
 
@@ -149,35 +149,35 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
     bottom: 0;
   }
 
-  .toggle:checked + label > .dropdown-toggle > .bar1{
+  #toggle:checked + #toggle-label > .bar1{
     transform: rotate(45deg);
     height: 3px;
-    width: $dropdown-toggle_l_cross_width;
+    width: $toggle-label_l_cross_width;
 
     @include mixins.header_overflow2 {
-      width: $dropdown-toggle_s_cross_width;
+      width: $toggle-label_s_cross_width;
     }
   }
 
-  .toggle:checked + label > .dropdown-toggle > .bar3{
+  #toggle:checked + #toggle-label > .bar3{
     transform: rotate(45deg);
     height: 3px;
     background-color: transparent;
   }
 
-  .toggle:checked + label > .dropdown-toggle > .bar2{
+  #toggle:checked + #toggle-label > .bar2{
     transform: rotate(-45deg);
     height: 3px;
     background-color: transparent;
   }
 
-  .toggle:checked + label > .dropdown-toggle > .bar4{
+  #toggle:checked + #toggle-label > .bar4{
     transform: rotate(-45deg);
     height: 3px;
-    width: $dropdown-toggle_l_cross_width;
+    width: $toggle-label_l_cross_width;
 
     @include mixins.header_overflow2 {
-      width: $dropdown-toggle_s_cross_width;
+      width: $toggle-label_s_cross_width;
     }
   }
 
diff --git a/resources/css/views/hakkimizda.scss b/resources/css/views/hakkimizda.scss
index 7c757e3..f00cf24 100644
--- a/resources/css/views/hakkimizda.scss
+++ b/resources/css/views/hakkimizda.scss
@@ -1,32 +1,34 @@
 @use "../variables.scss";
 @use "../mixins.scss";
 
+#video, #misyon, #vizyon, #hikaye, #yonetim {
+  text-align: center;
+
+  h1 {
+    margin: 0 0 1em 0;
+    font: 600 2.5vw "Montserrat", sans-serif;
+    color: black;
+  }
+
+  p {
+    font: 500 1.25vw "Montserrat", sans-serif;
+  }
+
+  ul {
+    list-style-position: inside;
+    font-size: 1vw;
+  }
+}
+
 #video {
   display: flex;
   flex-direction: column;
   align-items: center;
+  color: white;
   background: variables.$clr_brand_gradient;
 
   video {
     width: 100% !important;
     height: auto !important;
   }
-
-  h1 {
-    margin: 0 0 1em 0;
-    font: 600 2.5vw "Montserrat", sans-serif;
-    color: white;
-  }
-}
-
-#hikaye {
-
-}
-
-#misyon, #vizyon {
-
-}
-
-#yonetim {
-
 }
\ No newline at end of file
diff --git a/resources/css/views/iletisim.scss b/resources/css/views/iletisim.scss
index 694dd74..e3c04a8 100644
--- a/resources/css/views/iletisim.scss
+++ b/resources/css/views/iletisim.scss
@@ -1,18 +1,10 @@
-@use "../variables.scss";
+@use "../variables";
+@use "../mixins";
 
 h1 {
   margin: 0;
 }
 
-a {
-  text-decoration: none;
-  color: variables.$clr_nav_sleep;
-
-  &:hover {
-    color: variables.$clr_nav_active;
-  }
-}
-
 #map {
   width: calc(100vw - (100vw - 100%));
   height: auto;
@@ -28,28 +20,70 @@ a {
   font: 500 24px "Montserrat", sans-serif;
 
   .contact, .location {
+    width: 100%;
     display: flex;
+    flex: 1;
     flex-direction: column;
     align-items: flex-start;
-    width: 50%;
 
     h1 {
       font: 600 48px "Montserrat", sans-serif;
+
+      @include mixins.mx_iletisim_sec_information {
+        font-size: 40px;
+      }
+
+      @include mixins.mx_iletisim_sec_information2 {
+        font-size: 48px;
+      }
+
+      @include mixins.mx_iletisim_sec_information3 {
+        font-size: 36px;
+      }
     }
 
     h2 {
       font: 600 40px "Montserrat", sans-serif;
       margin: 0.5em 0 0 0;
+
+      @include mixins.mx_iletisim_sec_information {
+        font-size: 32px;
+      }
+
+      @include mixins.mx_iletisim_sec_information2 {
+        font-size: 40px;
+      }
+
+      @include mixins.mx_iletisim_sec_information3 {
+        font-size: 28px;
+      }
     }
 
     h3 {
       font: 600 32px "Montserrat", sans-serif;
       margin: 0.5em 0 0.25em 0;
+
+      @include mixins.mx_iletisim_sec_information {
+        font-size: 24px;
+      }
+
+      @include mixins.mx_iletisim_sec_information2 {
+        font-size: 32px;
+      }
+
+
+      @include mixins.mx_iletisim_sec_information3 {
+        font-size: 18px;
+      }
     }
   }
 
   .contact {
-    margin: 0 50px 0 0;
+    margin: 0 2vw 0 0;
+
+    @include mixins.mx_iletisim_sec_information2 {
+      margin: 0 0 2vh 0;
+    }
   }
 
   .click-call, .click-pm{
@@ -67,6 +101,15 @@ a {
     //noinspection CssInvalidPropertyValue
     width: -webkit-fill-available;
     border: solid 1px black;
+  }
 
+  @include mixins.mx_iletisim_sec_information2 {
+    flex-direction: column;
+    align-items: center;
+    font-size: 24px;
+  }
+
+  @include mixins.mx_iletisim_sec_information3 {
+    font-size: 16px;
   }
 }
\ No newline at end of file
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index a650cd9..9f1e8c2 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -38,6 +38,11 @@ $social-button_inner_margin: 10px;
   }
 }
 
+.araclar {
+  text-align: center;
+  font: 600 32px "Montserrat", sans-serif;
+}
+
 .table {
   display: flex;
   flex-direction: column;
@@ -46,7 +51,6 @@ $social-button_inner_margin: 10px;
     margin-top: $table-item_margin_between_items;
     display: inline-flex;
     flex-direction: row;
-    align-items: center;
 
     p {
       font: x-large sans-serif;
@@ -56,11 +60,16 @@ $social-button_inner_margin: 10px;
       }
 
       @include mixins.mx_index_brands_fix2 {
-        font-size: xx-small;
+        font-size: 18px;
+      }
+
+      @include mixins.mx_mobile {
+        font-size: 16px;
       }
     }
 
     img {
+      align-self: center;
       margin-right: math.div(variables.$px_horizontalPadding, 10);
       width: $table-item_img_width_l;
 
@@ -80,34 +89,25 @@ $social-button_inner_margin: 10px;
       }
     }
 
-    .vertical-separator {
-      // vertical-separator makes an empty div behave as a separator which aligned vertically
-      height: $table-item_img_width + 20px;
-      border: solid 1px variables.$clr_brand;
-      margin-right: 9 * math.div(variables.$px_horizontalPadding, 10);
+    hr {
+      min-height: 100%;
+      max-height: 100vh;
+      width: 5px;
+      background: variables.$clr_brand;
+      margin-right: 9 * math.div(variables.$px_horizontalPadding, 10) - 5;
 
       @include mixins.mx_index_brands_fix {
-        margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
+        margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10) - 5;
       }
 
       @include mixins.mx_index_brands_fix2 {
-        margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
+        margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10) - 5;
       }
 
       @include mixins.mx_mobile {
-        display: none;
-      }
-    }
-
-    .horizontal-separator {
-      // horizontal-separator makes an empty div behave as a separator which aligned horizontally
-      display: none;
-      width: $table-item_img_width + 20px;
-      border: solid 1px variables.$clr_brand;
-      margin: 0 0 18px 0;
-
-      @include mixins.mx_mobile {
-        display: block;
+        width: $table-item_img_width + 20px;
+        border: solid 1px variables.$clr_brand;
+        margin: 0 0 18px 0;
       }
     }
 
@@ -117,6 +117,7 @@ $social-button_inner_margin: 10px;
 
     @include mixins.mx_mobile {
       flex-direction: column;
+      align-items: center;
     }
   }
 
@@ -139,7 +140,7 @@ $social-button_inner_margin: 10px;
       }
     }
 
-    .vertical-separator {
+    hr {
       margin-right: 0;
       margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;
 
@@ -150,6 +151,10 @@ $social-button_inner_margin: 10px;
       @include mixins.mx_index_brands_fix2 {
         margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
       }
+
+      @include mixins.mx_mobile {
+        margin: 0 0 18px 0;
+      }
     }
 
     @include mixins.mx_mobile {
@@ -227,34 +232,38 @@ $social-button_inner_margin: 10px;
     margin: 30px 0;
   }
 
-  .social-button {
-    display: inline-block;
-    height: $social-button_img_width + (2 * $social-button_inner_margin);
-    width: auto;
-    border: 2px solid white;
-    border-radius: 50%;
-    margin: 0 10px 0 0;
+  nav {
+    display: flex;
 
-    img {
-      margin: 10px;
-      height: $social-button_img_width;
-      width: $social-button_img_width;
-    }
-
-    &:hover {
-      background-color: white;
+    .social-button {
+      display: inline-block;
+      height: $social-button_img_width + (2 * $social-button_inner_margin);
+      width: auto;
+      border: 2px solid white;
+      border-radius: 50%;
+      margin: 0 10px 0 0;
 
       img {
-        filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
+        margin: 10px;
+        height: $social-button_img_width;
+        width: $social-button_img_width;
       }
-    }
 
-    &:last-of-type {
-      margin: 0;
-    }
+      &:hover {
+        background-color: white;
 
-    @include mixins.mx_mobile {
-      margin: 0 0 30px 0;
+        img {
+          filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
+        }
+      }
+
+      &:last-of-type {
+        margin: 0;
+      }
+
+      @include mixins.mx_mobile {
+        margin: 0 0 30px 0;
+      }
     }
   }
 
@@ -266,5 +275,11 @@ $social-button_inner_margin: 10px;
       font-weight: 600;
       text-align: center;
     }
+
+    nav {
+      .social-button {
+        margin-right: 10px;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
index 934c728..c746052 100644
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -47,10 +47,13 @@ function hideNavitems() {
 async function toggleDropdown() {
     if (dropdown.classList.contains('hidden')) {
         showDropdown();
+        await sleep(550);
+        document.getElementById("container").style.display = "none";
         await sleep(200);
         showNavitems();
     }
     else {
+        document.getElementById("container").style.display = "grid";
         dropdown.classList.add('dropdown_close_animation');
         await sleep(550);
         dropdown.classList.remove('dropdown_close_animation');