diff --git a/assets/js/__test__/CreateVacancy-test.jsx b/assets/js/__test__/CreateVacancy-test.jsx
index 82c288168bc8b8a2704876644b4434521b2c53ce..7ee5db78c97d9caa3014e2d97aa9c2d5ccca9a49 100644
--- a/assets/js/__test__/CreateVacancy-test.jsx
+++ b/assets/js/__test__/CreateVacancy-test.jsx
@@ -44,7 +44,7 @@ describe('CreateVacancy', () => {
     fetchMock.get('*', {});
     Storage.set('user-data', companySession);
     const createVacancy = ReactTestUtils.renderIntoDocument(
-      <CreateVacancy params={{ id: 1 }} />,
+      <CreateVacancy params={{ id: 1 }} user={{ data: { company: {} } }} />,
     );
     expect(createVacancy).to.exist;
     fetchMock.restore();
@@ -55,7 +55,7 @@ describe('CreateVacancy', () => {
     fetchMock.get('*', {});
     Storage.set('user-data', errorSession);
     const createVacancy = ReactTestUtils.renderIntoDocument(
-      <CreateVacancy params={{ id: 1 }} />,
+      <CreateVacancy params={{ id: 1 }} user={{ data: { company: {} } }} />,
     );
     expect(createVacancy).to.exist;
     fetchMock.restore();
@@ -65,7 +65,7 @@ describe('CreateVacancy', () => {
     fetchMock.get('*', {});
     Storage.set('user-data', companySession);
     const createVacancy = ReactTestUtils.renderIntoDocument(
-      <CreateVacancy params={{ id: 1 }} />,
+      <CreateVacancy params={{ id: 1 }} user={{ data: { company: {} } }} />,
     );
     createVacancy.setState({
       name: 'stub',
@@ -81,7 +81,7 @@ describe('CreateVacancy', () => {
     fetchMock.get('*', {});
     Storage.set('user-data', companySession);
     const createVacancy = ReactTestUtils.renderIntoDocument(
-      <CreateVacancy params={{ id: undefined }} />,
+      <CreateVacancy params={{ id: undefined }} user={{ data: { company: {} } }} />,
     );
     createVacancy.setState({
       name: 'stub',
@@ -106,7 +106,7 @@ describe('CreateVacancy', () => {
     fetchMock.get('*', {});
     Storage.set('user-data', companySession);
     const createVacancy = ReactTestUtils.renderIntoDocument(
-      <CreateVacancy params={{ id: undefined }} />,
+      <CreateVacancy params={{ id: undefined }} user={{ data: { company: {} } }} />,
     );
     createVacancy.setState({
       name: 'stub',
@@ -124,7 +124,7 @@ describe('CreateVacancy', () => {
     fetchMock.get('*', {});
     Storage.set('user-data', companySession);
     const createVacancy = ReactTestUtils.renderIntoDocument(
-      <CreateVacancy params={{ id: 1 }} />,
+      <CreateVacancy params={{ id: 1 }} user={{ data: { company: {} } }} />,
     );
     createVacancy.setState({
       name: 'stub',
@@ -149,7 +149,7 @@ describe('CreateVacancy', () => {
     fetchMock.get('*', {});
     Storage.set('user-data', companySession);
     const createVacancy = ReactTestUtils.renderIntoDocument(
-      <CreateVacancy params={{ id: 1 }} />,
+      <CreateVacancy params={{ id: 1 }} user={{ data: { company: {} } }} />,
     );
     createVacancy.setState({
       name: 'stub',
diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index 0fcfc8f3e83d889eec72ec1a5f7d4a11347422ff..5cc07d5e7433d34a435a5fbe022827a304d99bd8 100644
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -120,7 +120,7 @@ describe('VacancyList', () => {
     fetchMock.restore();
   });
 
-  it('success delete vacancy', (done) => {
+  it('success delete vacancy', () => {
     fetchMock.delete('*', response2);
     fetchMock.get('*', response);
     const vacancyList = ReactTestUtils.renderIntoDocument(
@@ -129,10 +129,8 @@ describe('VacancyList', () => {
     vacancyList.deleteVacancy(1).then(() => {
       expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
       fetchMock.restore();
-      done();
     }, () => {
       fetchMock.restore();
-      done();
     });
   });
 
diff --git a/assets/js/components/ApproveModal.jsx b/assets/js/components/ApproveModal.jsx
index ce81da6b6c60963ef1f56b2391a5fc2ed486707d..b69799ee7e9ddb26fde083df8f89b947f260829b 100644
--- a/assets/js/components/ApproveModal.jsx
+++ b/assets/js/components/ApproveModal.jsx
@@ -24,7 +24,14 @@ export default class ApproveModal extends React.Component {
   }
 
   handleOpen = () => this.setState({ modalOpen: true });
-  handleClose = () => this.setState({ modalOpen: false });
+  handleClose = () => this.readApplication() && this.setState({ modalOpen: false });
+
+  readApplication = () => {
+    const data = { status: Applicant.APPLICATION_STATUS.READ };
+    return this.props.data.status === Applicant.APPLICATION_STATUS.NEW && Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
+      this.props.updateStatus(this.props.data.id, status.status);
+    });
+  };
 
   rejectApplication = () => {
     const data = { status: Applicant.APPLICATION_STATUS.REJECTED };
diff --git a/assets/js/components/Vacancy.jsx b/assets/js/components/Vacancy.jsx
index dc0f0b6962966c5711552eb49e33a486abb41c50..6dc9576e5313262dc32bb3685b826f240b651745 100644
--- a/assets/js/components/Vacancy.jsx
+++ b/assets/js/components/Vacancy.jsx
@@ -27,7 +27,7 @@ export default class Vacancy extends React.Component {
     this.state = {
       bookmarked: this.props.bookmarked,
       status: this.props.status,
-      deleteLoading: false
+      deleteLoading: false,
     };
     this.bookmark = this.bookmark.bind(this);
     this.generateAction = this.generateAction.bind(this);
@@ -49,9 +49,10 @@ export default class Vacancy extends React.Component {
     this.setState({ deleteLoading: true });
     Server.delete(`/students/${this.props.studentId}/applied-vacancies/${this.props.data.id}/`).then(() => {
       this.modalAlert.open('Pendaftaran Berhasil Dibatalkan', 'Pendaftaran anda berhasil dihapus dari sistem\n');
-      this.setState({ status: 'new' });
+      this.setState({ status: 'new', deleteLoading: false });
     }, () => {
       this.modalAlert.open('Permintaan Gagal', 'Maaf permintaan anda gagal diproses sistem. Harap ulangi pendaftaran atau hubungi administrator\n');
+      this.setState({ deleteLoading: false });
     });
   }
 
@@ -79,7 +80,7 @@ export default class Vacancy extends React.Component {
       active={this.state.status === 'new'}
       data={{ header: this.props.data.name, description: this.props.data.description }}
       buttonTitle="Detail"
-      apply={ this.apply }
+      apply={this.apply}
     />);
 
     const cancelButton = <Button loading={this.state.deleteLoading} floated="right" color="red" onClick={this.openConfirmationModal}>Batal</Button>;
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 936d30b28aee1bae7e2bd5147fdf95fccf4256a9..d6a20479a24743e70839c1404da30866cc39ba92 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -26,17 +26,14 @@ export default class VacancyList extends React.Component {
     super(props);
     /* istanbul ignore next */
     this.state = { vacancies: [], bookmarkList: [], appliedList: [] };
-    if (this.props.type === 'student') {
-      this.updateStatusList();
-    }
-    Server.get(this.props.url, false).then((data) => {
-      this.setState({ vacancies: data });
-    });
     this.updateStatusList = this.updateStatusList.bind(this);
     this.generateVacancies = this.generateVacancies.bind(this);
     this.checkBookmark = this.checkBookmark.bind(this);
     this.checkApplied = this.checkApplied.bind(this);
     this.companyHeader = this.companyHeader.bind(this);
+    if (this.props.type === 'student') {
+      this.updateStatusList();
+    }
   }
 
   checkBookmark(id) {
@@ -56,10 +53,11 @@ export default class VacancyList extends React.Component {
   updateStatusList() {
     Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
       this.setState({ bookmarkList: data });
-    });
-    Server.get(`/students/${this.props.userId}/applied-vacancies/`, false).then((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 });
+    }));
   }
 
   deleteVacancy = id => Server.delete(`/vacancies/${id}/`, this.state).then(() => {