diff --git a/src/App.tsx b/src/App.tsx
index 189a990c8..946a5f872 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,22 @@
 import React from 'react';
 import './App.css';
 import { getNumbers } from './utils';
+import { Pagination } from './components/Pagination';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(5);
+
   return (
     <div className="container">
       <h1>Items with Pagination</h1>
 
       <p className="lead" data-cy="info">
-        Page 1 (items 1 - 5 of 42)
+        Page {currentPage} (items {(currentPage - 1) * perPage + 1} -{' '}
+        {Math.min(currentPage * perPage, items.length)} of {items.length})
       </p>
 
       <div className="form-group row">
@@ -19,7 +24,13 @@ export const App: React.FC = () => {
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            value={perPage}
+            onChange={e => {
+              setPerPage(Number(e.target.value));
+              setCurrentPage(1);
+            }}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -33,77 +44,23 @@ export const App: React.FC = () => {
       </div>
 
       {/* Move this markup to Pagination */}
-      <ul className="pagination">
-        <li className="page-item disabled">
-          <a
-            data-cy="prevLink"
-            className="page-link"
-            href="#prev"
-            aria-disabled="true">
-            «
-          </a>
-        </li>
-        <li className="page-item active">
-          <a data-cy="pageLink" className="page-link" href="#1">
-            1
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#2">
-            2
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#3">
-            3
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#4">
-            4
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#5">
-            5
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#6">
-            6
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#7">
-            7
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#8">
-            8
-          </a>
-        </li>
-        <li className="page-item">
-          <a data-cy="pageLink" className="page-link" href="#9">
-            9
-          </a>
-        </li>
-        <li className="page-item">
-          <a
-            data-cy="nextLink"
-            className="page-link"
-            href="#next"
-            aria-disabled="false">
-            »
-          </a>
-        </li>
-      </ul>
+      <Pagination
+        total={items.length} // total number of items to paginate
+        perPage={perPage} // number of items per page
+        currentPage={currentPage} /* optional with 1 by default */
+        onPageChange={setCurrentPage}
+      />
+
       <ul>
-        <li data-cy="item">Item 1</li>
-        <li data-cy="item">Item 2</li>
-        <li data-cy="item">Item 3</li>
-        <li data-cy="item">Item 4</li>
-        <li data-cy="item">Item 5</li>
+        {items
+          .slice((currentPage - 1) * perPage, currentPage * perPage)
+          .map(item => {
+            return (
+              <li key={item} data-cy="item">
+                {item}
+              </li>
+            );
+          })}
       </ul>
     </div>
   );
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index e417a09fc..b26779141 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,90 @@
-export const Pagination = () => {};
+import cn from 'classnames';
+import { getNumbers } from '../../utils';
+
+type Props = {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange: (page: number) => void;
+};
+
+export const Pagination = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange,
+}: Props) => {
+  const pagesCount = Math.ceil(total / perPage);
+  const items = getNumbers(1, pagesCount);
+
+  const handlePrevClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    if (currentPage && currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNextClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    if (currentPage && currentPage < pagesCount) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handlePageClick = (
+    event: React.MouseEvent<HTMLAnchorElement>,
+    pageNumber: number,
+  ) => {
+    event.preventDefault();
+
+    if (pageNumber !== currentPage) {
+      onPageChange(pageNumber);
+    }
+  };
+
+  return (
+    <ul className="pagination">
+      <li className={cn('page-item', { disabled: currentPage === 1 })}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={currentPage === 1}
+          onClick={handlePrevClick}
+        >
+          «
+        </a>
+      </li>
+      {items.map(n => (
+        <li
+          key={n}
+          className={cn('page-item', {
+            active: currentPage === n,
+            disabled: n === currentPage,
+          })}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${n}`}
+            onClick={event => handlePageClick(event, n)}
+          >
+            {n}
+          </a>
+        </li>
+      ))}
+
+      <li className={cn('page-item', { disabled: currentPage === pagesCount })}>
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={currentPage === pagesCount}
+          onClick={handleNextClick}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};