diff --git a/components/pagination.tsx b/components/pagination.tsx
index bb04780..4ff4a6c 100644
--- a/components/pagination.tsx
+++ b/components/pagination.tsx
@@ -1,109 +1,113 @@
 "use client";
-import { Button } from "@/components/ui/button";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
 
 type PaginationProps = {
-	totalPages: number;
-	currentPage: number;
-	maxVisible?: number;
+  totalPages: number;
+  currentPage: number;
+  maxVisible?: number;
 };
 
 export default function Pagination({
-	totalPages,
-	currentPage,
-	maxVisible = 4,
+  totalPages,
+  currentPage,
+  maxVisible = 4,
 }: PaginationProps) {
-	const searchParams = useSearchParams();
-	const activePage = searchParams.get("page") ?? 1;
-	const router = useRouter();
+  const searchParams = useSearchParams();
+  const activePage = searchParams.get("page") ?? 1;
+  const router = useRouter();
 
-	const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
+  const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
 
-	useEffect(() => {
-		const params = Object.fromEntries(
-			Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
-		);
-		setQueryParams(params);
-	}, [searchParams]);
+  useEffect(() => {
+    const params = Object.fromEntries(
+      Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
+    );
+    setQueryParams(params);
+  }, [searchParams]);
 
-	useEffect(() => {
-		if (!searchParams.has("page")) {
-			router.replace(`?page=1${IncludeQueries()}`);
-		}
-	});
+  useEffect(() => {
+    if (!searchParams.has("page")) {
+      router.replace(`?page=1${IncludeQueries()}`);
+    }
+  });
 
-	function IncludeQueries() {
-		return Object.entries(queryParams)
-			.map(([key, value]) => `&${key}=${value}`)
-			.join("");
-	}
+  function IncludeQueries() {
+    return Object.entries(queryParams)
+      .map(([key, value]) => `&${key}=${value}`)
+      .join("");
+  }
 
-	const generatePageNumbers = (): (number | string)[] => {
-		const halfVisible = Math.floor(maxVisible / 2);
-		let startPage = Math.max(currentPage - halfVisible, 1);
-		const endPage = Math.min(startPage + maxVisible - 1, totalPages);
+  const generatePageNumbers = (): (number | string)[] => {
+    const halfVisible = Math.floor(maxVisible / 2);
+    let startPage = Math.max(currentPage - halfVisible, 1);
+    const endPage = Math.min(startPage + maxVisible - 1, totalPages);
 
-		if (endPage - startPage + 1 < maxVisible) {
-			startPage = Math.max(endPage - maxVisible + 1, 1);
-		}
+    if (endPage - startPage + 1 < maxVisible) {
+      startPage = Math.max(endPage - maxVisible + 1, 1);
+    }
 
-		const pageNumbers: (number | string)[] = [];
+    const pageNumbers: (number | string)[] = [];
 
-		if (startPage > 1) {
-			pageNumbers.push(1);
-			if (startPage > 2) pageNumbers.push("...");
-		}
+    if (startPage > 1) {
+      pageNumbers.push(1);
+      if (startPage > 2) pageNumbers.push("...");
+    }
 
-		for (let i = startPage; i <= endPage; i++) {
-			pageNumbers.push(i);
-		}
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(i);
+    }
 
-		if (endPage < totalPages) {
-			if (endPage < totalPages - 1) pageNumbers.push("...");
-			pageNumbers.push(totalPages);
-		}
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) pageNumbers.push("...");
+      pageNumbers.push(totalPages);
+    }
 
-		return pageNumbers;
-	};
+    return pageNumbers;
+  };
 
-	const pageNumbers = generatePageNumbers();
+  const pageNumbers = generatePageNumbers();
 
-	return (
-		<div className="flex items-center justify-center space-x-2 my-4">
-			{currentPage > 1 && (
-				<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
-					<Button variant="secondary" className="flex items-center gap-2">
-						<ArrowLeftIcon className="h-4 w-4" />
-					</Button>
-				</Link>
-			)}
+  if (totalPages <= 1) {
+    return null;
+  }
 
-			{pageNumbers.map((page) => (
-				<React.Fragment key={`${page}`}>
-					{typeof page === "number" ? (
-						<Link href={`?page=${page}${IncludeQueries()}`}>
-							<Button
-								variant={Number(activePage) === page ? "default" : "outline"}
-							>
-								{page}
-							</Button>
-						</Link>
-					) : (
-						<span className="px-2">...</span>
-					)}
-				</React.Fragment>
-			))}
+  return (
+    <div className="flex items-center justify-center space-x-2 my-4">
+      {currentPage > 1 && (
+        <Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
+          <Button variant="secondary" className="flex items-center gap-2">
+            <ArrowLeftIcon className="h-4 w-4" />
+          </Button>
+        </Link>
+      )}
 
-			{currentPage < totalPages && (
-				<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
-					<Button variant="secondary" className="flex items-center gap-2">
-						<ArrowRightIcon className="h-4 w-4" />
-					</Button>
-				</Link>
-			)}
-		</div>
-	);
+      {pageNumbers.map((page) => (
+        <React.Fragment key={`${page}`}>
+          {typeof page === "number" ? (
+            <Link href={`?page=${page}${IncludeQueries()}`}>
+              <Button
+                variant={Number(activePage) === page ? "default" : "outline"}
+              >
+                {page}
+              </Button>
+            </Link>
+          ) : (
+            <span className="px-2">...</span>
+          )}
+        </React.Fragment>
+      ))}
+
+      {currentPage < totalPages && (
+        <Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
+          <Button variant="secondary" className="flex items-center gap-2">
+            <ArrowRightIcon className="h-4 w-4" />
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
 }