diff --git a/frontend/app/puzzle-list/page.tsx b/frontend/app/puzzle-list/page.tsx
index 8706070..c130fb9 100644
--- a/frontend/app/puzzle-list/page.tsx
+++ b/frontend/app/puzzle-list/page.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import FilterBar from '@/components/puzzles/FilterBar';
 import { usePuzzles } from '@/hooks/usePuzzles';
 import type { PuzzleDifficulty, PuzzleFilters } from '@/lib/types/puzzles';
 import { Puzzle as PuzzleIcon, Clock, Zap } from 'lucide-react';
+import Pagination from '@/components/ui/Pagination';
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
@@ -20,6 +21,8 @@ const VALID_DIFFICULTIES: PuzzleDifficulty[] = [
   'ALL', 'BEGINNER', 'INTERMEDIATE', 'ADVANCED', 'EXPERT',
 ];
 
+const ITEMS_PER_PAGE_OPTIONS = [10, 20, 50];
+
 function parseFiltersFromParams(params: URLSearchParams): PuzzleFilters {
   const category  = params.get('category') ?? '';
   const rawDiff   = (params.get('difficulty') ?? '').toUpperCase() as PuzzleDifficulty;
@@ -27,6 +30,15 @@ function parseFiltersFromParams(params: URLSearchParams): PuzzleFilters {
   return { categoryId: category, difficulty };
 }
 
+function parsePaginationFromParams(params: URLSearchParams) {
+  const page = parseInt(params.get('page') ?? '1', 10);
+  const itemsPerPage = parseInt(params.get('itemsPerPage') ?? '10', 10);
+  return {
+    currentPage: Math.max(1, page),
+    itemsPerPage: ITEMS_PER_PAGE_OPTIONS.includes(itemsPerPage) ? itemsPerPage : 10,
+  };
+}
+
 // ─── Puzzle Card ─────────────────────────────────────────────────────────────
 
 interface PuzzleCardProps {
@@ -88,24 +100,64 @@ function PuzzleListContent() {
     parseFiltersFromParams(searchParams)
   );
 
+  const [pagination, setPagination] = useState(() =>
+    parsePaginationFromParams(searchParams)
+  );
+
   // Keep local state in sync if the browser URL changes externally (back/forward)
   useEffect(() => {
     setFilters(parseFiltersFromParams(searchParams));
+    setPagination(parsePaginationFromParams(searchParams));
   }, [searchParams]);
 
+  // Sync filters & pagination → URL
+  const updateURL = useCallback(
+    (nextFilters: PuzzleFilters, nextPagination: { currentPage: number; itemsPerPage: number }) => {
+      const params = new URLSearchParams();
+      if (nextFilters.categoryId)             params.set('category',   nextFilters.categoryId);
+      if (nextFilters.difficulty !== 'ALL')   params.set('difficulty', nextFilters.difficulty);
+      if (nextPagination.currentPage > 1)     params.set('page',       nextPagination.currentPage.toString());
+      if (nextPagination.itemsPerPage !== 10) params.set('itemsPerPage', nextPagination.itemsPerPage.toString());
+
+      const query = params.toString();
+      router.push(query ? `/puzzle-list?${query}` : '/puzzle-list', { scroll: false });
+    },
+    [router],
+  );
+
   // Sync filters → URL
   const handleFiltersChange = useCallback(
     (next: PuzzleFilters) => {
       setFilters(next);
+      // Reset to page 1 when filters change
+      const newPagination = { ...pagination, currentPage: 1 };
+      setPagination(newPagination);
+      updateURL(next, newPagination);
+    },
+    [pagination, updateURL],
+  );
 
-      const params = new URLSearchParams();
-      if (next.categoryId)             params.set('category',   next.categoryId);
-      if (next.difficulty !== 'ALL')   params.set('difficulty', next.difficulty);
+  // Handle pagination changes
+  const handlePageChange = useCallback(
+    (page: number) => {
+      const newPagination = { ...pagination, currentPage: page };
+      setPagination(newPagination);
+      updateURL(filters, newPagination);
+      
+      // Scroll to top smoothly
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    },
+    [filters, pagination, updateURL],
+  );
 
-      const query = params.toString();
-      router.push(query ? `/puzzle-list?${query}` : '/puzzle-list', { scroll: false });
+  // Handle items per page change
+  const handleItemsPerPageChange = useCallback(
+    (itemsPerPage: number) => {
+      const newPagination = { itemsPerPage, currentPage: 1 };
+      setPagination(newPagination);
+      updateURL(filters, newPagination);
     },
-    [router],
+    [filters, updateURL],
   );
 
   // Build query params for usePuzzles — omit 'ALL' (no filter)
@@ -116,6 +168,27 @@ function PuzzleListContent() {
 
   const { data: puzzles, isLoading, isError, error } = usePuzzles(puzzleQuery);
 
+  // Calculate pagination
+  const paginatedData = useMemo(() => {
+    if (!puzzles) return [];
+    
+    const startIndex = (pagination.currentPage - 1) * pagination.itemsPerPage;
+    const endIndex = startIndex + pagination.itemsPerPage;
+    return puzzles.slice(startIndex, endIndex);
+  }, [puzzles, pagination.currentPage, pagination.itemsPerPage]);
+
+  const totalPages = useMemo(() => {
+    if (!puzzles) return 0;
+    return Math.ceil(puzzles.length / pagination.itemsPerPage);
+  }, [puzzles, pagination.itemsPerPage]);
+
+  // Adjust current page if it exceeds total pages (e.g., after filtering)
+  useEffect(() => {
+    if (totalPages > 0 && pagination.currentPage > totalPages) {
+      handlePageChange(totalPages);
+    }
+  }, [totalPages, pagination.currentPage, handlePageChange]);
+
   return (
     <>
       {/* Filter bar */}
@@ -125,9 +198,33 @@ function PuzzleListContent() {
 
       {/* Results count */}
       {!isLoading && !isError && puzzles && (
-        <p className="mb-4 text-xs text-slate-500">
-          {puzzles.length} puzzle{puzzles.length !== 1 ? 's' : ''} found
-        </p>
+        <div className="mb-4 flex items-center justify-between">
+          <p className="text-xs text-slate-500">
+            {puzzles.length} puzzle{puzzles.length !== 1 ? 's' : ''} found
+            {totalPages > 1 && (
+              <span className="ml-2">
+                Showing {((pagination.currentPage - 1) * pagination.itemsPerPage) + 1}-
+                {Math.min(pagination.currentPage * pagination.itemsPerPage, puzzles.length)} of {puzzles.length}
+              </span>
+            )}
+          </p>
+          {totalPages > 1 && (
+            <div className="flex items-center gap-2 text-sm text-slate-400">
+              <span>Items per page:</span>
+              <select
+                value={pagination.itemsPerPage}
+                onChange={(e) => handleItemsPerPageChange(parseInt(e.target.value, 10))}
+                className="bg-slate-800 border border-slate-600 rounded px-2 py-1 text-slate-300 focus:outline-none focus:border-[#3B82F6]/40"
+              >
+                {ITEMS_PER_PAGE_OPTIONS.map(option => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
       )}
 
       {/* Loading skeleton */}
@@ -157,26 +254,37 @@ function PuzzleListContent() {
       {!isLoading && !isError && puzzles?.length === 0 && (
         <div className="flex flex-col items-center justify-center py-16 text-center gap-2">
           <PuzzleIcon className="h-10 w-10 text-slate-600" />
-          <p className="font-medium text-slate-400">No puzzles match your filters</p>
-          <p className="text-xs text-slate-600">Try adjusting the difficulty or category</p>
+          <p className="font-medium text-slate-400">No puzzles found</p>
+          <p className="text-xs text-slate-600">Try clearing your filters or adjusting your search.</p>
         </div>
       )}
 
       {/* Puzzle grid */}
       {!isLoading && !isError && puzzles && puzzles.length > 0 && (
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-          {puzzles.map((puzzle) => (
-            <PuzzleCard
-              key={puzzle.id}
-              id={puzzle.id}
-              title={puzzle.title}
-              description={puzzle.description}
-              difficulty={puzzle.difficulty}
-              type={puzzle.type}
-              timeLimit={puzzle.timeLimit}
+        <>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {paginatedData.map((puzzle) => (
+              <PuzzleCard
+                key={puzzle.id}
+                id={puzzle.id}
+                title={puzzle.title}
+                description={puzzle.description}
+                difficulty={puzzle.difficulty}
+                type={puzzle.type}
+                timeLimit={puzzle.timeLimit}
+              />
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <Pagination
+              currentPage={pagination.currentPage}
+              totalPages={totalPages}
+              onPageChange={handlePageChange}
             />
-          ))}
-        </div>
+          )}
+        </>
       )}
     </>
   );
diff --git a/frontend/components/ui/Pagination.tsx b/frontend/components/ui/Pagination.tsx
new file mode 100644
index 0000000..598c283
--- /dev/null
+++ b/frontend/components/ui/Pagination.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+const ITEMS_PER_PAGE_OPTIONS = [10, 20, 50];
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  // Generate page numbers to display with ellipsis
+  const pageNumbers = useMemo(() => {
+    if (totalPages <= 7) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    const pages: (number | string)[] = [];
+    
+    // Always show first page
+    pages.push(1);
+    
+    if (currentPage <= 4) {
+      // Show pages 2-5 when current is near start
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push('...');
+      pages.push(totalPages);
+    } else if (currentPage >= totalPages - 3) {
+      // Show ellipsis and last 4 pages when current is near end
+      pages.push('...');
+      for (let i = totalPages - 4; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Show ellipsis on both sides with current page in middle
+      pages.push('...');
+      for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+        pages.push(i);
+      }
+      pages.push('...');
+      pages.push(totalPages);
+    }
+    
+    return pages;
+  }, [currentPage, totalPages]);
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handlePageClick = (page: number) => {
+    onPageChange(page);
+  };
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-4 mt-8">
+      {/* Page Navigation */}
+      <div className="flex items-center gap-2">
+        {/* Previous Button */}
+        <button
+          onClick={handlePrevious}
+          disabled={currentPage === 1}
+          className={`
+            flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg border transition-all duration-200
+            ${currentPage === 1
+              ? 'text-slate-500 border-slate-700 cursor-not-allowed'
+              : 'text-slate-300 border-slate-600 hover:border-[#3B82F6]/40 hover:text-white hover:bg-white/[0.05]'
+            }
+          `}
+          aria-label="Previous page"
+        >
+          <ChevronLeft size={16} />
+          Previous
+        </button>
+
+        {/* Page Numbers */}
+        <div className="flex items-center gap-1">
+          {pageNumbers.map((page, index) => (
+            page === '...' ? (
+              <span key={`ellipsis-${index}`} className="px-2 text-slate-500">
+                ...
+              </span>
+            ) : (
+              <button
+                key={page}
+                onClick={() => handlePageClick(page as number)}
+                className={`
+                  px-3 py-2 text-sm font-medium rounded-lg border transition-all duration-200
+                  ${currentPage === page
+                    ? 'bg-[#3B82F6] text-white border-[#3B82F6]'
+                    : 'text-slate-300 border-slate-600 hover:border-[#3B82F6]/40 hover:text-white hover:bg-white/[0.05]'
+                  }
+                `}
+                aria-label={`Go to page ${page}`}
+                aria-current={currentPage === page ? 'page' : undefined}
+              >
+                {page}
+              </button>
+            )
+          ))}
+        </div>
+
+        {/* Next Button */}
+        <button
+          onClick={handleNext}
+          disabled={currentPage === totalPages}
+          className={`
+            flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg border transition-all duration-200
+            ${currentPage === totalPages
+              ? 'text-slate-500 border-slate-700 cursor-not-allowed'
+              : 'text-slate-300 border-slate-600 hover:border-[#3B82F6]/40 hover:text-white hover:bg-white/[0.05]'
+            }
+          `}
+          aria-label="Next page"
+        >
+          Next
+          <ChevronRight size={16} />
+        </button>
+      </div>
+
+      {/* Items per page selector */}
+      <div className="flex items-center gap-2 text-sm text-slate-400">
+        <span>Items per page:</span>
+        <select
+          value={ITEMS_PER_PAGE_OPTIONS[0]} // This will be handled by parent component
+          onChange={(e) => {
+            // This will be handled by parent component
+            const newItemsPerPage = parseInt(e.target.value);
+            // Trigger page change with items per page info
+            onPageChange(currentPage); // Parent will handle items per page change
+          }}
+          className="bg-slate-800 border border-slate-600 rounded px-2 py-1 text-slate-300 focus:outline-none focus:border-[#3B82F6]/40"
+        >
+          {ITEMS_PER_PAGE_OPTIONS.map(option => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/package-lock.json b/package-lock.json
index b8ad7f0..2765a97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,8 +16,8 @@
       "dependencies": {
         "@nestjs/common": "^11.1.14",
         "@nestjs/core": "^11.1.14",
-        "framer-motion": "^12.34.3",
         "@tanstack/react-query": "^5.90.21",
+        "framer-motion": "^12.34.3",
         "minimatch": "^10.1.1",
         "reflect-metadata": "^0.2.2",
         "rxjs": "^7.8.2",
@@ -243,7 +243,7 @@
     },
     "backend/node_modules/@swc/core": {
       "version": "1.13.5",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "peer": true,
@@ -4637,6 +4637,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4653,6 +4654,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4669,6 +4671,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4685,6 +4688,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4701,6 +4705,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4717,6 +4722,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4733,6 +4739,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4749,6 +4756,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4765,6 +4773,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4781,6 +4790,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4794,7 +4804,7 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
       "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/@swc/helpers": {
@@ -4810,7 +4820,7 @@
       "version": "0.1.25",
       "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.25.tgz",
       "integrity": "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/counter": "^0.1.3"