diff --git a/backend_app/app.py b/backend_app/app.py
index 8c19963..207d0b6 100644
--- a/backend_app/app.py
+++ b/backend_app/app.py
@@ -3,6 +3,8 @@
 from backend_app.request_handler import RequestHandler
 from backend_app import view
 from backend_app.resources import get_resource
+from flask_cors import CORS, cross_origin
+
 
 with open(get_resource('idp.yml')) as c_file:
     RequestHandler.idp_repo = yaml.safe_load(c_file)
@@ -12,10 +14,13 @@
 
 app = Flask(__name__,
             template_folder=get_resource('templates'),
-            static_folder=get_resource('static'))
-
+            static_folder=get_resource('static'),
+            )
+CORS(app)
 app.register_blueprint(view.view)
 
 if __name__ == '__main__':
     app.debug = True
-    app.run()
+    app.run(
+        use_reloader=False
+    )
diff --git a/react_app/src/components/AssertionCard.js b/react_app/src/components/AssertionCard.js
new file mode 100644
index 0000000..48f8b9c
--- /dev/null
+++ b/react_app/src/components/AssertionCard.js
@@ -0,0 +1,67 @@
+import React from "react";
+import "../index.css";
+
+function AssertionCard(props) {
+
+    if (props.res.assertion_attributes) {
+        let link = props.res.assertion_attributes.errors_found.link;
+        let description = props.res.assertion_attributes.description;
+        let keyArr = [];
+        let values = props.res.assertion_attributes.value;
+        for (let key in values) {
+            if(values.hasOwnProperty(key)) {
+                keyArr.push(key)
+            }
+        }
+         const assertKeys = keyArr.map((key) =>
+            <li>{key} : {values[key]}</li>
+        );
+
+        if (props.res.assertion_attributes.errors_found) {
+            let errors = props.res.assertion_attributes.errors_found;
+            let errorArr = [];
+            for (let key in errors) {
+                if (errors.hasOwnProperty(key)) {
+                    errorArr.push(key)
+                }
+            }
+            const assertErrors = errorArr.map((key) =>
+                <li>{errors[key]}</li>
+            )
+
+            return (
+            <div className="card error-card">
+                <div className="card-body">
+                    <h5 className="card-title error-title">Assertion Attributes</h5>
+                    <p className="card-text">{description}</p>
+                    <p className="card-text">{assertKeys}</p>
+                    <p className="card-text">{assertErrors}</p>
+                    <a href={link} className="card-link">{link}</a>
+                </div>
+            </div>
+        );
+        }
+
+        return (
+            <div className="card">
+                <div className="card-body">
+                    <h5 className="card-title">Assertion Attributes</h5>
+                    <p className="card-text">{description}</p>
+                    <p className="card-text">{assertKeys}</p>
+                    <a href={link} className="card-link">{link}</a>
+                </div>
+            </div>
+        );
+    } else {
+        return(
+            <div>
+
+            </div>
+        )
+    }
+
+
+
+}
+
+export default AssertionCard;
\ No newline at end of file
diff --git a/react_app/src/components/DestinationCard.js b/react_app/src/components/DestinationCard.js
new file mode 100644
index 0000000..0a0ee62
--- /dev/null
+++ b/react_app/src/components/DestinationCard.js
@@ -0,0 +1,37 @@
+import React from "react";
+import "../index.css";
+
+function DestinationCard(props) {
+    // console.log("Destination Card")
+    // console.log(props.res.destination)
+    if (props.res.destination) {
+        return (
+            <div className={'container'}>
+                <div className={"row"}>
+                    <thead>
+                    <tr>
+                        <th scope="col">Attribute</th>
+                        <th scope="col">Value</th>
+                        <th scope="col">Message</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>{props.res.destination.description}</td>
+                        <td>{props.res.destination.value}</td>
+                    </tr>
+                    </tbody>
+                </div>
+            </div>
+        );
+    } else {
+        return(
+        <div>
+
+        </div>
+        )
+    }
+
+}
+
+export default DestinationCard;
\ No newline at end of file
diff --git a/react_app/src/components/ErrorTable.js b/react_app/src/components/ErrorTable.js
new file mode 100644
index 0000000..2def33e
--- /dev/null
+++ b/react_app/src/components/ErrorTable.js
@@ -0,0 +1,28 @@
+import React from "react";
+import "../index.css";
+
+function ErrorTable(props) {
+    return (
+      <div className={'container'}>
+          <div className={"row"}>
+              <thead>
+              <tr>
+                <th scope="col">Attribute</th>
+                <th scope="col">Value</th>
+                <th scope="col">Message</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr>
+                <td>{props.description}</td>
+                <td>{props.hint}</td>
+                <td>{props.link}</td>
+              </tr>
+              </tbody>
+          </div>
+      </div>
+    );
+
+}
+
+export default ErrorTable;
\ No newline at end of file
diff --git a/react_app/src/components/Form.js b/react_app/src/components/Form.js
index 3565e36..e2d2d3e 100644
--- a/react_app/src/components/Form.js
+++ b/react_app/src/components/Form.js
@@ -1,51 +1,151 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import "../index.css";
+import axios from "axios";
+import Table from "../components/Table";
+import MappedCard from "../components/MappedCard";
+import DestinationCard from "./DestinationCard";
+import AssertionCard from "./AssertionCard";
 
 class Form extends Component {
-  render() {
-    return (
-      <div className={'container'}>
-        <form>
-          <div className="form-row">
-            <div className="col-7">
-              <div className="input-group mb-3 field">
-                <div className="input-group-prepend">
-                  <span className="input-group-text">Upload</span>
-                </div>
-                <div className="custom-file">
-                  <input type="file" className="custom-file-input" id="inputGroupFile01" />
-                    <label className="custom-file-label" htmlFor="inputGroupFile01">Choose XML file</label>
+
+    state = {
+        saml_file: null,
+        idp_name: "",
+        data: [],
+        // description: ""
+    }
+
+    handleInputChange = event => {
+        const { name, value } = event.target;
+        this.setState({
+            [name]: value
+        });
+    }
+
+    handleFile(e) {
+        let file = e.target.files[0];
+        this.setState({file: file})
+    }
+
+    handleUpload(e) {
+        let file = this.state.file;
+        let idp_name = this.state.idp_name;
+        let formdata = new FormData();
+        formdata.append('saml_file', file);
+        formdata.append('idp_name', idp_name);
+
+        axios({
+            url: "/upload",
+            method: "POST",
+            data: formdata
+        }).then((res)=> {
+            if (res.data) {
+                // res.data[0] =
+                this.setState({data: res.data})
+
+                // console.log("ARR BELOW")
+                // console.log(arr)
+                // Object.entries(this.state.data).map(([key, value]) =>{
+                //     return(
+                //     <div>{key} : {value}</div>
+                //     )
+                // })
+            }
+        }, (err)=> {
+            console.log(err)
+        })
+    }
+
+    render() {
+        let keyArr = [];
+        let errorArr = [];
+        let jsonData = this.state.data;
+
+        for (let key in jsonData) {
+            if (jsonData.hasOwnProperty(key) && key !== "assertion_attributes" && !("errors_found" in jsonData[key])) {
+                keyArr.push(key);
+            } else if (jsonData.hasOwnProperty(key) && key !== "assertion_attributes" && ("errors_found" in jsonData[key])) {
+                errorArr.push(key);
+            }
+        }
+        const mappedKeys = keyArr.map((key) =>
+            <div className="card">
+                <div className="card-body">
+                    <h5 className="card-title">{key}</h5>
+                    <p className="card-text">{jsonData[key].description}</p>
+                    <p className="card-text">{jsonData[key].value}</p>
                 </div>
-              </div>
             </div>
-            <div className="col-3 field">
-              <select
-                name="userIDP"
-                className="form-control"
-                // value={this.state.fields["userIDP"]}
-                // onChange={this.handleChange.bind(this, "userIDP")}
-              >
-                <option className={"grey-text"}>Select IDP...</option>
-                <option value="SecureAuth">SecureAuth</option>
-                <option value="AD FS">AD FS</option>
-                <option value="PingFederate">PingFederate</option>
-                <option value="Other">Other</option>
-              </select>
+        );
+        const errorKeys = errorArr.map((key) =>
+            <div className="card error-card">
+                <div className="card-body">
+                    <h5 className="card-title error-title">{key}</h5>
+                    <p className="card-text">{jsonData[key].description}</p>
+                    <p className="card-text">{jsonData[key].value}</p>
+                    <p className="card-text">{jsonData[key].errors_found.description}</p>
+                    <p className="card-text">{jsonData[key].errors_found.hint}</p>
+                    <a href={jsonData[key].errors_found.link} className="card-text">{jsonData[key].errors_found.link}</a>
+                </div>
             </div>
-            <div className={"col field"}>
-              <button
-                type="submit"
-                className="btn btn-warning"
-                onClick={this.handleFormSubmit}
-              >
-                SUBMIT
-              </button>
+        );
+
+
+        return (
+            <div className="container">
+                <form>
+                    <div className="form-row">
+                        <div className="col-7">
+                            <div className="input-group mb-3 field">
+                                <div className="input-group-prepend">
+                                    <span className="input-group-text">XML</span>
+                                </div>
+                                <div className="custom-file">
+                                    <input
+                                        type="file"
+                                        name="file"
+                                        className="custom-file-input"
+                                        id="inputGroupFile01"
+                                        onChange={(e)=>this.handleFile(e)}
+                                    />
+                                        <label className="custom-file-label" htmlFor="inputGroupFile01">Choose XML file...</label>
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="col-3 field">
+                            <select
+                                className="form-control"
+                                name="idp_name"
+                                value={this.state.idp_name}
+                                onChange={this.handleInputChange}
+                            >
+                            <option className={"grey-text"}>Select IDP...</option>
+                            <option value="adfs">AD FS</option>
+                            <option value="azure">Azure</option>
+                            <option value="shibboleth">Shibboleth</option>
+                            <option value="google">Google</option>
+                            <option value="wso2">WSO2</option>
+                            <option value="okta">Okta</option>
+                            <option value="other">Other</option>
+                            </select>
+                        </div>
+                        <div className={"col field"}>
+                            <button type="button" className="btn btn-warning mb-2" onClick={(e)=>this.handleUpload(e)}>SUBMIT</button>
+                        </div>
+                        <AssertionCard res={this.state.data} />
+                        {/*<MappedCard res={this.state.data}/>*/}
+                        <li>{errorKeys}</li>
+                        <li>{mappedKeys}</li>
+
+                        {/*<li>{arr.map(item => <MappedCard description={item.description} value={item.value} />)}</li>*/}
+                        {/*<table className="table borderless results-table col-9 mx-auto">{arr.map(item => <Table key={item.label} description={item.description} value={item.value} />)}</table>*/}
+                    </div>
+                </form>
             </div>
-          </div>
-        </form>
-      </div>
-    );
-  }
+        )
+    }
 }
 
 export default Form;
\ No newline at end of file
diff --git a/react_app/src/components/MappedCard.js b/react_app/src/components/MappedCard.js
new file mode 100644
index 0000000..793d7c5
--- /dev/null
+++ b/react_app/src/components/MappedCard.js
@@ -0,0 +1,39 @@
+// import React from "react";
+// import "../index.css";
+//
+// function MappedCard(props) {
+//     if(props.res) {
+//
+//         let description = ""
+//         let keyArr = [];
+//         let jsonData = props.res
+//
+//         for (let key in jsonData) {
+//             console.log(key);
+//             if (jsonData.hasOwnProperty(key) && key !== "assertion_attributes") {
+//                 console.log("KEY BELOW");
+//                 console.log(key);
+//                 keyArr.push(key);
+//             }
+//         }
+//         const mappedKeys = keyArr.map((key) =>
+//             <li>{key} : {jsonData[key].description} &&& {jsonData[key].value}</li>
+//         );
+//
+//         return (
+//             <div className="card error-card">
+//                 <div className="card-body">
+//                     <h5 className="card-title error-title">Assertion Attributes</h5>
+//                     <p className="card-text">{description}</p>
+//                     <p className="card-text">{mappedKeys}</p>
+//                 </div>
+//             </div>
+//         )
+//     }
+// }
+//
+//
+//
+//
+//
+// export default MappedCard;
\ No newline at end of file
diff --git a/react_app/src/components/Table.js b/react_app/src/components/Table.js
index b07b660..2c82813 100644
--- a/react_app/src/components/Table.js
+++ b/react_app/src/components/Table.js
@@ -1,12 +1,12 @@
 import React from "react";
 import "../index.css";
 
-class Table extends React.Component {
-  render() {
+function Table(props) {
     return (
       <div className={'container'}>
           <div className={"row"}>
-            <table className="table borderless results-table col-9 mx-auto">
+            <li>{props.description + " === " + props.value}</li>
+
               <thead>
               <tr>
                 <th scope="col">Attribute</th>
@@ -16,41 +16,14 @@ class Table extends React.Component {
               </thead>
               <tbody>
               <tr>
-                <td>FirstName</td>
-                <td>Samwell</td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>LastName</td>
-                <td>Tarly</td>
-                <td></td>
-              </tr>
-              <tr>
-                <td>Email</td>
-                <td><span className={"error-red"}>bigsammyt@hotmail.biz</span></td>
-                <td><span className={"error-red"}>Email 'bigsammyt@hotmail.biz' does not match user</span></td>
-              </tr>
-              <tr>
-                <td>Larry</td>
-                <td>the Bird</td>
-                <td>@twitter</td>
-              </tr>
-              <tr>
-                <td>Larry</td>
-                <td>the Bird</td>
-                <td>@twitter</td>
-              </tr>
-              <tr>
-                <td>Larry</td>
-                <td>the Bird</td>
-                <td>@twitter</td>
+                <td>{props.description}</td>
+                <td>{props.value}</td>
               </tr>
               </tbody>
-            </table>
           </div>
       </div>
     );
-  }
+
 }
 
 export default Table;
\ No newline at end of file
diff --git a/react_app/src/index.css b/react_app/src/index.css
index 40cda8d..22128cb 100644
--- a/react_app/src/index.css
+++ b/react_app/src/index.css
@@ -1,9 +1,10 @@
 body {
-    background-color: rgb(32, 32, 32);
+    /*background-color: rgb(32, 32, 32);*/
+    background-color: white;
+
 }
 
 h1 {
-  color: white;
   text-align: center;
   margin-top: 50px;
 }
@@ -39,7 +40,8 @@ table {
   margin-top: 50px;
 }
 thead {
-  background-color: #ffc107;
+  /*background-color: #ffc107;*/
+  background-color: white;
   border: none;
 }
 
@@ -58,4 +60,19 @@ thead {
 .small-form {
   width: 400px;
 
+}
+
+.error-title {
+  color: red;
+}
+.card {
+  width: 18rem;
+}
+
+.error-card {
+  border: red 1px solid;
+}
+
+li {
+  list-style-type: none;
 }
\ No newline at end of file
diff --git a/react_app/src/pages/Home.js b/react_app/src/pages/Home.js
index 0d5c10c..57233bd 100644
--- a/react_app/src/pages/Home.js
+++ b/react_app/src/pages/Home.js
@@ -2,14 +2,15 @@ import React, { Component } from "react";
 import Form from "../components/Form"
 import Title from "../components/Title";
 import PracticeForm from "../components/PracticeForm";
+import Table from "../components/Table"
+import MappedCard from "../components/MappedCard";
 
 class Home extends Component {
     render() {
         return (
             <div>
                 <Title />
-                {/*<Form />*/}
-                <PracticeForm />
+                <Form />
             </div>
         )
     }
diff --git a/react_app/src/pages/NoMatch.js b/react_app/src/pages/NoMatch.js
index 6b6dddb..b0ccc7d 100644
--- a/react_app/src/pages/NoMatch.js
+++ b/react_app/src/pages/NoMatch.js
@@ -5,7 +5,7 @@ class NoMatch extends Component {
   render() {
     return (
       <div className={'container'}>
-        <h1>No Match Found</h1>
+        <h1>Page Not Found</h1>
       </div>
     );
   }
diff --git a/react_app/src/utils/API.js b/react_app/src/utils/API.js
index 57df48f..e69de29 100644
--- a/react_app/src/utils/API.js
+++ b/react_app/src/utils/API.js
@@ -1,11 +0,0 @@
-import axios from "axios";
-require("dotenv").config();
-
-export default {
-    addStuff: function (data) {
-        console.log('data is');
-        console.log(data);
-        return axios.post("/api/data", data);
-    }
-
-}
\ No newline at end of file