diff --git a/resources/assets/src/components/Pagination.tsx b/resources/assets/src/components/Pagination.tsx
index 4b24e531..3feadd0f 100644
--- a/resources/assets/src/components/Pagination.tsx
+++ b/resources/assets/src/components/Pagination.tsx
@@ -17,6 +17,10 @@ export const labels = {
 const Pagination: React.FC<Props> = props => {
   const { page, totalPages, onChange } = props
 
+  if (totalPages < 1) {
+    return null
+  }
+
   return (
     <ul className="pagination">
       <PaginationItem disabled={page === 1} onClick={() => onChange(1)}>
diff --git a/resources/assets/tests/components/Pagination.test.tsx b/resources/assets/tests/components/Pagination.test.tsx
index 39771699..f948e01d 100644
--- a/resources/assets/tests/components/Pagination.test.tsx
+++ b/resources/assets/tests/components/Pagination.test.tsx
@@ -2,6 +2,16 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import Pagination, { labels } from '@/components/Pagination'
 
+test('hide when total pages is invalid', () => {
+  const { queryByText } = render(
+    <Pagination page={1} totalPages={0} onChange={() => {}} />,
+  )
+  expect(queryByText(labels.first)).not.toBeInTheDocument()
+  expect(queryByText(labels.prev)).not.toBeInTheDocument()
+  expect(queryByText(labels.next)).not.toBeInTheDocument()
+  expect(queryByText(labels.last)).not.toBeInTheDocument()
+})
+
 describe('first page', () => {
   it('enabled', () => {
     const mock = jest.fn()