diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 96fee2dc32709926b567b2147494356aea83caad..8aea69eca3d3fc037757af077dce658afb1cd656 100755
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -38,13 +38,7 @@ export default class VacancyPage extends React.Component {
     this.state = {
       vacancies: [],
       id: VacancyPage.getId(this.props.user),
-      sort: '',
-      sortBy: [
-        { key: 'ASC', text: 'Ascending', value: 'ASC' },
-        { key: 'DESC', text: 'Descending', value: 'DESC' },
-      ],
     };
-    this.handleChange = this.handleChange.bind(this);
 
     console.log('vacancy');
     Storage.set('menu-active-state', 'Beranda');
@@ -63,7 +57,6 @@ export default class VacancyPage extends React.Component {
                   user={this.props.user}
                   key={1}
                   userId={this.state.id}
-                  sort={this.state.sort}
                 />
               }
             />
@@ -207,23 +200,10 @@ export default class VacancyPage extends React.Component {
     return '';
   }
 
-  handleChange = (e, data) => {
-    this.setState({ sort: data.value });
-  };
-
   render() {
     console.log(this.props.user);
     return (
       <div className="applicant">
-        <Container textAlign="right">
-          <Dropdown
-            placeholder="Urutkan Berdasarkan"
-            className="dropdownApplicant"
-            selection
-            options={this.state.sortBy}
-            onChange={this.handleChange}
-          />
-        </Container>
         <br />
         {this.props.user.role === 'student' || (
           <div
diff --git a/assets/js/__test__/VacancyPage-test.jsx b/assets/js/__test__/VacancyPage-test.jsx
index 65165a814e7023f49a1c836c165fb5e3d8e41405..593d95b093cf83c57fb049b829f161b75713a52e 100755
--- a/assets/js/__test__/VacancyPage-test.jsx
+++ b/assets/js/__test__/VacancyPage-test.jsx
@@ -41,14 +41,6 @@ describe('VacancyPage', () => {
     expect(vacancyPage).to.exist;
   });
 
-  it('renders sort feature without problem', () => {
-    const vacancyPage = ReactTestUtils.renderIntoDocument(
-      <VacancyPage user={errorUser} />);
-    vacancyPage.handleChange({}, { value: 'ASC' });
-    expect(vacancyPage).to.exist;
-    expect(vacancyPage.state.sort).to.equals('ASC');
-  });
-
   it('sets top menu active item according to page', () => {
     ReactTestUtils.renderIntoDocument(<VacancyPage user={studentUser} />);
     const topmenu = ReactTestUtils.renderIntoDocument(
diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index 5a340a3aa246d76a494047985e4d54fe40e5394d..0f10faae37fcf786c62c254195e2cb3cfbde71f3 100755
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -372,6 +372,17 @@ describe('VacancyList', () => {
     expect(vacancyList).to.exist;
   });
 
+  it('sorts without problem for student user', () => {
+    const vacancyList = ReactTestUtils.renderIntoDocument(
+      <VacancyList items={newResponse} userId={3} user={studentUser} />,
+    );
+    vacancyList.state.vacancies = newResponse;
+    vacancyList.state.sort = 'NAME-ASC';
+    expect(vacancyList.generateVacancies()).to.exist;
+    vacancyList.state.sort = 'NAME-DESC';
+    expect(vacancyList.generateVacancies()).to.exist;
+  });
+
   it('renders without problem for company', () => {
     const vacancyList = ReactTestUtils.renderIntoDocument(
       <VacancyList items={newResponse} userId={1} user={companyUser} />,
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 819b8191eb28de424922da6bb4b42006d834f5cd..db67243353f385c0ef18b4e16f18d3282892d225 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -12,7 +12,6 @@ export default class VacancyList extends React.Component {
     user: PropTypes.object.isRequired,
     userId: PropTypes.number.isRequired,
     items: PropTypes.array,
-    sort: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -41,6 +40,11 @@ export default class VacancyList extends React.Component {
         { key: 1, text: 'Masih Menerima', value: 1 },
         { key: 2, text: 'Sudah Tutup', value: 2 },
       ],
+      sort: '',
+      sortBy: [
+        { key: 'NAME-ASC', text: 'Nama (Ascending)', value: 'NAME-ASC' },
+        { key: 'NAME-DESC', text: 'Nama (Descending)', value: 'NAME-DESC' },
+      ],
     };
     this.generateVacancies = this.generateVacancies.bind(this);
     this.updateStatus = this.updateStatus.bind(this);
@@ -48,6 +52,7 @@ export default class VacancyList extends React.Component {
     this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(
       this,
     );
+    this.handleChangeSortVacancy = this.handleChangeSortVacancy.bind(this);
   }
 
   updateStatus(id, status) {
@@ -119,6 +124,21 @@ export default class VacancyList extends React.Component {
     return filteredVacancies;
   };
 
+  sortVacancies = (vacancies) => {
+    switch (this.state.sort) {
+      case 'NAME-ASC':
+        return vacancies.sort((vac1, vac2) => {
+          return vac1.props.data.name.localeCompare(vac2.props.data.name);
+        });
+      case 'NAME-DESC':
+        return vacancies.sort((vac1, vac2) => {
+          return vac2.props.data.name.localeCompare(vac1.props.data.name);
+        });
+      default:
+        return vacancies;
+    }
+  };
+
   handleChangeSalaryFilter = (e, data) => {
     this.setState({ salaryFilter: data.value });
   };
@@ -127,19 +147,11 @@ export default class VacancyList extends React.Component {
     this.setState({ vacancyStateFilter: data.value });
   };
 
+  handleChangeSortVacancy = (e, data) => {
+    this.setState({ sort: data.value });
+  };
+
   generateVacancies() {
-    if (this.state.vacancies.length === 0) {
-      return (
-        <Item className="vacancyItems">
-          <Grid.Row>
-            <Container textAlign="center">
-              <p>Tidak ada</p>
-              <br />
-            </Container>
-          </Grid.Row>
-        </Item>
-      );
-    }
     if (this.props.user.role === 'student') {
       let vacancies = this.state.vacancies.map((vacancy) => (
         <Vacancy
@@ -152,17 +164,21 @@ export default class VacancyList extends React.Component {
           salary={this.props.salary}
         />
       ));
-      if (this.props.sort === 'ASC') {
-        return vacancies.sort((vac1, vac2) => {
-          return vac1.props.data.name.localeCompare(vac2.props.data.name);
-        });
-      } else if (this.props.sort === 'DESC') {
-        return vacancies.sort((vac1, vac2) => {
-          return vac2.props.data.name.localeCompare(vac1.props.data.name);
-        });
-      }
+      vacancies = this.sortVacancies(vacancies);
       vacancies = this.filterVacanciesBasedOnSalary(vacancies);
       vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
+      if (vacancies.length === 0) {
+        return (
+          <Item className="vacancyItems">
+            <Grid.Row>
+              <Container textAlign="center">
+                <p>Tidak ada</p>
+                <br />
+              </Container>
+            </Grid.Row>
+          </Item>
+        );
+      }
       return vacancies;
     } else if (
       (this.props.user.role === 'admin' &&
@@ -205,6 +221,13 @@ export default class VacancyList extends React.Component {
         options={this.state.vacancyStateFilterBy}
         onChange={this.handleChangeVacancyStateFilter}
       />
+      <Dropdown
+        placeholder="Urutkan Berdasarkan"
+        className="dropdownApplicant"
+        selection
+        options={this.state.sortBy}
+        onChange={this.handleChangeSortVacancy}
+      />
       <Grid container columns="eleven" doubling style={{ display: 'block' }}>
         <Item.Group relaxed style={{ width: '100%' }}>
           {this.generateVacancies()}