diff --git a/public/index.html b/public/index.html
index 5fec76d..8e0dec1 100755
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <!--
diff --git a/src/actions/PlayersActions.js b/src/actions/PlayersActions.js
index 8f427c2..9e82097 100755
--- a/src/actions/PlayersActions.js
+++ b/src/actions/PlayersActions.js
@@ -1,9 +1,13 @@
 import * as types from '../constants/ActionTypes';
 
-export function addPlayer(name) {
+export function addPlayer(info) {
+  const { name, position } = info
   return {
     type: types.ADD_PLAYER,
-    name,
+    payload: {
+      name,
+      position
+    }
   };
 }
 
diff --git a/src/components/AddPlayerInput.js b/src/components/AddPlayerInput.js
index 5d914d8..24b4448 100755
--- a/src/components/AddPlayerInput.js
+++ b/src/components/AddPlayerInput.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import styles from './AddPlayerInput.css';
+import styles from './AddPlayerInput.module.css';
 
 class AddPlayerInput extends Component {
   render() {
diff --git a/src/components/AddPlayerInput.css b/src/components/AddPlayerInput.module.css
old mode 100755
new mode 100644
similarity index 100%
rename from src/components/AddPlayerInput.css
rename to src/components/AddPlayerInput.module.css
diff --git a/src/components/AddPlayerInputGroup/AddPlayerInputGroup.js b/src/components/AddPlayerInputGroup/AddPlayerInputGroup.js
new file mode 100644
index 0000000..939b658
--- /dev/null
+++ b/src/components/AddPlayerInputGroup/AddPlayerInputGroup.js
@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './AddPlayerInputGroup.module.css'
+
+const playerTypes = [
+  'PG',
+  // 'SG',
+  'SF',
+  // 'PF',
+  // 'C'
+]
+
+class AddPlayerInputGroup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+      position: 'PG'
+    }
+
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleTypeChoose = this.handleTypeChoose.bind(this)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextState.name !== this.state.name || nextState.position !== this.state.position
+  }
+  
+
+  handleChange(e) {
+    this.setState({
+      name: e.target.value
+    })
+  }
+
+  handleSubmit(e) {
+    const { name, position } = this.state
+    if (e.which === 13 && name.trim().length) {
+      this.props.addPlayer({ name: name.trim(), position })
+      this.setState({
+        name: ''
+      })
+    }
+  }
+
+  handleTypeChoose(type) {
+    this.setState({
+      position: type
+    })
+  }
+
+  render() {
+    const { name, position } = this.state
+    return (
+      <div>
+        <div className="input-group">
+          <div className="input-group-btn">
+            <button
+              type="button"
+              className={classnames("btn btn-default dropdown-toggle", styles.inputBtn)}
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              {position}
+              <span className="caret"></span>
+            </button>
+            <ul className="dropdown-menu">
+              {
+                playerTypes.map((type, index) => <li key={index}><a href="/#" onClick={() => this.handleTypeChoose(type)}>{type}</a></li>)
+              }
+            </ul>
+          </div>
+          <input
+            type="text"
+            className={ classnames("form-control", styles.rightInput) }
+            aria-label="..."
+            autoFocus
+            value={name}
+            onChange={this.handleChange}
+            onKeyDown={this.handleSubmit}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+AddPlayerInputGroup.propTypes = {
+  addPlayer: PropTypes.func.isRequired,
+};
+
+export default AddPlayerInputGroup;
diff --git a/src/components/AddPlayerInputGroup/AddPlayerInputGroup.module.css b/src/components/AddPlayerInputGroup/AddPlayerInputGroup.module.css
new file mode 100644
index 0000000..5b255e5
--- /dev/null
+++ b/src/components/AddPlayerInputGroup/AddPlayerInputGroup.module.css
@@ -0,0 +1,9 @@
+:local(.inputBtn){
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+:local(.rightInput) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
\ No newline at end of file
diff --git a/src/components/PageController/PageController.js b/src/components/PageController/PageController.js
new file mode 100644
index 0000000..c71001c
--- /dev/null
+++ b/src/components/PageController/PageController.js
@@ -0,0 +1,90 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+class PageController extends Component {
+  decrement = e => {
+    const { page, setPage } = this.props
+    if (page <= 1) {
+      e.preventDefault()
+      return false
+    } else {
+      setPage(page - 1)
+    }
+  }
+
+  increment = e => {
+    const { page, setPage, total, pageSize } = this.props
+    if (page < Math.ceil(total / pageSize)) {
+      setPage(page + 1)
+    } else {
+      e.preventDefault()
+      return false
+    }
+  }
+
+  pageActive = index => {
+    if (index + 1 === this.props.page) {
+      return false
+    } else {
+      this.props.setPage(index + 1)
+    }
+  }
+
+  render() {
+    const { total, pageSize, page } = this.props
+    const pages = new Array(Math.ceil(total / pageSize)).fill('')
+    return (
+      <>
+        {
+          total > 0
+            ?
+            (<nav aria-label="Page navigation">
+              <div className="text-center">
+                <ul className="pagination">
+                  <li
+                    className={classnames('', page === 1 && 'disabled')}
+                    onClick={this.decrement}
+                  >
+                    <a href="/#" aria-label="Previous">
+                      <span aria-hidden="true">&laquo;</span>
+                    </a>
+                  </li>
+                  {
+                    pages.length && pages.map((ps, index) => (
+                      <li
+                        key={index}
+                        className={(page === index + 1) ? 'active' : ''}
+                        onClick={() => this.pageActive(index)}
+                      >
+                        <a href="/#">{index + 1}</a>
+                      </li>
+                    ))
+                  }
+                  <li
+                    onClick={this.increment}
+                    className={classnames('', (total && page === pages.length) && 'disabled')}
+                  >
+                    <a href="/#" aria-label="Next">
+                      <span aria-hidden="true">&raquo;</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </nav>)
+            :
+            null
+        }
+      </>
+    )
+  }
+}
+
+PageController.propTypes = {
+  total: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  page: PropTypes.number.isRequired,
+  setPage: PropTypes.func.isRequired,
+};
+
+export default PageController;
diff --git a/src/components/PageController/PageController.module.css b/src/components/PageController/PageController.module.css
new file mode 100644
index 0000000..85f831a
--- /dev/null
+++ b/src/components/PageController/PageController.module.css
@@ -0,0 +1,3 @@
+:local(.mAuto) {
+  margin: 20px auto 20px;
+}
\ No newline at end of file
diff --git a/src/components/PlayerList.css b/src/components/PlayerList.css
deleted file mode 100755
index b8d6f00..0000000
--- a/src/components/PlayerList.css
+++ /dev/null
@@ -1,4 +0,0 @@
-:local(.playerList) {
-  padding-left: 0;
-  margin-bottom: 0;
-}
diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js
index 7b40246..81d5648 100755
--- a/src/components/PlayerList.js
+++ b/src/components/PlayerList.js
@@ -1,33 +1,57 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import styles from './PlayerList.css';
+import styles from './PlayerList.module.css';
 import PlayerListItem from './PlayerListItem';
 
 class PlayerList extends Component {
+
+  state = {}
+
+  static getDerivedStateFromProps(props, state) {
+    const { page, setPage, players } = props
+    if (!players.length && page > 1) {
+      setPage(page - 1)
+    }
+    return null
+  }
+
   render() {
-    return (
-      <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
-          return (
-            <PlayerListItem
-              key={index}
-              id={index}
-              name={player.name}
-              team={player.team}
-              position={player.position}
-              starred={player.starred}
-              {...this.props.actions}
-            />
-          );
-        })}
-      </ul>
-    );
+    const { page, pageSize, actions, players } = this.props
+    if (players.length) {
+      return (
+        <ul className={styles.playerList}>
+          {players.map((player, index) => {
+            return (
+              <PlayerListItem
+                key={player.name + index}
+                id={(page - 1) * pageSize + index}
+                name={player.name}
+                team={player.team}
+                position={player.position}
+                starred={player.starred}
+                {...actions}
+                page={page}
+              />
+            )
+          })}
+        </ul>
+      )
+    } else {
+      return (
+        <div className={styles.noData}>
+          <p className="text-primary">Choose your favorite player</p>
+        </div>
+      )
+    }
   }
 }
 
 PlayerList.propTypes = {
   players: PropTypes.array.isRequired,
   actions: PropTypes.object.isRequired,
+  page: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  setPage: PropTypes.func.isRequired,
 };
 
 export default PlayerList;
diff --git a/src/components/PlayerList.module.css b/src/components/PlayerList.module.css
new file mode 100644
index 0000000..8aab177
--- /dev/null
+++ b/src/components/PlayerList.module.css
@@ -0,0 +1,11 @@
+:local(.playerList) {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+:local(.noData) {
+  background: #fff;
+  padding: 20px;
+  min-height: 420px;
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+}
\ No newline at end of file
diff --git a/src/components/PlayerListItem.js b/src/components/PlayerListItem.js
index ec9758c..d49d8b3 100755
--- a/src/components/PlayerListItem.js
+++ b/src/components/PlayerListItem.js
@@ -1,9 +1,17 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import styles from './PlayerListItem.css';
+import styles from './PlayerListItem.module.css';
 
 class PlayerListItem extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps.starred !== this.props.starred ||
+      nextProps.name !== this.props.name ||
+      nextProps.team !== this.props.team ||
+      nextProps.position !== this.props.position ||
+      nextProps.page !== this.props.page
+  }
+
   render() {
     return (
       <li className={styles.playerListItem}>
@@ -48,6 +56,7 @@ PlayerListItem.propTypes = {
   position: PropTypes.string.isRequired,
   starred: PropTypes.bool,
   starPlayer: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
 };
 
 export default PlayerListItem;
diff --git a/src/components/PlayerListItem.css b/src/components/PlayerListItem.module.css
old mode 100755
new mode 100644
similarity index 82%
rename from src/components/PlayerListItem.css
rename to src/components/PlayerListItem.module.css
index 4ed1654..1de5e3b
--- a/src/components/PlayerListItem.css
+++ b/src/components/PlayerListItem.module.css
@@ -4,6 +4,11 @@
   background-color: white;
   border-bottom: 1px solid #e3e3e3;
   display: flex;
+  transition: all .3s ease;
+}
+
+:local(.playerListItem):hover {
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
 }
 
 :local(.playerInfos) {
diff --git a/src/components/index.js b/src/components/index.js
index 12ce117..e27c6a3 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,5 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as AddPlayerInputGroup } from './AddPlayerInputGroup/AddPlayerInputGroup';
+export { default as PageController } from './PageController/PageController';
diff --git a/src/containers/App.js b/src/containers/App.js
index 6043881..772e298 100755
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -11,11 +11,9 @@ const store = createStore(reducer);
 export default class App extends Component {
   render() {
     return (
-      <div>
-        <Provider store={store}>
-          <PlayerListApp />
-        </Provider>
-      </div>
+      <Provider store={store}>
+        <PlayerListApp />
+      </Provider>
     );
   }
 }
diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js
index 0e4bfa5..c247328 100755
--- a/src/containers/PlayerListApp.js
+++ b/src/containers/PlayerListApp.js
@@ -1,27 +1,63 @@
 import React, { Component } from 'react';
-import styles from './PlayerListApp.css';
+import styles from './PlayerListApp.module.css';
 import { connect } from 'react-redux';
-
+import classnames from 'classnames'
 import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import { PlayerList, AddPlayerInputGroup, PageController } from '../components';
 
 class PlayerListApp extends Component {
+  state = {
+    page: 1,
+    pageSize: 5
+  }
+
+  setPage = page => {
+    const { playerlist: { playersById } } = this.props
+    const { pageSize } = this.state
+    const total = playersById.length
+    if (page < 1) {
+      page = 1
+    }
+    if (page > (total / pageSize)) {
+      page = Math.ceil(total / pageSize)
+    }
+    this.setState({
+      page
+    })
+  }
+
   render() {
     const {
       playerlist: { playersById },
     } = this.props;
-
+    const { pageSize, page } = this.state;
     const actions = {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
     };
-
+    let currentPlayers = playersById.slice((page - 1) * pageSize, page * pageSize)
     return (
-      <div className={styles.playerListApp}>
+      <div
+        className={classnames('row', styles.playerListApp)}
+      >
         <h1>NBA Players</h1>
-        <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <AddPlayerInputGroup
+          addPlayer={actions.addPlayer}
+        />
+        <PlayerList
+          page={page}
+          setPage={this.setPage}
+          pageSize={pageSize}
+          players={currentPlayers}
+          actions={actions}
+        />
+        <PageController
+          total={playersById.length}
+          page={page}
+          setPage={this.setPage}
+          pageSize={pageSize}
+        />
       </div>
     );
   }
diff --git a/src/containers/PlayerListApp.css b/src/containers/PlayerListApp.module.css
old mode 100755
new mode 100644
similarity index 64%
rename from src/containers/PlayerListApp.css
rename to src/containers/PlayerListApp.module.css
index f438bf1..cde4890
--- a/src/containers/PlayerListApp.css
+++ b/src/containers/PlayerListApp.module.css
@@ -1,16 +1,16 @@
 body {
   background-color: #f4f3f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* display: flex; */
+  /* align-items: center; */
+  /* justify-content: center; */
 }
 
 :local(.playerListApp) {
-  width: 540px;
-  margin-top: 10px;
+  max-width: 540px;
+  margin: 0 auto;
   padding-top: 18px;
   background-color: #5c75b0;
-  border: 1px solid #e3e3e3;
+  /* border: 1px solid #e3e3e3; */
 }
 
 :local(.playerListApp h1) {
diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js
index 1bc7457..110ed9c 100755
--- a/src/reducers/playerlist.js
+++ b/src/reducers/playerlist.js
@@ -41,18 +41,26 @@ const initialState = {
   ],
 };
 
+const teamList = [
+  'LOS ANGELES LAKERS',
+  'NEW ORLEANS PELICANS',
+  'TORONTO RAPTORS',
+  'HOUSTON ROCKETS',
+  'GOLDEN STATE WARRIORS'
+]
+
 export default function players(state = initialState, action) {
   switch (action.type) {
     case types.ADD_PLAYER:
       return {
         ...state,
         playersById: [
-          ...state.playersById,
           {
-            name: action.name,
-            team: 'LOS ANGELES LAKERS',
-            position: 'SF',
+            name: action.payload.name,
+            team: teamList[Math.floor(Math.random() * teamList.length)],
+            position: action.payload.position,
           },
+          ...state.playersById,
         ],
       };
     case types.DELETE_PLAYER:
@@ -70,7 +78,6 @@ export default function players(state = initialState, action) {
         ...state,
         playersById: players,
       };
-
     default:
       return state;
   }