diff --git a/assets/css/custom.css b/assets/css/custom.css
index f5eaade5b6d7d5bd64305c24e1b84a8f4abbda4e..79273fc0686890dd7c6970a2ffecd8d8bf185252 100755
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -109,15 +109,14 @@ font-size: 30px;
 }
 
 .registerForm{
-  width: 500px;
+  width: 800px;
   margin: 0 auto;
   padding:50px;
-  background-color: white;
+  background-color: #3B8686;
 
 }
 
 .register{
-  background-color: white;
   background-color:#3B8686;
 
 }
@@ -141,3 +140,6 @@ input.active:invalid {
   margin-top: 5px;
 }
 
+card .formRegis{
+  margin-top: 100px;
+}
\ No newline at end of file
diff --git a/assets/js/CompanyRegister.jsx b/assets/js/CompanyRegister.jsx
index 8639304e65b25dbc4b3eaf9283c94bea0cadb6d8..a498fc22db7971e831c00e5cbb66344157448b89 100644
--- a/assets/js/CompanyRegister.jsx
+++ b/assets/js/CompanyRegister.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import { Button, Checkbox, Form, Input, TextArea, Grid, Divider, Header, Icon} from 'semantic-ui-react';
+import { Button, Checkbox, Form, Input, TextArea, Grid, Divider, Header, Icon, Card } from 'semantic-ui-react';
 
 export default class companyRegister extends React.Component {
 
   render = () => (
 
      <div  className="register">
+
         <div className="registerForm">
+        <Card fluid >
+            <Card.Content>
                  <Form>
                      <Header as='h2' icon textAlign='center'>
                       <Icon name='signup' circular />
@@ -16,7 +19,7 @@ export default class companyRegister extends React.Component {
                     </Header>
                     <Form.Field required>
                       <label>Email</label>
-                      <Input type="text" id="email" icon='user' iconPosition='left' placeholder="email" required />
+                      <Input  type="text" id="email" icon='user' iconPosition='left' placeholder="email" required />
                     </Form.Field>
                     <Form.Field required>
                       <label>Password</label>
@@ -57,9 +60,11 @@ export default class companyRegister extends React.Component {
                     </Form.Field >
                     <Button type='submit' floated='right' color='blue'>Submit</Button>
                  </Form>
-             </div>
-     </div>
+            </Card.Content>
+        </Card>
+        </div>
 
+     </div>
 
         )
 }
diff --git a/assets/js/Dashboard.jsx b/assets/js/Dashboard.jsx
index 634fdefa158dd30f6ae874043706f94ec0f3fd87..f297f54d69d0488114593e8810b001fcd4bd1a7f 100755
--- a/assets/js/Dashboard.jsx
+++ b/assets/js/Dashboard.jsx
@@ -11,7 +11,7 @@ export default class Dashboard extends React.Component {
 
   render = () => (
     <div>
-      <TopMenu />
+      <TopMenu color="blue" />
       {this.props.children}
     </div>
   )
diff --git a/assets/js/Index.jsx b/assets/js/Index.jsx
index 172105c661b699a94c316f931ccf7201e981cf3a..476827b9082876de2a143f8e79801983d49551ce 100644
--- a/assets/js/Index.jsx
+++ b/assets/js/Index.jsx
@@ -5,6 +5,7 @@ import { Segment, Modal, Button, Icon, Image as ImageComponent, Item, TextArea,
 import Dashboard from './Dashboard';
 import Login from './Login';
 import VacancyPage from './VacancyPage';
+import CompanyRegister from './CompanyRegister';
 // import Register from './CompanyRegister'
 import Pane from './components/Pane';
 import Tabs from './components/Tabs';
@@ -19,6 +20,7 @@ export const Profile = () => (
 export const App = () => (
   <Router history={browserHistory}>
     <Route path="/login" component={Login} />
+    <Route path="/register" component={CompanyRegister} />
     {/*<Route path="/register" component={Register} />*/}
     <Route component={Dashboard}>
       <Route path="/" component={Profile} />
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 6f3bd2a2dd1ec4fb13a4f441103e0d4121bbb490..efbe3c50707701249f06ae17cd02b3be540df2bb 100644
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -29,7 +29,7 @@ export default class VacancyPage extends React.Component {
   // }
 
   render() {
-    const data = [{ data1: 'val1' }, { data1: 'val2' }];
+    const data = [{ data1: 'Software Enggineer' }, { data1: 'System Analyst' }];
 
     return (<div>
       <Tabs selected={0}>
diff --git a/assets/js/components/Lowongan.jsx b/assets/js/components/Lowongan.jsx
index 1f194746ed9c2eeb860cc5945068284e51f6eb16..2998b80a7b13fe070028d2e16695fe0e126f951b 100644
--- a/assets/js/components/Lowongan.jsx
+++ b/assets/js/components/Lowongan.jsx
@@ -4,7 +4,7 @@ import ModalPendaftaran from './ModalPendaftaran';
 
 
  const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
-
+const image = <Item.Image size="small" src="http://semantic-ui.com/images/wireframe/image.png" />;
 export default class Lowongan extends React.Component {
   static propTypes = {
     data: React.PropTypes.object.isRequired,
@@ -14,14 +14,16 @@ export default class Lowongan extends React.Component {
     return (
 
         <Item >
-          {this.props.image}
+          {image}
           <Item.Content verticalAlign="middle">
             <Item.Header>{this.props.header}</Item.Header>
             <Item.Description>{this.props.content}</Item.Description>
             <Item.Extra>
 
-                <h4>{ this.props.data.data1 }</h4>
-                {paragraph}
+                <h3>{ this.props.data.data1 }</h3>
+                <h4>PT. Koding Kuat </h4>
+                <h5> JL.Kali deres utara no.1 </h5>
+                <h5> Jakarta Barat, DKI Jakarta</h5>
 
                 <ModalPendaftaran id={1} data={ { header: 'Deskripsi Lowongan', description: 'Lorem ipsum dolor sit amet, consectetur' +
                 ' adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
diff --git a/assets/js/components/TopMenu.jsx b/assets/js/components/TopMenu.jsx
index ef61735d89b3a160237e9948bd5d728a5fc11408..a6f9adf939b410d3a3b6f72c8f0fe1ad23ba2dea 100644
--- a/assets/js/components/TopMenu.jsx
+++ b/assets/js/components/TopMenu.jsx
@@ -6,12 +6,15 @@ import Server from '../lib/Server';
 export default class TopMenu extends React.Component {
   state = { activeItem: 'home' };
 
+  handleItemClick = (e, { name2 }) => this.setState({ activeItem: name })
+
   render() {
+      const { activeItem } = this.state
     return (
       <Menu pointing secondary>
         <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
         <Menu.Menu position="right">
-          <Menu.Item as={Link} to="/home" name="home" />
+          <Menu.Item as={Link} to="/lowongan" name="home" />
           <Menu.Item as={Link} to="/profile" name="profil" />
           {Server.isLoggedIn() ?
             <Menu.Item as={Link} href="/api/api-auth/logout/?next=/" name="logout" /> :
diff --git a/core/views/accounts.py b/core/views/accounts.py
index a3580ca2af7073c51edf43b8767700d38a3d8af3..3e2341c45a9f5a9a6bc1058a7abe50c3b3390c55 100644
--- a/core/views/accounts.py
+++ b/core/views/accounts.py
@@ -9,7 +9,8 @@ from rest_framework.response import Response
 
 from core.lib.permissions import IsAdminOrStudent, IsAdminOrSelfOrReadOnly, IsAdminOrCompany, IsAdminOrSupervisor
 from core.models.accounts import Student, Company, Supervisor
-from core.serializers.accounts import UserSerializer, StudentSerializer, CompanySerializer, SupervisorSerializer
+from core.serializers.accounts import UserSerializer, StudentSerializer, CompanySerializer, SupervisorSerializer, \
+    LoginSerializer
 
 
 class UserViewSet(viewsets.ModelViewSet):
@@ -65,7 +66,7 @@ class SupervisorViewSet(viewsets.ModelViewSet):
 
 class LoginViewSet(viewsets.GenericViewSet):
     permission_classes = (AllowAny, )
-    serializer_class = UserSerializer
+    serializer_class = LoginSerializer
     queryset = User.objects.all()
 
     def create(self, request):
@@ -111,23 +112,26 @@ class LoginViewSet(viewsets.GenericViewSet):
                             resume=None,
                             phone_number=None
                         )
-                        user.save()
                         student.save()
                     else:
                         supervisor = Supervisor.objects.create(
                             user=user,
                             nip=resp.get("kodeidentitas")
                         )
-                        user.save()
                         supervisor.save()
-                    return Response(status=status.HTTP_201_CREATED)
-                return Response(status=status.HTTP_200_OK)
+                    serializer = LoginSerializer(user, context={'request': request})
+                    return Response(serializer.data, status=status.HTTP_201_CREATED)
+                serializer = LoginSerializer(user, context={'request': request})
+                return Response(serializer.data, status=status.HTTP_200_OK)
             else:
                 return Response(status=status.HTTP_401_UNAUTHORIZED)
-        else:
+        elif login_type == "company":
             user = authenticate(username = username, password = password)
             if user is not None:
                 login(request, user)
-                return Response(status=status.HTTP_200_OK)
+                serializer = LoginSerializer(user, context={'request': request})
+                return Response(serializer.data, status=status.HTTP_200_OK)
             else:
                 return Response(status=status.HTTP_401_UNAUTHORIZED)
+        else:
+            return Response(status=status.HTTP_400_BAD_REQUEST)