diff --git a/assets/js/ApplicantPage.jsx b/assets/js/ApplicantPage.jsx
index adf39901098d8bfd0be81c0cd9b99cf8f8d8f3d5..7367ab1ca3f1f90fe8c1695b04d94cf6ffa9a5b6 100644
--- a/assets/js/ApplicantPage.jsx
+++ b/assets/js/ApplicantPage.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import Tabs from './components/Tabs';
-import Pane from './components/Pane';
-import Storage from './lib/Storage';
 import ApplicantList from './components/ApplicantList';
 import Applicant from './components/Applicant';
 
@@ -20,11 +18,8 @@ export default class ApplicantPage extends React.Component {
       errorFlag: false,
       company: { id: 1 },
     };
-    this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  handleItemClick = (e, { name }) => this.setState({ activeItem: name });
-
   render() {
     const company = this.props.user.data.company;
     return (
diff --git a/assets/js/CreateVacancy.jsx b/assets/js/CreateVacancy.jsx
index c1b7fe979e6e4f1e2c2191f9ec6635a2cc5be902..7fbf853fbc6abfee5999bfb9c9896dbbbb8c377f 100644
--- a/assets/js/CreateVacancy.jsx
+++ b/assets/js/CreateVacancy.jsx
@@ -5,7 +5,6 @@ import DatePicker from 'react-datepicker';
 import moment from 'moment';
 import ModalAlert from './components/ModalAlert';
 import Server from './lib/Server';
-import Storage from './lib/Storage';
 import Dumper from './lib/Dumper';
 
 export default class CreateVacancy extends React.Component {
@@ -20,6 +19,8 @@ export default class CreateVacancy extends React.Component {
     /* istanbul ignore next */
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.setCloseTime = this.setCloseTime.bind(this);
+    this.setOpenTime = this.setOpenTime.bind(this);
 
     this.state = {
       formLoading: false,
@@ -41,6 +42,14 @@ export default class CreateVacancy extends React.Component {
     });
   }
 
+  setOpenTime(date) {
+    this.setState({ open_time: date });
+  }
+
+  setCloseTime(date) {
+    this.setState({ close_time: date });
+  }
+
   handleChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   };
@@ -60,7 +69,7 @@ export default class CreateVacancy extends React.Component {
     Server.sendRequest(url, method, data).then(() => {
       browserHistory.push('/lowongan');
     }, error => error.then((r) => {
-      this.modalAlert.open('Gagal Membuat Lowongan', Dumper.dump(r, '    '));
+      this.modalAlert.open('Gagal Membuat Lowongan', r.detail);
       this.setState({ formLoading: false });
     }));
   };
@@ -90,7 +99,7 @@ export default class CreateVacancy extends React.Component {
               control={DatePicker}
               label="Waktu Buka Lowongan"
               selected={this.state.open_time}
-              onChange={date => this.setState({ open_time: date })}
+              onChange={this.setOpenTime}
               required
             />
             <Form.Field
@@ -98,7 +107,7 @@ export default class CreateVacancy extends React.Component {
               control={DatePicker}
               label="Waktu Tutup Lowongan"
               selected={this.state.close_time}
-              onChange={date => this.setState({ close_time: date })}
+              onChange={this.setCloseTime}
               required
             />
           </Form.Group>
diff --git a/assets/js/Dashboard.jsx b/assets/js/Dashboard.jsx
index 83fe6ec240dcb72441dde58ed8c0e9cb9af46a15..ca0dbdecc22c16094c15f02833ee02df3f9bcf63 100755
--- a/assets/js/Dashboard.jsx
+++ b/assets/js/Dashboard.jsx
@@ -8,11 +8,12 @@ export default class Dashboard extends React.Component {
       React.PropTypes.arrayOf(React.PropTypes.node),
       React.PropTypes.node,
     ]).isRequired,
+    user: React.PropTypes.object.isRequired,
   };
 
   render = () => (
     <div>
-      <TopMenu />
+      <TopMenu user={this.props.user} />
       <div className="content"> {this.props.children} </div>
       <Footer />
     </div>
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 438defe00d070801a2e770dd02e95791f7f20b67..ca0617e25592b543aa6339cb87a5b1d58154121b 100644
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -13,7 +13,7 @@ export default class VacancyPage extends React.Component {
     const role = user.role;
     if (role === 'student') {
       return user.data.student.id;
-    } else if (role === 'company') {
+    } else if (role === 'company' || role === 'admin') {
       return user.data.company.id;
     }
 
@@ -57,7 +57,7 @@ export default class VacancyPage extends React.Component {
           </Pane>
         </Tabs>
       );
-    } else if (this.props.user.role === 'company') {
+    } else if (this.props.user.role === 'company' || this.props.user.role === 'admin') {
       return (
         <VacancyList key={1} userId={this.state.id} url={`/companies/${this.state.id}/vacancies/`} type="company" />
       );
diff --git a/assets/js/__test__/ApplicantPage-test.jsx b/assets/js/__test__/ApplicantPage-test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d8d03185cf80da8327500226d6887327caca49e8
--- /dev/null
+++ b/assets/js/__test__/ApplicantPage-test.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import ApplicantPage from '../ApplicantPage';
+
+describe('ApplicantPage', () => {
+  fetchMock.get('*', { data: 'value' });
+
+  const companyUser = {
+    role: 'company',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8001/api/users/8/',
+          username: 'Tutuplapak',
+          email: '',
+          is_staff: false,
+        },
+        name: 'Tutuplapak',
+        created: '2017-03-28T07:30:10.535000Z',
+        updated: '2017-03-28T07:30:10.535000Z',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
+        verified: true,
+        logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
+        address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
+      },
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  it('renders for companies without problem', () => {
+    const applicantPage = ReactTestUtils.renderIntoDocument(
+      <ApplicantPage user={companyUser} />);
+    expect(applicantPage).to.exist;
+  });
+});
diff --git a/assets/js/__test__/CreateVacancy-test.jsx b/assets/js/__test__/CreateVacancy-test.jsx
index 7ee5db78c97d9caa3014e2d97aa9c2d5ccca9a49..7cdc39c75abcbfd52dbf2d134c2755f92acc724b 100644
--- a/assets/js/__test__/CreateVacancy-test.jsx
+++ b/assets/js/__test__/CreateVacancy-test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react-addons-test-utils';
 import fetchMock from 'fetch-mock';
+import moment from 'moment';
 import CreateVacancy from '../CreateVacancy';
 import Storage from '../lib/Storage';
 
@@ -137,6 +138,8 @@ describe('CreateVacancy', () => {
     ReactTestUtils.Simulate.keyDown(openField, { key: 'Enter', keyCode: 13, which: 13 });
     ReactTestUtils.Simulate.click(closeField);
     ReactTestUtils.Simulate.keyDown(closeField, { key: 'Enter', keyCode: 13, which: 13 });
+    createVacancy.setOpenTime(moment());
+    createVacancy.setCloseTime(moment());
 
     expect(createVacancy.state.formLoading).to.equal(false);
     createVacancy.handleSubmit(new Event('click'));
diff --git a/assets/js/__test__/Dashboard-test.jsx b/assets/js/__test__/Dashboard-test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..892fbabf98466949ad103034a99a90d3deff1a90
--- /dev/null
+++ b/assets/js/__test__/Dashboard-test.jsx
@@ -0,0 +1,149 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import Dashboard from '../Dashboard';
+
+describe('Dashboard', () => {
+  fetchMock.get('*', { data: 'value' });
+
+  const studentUser = {
+    role: 'student',
+    data: {
+      url: 'http://localhost:8000/api/users/9/',
+      username: 'muhammad.reza42',
+      email: 'muhammad.reza42@ui.ac.id',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8000/api/users/9/',
+          username: 'muhammad.reza42',
+          email: 'muhammad.reza42@ui.ac.id',
+          is_staff: false,
+        },
+        name: 'Muhammad R.',
+        created: '2017-03-28T13:33:46.147241Z',
+        updated: '2017-03-28T13:33:46.148248Z',
+        npm: 1406543593,
+        resume: null,
+        phone_number: null,
+        bookmarked_vacancies: [
+          3,
+        ],
+        applied_vacancies: [
+          3,
+          1,
+        ],
+      },
+    },
+  };
+
+  const companyUser = {
+    role: 'company',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8001/api/users/8/',
+          username: 'Tutuplapak',
+          email: '',
+          is_staff: false,
+        },
+        name: 'Tutuplapak',
+        created: '2017-03-28T07:30:10.535000Z',
+        updated: '2017-03-28T07:30:10.535000Z',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
+        verified: true,
+        logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
+        address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
+      },
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const adminUser = {
+    role: 'admin',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const supervisorUser = {
+    role: 'supervisor',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const errorUser = {
+    role: 'error',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  it('renders for company without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={companyUser} />);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for supervisor without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={supervisorUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for admin without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={adminUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for student without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={studentUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for error without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={errorUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+});
+
diff --git a/assets/js/__test__/Login.jsx b/assets/js/__test__/Login.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b562c29070ef12b17468e801f2b152aa0a26beac
--- /dev/null
+++ b/assets/js/__test__/Login.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import Login from '../Login';
+
+describe('Login', () => {
+  it('renders for login without problem', () => {
+    const login = ReactTestUtils.renderIntoDocument(<Login><div>test</div></Login>);
+    expect(login).to.exist;
+  });
+});
+
diff --git a/assets/js/__test__/TranscriptPage-test.jsx b/assets/js/__test__/TranscriptPage-test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..00eb2b2064940845245076b771aa3060d7b96617
--- /dev/null
+++ b/assets/js/__test__/TranscriptPage-test.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import TranscriptPage from '../TranscriptPage';
+
+describe('TranscriptPage', () => {
+  const data = {
+    transcript: [
+      { kelas: { nm_kls: 'kelas1' }, nilai: 'A' },
+      { kelas: { nm_kls: 'kelas2' }, nilai: 'B' },
+      { nilai: 'B' },
+    ],
+    name: 'Badak Terbang',
+  };
+
+  fetchMock.get('*', data);
+
+  it('renders for admin without problem', () => {
+    const transcriptPage = ReactTestUtils.renderIntoDocument(
+      <TranscriptPage params={{ id: 1 }} />);
+    transcriptPage.setState({data})
+    expect(transcriptPage).to.exist;
+  });
+});
diff --git a/assets/js/__test__/VacancyPage-test.jsx b/assets/js/__test__/VacancyPage-test.jsx
index fd2d07c2b726c4c37a3e8a493e540a7de93145b2..dcccff16e1a09c5f74f18bfdc43281185bbb13ea 100644
--- a/assets/js/__test__/VacancyPage-test.jsx
+++ b/assets/js/__test__/VacancyPage-test.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import ReactTestUtils from 'react-addons-test-utils';
 import fetchMock from 'fetch-mock';
 import VacancyPage from '../VacancyPage';
-import Storage from '../lib/Storage';
 
 describe('VacancyPage', () => {
   fetchMock.get('*', { data: 'value' });
diff --git a/assets/js/__test__/components/Applicant-test.jsx b/assets/js/__test__/components/Applicant-test.jsx
index 4935bbe12be6343477a89f1de0f3f70920f3290b..d9db8170b088fb87a80b90795feb1049b08f1944 100644
--- a/assets/js/__test__/components/Applicant-test.jsx
+++ b/assets/js/__test__/components/Applicant-test.jsx
@@ -52,31 +52,4 @@ describe('Applicant', () => {
     expect(applicant).to.exist;
     fetchMock.restore();
   });
-
-  // it('test apply without problem', () => {
-  //   const applyModal = ReactTestUtils.renderIntoDocument(
-  //     <Applicant />,
-  //   );
-  //   const response = { student: { id: 1, name: 2 } };
-  //
-  //   Storage.set('user-data', response);
-  //   fetchMock.post('*', { data: 'value' });
-  //   applyModal.open('Menghubungkan ke Server');
-  //   expect(applyModal.state.header).to.equal('Menghubungkan ke Server');
-  //   fetchMock.restore();
-  // });
-  //
-  // it('test apply with problem', () => {
-  //   const applyModal = ReactTestUtils.renderIntoDocument(
-  //     <Applicant />,
-  //   );
-  //   const response = { student: { id: 1, name: 2 } };
-  //
-  //   Storage.set('user-data', response);
-  //   fetchMock.post('*', 404);
-  //   applyModal.open('Menghubungkan ke Server', '', '', () => {});
-  //   applyModal.handleYes();
-  //   expect(applyModal.state.header).to.equal('Menghubungkan ke Server');
-  //   fetchMock.restore();
-  // });
 });
diff --git a/assets/js/__test__/components/ApplicantList-test.jsx b/assets/js/__test__/components/ApplicantList-test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..0575be3ab327aa3d81b835afbdd07283e60d4d58
--- /dev/null
+++ b/assets/js/__test__/components/ApplicantList-test.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import ApplicantList from '../../components/ApplicantList';
+import Applicant from '../../components/Applicant';
+
+describe('ApplicantList', () => {
+
+  const vacancy = {
+    close_time: '2019-03-28T05:55:42Z',
+    company: {
+      address: 'kebayoran baru',
+      id: 1,
+      logo: null,
+      name: 'tutup lapak',
+    },
+    created: '2017-03-28T07:05:47.128672Z',
+    description: 'Lorem ipsum dolbh.',
+    id: 1,
+    name: 'Software Engineer',
+    open_time: '2017-03-28T05:55:38Z',
+    updated: '2017-03-28T07:34:13.122093Z',
+    verified: true,
+  }
+
+  const student = {
+    role: 'student',
+    data: {
+      url: 'http://localhost:8000/api/users/9/',
+      username: 'muhammad.reza42',
+      email: 'muhammad.reza42@ui.ac.id',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8000/api/users/9/',
+          username: 'muhammad.reza42',
+          email: 'muhammad.reza42@ui.ac.id',
+          is_staff: false,
+        },
+        name: 'Muhammad R.',
+        created: '2017-03-28T13:33:46.147241Z',
+        updated: '2017-03-28T13:33:46.148248Z',
+        npm: 1406543593,
+        resume: null,
+        phone_number: null,
+        bookmarked_vacancies: [
+          3,
+        ],
+        applied_vacancies: [
+          3,
+          1,
+        ],
+      },
+    },
+  };
+
+  const response = [
+    { id: 1, status: Applicant.APPLICATION_STATUS.ACCEPTED, student, vacancy },
+    { id: 2, status: Applicant.APPLICATION_STATUS.BOOKMARKED, student, vacancy },
+    { id: 3, status: Applicant.APPLICATION_STATUS.NEW, student, vacancy },
+    { id: 4, status: Applicant.APPLICATION_STATUS.REJECTED, student, vacancy },
+  ];
+
+  fetchMock.restore();
+  fetchMock.get('*', response);
+
+  it('renders without problem', () => {
+    const applicantList = ReactTestUtils.renderIntoDocument(
+      <ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
+    expect(applicantList).to.exist;
+  });
+
+  it('can update status', () => {
+    const applicantList = ReactTestUtils.renderIntoDocument(
+      <ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
+    applicantList.setState({applications : response });
+
+    expect(applicantList.state).to.not.equal(response);
+    applicantList.updateStatus(1, Applicant.APPLICATION_STATUS.BOOKMARKED);
+    expect(applicantList.state).to.not.equal(response);
+  });
+});
+
diff --git a/assets/js/__test__/components/ApproveModal-test.jsx b/assets/js/__test__/components/ApproveModal-test.jsx
index 255581c58787b26bfd071b162d1c7e1146f0acb8..2f0a3bf025769cd70c5cdf2159939e661b759209 100644
--- a/assets/js/__test__/components/ApproveModal-test.jsx
+++ b/assets/js/__test__/components/ApproveModal-test.jsx
@@ -22,6 +22,21 @@ describe('ApproveModal', () => {
     fetchMock.restore();
   });
 
+  it('open resume without problem', () => {
+    fetchMock.get('*', { student: { resume: 'asdasd' } });
+    const modalApproval = ReactTestUtils.renderIntoDocument(
+      <ApproveModal updateStatus={() => {}} data={{ key: 'value', student: { resume: 'asdasd' }, status: Applicant.APPLICATION_STATUS.NEW, show_transcript: true }} />);
+    modalApproval.gotoStudentResume();
+    fetchMock.restore();
+  });
+
+  it('open transcript without problem', () => {
+    fetchMock.get('*', { student: { resume: 'asdasd' } });
+    const modalApproval = ReactTestUtils.renderIntoDocument(
+      <ApproveModal updateStatus={() => {}} data={{ key: 'value', student: { resume: 'asdasd' }, status: Applicant.APPLICATION_STATUS.NEW, show_transcript: true }} />);
+    modalApproval.gotoStudentTranscript();
+    fetchMock.restore();
+  });
 
   it('close without problem', () => {
     fetchMock.get('*', { student: { resume: 'asdasd' } });
diff --git a/assets/js/__test__/components/TopMenu-test.jsx b/assets/js/__test__/components/TopMenu-test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7f841e107bb7c79274fbd1312fbe4d5e1116d399
--- /dev/null
+++ b/assets/js/__test__/components/TopMenu-test.jsx
@@ -0,0 +1,197 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import TopMenu from '../../components/TopMenu';
+
+describe('TopMenu', () => {
+  fetchMock.restore();
+  fetchMock.get('*', { data: 'value' });
+
+  const studentUser = {
+    role: 'student',
+    data: {
+      url: 'http://localhost:8000/api/users/9/',
+      username: 'muhammad.reza42',
+      email: 'muhammad.reza42@ui.ac.id',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8000/api/users/9/',
+          username: 'muhammad.reza42',
+          email: 'muhammad.reza42@ui.ac.id',
+          is_staff: false,
+        },
+        name: 'Muhammad R.',
+        created: '2017-03-28T13:33:46.147241Z',
+        updated: '2017-03-28T13:33:46.148248Z',
+        npm: 1406543593,
+        resume: null,
+        phone_number: null,
+        bookmarked_vacancies: [
+          3,
+        ],
+        applied_vacancies: [
+          3,
+          1,
+        ],
+      },
+    },
+  };
+
+  const companyUser = {
+    role: 'company',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: true,
+      company: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8001/api/users/8/',
+          username: 'Tutuplapak',
+          email: '',
+          is_staff: false,
+        },
+        name: 'Tutuplapak',
+        created: '2017-03-28T07:30:10.535000Z',
+        updated: '2017-03-28T07:30:10.535000Z',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
+        verified: true,
+        logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
+        address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
+      },
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const adminUser1 = {
+    role: 'admin',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: true,
+      supervisor: null,
+      student: null,
+      company: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8001/api/users/8/',
+          username: 'Tutuplapak',
+          email: '',
+          is_staff: false,
+        },
+        name: 'Tutuplapak',
+        created: '2017-03-28T07:30:10.535000Z',
+        updated: '2017-03-28T07:30:10.535000Z',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
+        verified: true,
+        logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
+        address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
+      },
+    },
+  };
+
+  const adminUser2 = {
+    role: 'admin',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const supervisorUser = {
+    role: 'supervisor',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const errorUser = {
+    role: 'error',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  it('renders for company without problem', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={companyUser} />);
+    expect(topmenu).to.exist;
+  });
+
+  it('renders for supervisor without problem', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={supervisorUser}>
+        <div> test </div>
+      </TopMenu>);
+    expect(topmenu).to.exist;
+  });
+
+  it('renders for admin without problem', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={adminUser1}>
+        <div> test </div>
+      </TopMenu>);
+    expect(topmenu).to.exist;
+  });
+
+  it('renders for student without problem', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={studentUser}>
+        <div> test </div>
+      </TopMenu>);
+    expect(topmenu).to.exist;
+  });
+
+  it('renders for error without problem', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={errorUser}>
+        <div> test </div>
+      </TopMenu>);
+    expect(topmenu).to.exist;
+  });
+
+  it('renders for user to logout without problem', () => {
+    fetchMock.get('*', { data: 'value' });
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={adminUser1}>
+        <div> test </div>
+      </TopMenu>);
+    topmenu.logout(new Event('click'));
+    expect(topmenu).to.exist;
+  });
+
+  it('changes the activeItem when item is clicked', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={adminUser2}>
+        <div> test </div>
+      </TopMenu>);
+    topmenu.handleItemClick(new Event('click'), 'undefined');
+    expect(topmenu.state.activeItem).to.equal(undefined);
+  });
+});
+
diff --git a/assets/js/__test__/components/Vacancy-test.jsx b/assets/js/__test__/components/Vacancy-test.jsx
index 65222b3d2e5625f6036b85f26b7f4372304ea6fb..e84553845d70e148809e8cffc22929901811a60d 100644
--- a/assets/js/__test__/components/Vacancy-test.jsx
+++ b/assets/js/__test__/components/Vacancy-test.jsx
@@ -6,7 +6,7 @@ import Storage from '../../lib/Storage';
 
 describe('Vacancy', () => {
   const fetchMock = require('fetch-mock');
-  const response ={
+  const response = {
     close_time: '2019-03-28T05:55:42Z',
     company: {
       address: 'kebayoran baru',
@@ -15,12 +15,12 @@ describe('Vacancy', () => {
       name: 'tutup lapak',
     },
     created: '2017-03-28T07:05:47.128672Z',
-      description: 'Lorem ipsum dolbh.',
-      id: 3,
-      name: 'Software Engineer',
-      open_time: '2017-03-28T05:55:38Z',
-      updated: '2017-03-28T07:34:13.122093Z',
-      verified: true,
+    description: 'Lorem ipsum dolbh.',
+    id: 3,
+    name: 'Software Engineer',
+    open_time: '2017-03-28T05:55:38Z',
+    updated: '2017-03-28T07:34:13.122093Z',
+    verified: true,
   };
 
   const response2 = {
@@ -78,10 +78,11 @@ describe('Vacancy', () => {
   it('cancel bookmarks without problem', () => {
     fetchMock.delete('*', { data: 'value' });
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Daftar" data={response2} bookmarked={1}/>);
+      <Vacancy status="Daftar" data={response2} bookmarked={1} />);
     const response3 = { student: { id: 1, name: 2 } };
     lowongan.removeVacancyApplication();
     lowongan.openConfirmationModal();
+    lowongan.updateStatus();
     expect(lowongan.props.data.id).to.equal(3);
     Storage.set('user-data', response3);
     expect(lowongan.bookmark()).to.be.undefined;
@@ -91,11 +92,12 @@ describe('Vacancy', () => {
   it('cancel bookmarks with problem', () => {
     fetchMock.delete('*', 404);
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Daftar" data={response2} bookmarked={1}/>);
+      <Vacancy status="Daftar" data={response2} bookmarked={1} />);
     const response3 = { student: { id: 1, name: 2 } };
     lowongan.removeVacancyApplication();
     expect(lowongan.props.data.id).to.equal(3);
     Storage.set('user-data', response3);
+    lowongan.updateStatus('failed');
     expect(lowongan.bookmark()).to.be.undefined;
     fetchMock.restore();
   });
diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index 5cc07d5e7433d34a435a5fbe022827a304d99bd8..73e7494d647f64d0203a1bd5797e90ea71db5b4d 100644
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -71,34 +71,47 @@ describe('VacancyList', () => {
     fetchMock.restore();
   });
 
+  it('renders with problem for company', () => {
+    fetchMock.get('*', 403);
+    const vacancyList = ReactTestUtils.renderIntoDocument(
+      <VacancyList type="company" userId={1} url="test" />);
+    vacancyList.state.vacancies = response;
+    expect(vacancyList.generateVacancies()).to.exist;
+    fetchMock.restore();
+  });
+
   it('update bookmarks without problem', () => {
     fetchMock.get('*', response);
     const vacancyList = ReactTestUtils.renderIntoDocument(
       <VacancyList userId={1} url="test" />);
-    vacancyList.state.appliedList = [{id:1},{id:3}];
-    vacancyList.updateStatusList();
-    expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
-    fetchMock.restore();
+    vacancyList.state.appliedList = [{ id: 1 }, { id: 3 }];
+    vacancyList.updateStatusList().then(() => {
+      expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
+      fetchMock.restore();
+    });
   });
 
   it('check applied vacancies without problem', () => {
     fetchMock.get('*', response);
     const vacancyList = ReactTestUtils.renderIntoDocument(
       <VacancyList userId={1} url="test" />);
-    vacancyList.updateStatusList();
-    expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
-    fetchMock.restore();
+    vacancyList.updateStatusList().then(() => {
+      expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
+      fetchMock.restore();
+    });
   });
 
-  it('renders marked bookmarked vacancies without problem', () => {
+  it('renders marked bookmarked vacancies without problem', (done) => {
     fetchMock.get('*', response);
     const vacancyList = ReactTestUtils.renderIntoDocument(
       <VacancyList userId={1} url="test" />);
     vacancyList.state.vacancies = response;
     vacancyList.state.bookmarkList = [{ id: 5 }, { id: 3 }, { id: 1 }];
-    vacancyList.updateStatusList();
-    expect(vacancyList.generateVacancies()).to.exist;
-    fetchMock.restore();
+    vacancyList.updateStatusList().then(() => {
+      expect(vacancyList.generateVacancies()).to.exist;
+      fetchMock.restore();
+      done();
+    }, () => done());
   });
 
   it('renders not marked vacancies without problem', () => {
@@ -135,6 +148,7 @@ describe('VacancyList', () => {
   });
 
   it('fails delete vacancy', (done) => {
+    fetchMock.restore();
     fetchMock.delete('*', 404);
     fetchMock.get('*', response);
     const vacancyList = ReactTestUtils.renderIntoDocument(
diff --git a/assets/js/components/Applicant.jsx b/assets/js/components/Applicant.jsx
index b1d87a8ee3aa8c3d96ef0de0827e7db2ed89f94f..ca999696d421f28421afbfa9f49e92cc3131f42d 100644
--- a/assets/js/components/Applicant.jsx
+++ b/assets/js/components/Applicant.jsx
@@ -48,7 +48,7 @@ export default class Applicant extends React.Component {
       <Item >
         <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
         <Item.Image size="small" src={defaultImage} />
-        <Item.Content verticalAlign="middle">
+        <Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }}>
           <Item.Extra>
             <Grid.Row>
               <Grid.Column floated="left">
diff --git a/assets/js/components/ApplyModal.jsx b/assets/js/components/ApplyModal.jsx
index 871614e13a76e76c62e2acb1e8164d605047fb6a..75ace02500030d7640340dcb8cb406dc5d977eb1 100644
--- a/assets/js/components/ApplyModal.jsx
+++ b/assets/js/components/ApplyModal.jsx
@@ -9,6 +9,7 @@ export default class ApplyModal extends React.Component {
     active: React.PropTypes.bool.isRequired,
     buttonTitle: React.PropTypes.string.isRequired,
     studentId: React.PropTypes.number.isRequired,
+    updateStatus: React.PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -34,6 +35,7 @@ export default class ApplyModal extends React.Component {
 
   handleClose = () => this.setState({
     modalOpen: false,
+    load: false,
   });
 
   handleApply = () => {
@@ -41,7 +43,7 @@ export default class ApplyModal extends React.Component {
     const requestData = { vacancy_id: this.props.data.id, cover_letter: this.state.coverLetter };
     Server.post(`/students/${this.props.studentId}/applied-vacancies/`, requestData).then(() => {
       this.modalAlert.open('Pendaftaran Berhasil', 'Pendaftaran anda berhasil direkam. Harap menunggu kabar selanjutnya dari pihak yang terkait\n', this.handleClose);
-      this.setState({ status: 'registered' });
+      this.props.updateStatus('registered');
     }, () => this.modalAlert.open('Pendaftaran Gagal', 'Maaf pendaftaran yang anda lakukan gagal. Harap ulangi pendaftaran atau hubungi administrator\n', this.handleClose),
     );
   };
diff --git a/assets/js/components/ApproveModal.jsx b/assets/js/components/ApproveModal.jsx
index f775e6c687f347c7b0db8309d92aca9b5e7a1c11..132083a6b9dcaa27338a0b8c8e95b4af37f310a4 100644
--- a/assets/js/components/ApproveModal.jsx
+++ b/assets/js/components/ApproveModal.jsx
@@ -21,6 +21,8 @@ export default class ApproveModal extends React.Component {
     this.handleOpen = this.handleOpen.bind(this);
     this.reject = this.reject.bind(this);
     this.accept = this.accept.bind(this);
+    this.gotoStudentResume = this.gotoStudentResume.bind(this);
+    this.gotoStudentTranscript = this.gotoStudentTranscript.bind(this);
   }
 
   handleOpen = () => this.setState({ modalOpen: true });
@@ -63,6 +65,10 @@ export default class ApproveModal extends React.Component {
     win.focus();
   };
 
+  gotoStudentResume = () => this.gotoLink(this.props.data.student.resume);
+
+  gotoStudentTranscript = () => this.gotoLink(`/transcript/${this.props.data.id}`);
+
   accept = () => {
     this.modal.open(
       'Terima Lamaran?',
@@ -85,9 +91,9 @@ export default class ApproveModal extends React.Component {
         <h4> Cover Letter </h4>
         { this.props.data.cover_letter ? this.props.data.cover_letter : 'Kosong' }
         <div style={{ float: 'right', textAlign: 'right' }}>
-          {this.props.data.student.resume ? <a onClick={() => this.gotoLink(this.props.data.student.resume)} href="#" >CV Pelamar </a> : ''}
+          {this.props.data.student.resume ? <a onClick={this.gotoStudentResume} href="#" >CV Pelamar </a> : ''}
           <br />
-          {this.props.data.student.show_transcript ? <a onClick={() => this.gotoLink(`/transcript/${this.props.data.id}`)} href="#" >Transkrip Pelamar</a> : ''}
+          {this.props.data.student.show_transcript ? <a onClick={this.gotoStudentTranscript} href="#" >Transkrip Pelamar</a> : ''}
           <br />
         </div>
       </Modal.Content>
diff --git a/assets/js/components/CompanyRegisterModal.jsx b/assets/js/components/CompanyRegisterModal.jsx
index e2bd6aba6f4fea393dffa98e89d15278319f6286..450c3cd23b544eabc6fc77513fa5153a25292451 100644
--- a/assets/js/components/CompanyRegisterModal.jsx
+++ b/assets/js/components/CompanyRegisterModal.jsx
@@ -10,6 +10,7 @@ export default class CompanyRegisterModal extends React.Component {
   constructor(props) {
     super(props);
     /* istanbul ignore next */
+    this.state = { loading: false };
     this.handleChange = this.handleChange.bind(this);
     this.handleFile = this.handleFile.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -21,7 +22,6 @@ export default class CompanyRegisterModal extends React.Component {
 
   handleFile = (e) => {
     this.setState({ [e.target.name]: e.target.files[0] });
-    console.log(e.target.files[0]);
   };
 
 
@@ -40,11 +40,12 @@ export default class CompanyRegisterModal extends React.Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    console.log(this.state);
+    this.setState({ loading: true });
     Server.submit('/register/', this.state).then((response) => {
       Storage.set('user-data', response);
       browserHistory.push('/home');
     }, error => error.then((r) => {
+      this.setState({ loading: false });
       this.modalAlert.open('Gagal Membuat Akun', r.error);
     }));
   };
@@ -103,12 +104,11 @@ export default class CompanyRegisterModal extends React.Component {
             <label htmlFor="address">Alamat</label>
             <Input onChange={this.handleChange} placeholder="Alamat" name="address" required />
           </Form.Field>
-
+          <Modal.Actions style={{ textAlign: 'right' }}>
+            <Button loading={this.state.loading} type="submit" color="blue"> <Icon name="checkmark" />Submit</Button>
+          </Modal.Actions>
         </Form>
       </Modal.Content>
-      <Modal.Actions>
-        <Button type="submit" onClick={this.handleSubmit} color="blue"> <Icon name="checkmark" />Submit</Button>
-      </Modal.Actions>
     </Modal>
   )
 }
diff --git a/assets/js/components/Course.jsx b/assets/js/components/Course.jsx
index d44fb78ad7c193b2ce0b36e024d714fbeb3991d6..03f005047c240a3c51e4b5f89a422243875a01fc 100644
--- a/assets/js/components/Course.jsx
+++ b/assets/js/components/Course.jsx
@@ -7,13 +7,10 @@ export default class Course extends React.Component {
     grade: React.PropTypes.string.isRequired,
   };
 
-
-  render() {
-    return (
-      <Table.Row>
-          <Table.Cell>{this.props.courseName}</Table.Cell>
-          <Table.Cell>{this.props.grade}</Table.Cell>
-      </Table.Row>
-    );
-  }
+  render = () => (
+    <Table.Row>
+      <Table.Cell>{this.props.courseName}</Table.Cell>
+      <Table.Cell>{this.props.grade}</Table.Cell>
+    </Table.Row>
+  );
 }
diff --git a/assets/js/components/Vacancy.jsx b/assets/js/components/Vacancy.jsx
index 830aafa1bd4348c8675e1f1ed85656a94c0d0b6c..e777d3312316bf5ef4d05ee4bfeee7e4c7033ed5 100644
--- a/assets/js/components/Vacancy.jsx
+++ b/assets/js/components/Vacancy.jsx
@@ -30,6 +30,7 @@ export default class Vacancy extends React.Component {
       deleteLoading: false,
     };
     this.bookmark = this.bookmark.bind(this);
+    this.updateStatus = this.updateStatus.bind(this);
     this.generateAction = this.generateAction.bind(this);
     this.openConfirmationModal = this.openConfirmationModal.bind(this);
     this.removeVacancyApplication = this.removeVacancyApplication.bind(this);
@@ -45,6 +46,8 @@ export default class Vacancy extends React.Component {
     this.state.bookmarked = 1 - this.state.bookmarked;
   }
 
+  updateStatus = (status = 'registered') => this.setState({ status });
+
   removeVacancyApplication() {
     this.setState({ deleteLoading: true });
     Server.delete(`/students/${this.props.studentId}/applied-vacancies/${this.props.data.id}/`).then(() => {
@@ -67,6 +70,7 @@ export default class Vacancy extends React.Component {
 
   generateAction() {
     const applyModal = (<ApplyModal
+      updateStatus={this.updateStatus}
       active={this.state.status === 'new'}
       data={{ header: this.props.data.name, description: this.props.data.description, id: this.props.data.id }}
       buttonTitle="Detail"
@@ -83,7 +87,7 @@ export default class Vacancy extends React.Component {
         <ConfirmationModal ref={(modal) => { this.confirmationModal = modal; }} />
         <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
         <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
-        <Item.Content verticalAlign="middle">
+        <Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }} >
           <Item.Extra>
             <Grid.Row>
               <Grid.Column floated="left">
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 49e837bb3c64a46a6e16e99d78e3bdaf2978c1f5..cc84ac4c8c36ae798743bfeca6d5ab879707697e 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -34,7 +34,10 @@ export default class VacancyList extends React.Component {
       this.updateStatusList();
     } else Server.get(this.props.url, false).then((data) => {
       this.setState({ vacancies: data, loading: false });
-    });
+    }, e => e.then((error) => {
+      this.modalAlert.open('Akun anda belum terverfikasi', 'Mohon tunggu sampai akun perusahaan anda terverifikasi atau hubungi pihak administrasi');
+      this.setState({ loading: false });
+    }));
   }
 
   checkBookmark(id) {
@@ -51,15 +54,13 @@ export default class VacancyList extends React.Component {
     return 'new';
   }
 
-  updateStatusList() {
-    Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
-      this.setState({ bookmarkList: data });
-    }).then(() => Server.get(`/students/${this.props.userId}/applied-vacancies/`, false).then((data) => {
-      this.setState({ appliedList: data });
-    })).then(() => Server.get(this.props.url, false).then((data) => {
-      this.setState({ vacancies: data, loading: false });
-    }));
-  }
+  updateStatusList = () => Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
+    this.setState({ bookmarkList: data });
+  }).then(() => Server.get(`/students/${this.props.userId}/applied-vacancies/`, false).then((data) => {
+    this.setState({ appliedList: data });
+  })).then(() => Server.get(this.props.url, false).then((data) => {
+    this.setState({ vacancies: data, loading: false });
+  }));
 
   deleteVacancy = id => Server.delete(`/vacancies/${id}/`, this.state).then(() => {
     this.modalAlert.open('Hapus Lowongan', 'Lowongan berhasil dihapus');