diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 164a7eb586f94a8b410484882ad63da333f784b8..2ce2bcc601d48a0b7f6424b33cac053c926859ae 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -4,6 +4,7 @@ import Vacancy from './Vacancy';
 import CompanyVacancy from './CompanyVacancy';
 import AdminVacancy from './AdminVacancy';
 import Server from '../lib/Server';
+import moment from 'moment';
 
 export default class VacancyList extends React.Component {
 
@@ -34,10 +35,17 @@ export default class VacancyList extends React.Component {
         { key: 3, text: '3-5 juta', value: 3 },
         { key: 4, text: '> 5 juta', value: 4 },
       ],
+      vacancyStateFilter: 0,
+      vacancyStateFilterBy: [
+        { key: 0, text: 'Semua', value: 0 },
+        { key: 1, text: 'Masih Menerima', value: 1 },
+        { key: 2, text: 'Sudah Tutup', value: 2 },
+      ],
     };
     this.generateVacancies = this.generateVacancies.bind(this);
     this.updateStatus = this.updateStatus.bind(this);
     this.handleChangeSalaryFilter = this.handleChangeSalaryFilter.bind(this);
+    this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(this);
   }
 
   updateStatus(id, status) {
@@ -74,10 +82,26 @@ export default class VacancyList extends React.Component {
     return filteredVacancies;
   }
 
+  filterVacanciesBasedOnVacancyStatus = (vacancies) => {
+    const vacancyStateFilter = this.state.vacancyStateFilter;
+    let filteredVacancies = vacancies;
+    if (vacancyStateFilter === 1) {
+      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.close_time >= moment().format());
+    } else if (vacancyStateFilter === 2) {
+      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.close_time < moment().format());
+    }
+
+    return filteredVacancies;
+  }
+
   handleChangeSalaryFilter = (e, data) => {
     this.setState({ salaryFilter: data.value });
   }
 
+  handleChangeVacancyStateFilter = (e, data) => {
+    this.setState({ vacancyStateFilter: data.value });
+  }
+
   generateVacancies() {
     if (this.state.vacancies.length === 0) {
       return (
@@ -114,6 +138,7 @@ export default class VacancyList extends React.Component {
         });
       }
       vacancies = this.filterVacanciesBasedOnSalary(vacancies);
+      vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
       return vacancies;
     } else if ((this.props.user.role === 'admin' && this.props.user.data.company != null)
       || this.props.user.role === 'company') {
@@ -147,6 +172,13 @@ export default class VacancyList extends React.Component {
           options={this.state.salaryFilterBy}
           onChange={this.handleChangeSalaryFilter}
         />
+      <Dropdown
+          placeholder='Filter Berdasarkan Batas Daftar Lowongan'
+          className="dropdownApplicant"
+          selection
+          options={this.state.vacancyStateFilterBy}
+          onChange={this.handleChangeVacancyStateFilter}
+        />
       <Grid container columns="eleven" doubling style={{ display: 'block' }}>
         <Item.Group relaxed style={{ width: '100%' }}>
           { this.generateVacancies() }