diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index b25fc5ef..e1eb9571 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -84,129 +84,136 @@ const Pagination = ({ pagination, setPage }: Props) => {
       <br />
       {totalHits > 1 && (
         <>
-          {currentPage > 1 && (
-            <>
-              <Link
-                to={`${Routes.Home}?${params}`}
-                className="pagination-item"
-                onClick={event => {
-                  event.preventDefault();
-                  setPage(0);
-                }}
-              >
-                First
-              </Link>{' '}
-            </>
-          )}
-
-          {prev_pages !== false &&
-            prev_pages &&
-            prev_pages.map((page: number) => {
-              if (hasParams) {
-                return (
-                  <Fragment key={page}>
-                    <Link
-                      to={`${Routes.Home}?page=${page}&${params}`}
-                      className="pagination-item"
-                      onClick={event => {
-                        event.preventDefault();
-                        setPage(page);
-                      }}
-                    >
-                      {page}
-                    </Link>{' '}
-                  </Fragment>
-                );
-              } else {
-                return (
-                  <Fragment key={page}>
-                    <Link
-                      to={`${Routes.Home}?page=${page}`}
-                      className="pagination-item"
-                      onClick={event => {
-                        event.preventDefault();
-                        setPage(page);
-                      }}
-                    >
-                      {page}
-                    </Link>{' '}
-                  </Fragment>
-                );
-              }
-            })}
-
-          {currentPage > 0 && <span>{`< Page ${currentPage} `}</span>}
-
-          {next_pages && next_pages.length > 0 && (
-            <>
-              <span>{'>'}</span>{' '}
-              {next_pages.map(page => {
-                if (hasParams) {
-                  return (
-                    <Fragment key={page}>
-                      <a
-                        className="pagination-item"
-                        href={`?page=${page}&${params}`}
-                        onClick={event => {
-                          event.preventDefault();
-                          setPage(page);
-                        }}
-                      >
-                        {page}
-                      </a>{' '}
-                    </Fragment>
-                  );
-                } else {
-                  return (
-                    <Fragment key={page}>
-                      <a
-                        className="pagination-item"
-                        href={`?page=${page}`}
-                        onClick={event => {
-                          event.preventDefault();
-                          setPage(page);
-                        }}
-                      >
-                        {page}
-                      </a>{' '}
-                    </Fragment>
-                  );
-                }
-              })}
-            </>
-          )}
-
-          {lastPage > 0 && (
-            <>
-              {hasParams && (
-                <a
+          <span>
+            {currentPage > 1 && (
+              <>
+                <Link
+                  to={`${Routes.Home}?${params}`}
                   className="pagination-item"
-                  href={`?page=${lastPage}&${params}`}
                   onClick={event => {
                     event.preventDefault();
-                    setPage(lastPage || 0);
+                    setPage(0);
                   }}
                 >
-                  {hasMaxHits && `Max (${lastPage})`}
-                  {!hasMaxHits && `Last (${lastPage})`}
-                </a>
+                  First
+                </Link>{' '}
+              </>
+            )}
+
+            {prev_pages !== false && prev_pages && (
+              <>
+                {prev_pages.map((page: number) => {
+                  if (hasParams) {
+                    return (
+                      <Fragment key={page}>
+                        <Link
+                          to={`${Routes.Home}?page=${page}&${params}`}
+                          className="pagination-item"
+                          onClick={event => {
+                            event.preventDefault();
+                            setPage(page);
+                          }}
+                        >
+                          {page}
+                        </Link>{' '}
+                      </Fragment>
+                    );
+                  } else {
+                    return (
+                      <Fragment key={page}>
+                        <Link
+                          to={`${Routes.Home}?page=${page}`}
+                          className="pagination-item"
+                          onClick={event => {
+                            event.preventDefault();
+                            setPage(page);
+                          }}
+                        >
+                          {page}
+                        </Link>{' '}
+                      </Fragment>
+                    );
+                  }
+                })}
+              </>
+            )}
+          </span>
+          {currentPage > 0 && (
+            <span>{`< Page ${currentPage} ${next_pages && next_pages.length > 0 ? '>' : ''}`}</span>
+          )}
+          <span>
+            <>
+              {next_pages && next_pages.length > 0 && (
+                <>
+                  {next_pages.map(page => {
+                    if (hasParams) {
+                      return (
+                        <Fragment key={page}>
+                          <a
+                            className="pagination-item"
+                            href={`?page=${page}&${params}`}
+                            onClick={event => {
+                              event.preventDefault();
+                              setPage(page);
+                            }}
+                          >
+                            {page}
+                          </a>{' '}
+                        </Fragment>
+                      );
+                    } else {
+                      return (
+                        <Fragment key={page}>
+                          <a
+                            className="pagination-item"
+                            href={`?page=${page}`}
+                            onClick={event => {
+                              event.preventDefault();
+                              setPage(page);
+                            }}
+                          >
+                            {page}
+                          </a>{' '}
+                        </Fragment>
+                      );
+                    }
+                  })}
+                </>
               )}
 
-              {!hasParams && (
-                <a
-                  className="pagination-item"
-                  href={`?page=${lastPage}`}
-                  onClick={event => {
-                    event.preventDefault();
-                    setPage(lastPage || 0);
-                  }}
-                >
-                  {hasMaxHits && `Max (${lastPage})`}
-                  {!hasMaxHits && `Last (${lastPage})`}
-                </a>
+              {lastPage > 0 && (
+                <>
+                  {hasParams && (
+                    <a
+                      className="pagination-item"
+                      href={`?page=${lastPage}&${params}`}
+                      onClick={event => {
+                        event.preventDefault();
+                        setPage(lastPage || 0);
+                      }}
+                    >
+                      {hasMaxHits && `Max (${lastPage})`}
+                      {!hasMaxHits && `Last (${lastPage})`}
+                    </a>
+                  )}
+
+                  {!hasParams && (
+                    <a
+                      className="pagination-item"
+                      href={`?page=${lastPage}`}
+                      onClick={event => {
+                        event.preventDefault();
+                        setPage(lastPage || 0);
+                      }}
+                    >
+                      {hasMaxHits && `Max (${lastPage})`}
+                      {!hasMaxHits && `Last (${lastPage})`}
+                    </a>
+                  )}
+                </>
               )}
             </>
-          )}
+          </span>
         </>
       )}
     </div>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 48037f6d..2760a356 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -709,14 +709,22 @@ video:-webkit-full-screen {
 /* pagination */
 .pagination {
   padding: 30px 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
 
+.pagination span {
+  padding: 0 10px;
+}
+
 .pagination-item {
   padding: 5px;
   border: 1px solid;
+  margin: 0 2px;
 }
 
 /* info box */
@@ -1451,6 +1459,13 @@ video:-webkit-full-screen {
   label {
     text-align: unset;
   }
+  .pagination {
+    flex-wrap: wrap;
+    row-gap: 1.2rem;
+  }
+  .pagination span {
+    width: 100%;
+  }
 }
 
 .video-popup-menu img {