diff --git a/components/Paginator.tsx b/components/Paginator.tsx
index 53a3669..48aa977 100644
--- a/components/Paginator.tsx
+++ b/components/Paginator.tsx
@@ -1,43 +1,22 @@
 import Link from 'next/link'
 const Paginator = ({ currentPage, totalPage, pathname }:PaginatorProps):JSX.Element => {
-	const pages = [1, currentPage >= totalPage - 1 ? totalPage - 2 : currentPage - 1, currentPage <= 2 ? 2 : currentPage >= totalPage - 1 ? totalPage - 1 : currentPage, currentPage <= 2 ? 3 : currentPage + 1, totalPage  ]
+	let pages = []
+	if(currentPage < 4) pages = [ 1, totalPage < 2 ? null : 2, totalPage < 3 ? null : 3, totalPage < 4 ? null : 4, totalPage < 5 ? null : 5 ]
+	else if(currentPage > totalPage - 3) pages = [ totalPage - 4 < 1 ? null : totalPage - 4, totalPage - 3 < 1 ? null : totalPage - 3, totalPage - 2 < 1 ? null : totalPage - 2, totalPage - 1 < 1 ? null : totalPage - 1, totalPage ]
+	else pages = [ currentPage - 2 < 1 ? null : currentPage - 2, currentPage - 1 < 1 ? null : currentPage - 1, currentPage, currentPage + 1 > totalPage ? null : currentPage + 1, currentPage + 2 > totalPage ? null : currentPage + 2 ]
+	pages = pages.filter(el => el)
 	return <div className='flex flex-col items-center my-12 text-center justify-center'>
-		<div className='flex text-gray-700 dark:text-gray-400'>
+		<div className='flex'>
 			<Link href={{ pathname, query: { page: currentPage - 1} }}>
 				<a className={`${currentPage === 1 ? 'invisible' : ''} h-12 w-12 mr-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
 					<i className='fas fa-chevron-left'></i>
 				</a>
 			</Link>
-			<div className='hidden lg:flex h-12 font-medium rounded-full bg-gray-200 dark:bg-discord-black'>
-				<Link href={{ pathname, query: { page: pages[0] } }}>
-					<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-l-full ${pages[0] === currentPage ? 'bg-gray-300 dark:bg-discord-dark-hover' : ' hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{pages[0]}</a>
-				</Link>
-				{
-					pages[1] - pages[0] <= 1 ? pages[2] - pages[0] <= 1 ? '' : <a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a> : <>
-						<a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a>
-						<Link href={{ pathname, query: { page: pages[1] } }}>
-							<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 dark:hover:bg-discord-dark-hover'>{pages[1]}</a>
-						</Link>
-					</>
-				}
-				<Link href={{ pathname, query: { page: pages[2] } }}>
-					<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${currentPage === 1 || currentPage === totalPage ? 'hover:bg-gray-300 dark:hover:bg-discord-dark-hover' : 'bg-gray-300 dark:bg-discord-dark-hover '}`}>{pages[2] === pages[4] ? pages[4] - 1 : pages[2]}</a>
-				</Link>
-				{
-					pages[4] - pages[3] <= 1 ? pages[4] - pages[2] <= 1 ? '' : <a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a> : <>
-						<Link href={{ pathname, query: { page: pages[3] } }}>
-							<a className='w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-300 dark:hover:bg-discord-dark-hover'>{pages[3]}</a>
-						</Link>
-						<a className='w-12 md:flex justify-center items-center leading-5 transition duration-150 ease-in'>...</a>
-					</>
-				}
-				<Link href={{ pathname, query: { page: pages[4] } }}>
-					<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in rounded-r-full ${pages[4] === currentPage ? 'bg-gray-300 dark:bg-discord-dark-hover' : ' hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{pages[4]}</a>
-				</Link>
-			</div>
-			<a className='flex lg:hidden h-12 w-12 ml-1 justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center'>
-				{currentPage}
-			</a>
+			{
+				pages.map((el, i) => <Link key={i} href={{ pathname, query: { page: el } }}>
+					<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${i===0 ? 'rounded-l-full' : i===pages.length-1 ? 'rounded-r-full' : ''} ${currentPage === el ? 'bg-gray-300 dark:bg-discord-dark-hover' : 'bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{el}</a>
+				</Link>)
+			}
 			<Link href={{ pathname, query: { page: currentPage + 1} }}>
 				<a className={`${currentPage === totalPage ? 'invisible' : '' } h-12 w-12 ml-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
 					<i className='fas fa-chevron-right'></i>