diff --git a/src/components/editApplication.js b/src/components/editApplication.js
index f3b04d0..f881180 100644
--- a/src/components/editApplication.js
+++ b/src/components/editApplication.js
@@ -1,118 +1,144 @@
-import React from 'react';
-import axios from 'axios';
-import { withRouter } from "react-router";
-
-import { Upload, Form, Input, Button, Typography } from 'antd';
-const { Title } = Typography;
-const { TextArea } = Input;
-
+import {Form, Input, Button, Row,Col} from 'antd'
+import { Redirect } from 'react-router-dom'
+import {status,json} from '../utilities/requestHandlers'
+import UserContext from  '../contexts/user'
+import React from 'react'
+const { TextArea } = Input
 const formItemLayout = {
-  labelCol: { xs: { span: 24 }, sm: { span: 6 } },
-  wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
-};
-
-const tailFormItemLayout = {
-  wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
-};
-
-class EditApplication extends React.Component {
-  
-  constructor(props) {
-      super(props);
-      this.state = {
-        selectedFile: null
-      }
-
-  }
-  
-  componentDidMount(){
-    this.setState({
-      applicationID: this.props.match.params.id
-    })
+    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
+    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
   }
-  
-  handleCompanyNameChange=event=>{
-    this.setState({
-      companyName: event.target.value
-    })
-  }
-  
-  handleCRNChange=event=>{
-    this.setState({
-      crn: event.target.value
-    })
-  }
-	
-	handleAddressChange=event=>{
-    this.setState({
-      address: event.target.value
-    })
-  }
-	
-	handleDateFoundedChange=event=>{
-    this.setState({
-      dateFunded: event.target.value
-    })
-  }
- 
-  handleImageChange=event=>{
-    this.setState({
-      imageURL: event.target.files[0],
-      loaded: 0,
-    })
-  }
-  
-  onClickHandler = () => {
-    const data = new FormData() 
-    if(this.state.imageURL){data.append('upload', this.state.imageURL)}
-    if(this.state.companyName){data.append('companyName', this.state.companyName)}
-    if(this.state.crn){data.append('crn', this.state.crn)}
-		if(this.state.address){data.append('address', this.state.address)}
-		if(this.state.email){data.append('email', this.state.email)}
-		if(this.state.dateFunded){data.append('dateFunded', this.state.dateFunded)}
-    axios.put(`https://animal-hello-3000.codio-box.uk/api/v1/applications/${this.state.applicationID}`, data, { 
-      auth: {
-              username: 'andre',
-              password: '12345'
-        },
-      headers: {
-            'content-type': 'multipart/form-data'
+const tailFormItemLayout = {
+wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
+}
+class EditApplication extends React.Component{
+    constructor(props){
+        super(props)
+        this.state={
+            imageURL:null,
+            redirect:null
         }
-      })
-      .then(res => { // then print response status
-        console.log(res.statusText)
-        this.props.history.push('/')
-      })
-  }
-  
-  render(){
-    return ( 
-      <Form {...formItemLayout}>
-        <Title level={2}> Insert a new application</Title>
-        <Form.Item name="companyName" label="Company Name">
-          <Input onChange={this.handleCompanyNameChange}/>
-        </Form.Item>
-        <Form.Item name="crn" label="Company Registration Number">
-          <Input onChange={this.handleCRNChange}/>
-        </Form.Item>
-				<Form.Item name="address" label="Address">
-          <Input onChange={this.handleAddressChange}/>
-        </Form.Item>
-				<Form.Item name="email" label="Email">
-          <Input onChange={this.handleEmailChange}/>
-        </Form.Item>
-				<Form.Item name="dateFunded" label="Company Foundation Date">
-          <Input onChange={this.handleDateFoundedChange}/>
-        </Form.Item>
-        <Form.Item label="Image">
-          <Input type="file" name="file" onChange={this.handleImageChange}/>
-        </Form.Item>
-        <Button type="button" onClick={this.onClickHandler}>Submit</Button> 
-        </Form>
-    ); 
-  }
+        this._onFinish =this._onFinish.bind(this)
+        this._onCancel =this._onCancel.bind(this)
+    }
+    static contextType = UserContext
+    handleFile =(e)=>{
+        /**
+         * @param {object} e  event to hanldle (file upload in this case)
+         * @return {null} nothing return but component state is changes
+         */
+        let files = e.target.files[0]
+        // console.log(files)
+        this.setState({upload:e.target.files[0]})
+    }
+    _onCancel(values) {
+        console.log(`Recieved values ${values}`)
+        this.setState({redirect:'/'})
+    }
+    _onFinish(values) {
+        console.log(values)
+        const {companyName,crn,address,email,dateFunded}=values
+        values={companyName:companyName,crn:crn,address:address,email:email,dateFunded:dateFunded}
+        console.log("Befpre IF -statement ")
+        console.log(values)
+			//Change listing_to_update for the one used in the TLD backend
+        values.id=this.context.Listing_to_update.ID
+        if (!companyName===true) {
+            values.companyName=this.context.Listing_to_update.companyName
+        }
+        if (!crn===true) {
+            values.crn=this.context.Listing_to_update.crn
+        }
+        if (!address===true) {
+            values.address=this.context.Listing_to_update.address
+        }
+				if (!email===true) {
+            values.email=this.context.Listing_to_update.email
+        }
+				if (!dateFunded===true) {
+            values.dateFunded=this.context.Listing_to_update.dateFunded
+        }
+        console.log("after if statement")
+        console.log(values)
+        this.context.updateListing(values)
+        
+        const formData= new FormData
+				formData.append('id',values.id)
+        formData.append('companyName',values.companyName)
+        formData.append('crn',values.crn)
+				formData.append('address',values.address)
+				formData.append('email',values.email)
+				formData.append('dateFunded',values.dateFunded)
+        if (this.state.upload) {
+            formData.append('upload',this.state.upload,this.state.upload.name)
+        }
+        
+        
+        fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{
+            method:"PUT",
+            body:formData,
+            headers:{
+                "Authorization": "Basic " + btoa(this.context.user.username + ":" + this.context.user.password)
+            }
+        })
+        .then(status)
+        .then(json)
+        .then(()=>{
+            this.setState({redirect:`/{this.context.Listing_to_update.id}`})
+            alert("Successfully updated listing")
+        })
+        .catch(console.error())
 
+    }
+    render(){
+        if (this.state.redirect) {
+            return <Redirect to={this.state.redirect}/>
+        }
+        return(
+            <>
+                <Row  type="flex" justify="space-around" align="middle">
+                    <Col>
+                    <h1>Updating listing</h1>
+                    </Col>
+                </Row>
+                <Form {...formItemLayout} onFinish={this._onFinish}>
+                    <Form.Item name="companyName" label="Name of the Company">
+                        <Input defaultValue={this.context.Listing_to_update.companyName}></Input>
+                    </Form.Item>
+                    <Form.Item name="crn" label="Company Reference Number">
+                        <Input defaultValue={this.context.Listing_to_update.crn}></Input>
+                    </Form.Item>
+                    <Form.Item name="address" label="Address">
+                        <TextArea defaultValue={this.context.Listing_to_update.address}></TextArea>
+                    </Form.Item>
+										<Form.Item name="email" label="Email">
+                        <TextArea defaultValue={this.context.Listing_to_update.email}></TextArea>
+                    </Form.Item>
+										<Form.Item name="dateFunded" label="Foundation Date">
+                        <TextArea defaultValue={this.context.Listing_to_update.dateFunded}></TextArea>
+                    </Form.Item>
+                    <Form.Item name="imageURL" label="Image">
+                        <Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
+                    </Form.Item>
+                    <Form.Item {...tailFormItemLayout}>
+                        <Row>
+                            <Col>
+                                <Form.Item >
+                                    {/* <Button htmlType="submit" type="danger" onClick={_onFinish}>Update</Button> */}
+                                    <Button htmlType="submit" type="danger">Update</Button>
+                                </Form.Item>
+                            </Col>
+                            <Col>
+                                <Form.Item >
+                                    <Button type="primary" onClick={this._onCancel}>Cancel</Button>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                    </Form.Item>
+                    
+                </Form>
+            </>
+        )
+    }
 }
-
-
-export default withRouter(EditApplication);
\ No newline at end of file
+export default EditApplication
\ No newline at end of file
diff --git a/src/components/login.js b/src/components/login.js
index 675ee44..0906501 100644
--- a/src/components/login.js
+++ b/src/components/login.js
@@ -52,10 +52,11 @@ class LoginForm extends React.Component {
             console.log(user);
             user.password = password;  // store in context for future API calls
             this.context.login(user);
+						alert('Hello ' + username + '!')
             this.setState({redirect:'/'});
         })
         .catch(error => {
-            // TODO: show nicely formatted error message
+						alert('Wrong username or password!!')
             console.log('Login failed');
         });  
     }
diff --git a/src/components/newApplication.js b/src/components/newApplication.js
index 7206417..4eb5f45 100644
--- a/src/components/newApplication.js
+++ b/src/components/newApplication.js
@@ -1,109 +1,130 @@
-import React from 'react';
-import axios from 'axios';
-
-import { Upload, Form, Input, Button, Typography } from 'antd';
-const { Title } = Typography;
-const { TextArea } = Input;
-
+import React from 'react'
+import UserContext from '../contexts/user'
+import { Form, Input, Button,Upload } from 'antd'
+import { status, json } from '../utilities/requestHandlers'
+import { Redirect } from 'react-router-dom'
 const formItemLayout = {
-  labelCol: { xs: { span: 24 }, sm: { span: 6 } },
-  wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
-};
-
-const tailFormItemLayout = {
-  wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
-};
-
-class NewApplication extends React.Component {
-  
-  constructor(props) {
-      super(props);
-      this.state = {
-        selectedFile: null
-      }
-
-  }
-  handleCompanyNameChange=event=>{
-    this.setState({
-      companyName: event.target.value
-    })
-  }
-  
-  handleCRNChange=event=>{
-    this.setState({
-      crn: event.target.value
-    })
-  }
-	
-	handleAddressChange=event=>{
-    this.setState({
-      address: event.target.value
-    })
+    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
+    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
   }
-	
-	handleDateFoundedChange=event=>{
-    this.setState({
-      dateFunded: event.target.value
-    })
-  }
- 
-  handleImageChange=event=>{
-    this.setState({
-      imageURL: event.target.files[0],
-      loaded: 0,
-    })
-  }
-  
-  onClickHandler = () => {
-    const data = new FormData() 
-    data.append('upload', this.state.imageURL)
-    data.append('companyName', this.state.companyName)
-    data.append('crn', this.state.crn)
-		data.append('address', this.state.address)
-		data.append('email', this.state.email)
-		data.append('dateFunded', this.state.dateFunded)
-    axios.post("https://animal-hello-3000.codio-box.uk/api/v1/applications", data, { 
-      auth: {
-							username: 'andre',
-              password: '12345'
-        },
-      headers: {
-            'content-type': 'multipart/form-data'
+const tailFormItemLayout = {
+wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
+}
+const { TextArea } = Input
+// Field Rules for input validation in accordance with server-side schema:
+const titleRule=[
+    {required:true,message:'Please type the name of the compnay.',whitespace:false, min:5,max:150}
+]
+const crnRule=[
+    {required:true,message:'Please type the company reference number.',whitespace:false, min:8,max:8}
+]
+const addressRule=[
+    {required:true,message:'Please enter the address where the company is located.',whitespace:false, min:5,max:32}
+]
+const emailRule=[
+    {required:true,message:'Please enter the company email.',whitespace:false, min:5,max:32}
+]
+const dateFoundedRule=[
+    {required:true,message:'Please enter the foundation date of the company.',whitespace:false, min:5,max:32}
+]
+/**
+ * Form to add new listing:
+ */
+class NewApplication extends React.Component{
+    constructor(props){
+        super(props)
+        this.state={
+            companyName:"",
+            crn:"",
+						address:"",
+						email:"",
+						dateFunded:"",
+            imageURL:"",
+						redirect:null
         }
-      })
-      .then(res => { // then print response status
-        console.log(res.statusText)
-      })
-  }
-  
-  render(){
-    return ( 
-      <Form {...formItemLayout}>
-        <Title level={2}> Insert a new application</Title>
-        <Form.Item name="companyName" label="Company Name">
-          <Input onChange={this.handleCompanyNameChange}/>
-        </Form.Item>
-        <Form.Item name="crn" label="Company Registration Number">
-          <Input onChange={this.handleCRNChange}/>
-        </Form.Item>
-				<Form.Item name="address" label="Address">
-          <Input onChange={this.handleAddressChange}/>
-        </Form.Item>
-				<Form.Item name="email" label="Email">
-          <Input onChange={this.handleEmailChange}/>
-        </Form.Item>
-				<Form.Item name="dateFunded" label="Company Foundation Date">
-          <Input onChange={this.handleDateFoundedChange}/>
-        </Form.Item>
-        <Form.Item label="Image">
-          <Input type="file" name="file" onChange={this.handleImageChange}/>
-        </Form.Item>
-        <Button type="button" onClick={this.onClickHandler}>Submit</Button> 
-        </Form>
-    ); 
-  }
-
+        this.handleSubmit =this.handleSubmit.bind(this)
+        this.handleFile =this.handleFile.bind(this)
+    }
+    static contextType = UserContext
+    handleSubmit =(values)=>{
+        /**
+         * @param {Object} values obtained from form fields
+         */
+        // creating form-data object 
+        const formData =new FormData()
+        const {companyName,crn,address,email,dateFunded}=values
+        console.log(values)
+        const username=this.context.user.username
+        const password=this.context.user.password
+        console.log(values)
+        this.setState({companyName:companyName})
+        this.setState({crn:crn})
+        this.setState({address:address})
+				this.setState({email:email})
+				this.setState({dateFunded:dateFunded})
+        formData.append('companyName',this.state.companyName)
+        formData.append('crn',this.state.crn)
+				formData.append('address',this.state.address)
+				formData.append('email',this.state.email)
+				formData.append('dateFunded',this.state.dateFunded)
+        formData.append('imageURL',this.state.upload,this.state.imageURL.name)
+        fetch('https://animal-hello-3000.codio-box.uk/api/v1/applications',{
+            method:"POST",
+						body:formData,
+            headers:{
+                "Authorization": "Basic " + btoa(username + ":" + password),
+            } 
+        })
+        .then(status)
+        .then(json)
+        .then(()=>{
+            alert("Successfully added new listing")
+            this.setState({redirect:"/"})// change this to all users listings pages
+        })
+        .catch(err => {
+            alert("Error trying to add new listing")
+            console.log(err)
+        })
+    }
+    handleFile =(e)=>{
+        /**
+         * @param {object} e  event to hanldle (file upload in this case)
+         * @return {null} nothing return but component state is changes
+         */
+        let files = e.target.files[0]
+        console.log(files)
+        this.setState({upload:e.target.files[0]})
+    }
+    render(){
+        if (this.state.redirect) {
+            return <Redirect to={this.state.redirect} />
+        }
+        return(
+            <Form {... formItemLayout} onFinish={this.handleSubmit}>
+                <Form.Item name="companyName" label="Name of the Company" rules={titleRule}>
+                    <Input />
+                </Form.Item>
+								<Form.Item name="crn" label="Company Reference Number" rules={crnRule}>
+                    <TextArea showCount={true} maxLength={8}/>
+                </Form.Item>
+                <Form.Item name="address" label="Address" rules={addressRule}>
+                    <TextArea showCount={true} maxLength={500}/>
+                </Form.Item>
+								<Form.Item name="email" label="Email" rules={emailRule}>
+                    <TextArea showCount={true} maxLength={500}/>
+                </Form.Item>
+								<Form.Item name="dateFunded" label="Foundation Date" rules={dateFoundedRule}>
+                    <TextArea showCount={true} maxLength={500}/>
+                </Form.Item>
+                <Form.Item name="imageURL" label="Image">
+                    <Input type="file" onChange={this.handleFile} accept="image/png, image/jpeg"/>
+                </Form.Item>
+                <Form.Item {...tailFormItemLayout}>
+                    <Button type="primary" htmlType="submit">Add new listing</Button>
+                </Form.Item>
+            </Form>
+        )
+    }
 }
 
-
-export default NewApplication;
\ No newline at end of file
+export default NewApplication
\ No newline at end of file
diff --git a/src/components/register.js b/src/components/register.js
index 78ea4cf..af1479d 100644
--- a/src/components/register.js
+++ b/src/components/register.js
@@ -62,19 +62,6 @@ const usernameRules = [
     })
 ];
 
-const validateAdminRules = [
-    { required: false, message: 'This code is only needed for admins!', whitespace: true },
-		({ getFieldValue }) => ({
-        validator(rule, value) {
-            if (!value || getFieldValue('validate_admin') === 'shelter') {
-								//setFieldValue('role') = 'admin';   //change the default value of role from user to admin
-                return Promise.resolve();
-            }
-            return Promise.reject('Incorrect code');
-        }
-    })
-]
-
 /**
  * Registration form component for app signup.
  */
@@ -100,11 +87,13 @@ class RegistrationForm extends React.Component {
     .then(data => {
         // TODO: display success message and/or redirect
         console.log(data);
-        alert("User added")
+        alert("User added!")
+				this.setState({redirect:"/"})
     })
     .catch(err => {
         // TODO: show nicely formatted error message and clear form
-        alert("Error adding user");
+        alert("Error adding user!");
+				console.log('Register failed');
     });  
   };
   
@@ -137,10 +126,6 @@ class RegistrationForm extends React.Component {
             <Input.Password />
         </Form.Item>
 
-			<Form.Item name="validate_admin" label="Sign up code" rules={validateAdminRules} >
-            <Input />
-        </Form.Item>
-
         <Form.Item {...tailFormItemLayout}>
             <Button type="primary" htmlType="submit">
                 Register