diff --git a/templates/blog_post/index.html.twig b/templates/blog_post/index.html.twig
index 8929093..5b6ed8a 100644
--- a/templates/blog_post/index.html.twig
+++ b/templates/blog_post/index.html.twig
@@ -1,3 +1,5 @@
+
+
 {% extends 'base.html.twig' %}
 
 {% block title %}BlogPost index{% endblock %}
@@ -10,44 +12,64 @@
         </section>
     {% endif %}
 
-
-    {% for blog_post in pager %}
-        <article class="mx-auto bg-white p-5 rounded shadow mb-2">
-            <div class="flex justify-between">
-                <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}">
-                    <h2 class="text-2xl font-bold mb-2">{{ blog_post.title }}</h2>
-                </a>
-                {% if is_granted('IS_AUTHENTICATED_FULLY') %}
-                    <a href="{{ path('app_blog_post_edit', {'id': blog_post.id}) }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
-                        Edit
-                    </a>
-                {% endif %}
-            </div>
-
-
-            {% if blog_post.banner %}
-                <div>
-                    <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}">
-                        <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="w-full h-64 object-cover rounded">
-                    </a>
-                </div>
-            {% endif %}
-
-            <p class="text-gray-700 mb-4">Posted on <time datetime="2024-03-17">{{ blog_post.publishedAt ? blog_post.publishedAt|date('Y-m-d H:i:s') : '' }}</time> by Author</p>
-
-            {% if blog_post.content|length > 200 %}
-                {% set truncated = blog_post.content|slice(0, 200)|join(' ') ~ '...' %}
+    {% set isFirstItem = true %}
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative">
+        {% for blog_post in pager %}
+            {% if isFirstItem %}
+                <article class="md:col-span-2 relative overflow-hidden rounded-3xl z-40 h-[35rem] md:h-[50vh]">
+                    {% set isFirstItem = false %}
+                    {% if blog_post.banner %}
+                        <div class="absolute inset-0">
+                            <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="w-full h-full object-cover">
+                            <div class="absolute inset-0 w-full h-full overflow-hidden bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
+                        </div>
+                    {% endif %}
+
+                    <div class="relative px-6 py-10 h-full flex flex-col align-items-end justify-end items-baseline">
+                        <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}" class="text-white">
+                            <h2 class="text-6xl font-bold mb-8">{{ blog_post.title }}</h2>
+                        </a>
+                        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
+                            <a href="{{ path('app_blog_post_edit', {'id': blog_post.id}) }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+                                Edit
+                            </a>
+                        {% endif %}
+                        <p class="text-xl max-w-4xl leading-relaxed text-white">
+                            {{ blog_post.content|slice(0, 300) ~ '...' }}
+                        </p>
+                    </div>
+                </article>
             {% else %}
-                {% set truncated = blog_post.content %}
+                <article class="bg-white px-6 py-10 rounded-3xl">
+                    <div class="flex justify-between gap-4">
+                        <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}">
+                            <h2 class="text-4xl font-bold mb-8">{{ blog_post.title }}</h2>
+                        </a>
+                        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
+                            <a href="{{ path('app_blog_post_edit', {'id': blog_post.id}) }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+                                Edit
+                            </a>
+                        {% endif %}
+                    </div>
+
+                    {% if blog_post.banner %}
+                        <div class="mb-6">
+                            <!-- Keep original aspect ratio but ensure it's responsive -->
+                            <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="w-full object-cover rounded">
+                        </div>
+                    {% endif %}
+
+                    <p>
+                        {{ blog_post.content|length > 300 ? blog_post.content|slice(0, 300) ~ '...' : blog_post.content }}
+                    </p>
+                </article>
             {% endif %}
-
-            {{ truncated }}
-        </article>
-    {% else %}
-        <div>
-            <div>No Articles found 😞</div>
-        </div>
-    {% endfor %}
+        {% else %}
+            <div class="md:col-span-2">
+                <div>No Articles found 😞</div>
+            </div>
+        {% endfor %}
+    </div>
 
     <nav aria-label="Pagination" class="flex items-center justify-center space-x-2 my-4">
         {% if pager.hasPreviousPage %}
@@ -83,5 +105,6 @@
             <a href="{{ path('app_blog_post_index', {'page': pager.nextPage}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">Next</a>
             <a href="{{ path('app_blog_post_index', {'page': last}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">Last</a>
         {% endif %}
+
     </nav>
 {% endblock %}