Index: client_app/src/components/login/login.js
===================================================================
--- client_app/src/components/login/login.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
+++ client_app/src/components/login/login.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -0,0 +1,72 @@
+import React from 'react';
+import {useHistory} from 'react-router-dom';
+import {Button, Checkbox, Container, Form} from "semantic-ui-react";
+
+const Login = (props) => {
+
+    const history = useHistory();
+    const [formData, updateFormData] = React.useState({
+        username: "",
+        password: "",
+        type: ""
+    })
+
+    const handleCheck = (e, {value}) => {
+        updateFormData({
+            ...formData,
+            [e.target.name]: value
+        })
+    }
+
+    const onFormSubmit = (e) =>{
+        e.preventDefault();
+        const username = formData.username;
+        const password = formData.password;
+        const type = formData.type;
+
+        props.onCompleteForm(username,password,type);
+        history.push("/");
+    }
+
+    return(
+        <Container>
+            <Form onSubmit={onFormSubmit}>
+                <Form.Input id="username" name="username" type='text' required fluid label='E-mail' placeholder='Enter e-mail.' onChange={handleCheck} />
+                <Form.Input id="password" name="password" type='password' required fluid label='Password' placeholder='Enter password.' onChange={handleCheck} />
+                <Form.Field
+                    control={Checkbox}
+                    radio
+                    label='User'
+                    id="0"
+                    name='type'
+                    value='0'
+                    checked={formData.type === "0"}
+                    onChange={handleCheck}
+                />
+                <Form.Field
+                    control={Checkbox}
+                    radio
+                    label='Team'
+                    id="1"
+                    name='type'
+                    value='1'
+                    checked={formData.type === "1"}
+                    onChange={handleCheck}
+                />
+                <Form.Field
+                    control={Checkbox}
+                    radio
+                    label='Company'
+                    id="2"
+                    name='type'
+                    value='2'
+                    checked={formData.type === "2"}
+                    onChange={handleCheck}
+                />
+                <Form.Field control={Button}>LogIn</Form.Field>
+            </Form>
+        </Container>
+    );
+}
+
+export default Login;
Index: client_app/src/components/main/App.css
===================================================================
--- client_app/src/components/main/App.css	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
+++ client_app/src/components/main/App.css	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
Index: client_app/src/components/main/App.js
===================================================================
--- client_app/src/components/main/App.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
+++ client_app/src/components/main/App.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -0,0 +1,47 @@
+import React, {Component} from 'react';
+import {BrowserRouter as Router, Route} from 'react-router-dom';
+import Login from '../login/login';
+import 'semantic-ui-css/semantic.min.css';
+import HeaderComp from '../template/header';
+import './App.css';
+import UserLogin from "../../repository/login_repo";
+
+class App extends Component{
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: null,
+      email: null,
+      name: null,
+      type: null
+    }
+  }
+
+  render(){
+      return(
+          <Router>
+              <HeaderComp acc={this.state.email} accType={this.state.type} name={this.state.name}/>
+              <main>
+                  <Route path={"/login"} render={() => <Login onCompleteForm={this.attemptLogin}/>}/>
+                  <Route path={"/"}/>
+                  <Route path={"/jobs"}/>
+                  <Route path={"/internships"}/>
+              </main>
+          </Router>
+      );
+  }
+
+  attemptLogin = (username, password, type) => {
+      UserLogin.login(username, password, type).then((res) =>{
+          console.log(res.data);
+          this.setState({
+            id: res.data.id,
+            email: res.data.email,
+            name: res.data.name,
+            type: res.data.type
+          });
+      });
+  }
+}
+
+export default App;
Index: client_app/src/components/template/header.js
===================================================================
--- client_app/src/components/template/header.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
+++ client_app/src/components/template/header.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -0,0 +1,50 @@
+import React from 'react';
+import {Link} from "react-router-dom";
+import {Menu, MenuItem} from "semantic-ui-react";
+
+
+const HeaderComp = (props) => {
+    if(props.accType == null){
+        return(
+            <Menu inverted position="right">
+                <MenuItem as={Link} to='/login'>
+                    Login
+                </MenuItem>
+            </Menu>
+        );
+    }else{
+        if(props.accType==="COMPANY"){
+            return(
+                <Menu inverted position="right">
+                    <Menu.Item as={Link} to='/profile'>
+                        Profile
+                    </Menu.Item>
+                    <Menu.Item as={Link} to='/jobs'>
+                        Jobs
+                    </Menu.Item>
+                    <Menu.Item as={Link} to='/internships'>
+                        Internships
+                    </Menu.Item>
+                </Menu>
+            );
+        }else if(props.accType==="TEAM"){
+            return(
+                <Menu inverted position="right">
+                    <Menu.Item as={Link} to='/login'>
+                        Team
+                    </Menu.Item>
+                </Menu>
+            );
+        }else if(props.accType==="USER"){
+            return(
+                <Menu inverted position="right">
+                    <Menu.Item as={Link} to='/login'>
+                        User
+                    </Menu.Item>
+                </Menu>
+            );
+        }
+    }
+}
+
+export default HeaderComp;
