diff --git a/src/components/pagination/table-pagination.tsx b/src/components/pagination/table-pagination.tsx
index 5c7fc9f5..36b5d572 100644
--- a/src/components/pagination/table-pagination.tsx
+++ b/src/components/pagination/table-pagination.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 
 import { useTheme } from 'styled-components';
-import { Text, SelectInput, Button } from 'components';
+import { Text, SelectInput, SelectInputProps, Button } from 'components';
 import { usePagination } from './usePagination';
 import { StyledPagination } from './styles';
 import { additionalStyles } from '../select/style';
@@ -25,8 +25,16 @@ export type TablePaginationProps = {
   onChangePage: (page: number | PaginationOption) => void;
   onChangeRowsPerPage: any;
   page: number;
+  /**
+   *  used to pass props to the page select input
+   */
+  pageSelectProps?: SelectInputProps;
   rowsPerPage: number;
   rowsPerPageOptions?: any;
+  /**
+   * used to pass props to the rows per page select input
+   */
+  rowsPerPageSelectProps?: SelectInputProps;
   selectStyles?: {
     [key: string]: (...args) => { [k: string]: any };
   };
@@ -88,6 +96,8 @@ export const TablePagination = ({
       `Displaying ${rangeStart}-${rangeEnd} of ${pCount} items`,
     currentPage: (currentPage: number, pagesAmount: number) => `${currentPage} of ${pagesAmount} pages`,
   },
+  rowsPerPageSelectProps = {},
+  pageSelectProps = {},
   ...otherProps
 }: TablePaginationProps): JSX.Element => {
   const [isFirst, isLast, pagesAmount] = usePagination({ page, count, rowsPerPage });
@@ -114,6 +124,7 @@ export const TablePagination = ({
           {locales.itemsPerPage}
         </Text>
         <SelectInput
+          {...rowsPerPageSelectProps}
           options={rowsPerPageOptions}
           className='paginationSelect'
           id='rowsPerPage'
@@ -142,6 +153,7 @@ export const TablePagination = ({
           }}
         />
         <SelectInput
+          {...pageSelectProps}
           options={pagesOptions}
           className='paginationSelect'
           id='page'
diff --git a/stories/pagination/TablePagination.stories.tsx b/stories/pagination/TablePagination.stories.tsx
new file mode 100644
index 00000000..4e224c78
--- /dev/null
+++ b/stories/pagination/TablePagination.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { TablePagination } from 'components/pagination/table-pagination';
+import { BrowserRouter } from 'react-router-dom';
+import { Col, Row } from 'components';
+
+export default {
+  title: 'Example/Pagination/TablePagination',
+  component: TablePagination,
+} as ComponentMeta<typeof TablePagination>;
+
+const Template: ComponentStory<typeof TablePagination> = (args) => <TablePagination {...args} />;
+
+export const Default = Template.bind({});
+
+const DemoTemplate = () => {
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(12);
+
+  const handleChangePage = (val) => {
+    setPage(Number(val));
+  };
+
+  const handleChangeRowsPerPage = (val) => {
+    setRowsPerPage(Number(val));
+    setPage(0);
+  };
+
+  return (
+    <BrowserRouter>
+      <Row style={{ justifyContent: 'center' }}>
+        <Col>
+          <TablePagination
+            page={page}
+            onChangePage={handleChangePage}
+            onChangeRowsPerPage={handleChangeRowsPerPage}
+            count={201}
+            rowsPerPage={rowsPerPage}
+          />
+        </Col>
+      </Row>
+    </BrowserRouter>
+  );
+};
+
+export const Demo = DemoTemplate.bind({});
diff --git a/stories/pagination/index.jsx b/stories/pagination/index.jsx
deleted file mode 100644
index 9ceedb3a..00000000
--- a/stories/pagination/index.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-// import React from 'react';
-
-// import PaginationReadme from 'components/pagination/README.md';
-// import TablePaginationReadme from 'components/pagination/TABLE-README.md';
-// import PaginationDocs from 'components/pagination/DOCS.md';
-// import TablePaginationDocs from 'components/pagination/TABLE-DOCS.md';
-
-// import { Row, Col, Pagination, TablePagination as TablePaginationSelect } from 'components';
-
-// import { BrowserRouter } from 'react-router-dom';
-
-// import { decorator } from '../../utils/decorator';
-// import { WrappedComponent } from '../helpers/wrapped';
-
-// export const TablePagination = decorator('Pagination', TablePaginationDocs, TablePaginationReadme).add(
-//   'TablePagination component',
-//   () => {
-//     const [page, setPage] = React.useState(0);
-//     const [rowsPerPage, setRowsPerPage] = React.useState(12);
-
-//     const handleChangePage = (val) => {
-//       setPage(Number(val));
-//     };
-
-//     const handleChangeRowsPerPage = (val) => {
-//       setRowsPerPage(Number(val));
-//       setPage(0);
-//     };
-
-//     return (
-//       <WrappedComponent>
-//         <BrowserRouter>
-//           <Row style={{ justifyContent: 'center' }}>
-//             <Col>
-//               <TablePaginationSelect
-//                 page={page}
-//                 onChangePage={handleChangePage}
-//                 onChangeRowsPerPage={handleChangeRowsPerPage}
-//                 count={201}
-//                 rowsPerPage={rowsPerPage}
-//               />
-//             </Col>
-//           </Row>
-//         </BrowserRouter>
-//       </WrappedComponent>
-//     );
-//   },
-// );
-
-// export default decorator('Pagination', PaginationDocs, PaginationReadme).add('Pagination component', () => {
-//   const [page, setPage] = React.useState(0);
-//   const [rowsPerPage, setRowsPerPage] = React.useState(12);
-
-//   const handleButtonClick = (val) => {
-//     setPage(val);
-//   };
-
-//   return (
-//     <WrappedComponent>
-//       <BrowserRouter>
-//         <Row style={{ justifyContent: 'center', marginTop: '20px' }}>
-//           <Col xs='3' sm='6' lg='6'>
-//             <Pagination
-//               variant='contained'
-//               count={201}
-//               rowsPerPage={rowsPerPage}
-//               page={page}
-//               onButtonClick={handleButtonClick}
-//             />
-//           </Col>
-//         </Row>
-//         <Row style={{ justifyContent: 'center', marginTop: '20px' }}>
-//           <Col xs='3' sm='6' lg='6'>
-//             <Pagination
-//               variant='outlined'
-//               count={201}
-//               rowsPerPage={rowsPerPage}
-//               page={page}
-//               onButtonClick={handleButtonClick}
-//             />
-//           </Col>
-//         </Row>
-//         <Row style={{ justifyContent: 'center', marginTop: '20px' }}>
-//           <Col xs='3' sm='6' lg='6'>
-//             <Pagination
-//               variant='text'
-//               count={201}
-//               rowsPerPage={rowsPerPage}
-//               page={page}
-//               onButtonClick={handleButtonClick}
-//             />
-//           </Col>
-//         </Row>
-//         <Row style={{ justifyContent: 'center', marginTop: '20px' }}>
-//           <Col xs='3' md='6' lg='8'>
-//             <Pagination
-//               variant='text'
-//               onButtonClick={handleButtonClick}
-//               showFirstButton
-//               showLastButton
-//               count={201}
-//               rowsPerPage={rowsPerPage}
-//               page={page}
-//             />
-//           </Col>
-//         </Row>
-//       </BrowserRouter>
-//     </WrappedComponent>
-//   );
-// });