diff --git a/src/app/article-with-media/article-with-media.component.css b/src/app/article-with-media/article-with-media.component.css
index aa61357..ba850b9 100644
--- a/src/app/article-with-media/article-with-media.component.css
+++ b/src/app/article-with-media/article-with-media.component.css
@@ -1,3 +1,19 @@
-h1{
-    background-color: red;
+@media (max-width: 1144px) {
+    .media {
+        width: 75% !important;
+    }
+    .context {
+        padding: 20px !important;
+    }
+}
+
+.call-style2 {
+    background-color: rgb(246, 224, 94);
+    color: rgb(116, 66, 16);
+    border-radius: 30px;
+    border: 2px #ecc94b solid;
+}
+
+.call-style2:hover {
+    background-color: rgba(246, 224, 94, 0.70);
 }
\ No newline at end of file
diff --git a/src/app/article-with-media/article-with-media.component.html b/src/app/article-with-media/article-with-media.component.html
index 2642304..cea0cc5 100644
--- a/src/app/article-with-media/article-with-media.component.html
+++ b/src/app/article-with-media/article-with-media.component.html
@@ -1 +1,19 @@
-<h1>Azız Gaffar Yartas (Article With Media)</h1>
\ No newline at end of file
+<div class="container-fluid m-0 w-100 d-flex align-items-center" style="height: 566px; background-color: rgb(248, 250, 252);;">
+    <div class="col-12">
+        <div class="row d-flex justify-content-center align-items-center context">
+            <div class="col-6 d-flex align-items-center justify-content-center">
+                <img src="../../assets/web.jpg" class="media w-100" alt="media">
+            </div>
+            <div class="col-6">
+                <div class="row p-3 fs-2 fw-bold text-black">Tüm Platformlar, Tek Çözüm</div>
+                <div class="row p-3 pt-0" style="font-family: Rubik, sans-serif; font-size: 18px; font-weight: 400 !important;">
+                    Netger, internet sitenizi tüm platformlarda
+                    <br> 
+                    en iyi görüntülenecek şekilde tasarlar.</div>
+                <div class="row p-3 pt-0">
+                    <a class="call-style2 p-2 text-center" style="font-weight: 400; text-decoration: none; width: 160px;" href="#"><i class="fa-solid fa-phone pr-2"></i>Sizi arayalım</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
index 99adbdf..2b3976a 100644
--- a/src/app/header/header.component.css
+++ b/src/app/header/header.component.css
@@ -1,10 +1,68 @@
-@media (max-width: 990px) {
+@media (max-width: 991px) {
     .mobile-header {
         display: flex !important;
+        font-size: 13px;
+    }
+
+    .offcanvas {
+        background-color: #ecc94b;
+        width: 100%;
+    }
+
+    .offcanvas-title {
+        display: none;
     }
     .navbar {
         width: 100%;
     }
+
+<<<<<<< Updated upstream
+    .large-header {
+        display: none;
+    }
+
+    .small-header {
+        display: block;
+    }
+}
+
+@media (max-width:1144px) {
+    .navbar {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+}
+
+@media (max-width:1044px) {
+
+    .navbar {
+        height: 70px !important;
+    }
+
+    .navbar-brand img {
+        width: 90px;
+    }
+
+    .offcanvas-body {
+        font-size: 13px;
+    }
+}
+
+@media (min-width: 991px) {
+    .small-header {
+        display: none;
+=======
+    .navbar-nav {
+        display: flex;
+        justify-content: center !important;
+        align-items: center !important;
+        height: 100% !important;
+    }
+
+    .offcanvas-body {
+        height: 100%;
+>>>>>>> Stashed changes
+    }
 }
 
 @media (max-width: 1088px) {
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 5d97d96..3b44d51 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg bg-body-tertiary pl-5 pr-5 pt-0 pb-0">
+<nav class="navbar navbar-expand-lg bg-body-tertiary pl-5 pr-5 pt-0 pb-0" style="z-index: 9999;">
     <a class="navbar-brand" href="#">
         <img src="../../assets/logo-s.png" alt="netger-logo">
     </a>
@@ -10,16 +10,16 @@
     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
+    <div class="offcanvas-xxl offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Netger</h5>
           <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
-        <div class="offcanvas-body">
-          <ul class="navbar-nav justify-content-end align-items-center flex-grow-1" style="height: 85px;">
+        <div class="offcanvas-body justify-content-end">
+          <ul class="navbar-nav large-header" style="height: 85px;">
             <li class="nav-item dropdown h-100 d-flex align-items-center">
                 <a id="dropdownMenuButton" class="nav-link pl-3 pr-3 dropdown-toggle h-100 align-items-center d-flex" href="#" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
-                  Ürünler
+                  Ürünler (Large)
                 </a>
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                   <li><a class="dropdown-item" href="#">Okutara</a></li>
@@ -48,10 +48,73 @@ <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Netger</h5>
             <li class="nav-item ml-3 h-100 d-flex align-items-center">
                 <a class="nav-link pl-3 pr-3 h-100 align-items-center d-flex" href="#">Referanslar</a>
             </li>
-            <li class="nav-item ml-3 h-100 d-flex align-items-center" style="width: 9rem;">
+            <li class="nav-item ml-3 h-100 d-flex align-items-center">
                 <a class="nav-link call-style p-2 text-center" style="font-weight: 600;" href="#"><i class="fa-solid fa-phone pr-2"></i>Sizi arayalım</a>
             </li>
           </ul>
+
+          <ul class="navbar-nav small-header large-header pl-4">
+            <li class="nav-item">
+                <div class="m-0 w-100">
+                  <div class="row fw-semibold fs-5" style="color: black;">Logoger</div>
+                  <div class="row fw-light mt-1" style="color: #744210;">Logo tasarlamada kurumsal kimlik</div>
+                </div>
+            </li>
+            <li class="nav-item mt-4">
+              <div class="m-0 w-100">
+                <div class="row fw-semibold fs-5" style="color: black;">Ürünler</div>
+                <div class="row fw-light mt-1" style="color: #744210;">Okutara, Netger Avukat, Netger Doktor</div>
+              </div>
+            </li>
+            <li class="nav-item mt-4 w-100">
+              <div class="m-0 w-100">
+                <div class="row fw-semibold fs-5" style="color: black;">Hizmetler</div>
+                <div class="row fw-light mt-1 w-100" style="color: #744210;">Dijital Pazarlama, Web Tasarım, Sosyal Medya Danışmanlığı, Mobil Uygulama Geliştirme, Fotoğraf ve Video Çekimi</div>
+              </div>
+            </li>
+            <li class="nav-item mt-4 w-100">
+              <div class="m-0 w-100">
+                <div class="row fw-semibold fs-5" style="color: black;">Referanslar</div>
+              </div>
+            </li>
+            <li class="nav-item mt-4 w-100">
+              <div class="m-0 w-100">
+                <div class="row fw-semibold fs-5" style="color: black;">Blog</div>
+              </div>
+            </li>
+            <li class="nav-item mt-4 w-100">
+              <div class="m-0 w-100">
+                <div class="row fw-semibold fs-5" style="color: black;">Kurumsal</div>
+              </div>
+            </li>
+            <li class="nav-item mt-4 w-100">
+              <div class="m-0 w-100">
+                <div class="row fw-semibold fs-5" style="color: black;">İletişim</div>
+              </div>
+            </li>
+            <div class="mt-5">
+              <li class="nav-item mt-5 w-100">
+                <div class="m-0 w-100">
+                  <div class="row fw-medium" style="color: #744210;">Kampanyalar</div>
+                </div>
+              </li>
+              <li class="nav-item mt-5 w-100">
+                <div class="m-0 w-100">
+                  <div class="row fw-medium" style="color: #744210;">İnsan Kaynakları</div>
+                </div>
+              </li>
+              <li class="nav-item mt-5 w-100">
+                <div class="m-0 w-100">
+                  <div class="row fw-medium" style="color: #744210;">Fatura Ödeme</div>
+                </div>
+              </li>
+              <li class="mt-5 w-100" style="background-color: #f6e05e;">
+                <div class="container">
+                  <a href="#">0212 951 02 25</a>
+                </div>
+              </li>
+            </div>
+          </ul>
         </div>
       </div>
   </nav>
\ No newline at end of file
diff --git a/src/assets/web.jpg b/src/assets/web.jpg
new file mode 100644
index 0000000..9fd1500
Binary files /dev/null and b/src/assets/web.jpg differ
diff --git a/src/index.html b/src/index.html
index e737224..21e5d90 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
diff --git a/src/styles.css b/src/styles.css
index 139597f..7fd9afb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,2 +1,4 @@
-
+* {
+    font-family: Poppins;
+}