diff --git a/aydinlatma.html b/aydinlatma.html
index 5b38684..34929ce 100644
--- a/aydinlatma.html
+++ b/aydinlatma.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
     <meta name="description" content="Kişisel Verilerin Korunması Kanunu hakkında aydınlatma metni.">
-    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
     <title>KVKK Aydınlatma Metni | Uğur Galeri</title>
+    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
     <script src="resources/scripts/main.js" defer></script>
 </head>
 <body>
@@ -31,14 +31,12 @@
         <a class="nav-item" href="iletisim.html">İletişim</a>
     </nav>
 
-    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()">
-    <label for="toggle" id="toggle-label">
-        <div class="dropdown-toggle">
-            <span class="bar bar1"></span>
-            <span class="bar bar2"></span>
-            <span class="bar bar3"></span>
-            <span class="bar bar4"></span>
-        </div>
+    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
+    <label for="toggle" id="toggle-label" class="dropdown-toggle">
+        <span class="bar bar1"></span>
+        <span class="bar bar2"></span>
+        <span class="bar bar3"></span>
+        <span class="bar bar4"></span>
     </label>
 </header>
 <nav class="dropdown hidden dropdown-navbar">
@@ -697,6 +695,7 @@
             </a>
         </section>
     </main>
+    <button id="scroll-to-top" onclick="scrollToTop()"><img src="resources/img/scroll-to-top.svg" alt="Scroll to top"></button>
     <footer id="footer" class="content-spacing">
         <img id="small-logo" src="resources/img/Uğur%20Galeri/footer-white.png" alt="Uğur Galeri U logosu">
         <div class="footer-columns">
diff --git a/hakkimizda.html b/hakkimizda.html
index 5d45614..007d646 100644
--- a/hakkimizda.html
+++ b/hakkimizda.html
@@ -2,10 +2,93 @@
 <html lang="tr">
 <head>
     <meta charset="UTF-8">
-    <link type="text/css" rel="stylesheet" href="styles/main.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="description" content="TODO">
     <title>Hakkımızda | Uğur Galeri</title>
+    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
+    <script src="resources/scripts/main.js" defer></script>
 </head>
 <body>
+<header id="header">
+    <div id="logo" class="bounce-animation">
+        <span style="--i: 1;">U</span>
+        <span style="--i: 2;">Ğ</span>
+        <span style="--i: 3;">U</span>
+        <span style="--i: 4;">R</span>
+        <span style="--i: 4;">&nbsp;</span>
+        <span style="--i: 5;">G</span>
+        <span style="--i: 6;">A</span>
+        <span style="--i: 7;">L</span>
+        <span style="--i: 8;">E</span>
+        <span style="--i: 9;">R</span>
+        <span style="--i: 10;">İ</span>
+    </div>
+    <nav class="navbar">
+        <a class="nav-item" href="index.html">Ana sayfa</a>
+        <a class="nav-item" href="#">Hakkımızda</a>
+        <a class="nav-item" href="index.html#brands">Markalar</a>
+        <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">
+        <span class="bar bar1"></span>
+        <span class="bar bar2"></span>
+        <span class="bar bar3"></span>
+        <span class="bar bar4"></span>
+    </label>
+</header>
+<nav class="dropdown hidden dropdown-navbar">
+    <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
+    <a class="dropdown-nav-item hidden" href="#">Hakkımızda</a>
+    <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
+    <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
+</nav>
+<div id="container">
+    <main id="content">
+        <section id="video" class="content-spacing">
+            <h1>Tanıtım Videomuzu izleyin:</h1>
+            <video src="../../Downloads/LC1_EoLA/Abstract%20vector%20spaces%20-%20Chapter%2016.mp4" controls>Tarayıcınız burada video gösterilmesine izin vermiyor.</video>
+        </section>
+        <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="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>
+    <footer id="footer" class="content-spacing">
+        <img id="small-logo" src="resources/img/Uğur%20Galeri/footer-white.png" alt="Uğur Galeri U logosu">
+        <div class="footer-columns">
+            <div class="footer-column">
+                <h1>Uğur Galeri</h1>
+                <ul>
+                    <li><a href="index.html">Ana sayfa</a></li>
+                    <li><a href="#">Hakkımızda</a></li>
+                    <li><a href="index.html#brands">Markalarımız</a></li>
+                    <li><a href="https://ugurgaleri1.sahibinden.com">Araçlarımız</a></li>
+                    <li><a href="iletisim.html">İletişim</a></li>
+                </ul>
+            </div>
+            <div class="footer-column">
+                <h1>Kurumsal</h1>
+                <ul>
+                    <li><a href="#misyon">Misyonumuz</a></li>
+                    <li><a href="#vizyon">Vizyonumuz</a></li>
+                    <li><a href="#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>
+            </div>
+        </div>
+    </footer>
+    <footer id="footer-stateless" class="content-spacing ignore-vertical">
+        <p>&copy; Uğur Galeri 2022</p>
+        <p class="smaller">Dizayn & Uygulama: <a href="https://fybx.dev">fybx.dev</a></p>
+    </footer>
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/iletisim.html b/iletisim.html
index 69633be..d379380 100644
--- a/iletisim.html
+++ b/iletisim.html
@@ -2,8 +2,11 @@
 <html lang="tr">
 <head>
     <meta charset="UTF-8">
-    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="description" content="TODO">
     <title>İletişim | Uğur Galeri</title>
+    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
+    <script src="resources/scripts/main.js" defer></script>
 </head>
 <body>
 <header id="header">
@@ -28,14 +31,12 @@
         <a class="nav-item" href="#">İletişim</a>
     </nav>
 
-    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()">
-    <label for="toggle" id="toggle-label">
-        <div class="dropdown-toggle">
-            <span class="bar bar1"></span>
-            <span class="bar bar2"></span>
-            <span class="bar bar3"></span>
-            <span class="bar bar4"></span>
-        </div>
+    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
+    <label for="toggle" id="toggle-label" class="dropdown-toggle">
+        <span class="bar bar1"></span>
+        <span class="bar bar2"></span>
+        <span class="bar bar3"></span>
+        <span class="bar bar4"></span>
     </label>
 </header>
 <nav class="dropdown hidden dropdown-navbar">
@@ -86,6 +87,7 @@
             </article>
         </section>
     </main>
+    <button id="scroll-to-top" onclick="scrollToTop()"><img src="resources/img/scroll-to-top.svg" alt="Scroll to top"></button>
     <footer id="footer" class="content-spacing">
         <img id="small-logo" src="resources/img/Uğur%20Galeri/footer-white.png" alt="Uğur Galeri U logosu">
         <div class="footer-columns">
diff --git a/index.html b/index.html
index 1c8ec6d..52e6016 100644
--- a/index.html
+++ b/index.html
@@ -2,12 +2,12 @@
 <html lang="tr">
 <head>
     <meta charset="UTF-8">
-    <meta content="width=device-width, initial-scale=1" name="viewport" />
-    <meta name="description" content="Uğur Galeri">
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="description" content="Uğur Galeri ve Uğur Koçak Treyler'in websitesine hoş geldiniz!">
+    <title>Ana sayfa | Uğur Galeri</title>
+    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
     <script src="resources/scripts/main.js" defer></script>
     <script src="resources/scripts/index.js" defer></script>
-    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
-    <title>Uğur Galeri</title>
 </head>
 <body>
     <header id="header">
@@ -32,14 +32,12 @@
             <a class="nav-item" href="iletisim.html">İletişim</a>
         </nav>
 
-        <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()">
-        <label for="toggle" id="toggle-label">
-            <div class="dropdown-toggle">
-                <span class="bar bar1"></span>
-                <span class="bar bar2"></span>
-                <span class="bar bar3"></span>
-                <span class="bar bar4"></span>
-            </div>
+        <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
+        <label for="toggle" id="toggle-label" class="dropdown-toggle">
+            <span class="bar bar1"></span>
+            <span class="bar bar2"></span>
+            <span class="bar bar3"></span>
+            <span class="bar bar4"></span>
         </label>
     </header>
     <nav class="dropdown hidden dropdown-navbar">
@@ -56,19 +54,19 @@
             </div>
             <div id="brands" class="table content-spacing">
                 <div class="table-item square">
-                    <img src="resources/img/ugurgaleri-utek.png">
+                    <img src="resources/img/ugurgaleri-utek.png" alt="Uğur Galeri U logosu">
                     <div class="vertical-separator"></div>
                     <div class="horizontal-separator"></div>
                     <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">
+                    <img src="resources/img/UKT/UKT.png" alt="Uğur Koçak Treyler logosu">
                     <div class="vertical-separator"></div>
                     <div class="horizontal-separator"></div>
-                    <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 <!--TODO--><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>
+                    <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">
+                    <img src="resources/img/galericilerden.com/galericilerden.jpg" alt="galericilerden.com logosu">
                     <div class="vertical-separator"></div>
                     <div class="horizontal-separator"></div>
                     <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>
@@ -83,6 +81,7 @@
                 </nav>
             </div>
         </main>
+        <button id="scroll-to-top" onclick="scrollToTop()"><img src="resources/img/scroll-to-top.svg" alt="Scroll to top"></button>
         <footer id="footer" class="content-spacing">
             <img id="small-logo" src="resources/img/Uğur%20Galeri/footer-white.png" alt="Uğur Galeri U logosu">
             <div class="footer-columns">
diff --git a/kamera.html b/kamera.html
index 548e45b..ccec26d 100644
--- a/kamera.html
+++ b/kamera.html
@@ -2,10 +2,11 @@
 <html lang="tr">
 <head>
     <meta charset="UTF-8">
-    <meta content="width=device-width, initial-scale=1" name="viewport"/>
-    <meta name="description" content="Uğur Galeri">
-    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="description" content="TODO">
     <title>Kamera Kullanımı Aydınlatma Metni | Uğur Galeri</title>
+    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
+    <script src="resources/scripts/main.js" defer></script>
 </head>
 <body>
 <header id="header">
@@ -29,14 +30,12 @@
         <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()">
-    <label for="toggle" id="toggle-label">
-        <div class="dropdown-toggle">
+    <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
+    <label for="toggle" id="toggle-label" class="dropdown-toggle">
             <span class="bar bar1"></span>
             <span class="bar bar2"></span>
             <span class="bar bar3"></span>
             <span class="bar bar4"></span>
-        </div>
     </label>
 </header>
 <nav class="dropdown hidden dropdown-navbar">
@@ -47,8 +46,8 @@
     <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
-    <main id="content" class="content-spacing">
-        <article>
+    <main id="content">
+        <article class="content-spacing">
             <h1>UĞUR KOÇAK TREYLER, MOTORLU ARAÇLAR ALIM SATIMI VE KOMİSYONCULUĞU, NAKLİYE TİCARET VE SANAYİ LİMİTED
                 ŞİRKETİNDE KAPALI DEVRE KAMERA KAYIT SİSTEMLERİ AYDINLATMA METNİ</h1>
 
@@ -108,10 +107,13 @@
                 KOMİSYONCULUĞU, NAKLİYE TİCARET VE SANAYİ LİMİTED ŞİRKETİ Kişisel Verilerin Korunması ve İşlenmesi
                 Politikası’nda belirtilen yöntemlerle iletilmesi halinde 30 (otuz) gün içerisinde değerlendirilerek
                 sonuçlandırılacaktır.</p>
-
-
         </article>
+        <section class="sec-links-to-documents content-spacing">
+            <h1>KVKK Aydınlatma Metnini okumak için <a href="aydinlatma.html">tıklayınız</a>.</h1>
+            <h1>Diğer belgelere ulaşmak için <a href="aydinlatma.html#belgeler">tıklayınız</a>.</h1>
+        </section>
     </main>
+    <button id="scroll-to-top" onclick="scrollToTop()"><img src="resources/img/scroll-to-top.svg" alt="Scroll to top"></button>
     <footer id="footer" class="content-spacing">
         <img id="small-logo" src="resources/img/Uğur%20Galeri/footer-white.png" alt="Uğur Galeri U logosu">
         <div class="footer-columns">
diff --git a/resources/css/main.scss b/resources/css/main.scss
index efc4772..d4f5761 100644
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -3,10 +3,14 @@
 @use "views/index.scss";
 @use "views/aydinlatma.scss";
 @use "views/iletisim.scss";
+@use "views/hakkimizda.scss";
+@use "views/kamera.scss";
 @use "partials/header.scss";
 @use "partials/footer.scss";
 @use "sass:math";
 
+$px_scroll-to-top_size: 50px;
+
 html, body {
   margin: 0;
   padding: 0;
@@ -55,18 +59,21 @@ html, body {
 }
 
 #header {
+  position: sticky;
+  top: 0;
+  z-index: 99;
   // Layout, details and children is set in partials/header.scss
   height: 10vh;
 
   @include mixins.header_overflow2 {
-    height: 5vh;
+    height: 45px;
   }
 }
 
 .dropdown {
   position: fixed;
   z-index: 2;
-  background: linear-gradient(to left bottom, variables.$clr_brand, #003e86);
+  background: variables.$cg_drawer;
   width: 100%;
   height: 90vh;
   -webkit-animation: drawer-open 550ms;
@@ -77,9 +84,11 @@ html, body {
   .dropdown-nav-item {
     position: relative;
     margin-top: math.div(variables.$px_horizontalPadding, 4);
-    background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
+    background: variables.$cg_drawer_navitem;
     -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    //noinspection CssInvalidPropertyValue
+    background-clip: text;
+    color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
     -webkit-animation: navbar-appear 550ms;
@@ -109,7 +118,7 @@ html, body {
   }
 
   @include mixins.header_overflow2 {
-    height: 95vh;
+    height: calc(100vh - 45px);
   }
 }
 
@@ -224,7 +233,7 @@ html, body {
 }
 
 #container {
-  height: 90vh;
+  min-height: 90vh;
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: 1fr;
@@ -232,7 +241,7 @@ html, body {
   overflow: auto;
 
   @include mixins.header_overflow2 {
-    height: 95vh;
+    min-height: calc(100vh - 45px);
   }
 }
 
@@ -243,6 +252,39 @@ html, body {
   overflow-wrap: break-word;
 }
 
+#scroll-to-top {
+  width: $px_scroll-to-top_size;
+  height: $px_scroll-to-top_size;
+  display: none;
+  position: fixed;
+  right: 25px;
+  bottom: 55px;
+  z-index: 99;
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  background-color: variables.$clr_brand;
+
+  img {
+    height: 100%;
+    width: 100%;
+    filter: invert(100%);
+  }
+
+  &:hover {
+    width: $px_scroll-to-top_size + 10;
+    height: $px_scroll-to-top_size + 10;
+    right: 20px;
+    bottom: 50px;
+    transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
+
+    img {
+      transform: translateY(-5px);
+      transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
+    }
+  }
+}
+
 #footer {
   grid-column: 1;
   grid-row: 2;
diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss
index bcad4da..ddd8326 100644
--- a/resources/css/mixins.scss
+++ b/resources/css/mixins.scss
@@ -1,4 +1,5 @@
 @use "variables.scss";
+@use "overflow";
 
 @mixin footer_overflow {
   @media screen and (max-width: variables.$footer_overflow) {
@@ -24,6 +25,12 @@
   }
 }
 
+@mixin header_overflow3 {
+  @media screen and (max-width: variables.$header_overflow3) {
+    @content;
+  }
+}
+
 @mixin mx_index_brands_fix {
   @media screen and (max-width: variables.$index_brands_fix) {
     @content;
@@ -52,4 +59,16 @@
   @media screen and (max-width: variables.$aydinlatma_documents_fix2) {
     @content;
   }
+}
+
+@mixin mx_kamera_sec-links-to-documents {
+  @media screen and (max-width: overflow.$kamera_sec_links-to-documents) {
+    @content;
+  }
+}
+
+@mixin mx_kamera_sec-links-to-documents2 {
+  @media screen and (max-width: overflow.$kamera_sec_links-to-documents2) {
+    @content;
+  }
 }
\ No newline at end of file
diff --git a/resources/css/overflow.scss b/resources/css/overflow.scss
new file mode 100644
index 0000000..c393ac2
--- /dev/null
+++ b/resources/css/overflow.scss
@@ -0,0 +1,2 @@
+$kamera_sec_links-to-documents: 1215px;
+$kamera_sec_links-to-documents2: 610px;
\ No newline at end of file
diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss
index 4033435..0906f5b 100644
--- a/resources/css/partials/header.scss
+++ b/resources/css/partials/header.scss
@@ -27,6 +27,10 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
     padding: 0 variables.$px_headerPadding2;
   }
 
+  @include mixins.header_overflow3 {
+    padding: 0 25px;
+  }
+
   #logo {
     display: flex;
     align-items: center;
@@ -89,7 +93,7 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
   }
 
   .dropdown-toggle {
-    margin: 0 auto 0;
+    margin: 0;
     width: $dropdown-toggle_l_width;
     height: $dropdown-toggle_l_width;
     position: relative;
diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index 1bb86c0..0865ebe 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -1,5 +1,6 @@
 $header_overflow: 1200px;
 $header_overflow2: 850px;
+$header_overflow3: 360px;
 $index_brands_fix: 1100px;
 $index_brands_fix2: 850px;
 $footer_overflow: 1200px;
@@ -23,6 +24,9 @@ $sz_s_footer_p: 8px;
 $clr_dark: #01003B;
 $clr_brand: #1d60b5;
 $clr_brand_gradient: linear-gradient(to left, $clr_brand, #3b8fff);
+$cg_drawer: linear-gradient(to left bottom, $clr_brand, #003e86);
+$cg_drawer_navitem: linear-gradient(#FFFFFF, #adf0ff);
+$cg_drawer_navitem2: linear-gradient(to top, #FFFFFF, #adf0ff);
 
 $clr_logo: #FDFFFF;
 $clr_header: #FDFFFF;
diff --git a/resources/css/views/hakkimizda.scss b/resources/css/views/hakkimizda.scss
new file mode 100644
index 0000000..7c757e3
--- /dev/null
+++ b/resources/css/views/hakkimizda.scss
@@ -0,0 +1,32 @@
+@use "../variables.scss";
+@use "../mixins.scss";
+
+#video {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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/index.scss b/resources/css/views/index.scss
index f697e08..a650cd9 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -70,7 +70,7 @@ $social-button_inner_margin: 10px;
       }
 
       @include mixins.mx_index_brands_fix2 {
-        margin-right: math.div(variables.$px_horizontalPadding2, 10);
+        margin-right: math.div(variables.$px_horizontalPadding3, 10);
         width: $table-item_img_width_s;
       }
 
@@ -80,6 +80,37 @@ $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);
+
+      @include mixins.mx_index_brands_fix {
+        margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
+      }
+
+      @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;
+      }
+    }
+
     &:first-of-type {
       margin-top: 0;
     }
@@ -89,40 +120,9 @@ $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);
-
-    @include mixins.mx_index_brands_fix {
-      margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
-    }
-
-    @include mixins.mx_index_brands_fix2 {
-      margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
-    }
-
-    @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;
-    }
-  }
-
   .reverse {
     // reverse is a property given to .table-item elements
-    // it contains styling for img, p and .vertical-separator elements contained under
+    // it contains styling for img and .vertical-separator elements contained under
     // a .table-item element
     flex-direction: row-reverse;
 
@@ -154,6 +154,11 @@ $social-button_inner_margin: 10px;
 
     @include mixins.mx_mobile {
       flex-direction: column;
+
+      img {
+        margin: 0 0 2px 0;
+        width: $table-item_img_width;
+      }
     }
   }
 
diff --git a/resources/css/views/kamera.scss b/resources/css/views/kamera.scss
new file mode 100644
index 0000000..ccd7057
--- /dev/null
+++ b/resources/css/views/kamera.scss
@@ -0,0 +1,54 @@
+@use "../variables";
+@use "../mixins";
+
+.sec-links-to-documents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: variables.$clr_brand_gradient;
+
+  h1 {
+    font: 500 32px "Montserrat", sans-serif;
+
+    a {
+      background: variables.$cg_drawer_navitem;
+      -webkit-background-clip: text;
+      //noinspection CssInvalidPropertyValue
+      background-clip: text;
+      color: transparent;
+      font: 700 33px "Montserrat", sans-serif;
+
+      &:hover {
+        color: black;
+      }
+
+      &:active {
+        background: variables.$cg_drawer_navitem2;
+        -webkit-background-clip: text;
+        //noinspection CssInvalidPropertyValue
+        background-clip: text;
+        color: transparent;
+      }
+    }
+
+    &:first-of-type {
+      margin: 0 0 2.5vh 0;
+    }
+
+    @include mixins.mx_kamera_sec-links-to-documents {
+      font-size: 22px;
+
+      a {
+        font-size: 23px;
+      }
+    }
+
+    @include mixins.mx_kamera_sec-links-to-documents2 {
+      font-size: 12px;
+
+      a {
+        font-size: 13px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/resources/img/scroll-to-top.svg b/resources/img/scroll-to-top.svg
new file mode 100644
index 0000000..5994eef
--- /dev/null
+++ b/resources/img/scroll-to-top.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
\ No newline at end of file
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
index 9cabc93..934c728 100644
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -1,3 +1,18 @@
+scroll_to_top = document.getElementById("scroll-to-top");
+
+window.onscroll = function () {
+    if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) {
+        scroll_to_top.style.display = "block";
+    } else {
+        scroll_to_top.style.display = "none";
+    }
+}
+
+function scrollToTop() {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+}
+
 async function sleep(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
diff --git a/resources/styles/main.css b/resources/styles/main.css
index f068ae3..836211c 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -63,7 +63,7 @@
 }
 @media screen and (max-width: 850px) {
   .table .table-item img {
-    margin-right: 10px;
+    margin-right: 2px;
     width: 60px;
   }
 }
@@ -73,45 +73,45 @@
     width: 100px;
   }
 }
-.table .table-item:first-of-type {
-  margin-top: 0;
-}
-@media screen and (max-width: 400px) {
-  .table .table-item {
-    flex-direction: column;
-  }
-}
-.table .vertical-separator {
+.table .table-item .vertical-separator {
   height: 120px;
   border: solid 1px #1d60b5;
   margin-right: 180px;
 }
 @media screen and (max-width: 1100px) {
-  .table .vertical-separator {
+  .table .table-item .vertical-separator {
     margin-right: 90px;
   }
 }
 @media screen and (max-width: 850px) {
-  .table .vertical-separator {
+  .table .table-item .vertical-separator {
     margin-right: 18px;
   }
 }
 @media screen and (max-width: 400px) {
-  .table .vertical-separator {
+  .table .table-item .vertical-separator {
     display: none;
   }
 }
-.table .horizontal-separator {
+.table .table-item .horizontal-separator {
   display: none;
   width: 120px;
   border: solid 1px #1d60b5;
   margin: 0 0 18px 0;
 }
 @media screen and (max-width: 400px) {
-  .table .horizontal-separator {
+  .table .table-item .horizontal-separator {
     display: block;
   }
 }
+.table .table-item:first-of-type {
+  margin-top: 0;
+}
+@media screen and (max-width: 400px) {
+  .table .table-item {
+    flex-direction: column;
+  }
+}
 .table .reverse {
   flex-direction: row-reverse;
 }
@@ -147,6 +147,10 @@
   .table .reverse {
     flex-direction: column;
   }
+  .table .reverse img {
+    margin: 0 0 2px 0;
+    width: 100px;
+  }
 }
 .table .square img {
   height: 150px;
@@ -377,6 +381,67 @@ a:hover {
   border: solid 1px black;
 }
 
+#video {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(to left, #1d60b5, #3b8fff);
+}
+#video video {
+  width: 100% !important;
+  height: auto !important;
+}
+#video h1 {
+  margin: 0 0 1em 0;
+  font: 600 2.5vw "Montserrat", sans-serif;
+  color: white;
+}
+
+.sec-links-to-documents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(to left, #1d60b5, #3b8fff);
+}
+.sec-links-to-documents h1 {
+  font: 500 32px "Montserrat", sans-serif;
+}
+.sec-links-to-documents h1 a {
+  background: linear-gradient(#FFFFFF, #adf0ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font: 700 33px "Montserrat", sans-serif;
+}
+.sec-links-to-documents h1 a:hover {
+  color: black;
+}
+.sec-links-to-documents h1 a:active {
+  background: linear-gradient(to top, #FFFFFF, #adf0ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.sec-links-to-documents h1:first-of-type {
+  margin: 0 0 2.5vh 0;
+}
+@media screen and (max-width: 1215px) {
+  .sec-links-to-documents h1 {
+    font-size: 22px;
+  }
+  .sec-links-to-documents h1 a {
+    font-size: 23px;
+  }
+}
+@media screen and (max-width: 610px) {
+  .sec-links-to-documents h1 {
+    font-size: 12px;
+  }
+  .sec-links-to-documents h1 a {
+    font-size: 13px;
+  }
+}
+
 #header {
   background: #FDFFFF;
   padding: 0 150px;
@@ -391,6 +456,11 @@ a:hover {
     padding: 0 50px;
   }
 }
+@media screen and (max-width: 360px) {
+  #header {
+    padding: 0 25px;
+  }
+}
 #header #logo {
   display: flex;
   align-items: center;
@@ -446,7 +516,7 @@ a:hover {
   display: none;
 }
 #header .dropdown-toggle {
-  margin: 0 auto 0;
+  margin: 0;
   width: 36px;
   height: 36px;
   position: relative;
@@ -665,11 +735,14 @@ html, body {
 }
 
 #header {
+  position: sticky;
+  top: 0;
+  z-index: 99;
   height: 10vh;
 }
 @media screen and (max-width: 850px) {
   #header {
-    height: 5vh;
+    height: 45px;
   }
 }
 
@@ -687,9 +760,10 @@ html, body {
 .dropdown .dropdown-nav-item {
   position: relative;
   margin-top: 50px;
-  background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
+  background: linear-gradient(#FFFFFF, #adf0ff);
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
   font: 600 28px "Montserrat", sans-serif;
   text-decoration: none;
   -webkit-animation: navbar-appear 550ms;
@@ -716,7 +790,7 @@ html, body {
 }
 @media screen and (max-width: 850px) {
   .dropdown {
-    height: 95vh;
+    height: calc(100vh - 45px);
   }
 }
 
@@ -819,7 +893,7 @@ html, body {
   }
 }
 #container {
-  height: 90vh;
+  min-height: 90vh;
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: 1fr;
@@ -828,7 +902,7 @@ html, body {
 }
 @media screen and (max-width: 850px) {
   #container {
-    height: 95vh;
+    min-height: calc(100vh - 45px);
   }
 }
 
@@ -839,6 +913,36 @@ html, body {
   overflow-wrap: break-word;
 }
 
+#scroll-to-top {
+  width: 50px;
+  height: 50px;
+  display: none;
+  position: fixed;
+  right: 25px;
+  bottom: 55px;
+  z-index: 99;
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  background-color: #1d60b5;
+}
+#scroll-to-top img {
+  height: 100%;
+  width: 100%;
+  filter: invert(100%);
+}
+#scroll-to-top:hover {
+  width: 60px;
+  height: 60px;
+  right: 20px;
+  bottom: 50px;
+  transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
+}
+#scroll-to-top:hover img {
+  transform: translateY(-5px);
+  transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
+}
+
 #footer {
   grid-column: 1;
   grid-row: 2;
diff --git a/scaffolding/header.brick b/scaffolding/header.brick
index ae3d1d5..60d8fb1 100644
--- a/scaffolding/header.brick
+++ b/scaffolding/header.brick
@@ -15,12 +15,12 @@
         <nav class="navbar">
             <a class="nav-item" href="index.html">Ana sayfa</a>
             <a class="nav-item" href="hakkimizda.html">Hakkımızda</a>
-            <a class="nav-item" href="#brands">Markalar</a>
+            <a class="nav-item" href="index.html#brands">Markalar</a>
             <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()">
+        <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
         <label for="toggle" id="toggle-label">
             <div class="dropdown-toggle">
                 <span class="bar bar1"></span>
@@ -33,7 +33,7 @@
     <nav class="dropdown hidden dropdown-navbar">
         <a class="dropdown-nav-item hidden" href="index.html">Ana sayfa</a>
         <a class="dropdown-nav-item hidden" href="hakkimizda.html">Hakkımızda</a>
-        <a class="dropdown-nav-item hidden" href="#brands">Markalar</a>
+        <a class="dropdown-nav-item hidden" href="index.html#brands">Markalar</a>
         <a class="dropdown-nav-item hidden" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
         <a class="dropdown-nav-item hidden" href="iletisim.html">İletişim</a>
     </nav>
\ No newline at end of file
