diff --git a/src/components/form/genericForm.tsx b/src/components/form/genericForm.tsx
index c3afd70..4db088d 100644
--- a/src/components/form/genericForm.tsx
+++ b/src/components/form/genericForm.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import './GenericForm.css';
 import {useNavigate} from 'react-router-dom'
-import {ErrorMessage, Field, Form, Formik, FormikValues} from "formik";
+import {ErrorMessage, Field, Form, FormikProvider, FormikValues, useFormik} from "formik";
 import {Step, UserInput, FormData} from './formInterfaces';
 import * as Yup from "yup";
 
@@ -56,30 +56,33 @@ const GenericForm = (formData: FormData) => {
         setCurrentStep(current => Math.max(current - 1, 0))
     }
 
+    const formik = useFormik({
+        initialValues: userInput,
+        validationSchema: spec,
+        onSubmit: (values) => {
+            handleSubmit(values);
+        },
+    });
+
+    const {
+        touched,
+        errors,
+        isValid,
+        handleChange,
+        values,
+        setFieldTouched,
+    } = formik;
+
     const [prevLength, setPrevLength] = useState(0);
     return (
         <div>
             <div>
                 <h1>{formData.title}</h1>
             </div>
-            <div className="container">
-                <Formik
-                    initialValues={userInput}
-                    validationSchema={spec}
-                    onSubmit={(values: FormikValues) => {
-                        handleSubmit(values);
-                    }}
-                >
-                    {({
-                          touched,
-                          errors,
-                          isValid,
-                          handleChange,
-                          values,
-                          setFieldTouched
-                      }) => (
-
-                        <Form>
+            <div>
+                <FormikProvider value={formik}>
+                    <Form>
+                        <div>
                             <div>
                                 <label>
                                     <label>
@@ -131,24 +134,30 @@ const GenericForm = (formData: FormData) => {
                                             />
                                         )
                                     }
+                                </label>
+                            </div>
+                            <div>
+                                <label>
                                     <ErrorMessage name={steps[currentStep].name} component="div"/>
                                 </label>
                             </div>
-                            <button style={{marginLeft: 0}} className="button-outer" type="button" onClick={prev} disabled={currentStep === 0}>
-                                Previous
-                            </button>
-                            <button className="button-outer" type="button" onClick={next}
-                                    hidden={currentStep === (steps.length - 1)}
-                                    disabled={(!touched[steps[currentStep].name] || !!errors[steps[currentStep].name]) || currentStep === (steps.length - 1)}>
-                                Next
-                            </button>
-                            <input type="submit" value="Submit"
-                                   hidden={currentStep !== (steps.length - 1)}
-                                   disabled={!isValid || currentStep !== (steps.length - 1)}
-                            />
-                        </Form>
-                    )}
-                </Formik>
+                            <div>
+                                <button style={{marginLeft: 0}} className="button-outer" type="button" onClick={prev} disabled={currentStep === 0}>
+                                    Previous
+                                </button>
+                                <button className="button-outer" type="button" onClick={next}
+                                        hidden={currentStep === (steps.length - 1)}
+                                        disabled={(!touched[steps[currentStep].name] || !!errors[steps[currentStep].name]) || currentStep === (steps.length - 1)}>
+                                    Next
+                                </button>
+                                <input type="submit" value="Submit"
+                                       hidden={currentStep !== (steps.length - 1)}
+                                       disabled={!isValid || currentStep !== (steps.length - 1)}
+                                />
+                            </div>
+                        </div>
+                    </Form>
+                </FormikProvider>
             </div>
         </div>
     );