diff --git a/packages/react/src/components/PaginationNav/PaginationNav-test.js b/packages/react/src/components/PaginationNav/PaginationNav-test.js
index f8b54af15b92..40ab56e1a89a 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav-test.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav-test.js
@@ -22,6 +22,8 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
+const prefix = 'cds';
+
 describe('PaginationNav', () => {
   describe('renders as expected - Component API', () => {
     it('should spread extra props onto outermost element', () => {
@@ -97,6 +99,33 @@ describe('PaginationNav', () => {
 
       expect(screen.getByLabelText('Next')).toBeDisabled();
     });
+
+    it('should render in small size and let user render 4 pages', () => {
+      render(<PaginationNav size="sm" totalItems={10} itemsShown={4} />);
+
+      expect(screen.getByLabelText('pagination')).toHaveClass(
+        `${prefix}--pagination-nav ${prefix}--layout--size-sm`
+      );
+      expect(screen.getByLabelText('Select Page number')).toBeInTheDocument();
+    });
+
+    it('should render in medium size and let user render 4 pages', () => {
+      render(<PaginationNav size="md" totalItems={10} itemsShown={4} />);
+
+      expect(screen.getByLabelText('pagination')).toHaveClass(
+        `${prefix}--pagination-nav ${prefix}--layout--size-md`
+      );
+      expect(screen.getByLabelText('Select Page number')).toBeInTheDocument();
+    });
+
+    it('should render in default (large) size and let user render 4 pages', () => {
+      render(<PaginationNav size="lg" totalItems={10} itemsShown={4} />);
+
+      expect(screen.getByLabelText('pagination')).toHaveClass(
+        `${prefix}--pagination-nav ${prefix}--layout--size-lg`
+      );
+      expect(screen.getByLabelText('Select Page number')).toBeInTheDocument();
+    });
   });
 
   describe('behaves as expected', () => {
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
index 91d4729d9e60..4f6f1e601fec 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import PaginationNav from '../PaginationNav';
+import './styles.scss';
 
 export default {
   title: 'Components/PaginationNav',
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.tsx b/packages/react/src/components/PaginationNav/PaginationNav.tsx
index 103bf44e89bb..542c7b092d7d 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.tsx
+++ b/packages/react/src/components/PaginationNav/PaginationNav.tsx
@@ -343,9 +343,24 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
     const smMediaQuery = `(max-width: ${breakpoints.sm.width})`;
     const isSm = useMatchMedia(smMediaQuery);
 
+    let numberOfPages: number;
+
+    switch (size) {
+      case 'md':
+        numberOfPages = itemsShown === 4 ? itemsShown : 5;
+        break;
+      case 'sm':
+        numberOfPages = Math.max(4, Math.min(itemsShown, 7));
+        break;
+
+      default:
+        numberOfPages = 4;
+        break;
+    }
+
     const [currentPage, setCurrentPage] = useState(page);
     const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(
-      itemsShown >= 4 && !isSm ? itemsShown : 4
+      itemsShown >= 4 && !isSm ? itemsShown : numberOfPages
     );
 
     const [cuts, setCuts] = useState(
@@ -404,12 +419,13 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
 
     // re-calculate cuts if props.totalItems or props.itemsShown change
     useEffect(() => {
-      const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : 4;
+      const itemsToBeShown =
+        itemsShown >= 4 && !isSm ? itemsShown : numberOfPages;
       setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
       setCuts(
         calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4))
       );
-    }, [totalItems, itemsShown, isSm]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [totalItems, itemsShown, isSm, size]); // eslint-disable-line react-hooks/exhaustive-deps
 
     // update cuts if necessary whenever currentPage changes
     useEffect(() => {
diff --git a/packages/react/src/components/PaginationNav/styles.scss b/packages/react/src/components/PaginationNav/styles.scss
new file mode 100644
index 000000000000..676f9ee07d50
--- /dev/null
+++ b/packages/react/src/components/PaginationNav/styles.scss
@@ -0,0 +1,3 @@
+.sb-show-main.sb-main-padded {
+  padding: 1rem;
+}