diff --git a/assets/js/ApplicantPage.jsx b/assets/js/ApplicantPage.jsx
index 7367ab1ca3f1f90fe8c1695b04d94cf6ffa9a5b6..761fad8d8ab3716e3045dcdb4f5d210884becd11 100644
--- a/assets/js/ApplicantPage.jsx
+++ b/assets/js/ApplicantPage.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Tabs from './components/Tabs';
 import ApplicantList from './components/ApplicantList';
 import Applicant from './components/Applicant';
+import Pagination from './components/Pagination';
 
 export default class ApplicantPage extends React.Component {
 
@@ -24,11 +25,49 @@ export default class ApplicantPage extends React.Component {
     const company = this.props.user.data.company;
     return (
       <Tabs selected={0}>
-        <ApplicantList label="Lamaran Baru" key={1} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`} status={Applicant.APPLICATION_STATUS.NEW} />
-        <ApplicantList label="Lamaran Dibaca" key={2} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`} status={Applicant.APPLICATION_STATUS.READ} />
-        <ApplicantList label="Lamaran Ditandai" key={3} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`} status={Applicant.APPLICATION_STATUS.BOOKMARKED} />
-        <ApplicantList label="Lamaran Diterima" key={4} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`} status={Applicant.APPLICATION_STATUS.ACCEPTED} />
-        <ApplicantList label="Lamaran Ditolak" key={5} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`} status={Applicant.APPLICATION_STATUS.REJECTED} />
+        <Pagination
+          key={1}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`}
+          label="Lamaran Baru"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
+          }
+        />
+        <Pagination
+          key={2}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`}
+          label="Lamaran Dibaca"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
+          }
+        />
+        <Pagination
+          key={3}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`}
+          label="Lamaran Ditandai"
+          child={
+            <ApplicantList
+              companyId={company.id}
+              status={Applicant.APPLICATION_STATUS.BOOKMARKED}
+            />
+          }
+        />
+        <Pagination
+          key={4}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`}
+          label="Lamaran Diterima"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.ACCEPTED} />
+          }
+        />
+        <Pagination
+          key={5}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`}
+          label="Lamaran Ditolak"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.REJECTED} />
+          }
+        />
       </Tabs>
     );
   }
diff --git a/assets/js/CompanyPage.jsx b/assets/js/CompanyPage.jsx
index daec7e97d566d2bea428af5034f47f89acd9943e..c21db4e93f9b3d8002886ececc3cd605a7314c4a 100644
--- a/assets/js/CompanyPage.jsx
+++ b/assets/js/CompanyPage.jsx
@@ -3,6 +3,7 @@ import { Button } from 'semantic-ui-react';
 import Tabs from './components/Tabs';
 import CompanyList from './components/CompanyList';
 import Company from './components/Company';
+import Pagination from './components/Pagination';
 
 export default class CompanyPage extends React.Component {
 
@@ -19,10 +20,38 @@ export default class CompanyPage extends React.Component {
           <Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" />
         </div>
         <Tabs selected={0}>
-          <CompanyList label="Baru" key={1} url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`} status={Company.COMPANY_STATUS.NEW} />
-          <CompanyList label="Terverifikasi" key={2} url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`} status={Company.COMPANY_STATUS.VERIFIED} />
-          <CompanyList label="Ditolak" key={3} url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`} status={Company.COMPANY_STATUS.UNVERIFIED} />
-          <CompanyList label="Semua Perusahaan" key={4} url={'/companies/'} status={Company.COMPANY_STATUS.ALL} />
+          <Pagination
+            key={1}
+            url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`}
+            label="Baru"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.NEW} />
+            }
+          />
+          <Pagination
+            key={2}
+            url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`}
+            label="Terverifikasi"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.VERIFIED} />
+            }
+          />
+          <Pagination
+            key={3}
+            url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`}
+            label="Ditolak"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.UNVERIFIED} />
+            }
+          />
+          <Pagination
+            key={4}
+            url={'/companies/'}
+            label="Semua Perusahaan"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.ALL} />
+            }
+          />
         </Tabs>
       </div>
     );
diff --git a/assets/js/__test__/components/ApplicantList-test.jsx b/assets/js/__test__/components/ApplicantList-test.jsx
index 0575be3ab327aa3d81b835afbdd07283e60d4d58..0a907611d4bb5a7738ee5382dd141aca3da3b43a 100644
--- a/assets/js/__test__/components/ApplicantList-test.jsx
+++ b/assets/js/__test__/components/ApplicantList-test.jsx
@@ -69,14 +69,14 @@ describe('ApplicantList', () => {
 
   it('renders without problem', () => {
     const applicantList = ReactTestUtils.renderIntoDocument(
-      <ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
+      <ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} />);
     expect(applicantList).to.exist;
   });
 
   it('can update status', () => {
     const applicantList = ReactTestUtils.renderIntoDocument(
-      <ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
-    applicantList.setState({applications : response });
+      <ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} />);
+    applicantList.setState({applications: response });
 
     expect(applicantList.state).to.not.equal(response);
     applicantList.updateStatus(1, Applicant.APPLICATION_STATUS.BOOKMARKED);
diff --git a/assets/js/__test__/components/CompanyList-test.jsx b/assets/js/__test__/components/CompanyList-test.jsx
index 0fb2ddab6d7caf6ee935318963e79c3cef31b339..dd9ec0bab313dcc3002c399854104868984174a5 100644
--- a/assets/js/__test__/components/CompanyList-test.jsx
+++ b/assets/js/__test__/components/CompanyList-test.jsx
@@ -38,13 +38,13 @@ describe('CompanyList', () => {
 
   it('renders without problem', () => {
     const companyList = ReactTestUtils.renderIntoDocument(
-      <CompanyList status={Company.COMPANY_STATUS.VERIFIED} url="test" />);
+      <CompanyList status={Company.COMPANY_STATUS.VERIFIED} items={response} />);
     expect(companyList).to.exist;
   });
 
   it('can update status', () => {
     const companyList = ReactTestUtils.renderIntoDocument(
-      <CompanyList status={Company.COMPANY_STATUS.VERIFIED} url="test" />);
+      <CompanyList status={Company.COMPANY_STATUS.VERIFIED} items={response} />);
     companyList.setState({ companies: response });
     companyList.generateCompanies();
 
diff --git a/assets/js/components/ApplicantList.jsx b/assets/js/components/ApplicantList.jsx
index bd53b7ea94af61c168f255e31126a6473f129a77..ad542fc63cf811a403fac4c02eb0d6517a7ae49a 100644
--- a/assets/js/components/ApplicantList.jsx
+++ b/assets/js/components/ApplicantList.jsx
@@ -1,23 +1,22 @@
 import React from 'react';
 import { Item, Grid } from 'semantic-ui-react';
 import Applicant from './Applicant';
-import Server from '../lib/Server';
 
 export default class ApplicantList extends React.Component {
 
   static propTypes = {
-    url: React.PropTypes.string.isRequired,
+    items: React.PropTypes.array,
     status: React.PropTypes.number.isRequired,
   };
 
+  static defaultProps = {
+    items: [],
+  };
+
   constructor(props) {
     super(props);
     /* istanbul ignore next */
-    this.state = { applications: [] };
-    Server.get(this.props.url, false).then((data) => {
-      this.setState({ applications: data });
-    });
-
+    this.state = { applications: this.props.items };
     this.generateApplicants = this.generateApplicants.bind(this);
     this.updateStatus = this.updateStatus.bind(this);
   }
diff --git a/assets/js/components/CompanyList.jsx b/assets/js/components/CompanyList.jsx
index 7d70025cd07306b5ed49c61aa24450c3363f75e0..fe99956b1af8a3c34a676c8993f3535a07d0e9bb 100644
--- a/assets/js/components/CompanyList.jsx
+++ b/assets/js/components/CompanyList.jsx
@@ -1,23 +1,22 @@
 import React from 'react';
-import { Item, Grid, Loader } from 'semantic-ui-react';
+import { Item, Grid } from 'semantic-ui-react';
 import Company from '../components/Company';
-import Server from '../lib/Server';
 
 export default class CompanyList extends React.Component {
 
   static propTypes = {
-    url: React.PropTypes.string.isRequired,
+    items: React.PropTypes.array,
     status: React.PropTypes.number.isRequired,
   };
 
+  static defaultProps = {
+    items: [],
+  };
 
   constructor(props) {
     super(props);
     /* istanbul ignore next */
-    this.state = { companies: [], loading: true };
-    Server.get(this.props.url, false).then((data) => {
-      this.setState({ companies: data.results, loading: false });
-    });
+    this.state = { companies: this.props.items };
 
     this.generateCompanies = this.generateCompanies.bind(this);
     this.updateStatus = this.updateStatus.bind(this);
@@ -36,7 +35,8 @@ export default class CompanyList extends React.Component {
 
   generateCompanies() {
     return this.state.companies.map(company =>
-      (company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) && (<Company
+      (company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) &&
+      (<Company
         key={company.id} data={company}
         updateStatus={this.updateStatus}
       />),
@@ -45,9 +45,8 @@ export default class CompanyList extends React.Component {
 
   render = () => (
     <div>
-      <Loader active={this.state.loading} />
-      <Grid>
-        <Item.Group style={{ width: '100%' }}>
+      <Grid container doubling>
+        <Item.Group relaxed style={{ width: '100%' }}>
           { this.generateCompanies() }
         </Item.Group>
       </Grid>