diff --git a/README.md b/README.md
index be8a8c6b6..959bb9981 100644
--- a/README.md
+++ b/README.md
@@ -2,29 +2,31 @@
 
 > Here is the [working version](https://mate-academy.github.io/react_pagination/)
 
-You a given a list of items and markup for the `Pagination`. Implement the 
+[DEMO LINK](https://ikseloi.github.io/react_pagination/)
+
+You a given a list of items and markup for the `Pagination`. Implement the
 `Pagination` as a stateless component to show only the items for a current page.
 
 1. The `Pagination` should be used with the next props:
-    ```jsx harmony
-    <Pagination
-      total={42} // total number of items to paginate
-      perPage={5} // number of items per page
-      currentPage={1} /* optional with 1 by default */
-      onPageChange={(page) => { ... }}
-    />
-    ```
+   ```jsx harmony
+   <Pagination
+     total={42} // total number of items to paginate
+     perPage={5} // number of items per page
+     currentPage={1} /* optional with 1 by default */
+     onPageChange={(page) => { ... }}
+   />
+   ```
 1. Keep the HTML stucture `data-cy` attributes;
 1. Show all the existing pages considering `total` and `perPage`
 1. Current page should be highlighted with `li.active`;
 1. `onPageChange` callback should be triggered only if page was changed;
 1. The `App` should listen to the `onPageChange` and save a new page;
 1. `«` and `»` links should open the prev and the next pages accordingly
-    - disable each of them if it is already the first or the last page (use `li.disabled` and `a[aria-disabled="true"]`)
+   - disable each of them if it is already the first or the last page (use `li.disabled` and `a[aria-disabled="true"]`)
 1. Show the pagination info inside `data-cy="info"` in the next format `Page 1 (items 1 - 5 of 42)`;
 1. Implement the `<select data-cy="perPageSelector">` with `3`, `5`, `10`, `20` options to change the `perPage`;
-    - show the 1st page after changing a `perPage`;
-1. (*) Use React Router to save `?page=2&perPage=7` in the URL and apply them on page load
+   - show the 1st page after changing a `perPage`;
+1. (\*) Use React Router to save `?page=2&perPage=7` in the URL and apply them on page load
 
 ## Instructions
 
@@ -32,4 +34,3 @@ You a given a list of items and markup for the `Pagination`. Implement the
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_pagination/) and add it to the PR description.
diff --git a/src/App.tsx b/src/App.tsx
index 189a990c8..3e6946923 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,29 @@
-import React from 'react';
-import './App.css';
+import React, { useState } from 'react';
+
 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] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+
+  const visisbleItems = items.slice(
+    (currentPage - 1) * perPage,
+    currentPage * perPage,
+  );
+
+  const startItem = (currentPage - 1) * perPage + 1;
+  const endItem = Math.min(currentPage * perPage, items.length);
+
   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 {startItem} - {endItem} of {items.length})
       </p>
 
       <div className="form-group row">
@@ -19,7 +31,13 @@ export const App: React.FC = () => {
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            value={perPage}
+            onChange={event => {
+              setCurrentPage(1);
+              setPerPage(Number(event.target.value));
+            }}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -33,13 +51,14 @@ export const App: React.FC = () => {
       </div>
 
       {/* Move this markup to Pagination */}
-      <ul className="pagination">
+      {/* <ul className="pagination">
         <li className="page-item disabled">
           <a
             data-cy="prevLink"
             className="page-link"
             href="#prev"
-            aria-disabled="true">
+            aria-disabled="true"
+          >
             «
           </a>
         </li>
@@ -93,17 +112,34 @@ export const App: React.FC = () => {
             data-cy="nextLink"
             className="page-link"
             href="#next"
-            aria-disabled="false">
+            aria-disabled="false"
+          >
             »
           </a>
         </li>
-      </ul>
-      <ul>
+      </ul> */}
+
+      <Pagination
+        total={items.length}
+        perPage={perPage}
+        currentPage={currentPage}
+        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>
+      </ul> */}
+
+      <ul>
+        {visisbleItems.map((item, idx) => (
+          <li key={idx} data-cy="item">
+            {item}
+          </li>
+        ))}
       </ul>
     </div>
   );
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index e417a09fc..a86c1abfa 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,80 @@
-export const Pagination = () => {};
+import { getNumbers } from '../../utils';
+
+interface PaginationProps {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pagination = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange,
+}: PaginationProps) => {
+  const totalPages: number = Math.ceil(total / perPage);
+  const pages: number[] = getNumbers(1, totalPages);
+
+  return (
+    <ul className="pagination">
+      <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={currentPage === 1}
+          onClick={event => {
+            event.preventDefault();
+            if (currentPage > 1) {
+              onPageChange(currentPage - 1);
+            }
+          }}
+        >
+          «
+        </a>
+      </li>
+
+      {pages.map((pageNumber: number) => (
+        <li
+          key={pageNumber}
+          className={`page-item ${pageNumber === currentPage ? 'active' : ''}`}
+        >
+          <a
+            href={`#${pageNumber}`}
+            className="page-link"
+            data-cy="pageLink"
+            onClick={event => {
+              event.preventDefault();
+              if (pageNumber !== currentPage) {
+                onPageChange(pageNumber);
+              }
+            }}
+          >
+            {pageNumber}
+          </a>
+        </li>
+      ))}
+
+      <li
+        className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}
+      >
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={currentPage === totalPages}
+          onClick={event => {
+            event.preventDefault();
+
+            if (currentPage < totalPages) {
+              onPageChange(currentPage + 1);
+            }
+          }}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};