diff --git a/assets/js/components/ModalAlert.jsx b/assets/js/components/ModalAlert.jsx
index c0e2d29de0f12cc07c1e003f65565733f706e13b..6fb8e3092ea6bcf1f0800b46bbb84f41ee666f7b 100644
--- a/assets/js/components/ModalAlert.jsx
+++ b/assets/js/components/ModalAlert.jsx
@@ -1,25 +1,45 @@
 import React from 'react';
-import { Modal, Button, Icon, Header } from 'semantic-ui-react';
+import { Modal, Button, Icon } from 'semantic-ui-react';
+import Server from '../lib/Server';
+import Logger from '../lib/Logger';
 
 export default class ModalAlert extends React.Component {
   static propTypes = {
+    id: React.PropTypes.number.isRequired,
     onChangeValue: React.PropTypes.func.isRequired,
     coverLetter: React.PropTypes.string.isRequired,
-    header: React.PropTypes.oneOfType([
-      React.PropTypes.node,
-      React.PropTypes.string,
-    ]).isRequired,
-    content: React.PropTypes.oneOfType([
-      React.PropTypes.node,
-      React.PropTypes.string,
-    ]).isRequired,
   };
 
-  state = { open: false };
+  constructor(props) {
+    super(props);
+    /* istanbul ignore next */
+    this.state = {
+      open: false,
+      header: 'Menghubungkan ke Server',
+      content: 'Harap menunggu, permintaan anda sedang diproses...',
+    };
+    this.handleOpen = this.handleOpen.bind(this);
+  }
 
   open = () => this.setState({ open: true });
   close = () => this.setState({ open: false });
 
+  handleOpen() {
+    Logger.log(this.state);
+    const requestData = { coverLetter: this.props.coverLetter };
+    Server.post(`/students/${this.props.id}/application`, requestData).then((data) => {
+      this.setState({
+        header: 'Pendaftaran Berhasil',
+        content: this.successResponse + JSON.stringify(data),
+      });
+    }, (error) => {
+      this.setState({
+        responseHeader: 'Pendaftaran Gagal',
+        responseText: this.failedResponse + JSON.stringify(error),
+      });
+    });
+  }
+
   render() {
     const { open } = this.state;
 
@@ -30,16 +50,16 @@ export default class ModalAlert extends React.Component {
         onClose={this.close}
         size="small"
         basic
-        trigger={<Button color="blue" > Proceed <Icon name="right chevron" /></Button>}
+        trigger={<Button color="blue" onClick={this.handleOpen}> Proceed <Icon name="right chevron" /></Button>}
       >
-        <Modal.Header>{this.props.header}</Modal.Header>
+        <Modal.Header>{this.state.header}</Modal.Header>
         <Modal.Content>
-          <p>{this.props.content}</p>
+          <p>{this.state.content}</p>
         </Modal.Content>
         <Modal.Actions>
-          <Button icon='checkmark' color="green" content="All Done" onClick={this.props.onChangeValue} />
+          <Button icon="checkmark" color="green" content="All Done" onClick={this.props.onChangeValue} />
         </Modal.Actions>
       </Modal>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/assets/js/components/ModalPendaftaran.jsx b/assets/js/components/ModalPendaftaran.jsx
index 6db47a16704f0747d0c19d67de82f63e6c58a145..08fa543f0a971a52edad08c7a11bdb85a4e5710f 100644
--- a/assets/js/components/ModalPendaftaran.jsx
+++ b/assets/js/components/ModalPendaftaran.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Modal, Button, Icon, TextArea, Form } from 'semantic-ui-react';
 import ModalAlert from './ModalAlert';
-import Server from '../lib/Server';
 
 export default class ModalPendaftaran extends React.Component {
   static propTypes = {
@@ -31,19 +30,6 @@ export default class ModalPendaftaran extends React.Component {
   }
 
   handleOpen() {
-    console.log(this.state);
-    const data = { coverLetter: this.state.coverLetter };
-    Server.post(`/students/${this.props.id}/application`, data).then((data) => {
-      this.setState({
-        responseHeader: 'Pendaftaran Berhasil',
-        responseText: this.successResponse + JSON.stringify(data),
-      });
-    }, (error) => {
-      this.setState({
-        responseHeader: 'Pendaftaran Gagal',
-        responseText: this.failedResponse + JSON.stringify(error),
-      });
-    });
     this.setState({ modalOpen: true });
   }
 
@@ -83,9 +69,9 @@ export default class ModalPendaftaran extends React.Component {
       </Modal.Content>
       <Modal.Actions>
         <ModalAlert
+          id={this.props.id}
           onChangeValue={this.handleClose}
-          header={this.state.responseHeader}
-          content={this.state.responseText}
+          coverLetter={this.state.coverLetter}
         />
       </Modal.Actions>
     </Modal>
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 583774e932f7aac86bc91d2cc3f736f0455132f8..3cfcb3fdfd695abd2d8d2571f57232816e5dcc1c 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -10,7 +10,7 @@ export default class VacancyList extends React.Component {
 
   generateVacancies() {
     return this.props.vacancies.map((vacancy) =>
-      <Lowongan data={vacancy} />,
+      <Lowongan key={vacancy.id} data={vacancy} />,
     );
   }
 
diff --git a/npm-debug.log b/npm-debug.log
deleted file mode 100644
index 6c791169633a7d01b3223824e6428c784e93a138..0000000000000000000000000000000000000000
--- a/npm-debug.log
+++ /dev/null
@@ -1,48 +0,0 @@
-0 info it worked if it ends with ok
-1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
-1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
-1 verbose cli   'run',
-1 verbose cli   'karma' ]
-2 info using npm@3.10.10
-3 info using node@v6.10.0
-4 verbose run-script [ 'prekarma', 'karma', 'postkarma' ]
-5 info lifecycle kape@1.0.0~prekarma: kape@1.0.0
-6 silly lifecycle kape@1.0.0~prekarma: no script for prekarma, continuing
-7 info lifecycle kape@1.0.0~karma: kape@1.0.0
-8 verbose lifecycle kape@1.0.0~karma: unsafe-perm in lifecycle true
-9 verbose lifecycle kape@1.0.0~karma: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;A:\Kuliah\Semester 6\PPL\kape\node_modules\.bin;B:\Programs\cmder_mini\bin;B:\Programs\cmder_mini\vendor\conemu-maximus5\ConEmu\Scripts;B:\Programs\cmder_mini\vendor\conemu-maximus5;B:\Programs\cmder_mini\vendor\conemu-maximus5\ConEmu;C:\Windows\system32;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;B:\Programs\cmder_mini\bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Haskell\bin;C:\Program Files\Haskell Platform\7.10.3\lib\extralibs\bin;C:\Program Files\Haskell Platform\7.10.3\bin;C:\Windows;C:\cygwin64\bin;C:\Program Files (x86)\OpenSSH\bin;C:\Program Files (x86)\Intel\OpenCL SDK\3.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\3.0\bin\x64;C:\Program Files\Git\cmd;C:\Program Files\Haskell Platform\7.10.3\mingw\bin;C:\Program Files\Java\jdk1.8.0_73\bin;C:\Program Files\Calibre2\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Sublime Text 3;C:\Program Files (x86)\Skype\Phone\;C:\Python27;C:\Python27\Scripts;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;B:\Programs\gradle-3.0\bin;C:\Program Files\MATLAB\MATLAB Production Server\R2015a\runtime\win64;C:\Program Files\MATLAB\MATLAB Production Server\R2015a\bin;C:\Program Files\MATLAB\MATLAB Production Server\R2015a\polyspace\bin;C:\Program Files\nodejs\;C:\Program Files\PostgreSQL\9.6\bin;B:\Programs\cmder_mini;C:\Users\M. Reza Qorib\Anaconda3;C:\Users\M. Reza Qorib\Anaconda3\Scripts;C:\Users\M. Reza Qorib\Anaconda3\Library\bin;C:\Users\M. Reza Qorib\AppData\Local\Programs\Python\Python35-32\Scripts\;C:\Users\M. Reza Qorib\AppData\Local\Programs\Python\Python35-32\;C:\Users\M. Reza Qorib\AppData\Roaming\cabal\bin;C:\Users\M. Reza Qorib\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Atmel\Flip 3.4.7\bin;C:\Users\M. Reza Qorib\AppData\Roaming\npm;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\share\vim\vim74;B:\Programs\cmder_mini\
-10 verbose lifecycle kape@1.0.0~karma: CWD: A:\Kuliah\Semester 6\PPL\kape
-11 silly lifecycle kape@1.0.0~karma: Args: [ '/d /s /c', 'karma start' ]
-12 silly lifecycle kape@1.0.0~karma: Returned: code: 1  signal: null
-13 info lifecycle kape@1.0.0~karma: Failed to exec karma script
-14 verbose stack Error: kape@1.0.0 karma: `karma start`
-14 verbose stack Exit status 1
-14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
-14 verbose stack     at emitTwo (events.js:106:13)
-14 verbose stack     at EventEmitter.emit (events.js:191:7)
-14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
-14 verbose stack     at emitTwo (events.js:106:13)
-14 verbose stack     at ChildProcess.emit (events.js:191:7)
-14 verbose stack     at maybeClose (internal/child_process.js:877:16)
-14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
-15 verbose pkgid kape@1.0.0
-16 verbose cwd A:\Kuliah\Semester 6\PPL\kape
-17 error Windows_NT 10.0.14393
-18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "karma"
-19 error node v6.10.0
-20 error npm  v3.10.10
-21 error code ELIFECYCLE
-22 error kape@1.0.0 karma: `karma start`
-22 error Exit status 1
-23 error Failed at the kape@1.0.0 karma script 'karma start'.
-23 error Make sure you have the latest version of node.js and npm installed.
-23 error If you do, this is most likely a problem with the kape package,
-23 error not with npm itself.
-23 error Tell the author that this fails on your system:
-23 error     karma start
-23 error You can get information on how to open an issue for this project with:
-23 error     npm bugs kape
-23 error Or if that isn't available, you can get their info via:
-23 error     npm owner ls kape
-23 error There is likely additional logging output above.
-24 verbose exit [ 1, true ]