diff --git a/resources/views/layouts/wrapper.blade.php b/resources/views/layouts/wrapper.blade.php
index a97acf91..1c03f443 100644
--- a/resources/views/layouts/wrapper.blade.php
+++ b/resources/views/layouts/wrapper.blade.php
@@ -1,30 +1,39 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<!doctype html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="auto">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>{{ $title ?? 'Page Title' }}</title>
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>{{ $title ?? 'Page Title' }}</title>
+
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+
+        <link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap"
+                rel="stylesheet">
+        <link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
+
+        @stack('styles')
 </head>
-<body>
 
-@include('layouts.wrapper._navbar')
+<body class="d-flex flex-column min-vh-100">
+
+        @include('layouts.wrapper._navbar')
 
-@yield('content')
+        <main>
+                @yield('content')
+        </main>
 
-@include('layouts.wrapper._footer')
+        @include('layouts.wrapper._footer')
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
-        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
-        crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+                integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+                crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+                integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+                crossorigin="anonymous"></script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/resources/views/layouts/wrapper/_footer.blade.php b/resources/views/layouts/wrapper/_footer.blade.php
index 7a89ac02..76f85f40 100644
--- a/resources/views/layouts/wrapper/_footer.blade.php
+++ b/resources/views/layouts/wrapper/_footer.blade.php
@@ -1,30 +1,71 @@
-<div class="container mt-5">
-    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-        <p class="col-md-4 mb-0 text-body-secondary">
-            <strong>My Personal Blog</strong>
-        </p>
+<div class="mt-5">
+    <footer class="bg-dark-gradient py-5">
+        <div class="container">
+            <div class="row">
+                <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4">
+                    <span class="fs-3 fw-bold text-white" style="font-family: 'Playfair Display', serif;">
+                        <strong>My Personal Blog</strong>
+                    </span>
 
-        <ul class="nav col-md-4 justify-content-end">
-            <li class="nav-item">
-                <a href="{{ route('main.index') }}" class="nav-link px-2 text-body-secondary">
-                    Home
-                </a>
-            </li>
-            <li class="nav-item">
-                <a href="{{ route('category.index') }}" class="nav-link px-2 text-body-secondary">
-                    Categories
-                </a>
-            </li>
-            <li class="nav-item">
-                <a href="{{ route('about.index') }}" class="nav-link px-2 text-body-secondary">
-                    About author
-                </a>
-            </li>
-            <li class="nav-item">
-                <a href="{{ route('contact.index') }}" class="nav-link px-2 text-body-secondary">
-                    Contacts
-                </a>
-            </li>
-        </ul>
+                    <div class="col-6 col-md-2 mb-4">
+                        <h5 class="text-white mb-3">Navigation</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item mb-2">
+                                <a href="{{ route('main.index') }}" class="nav-link p-0 link-light link-offset-2">
+                                    Home
+                                </a>
+                            </li>
+                            <li class="nav-item mb-2">
+                                <a href="{{ route('about.index') }}" class="nav-link p-0 link-light link-offset-2">
+                                    About
+                                </a>
+                            </li>
+                            <li class="nav-item mb-2">
+                                <a href="{{ route('contact.index') }}" class="nav-link p-0 link-light link-offset-2">
+                                    Contact
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="col-6 col-md-2 mb-4">
+                        <h5 class="text-white mb-3">Social</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item mb-2">
+                                <a href="#" class="nav-link p-0 link-light link-offset-2">
+                                    <i class="bi bi-github me-2"></i>GitHub
+                                </a>
+                            </li>
+                            <li class="nav-item mb-2">
+                                <a href="#" class="nav-link p-0 link-light link-offset-2">
+                                    <i class="bi bi-linkedin me-2"></i>LinkedIn
+                                </a>
+                            </li>
+                            <li class="nav-item mb-2">
+                                <a href="#" class="nav-link p-0 link-light link-offset-2">
+                                    <i class="bi bi-twitter-x me-2"></i>Twitter
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+
+                </footer>
+            </div>
+
+            <div class="border-top border-dark pt-4 mt-4 text-center">
+                <p class="text-secondary mb-0">
+                    © {{ date('Y') }} My Personal Blog.
+                </p>
+            </div>
+        </div>
     </footer>
 </div>
+
+<style>
+    .bg-dark-gradient {
+        background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
+        padding: 2rem 0;
+        margin-top: 4rem !important;
+        width: 100%;
+    }
+</style>
\ No newline at end of file
diff --git a/resources/views/layouts/wrapper/_navbar.blade.php b/resources/views/layouts/wrapper/_navbar.blade.php
index a2938de5..8df0efe1 100644
--- a/resources/views/layouts/wrapper/_navbar.blade.php
+++ b/resources/views/layouts/wrapper/_navbar.blade.php
@@ -1,30 +1,56 @@
-<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
-    <div class="container-md">
-        <a class="navbar-brand" href="{{ route('main.index') }}">
-            <strong>My Personal Blog</strong>
-        </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ route('main.index') }}">Home</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ route('about.index') }}">About author</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ route('contact.index') }}">Contacts</a>
-                </li>
-            </ul>
-            @auth()
-                <a class="btn btn-outline-success" href="{{ route('personal.main.index') }}">Profile</a>
-            @endauth
-            @guest()
-                <a class="btn btn-outline-success" href="{{ route('personal.main.index') }}">Log in</a>
-            @endguest
+<div class="container">
+    <header class="border-bottom lh-1 py-3">
+        <div class="row flex-nowrap justify-content-between align-items-center">
+            <div class="col-4"></div>
+            <div class="col-4 text-center">
+                <a class="blog-header-logo text-body-emphasis text-decoration-none" href="{{ route('main.index') }}"
+                    style="font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.95rem;">
+                    My Personal Blog
+                </a>
+            </div>
+            <div class="col-4 d-flex justify-content-end align-items-center">
+                @auth
+                    <div class="dropdown">
+                        <a class="btn btn-sm btn-outline-primary dropdown-toggle gap-2 rounded-pill px-4 d-flex align-items-center"
+                            href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <i class="bi bi-person-circle"></i>
+                            {{ Auth::user()->name }}
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-end shadow-lg rounded-3">
+                            <li>
+                                <a class="dropdown-item d-flex align-items-center gap-2"
+                                    href="{{ route('personal.main.index') }}">
+                                    <i class="bi bi-person"></i> Profile
+                                </a>
+                            </li>
+                            <li>
+                                <hr class="dropdown-divider">
+                            </li>
+                            <li>
+                                <form method="POST" action="{{ route('logout') }}">
+                                    @csrf
+                                    <button type="submit" class="dropdown-item d-flex align-items-center gap-2">
+                                        <i class="bi bi-box-arrow-right"></i> Logout
+                                    </button>
+                                </form>
+                            </li>
+                        </ul>
+                    </div>
+                @else
+                    <a class="btn btn-sm bg-primary text-white gap-2 rounded-pill px-4 d-flex align-items-center"
+                        href="{{ route('login') }}">
+                        <i class="bi bi-box-arrow-in-right"></i> Log in
+                    </a>
+                @endauth
+            </div>
         </div>
+    </header>
+
+    <div class="nav-scroller py-1 mb-3 border-bottom">
+        <nav class="nav nav-underline justify-content-between">
+            <a class="nav-item nav-link link-body-emphasis" href="{{ route('main.index') }}">Home</a>
+            <a class="nav-item nav-link link-body-emphasis" href="{{ route('about.index') }}">About author</a>
+            <a class="nav-item nav-link link-body-emphasis" href="{{ route('contact.index') }}">Contact</a>
+        </nav>
     </div>
-</nav>
+</div>
\ No newline at end of file
diff --git a/resources/views/post/index/latest_posts.blade.php b/resources/views/post/index/latest_posts.blade.php
index 3b28d07d..ef45e63b 100644
--- a/resources/views/post/index/latest_posts.blade.php
+++ b/resources/views/post/index/latest_posts.blade.php
@@ -2,52 +2,129 @@
     /** @var \App\Models\Post $post */
 @endphp
 
-<div class="row row-cols-1 row-cols-md-3 g-4 mt-4">
-    <div class="col">
-        <h2>Latest posts</h2>
-    </div>
-</div>
-<div class="row row-cols-1 row-cols-md-3 g-4 mt-3">
-    @foreach($posts as $post)
-        <div class="col">
-            <div class="card h-100">
-                <img src="{{ $post->preview_image }}" class="card-img-top" alt="...">
-                <div class="card-body">
-                    <h5 class="card-title">
-                        <a class="card-link text-black link-underline link-underline-opacity-0" href="{{ route('post.show', $post->id) }}">
-                            {{ $post->title }}
-                        </a>
-                    </h5>
-                    <p class="card-text">
-                        {{ $post->shortBody() }}
-                    </p>
-                    @auth()
-                        <form action="{{ route('post.likes.store', $post->id) }}" method="post">
-                            @csrf
-                            <span>{{ $post->liked_users_count }}</span>
-                            <button type="submit" class="border-0 bg-transparent">
-                                @if(auth()->user()->likedPosts->contains($post->id))
-                                    <i class="fas fa-heart" style="color: #f64343;"></i>
-                                @else
-                                    <i class="far fa-heart"></i>
-                                @endif
-                            </button>
-                        </form>
-                    @endauth
-                    @guest()
-                        <div>
-                            <span>{{ $post->liked_users_count }}</span>
-                            <i class="far fa-heart"></i>
+<div class="justify-content">
+    @if($posts->isNotEmpty())
+        @php
+            $featuredPost = $posts->first();
+            $otherPosts = $posts->slice(1);
+        @endphp
+
+        <!-- Featured Post -->
+        <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
+            <div class="col-lg-6 px-0">
+                <h1 class="fst-italic">
+                    <a class="blog-header-logo text-body-emphasis text-decoration-none"
+                        href="{{ route('post.show', $featuredPost->id) }}"
+                        style="font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.8rem;">
+                        {{ $featuredPost->title }}
+                    </a>
+                </h1>
+                <p class="lead my-3">{{ $featuredPost->shortBody() }}</p>
+                <p class="lead mb-0">
+                    <a href="{{ route('post.show', $featuredPost->id) }}" class="btn btn-outline-secondary rounded-pill">
+                        Continue reading...
+                    </a>
+                </p>
+            </div>
+        </div>
+
+        <!-- Other Posts Grid -->
+        <div class="row mb-2 g-4">
+            @foreach($otherPosts as $post)
+                <div class="col-md-6">
+                    <div class="row g-0 border rounded overflow-hidden flex-md-row shadow-sm h-md-100">
+                        <!-- Image Column -->
+                        <div class="col-12 col-md-5">
+                            <div class="h-100 overflow-hidden">
+                                <img src="{{ $post->preview_image }}" class="img-fluid h-100 object-fit-cover"
+                                    alt="{{ $post->title }}" loading="lazy">
+                            </div>
+                        </div>
+
+                        <!-- Content Column -->
+                        <div class="col-12 col-md-7 p-4 d-flex flex-column position-static">
+                            <div class="mb-3">
+                                <span class="badge bg-primary rounded-pill">
+                                    {{ $post->category->name ?? 'Uncategorized' }}
+                                </span>
+                            </div>
+
+                            <h3 class="mb-3" style="font-family: 'Playfair Display', serif;">
+                                <a href="{{ route('post.show', $post->id) }}" class="text-dark text-decoration-none">
+                                    {{ $post->title }}
+                                </a>
+                            </h3>
+
+                            <div class="mb-3 text-muted small">
+                                <i class="bi bi-calendar me-1"></i>
+                                {{ $post->created_at->format('M j, Y') }}
+                            </div>
+
+                            <p class="card-text mb-auto">{{ $post->shortBody() }}</p>
+
+                            <a href="{{ route('post.show', $post->id) }}" class="mt-3 align-self-start text-decoration-none">
+                                Continue reading →
+                            </a>
                         </div>
-                    @endguest
+                    </div>
                 </div>
+            @endforeach
+        </div>
+
+        <!-- Pagination -->
+        <div class="row mt-4">
+            <div class="d-flex justify-content-center">
+                {{ $posts->links() }}
             </div>
         </div>
-    @endforeach
-</div>
-<div class="row mt-3">
-    <div class="mx-auto">
-        {{ $posts->links() }}
-    </div>
+
+    @else
+        <div class="text-center py-5">
+            <h2 class="text-muted">No posts available</h2>
+        </div>
+    @endif
 </div>
 
+<style>
+    .object-fit-cover {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+    }
+
+    .shadow-sm {
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    .shadow-sm:hover {
+        transform: translateY(-3px);
+    }
+
+    .pagination .page-item .page-link {
+        border-radius: 50px;
+        padding: 0.5rem 1rem;
+        color: var(--bs-primary);
+        border: 1px solid var(--bs-primary);
+        transition: all 0.3s;
+    }
+
+    .pagination .page-item.active .page-link {
+        background-color: var(--bs-primary);
+        color: #fff;
+        border-color: var(--bs-primary);
+    }
+
+    .pagination .page-item .page-link:hover {
+        background-color: var(--bs-primary);
+        color: #fff;
+    }
+
+    .pagination .page-item {
+        margin-right: 8px;
+    }
+    
+    .pagination .page-item:last-child {
+        margin-right: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/resources/views/post/index/liked_posts.blade.php b/resources/views/post/index/liked_posts.blade.php
index 07306fd5..f07a4d57 100644
--- a/resources/views/post/index/liked_posts.blade.php
+++ b/resources/views/post/index/liked_posts.blade.php
@@ -1,29 +1,62 @@
 @php
-  /** @var \App\Models\Post $likedPost */
+    /** @var \App\Models\Post $likedPost */
 @endphp
 
-<div class="row row-cols-1 row-cols-md-3 g-4 mt-5">
-    <div class="col">
-        <h2>Liked posts</h2>
-    </div>
-</div>
-<div class="row row-cols-1 row-cols-md-3 g-4 mt-3">
-    @foreach($likedPosts as $likedPost)
+<div class="justify-content">
+    <!-- Liked Posts Header -->
+    <div class="row mb-4 mt-5">
         <div class="col">
-            <div class="card h-100">
-                <img src="{{ $likedPost->preview_image }}" class="card-img-top" alt="...">
-                <div class="card-body">
-                    <h5 class="card-title">
-                        <a class="card-link text-black link-underline link-underline-opacity-0" href="{{ route('post.show', $likedPost->id) }}">
-                            {{ $likedPost->title }}
+            <h3 class="mb-3 text-center fst-italic" style="font-family: 'Playfair Display', serif;">
+                Liked Posts
+            </h3>
+        </div>
+    </div>
+
+    <!-- Liked Posts Grid -->
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+        @foreach($likedPosts as $likedPost)
+            <div class="col">
+                <div class="card h-100 shadow-sm border rounded overflow-hidden">
+                    <img src="{{ $likedPost->preview_image }}" class="card-img-top" alt="...">
+                    <div class="card-body d-flex flex-column">
+                        <h5 class="card-title mb-3" style="font-family: 'Playfair Display', serif;">
+                            <a class="text-dark text-decoration-none" href="{{ route('post.show', $likedPost->id) }}">
+                                {{ $likedPost->title }}
+                            </a>
+                        </h5>
+                        <p class="card-text text-muted mb-3">{{ $likedPost->shortBody() }}</p>
+                        <a href="{{ route('post.show', $likedPost->id) }}"
+                            class="btn btn-outline-primary rounded-pill mt-auto">
+                            Continue reading →
                         </a>
-                    </h5>
-                    <p class="card-text">
-                        {{ $likedPost->shortBody() }}
-                    </p>
+                    </div>
                 </div>
             </div>
-        </div>
-    @endforeach
+        @endforeach
+    </div>
 </div>
 
+<style>
+    .card-img-top {
+        height: 200px;
+        object-fit: cover;
+    }
+
+    .card-body {
+        padding: 1.25rem;
+    }
+
+    .btn-outline-primary {
+        transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .btn-outline-primary:hover {
+        background-color: #007bff;
+        color: #fff;
+    }
+
+    .card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
+</style>
\ No newline at end of file
