diff --git a/app/Http/Controllers/FrontMemeController.php b/app/Http/Controllers/FrontMemeController.php
index e08210d..3c7cc56 100644
--- a/app/Http/Controllers/FrontMemeController.php
+++ b/app/Http/Controllers/FrontMemeController.php
@@ -25,7 +25,7 @@ private function getMemes(?string $search = null): Response
     {
         $query = MemeMedia::query()
             ->where('is_enabled', true)
-            ->orderBy('created_at', 'desc');
+            ->orderBy('id', 'desc');
 
         // Search functionality
         if ($search) {
@@ -39,7 +39,7 @@ private function getMemes(?string $search = null): Response
             });
         }
 
-        $memes = $query->paginate(12);
+        $memes = $query->cursorPaginate(24);
 
         // Get available types for filter
         $types = MemeMedia::where('is_enabled', true)
diff --git a/resources/js/pages/memes/index.tsx b/resources/js/pages/memes/index.tsx
index 0796725..dfe3590 100644
--- a/resources/js/pages/memes/index.tsx
+++ b/resources/js/pages/memes/index.tsx
@@ -25,23 +25,18 @@ interface MemeMedia {
     slug: string;
 }
 
-interface PaginationLinks {
-    url: string | null;
-    label: string;
-    active: boolean;
-}
-
-interface PaginatedMemes {
+interface CursorPaginatedMemes {
     data: MemeMedia[];
-    current_page: number;
-    last_page: number;
+    next_cursor: string | null;
+    prev_cursor: string | null;
+    next_page_url: string | null;
+    prev_page_url: string | null;
     per_page: number;
-    total: number;
-    links: PaginationLinks[];
+    path: string;
 }
 
 interface Props {
-    memes: PaginatedMemes;
+    memes: CursorPaginatedMemes;
     types: string[];
     popularKeywords: string[];
     filters: {
@@ -75,10 +70,6 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
         router.get(route('memes.search', urlSegment));
     };
 
-    const handlePageChange = (url: string) => {
-        router.get(url);
-    };
-
     return (
         <>
             <div className="min-h-screen bg-neutral-50 pb-10 dark:bg-black">
@@ -148,13 +139,6 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
                         </CardContent>
                     </Card>
 
-                    {/* Results Count */}
-                    <div className="mb-6 flex items-center justify-between">
-                        <p className="text-muted-foreground">
-                            Showing {memes.data.length} of {memes.total} memes
-                        </p>
-                    </div>
-
                     {/* Memes Grid */}
                     <div className="xs:grid-cols-2 mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                         {memes.data.map((meme) => (
@@ -197,19 +181,39 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
                         ))}
                     </div>
 
-                    {/* Pagination */}
-                    {memes.last_page > 1 && (
-                        <div className="flex items-center justify-center gap-2">
-                            {memes.links.map((link, index) => (
-                                <Button
-                                    key={index}
-                                    variant={link.active ? 'default' : 'outline'}
-                                    size="sm"
-                                    onClick={() => link.url && handlePageChange(link.url)}
-                                    disabled={!link.url}
-                                    dangerouslySetInnerHTML={{ __html: link.label }}
-                                />
-                            ))}
+                    {/* Cursor Pagination */}
+                    {(memes.next_page_url || memes.prev_page_url) && (
+                        <div className="flex flex-col items-center gap-4">
+                            <div className="flex items-center justify-center gap-4">
+                                <div>
+                                    {memes.prev_page_url && (
+                                        <Link
+                                            href={memes.prev_page_url}
+                                            className="text-muted-foreground border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex w-32 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors"
+                                        >
+                                            ← Previous
+                                        </Link>
+                                    )}
+                                </div>
+                                <div>
+                                    {memes.next_page_url && (
+                                        <Link
+                                            href={memes.next_page_url}
+                                            className="text-muted-foreground border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex w-32 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors"
+                                        >
+                                            Next →
+                                        </Link>
+                                    )}
+                                </div>
+                            </div>
+                            {memes.prev_page_url && (
+                                <Link
+                                    href={route('memes.index', { ...(filters.search && { search: filters.search }) })}
+                                    className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                                >
+                                    ← Back to first page
+                                </Link>
+                            )}
                         </div>
                     )}
                 </div>