diff --git a/app/Http/Controllers/PostsController.php b/app/Http/Controllers/PostsController.php
index ccba1b7..75d7cfb 100644
--- a/app/Http/Controllers/PostsController.php
+++ b/app/Http/Controllers/PostsController.php
@@ -4,14 +4,18 @@ namespace App\Http\Controllers;
 
 use Spatie\Sheets\Facades\Sheets;
 use Spatie\Sheets\Sheet;
+use CreativeCrafts\Paginate\Facades\Paginate;
 
 class PostsController extends Controller
 {
     public function index()
     {
-        $posts = Sheets::all();
-        
-        return view('posts.index', compact('posts'));
+        $posts = Sheets::all()->sortByDesc('date');
+        $paginatedPosts = Paginate::collection($posts, 6);
+
+        return view('posts.index', [
+            'posts' => $paginatedPosts,
+        ]);
     }
 
     public function show(Sheet $post)
diff --git a/app/View/Components/Posts/Listposts.php b/app/View/Components/Posts/Listposts.php
new file mode 100644
index 0000000..2b13101
--- /dev/null
+++ b/app/View/Components/Posts/Listposts.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\View\Components\Posts;
+
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Collection;
+use Illuminate\View\Component;
+use Spatie\Sheets\Facades\Sheets;
+
+class Listposts extends Component
+{
+    public function __construct(public LengthAwarePaginator $posts)
+    {
+    }
+
+    public function render(): View
+    {
+        return view('components.posts.listposts');
+    }
+}
diff --git a/composer.json b/composer.json
index 9575106..bf3a5af 100644
--- a/composer.json
+++ b/composer.json
@@ -12,6 +12,7 @@
         "andcarpi/laravel-popper": "^0.9.4",
         "anhskohbo/no-captcha": "^3.5",
         "blade-ui-kit/blade-icons": "^1.5",
+        "creativecrafts/laravel-paginate-collection": "^0.2.4",
         "cviebrock/eloquent-sluggable": "^10.0",
         "dolejska-daniel/riot-api": "^5",
         "guzzlehttp/guzzle": "^7.2",
diff --git a/composer.lock b/composer.lock
index d5c3d2c..47d303c 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": "b84d17c5f2668acd3b38779559962eb9",
+    "content-hash": "977c4e8990bc192edf2ad99855f154dc",
     "packages": [
         {
             "name": "andcarpi/laravel-popper",
@@ -405,6 +405,77 @@
             },
             "time": "2023-09-17T07:26:20+00:00"
         },
+        {
+            "name": "creativecrafts/laravel-paginate-collection",
+            "version": "0.2.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/CreativeCrafts/laravel-paginate-collection.git",
+                "reference": "ee750374a8a02820c1f86e80a88bdc1e2fefcaf1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/CreativeCrafts/laravel-paginate-collection/zipball/ee750374a8a02820c1f86e80a88bdc1e2fefcaf1",
+                "reference": "ee750374a8a02820c1f86e80a88bdc1e2fefcaf1",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1",
+                "spatie/laravel-package-tools": "^1.14.0"
+            },
+            "require-dev": {
+                "laravel/pint": "^1.4",
+                "nunomaduro/collision": "^6.4",
+                "nunomaduro/larastan": "^2.4",
+                "orchestra/testbench": "^8.0",
+                "pestphp/pest": "^1.22",
+                "pestphp/pest-plugin-laravel": "^1.4",
+                "phpstan/extension-installer": "^1.2",
+                "phpstan/phpstan-deprecation-rules": "^1.1",
+                "phpstan/phpstan-phpunit": "^1.3",
+                "phpunit/phpunit": "^9.5",
+                "spatie/laravel-ray": "^1.32"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "CreativeCrafts\\Paginate\\PaginateServiceProvider"
+                    ],
+                    "aliases": {
+                        "Paginate": "CreativeCrafts\\Paginate\\Facades\\Paginate"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "CreativeCrafts\\Paginate\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Godspower",
+                    "email": "oduose4eva@gmail.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "A handy package to paginate laravel collection",
+            "homepage": "https://github.com/creativecrafts/laravel-paginate-collection",
+            "keywords": [
+                "creativeCrafts",
+                "laravel",
+                "laravel-paginate-collection"
+            ],
+            "support": {
+                "issues": "https://github.com/CreativeCrafts/laravel-paginate-collection/issues",
+                "source": "https://github.com/CreativeCrafts/laravel-paginate-collection/tree/0.2.4"
+            },
+            "time": "2023-02-21T20:22:50+00:00"
+        },
         {
             "name": "cviebrock/eloquent-sluggable",
             "version": "10.0.0",
diff --git a/content/posts/hello-world.md b/content/posts/hello-world.md
index d565e8a..3a708aa 100644
--- a/content/posts/hello-world.md
+++ b/content/posts/hello-world.md
@@ -1,9 +1,10 @@
 ---
-title: Hello, world!
-description: Welcome to Sheets!
-date: 2020-07-01
+title: Hello, I am a cat!
+description: Thumbnail is a cat.
+thumbnail: 'https://placekitten.com/1920/1080'
+date: 2022-10-01 # YYYY-MM-DD HH:MM:SS
 ---
 
 # Hello, world!
 
-Welcome to Sheets!
+meow?
diff --git a/resources/views/components/posts/listposts.blade.php b/resources/views/components/posts/listposts.blade.php
new file mode 100644
index 0000000..c3f8285
--- /dev/null
+++ b/resources/views/components/posts/listposts.blade.php
@@ -0,0 +1,24 @@
+@php use Carbon\Carbon; @endphp
+<div class="container mx-auto p-4 flex flex-col items-center justify-center mt-3">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 auto-cols-max w-full">
+        @foreach($posts as $post)
+            <article class="inline-block text-gray-200 bg-stone-800/40 shadow-md rounded-2xl border border-stone-800
+                hover:border-orange-500/10 hover:shadow-orange-500/10 items-center h-80 relative">
+                <span
+                    class="absolute top-4 left-4 text-sm text-gray-100 font-medium bg-black/60 px-1 py-1 rounded-lg">
+                    <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
+                </span>
+                <img src="{{ $post->thumbnail }}" alt="Post Thumbnail" class="w-full h-48 object-cover rounded-t-2xl">
+                <div class="p-4">
+                    <h2 class="text-xl font-bold mb-2 line-clamp-1" itemprop="name">{{ $post->title }}</h2>
+                    <p class="text-sm line-clamp-3" itemprop="headline">{{ $post->description }}</p>
+                </div>
+                <a href="{{ route('posts.show', $post->slug)}}" itemprop="url"
+                   class="absolute bottom-4 right-4 text-sm text-orange-400 hover:text-orange-600">Read more</a>
+            </article>
+        @endforeach
+    </div>
+    <div class="mt-4">
+        {{ $posts->links() }}
+    </div>
+</div>
diff --git a/resources/views/posts/index.blade.php b/resources/views/posts/index.blade.php
index 91f7bb2..10e1cb6 100644
--- a/resources/views/posts/index.blade.php
+++ b/resources/views/posts/index.blade.php
@@ -1,8 +1,7 @@
 @extends('layouts.app')
 
 @section('title', 'Heimerdinger.LoL • Posts')
-@section('description', 'Explore all champion skins on Heimerdinger.LoL. Find detailed information on popular skins
-such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!')
+@section('description', 'Explore all our blog posts on Heimerdinger.LoL. Posts about League of Legends and more.')
 
 @section('content')
     <section class="max-w-screen-xl mx-auto mt-12">
@@ -10,11 +9,8 @@ such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!')
             class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
         bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
             Posts</h1>
-        <h2 class="text-center text-orange-400 text-sm uppercase font-medium">Latest posts about League of Legends</h2>
-        @foreach($posts as $post)
-            {{ $post->title }}
-            {{ $post->description}}
-
-        @endforeach
+        <h2 class="text-center text-orange-400 text-sm uppercase font-medium">Our latest posts about League of
+            Legends</h2>
+        <x-posts.listposts :posts="$posts"/>
     </section>
 @endsection