diff --git a/src/components/App.js b/src/components/App.js
index ae7414a..4a429cd 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -15,6 +15,7 @@ import IDSingle from "./root/Pages/IDSingle";
 // Components
 import Home from "./root/Home";
 import Navigation from "./root/Navigation";
+import Autobook from "./root/Pages/Autobook";
 
 // Main app component, react-router comes from here,
 // and links to all of the sub pages
@@ -73,6 +74,7 @@ class App extends Component {
               path="/booked"
               render={(props) => <GenericList {...props} APILINK="/booked/" />}
             />
+            <Route exact path="/check" component={Autobook} />
           </Switch>
         </div>
       </Router>
diff --git a/src/components/root/Pages/Autobook.js b/src/components/root/Pages/Autobook.js
new file mode 100644
index 0000000..ed76b68
--- /dev/null
+++ b/src/components/root/Pages/Autobook.js
@@ -0,0 +1,75 @@
+import React, { Component } from "react";
+import { CredChecker } from "../common/Forms/CredChecker";
+import FormPage from "../common/Forms/FormPage";
+import { callAPI } from "../../actions/API";
+import { GenericForm } from "../common/Forms/GenericForm";
+import moment from "moment";
+
+export default class Book extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      timeslots: [],
+    };
+  }
+  preBookedData = {
+    submit_time: moment().format("YYYY-MM-DD"),
+    dateTime: "2019-03-11T12:00:00.000Z",
+    migration_status: "Booked",
+    domain: null,
+    username: "",
+    original_server: null,
+    new_server: "",
+    agent_booked: "",
+    booked_time: "",
+    ticket_id: "",
+    brand: "",
+    migration_type: "cPanel",
+    booked_date: "",
+    term_date: "",
+    additional_domains: null,
+    notes: "",
+  };
+
+  componentDidMount() {
+    callAPI.get("/gettimeslots/").then((response) => {
+      this.setState({
+        timeslots: response.data,
+      });
+      // console.log(response.data);
+    });
+  }
+
+  credCallback = (credData) => {
+    console.log(credData);
+    this.setState({
+      data: credData,
+    });
+    console.log(this.state.data);
+    this.preBookedData.domain = this.state.data[0].data.main_domain;
+    this.preBookedData.additional_domains = this.state.data[0].data.other_domains;
+    this.preBookedData.username = this.state.data[1].username;
+    this.preBookedData.original_server = this.state.data[1].hostname;
+    console.log(this.preBookedData);
+  };
+  render() {
+    if (this.state.data) {
+      return (
+        <div>
+          {console.log(this.preBookedData)}
+          {this.state.data[0].data.main_domain ? (
+            <GenericForm
+              data={this.preBookedData}
+              timeslots={this.state.timeslots}
+            />
+          ) : (
+            <div></div>
+          )}
+        </div>
+      );
+    } else {
+      return <CredChecker credCallback={this.credCallback} />;
+    }
+  }
+}
diff --git a/src/components/root/Pages/Book.js b/src/components/root/Pages/Book.js
index d2e346a..82836ea 100644
--- a/src/components/root/Pages/Book.js
+++ b/src/components/root/Pages/Book.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import { callAPI } from "../../actions/API";
+import { CredChecker } from "../common/Forms/CredChecker";
 import FormPage from "../common/Forms/FormPage";
 
 // Parent page for the Book component,
@@ -22,6 +23,7 @@ export default class Book extends Component {
       this.setState({
         timeslots: response.data
       })
+      console.log(response.data)
     })
   }
 
diff --git a/src/components/root/common/Forms/CredChecker.js b/src/components/root/common/Forms/CredChecker.js
new file mode 100644
index 0000000..0d50e69
--- /dev/null
+++ b/src/components/root/common/Forms/CredChecker.js
@@ -0,0 +1,31 @@
+import React from "react";
+import { callAPI } from "../../../actions/API";
+
+export const CredChecker = (props) => {
+
+    const sendit = () => {
+        let values = {
+            hostname: document.getElementById("Host").value,
+            username: document.getElementById("User").value,
+            password: document.getElementById("Pass").value,
+        }
+        callAPI
+        .post('/checkcpanel/', values)
+        .then( (resp) => {
+            props.credCallback([resp, values])
+        })
+        console.log()
+        
+    }
+    return (
+        <div>
+            <div className="row">
+                <div className="col s3"><label htmlFor="Host">Hostname</label><input id="Host" ></input></div>
+                <div className="col s3"><label htmlFor="User">Username</label><input id="User" ></input></div>
+                <div className="col s3"><label htmlFor="Pass">Password</label><input id="Pass" ></input></div>
+            </div>
+            <div className="row"><button className="" onClick={sendit}>Check Deets homie</button></div>
+           
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/root/common/Forms/GenericForm.js b/src/components/root/common/Forms/GenericForm.js
index 1b5883c..abba04f 100644
--- a/src/components/root/common/Forms/GenericForm.js
+++ b/src/components/root/common/Forms/GenericForm.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Formik, Form, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import moment from "moment";
@@ -10,462 +10,484 @@ import { builfArrayFromObject } from "../../../actions/Error";
 export const GenericForm = (props) => {
   const [respID, setRespID] = useState(0);
   const [error, setError] = useState(0);
+  const [initial, setInitial] = useState({});
+  const [set, setSet] = useState(false);
+
+  useEffect(() => {
+    // console.log(initial);
+    // console.log(initial.domain);
+
+    if (!set) {
+      console.log(typeof initial.domain);
+      if (props.data) {
+        setInitial(props.data);
+        setSet(true);
+      } else {
+        setInitial({
+          submit_time: moment().format("YYYY-MM-DD"),
+          dateTime: "2019-03-11T12:00:00.000Z",
+          migration_status: "Booked",
+          domain: "",
+          username: "",
+          original_server: "",
+          new_server: "",
+          agent_booked: "",
+          booked_time: "",
+          ticket_id: "",
+          brand: "",
+          migration_type: "",
+          booked_date: "",
+          term_date: "",
+          additional_domains: "",
+          notes: "",
+        });
+        setSet(true);
+      }
+    }
+  });
 
   const getInitial = () => {
-    let initial = {};
-    // console.log(migData);
-    if (props.data) {
-      initial = props.data;
-    } else {
-      initial = {
-        submit_time: moment().format("YYYY-MM-DD"),
-        dateTime: "2019-03-11T12:00:00.000Z",
-        migration_status: "Booked",
-        domain: "",
-        username: "",
-        original_server: "",
-        new_server: "",
-        agent_booked: "",
-        booked_time: "",
-        ticket_id: "",
-        brand: "",
-        migration_type: "",
-        booked_date: "",
-        term_date: "",
-        additional_domains: "",
-        notes: "",
-      };
-    }
-    return initial;
+    // return initial;
   };
 
-  return (
-    <Formik
-      initialValues={getInitial()}
-      validationSchema={Yup.object().shape({
-        domain: Yup.string()
-          .matches(
-            /^((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z-{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
-            "Required field"
-          )
-          .required("Required field"),
-        username: Yup.string().min(2, "Too Short!").required("Required field"),
-        original_server: Yup.string().required("Required field"),
-        new_server: Yup.string().required("Required field"),
-        agent_booked: Yup.string()
-          .min(2, "Too short!")
-          .required("Required field"),
-        booked_time: Yup.string().required("Required field"),
-        ticket_id: Yup.string().required("Required field"),
-        brand: Yup.string().required("Required field"),
-        migration_type: Yup.string().required("Required field"),
-        booked_date: Yup.string().required("Required field"),
-      })}
-      onSubmit={(values, { resetForm }) => {
-        console.log(values);
-        if (values.term_date === "") {
-          values.term_date = null; // Complains on dev but not on live #whocares
-        }
-        if (props.type === "update") {
-          callAPI
-            .put(`/${props.data.id}/`, values)
-            .then(function (response) {
-              setRespID(response.data.ticket_id);
-              setError(0);
-            })
-            .catch(function (error) {
-              setError(builfArrayFromObject(error.response.data));
-              setRespID(0);
-            });
-        } else {
-          callAPI
-            .post("/book/", values)
-            .then(function (response) {
-              setRespID(response.data.id);
-              resetForm({ values: "" });
-            })
-            .catch(function (error) {
-              setError(builfArrayFromObject(error.response.data));
-              setRespID(0);
-            });
-        }
-      }}
-      render={({
-        errors,
-        touched,
-        handleChange,
-        values,
-        handleBlur,
-        handleReset,
-      }) => (
-        <div className="container">
-          <Form>
-            <div className="row">
-              {/* Only show this on update */}
-              {props.type === "update" ? (
+  console.log(initial);
+  if (set) {
+    return (
+      <Formik
+        initialValues={initial}
+        validationSchema={Yup.object().shape({
+          domain: Yup.string()
+            .matches(
+              /^((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z-{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
+              "Required field"
+            )
+            .required("Required field"),
+          username: Yup.string()
+            .min(2, "Too Short!")
+            .required("Required field"),
+          original_server: Yup.string().required("Required field"),
+          new_server: Yup.string().required("Required field"),
+          agent_booked: Yup.string()
+            .min(2, "Too short!")
+            .required("Required field"),
+          booked_time: Yup.string().required("Required field"),
+          ticket_id: Yup.string().required("Required field"),
+          brand: Yup.string().required("Required field"),
+          migration_type: Yup.string().required("Required field"),
+          booked_date: Yup.string().required("Required field"),
+        })}
+        onSubmit={(values, { resetForm }) => {
+          console.log(values);
+          if (values.term_date === "") {
+            values.term_date = null; // Complains on dev but not on live #whocares
+          }
+          if (props.type === "update") {
+            callAPI
+              .put(`/${props.data.id}/`, values)
+              .then(function (response) {
+                setRespID(response.data.ticket_id);
+                setError(0);
+              })
+              .catch(function (error) {
+                setError(builfArrayFromObject(error.response.data));
+                setRespID(0);
+              });
+          } else {
+            callAPI
+              .post("/book/", values)
+              .then(function (response) {
+                setRespID(response.data.id);
+                resetForm({ values: "" });
+              })
+              .catch(function (error) {
+                setError(builfArrayFromObject(error.response.data));
+                setRespID(0);
+              });
+          }
+        }}
+        render={({
+          errors,
+          touched,
+          handleChange,
+          values,
+          handleBlur,
+          handleReset,
+        }) => (
+          <div className="container">
+            <Form>
+              <div className="row">
+                {/* Only show this on update */}
+                {props.type === "update" ? (
+                  <div className="form-group col s3">
+                    <label htmlFor="migrationStatus">Status *</label>
+                    <select
+                      name="migration_status"
+                      type="select"
+                      id="migrationStatus"
+                      placeholder="status placeholder"
+                      value={values.migration_status}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                      className={
+                        "form-control" +
+                        (errors.migration_status && touched.migration_status
+                          ? " is-invalid"
+                          : "")
+                      }
+                    >
+                      <option>Select</option>
+                      <option>Booked</option>
+                      <option>Waiting Termination</option>
+                      <option>Completed</option>
+                      <option>Cancelled</option>
+                    </select>
+                    <ErrorMessage
+                      name="migration_status"
+                      component="div"
+                      className="invalid-feedback"
+                    />
+                  </div>
+                ) : null}
                 <div className="form-group col s3">
-                  <label htmlFor="migrationStatus">Status *</label>
-                  <select
-                    name="migration_status"
-                    type="select"
-                    id="migrationStatus"
-                    placeholder="status placeholder"
-                    value={values.migration_status}
+                  <label htmlFor="bookedDate">Date *</label>
+                  <input
+                    name="booked_date"
+                    type="date"
+                    id="bookedDate"
+                    placeholder="date placeholder"
+                    value={values.booked_date}
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
                       "form-control" +
-                      (errors.migration_status && touched.migration_status
+                      (errors.booked_date && touched.booked_date
+                        ? " is-invalid"
+                        : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="booked_date"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+                <div className="form-group col s3">
+                  <label htmlFor="bookedDomain">Domain *</label>
+                  <input
+                    name="domain"
+                    type="text"
+                    id="bookedDomain"
+                    placeholder="example.com.au"
+                    value={values.domain}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.domain && touched.domain ? " is-invalid" : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="domain"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+                <div className="form-group col s3">
+                  <label htmlFor="bookedSource">Original server *</label>
+                  <input
+                    name="original_server"
+                    type="text"
+                    id="bookedSource"
+                    placeholder="1.2.3.4 / example.com"
+                    value={values.original_server}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.original_server && touched.original_server
+                        ? " is-invalid"
+                        : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="original_server"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+                <div className="form-group col s3">
+                  <label htmlFor="bookedTicket">Ticket ID *</label>
+                  <input
+                    name="ticket_id"
+                    type="text"
+                    id="bookedTicket"
+                    placeholder="VIP-A1234567"
+                    value={values.ticket_id}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.ticket_id && touched.ticket_id
+                        ? " is-invalid"
+                        : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="ticket_id"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+              </div>
+              <div className="row">
+                <div className="form-group col s3">
+                  <label htmlFor="bookedTime">Timeslot *</label>
+                  <select
+                    name="booked_time"
+                    id="bookedTime"
+                    type="select"
+                    value={values.booked_time}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.booked_time && touched.booked_time
                         ? " is-invalid"
                         : "")
                     }
                   >
                     <option>Select</option>
-                    <option>Booked</option>
-                    <option>Waiting Termination</option>
-                    <option>Completed</option>
-                    <option>Cancelled</option>
+                    {props["timeslots"].map((slot) => (
+                      <option key={`${slot}`}>{slot}</option>
+                    ))}
                   </select>
                   <ErrorMessage
-                    name="migration_status"
+                    name="booked_time"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+
+                <div className="form-group col s3 ">
+                  <label htmlFor="bookedUsername">cPanel username *</label>
+                  <input
+                    name="username"
+                    type="text"
+                    id="bookedUsername"
+                    placeholder="example"
+                    value={values.username}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.username && touched.username ? " is-invalid" : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="username"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+
+                <div className="form-group col s3">
+                  <label htmlFor="bookedDestination">New server *</label>
+                  <input
+                    name="new_server"
+                    type="text"
+                    id="bookedDestination"
+                    placeholder="1.2.3.4 / S111.SYD1"
+                    value={values.new_server}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.new_server && touched.new_server
+                        ? " is-invalid"
+                        : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="new_server"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+                <div className="form-group col s3">
+                  <label htmlFor="bookedBrand">Brand *</label>
+                  <select
+                    name="brand"
+                    type="select"
+                    id="bookedBrand"
+                    value={values.brand}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.brand && touched.brand ? " is-invalid" : "")
+                    }
+                  >
+                    <option>Select</option>
+                    <option>VentraIP</option>
+                    <option>Zuver</option>
+                    <option>Synergy</option>
+                  </select>
+                  <ErrorMessage
+                    name="brand"
                     component="div"
                     className="invalid-feedback"
                   />
                 </div>
-              ) : null}
-              <div className="form-group col s3">
-                <label htmlFor="bookedDate">Date *</label>
-                <input
-                  name="booked_date"
-                  type="date"
-                  id="bookedDate"
-                  placeholder="date placeholder"
-                  value={values.booked_date}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.booked_date && touched.booked_date
-                      ? " is-invalid"
-                      : "")
-                  }
-                />
-                <ErrorMessage
-                  name="booked_date"
-                  component="div"
-                  className="invalid-feedback"
-                />
               </div>
-              <div className="form-group col s3">
-                <label htmlFor="bookedDomain">Domain *</label>
-                <input
-                  name="domain"
-                  type="text"
-                  id="bookedDomain"
-                  placeholder="example.com.au"
-                  value={values.domain}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.domain && touched.domain ? " is-invalid" : "")
-                  }
-                />
-                <ErrorMessage
-                  name="domain"
-                  component="div"
-                  className="invalid-feedback"
-                />
+              <div className="row">
+                <div className="form-group col s4">
+                  <label htmlFor="bookedAdditionalDomains">Addon Domains</label>
+                  <input
+                    name="additional_domains"
+                    type="text"
+                    id="bookedAdditionalDomains"
+                    placeholder="example.com.au,example.net.au"
+                    value={values.additional_domains}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.additional_domains && touched.additional_domains
+                        ? " is-invalid"
+                        : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="additional_domains"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+
+                <div className="form-group col s3">
+                  <label htmlFor="bookedAgent">Agent Initials *</label>
+                  <input
+                    name="agent_booked"
+                    type="text"
+                    id="bookedAgent"
+                    placeholder="SZ"
+                    value={values.agent_booked}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.agent_booked && touched.agent_booked
+                        ? " is-invalid"
+                        : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="agent_booked"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+                <div className="form-group col s3">
+                  <label htmlFor="bookedType">Migration type *</label>
+                  <select
+                    name="migration_type"
+                    type="select"
+                    id="bookedType"
+                    value={values.migration_type}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.migration_type && touched.migration_type
+                        ? " is-invalid"
+                        : "")
+                    }
+                  >
+                    <option>Select</option>
+                    <option>cPanel</option>
+                    <option>Plesk</option>
+                    <option>Other</option>
+                  </select>
+                  <ErrorMessage
+                    name="migration_type"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
               </div>
-              <div className="form-group col s3">
-                <label htmlFor="bookedSource">Original server *</label>
-                <input
-                  name="original_server"
-                  type="text"
-                  id="bookedSource"
-                  placeholder="1.2.3.4 / example.com"
-                  value={values.original_server}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.original_server && touched.original_server
-                      ? " is-invalid"
-                      : "")
-                  }
-                />
-                <ErrorMessage
-                  name="original_server"
-                  component="div"
-                  className="invalid-feedback"
-                />
+              <div className="row">
+                <div className="form-group col s4">
+                  <label htmlFor="bookedTermDate">
+                    Estimated termination date (internal migrations only)
+                  </label>
+                  <input
+                    name="term_date"
+                    id="bookedTermDate"
+                    type="date"
+                    value={values.term_date}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.term_date && touched.term_date
+                        ? " is-invalid"
+                        : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="term_date"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+
+                <div className="form-group col s4">
+                  <label htmlFor="bookedNotes">Notes</label>
+                  <textarea
+                    name="notes"
+                    id="notes"
+                    rows={4}
+                    value={values.notes}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.notes && touched.notes ? " is-invalid" : "")
+                    }
+                  />
+                  <ErrorMessage
+                    name="notes"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
               </div>
-              <div className="form-group col s3">
-                <label htmlFor="bookedTicket">Ticket ID *</label>
-                <input
-                  name="ticket_id"
-                  type="text"
-                  id="bookedTicket"
-                  placeholder="VIP-A1234567"
-                  value={values.ticket_id}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.ticket_id && touched.ticket_id ? " is-invalid" : "")
-                  }
-                />
-                <ErrorMessage
-                  name="ticket_id"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-            </div>
-            <div className="row">
-              <div className="form-group col s3">
-                <label htmlFor="bookedTime">Timeslot *</label>
-                <select
-                  name="booked_time"
-                  id="bookedTime"
-                  type="select"
-                  value={values.booked_time}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.booked_time && touched.booked_time
-                      ? " is-invalid"
-                      : "")
-                  }
+              <div className="form-group">
+                <button type="submit" className="btn btn-primary mr-2">
+                  SEND IT
+                </button>
+                <button
+                  type="reset"
+                  className="btn btn-secondary"
+                  onClick={handleReset}
                 >
-                  <option>Select</option>
-                  {props["timeslots"].map((slot) => (
-                    <option key={`${slot}`}>{slot}</option>
-                  ))}
-                </select>
-                <ErrorMessage
-                  name="booked_time"
-                  component="div"
-                  className="invalid-feedback"
-                />
+                  Reset
+                </button>
               </div>
-
-              <div className="form-group col s3 ">
-                <label htmlFor="bookedUsername">cPanel username *</label>
-                <input
-                  name="username"
-                  type="text"
-                  id="bookedUsername"
-                  placeholder="example"
-                  value={values.username}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.username && touched.username ? " is-invalid" : "")
-                  }
-                />
-                <ErrorMessage
-                  name="username"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-
-              <div className="form-group col s3">
-                <label htmlFor="bookedDestination">New server *</label>
-                <input
-                  name="new_server"
-                  type="text"
-                  id="bookedDestination"
-                  placeholder="1.2.3.4 / S111.SYD1"
-                  value={values.new_server}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.new_server && touched.new_server
-                      ? " is-invalid"
-                      : "")
-                  }
-                />
-                <ErrorMessage
-                  name="new_server"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-              <div className="form-group col s3">
-                <label htmlFor="bookedBrand">Brand *</label>
-                <select
-                  name="brand"
-                  type="select"
-                  id="bookedBrand"
-                  value={values.brand}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.brand && touched.brand ? " is-invalid" : "")
-                  }
-                >
-                  <option>Select</option>
-                  <option>VentraIP</option>
-                  <option>Zuver</option>
-                  <option>Synergy</option>
-                </select>
-                <ErrorMessage
-                  name="brand"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-            </div>
-            <div className="row">
-              <div className="form-group col s4">
-                <label htmlFor="bookedAdditionalDomains">Addon Domains</label>
-                <input
-                  name="additional_domains"
-                  type="text"
-                  id="bookedAdditionalDomains"
-                  placeholder="example.com.au,example.net.au"
-                  value={values.additional_domains}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.additional_domains && touched.additional_domains
-                      ? " is-invalid"
-                      : "")
-                  }
-                />
-                <ErrorMessage
-                  name="additional_domains"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-
-              <div className="form-group col s3">
-                <label htmlFor="bookedAgent">Agent Initials *</label>
-                <input
-                  name="agent_booked"
-                  type="text"
-                  id="bookedAgent"
-                  placeholder="SZ"
-                  value={values.agent_booked}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.agent_booked && touched.agent_booked
-                      ? " is-invalid"
-                      : "")
-                  }
-                />
-                <ErrorMessage
-                  name="agent_booked"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-              <div className="form-group col s3">
-                <label htmlFor="bookedType">Migration type *</label>
-                <select
-                  name="migration_type"
-                  type="select"
-                  id="bookedType"
-                  value={values.migration_type}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.migration_type && touched.migration_type
-                      ? " is-invalid"
-                      : "")
-                  }
-                >
-                  <option>Select</option>
-                  <option>cPanel</option>
-                  <option>Plesk</option>
-                  <option>Other</option>
-                </select>
-                <ErrorMessage
-                  name="migration_type"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-            </div>
-            <div className="row">
-              <div className="form-group col s4">
-                <label htmlFor="bookedTermDate">
-                  Estimated termination date (internal migrations only)
-                </label>
-                <input
-                  name="term_date"
-                  id="bookedTermDate"
-                  type="date"
-                  value={values.term_date}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.term_date && touched.term_date ? " is-invalid" : "")
-                  }
-                />
-                <ErrorMessage
-                  name="term_date"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-
-              <div className="form-group col s4">
-                <label htmlFor="bookedNotes">Notes</label>
-                <textarea
-                  name="notes"
-                  id="notes"
-                  rows={4}
-                  value={values.notes}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  className={
-                    "form-control" +
-                    (errors.notes && touched.notes ? " is-invalid" : "")
-                  }
-                />
-                <ErrorMessage
-                  name="notes"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-            </div>
-            <div className="form-group">
-              <button type="submit" className="btn btn-primary mr-2">
-                SEND IT
-              </button>
-              <button
-                type="reset"
-                className="btn btn-secondary"
-                onClick={handleReset}
-              >
-                Reset
-              </button>
-            </div>
-          </Form>
-          {respID ? (
-            props.type === "update" ? (
-              <Msgbox msg={respID}></Msgbox>
-            ) : (
-              <Msgbox linkid={respID}></Msgbox>
-            )
-          ) : null}
-          {error ? <Msgbox error={error}></Msgbox> : null}
-        </div>
-      )}
-    />
-  );
+            </Form>
+            {respID ? (
+              props.type === "update" ? (
+                <Msgbox msg={respID}></Msgbox>
+              ) : (
+                <Msgbox linkid={respID}></Msgbox>
+              )
+            ) : null}
+            {error ? <Msgbox error={error}></Msgbox> : null}
+          </div>
+        )}
+      />
+    );
+  } else {
+    return <div>Loading</div>;
+  }
 };