diff --git a/src/components/PaginationControl.jsx b/src/components/PaginationControl.jsx
new file mode 100644
index 0000000..dc9a124
--- /dev/null
+++ b/src/components/PaginationControl.jsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import Flexbox from 'flexbox-react'
+import '../styles/components/pagination-control.css'
+class PaginationControl extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isPrevPageValid: false,
+      isNextPageValid: true,
+      currentPage: 1,
+      totalItems: props.totalItems,
+      lastPage: Math.ceil(props.totalItems / props.perPage)
+    }
+    this.nextPage = this.nextPage.bind(this)
+    this.prevPage = this.prevPage.bind(this)
+    this.validatePage = this.validatePage.bind(this)
+    this.resetPagination = this.resetPagination.bind(this)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.perPage !== this.props.perPage) {
+      this.resetPagination()
+    }
+  }
+
+  resetPagination () {
+    this.setState({
+      currentPage: 1,
+      isPrevPageValid: false,
+      isNextPageValid: true
+    })
+  }
+
+  nextPage () {
+    if (this.props.controlsDisabled) {
+      return false
+    }
+    if (this.state.isNextPageValid) {
+      const currentPage = this.state.currentPage
+      this.props.navigateToPage(currentPage + 1)
+      this.setState({ currentPage: currentPage + 1 }, this.validatePage)
+    }
+    return false
+  }
+
+  prevPage () {
+    if (this.props.controlsDisabled) {
+      return false
+    }
+    if (this.state.isPrevPageValid) {
+      const currentPage = this.state.currentPage
+      this.props.navigateToPage(currentPage - 1)
+      this.setState({ currentPage: currentPage - 1 }, this.validatePage)
+    }
+    return false
+  }
+
+  validatePage () {
+    const currentPage = this.state.currentPage
+    this.setState({
+      isNextPageValid: currentPage < this.state.lastPage,
+      isPrevPageValid: currentPage > 1
+    })
+  }
+
+  render () {
+    let disabledClass = ''
+    if (this.props.controlsDisabled) {
+      disabledClass = 'disabled'
+    }
+    let currentCount = this.state.currentPage * this.props.perPage > this.state.totalItems ? this.state.totalItems : this.state.currentPage * this.props.perPage
+    return (
+      <Flexbox flexDirection='row' className='consoles__pagination'>
+        <Flexbox className={`pagination__button pagination__prev ${disabledClass} ${this.state.isPrevPageValid ? '' : 'disabled'}`} onClick={this.prevPage}>
+          <i className='arrow_carrot-left' aria-hidden='true' />
+        </Flexbox>
+        <Flexbox className='pagination__count' alignItems='center'>
+          <span className='count__current'>{currentCount}</span>
+          <span>of</span>
+          <span className='count__total'>{this.state.totalItems}</span>
+        </Flexbox>
+        <Flexbox className={`pagination__button pagination__next ${disabledClass} ${this.state.isNextPageValid ? '' : 'disabled'}`} onClick={this.nextPage}>
+          <i className='arrow_carrot-right' aria-hidden='true' />
+        </Flexbox>
+      </Flexbox>
+
+    )
+  }
+}
+
+PaginationControl.propTypes = {
+  totalItems: React.PropTypes.number.isRequired,
+  navigateToPage: React.PropTypes.func.isRequired,
+  perPage: React.PropTypes.number.isRequired,
+  controlsDisabled: React.PropTypes.bool
+}
+
+export default PaginationControl
diff --git a/src/styles/components/pagination-control.css b/src/styles/components/pagination-control.css
new file mode 100644
index 0000000..50efec1
--- /dev/null
+++ b/src/styles/components/pagination-control.css
@@ -0,0 +1,68 @@
+@import '../variables.css';
+.consoles__pagination {
+  
+  & .pagination__button {
+    border: 1px solid var(--buttonBorder);
+    color: var(--twgray);
+    cursor: pointer;
+    display: inline-block;
+    padding: 0px;
+    font-size: 2em;
+    height: 30px;
+    -webkit-user-select: none;
+    -moz-user-select: none;   
+    -ms-user-select: none;   
+    user-select: none;     
+  }
+  & .pagination__button:active{
+    border: 1px solid var(--blue);
+    color: white !important;
+    background-color: var(--blue);
+  }
+  & .pagination__button:hover{
+    border: 1px solid var(--blue);
+    color: var(--blue);
+
+  }
+  & .pagination__button.disabled {
+    border: 1px solid var(--lightgray);
+    color: var(--lightgray) !important;
+  }
+  & .pagination__button.disabled:active {
+    background-color: white !important;
+    border: 1px solid var(--lightgray) !important;
+    color: var(--lightgray) !important;
+  }
+  & .pagination__prev {
+
+  }
+  & .pagination__next {
+
+  }
+  & .pagination__count {
+    border: 1px solid color(#BBBDBF);
+    color: color(#586A7B);
+    font-size: var(--small);
+    margin-left: 1px;
+    margin-right: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+    height: 30px;
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-user-select: none;  
+    -moz-user-select: none; 
+    -ms-user-select: none;
+    user-select: none;
+    cursor: default;
+    & .count__current {
+      margin-right: 5px;
+    }
+    & .count__total {
+      margin-left: 5px;
+    }
+  }
+}
+
+
+
diff --git a/stories/controls.stories.js b/stories/controls.stories.js
index a10ab04..f18eb8e 100644
--- a/stories/controls.stories.js
+++ b/stories/controls.stories.js
@@ -3,6 +3,7 @@ import { storiesOf } from '@kadira/storybook'
 import { Radio, Dropdown, Input, Button, Popup } from 'semantic-ui-react'
 import FavoriteButton from '../src/components/FavoriteButton'
 import StopStartButton from '../src/components/StopStartButton'
+import PaginationControl from '../src/components/PaginationControl'
 import '../src/styles/app.css'
 
 const dropdownOptions = [
@@ -17,9 +18,30 @@ const dropdownOptionsTime = [
   { text: '1m', value: '1m' }
 ]
 
+const paginationSampleData = [
+  { text: '1w', value: '1w' },
+  { text: '2w', value: '2w' },
+  { text: '1m', value: '1m' },
+  { text: '1w', value: '1w' },
+  { text: '2w', value: '2w' },
+  { text: '1m', value: '1m' },
+  { text: '1w', value: '1w' },
+  { text: '2w', value: '2w' },
+  { text: '1m', value: '1m' },
+  { text: '1w', value: '1w' },
+  { text: '2w', value: '2w' },
+  { text: '1m', value: '1m' },
+  { text: '1w', value: '1w' },
+  { text: '2w', value: '2w' },
+  { text: '1m', value: '1m' }
+]
+
+function nextPage () {
+  // handle your pagination
+}
 storiesOf('Interactive Controls', module)
   .addDecorator((story) => (
-    <div style={{maxWidth: '200px', marginTop: '15px', marginLeft: '15px'}}>
+    <div style={{marginTop: '15px', marginLeft: '15px'}}>
       {story()}
     </div>
   ))
@@ -86,19 +108,23 @@ storiesOf('Interactive Controls', module)
     <div>
       <div>
         <Input />
+        <br />
         Normal
       </div>
       <div>
         <Input error />
+        <br />
         Error
       </div>
       <div>
         <Input focus />
-        Focused
+        <br />
+        Normal
       </div>
       <div>
         <Input disabled />
-        disabled
+        <br />
+        Disabled
       </div>
       <div>
         <Input
@@ -106,8 +132,21 @@ storiesOf('Interactive Controls', module)
           placeholder='Browse / Search: Tag, Group, or Operation'
           style={{width: '400px'}}
         />
-      Search
+        <br />
+        Search
       </div>
     </div>
 
   ))
+  .add('Pagination Controls', () => (
+    <div>
+      <PaginationControl
+        totalItems={paginationSampleData.length}
+        perPage={5}
+        navigateToPage={nextPage}
+        controlsDisabled={false}
+      />
+    </div>
+
+  ))
+