diff --git a/index.html b/index.html
index 420414b..9a736ef 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1" name="viewport" />
     <meta name="description" content="Uğur Galeri">
+    <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>
@@ -21,17 +22,17 @@
     </header>
     <div id="container">
         <div id="content">
-            <div class="showcase">
+            <div class="showcase content_spacing">
                 <h1>Biz bir şeyler satıyoruz.</h1>
             </div>
             <div id="brands" class="table content_spacing">
-                <div class="table-item">
+                <div class="table-item square">
                     <img src="resources/img/ugurgaleri-utek.png">
                     <div class="vertical-separator"></div>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
                 <div class="table-item reverse">
-                    <img src="resources/img/ugurgaleri-utek.png">
+                    <img src="resources/img/UKT/UKT.png">
                     <div class="vertical-separator"></div>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
@@ -47,6 +48,7 @@
                 </div>
             </div>
             <div id="social">
+                <p></p>
             </div>
         </div>
         <footer id="footer">
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index 345927f..3f08358 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -3,7 +3,7 @@
 
 $table-item_img_width: 100px;
 $table-item_margin_between_items: 10px;
-$table-item_margin_img_to_paragraph: 10px;
+$table-item_margin_img_to_paragraph: 100px;
 
 .showcase {
   display: flex;
@@ -32,10 +32,11 @@ $table-item_margin_img_to_paragraph: 10px;
     margin-top: $table-item_margin_between_items;
     display: inline-flex;
     flex-direction: row;
+    align-items: center;
 
     img {
       margin-right: $table-item_margin_img_to_paragraph;
-      height: $table-item_img_width;
+      height: auto;
       width: $table-item_img_width;
     }
   }
@@ -63,4 +64,72 @@ $table-item_margin_img_to_paragraph: 10px;
     border: solid 1px variables.$clr_brand;
     margin-right: $table-item_margin_img_to_paragraph;
   }
+
+  .square {
+    img {
+      height: $table-item_img_width;
+    }
+  }
+
+  .table-item-animation {
+    animation: slide-in-left 3000ms;
+  }
+
+  .table-item-animation-reverse {
+    animation: slide-in-right 3000ms;
+  }
+
+  @keyframes fade-in {
+    from {
+      margin-left: 10%;
+      width: 105%;
+      opacity: 0;
+    }
+
+    to {
+      margin-left: 0;
+      width: 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in-reverse {
+    from {
+      margin-right: 10%;
+      width: 105%;
+      opacity: 0;
+    }
+
+    to {
+      margin-right: 0;
+      width: 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(0%);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-in-right {
+    from {
+      margin-left: 100%;
+      width: 300%;
+      opacity: 0;
+    }
+
+    to {
+      margin-left: 0;
+      width: 100%;
+      opacity: 1;
+    }
+  }
 }
\ No newline at end of file
diff --git a/resources/img/UKT/UKT.png b/resources/img/UKT/UKT.png
new file mode 100755
index 0000000..82407b4
Binary files /dev/null and b/resources/img/UKT/UKT.png differ
diff --git a/resources/scripts/index.js b/resources/scripts/index.js
new file mode 100644
index 0000000..cfb5c31
--- /dev/null
+++ b/resources/scripts/index.js
@@ -0,0 +1,15 @@
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            if (entry.target.classList.contains('reverse'))
+                entry.target.classList.add('table-item-animation-reverse');
+            else
+                entry.target.classList.add('table-item-animation');
+        }
+    });
+});
+
+let targets = document.querySelectorAll('.table-item');
+targets.forEach(target => {
+    observer.observe(target);
+})
\ No newline at end of file
diff --git a/resources/styles/main.css b/resources/styles/main.css
index 7205aad..85529ff 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -26,10 +26,11 @@
   margin-top: 10px;
   display: inline-flex;
   flex-direction: row;
+  align-items: center;
 }
 .table .table-item img {
-  margin-right: 10px;
-  height: 100px;
+  margin-right: 100px;
+  height: auto;
   width: 100px;
 }
 .table .reverse {
@@ -37,19 +38,74 @@
 }
 .table .reverse img {
   margin-right: 0;
-  margin-left: 10px;
+  margin-left: 100px;
 }
 .table .reverse p {
   text-align: right;
 }
 .table .reverse .vertical-separator {
   margin-right: 0;
-  margin-left: 10px;
+  margin-left: 100px;
 }
 .table .vertical-separator {
   height: 120px;
   border: solid 1px #1d60b5;
-  margin-right: 10px;
+  margin-right: 100px;
+}
+.table .square img {
+  height: 100px;
+}
+.table .table-item-animation {
+  animation: slide-in-left 3000ms;
+}
+.table .table-item-animation-reverse {
+  animation: slide-in-right 3000ms;
+}
+@keyframes fade-in {
+  from {
+    margin-left: 10%;
+    width: 105%;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    width: 100%;
+    opacity: 1;
+  }
+}
+@keyframes fade-in-reverse {
+  from {
+    margin-right: 10%;
+    width: 105%;
+    opacity: 0;
+  }
+  to {
+    margin-right: 0;
+    width: 100%;
+    opacity: 1;
+  }
+}
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-right {
+  from {
+    margin-left: 100%;
+    width: 300%;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    width: 100%;
+    opacity: 1;
+  }
 }
 
 #header {