diff --git a/src/API/APICalls.jsx b/src/API/APICalls.jsx
index 10ee8b2..0c4c3c2 100644
--- a/src/API/APICalls.jsx
+++ b/src/API/APICalls.jsx
@@ -1,6 +1,6 @@
 import instance from './apiwrapper';
 
-export const getEmployees = (sort, direction) => instance.get('/api/employee', { params: { sort: `${sort},${direction}` } });
+export const getEmployees = (page, sort, direction) => instance.get('/api/employee', { params: { page, sort: `${sort},${direction}` } });
 
 export const getEmployee = employeeId => instance.get(`/api/employee/${employeeId}`);
 
diff --git a/src/App.jsx b/src/App.jsx
index 1841c75..a2903aa 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Divider } from 'semantic-ui-react';
+import { Card, Divider, Pagination } from 'semantic-ui-react';
 import EmployeeCard from './components/Card';
 import EmployeeForm from './components/EmployeeForm';
 import Message from './components/SuccessMessage';
@@ -7,6 +7,8 @@ import logo from './logo.svg';
 import './App.css';
 import { getEmployees, addEmployee } from './API/APICalls';
 import Sort from './components/Sort';
+import { CentredDiv } from './components/Styled';
+import PlaceholderCard from './components/PlaceholderCard';
 
 const App = () => {
   // add new employee form attributes
@@ -22,6 +24,9 @@ const App = () => {
   const [state, setState] = useState(false);
   const [actionType, setActionType] = useState('');
 
+  // State hooks for pagination
+  const [totalPages, setTotalPages] = useState(0);
+
   const mapper = {
     fnInput: setfn,
     lnInput: setln,
@@ -43,15 +48,19 @@ const App = () => {
     mapper[evt.target.name](value);
   };
 
-  const getAllPersons = (sort = 'createdAt', direction = 'asc') => getEmployees(sort, direction)
-    .then((res) => {
-      console.log('/getEmployee response:', res.data);
-      setPersons(res.data.content);
-    })
-    .catch((error) => {
-      setPersons([]);
-      console.log(error);
-    });
+  const getAllPersons = (page = 0, sort = 'createdAt', direction = 'asc') => {
+    setPersons([]);
+    getEmployees(page, sort, direction)
+      .then((res) => {
+        console.log('/getEmployee response:', res.data);
+        setPersons(res.data.content);
+        setTotalPages(res.data.totalPages);
+      })
+      .catch((error) => {
+        setPersons([]);
+        console.log(error);
+      });
+  };
 
   const handleSubmit = () => {
     console.log('in submit:', employee);
@@ -70,6 +79,10 @@ const App = () => {
       });
   };
 
+  const handlePageChange = (event, data) => {
+    getAllPersons(data.activePage - 1);
+  };
+
   useEffect(() => {
     getAllPersons();
   }, []);
@@ -85,10 +98,15 @@ const App = () => {
         <Sort refresh={getAllPersons} />
       </Divider>
       <Card.Group>
-        {persons.map(person => (
-          <EmployeeCard refresh={getAllPersons} key={person.id} person={person} />
-        ))}
+        {persons.length !== 0
+          ? persons.map(person => (
+            <EmployeeCard refresh={getAllPersons} key={person.id} person={person} />
+          ))
+          : [...Array(16).keys()].map(() => <PlaceholderCard />)}
       </Card.Group>
+      <CentredDiv>
+        <Pagination defaultActivePage={1} onPageChange={handlePageChange} totalPages={totalPages} />
+      </CentredDiv>
     </div>
   );
 };
diff --git a/src/components/PlaceholderCard.jsx b/src/components/PlaceholderCard.jsx
new file mode 100644
index 0000000..639cfba
--- /dev/null
+++ b/src/components/PlaceholderCard.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Card, Placeholder } from 'semantic-ui-react';
+
+const PlaceholderCard = () => (
+  <Card>
+    <Card.Content>
+      <Card.Header>
+        <Placeholder>
+          <Placeholder.Header>
+            <Placeholder.Line />
+          </Placeholder.Header>
+        </Placeholder>
+      </Card.Header>
+      <Placeholder>
+        <Placeholder.Paragraph>
+          <Placeholder.Line length="medium" />
+          <Placeholder.Line length="short" />
+          <Placeholder.Line length="medium" />
+          <Placeholder.Line length="short" />
+          <Placeholder.Line length="short" />
+        </Placeholder.Paragraph>
+      </Placeholder>
+    </Card.Content>
+  </Card>
+);
+
+export default PlaceholderCard;
diff --git a/src/components/Styled.js b/src/components/Styled.js
index 748205c..de477cc 100644
--- a/src/components/Styled.js
+++ b/src/components/Styled.js
@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 import {
-  Form, Button, Segment,
+  Form,
+  Button,
+  Segment,
 } from 'semantic-ui-react';
 
 /* eslint-disable import/prefer-default-export */
@@ -38,3 +40,8 @@ export const StyledSegment = styled(Segment)`
     font-style: italic;
   }
 `;
+
+export const CentredDiv = styled.div`
+    text-align: center;
+    padding: 10px;
+`;