diff --git a/.gitignore b/.gitignore
index 159f515..cc98649 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.idea/
 .sass-cache/
 *.css.map
 *.sass.map
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index b58b603..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
deleted file mode 100644
index 0b8278f..0000000
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ /dev/null
@@ -1,22 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myCustomPropertiesEnabled" value="true" />
-      <option name="myIgnoreVendorSpecificProperties" value="false" />
-      <option name="myCustomPropertiesList">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="transform" />
-          </list>
-        </value>
-      </option>
-    </inspection_tool>
-    <inspection_tool class="LanguageDetectionInspection" enabled="true" level="TYPO" enabled_by_default="true" />
-    <inspection_tool class="SpellCheckingInspection" enabled="true" level="INFORMATION" enabled_by_default="true">
-      <option name="processCode" value="true" />
-      <option name="processLiterals" value="true" />
-      <option name="processComments" value="true" />
-    </inspection_tool>
-  </profile>
-</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index 6f1069a..0000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/ugurgaleri.iml" filepath="$PROJECT_DIR$/.idea/ugurgaleri.iml" />
-    </modules>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/ugurgaleri.iml b/.idea/ugurgaleri.iml
deleted file mode 100644
index 0c8867d..0000000
--- a/.idea/ugurgaleri.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 94a25f7..0000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
deleted file mode 100644
index fb0d65a..0000000
--- a/.idea/watcherTasks.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
-</project>
\ No newline at end of file
diff --git a/aydinlatma.html b/aydinlatma.html
index eabb46d..57e3df9 100644
--- a/aydinlatma.html
+++ b/aydinlatma.html
@@ -39,12 +39,12 @@
         <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="hakkimizda.html">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 id="drawer">
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">
@@ -720,8 +720,8 @@
                 <ul>
                     <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="galeri.html">Fotoğraf Galerisi</a></li>
+                    <li><a href="#">Aydınlatma Metni</a></li>
                     <li><a href="kamera.html">Kamera Kullanımı</a></li>
                 </ul>
             </div>
diff --git a/galeri.html b/galeri.html
index 8131cdf..eca31c5 100644
--- a/galeri.html
+++ b/galeri.html
@@ -43,12 +43,12 @@
         <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="hakkimizda.html">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 id="drawer">
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">
@@ -68,11 +68,9 @@
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0420.JPG" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0422.JPG" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0423.JPG" alt="Fotoğraf" loading="lazy"></div>
-            <div class="photo-container"><img class="photo" src="resources/img/galeri/0423.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0424.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0426.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0429.jpg" alt="Fotoğraf" loading="lazy"></div>
-            <div class="photo-container"><img class="photo" src="resources/img/galeri/0436.JPG" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0438.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0863.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/0866.JPG" alt="Fotoğraf" loading="lazy"></div>
@@ -89,7 +87,6 @@
             <div class="photo-container"><img class="photo" src="resources/img/galeri/7843.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/7850.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/7851.JPG" alt="Fotoğraf" loading="lazy"></div>
-            <div class="photo-container"><img class="photo" src="resources/img/galeri/7880.JPG" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/7881.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/7891.jpg" alt="Fotoğraf" loading="lazy"></div>
             <div class="photo-container"><img class="photo" src="resources/img/galeri/7893.jpg" alt="Fotoğraf" loading="lazy"></div>
@@ -120,8 +117,8 @@
                 <ul>
                     <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="#">Fotoğraf Galerisi</a></li>
+                    <li><a href="aydinlatma.html">Aydınlatma Metni</a></li>
                     <li><a href="kamera.html">Kamera Kullanımı</a></li>
                 </ul>
             </div>
diff --git a/hakkimizda.html b/hakkimizda.html
index ed9d7bf..e1850ab 100644
--- a/hakkimizda.html
+++ b/hakkimizda.html
@@ -39,12 +39,12 @@
         <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 id="drawer">
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="#">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">
@@ -53,24 +53,31 @@
             <video src="" controls>Tarayıcınız burada video gösterilmesine izin vermiyor.</video>
         </section>-->
         <section id="hikaye" class="content-spacing">
-            <h1>Kuruluş Hikâyemiz</h1>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum, dolores impedit itaque iure, nemo nesciunt nobis quos rem repudiandae sint suscipit? Accusamus accusantium adipisci aspernatur beatae blanditiis cupiditate dolore enim et eveniet ex fuga id ipsam itaque, iure labore laborum, magni molestiae nihil nulla quis quisquam sequi sunt tempore unde velit veniam vero. Accusantium alias aperiam aut delectus deserunt eius enim et explicabo facilis fugiat fugit harum itaque iusto laboriosam libero, minima molestias nulla optio praesentium, qui quod tempore tenetur voluptates. Amet aut blanditiis cumque, deleniti deserunt dolore eligendi, enim eum incidunt magni neque nobis omnis pariatur quas reiciendis repudiandae totam vero. Ad asperiores aspernatur culpa dolor et in ipsa ipsum iste itaque, maiores nemo numquam odio odit officia perspiciatis quas quasi quia, quidem repellendus repudiandae, tempora ut vel? Animi asperiores, cumque dignissimos error excepturi inventore itaque laudantium maxime minima officia quas rem repellat sed similique velit vitae voluptatibus!</p>
+            <h1 class="heading">Kuruluş Hikâyemiz</h1>
+            <section>
+                <section class="text-area">
+                    <p class="paragraph">Kurucumuz Uğur Koçak 1966 yılında Nevşehir'in Ürgüp ilçesinde 12 çocuklu bir ailenin ferdi olarak dünyaya geldi. Dönemin ekonomik koşulları gereği küçük yaşta çalışma hayatına atılan Uğur Koçak, ağır vasıta sektörünün ilişkili olduğu işler yaptıktan sonra yirmili yaşlarında Nevşehir'de galericilik mesleğine adım atmıştır. Otuzlu yaşlarında Balıkesir'e gelerek meslekte deneyimini arttırdıktan sonra kendi galerisini kurmak üzere potansiyelini hissettiği ve eksikliğini gördüğü Bursa'nın Karacabey ilçesine gelerek 1996 yılında hâlen aynı mevkide hizmet veren galerisinin kuruluşunu gerçekleştirmiştir. Bugün Güney Marmara'nın İstanbul - İzmir - Çanakkale - Bursa yollarının kesişim noktasında bulunan, 35 dönum arazi üzerinde Türkiye'nin en büyük galerilerinden biri haline getirmiştir.</p>
+                    <p class="paragraph">Uğur Koçak 2 evlat babası olup, şirketin fiili yönetimini 2018 yılı itibariyle yurt içi ve yurt dışı eğitimleri tamamlayarak gelen iki kuşakta yönetimini devralan Furkan Koçak'a teslim etmiştir. Furkan Koçak vizyoner bakış açısıyla yönetimi başarıyla devam ettirmektedir.</p>
+                </section>
+                <figure>
+                    <img src="resources/img/01.JPG" alt="Uğur Koçak">
+                </figure>
+            </section>
         </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>
+            <h1 class="heading">Misyonumuz</h1>
+            <p class="paragraph">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 Türkiye ağır vasıta pazarında büyük başarılara imza atmış bulunmaktayız.</p>
-            <p>Hedeflerimiz;</p>
+            <h1 class="heading">Vizyonumuz</h1>
+            <p class="paragraph">Profesyonel altyapısı, köklü geçmişi ve geniş bilgi birikimi ile Uğur Galeri ve Uğur Koçak Treyler olarak Türkiye ağır vasıta pazarında büyük başarılara imza atmış bulunmaktayız.</p>
+            <p class="paragraph">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>
+                <li class="paragraph">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 class="paragraph">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 class="paragraph">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>
     <footer id="footer" class="content-spacing">
@@ -91,8 +98,8 @@
                 <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="galeri.html">Fotoğraf Galerisi</a></li>
+                    <li><a href="aydinlatma.html">Aydınlatma Metni</a></li>
                     <li><a href="kamera.html">Kamera Kullanımı</a></li>
                 </ul>
             </div>
diff --git a/iletisim.html b/iletisim.html
index 4363917..40a384c 100644
--- a/iletisim.html
+++ b/iletisim.html
@@ -39,12 +39,12 @@
         <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="hakkimizda.html">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="#">İletişim</a>
+<nav id="drawer">
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="#">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">
@@ -98,16 +98,16 @@
                     <li><a href="hakkimizda.html">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="">İletişim</a></li>
+                    <li><a href="#">İletişim</a></li>
                 </ul>
             </div>
             <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="aydinlatma.html">KVKK Aydınlatma Metni</a></li>
+                    <li><a href="hakkimizda.html#misyon">Misyonumuz</a></li>
+                    <li><a href="hakkimizda.html#vizyon">Vizyonumuz</a></li>
+                    <li><a href="galeri.html">Fotoğraf Galerisi</a></li>
+                    <li><a href="aydinlatma.html">Aydınlatma Metni</a></li>
                     <li><a href="kamera.html">Kamera Kullanımı</a></li>
                 </ul>
             </div>
diff --git a/index.html b/index.html
index 340ba55..675a7b0 100644
--- a/index.html
+++ b/index.html
@@ -40,36 +40,40 @@
             <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="hakkimizda.html">Hakkımızda</a>
-        <a class="dropdown-nav-item hidden" href="#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 id="drawer">
+        <a class="drawer-item" href="#">Ana sayfa</a>
+        <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+        <a class="drawer-item" href="index.html#brands">Markalar</a>
+        <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+        <a class="drawer-item" href="iletisim.html">İletişim</a>
     </nav>
     <div id="container">
         <main id="content">
-            <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">
+            <ul class="slideshow">
+                <li><span></span></li>
+                <li><span></span></li>
+                <li><span></span></li>
+                <li><span></span></li>
+                <li><span></span></li>
+            </ul>
+            <section class="araclar content-spacing-small">
                 <a href="https://ugurgaleri1.sahibinden.com/">Araçlarımızı incelemek için tıklayınız.</a>
-            </section>-->
+            </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">
                     <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>
+                    <p class="paragraph">Şirketimiz 1996 yılında 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">
                     <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>
+                    <p class="paragraph">Uğur Koçak Treyler, müşteri gereksinimlerine istinaden 2012 yılında <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">
                     <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>
+                    <p class="paragraph">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>
             <div id="social" class="social content-spacing ignore-vertical">
@@ -88,7 +92,7 @@
                 <div class="footer-column">
                     <h1>Uğur Galeri</h1>
                     <ul>
-                        <li><a href="index.html">Ana sayfa</a></li>
+                        <li><a href="#">Ana sayfa</a></li>
                         <li><a href="hakkimizda.html">Hakkımızda</a></li>
                         <li><a href="#brands">Markalarımız</a></li>
                         <li><a href="https://ugurgaleri1.sahibinden.com">Araçlarımız</a></li>
@@ -98,11 +102,11 @@
                 <div class="footer-column">
                     <h1>Kurumsal</h1>
                     <ul>
-                    <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>
+                        <li><a href="hakkimizda.html#misyon">Misyonumuz</a></li>
+                        <li><a href="hakkimizda.html#vizyon">Vizyonumuz</a></li>
+                        <li><a href="galeri.html">Fotoğraf Galerisi</a></li>
+                        <li><a href="aydinlatma.html">Aydınlatma Metni</a></li>
+                        <li><a href="kamera.html">Kamera Kullanımı</a></li>
                     </ul>
                 </div>
             </div>
diff --git a/kamera.html b/kamera.html
index cf995fd..1e1de1b 100644
--- a/kamera.html
+++ b/kamera.html
@@ -38,12 +38,12 @@
             <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="hakkimizda.html">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 id="drawer">
+    <a class="drawer-item" href="index.html">Ana sayfa</a>
+    <a class="drawer-item" href="hakkimizda.html">Hakkımızda</a>
+    <a class="drawer-item" href="index.html#brands">Markalar</a>
+    <a class="drawer-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+    <a class="drawer-item" href="iletisim.html">İletişim</a>
 </nav>
 <div id="container">
     <main id="content">
@@ -132,9 +132,9 @@
                 <ul>
                     <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>
+                    <li><a href="galeri.html">Fotoğraf Galerisi</a></li>
+                    <li><a href="aydinlatma.html">Aydınlatma Metni</a></li>
+                    <li><a href="#">Kamera Kullanımı</a></li>
                 </ul>
             </div>
         </div>
diff --git a/resources/css/keyframes.scss b/resources/css/keyframes.scss
index 37a5761..c00e48f 100644
--- a/resources/css/keyframes.scss
+++ b/resources/css/keyframes.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 @keyframes fullscreen-image-appear {
   from {
     opacity: 0;
@@ -9,4 +11,44 @@
     width: 100%;
     height: 100vh;
   }
+}
+
+@keyframes slideshow {
+  0% {
+    opacity: 0;
+    animation-timing-function: ease-in;
+  }
+  8% {
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+  17% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes important {
+  0% {
+    transform: scale(1);
+    text-shadow: black 0 0 0;
+    color: white;
+  }
+
+  50% {
+    transform: scale(1.02);
+    text-shadow: variables.$clr_dark 0 0 20px;
+    color: #FFFFFF;
+  }
+
+  100% {
+    transform: scale(1);
+    text-shadow: black 0 0 0;
+    color: white;
+  }
 }
\ No newline at end of file
diff --git a/resources/css/main.scss b/resources/css/main.scss
index 7b06610..e55b7f2 100644
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -46,6 +46,18 @@ a {
   }
 }
 
+.content-spacing-small {
+  padding: math.div(variables.$px_horizontalPadding, 4) math.div(variables.$px_horizontalPadding, 2);
+
+  @include mixins.mx_index_brands_fix {
+    padding: math.div(variables.$px_horizontalPadding2, 4) math.div(variables.$px_horizontalPadding2, 2);
+  }
+
+  @include mixins.mx_index_brands_fix2 {
+    padding: math.div(variables.$px_horizontalPadding3, 4) math.div(variables.$px_horizontalPadding3, 2);
+  }
+}
+
 .ignore-vertical {
   // ignores vertical padding applied by .content-spacing
   padding-top: 0;
@@ -73,6 +85,38 @@ a {
   }
 }
 
+.paragraph {
+  font: 500 x-large "Montserrat", sans-serif;
+
+  @include mixins.mx_index_brands_fix {
+    font-size: large;
+  }
+
+  @include mixins.mx_index_brands_fix2 {
+    font-size: 18px;
+  }
+
+  @include mixins.mx_mobile {
+    font-size: 16px;
+  }
+}
+
+.heading {
+  font: 600 50px "Montserrat", sans-serif;
+
+  @include mixins.mx_index_brands_fix {
+    font-size: 35px;
+  }
+
+  @include mixins.mx_index_brands_fix2 {
+    font-size: 25px;
+  }
+
+  @include mixins.mx_mobile {
+    font-size: 20px;
+  }
+}
+
 #header {
   position: sticky;
   top: 0;
@@ -85,19 +129,22 @@ a {
   }
 }
 
-.dropdown {
+#drawer {
   position: fixed;
+  bottom: 0;
+  right: 0;
   z-index: 2;
   background: variables.$cg_drawer;
-  width: 100%;
+  width: 0;
   height: 90vh;
-  -webkit-animation: drawer-open 550ms;
-  animation: drawer-open 550ms;
+  display: flex;
   flex-direction: column;
   align-items: center;
+  transition: width 500ms;
 
-  .dropdown-nav-item {
+  .drawer-item {
     position: relative;
+    opacity: 0;
     margin-top: math.div(variables.$px_horizontalPadding, 4);
     background: variables.$cg_drawer_navitem;
     -webkit-background-clip: text;
@@ -106,8 +153,7 @@ a {
     color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
-    -webkit-animation: navbar-appear 550ms;
-    animation: navbar-appear 550ms;
+    transition: opacity 250ms ease-in-out;
 
     &:first-of-type {
       margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -130,6 +176,15 @@ a {
       transform: scaleX(1);
       transform-origin: bottom left;
     }
+
+    &.visible {
+      opacity: 1;
+    }
+  }
+
+  &.expanded {
+    width: 100%;
+    top: unset;
   }
 
   @include mixins.header_overflow2 {
@@ -137,116 +192,6 @@ a {
   }
 }
 
-.dropdown_close_animation {
-  -webkit-animation: drawer-close 550ms;
-  animation: drawer-close 550ms;
-}
-
-.dropdown-nav-item_close_animation {
-  -webkit-animation: navbar-disappear 550ms;
-  animation: navbar-disappear 550ms;
-}
-
-@-webkit-keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@-webkit-keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@-webkit-keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@-webkit-keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
 #container {
   min-height: 90vh;
   display: grid;
@@ -258,6 +203,10 @@ a {
   @include mixins.header_overflow2 {
     min-height: calc(100vh - 45px);
   }
+
+  &.hidden {
+    display: none;
+  }
 }
 
 #content {
@@ -270,7 +219,6 @@ a {
 #scroll-to-top {
   width: $px_scroll-to-top_size;
   height: $px_scroll-to-top_size;
-  display: none;
   position: fixed;
   right: 25px;
   bottom: 55px;
@@ -279,6 +227,7 @@ a {
   border: none;
   border-radius: 50%;
   background-color: variables.$clr_brand;
+  box-shadow: white 0 0 50px -5px;
 
   img {
     height: 100%;
diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss
index 28fc41c..297e739 100644
--- a/resources/css/mixins.scss
+++ b/resources/css/mixins.scss
@@ -95,4 +95,10 @@
   @media (hover: hover) and (pointer: fine) {
     @content;
   }
+}
+
+@mixin mx_hakkimizda_text-area {
+  @media screen and (max-width: overflow.$hakkimizda_sec_text-area) {
+    @content;
+  }
 }
\ No newline at end of file
diff --git a/resources/css/overflow.scss b/resources/css/overflow.scss
index e2a5d24..f355833 100644
--- a/resources/css/overflow.scss
+++ b/resources/css/overflow.scss
@@ -3,4 +3,6 @@ $kamera_sec_links-to-documents2: 610px;
 
 $iletisim_sec_information: 1235px;
 $iletisim_sec_information2: 1170px;
-$iletisim_sec_information3: 490px;
\ No newline at end of file
+$iletisim_sec_information3: 490px;
+
+$hakkimizda_sec_text-area: 1700px;
\ No newline at end of file
diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss
index cd98741..ed37c0e 100644
--- a/resources/css/partials/header.scss
+++ b/resources/css/partials/header.scss
@@ -98,6 +98,13 @@ $toggle-label_s_second_bar: math.div($toggle-label_s_width - 4, 2);
     height: $toggle-label_l_width;
     position: relative;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
     .bar {
       padding: 0;
diff --git a/resources/css/urls.scss b/resources/css/urls.scss
index fdec645..1d6200d 100644
--- a/resources/css/urls.scss
+++ b/resources/css/urls.scss
@@ -1,2 +1,8 @@
 $index_showcase_bg_day: url("../img/index/g.jpg");
-$index_showcase_bg_night: url("../img/index/y.jpg");
\ No newline at end of file
+$index_showcase_bg_night: url("../img/index/y.jpg");
+
+$index_slide1: url("../img/galeri/9761.jpg");
+$index_slide2: url("../img/galeri/7925.jpg");
+$index_slide3: url("../img/galeri/0414.jpg");
+$index_slide4: url("../img/galeri/7815.jpg");
+$index_slide5: url("../img/galeri/0429.jpg");
\ No newline at end of file
diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index 0865ebe..0957898 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -23,10 +23,11 @@ $sz_s_footer_p: 8px;
 
 $clr_dark: #01003B;
 $clr_brand: #1d60b5;
-$clr_brand_gradient: linear-gradient(to left, $clr_brand, #3b8fff);
+$clr_brand_gradient: linear-gradient(to left, $clr_brand, #77afff);
 $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);
+$cg_brand_reverse: linear-gradient(to right, $clr_brand, #77afff);
 
 $clr_logo: #FDFFFF;
 $clr_header: #FDFFFF;
diff --git a/resources/css/views/hakkimizda.scss b/resources/css/views/hakkimizda.scss
index f00cf24..9e42922 100644
--- a/resources/css/views/hakkimizda.scss
+++ b/resources/css/views/hakkimizda.scss
@@ -6,14 +6,9 @@
 
   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;
@@ -31,4 +26,25 @@
     width: 100% !important;
     height: auto !important;
   }
+}
+
+#hikaye {
+  section {
+    display: flex;
+    align-items: center;
+
+    figure {
+      img {
+        height: 25vw;
+      }
+    }
+
+    @include mixins.mx_hakkimizda_text-area {
+      flex-direction: column-reverse;
+    }
+  }
+
+  .text-area {
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index 9f1e8c2..fcd1db6 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -1,6 +1,7 @@
 @use "../variables.scss";
 @use "../mixins.scss";
 @use "../urls.scss";
+@use "../keyframes";
 @use "sass:math";
 
 $table-item_img_width_l: 150px;
@@ -11,36 +12,77 @@ $table-item_margin_between_items: 10px;
 $social-button_img_width: 32px;
 $social-button_inner_margin: 10px;
 
-.showcase {
-  display: flex;
-  height: 90vh;
-  background-image: urls.$index_showcase_bg_day;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
+.slideshow {
+  margin: 0;
+  padding: 0;
+  height: 80vh;
+  z-index: 0;
+  list-style-type: none;
 
   @include mixins.header_overflow2 {
-    height: 95vh;
+    height: calc(100vh - 45px);
   }
-}
 
-.showcase-animation {
-  animation: slideshow-appear 1000ms;
-}
-
-@keyframes slideshow-appear {
-  from {
+  li span {
+    position: absolute;
+    width: 100%;
+    height: 80vh;
+    left: 0;
+    color: transparent;
+    background-size: cover;
+    background-position: 50% 90%;
+    background-repeat: no-repeat;
     opacity: 0;
+    z-index: 0;
+    animation: slideshow 30s linear infinite 0s;
+
+    @include mixins.header_overflow2 {
+      height: calc(100vh - 45px);
+    }
   }
 
-  to {
-    opacity: 1;
+  li:nth-child(1) span {
+    background-image: urls.$index_slide1;
+    background-position-y: 50%;
+  }
+  li:nth-child(2) span {
+    background-image: urls.$index_slide2;
+    animation-delay: 6s;
+  }
+  li:nth-child(3) span {
+    background-image: urls.$index_slide3;
+    animation-delay: 12s;
+  }
+  li:nth-child(4) span {
+    background-image: urls.$index_slide4;
+    animation-delay: 18s;
+  }
+  li:nth-child(5) span {
+    background-image: urls.$index_slide5;
+    animation-delay: 24s;
   }
 }
 
 .araclar {
+  background: variables.$clr_brand_gradient;
   text-align: center;
-  font: 600 32px "Montserrat", sans-serif;
+
+  a {
+    display: inline-block;
+    color: white;
+    font: 600 32px "Montserrat", sans-serif;
+    animation: important 2s infinite ease-in-out;
+
+    &:hover {
+      animation-play-state: paused;
+      font-style: italic;
+      color: variables.$clr_dark;
+    }
+
+    @include mixins.header_overflow2 {
+      margin: 1.5vh 1vw;
+    }
+  }
 }
 
 .table {
@@ -52,22 +94,6 @@ $social-button_inner_margin: 10px;
     display: inline-flex;
     flex-direction: row;
 
-    p {
-      font: x-large sans-serif;
-
-      @include mixins.mx_index_brands_fix {
-        font-size: large;
-      }
-
-      @include mixins.mx_index_brands_fix2 {
-        font-size: 18px;
-      }
-
-      @include mixins.mx_mobile {
-        font-size: 16px;
-      }
-    }
-
     img {
       align-self: center;
       margin-right: math.div(variables.$px_horizontalPadding, 10);
diff --git a/resources/img/01.JPG b/resources/img/01.JPG
new file mode 100755
index 0000000..f610734
Binary files /dev/null and b/resources/img/01.JPG differ
diff --git a/resources/img/galeri/0423.jpg b/resources/img/galeri/0423.jpg
deleted file mode 100644
index d291ed3..0000000
Binary files a/resources/img/galeri/0423.jpg and /dev/null differ
diff --git a/resources/img/galeri/0436.JPG b/resources/img/galeri/0436.JPG
deleted file mode 100644
index 8fc0c98..0000000
Binary files a/resources/img/galeri/0436.JPG and /dev/null differ
diff --git a/resources/img/galeri/7880.JPG b/resources/img/galeri/7880.JPG
deleted file mode 100644
index a617a6d..0000000
Binary files a/resources/img/galeri/7880.JPG and /dev/null differ
diff --git a/resources/scripts/index.js b/resources/scripts/index.js
index 5270036..cfb5c31 100644
--- a/resources/scripts/index.js
+++ b/resources/scripts/index.js
@@ -1,23 +1,3 @@
-const doSlideshow = true;
-const slideTime = 7500; // milliseconds
-const animTime = 1000; // milliseconds
-
-async function slideshow() {
-    let showcase = document.getElementsByClassName("showcase")[0];
-    while(doSlideshow) {
-        showcase.style.backgroundImage = "url(resources/img/index/g.jpg)";
-        showcase.classList.add("showcase-animation");
-        await sleep(animTime);
-        showcase.classList.remove("showcase-animation");
-        await sleep(slideTime);
-        showcase.style.backgroundImage = "url(resources/img/index/y.jpg)";
-        showcase.classList.add("showcase-animation");
-        await sleep(animTime);
-        showcase.classList.remove("showcase-animation");
-        await sleep(slideTime);
-    }
-}
-
 const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
@@ -32,6 +12,4 @@ const observer = new IntersectionObserver(entries => {
 let targets = document.querySelectorAll('.table-item');
 targets.forEach(target => {
     observer.observe(target);
-})
-
-slideshow();
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
index c746052..cc8fd0c 100644
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -1,10 +1,13 @@
-scroll_to_top = document.getElementById("scroll-to-top");
+const SCROLL_MIN = 100;
+const $scroll_to_top = document.getElementById("scroll-to-top");
+const $drawer = document.getElementById("drawer");
+const $drawer_item = document.querySelectorAll(".drawer-item");
 
-window.onscroll = function () {
-    if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) {
-        scroll_to_top.style.display = "block";
+function checkScroll() {
+    if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
+        $scroll_to_top.style.visibility = "visible";
     } else {
-        scroll_to_top.style.display = "none";
+        $scroll_to_top.style.visibility = "hidden";
     }
 }
 
@@ -17,47 +20,21 @@ async function sleep(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
-let dropdown = document.getElementsByClassName('dropdown')[0];
-let navitems = document.getElementsByClassName('dropdown-nav-item');
-
-function showDropdown() {
-    dropdown.classList.remove('hidden');
-    dropdown.classList.add('flex');
-}
-
-function hideDropdown() {
-    dropdown.classList.remove('flex');
-    dropdown.classList.add('hidden');
-}
-
-function showNavitems() {
-    for (let i = 0; i < navitems.length; i++) {
-        navitems[i].classList.remove('hidden');
-        navitems[i].classList.add('inline-block');
-    }
-}
-
-function hideNavitems() {
-    for (let i = 0; i < navitems.length; i++) {
-        navitems[i].classList.remove('inline-block');
-        navitems[i].classList.add('hidden');
-    }
-}
-
 async function toggleDropdown() {
-    if (dropdown.classList.contains('hidden')) {
-        showDropdown();
-        await sleep(550);
-        document.getElementById("container").style.display = "none";
-        await sleep(200);
-        showNavitems();
+    let expanded = $drawer.classList.contains("expanded");
+    if (expanded) {
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
+        }
+        $drawer.classList.toggle("expanded");
+    } else {
+        $drawer.classList.toggle("expanded");
+        await sleep(250);
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
+        }
     }
-    else {
-        document.getElementById("container").style.display = "grid";
-        dropdown.classList.add('dropdown_close_animation');
-        await sleep(550);
-        dropdown.classList.remove('dropdown_close_animation');
-        hideDropdown();
-        hideNavitems();
-    }
-}
\ No newline at end of file
+}
+
+window.addEventListener('load', checkScroll);
+window.addEventListener('scroll', checkScroll);
\ No newline at end of file
diff --git a/resources/styles/main.css b/resources/styles/main.css
index 2fbc836..2ce6453 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -2,35 +2,123 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
-.showcase {
-  display: flex;
-  height: 90vh;
-  background-image: url("../img/index/g.jpg");
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-@media screen and (max-width: 850px) {
-  .showcase {
-    height: 95vh;
-  }
-}
-
-.showcase-animation {
-  animation: slideshow-appear 1000ms;
-}
-
-@keyframes slideshow-appear {
+@keyframes fullscreen-image-appear {
   from {
     opacity: 0;
+    width: 0;
+    height: 0;
   }
   to {
-    opacity: 1;
+    width: 100%;
+    height: 100vh;
   }
 }
+@keyframes slideshow {
+  0% {
+    opacity: 0;
+    animation-timing-function: ease-in;
+  }
+  8% {
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+  17% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes important {
+  0% {
+    transform: scale(1);
+    text-shadow: black 0 0 0;
+    color: white;
+  }
+  50% {
+    transform: scale(1.02);
+    text-shadow: #01003B 0 0 20px;
+    color: #FFFFFF;
+  }
+  100% {
+    transform: scale(1);
+    text-shadow: black 0 0 0;
+    color: white;
+  }
+}
+.slideshow {
+  margin: 0;
+  padding: 0;
+  height: 80vh;
+  z-index: 0;
+  list-style-type: none;
+}
+@media screen and (max-width: 850px) {
+  .slideshow {
+    height: calc(100vh - 45px);
+  }
+}
+.slideshow li span {
+  position: absolute;
+  width: 100%;
+  height: 80vh;
+  left: 0;
+  color: transparent;
+  background-size: cover;
+  background-position: 50% 90%;
+  background-repeat: no-repeat;
+  opacity: 0;
+  z-index: 0;
+  animation: slideshow 30s linear infinite 0s;
+}
+@media screen and (max-width: 850px) {
+  .slideshow li span {
+    height: calc(100vh - 45px);
+  }
+}
+.slideshow li:nth-child(1) span {
+  background-image: url("../img/galeri/9761.jpg");
+  background-position-y: 50%;
+}
+.slideshow li:nth-child(2) span {
+  background-image: url("../img/galeri/7925.jpg");
+  animation-delay: 6s;
+}
+.slideshow li:nth-child(3) span {
+  background-image: url("../img/galeri/0414.jpg");
+  animation-delay: 12s;
+}
+.slideshow li:nth-child(4) span {
+  background-image: url("../img/galeri/7815.jpg");
+  animation-delay: 18s;
+}
+.slideshow li:nth-child(5) span {
+  background-image: url("../img/galeri/0429.jpg");
+  animation-delay: 24s;
+}
+
 .araclar {
+  background: linear-gradient(to left, #1d60b5, #77afff);
   text-align: center;
+}
+.araclar a {
+  display: inline-block;
+  color: white;
   font: 600 32px "Montserrat", sans-serif;
+  animation: important 2s infinite ease-in-out;
+}
+.araclar a:hover {
+  animation-play-state: paused;
+  font-style: italic;
+  color: #01003B;
+}
+@media screen and (max-width: 850px) {
+  .araclar a {
+    margin: 1.5vh 1vw;
+  }
 }
 
 .table {
@@ -42,24 +130,6 @@
   display: inline-flex;
   flex-direction: row;
 }
-.table .table-item p {
-  font: x-large sans-serif;
-}
-@media screen and (max-width: 1100px) {
-  .table .table-item p {
-    font-size: large;
-  }
-}
-@media screen and (max-width: 850px) {
-  .table .table-item p {
-    font-size: 18px;
-  }
-}
-@media screen and (max-width: 400px) {
-  .table .table-item p {
-    font-size: 16px;
-  }
-}
 .table .table-item img {
   align-self: center;
   margin-right: 20px;
@@ -212,7 +282,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
+  background: linear-gradient(to left, #1d60b5, #77afff);
   color: white;
 }
 .social p {
@@ -276,7 +346,7 @@ td {
 .documents {
   display: flex;
   flex-direction: row;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
+  background: linear-gradient(to left, #1d60b5, #77afff);
 }
 .documents .document {
   margin: 0 5vw 0 0;
@@ -456,12 +526,8 @@ h1 {
 }
 #video h1, #misyon h1, #vizyon h1, #hikaye h1, #yonetim h1 {
   margin: 0 0 1em 0;
-  font: 600 2.5vw "Montserrat", sans-serif;
   color: black;
 }
-#video p, #misyon p, #vizyon p, #hikaye p, #yonetim p {
-  font: 500 1.25vw "Montserrat", sans-serif;
-}
 #video ul, #misyon ul, #vizyon ul, #hikaye ul, #yonetim ul {
   list-style-position: inside;
   font-size: 1vw;
@@ -472,18 +538,34 @@ h1 {
   flex-direction: column;
   align-items: center;
   color: white;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
+  background: linear-gradient(to left, #1d60b5, #77afff);
 }
 #video video {
   width: 100% !important;
   height: auto !important;
 }
 
+#hikaye section {
+  display: flex;
+  align-items: center;
+}
+#hikaye section figure img {
+  height: 25vw;
+}
+@media screen and (max-width: 1700px) {
+  #hikaye section {
+    flex-direction: column-reverse;
+  }
+}
+#hikaye .text-area {
+  flex-direction: column;
+}
+
 .sec-links-to-documents {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
+  background: linear-gradient(to left, #1d60b5, #77afff);
 }
 .sec-links-to-documents h1 {
   font: 500 32px "Montserrat", sans-serif;
@@ -524,17 +606,6 @@ h1 {
   }
 }
 
-@keyframes fullscreen-image-appear {
-  from {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  to {
-    width: 100%;
-    height: 100vh;
-  }
-}
 #fullscreen {
   margin: 0;
   padding: 0;
@@ -554,7 +625,7 @@ h1 {
 
 .gallery-text {
   overflow: auto;
-  background: linear-gradient(to left, #1d60b5, #3b8fff);
+  background: linear-gradient(to left, #1d60b5, #77afff);
 }
 .gallery-text h1 {
   margin: 2.5vh 0;
@@ -674,6 +745,13 @@ h1 {
   height: 36px;
   position: relative;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 #header #toggle-label .bar {
   padding: 0;
@@ -873,6 +951,20 @@ a:active {
   }
 }
 
+.content-spacing-small {
+  padding: 50px 100px;
+}
+@media screen and (max-width: 1100px) {
+  .content-spacing-small {
+    padding: 25px 50px;
+  }
+}
+@media screen and (max-width: 850px) {
+  .content-spacing-small {
+    padding: 5px 10px;
+  }
+}
+
 .ignore-vertical {
   padding-top: 0;
   padding-bottom: 0;
@@ -898,6 +990,44 @@ a:active {
   color: inherit;
 }
 
+.paragraph {
+  font: 500 x-large "Montserrat", sans-serif;
+}
+@media screen and (max-width: 1100px) {
+  .paragraph {
+    font-size: large;
+  }
+}
+@media screen and (max-width: 850px) {
+  .paragraph {
+    font-size: 18px;
+  }
+}
+@media screen and (max-width: 400px) {
+  .paragraph {
+    font-size: 16px;
+  }
+}
+
+.heading {
+  font: 600 50px "Montserrat", sans-serif;
+}
+@media screen and (max-width: 1100px) {
+  .heading {
+    font-size: 35px;
+  }
+}
+@media screen and (max-width: 850px) {
+  .heading {
+    font-size: 25px;
+  }
+}
+@media screen and (max-width: 400px) {
+  .heading {
+    font-size: 20px;
+  }
+}
+
 #header {
   position: sticky;
   top: 0;
@@ -910,19 +1040,22 @@ a:active {
   }
 }
 
-.dropdown {
+#drawer {
   position: fixed;
+  bottom: 0;
+  right: 0;
   z-index: 2;
   background: linear-gradient(to left bottom, #1d60b5, #003e86);
-  width: 100%;
+  width: 0;
   height: 90vh;
-  -webkit-animation: drawer-open 550ms;
-  animation: drawer-open 550ms;
+  display: flex;
   flex-direction: column;
   align-items: center;
+  transition: width 500ms;
 }
-.dropdown .dropdown-nav-item {
+#drawer .drawer-item {
   position: relative;
+  opacity: 0;
   margin-top: 50px;
   background: linear-gradient(#FFFFFF, #adf0ff);
   -webkit-background-clip: text;
@@ -930,13 +1063,12 @@ a:active {
   color: transparent;
   font: 600 28px "Montserrat", sans-serif;
   text-decoration: none;
-  -webkit-animation: navbar-appear 550ms;
-  animation: navbar-appear 550ms;
+  transition: opacity 250ms ease-in-out;
 }
-.dropdown .dropdown-nav-item:first-of-type {
+#drawer .drawer-item:first-of-type {
   margin-top: 100px;
 }
-.dropdown .dropdown-nav-item:after {
+#drawer .drawer-item:after {
   content: "";
   position: absolute;
   width: 100%;
@@ -948,114 +1080,23 @@ a:active {
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
 }
-.dropdown .dropdown-nav-item:hover:after {
+#drawer .drawer-item:hover:after {
   transform: scaleX(1);
   transform-origin: bottom left;
 }
+#drawer .drawer-item.visible {
+  opacity: 1;
+}
+#drawer.expanded {
+  width: 100%;
+  top: unset;
+}
 @media screen and (max-width: 850px) {
-  .dropdown {
+  #drawer {
     height: calc(100vh - 45px);
   }
 }
 
-.dropdown_close_animation {
-  -webkit-animation: drawer-close 550ms;
-  animation: drawer-close 550ms;
-}
-
-.dropdown-nav-item_close_animation {
-  -webkit-animation: navbar-disappear 550ms;
-  animation: navbar-disappear 550ms;
-}
-
-@-webkit-keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@-webkit-keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-webkit-keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
 #container {
   min-height: 90vh;
   display: grid;
@@ -1069,6 +1110,9 @@ a:active {
     min-height: calc(100vh - 45px);
   }
 }
+#container.hidden {
+  display: none;
+}
 
 #content {
   background: whitesmoke;
@@ -1080,7 +1124,6 @@ a:active {
 #scroll-to-top {
   width: 50px;
   height: 50px;
-  display: none;
   position: fixed;
   right: 25px;
   bottom: 55px;
@@ -1089,6 +1132,7 @@ a:active {
   border: none;
   border-radius: 50%;
   background-color: #1d60b5;
+  box-shadow: white 0 0 50px -5px;
 }
 #scroll-to-top img {
   height: 100%;
diff --git a/scaffolding/footer.brick b/scaffolding/footer.brick
index a3965af..9b7ce0c 100644
--- a/scaffolding/footer.brick
+++ b/scaffolding/footer.brick
@@ -16,8 +16,8 @@
                 <ul>
                     <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="galeri.html">Fotoğraf Galerisi</a></li>
+                    <li><a href="aydinlatma.html">Aydınlatma Metni</a></li>
                     <li><a href="kamera.html">Kamera Kullanımı</a></li>
                 </ul>
             </div>