diff --git a/assets/css/custom.css b/assets/css/custom.css
index a4e5689c259a319e218a81202a7f1f50da97c46c..660c7f39a35a3aeee306a65e7664ab78eff16a05 100755
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,9 +1,10 @@
 
 
-html, body{
+body{
   padding: 0;
   height: auto;
   width: auto;
+  background-color: black;
 }
 
 .center{
@@ -18,10 +19,15 @@ html, body{
 }
 body {
   font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  background: #eee;
   margin: 0;
   padding: 0;
 }
+
+.halamanLowongan{
+
+}
+
+
 .tabs {
   margin-top: 100px;
   margin-left:  150px;
@@ -29,6 +35,7 @@ body {
   background: #fff;
   border: 1px solid #e5e5e5;
   border-radius: 3px;
+  margin-bottom: 30px;
 }
 .tabs__labels {
   margin: 0;
@@ -59,6 +66,12 @@ body {
   height: 700px;
 }
 
+.register{
+margin-left:180px;
+margin-right:110px;
+
+}
+
 .formLogin{
 margin: 0 auto;
 margin-top: 100px;
@@ -71,6 +84,10 @@ padding: 20px;
 
 }
 
+.registerModal{
+  margin: 0 auto;
+}
+
 .bookmark{
   float: right;
 }
@@ -128,10 +145,7 @@ textarea{
   height: 160px !important;
 }
 
-.register{
-  background-color:#3B8686;
 
-}
 
 .note {
   color: gray;
diff --git a/assets/js/CompanyRegister.jsx b/assets/js/CompanyRegister.jsx
index 17604069696c547fb26d9f6b251c0009c16bce6e..91e0e8acee9e44f374a42e446e840f0d0b1451d6 100644
--- a/assets/js/CompanyRegister.jsx
+++ b/assets/js/CompanyRegister.jsx
@@ -40,6 +40,7 @@ export default class companyRegister extends React.Component {
                         icon={{ name: 'attach', circular: true, link: true }}
                         placeholder='attach logo'
                         required
+
                       />
                     </Form.Field>
                     <Form.Field required>
diff --git a/assets/js/Login.jsx b/assets/js/Login.jsx
index 2209c38931b7a047d38c296f610f38340e2a10f4..5a93217b660a249ff753a9da7e6b6bc8e5a24bf1 100644
--- a/assets/js/Login.jsx
+++ b/assets/js/Login.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Segment } from 'semantic-ui-react';
+import { Grid, Segment, Button, Header, Icon, Modal, Form, Input, TextArea, Card} from 'semantic-ui-react';
 import LoginForm from './components/LoginForm';
 
 export default class Login extends React.Component {
@@ -23,7 +23,20 @@ export default class Login extends React.Component {
         <Segment basic>
           <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
           {this.props.children}
-        </Segment>
+
+        </Segment >
+
+          <div className="register">
+            <Card>
+                <Card.Content>
+                    <Card.Header>
+                      New to us ?
+                    </Card.Header>
+                 <RegisterModal />
+                </Card.Content>
+             </Card>
+          </div>
+
       </Grid.Column>
 
       <Grid.Column>
@@ -38,3 +51,67 @@ export default class Login extends React.Component {
   )
 }
 
+const RegisterModal = () => (
+  <Modal trigger={<Button primary floated="right">Register Here!</Button>} closeIcon='close'>
+    <Header icon='archive' content='Register for More Benefits' />
+    <Modal.Content>
+
+         <Form>
+                     <Header as='h2' icon textAlign='center'>
+                      <Icon name='signup' circular />
+                      <Header.Content>
+                        Register
+                      </Header.Content>
+                    </Header>
+                    <Form.Field required>
+                      <label>Email</label>
+                      <Input  type="text" id="email" icon='user' iconPosition='left' placeholder="email" required />
+                    </Form.Field>
+                    <Form.Field required>
+                      <label>Password</label>
+                      <Input type='password' id="password"  icon='key' iconPosition='left' placeholder="password"  required />
+                    </Form.Field>
+                    <Form.Field required>
+                      <label>Konfirmasi Password</label>
+                      <Input type='password' icon="key" iconPosition="left" placeholder='password'  required />
+                    </Form.Field>
+
+                    <Form.Field required>
+                      <label>Nama Perusahaan</label>
+                      <Input placeholder='Nama Perusahaan' required />
+                    </Form.Field>
+                     <Form.Field required>
+                      <label>Logo</label>
+                     <Input
+                        icon={{ name: 'attach', circular: true, link: true }}
+                        placeholder='attach logo'
+                        required
+                        type="File"
+                      />
+                    </Form.Field>
+                    <Form.Field required>
+                      <label>Deskripsi</label>
+                       <TextArea placeholder='Tell us more'  required/>
+                    </Form.Field>
+                     <Form.Field required>
+                      <label>Alamat</label>
+                      <Input placeholder='Alamat' required />
+                    </Form.Field>
+                     <Form.Field required>
+                      <label>Kota</label>
+                      <Input placeholder='Kota' required />
+                    </Form.Field>
+                     <Form.Field required>
+                      <label>Provinsi</label>
+                      <Input placeholder='Provinsi' required />
+                    </Form.Field >
+
+                         <Button type='submit' floated='right' color='blue'>Submit</Button>
+                 </Form>
+
+    </Modal.Content>
+    <Modal.Actions>
+
+    </Modal.Actions>
+  </Modal>
+)
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index fd469a4132a2abb49c4c203ec27e5899abf9b0ec..24fad1e8ef8c87e66a4d55b4d37464890631e2fa 100644
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -23,7 +23,8 @@ export default class VacancyPage extends React.Component {
   render() {
     const student = Storage.get('user-data').student;
 
-    return (<div>
+    return (
+  <div className="halamanLowongan">
       <Tabs selected={0}>
         <Pane label="Semua Lowongan" >
           <VacancyList key={1} url="/vacancies/" />
@@ -35,7 +36,8 @@ export default class VacancyPage extends React.Component {
           <VacancyList key={3} url={`/students/${student.id}/bookmarked-vacancies/`} />
         </Pane>
       </Tabs>
-    </div>
+
+  </div>
 
     );
   }
diff --git a/assets/js/components/Vacancy.jsx b/assets/js/components/Vacancy.jsx
index cea149f38390caee469b6f2186465cef4c498e4a..db3f3d3f8ee261145fb5558ed00099d804fcb28c 100644
--- a/assets/js/components/Vacancy.jsx
+++ b/assets/js/components/Vacancy.jsx
@@ -37,7 +37,6 @@ export default class Vacancy extends React.Component {
             <h4>{ this.props.data.company.name }</h4>
             <h5>{ this.props.data.company.address }</h5>
 
-
             <ModalPendaftaran
               id={this.props.data.id} data={{ header: this.props.data.name,
                 description: this.props.data.description }} buttonTitle="Daftar"