diff --git a/client/App.js b/client/App.js
deleted file mode 100644
index 5274774..0000000
--- a/client/App.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
-import Login from './Login/Login'
-import './styles.scss';
-
-const App = () => {
-  return (
-    <Router>
-
-      <Link to='/login'>LOGIN</Link>
-      <Route path="/login" exact component={Login} />
-
-
-    </Router>
-  )
-};
-
-
-export default App
\ No newline at end of file
diff --git a/client/App/App.jsx b/client/App/App.jsx
index 0853254..3ac9987 100644
--- a/client/App/App.jsx
+++ b/client/App/App.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { HashRouter as Router, Route } from "react-router-dom";
 import Login from "../Login/Login.jsx";
 import Register from '../Register/Register.jsx'
+import CheckoutFrom from '../CheckoutForm/CheckoutForm.jsx'
 
 import "./App.css";
 
@@ -11,6 +12,7 @@ function App() {
       <Router>
         <Route path="/Login" exact component={Login} />
         <Route path="/Register" exact component={Register} />
+        <Route path="/Checkout-Form" exact component={CheckoutForm} />
       </Router>
     </div>
   );
diff --git a/client/CheckoutForm/CheckoutForm.jsx b/client/CheckoutForm/CheckoutForm.jsx
index ca2af10..508dc72 100644
--- a/client/CheckoutForm/CheckoutForm.jsx
+++ b/client/CheckoutForm/CheckoutForm.jsx
@@ -12,77 +12,115 @@ class CheckoutForm extends Component {
       checkoutDuration: '',
       date: '',
       reasonForCheckout: '',
-
     }
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange = (e) => {
+    const newState = {}
+    newState[e.target.name] = e.target.value,
+      newState[e.target.id] = e.target.value,
+      newState[e.target.email] = e.target.value,
+      newState[e.target.phoneNumber] = e.target.value,
+      newState[e.target.checkoutDuration] = e.target.value,
+      newState[e.target.date] = e.target.value,
+      newState[e.target.reasonForCheckout] = e.target.value,
+
+      this.setState(newState)
   }
 
-  render() {
-    return (
-      <div>
-        <div className='checkout_form_container'>
-          <div className='checkout_square'>
-            <h1 className='checkout_title'>Checkout Form</h1>
-            <form className='checkout_form'>
-
-              {/* Name Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Name' />
-
-              {/* Company ID Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Company ID'
-              />
-
-              {/* Email Address Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Email Address' />
-
-              {/* Phone Number Field  */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Phone Number' />
-
-              {/* Duration of Checkout Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Duration of Checkout' />
-
-              {/* Date Field */} {/* TODO - make dropdown calendar */}
-              <input
-                className='checkout_input_field'
-                type='type'
-                value=''
-                placeholder='Date' />
-
-              {/* Reason for Checkout Field */}
-              <input
-                className='checkout_input_field'
-                type='text'
-                value=''
-                placeholder='Reason for Checkout' />
-
-            </form>
-
-            <button className='checkout_form_button'>Checkout</button>
-          </div>
+  handleSubmit = (e) => {
+    e.preventDefault()
+
+
+  }
+}
+
+render() {
+
+  return (
+    <div>
+      <div className='checkout_form_container'>
+        <div className='checkout_square'>
+          <h1 className='checkout_title'>Checkout Form</h1>
+          <form className='checkout_form' state={this.state} onChange={state => this.setState(state)}>
+
+            {/* Name Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.name}
+              onChange={this.handleChange}
+              placeholder='Name'
+            />
+
+            {/* Company ID Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.id}
+              onChange={this.handleChange}
+              placeholder='Company ID'
+            />
+
+            {/* Email Address Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.email}
+              onChange={this.handleChange}
+              placeholder='Email Address'
+            />
+
+            {/* Phone Number Field  */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.phoneNumber}
+              onChange={this.handleChange}
+              placeholder='Phone Number'
+            />
+
+            {/* Duration of Checkout Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.checkoutDuration}
+              onChange={this.handleChange}
+              placeholder='Duration of Checkout'
+            />
+
+            {/* Date Field */}
+            {' '}
+            {/* TODO - make dropdown calendar */}
+            <input
+              className='checkout_input_field'
+              type='type'
+              value={this.date}
+              onChange={this.handleChange}
+              placeholder='Date'
+            />
+
+            {/* Reason for Checkout Field */}
+            <input
+              className='checkout_input_field'
+              type='text'
+              value={this.reasonForCheckout}
+              onChange={this.handleChange}
+              placeholder='Reason for Checkout'
+            />
+
+          </form>
+
+          <button className='checkout_form_button'>Checkout</button>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 
+
+
 export default CheckoutForm
\ No newline at end of file
diff --git a/client/index.js b/client/index.js
deleted file mode 100644
index 762f752..0000000
--- a/client/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './styles.scss';
-import App from './App'
-
-
-ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/client/index.jsx b/client/index.jsx
index 120caaa..ddeb93f 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App/App.jsx";
+import App from './App/App.jsx'
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/client/styles/styles.css b/client/styles/styles.css
new file mode 100644
index 0000000..cd594ad
--- /dev/null
+++ b/client/styles/styles.css
@@ -0,0 +1,5 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, Arial, sans-serif;
+  color: brown;
+}
+/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/client/styles/styles.css.map b/client/styles/styles.css.map
new file mode 100644
index 0000000..db142a1
--- /dev/null
+++ b/client/styles/styles.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,WAAW,EAAE,mFACM;EACnB,KAAK,EAAE,KAAK;CACb",
+    "sources": [
+        "styles.scss"
+    ],
+    "names": [],
+    "file": "styles.css"
+}
\ No newline at end of file