diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 27abae5b6b219f5ad7b9b08d89c135fc3e55da19..abcfb1d68b8c3ab4d4590ea983f94bfabefd4b37 100644
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -6,38 +6,78 @@ import VacancyList from './components/VacancyList';
 
 export default class VacancyPage extends React.Component {
 
+  static getRole() {
+    const student = Storage.get('user-data').student;
+    const company = Storage.get('user-data').company;
+    if (student) {
+      return { id: student.id, type: 'student' };
+    } else if (company) {
+      return { id: company.id, type: 'company' };
+    }
+
+    return { id: '0', type: 'error' };
+  }
+
   constructor(props) {
     super(props);
     /* istanbul ignore next */
+    const role = VacancyPage.getRole();
     this.state = {
-      email: '',
-      password: '',
-      errorFlag: false,
       vacancies: [],
+      id: role.type,
+      role: role.type,
     };
-    this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  handleItemClick = (e, { name }) => this.setState({ activeItem: name });
+  generateVacancies() {
+    if (this.state.role === 'student') {
+      return (
+        <Tabs selected={0}>
+          <Pane label="Semua Lowongan" >
+            <VacancyList
+              key={1}
+              studentId={this.state.id}
+              url="/vacancies/"
+            />
+          </Pane>
+          <Pane label="Lamaran saya" >
+            <VacancyList
+              key={2}
+              status="Batal"
+              studentId={this.state.id}
+              url={`/students/${this.state.id}/applied-vacancies/`}
+            />
+          </Pane>
+          <Pane label="Lamaran Ditandai" >
+            <VacancyList
+              key={3}
+              studentId={this.state.id}
+              url={`/students/${this.state.id}/bookmarked-vacancies/`}
+            />
+          </Pane>
+        </Tabs>
+      );
+    } else if (this.state.role === 'company') {
+      return (
+        <VacancyList key={1} studentId={this.state.id} url="/vacancies/" />
+      );
+    }
+    console.log(this.state);
+    return (
+      <div>
+        <h3>
+          Anda tidak terautentifikasi. Harap logout dan login
+          kembali dengan akun yang benar
+        </h3>
+      </div>
+    );
+  }
 
   render() {
-    const student = Storage.get('user-data').student;
     return (
-  <div className="halamanLowongan">
-      <Tabs selected={0}>
-        <Pane label="Semua Lowongan" >
-          <VacancyList key={1} studentId={student.id}  url="/vacancies/" />
-        </Pane>
-        <Pane label="Lamaran saya" >
-          <VacancyList key={2} status="Batal" studentId={student.id} url={`/students/${student.id}/applied-vacancies/`} />
-        </Pane>
-        <Pane label="Lamaran Ditandai" >
-          <VacancyList key={3} studentId={student.id}  url={`/students/${student.id}/bookmarked-vacancies/`} />
-        </Pane>
-      </Tabs>
-
-  </div>
-
+      <div className="applicant">
+        { this.generateVacancies() }
+      </div>
     );
   }
 }
diff --git a/assets/js/__test__/VacancyPage-test.jsx b/assets/js/__test__/VacancyPage-test.jsx
index 46c18c10472e8102b4188c9a3a733a8ed82d38d2..fa614bf728d83bfb09642cdcb0a9601904d43a9a 100644
--- a/assets/js/__test__/VacancyPage-test.jsx
+++ b/assets/js/__test__/VacancyPage-test.jsx
@@ -61,6 +61,17 @@ describe('VacancyList', () => {
     supervisor: null,
     student: null,
   };
+
+  const errorSession = {
+    url: 'http://localhost:8001/api/users/8/',
+    username: 'Tutuplapak',
+    email: '',
+    is_staff: false,
+    company: null,
+    supervisor: null,
+    student: null,
+  };
+
   it('renders for companies without problem', () => {
     Storage.set('user-data', companySession);
     const vacancyPage = ReactTestUtils.renderIntoDocument(
@@ -74,7 +85,15 @@ describe('VacancyList', () => {
     const vacancyPage = ReactTestUtils.renderIntoDocument(
       <VacancyPage studentId={1} url="test" />);
     expect(vacancyPage).to.exist;
-    expect(vacancyPage.state.role).to.equal('company');
+    expect(vacancyPage.state.role).to.equal('student');
+  });
+
+  it('renders without problem for error case', () => {
+    Storage.set('user-data', errorSession);
+    const vacancyPage = ReactTestUtils.renderIntoDocument(
+      <VacancyPage studentId={1} url="test" />);
+    expect(vacancyPage).to.exist;
+    expect(vacancyPage.state.role).to.equal('error');
   });
 });
 
diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index f95f7ab907cd906a90ebe14a5aeb1bbd1265ff3e..b94249c1f41b0e696389e015b1620b63763a9440 100644
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -22,7 +22,7 @@ describe('VacancyList', () => {
     updated: '2017-03-28T07:34:13.122093Z',
     verified: true,
   }];
-  const response2 = { hello: 'not-world' };
+  // const response2 = { hello: 'not-world' };
 
   it('renders without problem', () => {
     fetchMock.get('*', response);