diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index 5484871f4b58b3f2ac0d4b259c3bb640f6b8a131..709bcb256471c63a0e413712c2aa131ca2e402b7 100644
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -4,7 +4,7 @@ import ReactTestUtils from 'react-addons-test-utils';
 import VacancyList from '../../components/VacancyList';
 import ModalPendaftaran from '../../components/ModalPendaftaran';
 
-describe('LoginForm', () => {
+describe('VacancyList', () => {
   it('created without problem', () => {
     const vacancyList = new VacancyList();
     expect(vacancyList).to.be.an.instanceof(VacancyList);
@@ -15,7 +15,7 @@ describe('LoginForm', () => {
       <VacancyList header="header" content="content" buttonTitle="submit" />);
     expect(vacancyList).to.exist;
 
-    React.Children.forEach(this.props.children, (child) => {
+    React.Children.forEach(vacancyList.props.children, (child) => {
       expect(child).to.be.an.instanceof(ModalPendaftaran);
     });
   });
diff --git a/assets/js/components/Lowongan.jsx b/assets/js/components/Lowongan.jsx
index caab73a11c57536a453590757ed8b86079bfa012..900df337894b114514945b4c02163b0816e7a3e7 100644
--- a/assets/js/components/Lowongan.jsx
+++ b/assets/js/components/Lowongan.jsx
@@ -1,44 +1,32 @@
 import React from 'react';
-import { Button, Image as ImageComponent, Item } from 'semantic-ui-react'
+import { Button, Image as ImageComponent, Item } from 'semantic-ui-react';
 import ModalPendaftaran from './ModalPendaftaran';
 
 
-//const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
+// const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
 
-export default class Lowongan extends React.Component{
- static propTypes = {
-    header: React.PropTypes.oneOfType([
-      React.PropTypes.node,
-      React.PropTypes.string,
-    ]).isRequired,
-    content: React.PropTypes.oneOfType([
-      React.PropTypes.node,
-      React.PropTypes.string,
-    ]).isRequired,
-     image: React.PropTypes.oneOfType([
-      React.PropTypes.node,
-      React.PropTypes.string,
-    ]).isRequired,
-     paragraph: React.PropTypes.string.isRequired
+export default class Lowongan extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.object.isRequired,
   };
 
- render(){
-     return(
+  render() {
+    return (
 
-         <Item.Group relaxed>
-            <Item>
-              {this.props.image}
-              <Item.Content verticalAlign="middle">
-                <Item.Header>{this.props.header}</Item.Header>
-                <Item.Description>{this.props.content}</Item.Description>
-                <Item.Extra>
-                  <div className="daftar">
-                    <ModalPendaftaran content={this.props.paragraph} header="Pendaftaran Lowongan" buttontTitle="Daftar" />
-                  </div>
-                </Item.Extra>
-              </Item.Content>
-            </Item>
-         </Item.Group>
-     );
- }
-}
\ No newline at end of file
+      <Item.Group relaxed>
+        <Item>
+          {this.props.image}
+          <Item.Content verticalAlign="middle">
+            <Item.Header>{this.props.header}</Item.Header>
+            <Item.Description>{this.props.content}</Item.Description>
+            <Item.Extra>
+              <div className="daftar">
+                <ModalPendaftaran content={{ tes: 'dor' }} header="Pendaftaran Lowongan" buttontTitle="Daftar" />
+              </div>
+            </Item.Extra>
+          </Item.Content>
+        </Item>
+      </Item.Group>
+    );
+  }
+}
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..6cea70a2210d3256fa609147b262546338eb0def
--- /dev/null
+++ b/assets/js/components/VacancyList.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Lowongan from './Lowongan';
+
+export default class VacancyList extends React.Component {
+
+  static propTypes = {
+    vacancies: React.PropTypes.array
+  };
+
+  static defaultProps = {
+    vacancies: [],
+  };
+
+  generateVacancies(){
+    return(
+      this.props.vacancies.map((vacancyData) =>
+        <Lowongan data={vacancyData}/>)
+    );
+  }
+
+  render = () => (
+    <div className="vscancyList" >{ this.generateVacancies() }
+    </div>
+  )
+}
\ No newline at end of file