diff --git a/src/Pagination/Pagination.Component.js b/src/Pagination/Pagination.Component.js
index 87dbcae30..7b6f41453 100644
--- a/src/Pagination/Pagination.Component.js
+++ b/src/Pagination/Pagination.Component.js
@@ -78,6 +78,18 @@ export const PaginationComponent = () => {
                     totalText='Dalmations' />
             </Example>
 
+            <Example
+                centered
+                description='Customize the total number of visible pages.'
+                title='Total Visible Pages'>
+                <Pagination
+                    initialPage={6}
+                    itemsPerPage={10}
+                    itemsTotal={200}
+                    onClick={handleClick}
+                    visiblePageTotal={15} />
+            </Example>
+
         </ComponentPage>
     );
 };
diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js
index 97947241e..40eca0b38 100644
--- a/src/Pagination/Pagination.js
+++ b/src/Pagination/Pagination.js
@@ -63,19 +63,40 @@ class Pagination extends Component {
     };
 
     // create pagination links
-    createPaginationLinks = numberOfPages => {
+    createPaginationLinks = (numberOfPages) => {
+        let linksToBeAdded = numberOfPages;
+        let pageNumberOffset = 1;
+
+        //if numberOfPages is more than noOfPages
+        if (numberOfPages > this.props.visiblePageTotal) {
+            linksToBeAdded = this.props.visiblePageTotal;
+            //highest page number possible
+            let maxPageNumber = this.state.selectedPage + Math.ceil(this.props.visiblePageTotal / 2);
+            //all but the last page, selected page is the center of selection
+            if (maxPageNumber <= numberOfPages) {
+                pageNumberOffset = this.state.selectedPage - Math.floor(this.props.visiblePageTotal / 2) + 1;
+            } else {
+                //last page,selected page is to the right of the center
+                pageNumberOffset = numberOfPages - Math.floor(this.props.visiblePageTotal) + 1;
+            }
+            //prevent negative values on first page
+            if (pageNumberOffset <= 0) {
+                pageNumberOffset = 1;
+            }
+        }
+
         // create an array with number of pages and fill it with links
-        const aPages = Array(numberOfPages)
+        const aPages = Array(linksToBeAdded)
             .fill()
             .map((link, index) => (
                 <a
                     {...this.props.linkProps}
-                    aria-selected={this.state.selectedPage === index + 1}
+                    aria-selected={this.state.selectedPage === index + pageNumberOffset}
                     className='fd-pagination__link'
                     href='#'
                     key={index}
                     onClick={this.pageClicked}>
-                    {index + 1}
+                    {index + pageNumberOffset}
                 </a>
             ));
         return aPages;
@@ -96,6 +117,7 @@ class Pagination extends Component {
             nextProps,
             onClick,
             initialPage,
+            visiblePageTotal,
             ...props
         } = this.props;
 
@@ -166,7 +188,8 @@ Pagination.propTypes = {
     }),
     nextProps: PropTypes.object,
     prevProps: PropTypes.object,
-    totalText: PropTypes.string
+    totalText: PropTypes.string,
+    visiblePageTotal: PropTypes.number
 };
 
 Pagination.defaultProps = {
@@ -177,7 +200,8 @@ Pagination.defaultProps = {
         next: 'Next',
         previous: 'Previous'
     },
-    totalText: 'items'
+    totalText: 'items',
+    visiblePageTotal: 10
 };
 
 Pagination.propDescriptions = {
@@ -192,7 +216,8 @@ Pagination.propDescriptions = {
     },
     nextProps: 'Additional props to be spread to the next arrow `<a>` element.',
     prevProps: 'Additional props to be spread to the previous arrow `<a>` element.',
-    totalText: 'Localized text to display next to the total number of items.  Used with `displayTotal`.'
+    totalText: 'Localized text to display next to the total number of items.  Used with `displayTotal`.',
+    visiblePageTotal: 'Total number of visible pages.'
 };
 
 export default Pagination;
diff --git a/src/Pagination/Pagination.test.js b/src/Pagination/Pagination.test.js
index 807f448e3..b4d5fa84e 100644
--- a/src/Pagination/Pagination.test.js
+++ b/src/Pagination/Pagination.test.js
@@ -57,6 +57,24 @@ describe('<Pagination />', () => {
             onClick={handleClick} />
     );
 
+    const visibleTotalPagesPagination = (
+        <Pagination itemsTotal={221}
+            onClick={handleClick}
+            visiblePageTotal={20} />
+    );
+
+    const visibleTotalPagesWithItemTotalPagination = (
+        <Pagination itemsPerPage={1} itemsTotal={10}
+            onClick={handleClick}
+            visiblePageTotal={20} />
+    );
+
+    const visibleTotalPagesZeroPagination = (
+        <Pagination itemsPerPage={0} itemsTotal={200}
+            onClick={handleClick}
+            visiblePageTotal={20} />
+    );
+
     test('create default Pagination component', () => {
         const component = renderer.create(defaultPagination);
         const tree = component.toJSON();
@@ -113,6 +131,27 @@ describe('<Pagination />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    test('create Pagination component with visibleTotalPages set', () => {
+        const component = renderer.create(visibleTotalPagesPagination);
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('create Pagination component with visibleTotalPages set to 20 and item per page set to 0', () => {
+        const component = renderer.create(visibleTotalPagesZeroPagination);
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('create Pagination component with visibleTotalPages set to 20 and totaPage = 10', () => {
+        const component = renderer.create(visibleTotalPagesWithItemTotalPagination);
+        const tree = component.toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
     test('navigate to previous page', () => {
         const wrapper = shallow(initialSetPagination);
         wrapper.setState({ selectedPage: 5 });
@@ -153,6 +192,16 @@ describe('<Pagination />', () => {
         expect(wrapper.state(['selectedPage'])).toEqual(4);
     });
 
+    test('create Pagination component with total pages = 20', () => {
+        const wrapper = shallow(visibleTotalPagesPagination);
+        expect(wrapper.find('a.fd-pagination__link').length).toEqual(22);
+    });
+
+    test('create Pagination component with total pages = 20 and itemTotal = 10', () => {
+        const wrapper = shallow(visibleTotalPagesWithItemTotalPagination);
+        expect(wrapper.find('a.fd-pagination__link').length).toEqual(12);
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Pagination component', () => {
             let element = mount(
diff --git a/src/Pagination/__snapshots__/Pagination.test.js.snap b/src/Pagination/__snapshots__/Pagination.test.js.snap
index 8f9173546..656fd6c25 100644
--- a/src/Pagination/__snapshots__/Pagination.test.js.snap
+++ b/src/Pagination/__snapshots__/Pagination.test.js.snap
@@ -102,14 +102,6 @@ exports[`<Pagination /> create Pagination component with initial page set 1`] =
     >
       10
     </a>
-    <a
-      aria-selected={false}
-      className="fd-pagination__link"
-      href="#"
-      onClick={[Function]}
-    >
-      11
-    </a>
     <a
       aria-disabled={false}
       aria-label="Next"
@@ -294,14 +286,6 @@ exports[`<Pagination /> create Pagination component with item per page set to 0
     >
       10
     </a>
-    <a
-      aria-selected={false}
-      className="fd-pagination__link"
-      href="#"
-      onClick={[Function]}
-    >
-      11
-    </a>
     <a
       aria-disabled={false}
       aria-label="Next"
@@ -408,13 +392,117 @@ exports[`<Pagination /> create Pagination component with total item hidden 1`] =
     >
       10
     </a>
+    <a
+      aria-disabled={false}
+      aria-label="Next"
+      className="fd-pagination__link fd-pagination__link--next"
+      href="#"
+      onClick={[Function]}
+    />
+  </nav>
+</div>
+`;
+
+exports[`<Pagination /> create Pagination component with total text set 1`] = `
+<div
+  className="fd-pagination"
+>
+  <span
+    className="fd-pagination__total"
+  >
+    101
+     
+    Dalmations
+  </span>
+  <nav
+    className="fd-pagination__nav"
+  >
+    <a
+      aria-disabled={true}
+      aria-label="Previous"
+      className="fd-pagination__link fd-pagination__link--previous"
+      href="#"
+      onClick={[Function]}
+    />
+    <a
+      aria-selected={true}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      1
+    </a>
     <a
       aria-selected={false}
       className="fd-pagination__link"
       href="#"
       onClick={[Function]}
     >
-      11
+      2
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      3
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      4
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      5
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      6
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      7
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      8
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      9
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      10
     </a>
     <a
       aria-disabled={false}
@@ -427,16 +515,16 @@ exports[`<Pagination /> create Pagination component with total item hidden 1`] =
 </div>
 `;
 
-exports[`<Pagination /> create Pagination component with total text set 1`] = `
+exports[`<Pagination /> create Pagination component with visibleTotalPages set 1`] = `
 <div
   className="fd-pagination"
 >
   <span
     className="fd-pagination__total"
   >
-    101
+    221
      
-    Dalmations
+    items
   </span>
   <nav
     className="fd-pagination__nav"
@@ -536,6 +624,78 @@ exports[`<Pagination /> create Pagination component with total text set 1`] = `
     >
       11
     </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      12
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      13
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      14
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      15
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      16
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      17
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      18
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      19
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      20
+    </a>
     <a
       aria-disabled={false}
       aria-label="Next"
@@ -547,14 +707,14 @@ exports[`<Pagination /> create Pagination component with total text set 1`] = `
 </div>
 `;
 
-exports[`<Pagination /> create default Pagination component 1`] = `
+exports[`<Pagination /> create Pagination component with visibleTotalPages set to 20 and item per page set to 0 1`] = `
 <div
   className="fd-pagination"
 >
   <span
     className="fd-pagination__total"
   >
-    101
+    200
      
     items
   </span>
@@ -656,6 +816,78 @@ exports[`<Pagination /> create default Pagination component 1`] = `
     >
       11
     </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      12
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      13
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      14
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      15
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      16
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      17
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      18
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      19
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      20
+    </a>
     <a
       aria-disabled={false}
       aria-label="Next"
@@ -667,13 +899,124 @@ exports[`<Pagination /> create default Pagination component 1`] = `
 </div>
 `;
 
-exports[`<Pagination /> create default Pagination component with displayTotalProps 1`] = `
+exports[`<Pagination /> create Pagination component with visibleTotalPages set to 20 and totaPage = 10 1`] = `
+<div
+  className="fd-pagination"
+>
+  <span
+    className="fd-pagination__total"
+  >
+    10
+     
+    items
+  </span>
+  <nav
+    className="fd-pagination__nav"
+  >
+    <a
+      aria-disabled={true}
+      aria-label="Previous"
+      className="fd-pagination__link fd-pagination__link--previous"
+      href="#"
+      onClick={[Function]}
+    />
+    <a
+      aria-selected={true}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      1
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      2
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      3
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      4
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      5
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      6
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      7
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      8
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      9
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      10
+    </a>
+    <a
+      aria-disabled={false}
+      aria-label="Next"
+      className="fd-pagination__link fd-pagination__link--next"
+      href="#"
+      onClick={[Function]}
+    />
+  </nav>
+</div>
+`;
+
+exports[`<Pagination /> create default Pagination component 1`] = `
 <div
   className="fd-pagination"
 >
   <span
     className="fd-pagination__total"
-    data-sample="Sample2"
   >
     101
      
@@ -769,13 +1112,118 @@ exports[`<Pagination /> create default Pagination component with displayTotalPro
     >
       10
     </a>
+    <a
+      aria-disabled={false}
+      aria-label="Next"
+      className="fd-pagination__link fd-pagination__link--next"
+      href="#"
+      onClick={[Function]}
+    />
+  </nav>
+</div>
+`;
+
+exports[`<Pagination /> create default Pagination component with displayTotalProps 1`] = `
+<div
+  className="fd-pagination"
+>
+  <span
+    className="fd-pagination__total"
+    data-sample="Sample2"
+  >
+    101
+     
+    items
+  </span>
+  <nav
+    className="fd-pagination__nav"
+  >
+    <a
+      aria-disabled={true}
+      aria-label="Previous"
+      className="fd-pagination__link fd-pagination__link--previous"
+      href="#"
+      onClick={[Function]}
+    />
+    <a
+      aria-selected={true}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      1
+    </a>
     <a
       aria-selected={false}
       className="fd-pagination__link"
       href="#"
       onClick={[Function]}
     >
-      11
+      2
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      3
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      4
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      5
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      6
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      7
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      8
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      9
+    </a>
+    <a
+      aria-selected={false}
+      className="fd-pagination__link"
+      href="#"
+      onClick={[Function]}
+    >
+      10
     </a>
     <a
       aria-disabled={false}
@@ -900,15 +1348,6 @@ exports[`<Pagination /> create default Pagination component with linkProps 1`] =
     >
       10
     </a>
-    <a
-      aria-selected={false}
-      className="fd-pagination__link"
-      data-sample="Sample"
-      href="#"
-      onClick={[Function]}
-    >
-      11
-    </a>
     <a
       aria-disabled={false}
       aria-label="Next"