diff --git a/composer.json b/composer.json
index 240b98e..cedd3ea 100644
--- a/composer.json
+++ b/composer.json
@@ -37,6 +37,7 @@
         "symfony/ux-dropzone": "^2.16",
         "symfony/validator": "7.0.*",
         "symfony/yaml": "7.0.*",
+        "symfonycasts/tailwind-bundle": "^0.5.1",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
     },
diff --git a/composer.lock b/composer.lock
index 3bc79f6..21aedd5 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "93d79ec939cf0c840da056ec1d8622cb",
+    "content-hash": "cfad52fb50fff0fa9ae167c190da57f6",
     "packages": [
         {
             "name": "babdev/pagerfanta-bundle",
@@ -6974,6 +6974,60 @@
             ],
             "time": "2024-01-23T15:02:46+00:00"
         },
+        {
+            "name": "symfonycasts/tailwind-bundle",
+            "version": "v0.5.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SymfonyCasts/tailwind-bundle.git",
+                "reference": "e13e544c9d0f293c3155d34c6121dcf15a827867"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SymfonyCasts/tailwind-bundle/zipball/e13e544c9d0f293c3155d34c6121dcf15a827867",
+                "reference": "e13e544c9d0f293c3155d34c6121dcf15a827867",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/asset-mapper": "^6.3|^7.0",
+                "symfony/console": "^5.4|^6.3|^7.0",
+                "symfony/http-client": "^5.4|^6.3|^7.0",
+                "symfony/process": "^5.4|^6.3|^7.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "1.11.x-dev",
+                "symfony/filesystem": "^6.3|^7.0",
+                "symfony/framework-bundle": "^6.3|^7.0",
+                "symfony/phpunit-bridge": "^6.3|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfonycasts\\TailwindBundle\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ryan Weaver",
+                    "homepage": "https://symfonycasts.com"
+                }
+            ],
+            "description": "Delightful Tailwind Support for Symfony + AssetMapper",
+            "keywords": [
+                "asset-mapper",
+                "tailwind"
+            ],
+            "support": {
+                "issues": "https://github.com/SymfonyCasts/tailwind-bundle/issues",
+                "source": "https://github.com/SymfonyCasts/tailwind-bundle/tree/v0.5.1"
+            },
+            "time": "2024-02-20T11:53:29+00:00"
+        },
         {
             "name": "twig/extra-bundle",
             "version": "v3.8.0",
diff --git a/config/bundles.php b/config/bundles.php
index 28b98da..05c4d2a 100644
--- a/config/bundles.php
+++ b/config/bundles.php
@@ -17,4 +17,5 @@
     Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
     Symfony\UX\Dropzone\DropzoneBundle::class => ['all' => true],
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
+    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
 ];
diff --git a/symfony.lock b/symfony.lock
index efc113b..16c6d83 100644
--- a/symfony.lock
+++ b/symfony.lock
@@ -272,6 +272,9 @@
             "config/routes/web_profiler.yaml"
         ]
     },
+    "symfonycasts/tailwind-bundle": {
+        "version": "v0.5.1"
+    },
     "twig/extra-bundle": {
         "version": "v3.8.0"
     },
diff --git a/tailwind.config.js b/tailwind.config.js
index 1ceba2b..2becc16 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,6 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/container-queries')],
 }
 
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 3d7729e..7ce5a72 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -6,7 +6,7 @@
         <title>{% block title %}Welcome!{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
         {% block stylesheets %}
-            <link rel="stylesheet" href="{{ asset('styles/app.tailwind.css') }}">
+            {{ encore_entry_link_tags('app') }}
         {% endblock %}
 
         {% block javascripts %}
@@ -14,29 +14,47 @@
         {% endblock %}
     </head>
     <body class="bg-gray-100 text-gray-800">
-        <header class="bg-white shadow">
-            <nav class="container mx-auto px-6 py-3">
-                <div class="flex justify-between items-center">
-                    <a href="{{ path('app_blog_post_index') }}" class="text-xl font-bold text-gray-800">Symfony Blog</a>
-                    <div class="flex space-x-4">
+        <header class="bg-white border-black border-b-2">
+            <nav class="max-w-screen-xl mx-auto px-8">
+                <div class="flex justify-between items-center h-14">
+                    <a href="{{ path('app_blog_post_index') }}" class="text-xl font-bold text-gray-800">
+                        <div class="flex items-center px-3 py-1 *:font-bold justify-center border border-black">Blog.</div>
+                    </a>
+                    <div class="flex space-x-8 *:font-bold *:text-sm hidden lg:block">
                         <a href="{{ path('app_blog_post_index') }}" class="text-gray-800 hover:text-gray-600">Home</a>
-                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">About</a>
-                        {% if app.user %}
-                            <a href="{{ path('app_logout') }}">Logout</a>
-                        {% else %}
-                            <a href="{{ path('app_login') }}" class="text-gray-800 hover:text-gray-600">Login</a>
-                        {% endif %}
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Travel</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Deals</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Entertainment</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Science</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Tech</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Shopping</a>
                     </div>
+                    {% if app.user %}
+                        <a href="{{ path('app_logout') }}" class="flex gap-2 items-center">
+                            <span>Logout</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20">
+                                <path d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h238.076q12.769 0 21.384 8.616 8.616 8.615 8.616 21.384t-8.616 21.384Q463.154-760 450.385-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h238.076q12.769 0 21.384 8.615 8.616 8.615 8.616 21.384t-8.616 21.384q-8.615 8.616-21.384 8.616H212.309Zm492.385-310H393.846q-12.769 0-21.384-8.615-8.616-8.615-8.616-21.384t8.616-21.384q8.615-8.615 21.384-8.615h310.848l-76.924-76.923q-8.307-8.308-8.499-20.269-.193-11.961 8.499-21.269 8.693-9.307 21.077-9.615 12.384-.308 21.692 9l123.767 123.768q10.846 10.846 10.846 25.307 0 14.461-10.846 25.307L670.539-330.925q-8.923 8.923-21.192 8.808-12.269-.116-21.577-9.423-8.692-9.308-8.384-21.384.308-12.077 9-20.769l76.308-76.308Z"/>
+                            </svg>
+                        </a>
+                    {% else %}
+                        <a href="{{ path('app_login') }}" class="flex gap-1.5 items-center text-gray-800">
+                            <span>Login</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                <path d="M517.847-480 354.924-642.924q-8.308-8.307-8.5-20.884-.193-12.576 8.5-21.268 8.692-8.693 21.076-8.693t21.076 8.693l179.769 179.769q5.616 5.615 7.923 11.846 2.308 6.23 2.308 13.461t-2.308 13.461q-2.307 6.231-7.923 11.846L397.076-274.924q-8.307 8.308-20.884 8.5-12.576.193-21.268-8.5-8.693-8.692-8.693-21.076t8.693-21.076L517.847-480Z"/>
+                            </svg>
+                        </a>
+                    {% endif %}
                 </div>
             </nav>
         </header>
 
-        <main class="container mx-auto px-6 py-8">
+        <main class="max-w-screen-2xl mx-auto px-4">
             {% block body %}{% endblock %}
         </main>
+
         <footer class="bg-white shadow mt-8">
             <div class="container mx-auto px-6 py-4">
-                <p class="text-gray-700 text-center">Simple Blog © 2024. All rights reserved.</p>
+                <span class="text-gray-800 text-center">&copy; {{ 'now'|date('Y') }} Blog • All rights reserved</span>
             </div>
         </footer>
     </body>
diff --git a/templates/blog_post/index.html.twig b/templates/blog_post/index.html.twig
index 5b6ed8a..b17673c 100644
--- a/templates/blog_post/index.html.twig
+++ b/templates/blog_post/index.html.twig
@@ -1,80 +1,66 @@
-
-
 {% extends 'base.html.twig' %}
 
-{% block title %}BlogPost index{% endblock %}
+{% block title %}Blog - Home{% endblock %}
 
 {% block body %}
 
     {% if is_granted('IS_AUTHENTICATED_FULLY') %}
-        <section class="actions flex flex-row-reverse mb-2">
-            <a href="{{ path('app_blog_post_new') }}" class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 transition duration-300 ease-in-out">Create new</a>
-        </section>
+        <div class="flex justify-end pt-4">
+            <a href="{{ path('app_blog_post_new') }}">
+                <svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44">
+                    <path d="M460-460v140q0 8.5 5.758 14.25 5.757 5.75 14.269 5.75t14.242-5.75Q500-311.5 500-320v-140h140q8.5 0 14.25-5.758 5.75-5.757 5.75-14.269t-5.75-14.242Q648.5-500 640-500H500v-140q0-8.5-5.758-14.25-5.757-5.75-14.269-5.75t-14.242 5.75Q460-648.5 460-640v140H320q-8.5 0-14.25 5.758-5.75 5.757-5.75 14.269t5.75 14.242Q311.5-460 320-460h140Zm20.134 340q-74.673 0-140.41-28.339-65.737-28.34-114.365-76.922-48.627-48.582-76.993-114.257Q120-405.194 120-479.866q0-74.673 28.339-140.41 28.34-65.737 76.922-114.365 48.582-48.627 114.257-76.993Q405.194-840 479.866-840q74.673 0 140.41 28.339 65.737 28.34 114.365 76.922 48.627 48.582 76.993 114.257Q840-554.806 840-480.134q0 74.673-28.339 140.41-28.34 65.737-76.922 114.365-48.582 48.627-114.257 76.993Q554.806-120 480.134-120ZM480-160q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+                </svg>
+            </a>
+        </div>
     {% endif %}
 
-    {% 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 %}
-                <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 %}
+    <article class="mt-12">
+        <div class="grid grid-flow-dense xl:grid-cols-3 xl:gap-16 gap-10">
+            {% for blog_post in pager %}
+                <div class="first:sm:col-span-2">
+                    <div class="@container">
+                        <figure class="relative">
+                            {# Check if the blog post has a banner image #}
+                            {% if blog_post.banner %}
+                                <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="h-full w-full rounded-3xl object-cover">
+                            {% else %}
+                                <div class="min-h-full h-72 flex justify-center items-center bg-gray-200 rounded-3xl fill-gray-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="54" viewBox="0 -960 960 960" width="54">
+                                        <path d="M480-290.769q62.692 0 105.962-43.269 43.269-43.27 43.269-105.962t-43.269-105.962Q542.692-589.231 480-589.231t-105.962 43.269Q330.769-502.692 330.769-440t43.269 105.962q43.27 43.269 105.962 43.269Zm0-40q-46.615 0-77.923-31.308T370.769-440q0-46.615 31.308-77.923T480-549.231q46.615 0 77.923 31.308T589.231-440q0 46.615-31.308 77.923T480-330.769ZM184.615-160Q157-160 138.5-178.5 120-197 120-224.615v-430.77Q120-683 138.5-701.5 157-720 184.615-720h118.308l54.615-59.385q8.693-9.692 21.116-15.154Q391.077-800 405-800h150q13.923 0 26.346 5.461 12.423 5.462 21.116 15.154L657.077-720h118.308Q803-720 821.5-701.5 840-683 840-655.385v430.77Q840-197 821.5-178.5 803-160 775.385-160h-590.77Zm0-40h590.77q10.769 0 17.692-6.923T800-224.615v-430.77q0-10.769-6.923-17.692T775.385-680H639.538l-73.769-80H394.231l-73.769 80H184.615q-10.769 0-17.692 6.923T160-655.385v430.77q0 10.769 6.923 17.692T184.615-200ZM480-440Z"/>
+                                    </svg>
+                                </div>
+                            {% endif %}
+
+                            <div class="space-y-3 z-40 mt-4">
+                                <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}">
+                                    <h2 class="text-balance @xl:leading-tight text-2xl font-bold @xl:text-5xl text-black">{{ blog_post.title }}</h2>
+                                </a>
+                                <p class="@xl:text-2xl text-md font-light text-black max-w-4xl line-clamp-3 @xl:leading-9 leading-relaxed">
+                                    {{ blog_post.content }}
+                                </p>
+                            </div>
+
+                            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
+                                <div class="absolute right-6 top-6">
+                                    <a href="{{ path('app_blog_post_edit', {'id': blog_post.id}) }}" class="bg-gray-200 shadow hover:bg-gray-300 text-gray-900 font-bold py-2 px-4 rounded-xl inline-flex items-center">
+                                        Edit
+                                    </a>
+                                </div>
+                            {% endif %}
+                        </figure>
                     </div>
+                </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 %}
-        {% else %}
-            <div class="md:col-span-2">
+            {% else %}
                 <div>No Articles found 😞</div>
-            </div>
-        {% endfor %}
-    </div>
+            {% endfor %}
+        </div>
+    </article>
 
-    <nav aria-label="Pagination" class="flex items-center justify-center space-x-2 my-4">
+    <nav aria-label="Pagination" class="flex items-center justify-center space-x-2 my-20">
         {% if pager.hasPreviousPage %}
-            <a href="{{ path('app_blog_post_index', {'page': 1}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">First</a>
-            <a href="{{ path('app_blog_post_index', {'page': pager.previousPage}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">Previous</a>
+            <a href="{{ path('app_blog_post_index', {'page': 1}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">First</a>
+            <a href="{{ path('app_blog_post_index', {'page': pager.previousPage}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">Previous</a>
         {% endif %}
 
         {% set current = pager.currentPage %}
@@ -96,15 +82,15 @@
 
         {% if pager.hasNextPage or pager.hasPreviousPage %}
             {% for i in range(left, right) %}
-                <a href="{{ path('app_blog_post_index', {'page': i}) }}" class="px-3 py-2 text-sm font-medium {{ i == current ? 'bg-blue-500 text-white' : 'text-gray-700 bg-white' }} rounded-md border border-gray-300 hover:bg-gray-100">{{ i }}</a>
+                <div class="space-x-10">
+                    <a href="{{ path('app_blog_post_index', {'page': i}) }}" class="h-10 w-10 border text-gray-900 flex justify-center items-center rounded-full {{ i == current ? 'bg-black text-white' : 'text-gray-900 bg-white' }}">{{ i }}</a>
+                </div>
             {% endfor %}
         {% endif %}
 
-
         {% if pager.hasNextPage %}
-            <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>
+            <a href="{{ path('app_blog_post_index', {'page': pager.nextPage}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">Next</a>
+            <a href="{{ path('app_blog_post_index', {'page': last}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">Last</a>
         {% endif %}
-
     </nav>
 {% endblock %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 9bb43ca..4bedde0 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -3,42 +3,44 @@
 {% block title %}Log in!{% endblock %}
 
 {% block body %}
-    <div class="flex items-center justify-center min-h-screen bg-gray-100">
-        <div class="px-8 py-6 -mt-4 text-left bg-white shadow-lg">
-            <h3 class="text-2xl font-bold text-center">Please sign in</h3>
-            <form method="post">
-                {% if error %}
-                    <div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
-                        {{ error.messageKey|trans(error.messageData, 'security') }}
-                    </div>
-                {% endif %}
+    <div class="flex place-items-center justify-center h-dvh">
+        <div class="w-full max-w-sm">
+            {% if error %}
+                <div class="p-4 mb-4 text-sm text-red-50 rounded-xl bg-red-500" role="alert">
+                    {{ error.messageKey|trans(error.messageData, 'security') }}
+                </div>
+            {% endif %}
+            <div class="bg-white rounded-3xl p-6">
+                <form method="post">
+                    <div class="flex flex-col gap-3 mb-4">
+                        <div class="relative">
+                            <label for="username" class="text-xs font-medium">Email</label>
+                            <input type="email" value="test@mail.com" name="_username" id="username" class="w-full bg-gray-200/80 text-gray-900 mt-2 p-4 rounded-xl focus:outline-none focus:shadow-outline" autocomplete required autofocus>
+                        </div>
 
-                {% if app.user %}
-                    <div class="mb-4">
-                        You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}" class="text-blue-600 hover:underline">Logout</a>
+                        <div class="relative">
+                            <label for="password" class="text-xs font-medium">Password</label>
+                            <input type="password" value="1234" name="_password" id="password" class="w-full bg-gray-200/80 text-gray-900 mt-2 p-4 rounded-xl focus:outline-none focus:shadow-outline" autocomplete required>
+                        </div>
                     </div>
-                {% endif %}
 
-                <div class="mb-4">
-                    <label for="username" class="block">Email</label>
-{#                    <input type="email" value="{{ last_username }}" name="_username" id="username" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" autocomplete="email" required autofocus>#}
-                    <input type="email" value="test@mail.com" name="_username" id="username" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" autocomplete="email" required autofocus>
-                </div>
-                <div class="mb-4">
-                    <label for="password" class="block">Password</label>
-                    <input type="password" value="1234" name="_password" id="password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" autocomplete="current-password" required>
-                </div>
-
-                <div class="checkbox mb-3">
-                    <label>
-                        <input type="checkbox" name="_remember_me"> Remember me
-                    </label>
-                </div>
+                    <div class="flex gap-2 items-center mb-4">
+                        <input id="checkbox" type="checkbox" name="_remember_me" class="w-4 h-4 border-gray-200 accent-black">
+                        <div class="text-sm">
+                            <label for="checkbox" class="text-gray-900">Remember me</label>
+                        </div>
+                    </div>
 
-                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
 
-                <button class="w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700" type="submit">Sign in</button>
-            </form>
+                    <button class="w-full p-3 bg-black hover:bg-black/90 rounded-xl text-white flex place-items-center justify-center gap-2" type="submit">
+                        <span>Sign in</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" class="fill-white">
+                            <path d="M665.078-450.001H210.001q-12.769 0-21.384-8.615-8.616-8.615-8.616-21.384t8.616-21.384q8.615-8.615 21.384-8.615h455.077l-206.77-206.77q-8.923-8.923-8.807-20.884.115-11.962 9.423-21.269 9.307-8.692 21.076-9 11.769-.308 21.076 9l253.615 253.615q5.615 5.615 7.923 11.846 2.308 6.23 2.308 13.461t-2.308 13.461q-2.308 6.231-7.923 11.846L501.076-201.078q-8.307 8.308-20.576 8.5-12.269.192-21.576-8.5-9.308-9.307-9.308-21.384t9.308-21.384l206.154-206.155Z"/>
+                        </svg>
+                    </button>
+                </form>
+            </div>
         </div>
     </div>
 {% endblock %}