Index: client_app/src/App.css
===================================================================
--- client_app/src/App.css	(revision f36822a6effc141141cca9161f29476b74cd7772)
+++ 	(revision )
@@ -1,38 +1,0 @@
-.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/App.js
===================================================================
--- client_app/src/App.js	(revision f36822a6effc141141cca9161f29476b74cd7772)
+++ 	(revision )
@@ -1,25 +1,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
Index: client_app/src/App.test.js
===================================================================
--- client_app/src/App.test.js	(revision f36822a6effc141141cca9161f29476b74cd7772)
+++ client_app/src/App.test.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -1,4 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import App from './components/main/App';
 
 test('renders learn react link', () => {
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;
Index: client_app/src/custom_axios/axios.js
===================================================================
--- client_app/src/custom_axios/axios.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
+++ client_app/src/custom_axios/axios.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const instance = axios.create({
+    baseURL: 'http://localhost:9090/api',
+    headers: {
+        'Access-Control-Allow-Origin' : '*'
+    }
+});
+
+export default instance;
Index: client_app/src/index.js
===================================================================
--- client_app/src/index.js	(revision f36822a6effc141141cca9161f29476b74cd7772)
+++ client_app/src/index.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -2,5 +2,5 @@
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/main/App';
 import reportWebVitals from './reportWebVitals';
 
@@ -12,6 +12,3 @@
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
Index: client_app/src/repository/login_repo.js
===================================================================
--- client_app/src/repository/login_repo.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
+++ client_app/src/repository/login_repo.js	(revision 3f5bf9e52a8d5a39df72f03e1a74347b96e88188)
@@ -0,0 +1,13 @@
+import axios from '../custom_axios/axios';
+
+const UserLogin = {
+    login: (username, password, type) => {
+        return axios.post("/login", {
+            "account": username,
+            "password": password,
+            "type": type
+        });
+    }
+}
+
+export default UserLogin;
