diff --git a/src/components/root/common/Forms/CPanelForm.js b/src/components/root/common/Forms/CPanelForm.js
new file mode 100644
index 0000000..7f98334
--- /dev/null
+++ b/src/components/root/common/Forms/CPanelForm.js
@@ -0,0 +1,406 @@
+import React, { useState } from "react";
+import { Formik, Form, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import moment from "moment";
+
+import { callAPI } from "../../../actions/API";
+import Msgbox from "../../../actions/Msgbox";
+import { builfArrayFromObject } from "../../../actions/Error";
+
+export const CPanelForm = (timeslots) => {
+  const [respID, setRespID] = useState(0);
+  const [error, setError] = useState(0);
+
+  return (
+    <Formik
+      initialValues={{
+        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: "",
+      }}
+      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);
+        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">
+              <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>
+              <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>
+                  {timeslots.timeslots.map((slot) => (
+                    <option>{slot}</option>
+                  ))}
+                </select>
+                <ErrorMessage
+                  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>
+            </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>VentraIP</option>
+                  <option>Zuver</option>
+                  <option>Synergy</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 ? <Msgbox linkid={respID}></Msgbox> : null}
+          {error ? <Msgbox error={error}></Msgbox> : null}
+        </div>
+      )}
+    />
+  );
+};
diff --git a/src/components/root/common/Forms/FormPage.js b/src/components/root/common/Forms/FormPage.js
index 2262e09..2269335 100644
--- a/src/components/root/common/Forms/FormPage.js
+++ b/src/components/root/common/Forms/FormPage.js
@@ -10,10 +10,10 @@ import {
 } from "reactstrap";
 import classnames from "classnames";
 
-import { CPanelBooking } from "./CPanelBooking";
 import EmailBooking from "./EmailBooking";
+import { CPanelForm } from "./CPanelForm";
 
-const FormPage = ({ timeslots,  item }) => {
+const FormPage = ({ timeslots, item }) => {
   const [activeTab, setActiveTab] = useState("1");
 
   const toggle = (tab) => {
@@ -50,15 +50,15 @@ const FormPage = ({ timeslots,  item }) => {
       <TabContent activeTab={activeTab}>
         <TabPane tabId="1">
           <Row>
-            <Col sm="12">
-              <CPanelBooking timeslots={timeslots} />
+            <Col>
+              <CPanelForm timeslots={timeslots} key={timeslots.id} />
             </Col>
           </Row>
         </TabPane>
         <TabPane tabId="2">
           <Row>
-            <Col sm="6">
-              <EmailBooking />
+            <Col sm="12">
+              <EmailBooking />{" "}
             </Col>
           </Row>
         </TabPane>
diff --git a/src/components/root/common/Forms/CPanelBooking.js b/src/components/root/common/Forms/__CPanelBooking
similarity index 99%
rename from src/components/root/common/Forms/CPanelBooking.js
rename to src/components/root/common/Forms/__CPanelBooking
index 83b4ed6..a4ca2b9 100644
--- a/src/components/root/common/Forms/CPanelBooking.js
+++ b/src/components/root/common/Forms/__CPanelBooking
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import moment from "moment";
 import { Col, FormGroup, Row, Container, Label } from "reactstrap";
-import { Formik, Form } from "formik";
+import { Formik, Form, Field } from "formik";
 import * as Yup from "yup";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";