diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 4fd342d9a74f080a7ef29f96368546ebb1ff7d08..438defe00d070801a2e770dd02e95791f7f20b67 100644
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -44,6 +44,7 @@ export default class VacancyPage extends React.Component {
             <VacancyList
               key={2}
               userId={this.state.id}
+              status="applied"
               url={`/students/${this.state.id}/applied-vacancies/`}
             />
           </Pane>
diff --git a/assets/js/components/Applicant.jsx b/assets/js/components/Applicant.jsx
index ce10b848d6cf29f167a4fa464372e777aece70d0..b1d87a8ee3aa8c3d96ef0de0827e7db2ed89f94f 100644
--- a/assets/js/components/Applicant.jsx
+++ b/assets/js/components/Applicant.jsx
@@ -20,6 +20,8 @@ export default class Applicant extends React.Component {
     ACCEPTED: 4,
   };
 
+  static APPLICATION_STATUS_TEXT = ['Baru', 'Sudah Dibaca', 'Ditandai', 'Diterima', 'Ditolak'];
+
   constructor(props) {
     super(props);
     /* istanbul ignore next */
diff --git a/assets/js/components/Vacancy.jsx b/assets/js/components/Vacancy.jsx
index e299d5b50b806e1cf864fed18b2b604764ddc0d6..dc0f0b6962966c5711552eb49e33a486abb41c50 100644
--- a/assets/js/components/Vacancy.jsx
+++ b/assets/js/components/Vacancy.jsx
@@ -13,10 +13,12 @@ export default class Vacancy extends React.Component {
     data: React.PropTypes.object.isRequired,
     bookmarked: React.PropTypes.number,
     status: React.PropTypes.string.isRequired,
+    applicationStatus: React.PropTypes.string,
   };
 
   static defaultProps = {
     bookmarked: 0,
+    applicationStatus: '',
   };
 
   constructor(props) {
@@ -104,6 +106,7 @@ export default class Vacancy extends React.Component {
                 </Grid.Row>
                 <Grid.Row>
                   { this.generateAction() }
+                  <p>{ this.props.applicationStatus }</p>
                 </Grid.Row>
               </Grid.Column>
             </Grid.Row>
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index dc5c089db49e3c5d3e781e4d9b60a01e8271442c..de625610d265c53ec3f95d1af64220e938e591c8 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Item, Button, Grid, Segment } from 'semantic-ui-react';
+import { Item, Button, Grid } from 'semantic-ui-react';
 import { Link } from 'react-router';
 import Vacancy from './Vacancy';
 import CompanyVacancy from './CompanyVacancy';
 import Server from '../lib/Server';
 import ModalAlert from '../components/ModalAlert';
+import Aplicant from './../components/Applicant';
 
 
 export default class VacancyList extends React.Component {
@@ -13,10 +14,12 @@ export default class VacancyList extends React.Component {
     url: React.PropTypes.string.isRequired,
     userId: React.PropTypes.number.isRequired,
     type: React.PropTypes.string,
+    status: React.PropTypes.string,
   };
 
   static defaultProps = {
     type: 'student',
+    status: 'new',
   };
 
   constructor(props) {
@@ -29,6 +32,7 @@ export default class VacancyList extends React.Component {
     Server.get(this.props.url, false).then((data) => {
       this.setState({ vacancies: data });
     });
+    console.log(this.state.vacancies);
     this.updateStatusList = this.updateStatusList.bind(this);
     this.generateVacancies = this.generateVacancies.bind(this);
     this.checkBookmark = this.checkBookmark.bind(this);
@@ -45,7 +49,7 @@ export default class VacancyList extends React.Component {
 
   checkApplied(id) {
     for (let i = 0; i < this.state.appliedList.length; i += 1) {
-      if (id === this.state.appliedList[i].id) { return 'registered'; }
+      if (id === this.state.appliedList[i].vacancy.id) { return 'registered'; }
     }
     return 'new';
   }
@@ -55,7 +59,12 @@ export default class VacancyList extends React.Component {
       this.setState({ bookmarkList: data });
     });
     Server.get(`/students/${this.props.userId}/applied-vacancies/`, false).then((data) => {
+      // console.log('hasil api:');
+      // console.log(data);
+      // console.log(data.vacancy);
       this.setState({ appliedList: data });
+      console.log('applied list:')
+      console.log(this.state.appliedList);
     });
   }
 
@@ -73,12 +82,14 @@ export default class VacancyList extends React.Component {
       return this.state.vacancies.map(vacancy =>
         (
           <Vacancy
-            key={vacancy.id}
-            status={this.checkApplied(vacancy.id)}
-            bookmarked={this.checkBookmark(vacancy.id)}
-            data={vacancy}
+            key={this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id}
+            status={this.checkApplied(this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id)}
+            bookmarked={this.checkBookmark(this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id)}
+            data={this.props.status === 'applied' ? vacancy.vacancy : vacancy}
             studentId={this.props.userId}
-          />
+            applicationStatus= {this.props.status === 'applied' ? (vacancy.status === 4 ? 'Ditolak' :
+                (vacancy.status === 3 ? 'Diterima' : 'Terdaftar')) : ''}
+          >{console.log(this.checkApplied(this.props.status === 'applied' ? vacancy.vacancy.id : vacancy.id))}</Vacancy>
         ),
       );
     }