diff --git a/app/Http/Controllers/BlogController.php b/app/Http/Controllers/BlogController.php
index 4985442..a8c3431 100644
--- a/app/Http/Controllers/BlogController.php
+++ b/app/Http/Controllers/BlogController.php
@@ -167,17 +167,17 @@ class BlogController extends Controller
 			}
 
 			if (class_exists(\App\Models\BlogCategory::class)) {
-				// Hoş Geldiniz bölümü altındaki 3'lü kategori vurgusu
+				// Hoş Geldiniz bölümü altındaki 4'lü kategori vurgusu
 				$highlightCategories = \App\Models\BlogCategory::where('is_active', true)
 					->withCount('blogs')
 					->has('blogs')
 					->orderBy('sort_order')
-					->take(3)
+					->take(4)
 					->get();
-				if ($highlightCategories->count() < 3) {
+				if ($highlightCategories->count() < 4) {
 					$highlightCategories = \App\Models\BlogCategory::where('is_active', true)
 						->orderBy('sort_order')
-						->take(3)
+						->take(4)
 						->get();
 				}
 
diff --git a/public/assets/img/photos/blog_cat_app.png b/public/assets/img/photos/blog_cat_app.png
index 84726f2..5dd5de1 100644
Binary files a/public/assets/img/photos/blog_cat_app.png and b/public/assets/img/photos/blog_cat_app.png differ
diff --git a/resources/views/blog/index.blade.php b/resources/views/blog/index.blade.php
index aae99cf..1ddd6f0 100644
--- a/resources/views/blog/index.blade.php
+++ b/resources/views/blog/index.blade.php
@@ -66,65 +66,51 @@
 
     <!-- Dynamic Highlights Section -->
     @if(isset($highlightCategories) && $highlightCategories->count() > 0)
-    @php
-      $catCount = $highlightCategories->count();
-      // Dynamically select column width based on category count
-      $gridClass = $catCount >= 4 ? 'md:w-6/12 lg:w-3/12 xl:w-3/12' : 'md:w-6/12 lg:w-4/12 xl:w-4/12';
-    @endphp
-    <div class="flex flex-wrap mx-[-15px] grid-view md:mx-[-20px] lg:mx-[-20px] xl:mx-[-25px] !mt-[-40px] xl:!mt-0 lg:!mt-0 !text-center !mb-8">
-      @foreach($highlightCategories as $index => $hCat)
-        @php
-          $images = [
-            'teknoloji-cozumleri' => 'assets/img/photos/blog_cat_tech.png',
-            'yapay-zeka' => 'assets/img/photos/blog_cat_ai.png',
-            'muzik-teknolojileri' => 'assets/img/photos/blog_cat_music.png',
-            'uygulama-gelistirme' => 'assets/img/photos/blog_cat_app.png',
-          ];
-          $hImg = isset($images[$hCat->slug]) ? asset($images[$hCat->slug]) : asset('assets/img/photos/blog_cat_tech.png');
-          $hUrl = route('blog.index', ['category' => $hCat->slug]);
-        @endphp
-        <div class="{{ $gridClass }} w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0">
-          <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-            <figure class="card-img-top overlay overlay-1 group">
-              <a href="{{ $hUrl }}">
-                <img class="max-w-full h-auto" src="{{ $hImg }}" alt="{{ $hCat->name }}" style="height: 240px; object-fit: cover; width: 100%;" loading="lazy">
-              </a>
-              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
-                <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">Keşfet</h5>
-              </figcaption>
-            </figure>
-            <div class="card-body p-5">
-              <h4 class="!mb-0">
-                <a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $hUrl }}">{{ $hCat->name }}</a>
-              </h4>
+    <div class="swiper-container blog grid-view !mb-12 relative z-10" data-margin="30" data-dots="true" data-items-xl="4" data-items-lg="4" data-items-md="2" data-items-xs="2">
+      <div class="swiper">
+        <div class="swiper-wrapper">
+          @foreach($highlightCategories as $index => $hCat)
+            @php
+              $images = [
+                'teknoloji-cozumleri' => 'assets/img/photos/blog_cat_tech.png',
+                'yapay-zeka' => 'assets/img/photos/blog_cat_ai.png',
+                'muzik-teknolojileri' => 'assets/img/photos/blog_cat_music.png',
+                'uygulama-gelistirme' => 'assets/img/photos/blog_cat_app.png',
+              ];
+              $hImg = isset($images[$hCat->slug]) ? asset($images[$hCat->slug]) : asset('assets/img/photos/blog_cat_tech.png');
+              $hUrl = route('blog.index', ['category' => $hCat->slug]);
+            @endphp
+            <div class="swiper-slide">
+              <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+                <figure class="card-img-top overlay overlay-1 group">
+                  <a href="{{ $hUrl }}">
+                    <img class="max-w-full h-auto" src="{{ $hImg }}" alt="{{ $hCat->name }}" style="height: 240px; object-fit: cover; width: 100%;" loading="lazy">
+                  </a>
+                  <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
+                    <h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">Keşfet</h5>
+                  </figcaption>
+                </figure>
+                <div class="card-body p-5 !text-center">
+                  <h4 class="!mb-0">
+                    <a class="!text-[#343f52] hover:!text-[#e31e24] font-semibold" href="{{ $hUrl }}">{{ $hCat->name }}</a>
+                  </h4>
+                </div>
+              </div>
             </div>
-          </div>
+          @endforeach
         </div>
-      @endforeach
+      </div>
     </div>
     @endif
 
-    <!-- Category Filter & Search Bar Wrapper -->
-    <div class="flex flex-wrap justify-between items-center gap-4 !mb-8 blog-filter-search-wrapper">
-        @if(isset($categories) && $categories->count() > 0)
-        <div class="blog-filter-menu !mb-0">
-            <a href="#" class="category-filter-btn active" data-category="">
-                Tümü
-            </a>
-            @foreach($categories as $category)
-                <a href="#" class="category-filter-btn" data-category="{{ $category->slug }}">
-                    {{ $category->name }}
-                </a>
-            @endforeach
-        </div>
-        @endif
-
-        <!-- Premium Search Box -->
+    <!-- Premium Search Bar Wrapper -->
+    <div class="flex justify-center items-center !mb-10 blog-filter-search-wrapper">
+        <!-- Premium Centered and Larger Search Box -->
         <div class="blog-search-box">
             <form action="#" class="blog-search-form" id="blog-search-form">
                 <input type="text" name="search" id="blog-search-input" placeholder="Yazılarda ara..." autocomplete="off">
                 <button type="submit" class="blog-search-submit-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="width: 14px; height: 14px; display: block; color: white;">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="width: 15px; height: 15px; display: block; color: white;">
                       <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                     </svg>
                 </button>
@@ -233,69 +219,24 @@
 
 @push('styles')
 <style>
-/* Premium Blog Filter Menu */
-.blog-filter-menu {
-    display: inline-flex !important;
-    flex-wrap: wrap !important;
-    gap: 8px !important;
-    background: #ffffff !important;
-    padding: 8px 12px !important;
-    border-radius: 50px !important;
-    border: 1px solid #eef2f6 !important;
-    box-shadow: 0 4px 20px rgba(30, 34, 40, 0.05) !important;
-    margin-bottom: 0 !important;
-    align-items: center !important;
-}
-
-.category-filter-btn {
-    font-size: 0.75rem !important;
-    font-weight: 700 !important;
-    padding: 8px 20px !important;
-    border-radius: 50px !important;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    border: 1px solid transparent !important;
-    color: #60697b !important;
-    background: transparent !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.03em !important;
-    text-decoration: none !important;
-    cursor: pointer !important;
-}
-
-.category-filter-btn:hover {
-    color: #e31e24 !important;
-    background: rgba(227, 30, 36, 0.05) !important;
-    text-decoration: none !important;
-}
-
-.category-filter-btn.active {
-    color: #ffffff !important;
-    background: #e31e24 !important;
-    border-color: #e31e24 !important;
-    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.25) !important;
-    text-decoration: none !important;
-}
-
-/* Premium Blog Search Box */
+/* Premium Centered & Large Blog Search Box */
 .blog-search-box {
     background: #ffffff !important;
     border-radius: 50px !important;
     border: 1px solid #eef2f6 !important;
-    box-shadow: 0 4px 20px rgba(30, 34, 40, 0.05) !important;
-    padding: 4px 6px 4px 18px !important;
-    display: inline-flex !important;
+    box-shadow: 0 6px 25px rgba(30, 34, 40, 0.05) !important;
+    padding: 6px 8px 6px 24px !important;
+    display: flex !important;
     align-items: center !important;
-    width: 280px !important;
+    width: 100% !important;
+    max-width: 650px !important;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .blog-search-box:focus-within {
     border-color: #e31e24 !important;
-    box-shadow: 0 4px 20px rgba(227, 30, 36, 0.1) !important;
-    width: 320px !important;
+    box-shadow: 0 8px 30px rgba(227, 30, 36, 0.12) !important;
+    transform: translateY(-2px) !important;
 }
 
 .blog-search-form {
@@ -309,11 +250,11 @@
     border: none !important;
     background: transparent !important;
     outline: none !important;
-    font-size: 0.8rem !important;
+    font-size: 0.95rem !important;
     font-weight: 500 !important;
     color: #343f52 !important;
     width: 100% !important;
-    padding: 6px 0 !important;
+    padding: 8px 0 !important;
 }
 
 #blog-search-input::placeholder {
@@ -324,8 +265,8 @@
     border: none !important;
     background: #e31e24 !important;
     color: #ffffff !important;
-    width: 32px !important;
-    height: 32px !important;
+    width: 38px !important;
+    height: 38px !important;
     border-radius: 50% !important;
     display: flex !important;
     align-items: center !important;
@@ -345,15 +286,12 @@
 
 @media (max-width: 991px) {
     .blog-filter-search-wrapper {
-        flex-direction: column !important;
-        align-items: stretch !important;
+        align-items: center !important;
         gap: 15px !important;
-    }
-    .blog-filter-menu {
-        justify-content: center !important;
         width: 100% !important;
     }
     .blog-search-box {
+        max-width: 100% !important;
         width: 100% !important;
     }
 }