diff --git a/jams-react-client/package-lock.json b/jams-react-client/package-lock.json
index efd00a4d9a04ca05b29034efa68dede11bd7ab43..673b2d8c54d65816e4e8ce3560047a7c7a46268e 100644
--- a/jams-react-client/package-lock.json
+++ b/jams-react-client/package-lock.json
@@ -4543,6 +4543,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz",
@@ -6286,6 +6291,11 @@
         }
       }
     },
+    "fn-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-3.0.0.tgz",
+      "integrity": "sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA=="
+    },
     "follow-redirects": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.12.1.tgz",
@@ -6341,6 +6351,32 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.5.tgz",
+      "integrity": "sha512-bWpo3PiqVDYslvrRjTq0Isrm0mFXHiO33D8MS6t6dWcqSFGeYF52nlpCM2xwOJ6tRVRznDkL+zz/iHPL4LDuvQ==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
+        "react-fast-compare": "^2.0.1",
+        "scheduler": "^0.18.0",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.18.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
+          "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -9189,6 +9225,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
       "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -11816,6 +11857,11 @@
         "react-is": "^16.8.1"
       }
     },
+    "property-expr": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.2.tgz",
+      "integrity": "sha512-bc/5ggaYZxNkFKj374aLbEDqVADdYaLcFo8XBkishUWbaAdjlphaBFns9TvRA2pUseVL/wMFmui9X3IdNDU37g=="
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -12265,6 +12311,11 @@
         }
       }
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-google-maps": {
       "version": "9.4.5",
       "resolved": "https://registry.npmjs.org/react-google-maps/-/react-google-maps-9.4.5.tgz",
@@ -14175,6 +14226,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "synchronous-promise": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.13.tgz",
+      "integrity": "sha512-R9N6uDkVsghHePKh1TEqbnLddO2IY25OcsksyFp/qBe7XYd0PVbKEWxhcdMhpLzE1I6skj5l4aEZ3CRxcbArlA=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -14514,6 +14570,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -16090,6 +16151,30 @@
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
       }
+    },
+    "yup": {
+      "version": "0.29.3",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.29.3.tgz",
+      "integrity": "sha512-RNUGiZ/sQ37CkhzKFoedkeMfJM0vNQyaz+wRZJzxdKE7VfDeVKH8bb4rr7XhRLbHJz5hSjoDNwMEIaKhuMZ8gQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "fn-name": "~3.0.0",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.11",
+        "property-expr": "^2.0.2",
+        "synchronous-promise": "^2.0.13",
+        "toposort": "^2.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
     }
   }
 }
diff --git a/jams-react-client/package.json b/jams-react-client/package.json
index cace6c4f237bc918c2550c50f2290180028207fe..1165d7bf1b1069d87c373ebd8cb1552f7aa40bde 100644
--- a/jams-react-client/package.json
+++ b/jams-react-client/package.json
@@ -11,6 +11,7 @@
     "axios": "^0.19.2",
     "chartist": "0.10.1",
     "classnames": "2.2.6",
+    "formik": "^2.1.5",
     "fuctbase64": "^1.4.0",
     "history": "4.10.1",
     "image-to-base64": "^2.1.1",
@@ -28,7 +29,8 @@
     "react-intl": "5.0.2",
     "react-router-dom": "5.2.0",
     "react-scripts": "3.4.1",
-    "react-swipeable-views": "0.13.9"
+    "react-swipeable-views": "0.13.9",
+    "yup": "^0.29.3"
   },
   "scripts": {
     "start": "NODE_PATH=./src react-scripts start",
diff --git a/jams-react-client/src/assets/css/material-dashboard-react.css b/jams-react-client/src/assets/css/material-dashboard-react.css
index 52f159f30e971ce0deffe349def3267350ae45f4..3a7ad4bb4d044fd8fe84765648018a5e1174fb6c 100644
--- a/jams-react-client/src/assets/css/material-dashboard-react.css
+++ b/jams-react-client/src/assets/css/material-dashboard-react.css
@@ -214,6 +214,13 @@ footer ul li a {
   display: block;
 }
 
+.spanError {
+  line-height: 1.66;
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.54);
+  margin-left: 14px;
+}
+
 footer ul li a:hover {
   text-decoration: none;
 }
diff --git a/jams-react-client/src/components/CaSetup/CaSetup.js b/jams-react-client/src/components/CaSetup/CaSetup.js
index 89980f29ddda129bf5e7f0d45f0f405c9ef0518e..46b3ce8dfb2eb12a156f475e5aca9620487b4316 100644
--- a/jams-react-client/src/components/CaSetup/CaSetup.js
+++ b/jams-react-client/src/components/CaSetup/CaSetup.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import {useHistory} from "react-router-dom";
+import { Formik, Field } from "formik";
+import * as Yup from 'yup';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import { makeStyles } from '@material-ui/core/styles';
 
 import CountrySelect from "components/CountrySelect/CountrySelect.js";
-import CustomizedSteppers from '../CustomizedSteppers/CustomizedSteppers'
 
 import auth from '../../auth'
 import axios from 'axios';
@@ -38,8 +39,37 @@ const useStyles = makeStyles((theme) => ({
 
 export default function CaSetup(props) {
     const history = useHistory();
-    const [error, setError] = React.useState(false);
-    const [errorMessage, setErrorMessage] = React.useState("");
+
+    /**
+     * Formik Validation Fields
+     */
+
+    const initialValuesform1 = {commonname: "", state:"", city:"", organization:"", organizationunit:"", country:""};
+
+    const initialValuesform2 = {certificatefile: "", privkeyfile:""};
+
+    const validationSchemaform1 = Yup.object().shape({
+        commonname: Yup.string()
+            .required("Common name is required."),
+        state: Yup.string()
+            .required("State is required."),
+        city: Yup.string()
+            .required("City is required."),
+        organization: Yup.string()
+            .required("Organization is required."),
+        organizationunit: Yup.string()
+            .required("Organization unit is required."),
+        country: Yup.string()
+            .required("Country is required."),
+    });
+
+    const validationSchemaform2 = Yup.object().shape({
+        certificatefile: Yup.mixed()
+            .required("Certificate file is required."),
+        privkeyfile: Yup.mixed()
+            .required("Private key file is required."),
+    });
+
 
     const getCertificateOptions = [
         {value: 0, label: "Create a self-signed Certificate Authority"},
@@ -55,38 +85,22 @@ export default function CaSetup(props) {
     const validityPeriodsItems = tool.buildSelectMenuItems(validityPeriods);
     const classes = useStyles();
 
-    const [commonname, setCommonName] = React.useState("");
-    const [state, setState] = React.useState("");
-    const [city, setCity] = React.useState("");
-    const [organization, setOrganization] = React.useState("");
-    const [organizationUnit, setOrganizationUnit] = React.useState("");
-    const [country, setCountry] = React.useState("");
-    const [certificateFile, setCertificateFile] = React.useState("");
-    const [privKeyFile, setPrivKeyFile] = React.useState("");
-
-
-
-
     const [certificateOpt, setCertificateOpt] = React.useState(getCertificateOptions[0]);
     const [validityPeriod, setValidityPeriod] = React.useState(validityPeriods[0]);
 
 
     function handleInstallCA(data) {
-        if(data.status == 500 || data.status == 512 || data.status == 513) {
+        if(data.status === 500 || data.status === 512 || data.status === 513) {
             props.setError(true)
             props.setErrorMessage("An unknown error occurred while installing the CA. Please try again.");
         }
-         else if (data.status == 200){
+        else if (data.status === 200){
             auth.uri = '/api/install/auth';
             history.push('/');
         }
 
     }
 
-    function onCountryChange(values) {
-        setCountry(values['country'].code);
-    }
-
     const handleCertifOptionChange = (event) => {
         props.setError(false);
         setCertificateOpt(getCertificateOptions[event.target.value]);
@@ -97,40 +111,26 @@ export default function CaSetup(props) {
         setValidityPeriod(validityPeriods[event.target.value]);
     };
 
-    const handleCertificateFileChange = (event) => {
-        console.log(certificateFile);
-        setCertificateFile(event.target.files[0])
-        console.log(certificateFile);
-
-    }
-
-    const handlePrivKeyFileChange = (event) => {
-        setPrivKeyFile(event.target.files[0])
-    }
-
-    function handleSubmit(e) {
-        e.preventDefault();
+    const handleSubmit = (values) => {
         let jsonData = {};
-        if(certificateOpt.value == 0){
+        if(certificateOpt.value === 0){
             jsonData = {
                 'fields': {
-                    'commonName': commonname,
-                    'organizationalUnit': organizationUnit,
-                    'organization': organization,
-                    'city': city,
-                    'state': state,
-                    'country': country,
+                    'commonName': values.commonname,
+                    'organizationalUnit': values.organizationUnit,
+                    'organization': values.organization,
+                    'city': values.city,
+                    'state': values.state,
+                    'country': values.country,
                     'lifetime': validityPeriod.value
                 }
             }
         }
-        else if(certificateOpt.value == 1){
+        else if(certificateOpt.value === 1){
             jsonData = {
-                'caCertificate': certificateFile,
-                'caKey': privKeyFile
+                'caCertificate': values.certificatefile,
+                'caKey': values.privkeyfile
             }
-            console.log(certificateFile);
-            console.log(privKeyFile);
         }
 
         axios(configApiCall(api_path_post_install_ca, "POST", jsonData, null)).then((response)=>{
@@ -140,143 +140,222 @@ export default function CaSetup(props) {
             console.log('Error installing CA Setup: ' + error );
         })
     }
-    if(certificateOpt.value == 0){
+    if(certificateOpt.value === 0){
         return (
-            <form className={classes.form} noValidate onSubmit={handleSubmit}>
-                <h4>
-                    Select an option for setting-up the certificate authority that will be used to sign all Jami accounts generated on this JAMS instance.
-                </h4>
-                <Select
-                    labelId="demo-simple-select-label"
-                    fullWidth
-                    value={certificateOpt.value}
-                    onChange={handleCertifOptionChange}
-                    variant="outlined"
-                    children={certificateOptionsItems}
-                />
-
-                <TextField
-                    variant="outlined"
-                    margin="normal"
-                    required
-                    fullWidth
-                    id="commonname"
-                    label="Common Name"
-                    name="commonname"
-                    autoComplete="commonname"
-                    autoFocus
-                    onChange={e => setCommonName(e.target.value)}
-                />
-
-                <CountrySelect onCountryChange={onCountryChange} />
-
-                <TextField
-                    variant="outlined"
-                    margin="normal"
-                    required
-                    fullWidth
-                    name="state"
-                    label="State"
-                    id="state"
-                    autoComplete="state"
-                    onChange={e => setState(e.target.value)}
-                />
-                <TextField
-                    variant="outlined"
-                    margin="normal"
-                    required
-                    fullWidth
-                    name="city"
-                    label="City"
-                    id="city"
-                    autoComplete="city"
-                    onChange={e => setCity(e.target.value)}
-                />
-                <TextField
-                    variant="outlined"
-                    margin="normal"
-                    required
-                    fullWidth
-                    name="organization"
-                    label="Organization"
-                    id="organization"
-                    autoComplete="organization"
-                    onChange={e => setOrganization(e.target.value)}
-                />
-                <TextField
-                    variant="outlined"
-                    margin="normal"
-                    required
-                    fullWidth
-                    name="organizationunit"
-                    label="Organization Unit"
-                    id="organizationunit"
-                    autoComplete="organizationunit"
-                    onChange={e => setOrganizationUnit(e.target.value)}
-                />
-                <Select
-                    labelId="demo-simple-select-label"
-                    margin="normal"
-                    fullWidth
-                    variant="outlined"
-                    value={validityPeriod.value}
-                    onChange={handleValidPeriodChange}
-                    variant="outlined"
-                    children={validityPeriodsItems}
-                />
-
-                <Button
-                    type="submit"
-                    fullWidth
-                    variant="contained"
-                    color="primary"
-                    className={classes.submit}
-                >
-                    Generate Self-Signed Certificate Authority
-                </Button>
-
-            </form>
+            <Formik
+                validationSchema={validationSchemaform1}
+                initialValues={initialValuesform1}
+                onSubmit={values => {
+                    handleSubmit(values);
+                }}
+            >
+                {(props) => {
+                    const {
+                        values,
+                        touched,
+                        errors,
+                        handleSubmit,
+                        handleChange,
+                        handleBlur,
+                    } = props;
+                    return (
+                        <form className={classes.form} noValidate onSubmit={handleSubmit}>
+                            <h4>
+                                Select an option for setting-up the certificate authority that will be used to sign all Jami
+                                accounts generated on this JAMS instance.
+                            </h4>
+                            <Select
+                                labelId="demo-simple-select-label"
+                                fullWidth
+                                value={certificateOpt.value}
+                                onChange={handleCertifOptionChange}
+                                variant="outlined"
+                                children={certificateOptionsItems}
+                            />
+
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                id="commonname"
+                                label="Common Name"
+                                name="commonname"
+                                autoComplete="commonname"
+                                autoFocus
+                                value={values.commonname}
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                helperText={(errors.commonname && touched.commonname) && errors.commonname}
+                            />
+
+                            <CountrySelect defaultValue={values.country} {...props}/>
+                            {touched.country && errors.country ? (<span class="spanError">{errors.country}</span>) : null}
+
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="state"
+                                label="State"
+                                id="state"
+                                autoComplete="state"
+                                value={values.state}
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                helperText={(errors.state && touched.state) && errors.state}
+                            />
+
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="city"
+                                label="City"
+                                id="city"
+                                autoComplete="city"
+                                value={values.city}
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                helperText={(errors.city && touched.city) && errors.city}
+                            />
+
+
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="organization"
+                                label="Organization"
+                                id="organization"
+                                autoComplete="organization"
+                                value={values.organization}
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                helperText={(errors.organization && touched.organization) && errors.organization}
+                            />
+
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="organizationunit"
+                                label="Organization Unit"
+                                id="organizationunit"
+                                autoComplete="organizationunit"
+                                value={values.organizationunit}
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                helperText={(errors.organizationunit && touched.organizationunit) && errors.organizationunit}
+                            />
+
+                            <Select
+                                labelId="demo-simple-select-label"
+                                margin="normal"
+                                fullWidth
+                                variant="outlined"
+                                value={validityPeriod.value}
+                                onChange={handleValidPeriodChange}
+                                children={validityPeriodsItems}
+                            />
+
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                className={classes.submit}
+                            >
+                                Generate Self-Signed Certificate Authority
+                            </Button>
+
+                        </form>
+                    );
+                }
+                }
+            </Formik>
         );
     }
-    else if(certificateOpt.value == 1){
+    else if(certificateOpt.value === 1){
         return (
-            <form className={classes.form} noValidate onSubmit={handleSubmit}>
-                <h4>
-                    Select an option for setting-up the certificate authority that will be used to sign all Jami accounts generated on this JAMS instance.
-                </h4>
-
-                <Select
-                    labelId="demo-simple-select-label"
-                    fullWidth
-                    value={certificateOpt.value}
-                    onChange={handleCertifOptionChange}
-                    variant="outlined"
-                    children={certificateOptionsItems}
-                />
-                <Typography variant="subtitle1" gutterBottom >CA file (PEM-encoded)</Typography>
-                <Input
-                    fullWidth
-                    type="file"
-                    onChange={handleCertificateFileChange}
-                />
-                <Typography variant="subtitle1" gutterBottom >Key File (PEM-encoded)</Typography>
-                <Input
-                    fullWidth
-                    type="file"
-                    onChange={handlePrivKeyFileChange}
-                />
-
-                <Button
-                    type="submit"
-                    fullWidth
-                    variant="contained"
-                    color="primary"
-                    className={classes.submit}
-                >
-                    Import Certificate Authority
-                </Button>
-
-            </form>
+            <Formik
+                validationSchema={validationSchemaform2}
+                initialValues={initialValuesform2}
+                onSubmit={values => {
+                    handleSubmit(values);
+                }}
+            >{(props) => {
+                const {
+                    handleSubmit,
+                    handleChange,
+                } = props;
+                return (
+                    <form className={classes.form} noValidate onSubmit={handleSubmit}>
+                        <h4>
+                            Select an option for setting-up the certificate authority that will be used to sign all Jami
+                            accounts generated on this JAMS instance.
+                        </h4>
+
+                        <Select
+                            labelId="demo-simple-select-label"
+                            fullWidth
+                            value={certificateOpt.value}
+                            onChange={handleCertifOptionChange}
+                            variant="outlined"
+                            children={certificateOptionsItems}
+                        />
+                        <Typography variant="subtitle1" gutterBottom>CA file (PEM-encoded)</Typography>
+                        <Field name="certificatefile">
+                            {({field, form}) => (
+                                <div>
+                                    <Input
+                                        fullWidth
+                                        type="file"
+                                        onChange={handleChange}
+                                        {...field}
+                                    />
+                                    {form.errors.certificatefile && form.touched.certificatefile? <span class="spanError">{form.errors.certificatefile}</span> : null}
+                                </div>
+                            )
+                            }
+                        </Field>
+                        <Typography variant="subtitle1" gutterBottom>Key File (PEM-encoded)</Typography>
+                        <Field name="privkeyfile">
+                            {({
+                                  field,
+                                  form,
+                                  meta,
+                              }) => (
+                                <div>
+                                    <Input
+                                        fullWidth
+                                        type="file"
+                                        {...field}
+                                    />
+                                    {meta.touched && meta.error && (<span class="spanError">{meta.error}</span>)}
+                                </div>
+                            )
+                            }
+                        </Field>
+
+                        <Button
+                            type="submit"
+                            fullWidth
+                            variant="contained"
+                            color="primary"
+                            className={classes.submit}
+                        >
+                            Import Certificate Authority
+                        </Button>
+
+                    </form>
+                );
+            }}
+            </Formik>
         );
     }
 }
\ No newline at end of file
diff --git a/jams-react-client/src/components/CountrySelect/CountrySelect.js b/jams-react-client/src/components/CountrySelect/CountrySelect.js
index d98a3b067edc559eaeed5e94cc8a47b17b0f10bc..f771c7b3c445f96d57722beccbf21777216c46a5 100644
--- a/jams-react-client/src/components/CountrySelect/CountrySelect.js
+++ b/jams-react-client/src/components/CountrySelect/CountrySelect.js
@@ -26,22 +26,22 @@ const useStyles = makeStyles({
 export default function CountrySelect(props) {
     const classes = useStyles();
 
-    const handleCountryChange = (event, values) => {
-        props.onCountryChange({
-            "country": values
-        });
-    };
 
     return (
         <Autocomplete
             id="country-select-demo"
+            name="country"
             options={countries}
             classes={{
                 option: classes.option,
             }}
-            onChange={handleCountryChange}
+            onChange={(e, value) => {
+                value!=null ? props.setFieldValue("country", value.code): props.setFieldValue("country", "");
+            }}
             autoHighlight
-            getOptionLabel={(option) => countryToFlag(option.code) + " "+ option.label}
+            getOptionLabel={(option) => (
+                countryToFlag(option.code) + " "+ option.label
+            )}
             renderOption={(option) => (
                 <React.Fragment>
                     <span>{countryToFlag(option.code)}</span>
@@ -52,10 +52,12 @@ export default function CountrySelect(props) {
                 <TextField
                     {...params}
                     label="Choose a country"
+                    name="country"
                     variant="outlined"
+                    onBlur={props.handleBlur}
                     inputProps={{
                         ...params.inputProps,
-                        autoComplete: 'new-password', // disable autocomplete and autofill
+                        autoComplete: 'country', // disable autocomplete and autofill
                     }}
                 />
             )}
diff --git a/jams-react-client/src/components/CreateAdmin/CreateAdmin.js b/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
index 0a07914c47fe2a3059e0c607ddb26c5233fea93a..a4d01ba6e724f7ac57fd18ef738724355fbfab33 100644
--- a/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
+++ b/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
@@ -1,19 +1,12 @@
 import React from 'react';
 import { useHistory } from "react-router-dom";
-import Avatar from '@material-ui/core/Avatar';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
 import Button from '@material-ui/core/Button';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import TextField from '@material-ui/core/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Link from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid';
-import Box from '@material-ui/core/Box';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
-import MuiAlert from '@material-ui/lab/Alert';
 
 import axios from 'axios';
 import configApiCall from '../../api'
@@ -44,11 +37,34 @@ const useStyles = makeStyles((theme) => ({
 export default function CreateAdmin(props) {
     const classes = useStyles();
     const history = useHistory();
-    const [username, setUsername] = React.useState("");
-    const [password, setPassword] = React.useState("");
-    const [confirmPassword, setConfirmPassword] = React.useState("");
-    const [error, setError] = React.useState(props.error);
-    const [errorMessage, setErrorMessage] = React.useState(props.errorMessage);
+
+    /**
+     * Formik Validation Fields
+     */
+    const formik = useFormik({
+        initialValues: {
+            username: '',
+            password: '',
+            confirmPassword: '',
+
+        },
+        validationSchema: Yup.object({
+            username: Yup.string()
+                .max(60, 'Must be 60 characters or less')
+                .required('Username is required'),
+            password: Yup.string()
+                .max(50, 'Must be 50 characters or less')
+                .required('Password is required'),
+            confirmPassword: Yup.string()
+                .oneOf([Yup.ref('password'), null], 'Passwords must match')
+                .max(50, 'Must be 50 characters or less')
+                .required('Password confirmation is required'),
+        }),
+
+        onSubmit: values => {
+            handleSubmit(values);
+        },
+    });
 
     function createAdminCallBackHandler(response) {
         auth.setJWT(response.data['access_token'])
@@ -58,14 +74,14 @@ export default function CreateAdmin(props) {
         history.push('/');
     }
 
-    function handleSubmit(e) {
-        e.preventDefault();
+    function handleSubmit(values) {
+        //e.preventDefault();
         const jsonData = {
-            "username": username,
-            "password": password
+            "username": values.username,
+            "password": values.password
         }
 
-        if(password != confirmPassword) {
+        if(values.password !== values.confirmPassword) {
             props.setErrorMessage("Passwords didn't match !");
             props.setError(true)
         }else {
@@ -80,22 +96,23 @@ export default function CreateAdmin(props) {
     }
 
     return (
-        <form className={classes.form} noValidate onSubmit={handleSubmit}>
+        <form className={classes.form} noValidate onSubmit={formik.handleSubmit}>
             <Typography variant="h5" gutterBottom color="primary">Create Administrator</Typography>
             <Grid container spacing={3}>
                 <Grid item xs={12}>
-                        <TextField
-                            variant="outlined"
-                            margin="normal"
-                            required
-                            fullWidth
-                            id="username"
-                            label="Username"
-                            name="username"
-                            autoComplete="email"
-                            autoFocus
-                            onChange={e => setUsername(e.target.value)}
-                        />
+                    <TextField
+                        variant="outlined"
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="username"
+                        label="Username"
+                        name="username"
+                        autoComplete="email"
+                        autoFocus
+                        {...formik.getFieldProps('username')}
+                    />
+                    {formik.touched.username && formik.errors.username ? (<span>{formik.errors.username}</span>) : null}
                 </Grid>
                 <Grid item xs={6}>
                     <TextField
@@ -108,13 +125,15 @@ export default function CreateAdmin(props) {
                         type="password"
                         id="password"
                         autoComplete="current-password"
-                        onChange={e => setPassword(e.target.value)}
+                        {...formik.getFieldProps('password')}
                     />
+                    {formik.touched.password && formik.errors.password ? (<span>{formik.errors.password}</span>) : null}
+
                 </Grid>
 
                 <Grid item xs={6}>
 
-                <TextField
+                    <TextField
                         variant="outlined"
                         margin="normal"
                         required
@@ -124,8 +143,9 @@ export default function CreateAdmin(props) {
                         type="password"
                         id="confirmPassword"
                         autoComplete="current-password"
-                        onChange={e => setConfirmPassword(e.target.value)}
+                        {...formik.getFieldProps('confirmPassword')}
                     />
+                    {formik.touched.confirmPassword && formik.errors.confirmPassword ? (<span>{formik.errors.confirmPassword}</span>) : null}
 
                 </Grid>
             </Grid>
diff --git a/jams-react-client/src/components/Devices/Devices.js b/jams-react-client/src/components/Devices/Devices.js
index 054413641b3543cab2b988b097a773a4259198bf..fd18e1c3999c0fc9f208c4695569b5f02a499a78 100755
--- a/jams-react-client/src/components/Devices/Devices.js
+++ b/jams-react-client/src/components/Devices/Devices.js
@@ -1,5 +1,6 @@
 import React, {useEffect} from "react";
 import classnames from "classnames";
+import {Formik, Field} from "formik";
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
 import Tooltip from "@material-ui/core/Tooltip";
@@ -63,7 +64,7 @@ export default function Devices(props) {
                 });
             }
         })
-    }, []);
+    }, [selectedDevice]);
 
     function getDeviceStatus(device) {
         if (!(device.revoked)) {
@@ -77,14 +78,12 @@ export default function Devices(props) {
 
     const handleClickEdit = (e, device) => {
         e.preventDefault();
-        console.log("in here");
         setOpenEdit(true);
         setSelectedDevice(device);
     }
 
     const handleClickRevoke = (e, device) => {
         e.preventDefault();
-        console.log("in there");
         setOpenRevoke(true);
         setSelectedDevice(device);
     }
@@ -107,7 +106,7 @@ export default function Devices(props) {
                 deviceId: selectedDevice.deviceId,
                 deviceName: displayName
             }
-            axios(configApiCall(api_path_delete_admin_device_revoke, 'PUT', data, null)).then((response)=>{
+            axios(configApiCall(api_path_delete_admin_device_revoke+"?username="+ data.username+"&deviceId="+data.deviceId+"&deviceName="+data.deviceName, 'PUT', null, null)).then((response)=>{
                     setSelectedDevice({});
                     setOpenEdit(false);
                 }
@@ -119,7 +118,7 @@ export default function Devices(props) {
             const data = {
                 deviceName: displayName
             }
-            axios(configApiCall(api_path_rename_device+"/"+selectedDevice.deviceId, 'PUT', data, null)).then((response)=>{
+            axios(configApiCall(api_path_rename_device+"/"+selectedDevice.deviceId+ "?deviceName="+ data.deviceName, 'PUT', null, null)).then((response)=>{
                     setSelectedDevice({});
                     setOpenEdit(false);
                 }
@@ -135,7 +134,7 @@ export default function Devices(props) {
                 username: props.username,
                 deviceId: selectedDevice.deviceId,
             }
-            axios(configApiCall(api_path_delete_admin_device_revoke, 'DELETE', data, null)).then((response)=>{
+            axios(configApiCall(api_path_delete_admin_device_revoke+"?username="+ data.username+"&deviceId="+data.deviceId, 'DELETE', null, null)).then((response)=>{
                     setSelectedDevice({});
                     setOpenRevoke(false);
                 }
@@ -155,6 +154,17 @@ export default function Devices(props) {
         }
     }
 
+    /**
+     * Formik Validation
+     */
+    const validateDisplayName = displaynamevalue => {
+        let error;
+        if (!displaynamevalue) {
+            error = 'Required';
+        }
+        return error;
+    }
+
     const tableCellClasses = classnames(classes.tableCell);
     return (
         <div>
@@ -220,24 +230,42 @@ export default function Devices(props) {
             </Table>
             <Dialog open={openEdit} onClose={handleClose} aria-labelledby="form-dialog-title">
                 <DialogTitle id="form-edit-dialog-title">Update Device Information</DialogTitle>
-                <DialogContent>
-                    <TextField
-                        autoFocus
-                        margin="dense"
-                        id="name"
-                        label="Device Display Name"
-                        onChange={e => setDisplayName(e.target.value)}
-                        fullWidth
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handleCancel} color="primary">
-                        Cancel
-                    </Button>
-                    <Button onClick={handleUpdate} color="primary">
-                        Update
-                    </Button>
-                </DialogActions>
+                <Formik initialValues={{
+                    displayName: '',
+                }}
+                >
+                    {({ errors, touched, validateField}) => (
+                        <form>
+                            <DialogContent>
+                                <Field name="displayName" validate={validateDisplayName} >
+                                    {({field}) => (
+                                        <div>
+                                            <TextField
+                                                autoFocus
+                                                margin="dense"
+                                                id="name"
+                                                label="Device Display Name"
+                                                fullWidth
+                                                onChange={setDisplayName(field.value)}
+                                                helperText={(errors.displayName && touched.displayName) && errors.displayName}
+                                                {...field}
+                                            />
+                                        </div>
+                                    )
+                                    }
+                                </Field>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={handleCancel} color="primary">
+                                    Cancel
+                                </Button>
+                                <Button onClick={() => validateField('displayName').then(() =>handleUpdate())} color="primary">
+                                    Update
+                                </Button>
+                            </DialogActions>
+                        </form>
+                    )}
+                </Formik>
             </Dialog>
             <Dialog open={openRevoke} onClose={handleClose} aria-labelledby="form-dialog-title">
                 <DialogTitle id="form-revoke-dialog-title">Revoke Device</DialogTitle>
diff --git a/jams-react-client/src/components/IdentityManagement/AdStorageForm.js b/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
index 4ae77f98be2a0d4066c50781398e65d6f4fb8dea..cc26125d8d2823490c71f57847dff5c6a09c9334 100644
--- a/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
@@ -1,99 +1,108 @@
 import React from 'react';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 
 import TextField from '@material-ui/core/TextField';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
-import CustomPopupState from '../CustomPopupState/CustomPopupState'
 
 export default function AdStorageForm(props) {
 
     return (
-            <Grid container spacing={3}>
-                <Grid item xs={12}>
-                    <Typography variant="subtitle1" gutterBottom color="primary">Active directory server informations</Typography>
-                </Grid>
-                <Grid item xs={6}>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="port"
-                        label="Port"
-                        name="port"
-                        autoComplete="port"
-                        autoFocus
-                        onChange={e => props.setPort(e.target.value)}
-                    />
-                </Grid>
-                <Grid item xs={6}>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="host"
-                        label="Host"
-                        name="host"
-                        autoComplete="host"
-                        autoFocus
-                        onChange={e => props.setHost(e.target.value)}
-                    />
-                </Grid>
-                <Grid item xs={6}>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="adminusername"
-                        label="Admin username"
-                        name="adminusername"
-                        autoComplete="adminusername"
-                        autoFocus
-                        onChange={e => props.setAdminUsername(e.target.value)}
-                    />
-                </Grid>
-                <Grid item xs={6}>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="password"
-                        label="Password"
-                        name="password"
-                        autoComplete="password"
-                        type="password"
-                        autoFocus
-                        onChange={e => props.setPassword(e.target.value)}
-                    />
-                </Grid>
-                <Grid item xs={12}>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="domainname"
-                        label="Domain Name"
-                        name="domainname"
-                        autoComplete="domainname"
-                        autoFocus
-                        onChange={e => props.setDomainName(e.target.value)}
-                    />
-                </Grid>
-                <Grid item xs={12}>
-                    <Typography variant="subtitle1" gutterBottom color="primary">Use SSL</Typography>
-                    <RadioGroup row aria-label="isSSL" name="isSSL" value={props.isSSL} onChange={props.handleIsSSLChange} >
-                        <FormControlLabel value="true" control={<Radio color="primary"/>} label="Yes" />
-                        <FormControlLabel value="false" control={<Radio color="default"/>} label="No" />
-                    </RadioGroup>
-                </Grid>
+        <Grid container spacing={3}>
+            <Grid item xs={12}>
+                <Typography variant="subtitle1" gutterBottom color="primary">Active directory server informations</Typography>
             </Grid>
+            <Grid item xs={6}>
+                <TextField
+                    variant="outlined"
+                    margin="normal"
+                    required
+                    fullWidth
+                    id="port"
+                    label="Port"
+                    name="port"
+                    autoComplete="port"
+                    value={props.values.port}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.port && props.touched.port) && props.errors.port}
+
+                />
+            </Grid>
+            <Grid item xs={6}>
+                <TextField
+                    variant="outlined"
+                    margin="normal"
+                    required
+                    fullWidth
+                    id="host"
+                    label="Host"
+                    name="host"
+                    autoComplete="host"
+                    value={props.values.host}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.host && props.touched.host) && props.errors.host}
+                />
+            </Grid>
+            <Grid item xs={6}>
+                <TextField
+                    variant="outlined"
+                    margin="normal"
+                    required
+                    fullWidth
+                    id="adminusername"
+                    label="Admin username"
+                    name="adadminusername"
+                    autoComplete="adminusername"
+                    value={props.values.adadminusername}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.adadminusername && props.touched.adadminusername) && props.errors.adadminusername}
+                />
+            </Grid>
+            <Grid item xs={6}>
+                <TextField
+                    variant="outlined"
+                    margin="normal"
+                    required
+                    fullWidth
+                    id="password"
+                    label="Password"
+                    name="password"
+                    autoComplete="password"
+                    type="password"
+                    value={props.values.adpassword}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.adpassword && props.touched.adpassword) && props.errors.adpassword}
+                />
+            </Grid>
+            <Grid item xs={12}>
+                <TextField
+                    variant="outlined"
+                    margin="normal"
+                    required
+                    fullWidth
+                    id="domainname"
+                    label="Domain Name"
+                    name="domainname"
+                    autoComplete="domainname"
+                    value={props.values.domainname}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.domainname && props.touched.domainname) && props.errors.domainname}
+                />
+            </Grid>
+            <Grid item xs={12}>
+                <Typography variant="subtitle1" gutterBottom color="primary">Use SSL</Typography>
+                <RadioGroup row aria-label="isSSL" name="isSSL" value={props.isSSL} onChange={props.handleIsSSLChange} >
+                    <FormControlLabel value="true" control={<Radio color="primary"/>} label="Yes" />
+                    <FormControlLabel value="false" control={<Radio color="default"/>} label="No" />
+                </RadioGroup>
+            </Grid>
+        </Grid>
     );
 }
\ No newline at end of file
diff --git a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
index 68ec43e00e5621808fbc67a04be7e3a2bf35ae71..6815ba92a4375f05415d325350044c5ac91ca4b3 100644
--- a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
+++ b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+import {Formik} from 'formik';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import MuiAlert from '@material-ui/lab/Alert';
 import Select from '@material-ui/core/Select';
 
 import {buildSelectMenuItems} from '../../tools'
@@ -18,12 +18,9 @@ import LdapForm from './LdapStorageForm'
 import AdStorageForm from './AdStorageForm'
 
 import auth from '../../auth'
+import * as Yup from "yup";
 
 
-function Alert(props) {
-    return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
 const useStyles = makeStyles((theme) => ({
     paper: {
         marginTop: theme.spacing(8),
@@ -46,6 +43,39 @@ const useStyles = makeStyles((theme) => ({
 
 export default function IdentityManagement(props) {
 
+    /**
+     * Formik Validation Fields
+     */
+
+    const initialValuesLDAPform = {servername: "", ldapadminusername:"", ldappassword:"", basedn:""};
+
+    const initialValuesADform = {port: "", host:"", adadminusername:"", adpassword:"",domainname:""};
+
+    const validationSchemaLDAPform = Yup.object().shape({
+        servername: Yup.string()
+            .required("Server name is required."),
+        ldapadminusername: Yup.string()
+            .required("Username is required."),
+        ldappassword: Yup.string()
+            .required("Password is required."),
+        basedn: Yup.string()
+            .required("Domain name is required."),
+    });
+
+    const validationSchemaADform = Yup.object().shape({
+        port: Yup.number()
+            .required("Port number is required."),
+        host: Yup.string()
+            .required("Host is required."),
+        adadminusername: Yup.string()
+            .required("Username is required."),
+        domainname: Yup.string()
+            .required("Domain name is required."),
+        adpassword: Yup.string()
+            .required("Password is required."),
+    });
+
+
     const directoryTypes = [
         {value: 0, label: "Local Database"},
         {value: 1, label: "LDAP Server"},
@@ -56,17 +86,8 @@ export default function IdentityManagement(props) {
 
     const classes = useStyles();
     const history = useHistory();
-    const [error, setError] = React.useState(false);
-    const [errorMessage, setErrorMessage] = React.useState("");
     const [directory, setDirectory] = React.useState(directoryTypes[0]);
 
-    /**
-     * General states for LDAP and AD Storages
-     */
-
-    const [adminUsername, setAdminUsername] = React.useState("");
-    const [password, setPassword] = React.useState("");
-
 
     /**
      * Local storage Config
@@ -82,7 +103,6 @@ export default function IdentityManagement(props) {
         {value: 0, label: "UID"},
     ];
 
-    const [baseDN, setBaseDN] = React.useState("");
     const ldapFiltersTypesItems = buildSelectMenuItems(ldapFiltersTypes);
     const [useStartTLS, setUseStartTLS] = React.useState("false")
     const [ldapFilter, setLdapFilter] = React.useState(ldapFiltersTypes[0]);
@@ -98,14 +118,10 @@ export default function IdentityManagement(props) {
         setNameServerChecked(event.target.checked)
     }
 
-
     /**
      * Active Directory Storage Config
      */
 
-    const [port, setPort] = React.useState("");
-    const [host, setHost] = React.useState("");
-    const [domainName, setDomainName] = React.useState("");
     const [isSSL, setIsSSL] = React.useState("false")
 
     const handleIsSSLChange = (event) => {
@@ -128,15 +144,15 @@ export default function IdentityManagement(props) {
         return authSource;
     }
 
-    function setLdapStorageData(){
+    function setLdapStorageData(values){
         const authSource = {};
         const settings = {};
 
         settings['useStartTLS'] = (useStartTLS === 'true')
-        settings['host'] = host
-        settings['username'] = adminUsername
-        settings['password'] = password
-        settings['baseDN'] = baseDN
+        settings['host'] = values.servername
+        settings['username'] = values.ldapadminusername
+        settings['password'] = values.ldappassword
+        settings['baseDN'] = values.basedn
         settings['usernameField'] = ldapFilter.label
 
         settings['fieldMappings'] = {};
@@ -156,16 +172,16 @@ export default function IdentityManagement(props) {
         return authSource;
     }
 
-    function setAdStorageData(){
+    function setAdStorageData(values){
         const authSource = {};
         const settings = {};
 
         settings['isSSL'] = (isSSL === 'true')
-        settings['host'] = host
-        settings['port'] = parseInt(port, 10)
-        settings['realm'] = domainName
-        settings['username'] = adminUsername
-        settings['password'] = password
+        settings['host'] = values.host
+        settings['port'] = parseInt(values.port, 10)
+        settings['realm'] = values.domainname
+        settings['username'] = values.adadminusername
+        settings['password'] = values.adpassword
 
         settings['fieldMappings'] = {};
         settings['fieldMappings']['sAMAccountName'] = "Username"
@@ -190,18 +206,26 @@ export default function IdentityManagement(props) {
         history.push('/');
     }
 
-    function handleSubmit(e) {
-        e.preventDefault();
-
+    function handleSubmit(values) {
         let data = {}
-        if(directory.value == 0){
-            data = setLocalStorageData()
-        }else if(directory.value == 1){
-            data = setLdapStorageData()
+        if(directory.value === 1){
+            data = setLdapStorageData(values)
         }else{
-            data = setAdStorageData()
+            data = setAdStorageData(values)
         }
+        axios(configApiCall(api_path_post_install_auth,'POST',data,null)).then((response)=>{
+            callbackIdentityManagement()
+        }).catch(()=>{
+            props.setErrorMessage('The information provided appears to be incorrect, the connection to the directory has failed. Please check the information and credentials provided and try again.')
+            props.setError(true)
+        })
 
+    }
+
+    function handleLocalSubmit(e) {
+        e.preventDefault();
+        let data = {}
+        data = setLocalStorageData()
         axios(configApiCall(api_path_post_install_auth,'POST',data,null)).then((response)=>{
             callbackIdentityManagement()
         }).catch(()=>{
@@ -216,55 +240,58 @@ export default function IdentityManagement(props) {
         setDirectory(directoryTypes[event.target.value]);
     };
 
-    function returnForm(){
-        if(directory.value == 0){
-            return <LocalStorageForm 
-                    nameServerChecked={nameServerChecked}
-                    handleNameServerChange={handleNameServerChange} 
-                    />
-        }else if (directory.value == 1){
-            return <LdapForm 
-                    setAdminUsername={setAdminUsername}
-                    setPassword={setPassword}
-                    setHost={setHost}
-                    setBaseDN={setBaseDN}
+    function returnForm(values, touched, errors, handleChange, handleBlur){
+        if (directory.value === 1){
+            return (
+                <LdapForm
                     useStartTLS={useStartTLS}
                     handleUseStartTLSChange={handleUseStartTLSChange}
                     ldapFilter={ldapFilter}
                     ldapFiltersTypesItems={ldapFiltersTypesItems}
                     handleFilterIdChange={handleFilterIdChange}
-                    />
+                    values={values}
+                    touched={touched}
+                    errors={errors}
+                    handleChange={handleChange}
+                    handleBlur={handleBlur}
+                />
+            );
         }else{
-            return <AdStorageForm
-                    setAdminUsername={setAdminUsername}
-                    setPassword={setPassword}
-                    setPort={setPort}
-                    setHost={setHost}
-                    setDomainName={setDomainName}
+            return (
+                <AdStorageForm
                     isSSL={isSSL}
                     handleIsSSLChange={handleIsSSLChange}
-                    />
+                    values={values}
+                    touched={touched}
+                    errors={errors}
+                    handleChange={handleChange}
+                    handleBlur={handleBlur}
+                />
+            );
         }
     }
 
-    return (
-
-            <form className={classes.form} noValidate onSubmit={handleSubmit}>
+    if(directory.value === 0){
+        return(
+            <form className={classes.form} noValidate onSubmit={handleLocalSubmit}>
                 <Typography variant="h5" gutterBottom color="primary">Identity Management</Typography>
                 <Grid container spacing={3}>
                     <Grid item xs={12}>
                         <Typography variant="body1" gutterBottom >Select the type of user directory to be integrated with JAMS</Typography>
                         <Select
-                        labelId="demo-simple-select-label"
-                        fullWidth
-                        value={directory.value}
-                        onChange={handleChangeDirectoryType}
-                        variant="outlined"
-                        children={directoryTypesItems}
+                            labelId="demo-simple-select-label"
+                            fullWidth
+                            value={directory.value}
+                            onChange={handleChangeDirectoryType}
+                            variant="outlined"
+                            children={directoryTypesItems}
                         />
                     </Grid>
                 </Grid>
-                {returnForm()}
+                <LocalStorageForm
+                    nameServerChecked={nameServerChecked}
+                    handleNameServerChange={handleNameServerChange}
+                />
                 <Button
                     type="submit"
                     fullWidth
@@ -275,5 +302,108 @@ export default function IdentityManagement(props) {
                     Set identity parameters
                 </Button>
             </form>
-    );
+        );
+    }
+    else if(directory.value === 1){
+        return(
+            <Formik validationSchema={validationSchemaLDAPform}
+                    initialValues={initialValuesLDAPform}
+                    onSubmit={values => {
+                        handleSubmit(values);
+                    }}
+            >
+                {(props) => {
+                    const {
+                        values,
+                        touched,
+                        errors,
+                        handleSubmit,
+                        handleChange,
+                        handleBlur,
+                    } = props;
+                    return(
+                        <form className={classes.form} noValidate onSubmit={handleSubmit}>
+                            <Typography variant="h5" gutterBottom color="primary">Identity Management</Typography>
+                            <Grid container spacing={3}>
+                                <Grid item xs={12}>
+                                    <Typography variant="body1" gutterBottom >Select the type of user directory to be integrated with JAMS</Typography>
+                                    <Select
+                                        labelId="demo-simple-select-label"
+                                        fullWidth
+                                        value={directory.value}
+                                        onChange={handleChangeDirectoryType}
+                                        variant="outlined"
+                                        children={directoryTypesItems}
+                                    />
+                                </Grid>
+                            </Grid>
+                            {returnForm(values, touched, errors, handleChange, handleBlur)}
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                className={classes.submit}
+                            >
+                                Set identity parameters
+                            </Button>
+                        </form>
+                    );
+                }
+                }
+
+            </Formik>
+        );
+    }
+    else {
+        return(
+            <Formik validationSchema={validationSchemaADform}
+                    initialValues={initialValuesADform}
+                    onSubmit={values => {
+                        handleSubmit(values);
+                    }}
+            >
+                {(props) => {
+                    const {
+                        values,
+                        touched,
+                        errors,
+                        handleSubmit,
+                        handleChange,
+                        handleBlur,
+                    } = props;
+                    return(
+                        <form className={classes.form} noValidate onSubmit={handleSubmit}>
+                            <Typography variant="h5" gutterBottom color="primary">Identity Management</Typography>
+                            <Grid container spacing={3}>
+                                <Grid item xs={12}>
+                                    <Typography variant="body1" gutterBottom >Select the type of user directory to be integrated with JAMS</Typography>
+                                    <Select
+                                        labelId="demo-simple-select-label"
+                                        fullWidth
+                                        value={directory.value}
+                                        onChange={handleChangeDirectoryType}
+                                        variant="outlined"
+                                        children={directoryTypesItems}
+                                    />
+                                </Grid>
+                            </Grid>
+                            {returnForm(values, touched, errors, handleChange, handleBlur)}
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                className={classes.submit}
+                            >
+                                Set identity parameters
+                            </Button>
+                        </form>
+                    );
+                }
+                }
+            </Formik>
+        );
+    }
+
 }
\ No newline at end of file
diff --git a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
index 20e7b17955411d65819aae5ab25039b3f0259066..fe862b9ef22406df9520bf547428c37caae364ca 100644
--- a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
@@ -10,14 +10,14 @@ import Select from '@material-ui/core/Select';
 import CustomPopupState from '../CustomPopupState/CustomPopupState'
 
 export default function LdapStorageForm(props) {
-    
+
     return (
-            <Grid container spacing={3}>
-                <Grid item xs={12}>
-                    <Typography variant="subtitle1" gutterBottom color="primary">LDAP Server informations</Typography>
-                </Grid>
-                <Grid item xs={12}>
-                    <TextField
+        <Grid container spacing={3}>
+            <Grid item xs={12}>
+                <Typography variant="subtitle1" gutterBottom color="primary">LDAP Server informations</Typography>
+            </Grid>
+            <Grid item xs={12}>
+                <TextField
                     variant="outlined"
                     margin="normal"
                     required
@@ -26,42 +26,48 @@ export default function LdapStorageForm(props) {
                     label="Server Address"
                     name="servername"
                     autoComplete="servername"
-                    autoFocus
-                    onChange={e => props.setHost(e.target.value)}
-                    />
-                </Grid>
+                    value={props.values.servername}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.servername && props.touched.servername) && props.errors.servername}
+                />
+            </Grid>
 
-                <Grid item xs={6}>
-                    <TextField
+            <Grid item xs={6}>
+                <TextField
                     variant="outlined"
                     margin="normal"
                     required
                     fullWidth
                     id="adminusername"
                     label="Administrator Username"
-                    name="adminusername"
+                    name="ldapadminusername"
                     autoComplete="adminusername"
-                    autoFocus
-                    onChange={e => props.setAdminUsername(e.target.value)}
-                    />
-                </Grid>
-                <Grid item xs={6}>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="password"
-                        label="Password"
-                        name="password"
-                        autoComplete="password"
-                        type="password"
-                        autoFocus
-                        onChange={e => props.setPassword(e.target.value)}
-                    />
-                </Grid>
-                <Grid item xs={12}>
-                    <TextField
+                    value={props.values.ldapadminusername}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.ldapadminusername && props.touched.ldapadminusername) && props.errors.ldapadminusername}
+                />
+            </Grid>
+            <Grid item xs={6}>
+                <TextField
+                    variant="outlined"
+                    margin="normal"
+                    required
+                    fullWidth
+                    id="password"
+                    label="Password"
+                    name="ldappassword"
+                    autoComplete="password"
+                    type="password"
+                    value={props.values.ldappassword}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.ldappassword && props.touched.ldappassword) && props.errors.ldappassword}
+                />
+            </Grid>
+            <Grid item xs={12}>
+                <TextField
                     variant="outlined"
                     id="basedn"
                     label="Base DN (Please use LDAP convention)"
@@ -69,28 +75,30 @@ export default function LdapStorageForm(props) {
                     autoComplete="basedn"
                     required
                     fullWidth
-                    autoFocus
-                    onChange={e => props.setBaseDN(e.target.value)}
+                    value={props.values.basedn}
+                    onChange={props.handleChange}
+                    onBlur={props.handleBlur}
+                    helperText={(props.errors.basedn && props.touched.basedn) && props.errors.basedn}
+                />
+            </Grid>
+            <Grid item xs={12}>
+                <Typography variant="subtitle1" gutterBottom color="primary">Use Start TLS</Typography>
+                <RadioGroup row aria-label="useStartTLS" name="useStartTLS" value={props.useStartTLS} onChange={props.handleUseStartTLSChange} >
+                    <FormControlLabel value="true" control={<Radio color="primary"/>} label="Yes" />
+                    <FormControlLabel value="false" control={<Radio color="default"/>} label="No" />
+                </RadioGroup>
+            </Grid>
+            <Grid item xs={12}>
+                <Typography variant="subtitle1" gutterBottom color="primary">Filter<CustomPopupState message="This is the field in your LDAP structure which contains the username."/></Typography>
+                <Select
+                    labelId="filter-ldap-select"
+                    fullWidth
+                    value={props.ldapFilter.value}
+                    onChange={props.handleFilterIdChange}
+                    variant="outlined"
+                    children={props.ldapFiltersTypesItems}
                 />
-                </Grid>
-                <Grid item xs={12}>
-                    <Typography variant="subtitle1" gutterBottom color="primary">Use Start TLS</Typography>
-                    <RadioGroup row aria-label="useStartTLS" name="useStartTLS" value={props.useStartTLS} onChange={props.handleUseStartTLSChange} >
-                        <FormControlLabel value="true" control={<Radio color="primary"/>} label="Yes" />
-                        <FormControlLabel value="false" control={<Radio color="default"/>} label="No" />
-                    </RadioGroup>
-                </Grid>
-                <Grid item xs={12}>
-                    <Typography variant="subtitle1" gutterBottom color="primary">Filter<CustomPopupState message="This is the field in your LDAP structure which contains the username."/></Typography>
-                        <Select
-                        labelId="filter-ldap-select"
-                        fullWidth
-                        value={props.ldapFilter.value}
-                        onChange={props.handleFilterIdChange}
-                        variant="outlined"
-                        children={props.ldapFiltersTypesItems}
-                        />
-                </Grid>
             </Grid>
+        </Grid>
     );
 }
\ No newline at end of file
diff --git a/jams-react-client/src/components/ServerParameters/ServerParameters.js b/jams-react-client/src/components/ServerParameters/ServerParameters.js
index 5003d3c4097500be9fec086f8e7d0a3f7bb4c36b..9dc877f7f3cfea15397cd52d2e4b67826ba0650a 100644
--- a/jams-react-client/src/components/ServerParameters/ServerParameters.js
+++ b/jams-react-client/src/components/ServerParameters/ServerParameters.js
@@ -1,19 +1,11 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import TextField from '@material-ui/core/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Link from '@material-ui/core/Link';
-import Grid from '@material-ui/core/Grid';
-import Box from '@material-ui/core/Box';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
-import MuiAlert from '@material-ui/lab/Alert';
+import {Formik, Field} from 'formik';
+
 import CustomPopupState from '../CustomPopupState/CustomPopupState';
 import Select from '@material-ui/core/Select';
 import Input from '@material-ui/core/Input';
@@ -24,6 +16,7 @@ import axios from 'axios';
 import configApiCall from '../../api'
 import {api_path_post_install_server} from '../../globalUrls'
 import auth from 'auth';
+import * as Yup from "yup";
 
 const useStyles = makeStyles((theme) => ({
     paper: {
@@ -47,6 +40,15 @@ const useStyles = makeStyles((theme) => ({
 
 export default function ServerParameters(props) {
 
+    // Formik validation fields
+    const initialValues = {domain: "", sipconfig:""};
+    const validationSchema = Yup.object().shape({
+        domain: Yup.string()
+            .required("Domain is required."),
+        sipconfig: Yup.mixed()
+            .required("Sip configuration file is required."),
+    });
+
     const certificateRevocationTypes = [
         {value: 300000, label: "5 minutes"},
         {value: 600000, label: "10 minutes"},
@@ -75,12 +77,9 @@ export default function ServerParameters(props) {
 
     const classes = useStyles();
     const history = useHistory();
-    const [error, setError] = React.useState(props.error);
-    const [domain, setDomain] = React.useState("");
     const [certificateRevocation, setCertificateRevocation] = React.useState(certificateRevocationTypes[0])
     const [deviceLifetime, setDeviceLifetime] = React.useState(deviceLifetimeTypes[0])
     const [userAccountLifetime, setUserAccountLifetime] = React.useState(userAccountLifetimeTypes[0])
-    const [sipConfigurationTemplate, setSIPCertificateTemplate] = React.useState(null);
     const [userlifeDisabled, setUserlifeDisabled] = React.useState(false);
 
     React.useEffect(() => {
@@ -101,24 +100,22 @@ export default function ServerParameters(props) {
         })
     }
 
-    function handleSubmit(e) {
-        e.preventDefault();
+    function handleSubmit(values) {
         let jsonData = {};
         let re = new RegExp(/^http[s]?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[.\w]*)*$/);
-        if(domain.match(re)){
+        if(values.domain.match(re)){
             jsonData = {
-                'serverDomain': domain,
+                'serverDomain': values.domain,
                 'crlLifetime': certificateRevocation.value,
                 'deviceLifetime': deviceLifetime.value,
                 'userLifetime': userAccountLifetime.value,
-                'sipConfig': sipConfigurationTemplate,
+                'sipConfig': values.sipconfig,
                 'signingAlgorithm': "SHA512WITHRSA"
             }
             axios(configApiCall(api_path_post_install_server, "POST", jsonData, null)).then((response)=>{
                 callBackServerParameters()
             }).catch((error)=>{
-                setError(error);
-                console.log('Error installin server parameters: ' + error );
+                console.log('Error installing server parameters: ' + error );
             })
         }
         else{
@@ -141,73 +138,107 @@ export default function ServerParameters(props) {
     }
 
 
-    const handleSipConfigurationTemplateChange = (event) => {
-        setSIPCertificateTemplate(event.target.files[0])
-    }
-
     return (
-        <form className={classes.form} noValidate onSubmit={handleSubmit}>
-            <Typography variant="h5" gutterBottom color="primary">Server Parameters</Typography>
-            <Typography variant="body1" gutterBottom >The global parameters cover the general configuration of the server's engine.</Typography>
-            <Typography variant="subtitle1" gutterBottom >CORS Domain Name<CustomPopupState message="Set the domain of the web client server to connect to the JAMS admin dashboard and Jami accounts. It is also used to define where the clients should download CRLs and submit OCSP queries. In case you are running a proxied instance (i.e. JAMS behind IIS), please make sure to set this field correctly, otherwise devices will not be able to download CRLs or validate certificates."/></Typography>
-            <Typography variant="body1" gutterBottom >The domain name of your web client server. Requires http:// or https://</Typography>
-            <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                id="domain"
-                label="Domain"
-                name="domain"
-                autoComplete="domain"
-                autoFocus
-                onChange={e => setDomain(e.target.value)}
-            />
-            <Typography variant="subtitle1" gutterBottom >Certificate Revocation List Lifetime<CustomPopupState message="Set the domain of the web client server to connect to the JAMS admin dashboard and Jami accounts. It is also used to define where the clients should download CRLs and submit OCSP queries. In case you are running a proxied instance (i.e. JAMS behind IIS), please make sure to set this field correctly, otherwise devices will not be able to download CRLs or validate certificates."/></Typography>
-            <Select
-            labelId="certificate-revocation-select-label"
-            fullWidth
-            value={certificateRevocation.value}
-            onChange={handleCertificateRevocationChange}
-            variant="outlined"
-            children={certificateRevocationTypesItems}
-            />
-            <Typography variant="subtitle1" gutterBottom >Device Lifetime</Typography>
-            <Select
-            labelId="device-lifetime-select-label"
-            fullWidth
-            value={deviceLifetime.value}
-            onChange={handleDeviceLifetimeChange}
-            variant="outlined"
-            children={deviceLifetimeTypesItems}
-            />
-            <Typography variant="subtitle1" gutterBottom >User Account Lifetime</Typography>
-            <Select
-            labelId="user-account-lifetime-select-label"
-            fullWidth
-            value={userAccountLifetime.value}
-            onChange={handleUserAccountLifetimeChange}
-            isDisabled={userlifeDisabled}
-            variant="outlined"
-            children={userAccountLifetimeTypesItems}
-            />
-            <Typography variant="subtitle1" gutterBottom >SIP Configuration Template</Typography>
-            <Input
-            fullWidth
-            type="file"
-            onChange={handleSipConfigurationTemplateChange}
-            />
-
-            <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                color="primary"
-                className={classes.submit}
-            >
-                Set Server Parameters
-            </Button>
-
-        </form>
+        <Formik validationSchema={validationSchema}
+                initialValues={initialValues}
+                onSubmit={values => {
+                    handleSubmit(values);
+                }}
+        >
+            {(props) => {
+                const {
+                    values,
+                    touched,
+                    errors,
+                    handleSubmit,
+                    handleChange,
+                    handleBlur,
+                } = props;
+                return (
+                    <form className={classes.form} noValidate onSubmit={handleSubmit}>
+                        <Typography variant="h5" gutterBottom color="primary">Server Parameters</Typography>
+                        <Typography variant="body1" gutterBottom>The global parameters cover the general configuration
+                            of the server's engine.</Typography>
+                        <Typography variant="subtitle1" gutterBottom>CORS Domain Name<CustomPopupState
+                            message="Set the domain of the web client server to connect to the JAMS admin dashboard and Jami accounts. It is also used to define where the clients should download CRLs and submit OCSP queries. In case you are running a proxied instance (i.e. JAMS behind IIS), please make sure to set this field correctly, otherwise devices will not be able to download CRLs or validate certificates."/></Typography>
+                        <Typography variant="body1" gutterBottom>The domain name of your web client server. Requires
+                            http:// or https://</Typography>
+                        <TextField
+                            variant="outlined"
+                            margin="normal"
+                            required
+                            fullWidth
+                            id="domain"
+                            label="Domain"
+                            name="domain"
+                            autoComplete="domain"
+                            autoFocus
+                            value={values.domain}
+                            onChange={handleChange}
+                            onBlur={handleBlur}
+                            helperText={(errors.domain && touched.domain) && errors.domain}
+                        />
+                        <Typography variant="subtitle1" gutterBottom>Certificate Revocation List
+                            Lifetime<CustomPopupState
+                                message="Set the domain of the web client server to connect to the JAMS admin dashboard and Jami accounts. It is also used to define where the clients should download CRLs and submit OCSP queries. In case you are running a proxied instance (i.e. JAMS behind IIS), please make sure to set this field correctly, otherwise devices will not be able to download CRLs or validate certificates."/></Typography>
+                        <Select
+                            labelId="certificate-revocation-select-label"
+                            fullWidth
+                            value={certificateRevocation.value}
+                            onChange={handleCertificateRevocationChange}
+                            variant="outlined"
+                            children={certificateRevocationTypesItems}
+                        />
+                        <Typography variant="subtitle1" gutterBottom>Device Lifetime</Typography>
+                        <Select
+                            labelId="device-lifetime-select-label"
+                            fullWidth
+                            value={deviceLifetime.value}
+                            onChange={handleDeviceLifetimeChange}
+                            variant="outlined"
+                            children={deviceLifetimeTypesItems}
+                        />
+                        <Typography variant="subtitle1" gutterBottom>User Account Lifetime</Typography>
+                        <Select
+                            labelId="user-account-lifetime-select-label"
+                            fullWidth
+                            value={userAccountLifetime.value}
+                            onChange={handleUserAccountLifetimeChange}
+                            isDisabled={userlifeDisabled}
+                            variant="outlined"
+                            children={userAccountLifetimeTypesItems}
+                        />
+                        {userlifeDisabled ? <span class="spanError"> Account lifetime should be > to device lifetime.</span> : null}
+                        <Typography variant="subtitle1" gutterBottom>SIP Configuration Template</Typography>
+                        <Field name="sipconfig">
+                            {({field, form}) => (
+                                <div>
+                                    <Input
+                                        fullWidth
+                                        type="file"
+                                        onChange={handleChange}
+                                        {...field}
+                                    />
+                                    {form.errors.sipconfig && form.touched.sipconfig? <span class="spanError">{form.errors.sipconfig}</span> : null}
+                                </div>
+                            )
+                            }
+                        </Field>
+
+                        <Button
+                            type="submit"
+                            fullWidth
+                            variant="contained"
+                            color="primary"
+                            className={classes.submit}
+                        >
+                            Set Server Parameters
+                        </Button>
+
+                    </form>
+                );
+            }
+            }
+        </Formik>
     );
 }
\ No newline at end of file
diff --git a/jams-react-client/src/layouts/SignIn.js b/jams-react-client/src/layouts/SignIn.js
index 2e26be9ef408202936b55c74845d4752fe30078d..74af2aafca83c7cf584c7ccb0d34dd8b398d8541 100644
--- a/jams-react-client/src/layouts/SignIn.js
+++ b/jams-react-client/src/layouts/SignIn.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Redirect } from 'react-router-dom';
 import { useHistory } from "react-router-dom";
-import Avatar from '@material-ui/core/Avatar';
+import {Formik} from 'formik';
 import Button from '@material-ui/core/Button';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import TextField from '@material-ui/core/TextField';
@@ -10,7 +9,6 @@ import Checkbox from '@material-ui/core/Checkbox';
 import Link from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
@@ -18,6 +16,7 @@ import MuiAlert from '@material-ui/lab/Alert';
 import auth from '../auth.js'
 
 import logo from "assets/img/logo-jams-blue.svg";
+import * as Yup from "yup";
 function Alert(props) {
     return <MuiAlert elevation={6} variant="filled" {...props} />;
 }
@@ -28,7 +27,7 @@ function Copyright() {
             {'Copyright © '}
             <Link color="inherit" href="https://material-ui.com/">
                 Your Website
-      </Link>{' '}
+            </Link>{' '}
             {new Date().getFullYear()}
             {'.'}
         </Typography>
@@ -56,10 +55,23 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function SignIn(props) {
+
+    /**
+     * Formik Validation Fields
+     */
+
+    const initialValues = {username: "", password:""};
+
+    const validationSchema = Yup.object().shape({
+        username: Yup.string()
+            .required("Username is required."),
+        password: Yup.mixed()
+            .required("Password is required."),
+    });
+
+
     const classes = useStyles();
     const history = useHistory();
-    const [username, setUsername] = React.useState("");
-    const [password, setPassword] = React.useState("");
     const [error, setError] = React.useState(false);
     const [errorMessage, setErrorMessage] = React.useState("");
 
@@ -69,14 +81,13 @@ export default function SignIn(props) {
         }
     })
 
-    function handleSubmit(e) {
-        e.preventDefault();
+    function handleSubmit(values) {
         const jsonData = {
-            "username": username,
-            "password": password
+            "username": values.username,
+            "password": values.password
         }
         auth.login(jsonData, () => {
-            if(auth.authenticated && auth.access_token != ""){
+            if(auth.authenticated && auth.access_token !== ""){
                 auth.checkLastKnowStep(() => {
                     auth.checkDirectoryType(() => {
                         if(auth.isInstalled){
@@ -98,62 +109,88 @@ export default function SignIn(props) {
         <Container component="main" maxWidth="xs">
             <CssBaseline />
             <div className={classes.paper}>
-                <img src={logo} style={{ width: "25em", paddingBottom: "20px" }} />
+                <img src={logo} style={{ width: "25em", paddingBottom: "20px" }} alt="logo"/>
                 <Typography component="h1" variant="h5">
                     Sign in
                 </Typography>
                 {error && <Alert severity="error">{errorMessage}</Alert>}
-                <form className={classes.form} noValidate onSubmit={handleSubmit}>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="username"
-                        label="Username"
-                        name="username"
-                        autoComplete="email"
-                        autoFocus
-                        onChange={e => setUsername(e.target.value)}
-                    />
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        name="password"
-                        label="Password"
-                        type="password"
-                        id="password"
-                        autoComplete="current-password"
-                        onChange={e => setPassword(e.target.value)}
-                    />
-                    <FormControlLabel
-                        control={<Checkbox value="remember" color="primary" />}
-                        label="Remember me"
-                    />
-                    <Button
-                        type="submit"
-                        fullWidth
-                        variant="contained"
-                        color="primary"
-                        className={classes.submit}
-                    >
-                        Sign In
-          </Button>
-                    <Grid container>
-                        <Grid item xs>
-                            <Link href="#" variant="body2">
-                                Forgot password?
-              </Link>
-                        </Grid>
-                        <Grid item>
-                            <Link href="#" variant="body2">
-                                {"Don't have an account? Sign Up"}
-                            </Link>
-                        </Grid>
-                    </Grid>
-                </form>
+                <Formik validationSchema={validationSchema}
+                        initialValues={initialValues}
+                        onSubmit={values => {
+                            handleSubmit(values);
+                        }}
+                >
+                    {(props) => {
+                        const {
+                            values,
+                            touched,
+                            errors,
+                            handleSubmit,
+                            handleChange,
+                            handleBlur,
+                        } = props;
+                        return (
+                            <form className={classes.form} noValidate onSubmit={handleSubmit}>
+                                <TextField
+                                    variant="outlined"
+                                    margin="normal"
+                                    required
+                                    fullWidth
+                                    id="username"
+                                    label="Username"
+                                    name="username"
+                                    autoComplete="username"
+                                    autoFocus
+                                    value={values.username}
+                                    onChange={handleChange}
+                                    onBlur={handleBlur}
+                                    helperText={(errors.username && touched.username) && errors.username}
+                                />
+                                <TextField
+                                    variant="outlined"
+                                    margin="normal"
+                                    required
+                                    fullWidth
+                                    name="password"
+                                    label="Password"
+                                    type="password"
+                                    id="password"
+                                    autoComplete="current-password"
+                                    value={values.password}
+                                    onChange={handleChange}
+                                    onBlur={handleBlur}
+                                    helperText={(errors.password && touched.password) && errors.password}
+                                />
+                                <FormControlLabel
+                                    control={<Checkbox value="remember" color="primary"/>}
+                                    label="Remember me"
+                                />
+                                <Button
+                                    type="submit"
+                                    fullWidth
+                                    variant="contained"
+                                    color="primary"
+                                    className={classes.submit}
+                                >
+                                    Sign In
+                                </Button>
+                                <Grid container>
+                                    <Grid item xs>
+                                        <Link href="#" variant="body2">
+                                            Forgot password?
+                                        </Link>
+                                    </Grid>
+                                    <Grid item>
+                                        <Link href="#" variant="body2">
+                                            {"Don't have an account? Sign Up"}
+                                        </Link>
+                                    </Grid>
+                                </Grid>
+                            </form>
+                        );
+                    }
+                    }
+                </Formik>
             </div>
             <Box mt={8}>
                 <Copyright />
diff --git a/jams-react-client/src/layouts/SignUp.js b/jams-react-client/src/layouts/SignUp.js
index feba0272e77f56dd3828e8d9e15c1a568535ebcb..fae10c160dcc950ddecf7e4abb4d13037b7fc3cb 100644
--- a/jams-react-client/src/layouts/SignUp.js
+++ b/jams-react-client/src/layouts/SignUp.js
@@ -1,14 +1,7 @@
 import React, { useEffect } from 'react';
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import TextField from '@material-ui/core/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
 import Link from '@material-ui/core/Link';
-import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
@@ -34,7 +27,7 @@ function Copyright() {
             {'Copyright © '}
             <Link color="inherit" href="https://savoirfairelinux.com/">
                 JAMS by Savoir-faire Linux
-      </Link>{' '}
+            </Link>{' '}
             {new Date().getFullYear()}
             {'.'}
         </Typography>
@@ -58,9 +51,9 @@ const useStyles = makeStyles((theme) => ({
         marginBottom: theme.spacing(3),
         padding: theme.spacing(2),
         [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
-          marginTop: theme.spacing(6),
-          marginBottom: theme.spacing(6),
-          padding: theme.spacing(3),
+            marginTop: theme.spacing(6),
+            marginBottom: theme.spacing(6),
+            padding: theme.spacing(3),
         },
     },
     logo: {
@@ -82,28 +75,28 @@ export default function SignUp(props) {
     });
 
     function returnStep(){
-        if(step == 0) {
+        if(step === 0) {
             return <CreateAdmin setError={setError} setErrorMessage={setErrorMessage}  />
-        }else if (step == 1) {
+        }else if (step === 1) {
             return <CaSetup setError={setError} setErrorMessage={setErrorMessage} />
-        }else if (step == 2) {
+        }else if (step === 2) {
             return <IdentityManagement setError={setError} setErrorMessage={setErrorMessage} />
-        }else if (step == 3) {
+        }else if (step === 3) {
             return <ServerParameters setError={setError} setErrorMessage={setErrorMessage} />
         }
     }
     return (
         <Container component="main" maxWidth="sm">
             <Paper className={classes.paper}>
-            <CssBaseline />
-                <img src={logo} className={classes.logo} />
-            <CustomizedSteppers step={step}/>
-            {error && errorMessage && <Alert severity="error">{errorMessage}</Alert>}
-            {returnStep()}
-        
-            <Box mt={8}>
-                <Copyright/>
-            </Box>
+                <CssBaseline />
+                <img src={logo} className={classes.logo} alt="Logo Jami"/>
+                <CustomizedSteppers step={step}/>
+                {error && errorMessage && <Alert severity="error">{errorMessage}</Alert>}
+                {returnStep()}
+
+                <Box mt={8}>
+                    <Copyright/>
+                </Box>
             </Paper>
         </Container>
     );
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
index b162854f001ae4e4faa2c202a47f270a42c921ad..5251d5f93d0b13f1e4d20806ab1d183e1b6b14e5 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
@@ -2,7 +2,6 @@ import React, {useEffect} from "react";
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
 // core components
-import GridItem from "components/Grid/GridItem.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import Button from "components/CustomButtons/Button.js";
 import Card from "components/Card/Card.js";
@@ -17,7 +16,6 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 
@@ -38,8 +36,6 @@ import DoneIcon from '@material-ui/icons/Done';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 
 import auth from "auth.js"
@@ -48,12 +44,8 @@ import { api_path_get_admin_user, api_path_get_auth_user, api_path_get_user_dire
 
 import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
 
-import {
-    infoColor
-} from "assets/jss/material-dashboard-react.js";
 import { hexToRgb, blackColor } from "assets/jss/material-dashboard-react.js";
 import axios from "axios";
-import FormControl from "@material-ui/core/FormControl";
 import PersonIcon from "../../../node_modules/@material-ui/icons/Person";
 
 
@@ -190,7 +182,7 @@ export default function DisplayUserProfile(props) {
     }, []);
 
     const getUserStatus = (user) => {
-        if(userStatus == false) {
+        if(userStatus === false) {
             return <Chip label="Active" avatar={<Avatar alt={user.username} src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} />} color="primary" deleteIcon={<DoneIcon />}/>
         }else{
             return <Chip label="Revoked" avatar={<Avatar alt={user.username} src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} />} deleteIcon={<DoneIcon />}/>            
@@ -358,7 +350,7 @@ export default function DisplayUserProfile(props) {
                             {auth.isLocalDirectory() && <Button color="info" onClick={() => props.setDisplayUser(false)}>
                                 <EditIcon /> Edit Profile
                             </Button>}
-                            {auth.hasAdminScope() && (userStatus == "Active" || userStatus == '') &&                             
+                            {auth.hasAdminScope() && (userStatus === "Active" || userStatus === '') &&
                             <Button color="danger" onClick={() => handleClickOpen(user.username)} >
                                 <DeleteIcon fontSize="small"/> Revoke user
                             </Button>}
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
index 2f6cfec94ae472fb21df8c9b9ba95fbd993e640c..c503aca352115af366162c575a6c762052b318b4 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
@@ -1,5 +1,7 @@
 import React from "react";
 import { useHistory } from 'react-router-dom';
+import {Formik, Field} from "formik";
+
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
 import InputLabel from "@material-ui/core/InputLabel";
@@ -7,16 +9,12 @@ import InputLabel from "@material-ui/core/InputLabel";
 import Grid from '@material-ui/core/Grid';
 import GridItem from "components/Grid/GridItem.js";
 import GridContainer from "components/Grid/GridContainer.js";
-import CustomInput from "components/CustomInput/CustomInput.js";
 import Button from "components/CustomButtons/Button.js";
 import Card from "components/Card/Card.js";
 import CardHeader from "components/Card/CardHeader.js";
 import CardIcon from "components/Card/CardIcon.js";
-import CardAvatar from "components/Card/CardAvatar.js";
 import CardBody from "components/Card/CardBody.js";
 import CardFooter from "components/Card/CardFooter.js";
-import Devices from "components/Devices/Devices.js";
-import Search from "@material-ui/icons/Search";
 import FormControl from '@material-ui/core/FormControl';
 import Input from '@material-ui/core/Input';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -62,8 +60,6 @@ import {
 
 import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
 
-const CONTAINER_HEIGHT = 200
-
 const fileUpload = require('fuctbase64');
 
 
@@ -74,20 +70,20 @@ const styles = (theme)=> ( {
         flexGrow: 1
     },
     cardCategoryWhite: {
-      color: "rgba(255,255,255,.62)",
-      margin: "0",
-      fontSize: "14px",
-      marginTop: "0",
-      marginBottom: "0"
+        color: "rgba(255,255,255,.62)",
+        margin: "0",
+        fontSize: "14px",
+        marginTop: "0",
+        marginBottom: "0"
     },
     cardTitleWhite: {
-      color: "#FFFFFF",
-      marginTop: "0px",
-      minHeight: "auto",
-      fontWeight: "300",
-      fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
-      marginBottom: "3px",
-      textDecoration: "none"
+        color: "#FFFFFF",
+        marginTop: "0px",
+        minHeight: "auto",
+        fontWeight: "300",
+        fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+        marginBottom: "3px",
+        textDecoration: "none"
     },
     input: {
         display: 'none',
@@ -104,24 +100,25 @@ const styles = (theme)=> ( {
     },
     editProfilePicture: {
         borderRadius: "50%",
-        width: "200px", 
+        width: "200px",
         height: "200px",
+
         boxShadow:
-        "0 6px 8px -12px rgba(" +
-        hexToRgb(blackColor) +
-        ", 0.56), 0 4px 25px 0px rgba(" +
-        hexToRgb(blackColor) +
-        ", 0.12), 0 8px 10px -5px rgba(" +
-        hexToRgb(blackColor) +
-        ", 0.2)",
+            "0 6px 8px -12px rgba(" +
+            hexToRgb(blackColor) +
+            ", 0.56), 0 4px 25px 0px rgba(" +
+            hexToRgb(blackColor) +
+            ", 0.12), 0 8px 10px -5px rgba(" +
+            hexToRgb(blackColor) +
+            ", 0.2)",
     },
     dialogPaper: {
         minHeight: '60vh',
         maxHeight: '60vh',
         minWidth: '80vh',
         maxWidth: '80vh'
-    }
-  });
+    },
+});
 
 const useStyles = makeStyles(styles);
 
@@ -166,7 +163,7 @@ export default function EditCreateUserProfile(props) {
                     setFaxNumber(user["faxNumber"])
                     setPhoneNumber(user["phoneNumber"])
                     setExtension(user["phoneNumberExtension"])
-                    setMobileNumber(user["mobileNumber"])    
+                    setMobileNumber(user["mobileNumber"])
                 })
             }).catch((error) => {
                 console.log("Error fetching user : " + props.username + " " + error)
@@ -212,8 +209,7 @@ export default function EditCreateUserProfile(props) {
             'faxNumber': faxNumber,
             'phoneNumber': phoneNumber,
             'phoneNumberExtension': extension,
-            'mobileNumber': mobileNumber,
-            'jamiId': ""
+            'mobileNumber': mobileNumber
         }
 
         axios(configApiCall(api_path_post_create_user + "?username="+ data.username, 'POST', null, null)).then((response) => {
@@ -221,9 +217,9 @@ export default function EditCreateUserProfile(props) {
             handleUserProfileCreation(data)
         }).catch((error) => {
             console.log("Failed to create new user. This is either because the username is already in use" +
-            " on the public nameserver, or another unknown error has occurred. " +
-            "Please choose another one.");
-        }) 
+                " on the public nameserver, or another unknown error has occurred. " +
+                "Please choose another one.");
+        })
     }
 
     const handleUserExists = (input) => {
@@ -231,7 +227,7 @@ export default function EditCreateUserProfile(props) {
             "username": input
         }
         axios(configApiCall(api_path_get_exists_user, 'GET', data, null)).then((response) =>{
-            if(response.status == 200){
+            if(response.status === 200){
                 setUserExists(false)
             }
         }).catch((error) => {
@@ -267,7 +263,7 @@ export default function EditCreateUserProfile(props) {
     const onCropChange = (crop) => {
         setCrop(crop)
     }
-     
+
     const onCropComplete = (croppedArea, croppedAreaPixels) => {
         getCroppedImg(
             originalUploadedImage,
@@ -277,7 +273,7 @@ export default function EditCreateUserProfile(props) {
             setProfilePicturePreview(value)
         })
     }
-     
+
     const onZoomChange = (zoom) => {
         setZoom(zoom)
     }
@@ -291,273 +287,387 @@ export default function EditCreateUserProfile(props) {
         setProfilePicture(profilePicturePreview.replace("data:image/jpeg;base64,", ""))
         setOpen(false)
     }
-    
+
     const handleClosePassword = () => {
         setOpenPassword(false);
         history.push('/admin');
     }
 
+    /**
+     * Formik Validation Fields
+     *
+     * */
+
+    const validateFieldInput = fieldinput => {
+        let error;
+        if (!fieldinput) {
+            error = 'Required';
+        }
+        return error;
+    }
+
+    const validateUsername = usernamevalue => {
+        handleUserExists(usernamevalue)
+        let error;
+        if (!usernamevalue) {
+            error = 'Required';
+        }
+        return error;
+    }
+
+    const validateEmail = emailvalue => {
+        let error;
+        if (!emailvalue) {
+            error = 'Required';
+        }
+        else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(emailvalue)) {
+            error = 'Invalid email address';
+            console.log("blurring email false here")
+        }
+        return error;
+    }
+
+
     return(
         <div>
-        <Dialog
-            open={openPassword}
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-        >
-            <DialogTitle id="alert-dialog-title">{"Temporary password"}</DialogTitle>
-            <DialogContent>
-            <DialogContentText id="alert-dialog-description">
-            New user successfully created. Here is the one time password: <strong>{temporaryPassword}</strong>
-            </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-            <Button onClick={handleClosePassword} color="primary">
-                Ok
-            </Button>
-            </DialogActions>
-        </Dialog>
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-            classes={{ paper: classes.dialogPaper }}
-        >
-            <DialogTitle id="alert-dialog-title">{"Crop image"}</DialogTitle>
-            <DialogContent>
-                <Cropper
-                    image={originalUploadedImage}
-                    crop={crop}
-                    zoom={zoom}
-                    aspect={aspect}
-                    onCropChange={onCropChange}
-                    onCropComplete={onCropComplete}
-                    onZoomChange={onZoomChange}
-                />
-            </DialogContent>
-            <DialogActions>
-            <div className={classes.controls}>
-                <div className={classes.sliderContainer}>
-                    <Typography
-                        variant="overline"
-                        classes={{ root: classes.sliderLabel }}
-                    >
-                        Zoom
-                    </Typography>
-                    <Slider
-                        value={zoom}
-                        min={1}
-                        max={3}
-                        step={0.1}
-                        aria-labelledby="Zoom"
-                        classes={{ container: classes.slider }}
-                        onChange={(e, zoom) => setZoom(zoom)}
+            <Dialog
+                open={openPassword}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">{"Temporary password"}</DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        New user successfully created. Here is the one time password: <strong>{temporaryPassword}</strong> ?
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClosePassword} color="primary">
+                        Ok
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            <Dialog
+                open={open}
+                onClose={handleClose}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+                classes={{ paper: classes.dialogPaper }}
+            >
+                <DialogTitle id="alert-dialog-title">{"Crop image"}</DialogTitle>
+                <DialogContent>
+                    <Cropper
+                        image={originalUploadedImage}
+                        crop={crop}
+                        zoom={zoom}
+                        aspect={aspect}
+                        onCropChange={onCropChange}
+                        onCropComplete={onCropComplete}
+                        onZoomChange={onZoomChange}
                     />
+                </DialogContent>
+                <DialogActions>
+                    <div className={classes.controls}>
+                        <div className={classes.sliderContainer}>
+                            <Typography
+                                variant="overline"
+                                classes={{ root: classes.sliderLabel }}
+                            >
+                                Zoom
+                            </Typography>
+                            <Slider
+                                value={zoom}
+                                min={1}
+                                max={3}
+                                step={0.1}
+                                aria-labelledby="Zoom"
+                                classes={{ container: classes.slider }}
+                                onChange={(e, zoom) => setZoom(zoom)}
+                            />
+                        </div>
+                        <div className={classes.sliderContainer}>
+                            <Typography
+                                variant="overline"
+                                classes={{ root: classes.sliderLabel }}
+                            >
+                                Rotation
+                            </Typography>
+                            <Slider
+                                value={rotation}
+                                min={0}
+                                max={360}
+                                step={1}
+                                aria-labelledby="Rotation"
+                                classes={{ container: classes.slider }}
+                                onChange={(e, rotation) => setRotation(rotation)}
+                            />
+                        </div>
                     </div>
-                    <div className={classes.sliderContainer}>
-                    <Typography
-                        variant="overline"
-                        classes={{ root: classes.sliderLabel }}
+                    <Button onClick={handleClose} color="danger">
+                        Cancel
+                    </Button>
+                    <Button onClick={cropProfilePicture} color="success" autoFocus>
+                        Crop
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            <GridContainer>
+                <GridItem xs={12} sm={12} md={8}>
+                    <Formik validateOnBlur
+                        initialValues={{
+                        username: '',
+                        firstname: '',
+                        lastname: '',
+                        email: '',
+                        organization: '',
+                        phonenumber: '',
+                        extension: '',
+                        mobilephonenumber: '',
+                        faxnumber: '',
+
+                    }}
                     >
-                        Rotation
-                    </Typography>
-                    <Slider
-                        value={rotation}
-                        min={0}
-                        max={360}
-                        step={1}
-                        aria-labelledby="Rotation"
-                        classes={{ container: classes.slider }}
-                        onChange={(e, rotation) => setRotation(rotation)}
-                    />
-                    </div>
-                </div>
-            <Button onClick={handleClose} color="danger">
-                Cancel
-            </Button>
-            <Button onClick={cropProfilePicture} color="success" autoFocus>
-                Crop
-            </Button>
-            </DialogActions>
-        </Dialog>
-        <GridContainer>
-            <GridItem xs={12} sm={12} md={8}>
-            <Card profile>
-                <CardHeader color="info" stats icon>
-                    <CardIcon color="info">
-                        {createUser ? <PersonAddOutlinedIcon /> : <EditIcon />}
-                    </CardIcon>
-                    <p className={classes.cardCategory}>{createUser ? "Create new profile" : "Edit profile"}</p>
-                    {createUser ? "" : <h3 className={classes.cardTitle}>{userName}</h3>}
-                </CardHeader>
-                <CardBody profile>
-                    <div className={classes.root}>
-                    <Grid container spacing={5}>
-                        <Grid item xs={12} sm={12} md={12}>
-                            <Grid container spacing={5} >
-                                <Grid item align="center" xs={12} sm={12} md={12} >
-                                    <img src={profilePicturePreview} alt="..." className={classes.editProfilePicture} />
-                                </Grid>
-                                <Grid item align="center" xs={12} sm={12} md={12}>
-                                    <input accept="image/*"  className={classes.input} id="icon-button-file" type="file" onChange={handleProfilePictureChange}/>
-                                    <label htmlFor="icon-button-file" >
-                                        <IconButton color="inherit" aria-label="upload picture" component="span" >
-                                        <PhotoCamera />
-                                        </IconButton> Update profile image
-                                    </label>
-                                </Grid>
-                                {createUser && 
-                                <Grid item align="center" xs={12} sm={12} md={12}>                                
-                                    <FormControl className={classes.margin} size="medium" error={userExists}>
-                                        <InputLabel htmlFor="username">{userExists ? "Error username exists" : "Username"}</InputLabel>
-                                        <Input
-                                        id="username"
-                                        placeholder={userName}
-                                        startAdornment={
-                                            <InputAdornment position="start">
-                                            <AccountCircleIcon />
-                                            </InputAdornment>
-                                        }
-                                        onChange={e => {
-                                            setUserName(e.target.value);
-                                            handleUserExists(e.target.value)
-                                        }}
-                                        />
-                                    </FormControl>
-                                </Grid>
-                                }
-                            </Grid>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="firstname">First Name</InputLabel>
-                                <Input
-                                id="firstname"
-                                placeholder={firstName}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <PersonIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setFirstName(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="lastname">Last Name</InputLabel>
-                                <Input
-                                id="lastname"
-                                placeholder={lastName}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <PersonOutlinedIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setLastName(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="email">Email</InputLabel>
-                                <Input
-                                id="email"
-                                placeholder={email}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <AlternateEmailOutlinedIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setEmail(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="organization">Organisation</InputLabel>
-                                <Input
-                                id="organization"
-                                placeholder={organization}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <BusinessCenterOutlinedIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setOrganization(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="phonenumber">Phone Number</InputLabel>
-                                <Input
-                                id="phonenumber"
-                                placeholder={phoneNumber}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <PhoneInTalkOutlinedIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setPhoneNumber(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="extension">Extension</InputLabel>
-                                <Input
-                                id="extension"
-                                placeholder={extension}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <PhoneForwardedOutlinedIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setExtension(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="faxnumber">Fax Number</InputLabel>
-                                <Input
-                                id="faxnumber"
-                                placeholder={faxNumber}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <LocalPrintshopOutlinedIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setFaxNumber(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                        <Grid item xs={12} sm={12} md={6}>
-                            <FormControl className={classes.margin} fullWidth>
-                                <InputLabel htmlFor="mobilephonenumber">Mobile Phonenumber</InputLabel>
-                                <Input
-                                id="mobilephonenumber"
-                                placeholder={mobileNumber}
-                                startAdornment={
-                                    <InputAdornment position="start">
-                                    <SmartphoneOutlinedIcon />
-                                    </InputAdornment>
-                                }
-                                onChange={e => setMobileNumber(e.target.value)}
-                                />
-                            </FormControl>
-                        </Grid>
-                    </Grid>
-                    </div>
-                </CardBody>
-                <CardFooter>
-                    {createUser ? <Button color="danger" onClick={handleCancel}>Cancel</Button> : <Button color="danger" onClick={handleCancelUpdate}>Cancel Update</Button>}
-                    {createUser ? <Button color="info" onClick={handleCreateUser}>Create Profile</Button> : <Button color="info" onClick={handleUpdateUser}>Update Profile</Button>}
-                </CardFooter>
-            </Card>
-            </GridItem>
-        </GridContainer>
+                        {({ errors, touched, validateForm, setFieldTouched}) => (
+                            <form>
+                                <Card profile>
+                                    <CardHeader color="info" stats icon>
+                                        <CardIcon color="info">
+                                            {createUser ? <PersonAddOutlinedIcon /> : <EditIcon />}
+                                        </CardIcon>
+                                        <p className={classes.cardCategory}>{createUser ? "Create new profile" : "Edit profile"}</p>
+                                        {createUser ? "" : <h3 className={classes.cardTitle}>{userName}</h3>}
+                                    </CardHeader>
+                                    <CardBody profile>
+                                        <div className={classes.root}>
+                                            <Grid container spacing={5}>
+                                                <Grid item xs={12} sm={12} md={12}>
+                                                    <Grid container spacing={5} >
+                                                        <Grid item align="center" xs={12} sm={12} md={12} >
+                                                            <img src={profilePicturePreview} alt="..." className={classes.editProfilePicture} />
+                                                        </Grid>
+                                                        <Grid item align="center" xs={12} sm={12} md={12}>
+                                                            <input accept="image/*"  className={classes.input} id="icon-button-file" type="file" onChange={handleProfilePictureChange}/>
+                                                            <label htmlFor="icon-button-file" >
+                                                                <IconButton color="inherit" aria-label="upload picture" component="span" >
+                                                                    <PhotoCamera />
+                                                                </IconButton> Update profile image
+                                                            </label>
+                                                        </Grid>
+                                                        {createUser &&
+                                                        <Grid item align="center" xs={12} sm={12} md={12}>
+                                                            <FormControl className={classes.margin} size="medium" error={userExists}>
+                                                                <InputLabel htmlFor="username">{userExists ? "Error username exists" : "Username"}</InputLabel>
+                                                                <Field name="username" validate={validateUsername} >
+                                                                    {({field}) => (
+                                                                        <Input
+                                                                            id="username"
+                                                                            placeholder={userName}
+                                                                            startAdornment={
+                                                                                <InputAdornment position="start">
+                                                                                    <AccountCircleIcon />
+                                                                                </InputAdornment>
+                                                                            }
+                                                                            onChange={setUserName(field.value)}
+                                                                            {...field}
+                                                                        />
+                                                                    )
+                                                                    }
+                                                                </Field>
+                                                                {errors.username && touched.username && <span class="spanError">{errors.username}</span>}
+                                                            </FormControl>
+                                                        </Grid>
+                                                        }
+                                                    </Grid>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="firstname">First Name</InputLabel>
+                                                        <Field name="firstname" validate={validateFieldInput} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="firstname"
+                                                                    placeholder={firstName}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <PersonIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setFirstName(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.firstname && touched.firstname && <span class="spanError">{errors.firstname}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="lastname">Last Name</InputLabel>
+                                                        <Field name="lastname" validate={validateFieldInput} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="lastname"
+                                                                    placeholder={lastName}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <PersonOutlinedIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setLastName(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.lastname && touched.lastname && <span class="spanError">{errors.lastname}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="email">Email</InputLabel>
+                                                        <Field name="email" validate={validateEmail} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="email"
+                                                                    placeholder={email}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <AlternateEmailOutlinedIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setEmail(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.email && touched.email && <span class="spanError">{errors.email}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="organization">Organisation</InputLabel>
+                                                        <Field name="organization" validate={validateFieldInput} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="organization"
+                                                                    placeholder={organization}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <BusinessCenterOutlinedIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setOrganization(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.organization && touched.organization && <span class="spanError">{errors.organization}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="phonenumber">Phone Number</InputLabel>
+                                                        <Field name="phonenumber" validate={validateFieldInput} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="phonenumber"
+                                                                    placeholder={phoneNumber}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <PhoneInTalkOutlinedIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setPhoneNumber(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.phonenumber && touched.phonenumber && <span class="spanError">{errors.phonenumber}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="extension">Extension</InputLabel>
+                                                        <Field name="extension" validate={validateFieldInput} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="extension"
+                                                                    placeholder={extension}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <PhoneForwardedOutlinedIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setExtension(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.extension && touched.extension && <span class="spanError">{errors.extension}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="faxnumber">Fax Number</InputLabel>
+                                                        <Field name="faxnumber" validate={validateFieldInput} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="faxnumber"
+                                                                    placeholder={faxNumber}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <LocalPrintshopOutlinedIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setFaxNumber(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.faxnumber && touched.faxnumber && <span class="spanError">{errors.faxnumber}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                                <Grid item xs={12} sm={12} md={6}>
+                                                    <FormControl className={classes.margin} fullWidth>
+                                                        <InputLabel htmlFor="mobilephonenumber">Mobile Phonenumber</InputLabel>
+                                                        <Field name="mobilephonenumber" validate={validateFieldInput} >
+                                                            {({field}) => (
+                                                                <Input
+                                                                    id="mobilephonenumber"
+                                                                    placeholder={mobileNumber}
+                                                                    startAdornment={
+                                                                        <InputAdornment position="start">
+                                                                            <SmartphoneOutlinedIcon />
+                                                                        </InputAdornment>
+                                                                    }
+                                                                    onChange={setMobileNumber(field.value)}
+                                                                    {...field}
+                                                                />
+                                                            )
+                                                            }
+                                                        </Field>
+                                                        {errors.mobilephonenumber && touched.mobilephonenumber && <span class="spanError">{errors.mobilephonenumber}</span>}
+                                                    </FormControl>
+                                                </Grid>
+                                            </Grid>
+                                        </div>
+                                    </CardBody>
+                                    <CardFooter>
+                                        {createUser ? <Button color="danger" onClick={handleCancel}>Cancel</Button> : <Button color="danger" onClick={handleCancelUpdate}>Cancel Update</Button>}
+                                        {createUser ? <Button color="info" onClick={() => validateForm().then(() => handleCreateUser())}>Create Profile</Button> : <Button color="info" onClick={() => validateForm().then(() => handleUpdateUser())}>Update Profile</Button>}
+                                    </CardFooter>
+                                </Card>
+                            </form>
+                        )}
+                    </Formik>
+                </GridItem>
+            </GridContainer>
         </div>
     );
 }
\ No newline at end of file
diff --git a/jams-react-client/src/views/UserProfile/UserProfile.js b/jams-react-client/src/views/UserProfile/UserProfile.js
index fd3debd9ec0e7411ef778cede7f72af4f3b2d323..8d78dc2961741f6715346233b746e8fb7aadc04e 100755
--- a/jams-react-client/src/views/UserProfile/UserProfile.js
+++ b/jams-react-client/src/views/UserProfile/UserProfile.js
@@ -1,19 +1,8 @@
 import React from "react";
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
-import InputLabel from "@material-ui/core/InputLabel";
 // core components
-import GridItem from "components/Grid/GridItem.js";
-import GridContainer from "components/Grid/GridContainer.js";
-import CustomInput from "components/CustomInput/CustomInput.js";
-import Button from "components/CustomButtons/Button.js";
-import Card from "components/Card/Card.js";
-import CardHeader from "components/Card/CardHeader.js";
-import CardAvatar from "components/Card/CardAvatar.js";
-import CardBody from "components/Card/CardBody.js";
-import CardFooter from "components/Card/CardFooter.js";
 import Devices from "components/Devices/Devices.js";
-import Search from "@material-ui/icons/Search";
 
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
@@ -22,8 +11,6 @@ import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 
-import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-
 import EditCreateUserProfile from "./EditCreateUserProfile"
 
 import Contacts from "views/Contacts/Contacts"