diff --git a/src/App.tsx b/src/App.tsx
index f3c33e9f9..3d5523c04 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,14 +5,14 @@ import { toast, ToastContainer } from 'react-toastify'
 import { EnvironmentConfig } from './config'
 import { Header } from './header'
 import { analyticsInitialize, logInitialize, ProfileProvider } from './lib'
-import { RouteContext, RouteContextData } from './lib/route-provider'
+import { routeContext, RouteContextData } from './lib/route-provider'
 
 analyticsInitialize(EnvironmentConfig)
 logInitialize(EnvironmentConfig)
 
 const App: FC<{}> = () => {
 
-    const { allRoutes }: RouteContextData = useContext(RouteContext)
+    const { allRoutes }: RouteContextData = useContext(routeContext)
 
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => {
diff --git a/src/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx b/src/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx
index fc2ca6650..424f76a53 100644
--- a/src/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx
+++ b/src/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx
@@ -1,14 +1,14 @@
 import classNames from 'classnames'
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { IconOutline, RouteContext, RouteContextData } from '../../../lib'
+import { IconOutline, routeContext, RouteContextData } from '../../../lib'
 
 import { ToolSelectorNarrow } from './tool-selector-narrow'
 import styles from './ToolSelectorsNarrow.module.scss'
 
 const ToolSelectorsNarrow: FC<{}> = () => {
 
-    const { toolsRoutes }: RouteContextData = useContext(RouteContext)
+    const { toolsRoutes }: RouteContextData = useContext(routeContext)
     const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     const closed: JSX.Element = <IconOutline.MenuIcon />
diff --git a/src/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx b/src/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx
index e36f2d6ca..7a499706b 100644
--- a/src/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx
+++ b/src/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx
@@ -1,13 +1,13 @@
 import { FC, useContext } from 'react'
 
-import { RouteContext, RouteContextData } from '../../../lib'
+import { routeContext, RouteContextData } from '../../../lib'
 
 import { ToolSelectorWide } from './tool-selector-wide'
 import styles from './ToolSelectorsWide.module.scss'
 
 const ToolSelectorsWide: FC<{}> = () => {
 
-    const { toolsRoutes }: RouteContextData = useContext(RouteContext)
+    const { toolsRoutes }: RouteContextData = useContext(routeContext)
 
     const selectors: Array<JSX.Element> = toolsRoutes
         .map(route => <ToolSelectorWide key={route.title} route={route} />)
diff --git a/src/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx b/src/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx
index a5196bb1c..30d2c951a 100644
--- a/src/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx
+++ b/src/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx
@@ -23,7 +23,7 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
             <Link
                 className='large-tab'
                 tabIndex={-1}
-                to={route} 
+                to={route}
             >
                 {title}
             </Link>
diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx
index 6dad37823..6758ec4f7 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 
-import { ProfileContext, ProfileContextData } from '../../../../lib'
+import { profileContext, ProfileContextData } from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
 import { ProfileLoggedIn } from './profile-logged-in'
@@ -12,7 +12,7 @@ const ProfileSelector: FC<{}> = () => {
     const {
         initialized,
         profile,
-    }: ProfileContextData = useContext(ProfileContext)
+    }: ProfileContextData = useContext(profileContext)
 
     // if we're not initialized, don't render anything
     if (!initialized) {
diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx
index 6a14a8a17..ebb5ce73d 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx
@@ -1,13 +1,19 @@
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { Avatar, IconOutline, logInfo , ProfileContext, ProfileContextData } from '../../../../../lib'
+import {
+    Avatar,
+    IconOutline,
+    logInfo,
+    profileContext,
+    ProfileContextData,
+} from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
 
 const ProfileLoggedIn: FC<{}> = () => {
 
-    const { profile }: ProfileContextData = useContext(ProfileContext)
+    const { profile }: ProfileContextData = useContext(profileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     if (!profile) {
diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx
index 0bbba8827..79719e486 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx
@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom'
 
 import {
     authUrlLogout,
-    ProfileContext,
+    profileContext,
     ProfileContextData,
-    RouteContext,
+    routeContext,
     RouteContextData,
 } from '../../../../../../lib'
 
@@ -17,8 +17,8 @@ interface ProfilePanelProps {
 
 const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
 
-    const { profile }: ProfileContextData = useContext(ProfileContext)
-    const { getPath  }: RouteContextData = useContext(RouteContext)
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const { getPath  }: RouteContextData = useContext(routeContext)
 
     if (!profile) {
         // this should never happen
diff --git a/src/lib/button/Button.tsx b/src/lib/button/Button.tsx
index 5a5e69e2b..c2d406360 100644
--- a/src/lib/button/Button.tsx
+++ b/src/lib/button/Button.tsx
@@ -4,16 +4,20 @@ import { Link } from 'react-router-dom'
 
 import styles from './Button.module.scss'
 
-interface ButtonProps {
-    readonly buttonStyle?: 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'
+export type ButtonStyle = 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonType = 'button' | 'submit'
+
+export interface ButtonProps {
+    readonly buttonStyle?: ButtonStyle
     readonly className?: string
     readonly disable?: boolean
     readonly label: string
     readonly onClick?: (event?: any) => void
     readonly route?: string
-    readonly size?: 'sm' | 'md' | 'lg' | 'xl'
+    readonly size?: ButtonSize
     readonly tabIndex: number
-    readonly type?: 'button' | 'submit'
+    readonly type?: ButtonType
     readonly url?: string
 }
 
diff --git a/src/lib/button/Buttons.test.tsx b/src/lib/button/Buttons.test.tsx
new file mode 100644
index 000000000..0dae599ff
--- /dev/null
+++ b/src/lib/button/Buttons.test.tsx
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Button />', () => {
+
+    test('it should render the content', () => { })
+})
diff --git a/src/lib/button/index.ts b/src/lib/button/index.ts
index 375b5832f..b5b2b24df 100644
--- a/src/lib/button/index.ts
+++ b/src/lib/button/index.ts
@@ -1 +1,10 @@
-export {  default as Button } from './Button'
+export { default as Button } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonSize } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonStyle } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonType } from './Button'
diff --git a/src/lib/form-elements/form-field-wrapper/index.ts b/src/lib/form-elements/form-field-wrapper/index.ts
deleted file mode 100644
index e90de43ef..000000000
--- a/src/lib/form-elements/form-field-wrapper/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FormFieldWrapper } from './Form-Field-Wrapper'
diff --git a/src/lib/form-elements/form-functions/form-definition.model.ts b/src/lib/form-elements/form-functions/form-definition.model.ts
deleted file mode 100644
index 9d0037b09..000000000
--- a/src/lib/form-elements/form-functions/form-definition.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { FormInputModel } from './form-input.model'
-
-export interface FormDefinition {
-    [input: string]: FormInputModel
-}
diff --git a/src/lib/form-elements/form-functions/form-input.model.ts b/src/lib/form-elements/form-functions/form-input.model.ts
deleted file mode 100644
index 01fafc6ff..000000000
--- a/src/lib/form-elements/form-functions/form-input.model.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface FormInputModel {
-    dependentField?: string
-    dirty?: boolean
-    disabled?: boolean
-    error?: string
-    hint?: string
-    label?: string
-    name: string
-    placeholder?: string
-    preventAutocomplete?: boolean
-    tabIndex: number
-    type: 'password' | 'text'
-    validators: Array<(value: string | undefined, formValues?: HTMLFormControlsCollection, otherField?: string) => string | undefined>
-    value?: string
-}
diff --git a/src/lib/form-elements/form-functions/form.functions.tsx b/src/lib/form-elements/form-functions/form.functions.tsx
deleted file mode 100644
index 805ec7a6a..000000000
--- a/src/lib/form-elements/form-functions/form.functions.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Dispatch, FormEvent, SetStateAction } from 'react'
-import { toast } from 'react-toastify'
-
-import { TextInput } from '../text-input'
-
-import { FormDefinition } from './form-definition.model'
-import { FormInputModel } from './form-input.model'
-
-export function getInput(formElements: HTMLFormControlsCollection, fieldName: string): HTMLInputElement {
-    return formElements.namedItem(fieldName) as HTMLInputElement
-}
-
-export function getValue(formElements: HTMLFormControlsCollection, fieldName: string): string {
-    return getInput(formElements, fieldName).value
-}
-
-export function initializeValues(formDef: FormDefinition, formValues: any): void {
-    getInputArray(formDef)
-        .filter(input => !input.dirty)
-        .forEach(input => input.value = formValues[input.name])
-}
-
-export function renderTextInput(
-    formDef: FormDefinition,
-    fieldName: string,
-): JSX.Element {
-
-    const formField: FormInputModel = formDef[fieldName]
-
-    return (
-        <TextInput
-            {...formField}
-            tabIndex={formField.tabIndex || 0}
-            type={formField.type || 'text'}
-            value={formField.value}
-        />
-    )
-}
-
-export function reset(formDef: FormDefinition, formValue?: any): void {
-    getInputArray(formDef)
-        .forEach(inputDef => {
-            inputDef.dirty = false
-            inputDef.error = undefined
-            inputDef.value = formValue?.[inputDef.name]
-        })
-}
-
-export async function submit<T, R>(
-    event: FormEvent<HTMLFormElement>,
-    formDef: FormDefinition,
-    formName: string,
-    formValue: T,
-    save: (value: T) => Promise<R>,
-    setDisableButton: Dispatch<SetStateAction<boolean>>,
-): Promise<void> {
-
-    event.preventDefault()
-    setDisableButton(true)
-
-    const formFieldDefs: Array<FormInputModel> = getInputArray(formDef)
-
-    // if there are no dirty fields, display a message and stop submitting
-    const dirty: FormInputModel | undefined = formFieldDefs.find(fieldDef => !!fieldDef.dirty)
-    if (!dirty) {
-        toast.info('No changes detected.')
-        return
-    }
-
-    // get the form values so we can validate them
-    const formValues: HTMLFormControlsCollection = (event.target as HTMLFormElement).elements
-
-    // if there are any validation errors, display a message and stop submitting
-    const isValid: boolean = validate(formDef, formValues, true)
-    if (!isValid) {
-        toast.error('Changes could not be saved. Please resolve errors.')
-        return
-    }
-
-    // set the values for the updated value
-    formFieldDefs.forEach(field => (formValue as any)[field.name] = field.value)
-
-    return save(formValue)
-        .then(() => {
-            toast.success(`Your ${formName} has been saved.`)
-            reset(formDef, formValue)
-        })
-        .catch(error => {
-            toast.error(error.response?.data?.result?.content || error.message || error)
-        })
-}
-
-export function validateAndUpdate(
-    event: FormEvent<HTMLFormElement>,
-    formDef: FormDefinition,
-): boolean {
-
-    const input: HTMLInputElement = (event.target as HTMLInputElement)
-    // set the input def info
-    const inputDef: FormInputModel = formDef[input.name]
-    inputDef.dirty = true
-    inputDef.value = input.value
-
-    // validate the form
-    const formElements: HTMLFormControlsCollection = (input.form as HTMLFormElement).elements
-    const isValid: boolean = validate(formDef, formElements)
-
-    formDef[input.name] = inputDef
-    return isValid
-}
-
-function getInputArray(formDef: FormDefinition): Array<FormInputModel> {
-    return Object.keys(formDef)
-        .map(key => formDef[key])
-}
-
-function validate(formDef: FormDefinition, formElements: HTMLFormControlsCollection, formDirty?: boolean): boolean {
-    const errors: Array<FormInputModel> = getInputArray(formDef)
-        .filter(formInputDef => {
-            formInputDef.error = undefined
-            formInputDef.dirty = formInputDef.dirty || !!formDirty
-            formInputDef.validators
-                .forEach(validator => {
-                    if (!formInputDef.error) {
-                        formInputDef.error = validator(formInputDef.value, formElements, formInputDef.dependentField)
-                    }
-                })
-            return !!formInputDef.error
-        })
-    return !errors.length
-}
diff --git a/src/lib/form-elements/form-functions/index.ts b/src/lib/form-elements/form-functions/index.ts
deleted file mode 100644
index 5906bf71a..000000000
--- a/src/lib/form-elements/form-functions/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from './form-definition.model'
-export {
-    getInput as formGetInput,
-    getValue as formGetValue,
-    initializeValues as formInitializeValues,
-    renderTextInput as formRenderTextInput,
-    reset as formReset,
-    submit as formSubmit,
-    validateAndUpdate as formValidateAndUpdate,
-} from './form.functions'
-export * from './form-input.model'
diff --git a/src/lib/form-elements/index.ts b/src/lib/form-elements/index.ts
deleted file mode 100644
index 6496cf2b3..000000000
--- a/src/lib/form-elements/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './form-functions'
-export * from './text-input'
-export * from './validator-functions'
diff --git a/src/lib/form-elements/text-input/Text-Input.test.tsx b/src/lib/form-elements/text-input/Text-Input.test.tsx
deleted file mode 100644
index bf32a169a..000000000
--- a/src/lib/form-elements/text-input/Text-Input.test.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@testing-library/jest-dom'
-
-describe('<TextInput /> ', () => {
-
-    test('it should display the TextInput', () => {})
-})
diff --git a/src/lib/form-elements/text-input/Text-Input.tsx b/src/lib/form-elements/text-input/Text-Input.tsx
deleted file mode 100644
index 5ff1dc794..000000000
--- a/src/lib/form-elements/text-input/Text-Input.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { FC } from 'react'
-
-import { FormFieldWrapper } from '../form-field-wrapper'
-
-import styles from './Text-Input.module.scss'
-
-interface TextInputProps {
-    dirty?: boolean
-    disabled?: boolean
-    error?: string
-    hint?: string
-    label?: string
-    name: string
-    placeholder?: string
-    preventAutocomplete?: boolean
-    tabIndex: number
-    type: 'password' | 'text'
-    value?: string | number
-}
-
-const TextInput: FC<TextInputProps> = (props: TextInputProps) => {
-    return (
-        <FormFieldWrapper
-            dirty={!!props.dirty}
-            disabled={!!props.disabled}
-            error={props.error}
-            hint={props.hint}
-            label={props.label || props.name}
-            name={props.name}
-        >
-            <input
-                autoComplete={!!props.preventAutocomplete ? 'off' : undefined}
-                className={styles['form-input-text']}
-                defaultValue={props.value}
-                disabled={!!props.disabled}
-                name={props.name}
-                placeholder={props.placeholder}
-                tabIndex={props.tabIndex}
-                type={props.type || 'text'}
-            />
-        </FormFieldWrapper>
-    )
-}
-
-export default TextInput
diff --git a/src/lib/form-elements/text-input/index.ts b/src/lib/form-elements/text-input/index.ts
deleted file mode 100644
index 1988f9151..000000000
--- a/src/lib/form-elements/text-input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TextInput } from './Text-Input'
diff --git a/src/lib/form/Form.module.scss b/src/lib/form/Form.module.scss
new file mode 100644
index 000000000..e9f39b880
--- /dev/null
+++ b/src/lib/form/Form.module.scss
@@ -0,0 +1,12 @@
+@import '../../lib/styles';
+
+.form-fields {
+    display: grid;
+    grid-template-columns: .5fr;
+    justify-content: flex-end;
+
+    @include ltemd {
+        grid-template-columns: 1fr;
+        justify-content: center;
+    }
+}
diff --git a/src/lib/form/Form.test.tsx b/src/lib/form/Form.test.tsx
new file mode 100644
index 000000000..d76b7e9ce
--- /dev/null
+++ b/src/lib/form/Form.test.tsx
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Form />', () => {
+
+    test('it should render the form', () => {})
+})
diff --git a/src/lib/form/Form.tsx b/src/lib/form/Form.tsx
new file mode 100644
index 000000000..0c56e3b94
--- /dev/null
+++ b/src/lib/form/Form.tsx
@@ -0,0 +1,160 @@
+import { Dispatch, FocusEvent, FormEvent, SetStateAction, useState } from 'react'
+
+import { Button } from '../button'
+import '../styles/index.scss'
+
+import { FormDefinition } from './form-definition.model'
+import {
+    FormErrorMessage,
+    formGetInputModel,
+    formInitializeValues,
+    formReset,
+    formSubmitAsync,
+    formValidateAndUpdateAsync,
+} from './form-functions'
+import { InputText, InputTextarea } from './form-input'
+import { FormInputModel } from './form-input.model'
+import styles from './Form.module.scss'
+
+interface FormProps<ValueType, RequestType> {
+    readonly formDef: FormDefinition
+    readonly formValues?: ValueType
+    readonly requestGenerator: (inputs: ReadonlyArray<FormInputModel>) => RequestType
+    readonly resetOnError: boolean
+    readonly save: (value: RequestType) => Promise<void>
+}
+
+const Form: <ValueType extends any, RequestType extends any>(props: FormProps<ValueType, RequestType>) => JSX.Element
+    = <ValueType extends any, RequestType extends any>(props: FormProps<ValueType, RequestType>) => {
+
+        const [disableSave, setDisableSave]: [boolean, Dispatch<SetStateAction<boolean>>]
+            = useState<boolean>(true)
+
+        const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
+            = useState<FormDefinition>({ ...props.formDef })
+
+        const [formKey, setFormKey]: [number, Dispatch<SetStateAction<number>>]
+            = useState<number>(Date.now())
+
+        async function onBlur(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): Promise<void> {
+            const inputDef: FormInputModel = formGetInputModel(props.formDef.inputs, event.target.name)
+            inputDef.validateOnBlur
+                ?.forEach(async validator => {
+                    if (!inputDef.error) {
+                        inputDef.error = await validator(event.target.value, event.target.form?.elements, inputDef.dependentField)
+                        setFormDef({ ...formDef })
+                    }
+                })
+        }
+
+        async function onChange(event: FormEvent<HTMLFormElement>): Promise<void> {
+            const isValid: boolean = await formValidateAndUpdateAsync(event, formDef.inputs)
+            setFormDef({ ...formDef })
+            setDisableSave(!isValid)
+        }
+
+        function onFocus(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {
+            const inputDef: FormInputModel = formGetInputModel(props.formDef.inputs, event.target.name)
+            inputDef.dirtyOrTouched = true
+            setFormDef({ ...formDef })
+        }
+
+        function onReset(): void {
+            setFormDef({ ...formDef })
+            formReset(props.formDef.inputs, props.formValues)
+            setFormKey(Date.now())
+        }
+
+        async function onSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+            const values: RequestType = props.requestGenerator(formDef.inputs)
+            formSubmitAsync<RequestType, void>(event, formDef.inputs, props.formDef.title, values, props.save, setDisableSave)
+                .then(() => {
+                    setFormKey(Date.now())
+                    formReset(formDef.inputs, props.formValues)
+                    setFormDef({ ...formDef })
+                })
+                .catch((error: FormErrorMessage) => {
+                    // only reset on save errors
+                    if (props.resetOnError && error === FormErrorMessage.save) {
+                        formReset(formDef.inputs, props.formValues)
+                        setFormKey(Date.now())
+                    }
+                    setFormDef({ ...formDef })
+                })
+        }
+
+        formInitializeValues(formDef.inputs, props.formValues)
+
+        const formInputs: Array<JSX.Element> = props.formDef.inputs
+            .map(input => formGetInputModel(props.formDef.inputs, input.name))
+            .map((inputModel, index) => {
+                switch (inputModel.type) {
+                    case 'textarea':
+                        return (
+                            <InputTextarea
+                                {...inputModel}
+                                key={inputModel.name}
+                                onBlur={onBlur}
+                                onFocus={onFocus}
+                                tabIndex={inputModel.notTabbable ? -1 : index + 1}
+                                value={inputModel.value}
+                            />
+                        )
+                    default:
+                        return (
+                            <InputText
+                                {...inputModel}
+                                key={inputModel.name}
+                                onBlur={onBlur}
+                                onFocus={onFocus}
+                                tabIndex={inputModel.notTabbable ? -1 : index + 1}
+                                type={inputModel.type || 'text'}
+                                value={inputModel.value}
+                            />
+                        )
+                }
+
+            })
+
+        const buttons: Array<JSX.Element> = props.formDef.buttons
+            .map((button, index) => {
+                // if this is a reset button, set its onclick to reset
+                if (!!button.isReset) {
+                    button = {
+                        ...button,
+                        onClick: onReset,
+                    }
+                }
+                return (
+                    <Button
+                        {...button}
+                        disable={button.isSave && disableSave}
+                        key={button.label}
+                        tabIndex={button.notTabble ? -1 : index + props.formDef.inputs.length}
+                    />
+                )
+            })
+
+        return (
+            <form
+                action={''}
+                key={formKey}
+                onChange={onChange}
+                onSubmit={onSubmit}
+            >
+
+                <h6>{props.formDef.title}</h6>
+
+                <div className={styles['form-fields']}>
+                    {formInputs}
+                </div>
+
+                <div className='button-container'>
+                    {buttons}
+                </div>
+
+            </form>
+        )
+    }
+
+export default Form
diff --git a/src/lib/form/form-button.model.ts b/src/lib/form/form-button.model.ts
new file mode 100644
index 000000000..0a36104b5
--- /dev/null
+++ b/src/lib/form/form-button.model.ts
@@ -0,0 +1,14 @@
+import { ButtonSize, ButtonStyle, ButtonType } from '../button'
+
+export interface FormButton {
+    readonly buttonStyle?: ButtonStyle
+    readonly isReset?: boolean
+    readonly isSave?: boolean
+    readonly label: string
+    readonly notTabble?: boolean
+    readonly onClick?: (event?: any) => void
+    route?: string
+    readonly size?: ButtonSize
+    readonly type?: ButtonType
+    readonly url?: string
+}
diff --git a/src/lib/form/form-definition.model.ts b/src/lib/form/form-definition.model.ts
new file mode 100644
index 000000000..101502547
--- /dev/null
+++ b/src/lib/form/form-definition.model.ts
@@ -0,0 +1,8 @@
+import { FormButton } from './form-button.model'
+import { FormInputModel } from './form-input.model'
+
+export interface FormDefinition {
+    readonly buttons: ReadonlyArray<FormButton>
+    readonly inputs: ReadonlyArray<FormInputModel>
+    readonly title: string
+}
diff --git a/src/lib/form/form-functions/form.functions.ts b/src/lib/form/form-functions/form.functions.ts
new file mode 100644
index 000000000..3f701c30e
--- /dev/null
+++ b/src/lib/form/form-functions/form.functions.ts
@@ -0,0 +1,117 @@
+import { Dispatch, FormEvent, SetStateAction } from 'react'
+import { toast } from 'react-toastify'
+
+import { FormInputModel } from '../form-input.model'
+
+export enum ErrorMessage {
+    save = 'Error on save',
+    submit = 'Error on submit',
+}
+
+export function getInputElement(formElements: HTMLFormControlsCollection, fieldName: string): HTMLInputElement {
+    return formElements.namedItem(fieldName) as HTMLInputElement
+}
+
+export function getInputModel(inputs: ReadonlyArray<FormInputModel>, fieldName: string): FormInputModel {
+
+    const formField: FormInputModel | undefined = inputs.find(input => input.name === fieldName)
+
+    // if we can't find the input we have a problem
+    if (!formField) {
+        throw new Error(`There is no input definition for the ${fieldName} field`)
+    }
+
+    return formField
+}
+
+export function initializeValues<T>(inputs: ReadonlyArray<FormInputModel>, formValues?: T): void {
+    inputs
+        .filter(input => !input.dirtyOrTouched)
+        .forEach(input => {
+            input.value = !!(formValues as any)?.hasOwnProperty(input.name)
+                ? (formValues as any)[input.name]
+                : undefined
+        })
+}
+
+export function reset(inputs: ReadonlyArray<FormInputModel>, formValue?: any): void {
+    inputs
+        .forEach(inputDef => {
+            inputDef.dirtyOrTouched = false
+            inputDef.error = undefined
+            inputDef.value = formValue?.[inputDef.name]
+        })
+}
+
+export async function submitAsync<T, R>(
+    event: FormEvent<HTMLFormElement>,
+    inputs: ReadonlyArray<FormInputModel>,
+    formName: string,
+    formValue: T,
+    save: (value: T) => Promise<R>,
+    setDisableButton: Dispatch<SetStateAction<boolean>>,
+): Promise<void> {
+
+    event.preventDefault()
+    setDisableButton(true)
+
+    // if there are no dirty fields, display a message and stop submitting
+    const dirty: FormInputModel | undefined = inputs.find(fieldDef => !!fieldDef.dirtyOrTouched)
+    if (!dirty) {
+        toast.info('No changes detected.')
+        return
+    }
+
+    // get the form values so we can validate them
+    const formValues: HTMLFormControlsCollection = (event.target as HTMLFormElement).elements
+
+    // if there are any validation errors, display a message and stop submitting
+    const isValid: boolean = await validateAsync(inputs, formValues, true)
+    if (!isValid) {
+        toast.error('Changes could not be saved. Please resolve errors.')
+        return Promise.reject(ErrorMessage.submit)
+    }
+
+    // set the values for the updated value
+    inputs.forEach(field => (formValue as any)[field.name] = field.value)
+
+    return save(formValue)
+        .then(() => {
+            toast.success(`Your ${formName} has been saved.`)
+        })
+        .catch(error => {
+            toast.error(error.response?.data?.result?.content || error.message || error)
+            return Promise.reject(ErrorMessage.save)
+        })
+}
+
+export async function validateAndUpdateAsync(event: FormEvent<HTMLFormElement>, inputs: ReadonlyArray<FormInputModel>): Promise<boolean> {
+
+    const input: HTMLInputElement = (event.target as HTMLInputElement)
+    // set the input def info
+    const inputDef: FormInputModel = getInputModel(inputs, input.name)
+    inputDef.dirtyOrTouched = true
+    inputDef.value = input.value
+
+    // validate the form
+    const formElements: HTMLFormControlsCollection = (input.form as HTMLFormElement).elements
+    const isValid: boolean = await validateAsync(inputs, formElements)
+
+    return isValid
+}
+
+async function validateAsync(inputs: ReadonlyArray<FormInputModel>, formElements: HTMLFormControlsCollection, formDirty?: boolean): Promise<boolean> {
+    const errors: ReadonlyArray<FormInputModel> = inputs
+        .filter(formInputDef => {
+            formInputDef.error = undefined
+            formInputDef.dirtyOrTouched = formInputDef.dirtyOrTouched || !!formDirty
+            formInputDef.validateOnChange
+                ?.forEach(async validator => {
+                    if (!formInputDef.error) {
+                        formInputDef.error = await validator(formInputDef.value, formElements, formInputDef.dependentField)
+                    }
+                })
+            return !!formInputDef.error
+        })
+    return !errors.length
+}
diff --git a/src/lib/form/form-functions/index.ts b/src/lib/form/form-functions/index.ts
new file mode 100644
index 000000000..fbce4c278
--- /dev/null
+++ b/src/lib/form/form-functions/index.ts
@@ -0,0 +1,9 @@
+export {
+    ErrorMessage as FormErrorMessage,
+    getInputElement as formGetInput,
+    getInputModel as formGetInputModel,
+    initializeValues as formInitializeValues,
+    reset as formReset,
+    submitAsync as formSubmitAsync,
+    validateAndUpdateAsync as formValidateAndUpdateAsync,
+} from './form.functions'
diff --git a/src/lib/form/form-input.model.ts b/src/lib/form/form-input.model.ts
new file mode 100644
index 000000000..2d4c091c5
--- /dev/null
+++ b/src/lib/form/form-input.model.ts
@@ -0,0 +1,18 @@
+import { ValidatorFn } from './validator-functions'
+
+export interface FormInputModel {
+    readonly dependentField?: string
+    dirtyOrTouched?: boolean
+    disabled?: boolean
+    error?: string
+    readonly hint?: string
+    readonly label?: string
+    readonly name: string
+    readonly notTabbable?: boolean
+    readonly placeholder?: string
+    readonly preventAutocomplete?: boolean
+    readonly type: 'password' | 'text' | 'textarea'
+    readonly validateOnBlur?: ValidatorFn
+    readonly validateOnChange?: ValidatorFn
+    value?: string
+}
diff --git a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.module.scss b/src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.module.scss
similarity index 91%
rename from src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.module.scss
rename to src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.module.scss
index 698a2e6ee..9cfc7d4e2 100644
--- a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.module.scss
+++ b/src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.module.scss
@@ -1,21 +1,21 @@
-@import '../../styles';
+@import '../../../styles';
 
 $form-pad-top: calc($pad-md - $border);
 $border-xs: 1px;
 $error-line-height: 14px;
 
 .form-field-wrapper {
-    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding-bottom: $pad-md;
 
     .form-field {
+        flex: 1;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-        padding: $pad-sm $form-pad-top;
+        padding: $pad-sm $form-pad-top $border-xs $form-pad-top;
         height: calc($pad-xxl * 2);
         background: $tc-white;
         border: $border-xs solid $black-40;
@@ -35,7 +35,7 @@ $error-line-height: 14px;
         &.focus,
         &.form-field-error {
             border-width: $border;
-            padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs);
+            padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs) 0 calc($form-pad-top - $border-xs);
         }
 
         &.disabled {
@@ -54,6 +54,8 @@ $error-line-height: 14px;
         }
 
         .label {
+            display: flex;
+            flex-direction: column;
             top: calc(50% - $form-pad-top/2);
             color: $turq-160;
             margin-bottom: $pad-xs;
diff --git a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.test.tsx b/src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.test.tsx
similarity index 100%
rename from src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.test.tsx
rename to src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.test.tsx
diff --git a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx b/src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.tsx
similarity index 80%
rename from src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx
rename to src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.tsx
index ea6f99d37..f5f163c01 100644
--- a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx
+++ b/src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.tsx
@@ -1,25 +1,27 @@
 import classNames from 'classnames'
 import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
 
-import { IconSolid } from '../../svgs'
+import { IconSolid } from '../../../svgs'
 
-import styles from './Form-Field-Wrapper.module.scss'
+import styles from './FormFieldWrapper.module.scss'
+
+export const optionalHint: string = '(optional)'
 
 interface FormFieldWrapperProps {
-    children: ReactNode
-    dirty?: boolean
-    disabled: boolean
-    error?: string
-    hint?: string
-    label: string
-    name: string
+    readonly children: ReactNode
+    readonly dirtyOrTouched?: boolean
+    readonly disabled: boolean
+    readonly error?: string
+    readonly hint?: string
+    readonly label: string
+    readonly name: string
 }
 
 const FormFieldWrapper: FC<FormFieldWrapperProps> = (props: FormFieldWrapperProps) => {
 
     const [focusStyle, setFocusStyle]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()
 
-    const showError: boolean = !!props.error && !!props.dirty
+    const showError: boolean = !!props.error && !!props.dirtyOrTouched
     const formFieldClasses: string = classNames(
         styles['form-field'],
         props.disabled ? styles.disabled : undefined,
diff --git a/src/lib/form/form-input/form-field-wrapper/index.ts b/src/lib/form/form-input/form-field-wrapper/index.ts
new file mode 100644
index 000000000..e33bae138
--- /dev/null
+++ b/src/lib/form/form-input/form-field-wrapper/index.ts
@@ -0,0 +1,2 @@
+export { default as FormFieldWrapper } from './FormFieldWrapper'
+export { optionalHint as inputOptionalHint } from './FormFieldWrapper'
diff --git a/src/lib/form/form-input/index.ts b/src/lib/form/form-input/index.ts
new file mode 100644
index 000000000..196141221
--- /dev/null
+++ b/src/lib/form/form-input/index.ts
@@ -0,0 +1,3 @@
+export { inputOptionalHint } from './form-field-wrapper'
+export * from './input-text'
+export * from './input-textarea'
diff --git a/src/lib/form-elements/text-input/Text-Input.module.scss b/src/lib/form/form-input/input-text/InputText.module.scss
similarity index 94%
rename from src/lib/form-elements/text-input/Text-Input.module.scss
rename to src/lib/form/form-input/input-text/InputText.module.scss
index 6f36e4e9d..b1fe857f7 100644
--- a/src/lib/form-elements/text-input/Text-Input.module.scss
+++ b/src/lib/form/form-input/input-text/InputText.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles';
+@import '../../../styles';
 
 .form-input-text {
     @extend .body-small;
diff --git a/src/lib/form/form-input/input-text/InputText.test.tsx b/src/lib/form/form-input/input-text/InputText.test.tsx
new file mode 100644
index 000000000..0d1a3f313
--- /dev/null
+++ b/src/lib/form/form-input/input-text/InputText.test.tsx
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<InputText /> ', () => {
+
+    test('it should display the InputText', () => { })
+})
diff --git a/src/lib/form/form-input/input-text/InputText.tsx b/src/lib/form/form-input/input-text/InputText.tsx
new file mode 100644
index 000000000..3cad3ccc3
--- /dev/null
+++ b/src/lib/form/form-input/input-text/InputText.tsx
@@ -0,0 +1,54 @@
+import { FC, FocusEvent } from 'react'
+
+import { ValidatorFn } from '../../validator-functions'
+import { FormFieldWrapper } from '../form-field-wrapper'
+
+import styles from './InputText.module.scss'
+
+export const optionalHint: string = '(optional)'
+
+interface InputTextProps {
+    readonly dirtyOrTouched?: boolean
+    readonly disabled?: boolean
+    readonly error?: string
+    readonly hint?: string
+    readonly label?: string
+    readonly name: string
+    readonly onBlur: (event: FocusEvent<HTMLInputElement>) => void
+    readonly onFocus: (event: FocusEvent<HTMLInputElement>) => void
+    readonly placeholder?: string
+    readonly preventAutocomplete?: boolean
+    readonly tabIndex: number
+    readonly type: 'password' | 'text'
+    readonly validateOnBlur?: ValidatorFn
+    readonly value?: string | number
+}
+
+const InputText: FC<InputTextProps> = (props: InputTextProps) => {
+
+    return (
+        <FormFieldWrapper
+            dirtyOrTouched={!!props.dirtyOrTouched}
+            disabled={!!props.disabled}
+            error={props.error}
+            hint={props.hint}
+            label={props.label || props.name}
+            name={props.name}
+        >
+            <input
+                autoComplete={!!props.preventAutocomplete ? 'off' : undefined}
+                className={styles['form-input-text']}
+                defaultValue={props.value}
+                disabled={!!props.disabled}
+                onBlur={props.onBlur}
+                onFocus={props.onFocus}
+                name={props.name}
+                placeholder={props.placeholder}
+                tabIndex={props.tabIndex}
+                type={props.type || 'text'}
+            />
+        </FormFieldWrapper>
+    )
+}
+
+export default InputText
diff --git a/src/lib/form/form-input/input-text/index.ts b/src/lib/form/form-input/input-text/index.ts
new file mode 100644
index 000000000..c33b7c422
--- /dev/null
+++ b/src/lib/form/form-input/input-text/index.ts
@@ -0,0 +1,3 @@
+export {
+    default as InputText,
+} from './InputText'
diff --git a/src/lib/form/form-input/input-textarea/InputTextarea.module.scss b/src/lib/form/form-input/input-textarea/InputTextarea.module.scss
new file mode 100644
index 000000000..9ac5b1795
--- /dev/null
+++ b/src/lib/form/form-input/input-textarea/InputTextarea.module.scss
@@ -0,0 +1,12 @@
+@import '../../../styles';
+
+.form-input-textarea {
+    @include font-roboto;
+    @extend .body-small;
+    color: $black-60;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    resize: vertical;
+    margin-left: calc(-1 * $border)
+}
diff --git a/src/lib/form/form-input/input-textarea/InputTextarea.test.tsx b/src/lib/form/form-input/input-textarea/InputTextarea.test.tsx
new file mode 100644
index 000000000..463dc62c9
--- /dev/null
+++ b/src/lib/form/form-input/input-textarea/InputTextarea.test.tsx
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<InputTextarea /> ', () => {
+
+    test('it should display the InputTextarea', () => { })
+})
diff --git a/src/lib/form/form-input/input-textarea/InputTextarea.tsx b/src/lib/form/form-input/input-textarea/InputTextarea.tsx
new file mode 100644
index 000000000..d36dc8ae8
--- /dev/null
+++ b/src/lib/form/form-input/input-textarea/InputTextarea.tsx
@@ -0,0 +1,49 @@
+import { FC, FocusEvent } from 'react'
+
+import { ValidatorFn } from '../../validator-functions'
+import { FormFieldWrapper } from '../form-field-wrapper'
+
+import styles from './InputTextarea.module.scss'
+
+interface InputTextareaProps {
+    readonly dirtyOrTouched?: boolean
+    readonly disabled?: boolean
+    readonly error?: string
+    readonly hint?: string
+    readonly label?: string
+    readonly name: string
+    readonly onBlur: (event: FocusEvent<HTMLTextAreaElement>) => void
+    readonly onFocus: (event: FocusEvent<HTMLTextAreaElement>) => void
+    readonly placeholder?: string
+    readonly preventAutocomplete?: boolean
+    readonly tabIndex: number
+    readonly validateOnBlur?: ValidatorFn
+    readonly value?: string | number
+}
+
+const InputTextarea: FC<InputTextareaProps> = (props: InputTextareaProps) => {
+    return (
+        <FormFieldWrapper
+            dirtyOrTouched={!!props.dirtyOrTouched}
+            disabled={!!props.disabled}
+            error={props.error}
+            hint={props.hint}
+            label={props.label || props.name}
+            name={props.name}
+        >
+            <textarea
+                autoComplete={!!props.preventAutocomplete ? 'off' : undefined}
+                className={styles['form-input-textarea']}
+                defaultValue={props.value}
+                disabled={!!props.disabled}
+                name={props.name}
+                onBlur={props.onBlur}
+                onFocus={props.onFocus}
+                placeholder={props.placeholder}
+                tabIndex={props.tabIndex}
+            />
+        </FormFieldWrapper>
+    )
+}
+
+export default InputTextarea
diff --git a/src/lib/form/form-input/input-textarea/index.ts b/src/lib/form/form-input/input-textarea/index.ts
new file mode 100644
index 000000000..b20fe11ef
--- /dev/null
+++ b/src/lib/form/form-input/input-textarea/index.ts
@@ -0,0 +1,3 @@
+export {
+    default as InputTextarea,
+} from './InputTextarea'
diff --git a/src/lib/form/index.ts b/src/lib/form/index.ts
new file mode 100644
index 000000000..c35d3876d
--- /dev/null
+++ b/src/lib/form/index.ts
@@ -0,0 +1,10 @@
+export { default as Form } from './Form'
+export * from './form-button.model'
+export * from './form-definition.model'
+export * from './form-input.model'
+export {
+    formGetInputModel,
+    formReset,
+} from './form-functions'
+export { inputOptionalHint } from './form-input'
+export * from './validator-functions'
diff --git a/src/lib/form-elements/validator-functions/index.ts b/src/lib/form/validator-functions/index.ts
similarity index 66%
rename from src/lib/form-elements/validator-functions/index.ts
rename to src/lib/form/validator-functions/index.ts
index 2fa88aaa4..981143aa5 100644
--- a/src/lib/form-elements/validator-functions/index.ts
+++ b/src/lib/form/validator-functions/index.ts
@@ -5,4 +5,8 @@ export {
     password as validatorPassword,
     required as validatorRequired,
     requiredIfOther as validatorRequiredIfOther,
+    sslUrl as validatorSslUrl,
 } from './validator.functions'
+export
+    // tslint:disable-next-line: no-unused-expression
+type { ValidatorFn } from './validator.functions'
diff --git a/src/lib/form-elements/validator-functions/validator.functions.ts b/src/lib/form/validator-functions/validator.functions.ts
similarity index 88%
rename from src/lib/form-elements/validator-functions/validator.functions.ts
rename to src/lib/form/validator-functions/validator.functions.ts
index b0809664e..498c9473e 100644
--- a/src/lib/form-elements/validator-functions/validator.functions.ts
+++ b/src/lib/form/validator-functions/validator.functions.ts
@@ -90,6 +90,26 @@ export function requiredIfOther(value: string | undefined, formElements?: HTMLFo
     return `required when ${getOtherFieldLabel(otherField, otherFieldName)} is not blank`
 }
 
+export function sslUrl(value: string | undefined): string | undefined {
+
+    // if there's no value, there's nothing to check
+    if (!value) {
+        return undefined
+    }
+
+    try {
+
+        // require https
+        return new URL(value).protocol !== 'https:' ? 'links must start with https' : undefined
+
+    } catch {
+        return 'invalid url'
+    }
+}
+
+export type ValidatorFn = Array<(value: string | undefined, formValues?: HTMLFormControlsCollection, otherField?: string)
+    => string | undefined | Promise<string | undefined>>
+
 function getOtherField(formElements?: HTMLFormControlsCollection, otherFieldName?: string): HTMLInputElement {
 
     // if there are no form values or an other field name, we have a problem
diff --git a/src/lib/functions/user-functions/user-store/index.ts b/src/lib/functions/user-functions/user-store/index.ts
index 193f0a408..f0c3dd807 100644
--- a/src/lib/functions/user-functions/user-store/index.ts
+++ b/src/lib/functions/user-functions/user-store/index.ts
@@ -1,2 +1,4 @@
 export { patchAsync as userPatchAsync } from './user-xhr.store'
-export type { UserPatchRequest } from './user-xhr.store'
+export
+// tslint:disable-next-line: no-unused-expression
+type { UserPatchRequest } from './user-xhr.store'
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5f954fdca..5fba22a3c 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,7 +1,7 @@
 export * from './avatar'
 export * from './button'
 export * from './content-layout'
-export * from './form-elements'
+export * from './form'
 export * from './global-config.model'
 export * from './profile-provider'
 export {
diff --git a/src/lib/profile-provider/index.ts b/src/lib/profile-provider/index.ts
index 8ae7edecf..69a4938f8 100644
--- a/src/lib/profile-provider/index.ts
+++ b/src/lib/profile-provider/index.ts
@@ -1,6 +1,6 @@
 export * from './password-update-request.model'
 export * from './profile-context-data.model'
-export { default as ProfileContext, defaultProfileContextData } from './profile.context'
+export { default as profileContext, defaultProfileContextData } from './profile.context'
 export { ProfileProvider } from './profile.provider'
 export * from './user-profile.model'
 export * from './user-profile-update-request.model'
diff --git a/src/lib/profile-provider/profile.context.tsx b/src/lib/profile-provider/profile.context.tsx
index 770bdd071..b46ea8180 100644
--- a/src/lib/profile-provider/profile.context.tsx
+++ b/src/lib/profile-provider/profile.context.tsx
@@ -8,6 +8,6 @@ export const defaultProfileContextData: ProfileContextData = {
     updateProfile: () => Promise.resolve(undefined),
 }
 
-const ProfileContext: Context<ProfileContextData> = createContext(defaultProfileContextData)
+const profileContext: Context<ProfileContextData> = createContext(defaultProfileContextData)
 
-export default ProfileContext
+export default profileContext
diff --git a/src/lib/profile-provider/profile.provider.tsx b/src/lib/profile-provider/profile.provider.tsx
index 8b948656f..daf70ccc9 100644
--- a/src/lib/profile-provider/profile.provider.tsx
+++ b/src/lib/profile-provider/profile.provider.tsx
@@ -5,13 +5,13 @@ import { userUpdatePasswordAsync } from '../functions'
 import { PasswordUpdateRequest } from './password-update-request.model'
 import { ProfileContextData } from './profile-context-data.model'
 import { profileGetAsync, profileUpdateAsync } from './profile-functions'
-import { default as ProfileContext, defaultProfileContextData } from './profile.context'
+import { default as profileContext, defaultProfileContextData } from './profile.context'
 import { UserProfileUpdateRequest } from './user-profile-update-request.model'
 import { UserProfile } from './user-profile.model'
 
 export const ProfileProvider: FC<{ children: ReactNode }> = ({ children }: { children: ReactNode }) => {
 
-    const [profileContext, setProfileContext]: [ProfileContextData, Dispatch<SetStateAction<ProfileContextData>>]
+    const [profileContextData, setProfileContextData]: [ProfileContextData, Dispatch<SetStateAction<ProfileContextData>>]
         = useState<ProfileContextData>(defaultProfileContextData)
 
     function updatePassword(userId: number, request: PasswordUpdateRequest): Promise<void> {
@@ -33,13 +33,13 @@ export const ProfileProvider: FC<{ children: ReactNode }> = ({ children }: { chi
         }
 
         return profileUpdateAsync(profile.handle, request)
-            .then(() => setProfileContext(updatedContext))
+            .then(() => setProfileContextData(updatedContext))
     }
 
     useEffect(() => {
 
         // if our profile is already initialized, no need to continue
-        if (profileContext.initialized) {
+        if (profileContextData.initialized) {
             return
         }
 
@@ -51,15 +51,15 @@ export const ProfileProvider: FC<{ children: ReactNode }> = ({ children }: { chi
                 updatePassword,
                 updateProfile,
             }
-            setProfileContext(contextData)
+            setProfileContextData(contextData)
         }
 
         getAndSetProfileAsync()
     })
 
     return (
-        <ProfileContext.Provider value={profileContext}>
+        <profileContext.Provider value={profileContextData}>
             {children}
-        </ProfileContext.Provider>
+        </profileContext.Provider>
     )
 }
diff --git a/src/lib/route-provider/index.ts b/src/lib/route-provider/index.ts
index 7dc4508a9..682dd147b 100644
--- a/src/lib/route-provider/index.ts
+++ b/src/lib/route-provider/index.ts
@@ -1,5 +1,5 @@
 export * from './platform-route.model'
 export * from './route-context-data.model'
-export { default as RouteContext } from './route.context'
+export { default as routeContext } from './route.context'
 export * from './route.provider'
 export * from './route.utils'
diff --git a/src/lib/route-provider/route.context.tsx b/src/lib/route-provider/route.context.tsx
index f72db59c0..6a379c742 100644
--- a/src/lib/route-provider/route.context.tsx
+++ b/src/lib/route-provider/route.context.tsx
@@ -11,6 +11,6 @@ export const defaultRouteContextData: RouteContextData = {
     utilsRoutes: [],
 }
 
-const RouteContext: Context<RouteContextData> = createContext(defaultRouteContextData)
+const routeContext: Context<RouteContextData> = createContext(defaultRouteContextData)
 
-export default RouteContext
+export default routeContext
diff --git a/src/lib/route-provider/route.provider.tsx b/src/lib/route-provider/route.provider.tsx
index 20c8f7b42..f3330a37b 100644
--- a/src/lib/route-provider/route.provider.tsx
+++ b/src/lib/route-provider/route.provider.tsx
@@ -3,7 +3,7 @@ import { Route } from 'react-router-dom'
 
 import { PlatformRoute } from './platform-route.model'
 import { RouteContextData } from './route-context-data.model'
-import { default as RouteContext, defaultRouteContextData } from './route.context'
+import { default as routeContext, defaultRouteContextData } from './route.context'
 
 interface RouteProviderProps {
     children: ReactNode
@@ -13,7 +13,7 @@ interface RouteProviderProps {
 
 export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps) => {
 
-    const [routeContext, setRouteContext]: [RouteContextData, Dispatch<SetStateAction<RouteContextData>>]
+    const [routeContextData, setRouteContextData]: [RouteContextData, Dispatch<SetStateAction<RouteContextData>>]
         = useState<RouteContextData>(defaultRouteContextData)
 
     useEffect(() => {
@@ -37,7 +37,7 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
                 toolsRoutes,
                 utilsRoutes,
             }
-            setRouteContext(contextData)
+            setRouteContextData(contextData)
         }
 
         function getChildren(parent: string): Array<PlatformRoute> {
@@ -63,8 +63,8 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
     ])
 
     return (
-        <RouteContext.Provider value={routeContext}>
+        <routeContext.Provider value={routeContextData}>
             {props.children}
-        </RouteContext.Provider>
+        </routeContext.Provider>
     )
 }
diff --git a/src/lib/styles/_buttons.scss b/src/lib/styles/_buttons.scss
index 462b1363b..4308aac9d 100644
--- a/src/lib/styles/_buttons.scss
+++ b/src/lib/styles/_buttons.scss
@@ -3,3 +3,8 @@ a {
     color: inherit;
     text-decoration: none;
 }
+
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+}
diff --git a/src/lib/styles/_forms.scss b/src/lib/styles/_forms.scss
deleted file mode 100644
index 874a8fc53..000000000
--- a/src/lib/styles/_forms.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.form-button-container {
-    display: flex;
-    justify-content: flex-end;
-}
diff --git a/src/lib/styles/index.scss b/src/lib/styles/index.scss
index e91ad09df..7668f1063 100644
--- a/src/lib/styles/index.scss
+++ b/src/lib/styles/index.scss
@@ -3,7 +3,6 @@
 @import 'breakpoints';
 @import 'buttons';
 @import 'fonts';
-@import 'forms';
 @import 'icons';
 @import 'layout';
 @import 'palette';
diff --git a/src/tools/design-lib/DesignLib.tsx b/src/tools/design-lib/DesignLib.tsx
index 22837bb5b..91e68fe3a 100644
--- a/src/tools/design-lib/DesignLib.tsx
+++ b/src/tools/design-lib/DesignLib.tsx
@@ -1,7 +1,7 @@
 import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
-import { ContentLayout, RouteContext, RouteContextData } from '../../lib'
+import { ContentLayout, routeContext, RouteContextData } from '../../lib'
 
 import styles from './DesignLib.module.scss'
 
@@ -9,7 +9,7 @@ export const toolTitle: string = 'Design Library'
 
 const DesignLib: FC<{}> = () => {
 
-    const { getChildRoutes }: RouteContextData = useContext(RouteContext)
+    const { getChildRoutes }: RouteContextData = useContext(routeContext)
 
     return (
         <ContentLayout classNames={styles['design-lib']} title={toolTitle}>
diff --git a/src/tools/design-lib/index.ts b/src/tools/design-lib/index.ts
new file mode 100644
index 000000000..b2003d267
--- /dev/null
+++ b/src/tools/design-lib/index.ts
@@ -0,0 +1 @@
+export * from './design-lib.routes'
diff --git a/src/tools/self-service/index.ts b/src/tools/self-service/index.ts
new file mode 100644
index 000000000..cc191ac55
--- /dev/null
+++ b/src/tools/self-service/index.ts
@@ -0,0 +1 @@
+export * from './self-service.routes'
diff --git a/src/tools/tool/Tool.module.scss b/src/tools/tool/Tool.module.scss
deleted file mode 100644
index 5cafaf58a..000000000
--- a/src/tools/tool/Tool.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.tool {
-
-}
diff --git a/src/tools/tool/Tool.tsx b/src/tools/tool/Tool.tsx
deleted file mode 100644
index c219656e4..000000000
--- a/src/tools/tool/Tool.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FC } from 'react'
-
-import { ContentLayout } from '../../lib'
-
-import styles from './Tool.module.scss'
-
-export const toolTitle: string = 'Tool'
-
-const Tool: FC<{}> = () => <ContentLayout classNames={styles.tool} title={toolTitle} />
-
-export default Tool
diff --git a/src/tools/tool/tool.routes.tsx b/src/tools/tool/tool.routes.tsx
deleted file mode 100644
index c629236fd..000000000
--- a/src/tools/tool/tool.routes.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { PlatformRoute } from '../../lib'
-
-import Tool, { toolTitle } from './Tool'
-
-export const toolRoutes: Array<PlatformRoute> = [
-    {
-        children: [],
-        element: <Tool />,
-        enabled: true,
-        route: '/tool',
-        title: toolTitle,
-    },
-]
diff --git a/src/tools/tools.routes.ts b/src/tools/tools.routes.ts
index 607f9e312..fea3b2049 100644
--- a/src/tools/tools.routes.ts
+++ b/src/tools/tools.routes.ts
@@ -1,15 +1,15 @@
 import { PlatformRoute } from '../lib'
 
-import { designLibRoutes } from './design-lib/design-lib.routes'
-import { selfServiceRoutes } from './self-service/self-service.routes'
-import { toolRoutes as toolToolRoutes } from './tool/tool.routes'
+import { designLibRoutes } from './design-lib/'
+import { selfServiceRoutes } from './self-service'
+import { workIntakeRoutes } from './work-intake'
 
 const toolRoutes: Array<PlatformRoute> = [
     // NOTE: these will be displayed in the order they are defined in this array
     // TODO: support ordering
     ...designLibRoutes,
     ...selfServiceRoutes,
-    ...toolToolRoutes,
+    ...workIntakeRoutes,
 ]
 
 export default toolRoutes
diff --git a/src/tools/work-intake/WorkIntake.module.scss b/src/tools/work-intake/WorkIntake.module.scss
new file mode 100644
index 000000000..b5eba7e52
--- /dev/null
+++ b/src/tools/work-intake/WorkIntake.module.scss
@@ -0,0 +1,3 @@
+.work-intake {
+
+}
diff --git a/src/tools/tool/Tool.test.tsx b/src/tools/work-intake/WorkIntake.test.tsx
similarity index 72%
rename from src/tools/tool/Tool.test.tsx
rename to src/tools/work-intake/WorkIntake.test.tsx
index a3d188bbb..c5c0d7658 100644
--- a/src/tools/tool/Tool.test.tsx
+++ b/src/tools/work-intake/WorkIntake.test.tsx
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('<Tool />', () => {
+describe('<WorkIntake />', () => {
 
     test('it should render the title prop', () => {})
 })
diff --git a/src/tools/work-intake/WorkIntake.tsx b/src/tools/work-intake/WorkIntake.tsx
new file mode 100644
index 000000000..85d0e4482
--- /dev/null
+++ b/src/tools/work-intake/WorkIntake.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react'
+
+import { ContentLayout, Form } from '../../lib'
+
+import { workIntakeDef } from './work-intake-form.config'
+import styles from './WorkIntake.module.scss'
+
+export const toolTitle: string = 'Work'
+
+const WorkIntake: FC<{}> = () => {
+
+    function requestGenerator(): any { // TODO
+        return {}
+    }
+
+    function save(): any { // TODO
+        return {}
+    }
+
+    return (
+        <ContentLayout classNames={styles['work-intake']} title={toolTitle}>
+            <Form
+                formDef={workIntakeDef}
+                requestGenerator={requestGenerator}
+                resetOnError={false}
+                save={save}
+            />
+        </ContentLayout>
+    )
+}
+
+export default WorkIntake
diff --git a/src/tools/work-intake/index.ts b/src/tools/work-intake/index.ts
new file mode 100644
index 000000000..244e35eb5
--- /dev/null
+++ b/src/tools/work-intake/index.ts
@@ -0,0 +1 @@
+export * from './work-intake.routes'
diff --git a/src/tools/work-intake/work-intake-form.config.ts b/src/tools/work-intake/work-intake-form.config.ts
new file mode 100644
index 000000000..0ccb9a691
--- /dev/null
+++ b/src/tools/work-intake/work-intake-form.config.ts
@@ -0,0 +1,49 @@
+import {
+    FormDefinition,
+    inputOptionalHint,
+    validatorRequired,
+    validatorSslUrl,
+} from '../../lib'
+
+export const workIntakeTitle: string = 'Define your work'
+
+export const workIntakeDef: FormDefinition = {
+    buttons: [
+        {
+            buttonStyle: 'secondary',
+            isSave: true,
+            label: 'Submit',
+            size: 'xl',
+            type: 'submit',
+        },
+    ],
+    inputs: [
+        {
+            label: 'Project Title',
+            name: 'title',
+            type: 'text',
+            validateOnChange: [
+                validatorRequired,
+            ],
+        },
+        {
+            hint: inputOptionalHint,
+            label: 'Share your data',
+            name: 'data',
+            placeholder: 'https://...',
+            type: 'text',
+            validateOnChange: [
+                validatorSslUrl,
+            ],
+        },
+        {
+            label: 'What would you like to learn?',
+            name: 'description',
+            type: 'textarea',
+            validateOnChange: [
+                validatorRequired,
+            ],
+        },
+    ],
+    title: workIntakeTitle,
+}
diff --git a/src/tools/work-intake/work-intake.routes.tsx b/src/tools/work-intake/work-intake.routes.tsx
new file mode 100644
index 000000000..fb515da3b
--- /dev/null
+++ b/src/tools/work-intake/work-intake.routes.tsx
@@ -0,0 +1,13 @@
+import { PlatformRoute } from '../../lib'
+
+import WorkIntake, { toolTitle } from './WorkIntake'
+
+export const workIntakeRoutes: Array<PlatformRoute> = [
+    {
+        children: [],
+        element: <WorkIntake />,
+        enabled: true,
+        route: '/work-intake',
+        title: toolTitle,
+    },
+]
diff --git a/src/utils/settings/Settings.tsx b/src/utils/settings/Settings.tsx
index bc707b168..92045a76c 100644
--- a/src/utils/settings/Settings.tsx
+++ b/src/utils/settings/Settings.tsx
@@ -1,12 +1,12 @@
 import { FC, useContext } from 'react'
-import { NavigateFunction, Outlet, Routes, useNavigate } from 'react-router-dom'
+import { Outlet, Routes } from 'react-router-dom'
 
 import {
     authUrlLogin,
     ContentLayout,
-    ProfileContext,
+    profileContext,
     ProfileContextData,
-    RouteContext,
+    routeContext,
     RouteContextData,
     routeRoot,
 } from '../../lib'
@@ -16,16 +16,18 @@ export const utilTitle: string = 'Settings'
 
 const Settings: FC<{}> = () => {
 
-    const profileContext: ProfileContextData = useContext(ProfileContext)
-    const { profile }: ProfileContextData = profileContext
+    const profileContextData: ProfileContextData = useContext(profileContext)
+    const { profile, initialized }: ProfileContextData = profileContextData
 
-    const { getChildRoutes }: RouteContextData = useContext(RouteContext)
+    const { getChildRoutes }: RouteContextData = useContext(routeContext)
 
-    const navigate: NavigateFunction = useNavigate()
-
-    // if we don't have a profile, navigate to the login page
+    // TODO: create an auth provider
+    // if we don't have a profile, don't show the page until it's initialized
     if (!profile) {
-        navigate(authUrlLogin(routeRoot))
+        // if we're already initialized, navigate to the login page
+        if (initialized) {
+            window.location.href = authUrlLogin(routeRoot)
+        }
         return <></>
     }
 
diff --git a/src/utils/settings/password-reset/PasswordReset.tsx b/src/utils/settings/password-reset/PasswordReset.tsx
index 89bca11c3..8696fbca5 100644
--- a/src/utils/settings/password-reset/PasswordReset.tsx
+++ b/src/utils/settings/password-reset/PasswordReset.tsx
@@ -1,111 +1,53 @@
-import { Dispatch, FC, FormEvent, SetStateAction, useContext, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
 import {
-    Button,
+    Form,
     FormDefinition,
-    formRenderTextInput,
-    formReset,
-    formSubmit,
-    formValidateAndUpdate,
+    formGetInputModel,
+    FormInputModel,
     PasswordUpdateRequest,
-    ProfileContext,
+    profileContext,
     ProfileContextData,
     UserProfile,
 } from '../../../lib'
 
 import { PasswordFieldName, passwordFormDef } from './password-reset-form.config'
-import styles from './PasswordReset.module.scss'
-
-export const passwordFormTitle: string = 'Reset Password'
-
-interface PasswordUpdateForm {
-    confirmPasssword?: string
-    newPassword?: string
-    password?: string
-}
 
 interface PasswordUpdateProps {
-    profilePath: string
+    readonly profilePath: string
 }
 
-// TODO: further genericize forms so we're not repeating all this
 const PasswordReset: FC<PasswordUpdateProps> = (props: PasswordUpdateProps) => {
 
-    const profileContext: ProfileContextData = useContext(ProfileContext)
-    const { profile, updatePassword }: ProfileContextData = profileContext
-
-    const [disableButton, setDisableSave]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(true)
+    const profileContextData: ProfileContextData = useContext(profileContext)
+    const { profile, updatePassword }: ProfileContextData = profileContextData
 
-    const [passwordForm, setPasswordForm]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
+    const [passwordForm]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
         = useState<FormDefinition>(passwordFormDef)
 
-    // create the copy of the profile
-    const safeProfile: UserProfile = {
-        ...(profile as UserProfile),
-    }
-    const passwordFormDetail: PasswordUpdateForm = {}
-
-    function onChange(event: FormEvent<HTMLFormElement>): void {
-        const isValid: boolean = formValidateAndUpdate(event, passwordForm)
-        setPasswordForm({ ...passwordForm })
-        setDisableSave(!isValid)
-    }
+    // set the profile path on the button
+    passwordForm.buttons[0].route = props.profilePath
 
-    function onReset(): void {
-        setPasswordForm({ ...passwordForm })
-        formReset(passwordFormDef)
-    }
-
-    function onSubmit(event: FormEvent<HTMLFormElement>): void {
-        const request: PasswordUpdateRequest = {
-            newPassword: passwordFormDetail.newPassword as string,
-            password: passwordFormDetail.password as string,
+    function requestGenerator(inputs: ReadonlyArray<FormInputModel>): PasswordUpdateRequest {
+        const password: string = formGetInputModel(inputs, PasswordFieldName.currentPassword).value as string
+        const newPassword: string = formGetInputModel(inputs, PasswordFieldName.newPassword).value as string
+        return {
+            newPassword,
+            password,
         }
-        formSubmit<PasswordUpdateRequest, void>(event, passwordForm, passwordFormTitle, request, save, setDisableSave)
-        setPasswordForm({ ...passwordForm })
     }
 
     function save(updatedPassword: PasswordUpdateRequest): Promise<void> {
-        return updatePassword(safeProfile.userId, updatedPassword)
+        return updatePassword((profile as UserProfile).userId, updatedPassword)
     }
 
     return (
-        <form
-            action={''}
-            onChange={onChange}
-            onSubmit={onSubmit}
-        >
-            <hr />
-
-            <h6>{passwordFormTitle}</h6>
-
-            <div className={styles['password-form-fields']}>
-                {formRenderTextInput(passwordForm, PasswordFieldName.currentPassword)}
-                {formRenderTextInput(passwordForm, PasswordFieldName.newPassword)}
-                {formRenderTextInput(passwordForm, PasswordFieldName.confirmPassword)}
-            </div>
-
-            <div className='form-button-container'>
-                <Button
-                    buttonStyle='tertiary'
-                    label='Back'
-                    onClick={onReset}
-                    route={props.profilePath}
-                    size='xl'
-                    tabIndex={-1}
-                />
-                <Button
-                    buttonStyle='secondary'
-                    disable={disableButton}
-                    label='Save'
-                    size='xl'
-                    tabIndex={4}
-                    type='submit'
-                />
-            </div>
-
-        </form>
+        <Form
+            formDef={passwordForm}
+            requestGenerator={requestGenerator}
+            resetOnError={true}
+            save={save}
+        />
     )
 }
 
diff --git a/src/utils/settings/password-reset/index.ts b/src/utils/settings/password-reset/index.ts
index c3e36a60f..3644a81bf 100644
--- a/src/utils/settings/password-reset/index.ts
+++ b/src/utils/settings/password-reset/index.ts
@@ -1 +1,2 @@
-export { default as PasswordReset, passwordFormTitle } from './PasswordReset'
+export { default as PasswordReset } from './PasswordReset'
+export { passwordFormTitle } from './password-reset-form.config'
diff --git a/src/utils/settings/password-reset/password-reset-form.config.ts b/src/utils/settings/password-reset/password-reset-form.config.ts
index adeb21982..bc5511f68 100644
--- a/src/utils/settings/password-reset/password-reset-form.config.ts
+++ b/src/utils/settings/password-reset/password-reset-form.config.ts
@@ -6,6 +6,8 @@ import {
     validatorRequired,
 } from '../../../lib'
 
+export const passwordFormTitle: string = 'Reset Password'
+
 export enum PasswordFieldName {
     confirmPassword = 'confirmPassword',
     currentPassword = 'password',
@@ -13,39 +15,55 @@ export enum PasswordFieldName {
 }
 
 export const passwordFormDef: FormDefinition = {
-    confirmPassword: {
-        dependentField: PasswordFieldName.newPassword,
-        label: 'Confirm Password',
-        name: PasswordFieldName.confirmPassword,
-        placeholder: 're-type your new password',
-        tabIndex: 3,
-        type: 'password',
-        validators: [
-            validatorRequired,
-            validatorMatchOther,
-        ],
-    },
-    newPassword: {
-        dependentField: PasswordFieldName.currentPassword,
-        label: 'New Password',
-        name: PasswordFieldName.newPassword,
-        placeholder: 'type your new password',
-        tabIndex: 2,
-        type: 'password',
-        validators: [
-            validatorRequired,
-            validatorDoesNotMatchOther,
-            validatorPassword,
-        ],
-    },
-    [PasswordFieldName.currentPassword]: {
-        label: 'Current Password',
-        name: PasswordFieldName.currentPassword,
-        placeholder: 'type your current password',
-        tabIndex: 1,
-        type: 'password',
-        validators: [
-            validatorRequired,
-        ],
-    },
+    buttons: [
+        {
+            buttonStyle: 'tertiary',
+            isReset: true,
+            label: 'Back',
+            notTabble: true,
+            size: 'xl',
+        },
+        {
+            buttonStyle: 'secondary',
+            isSave: true,
+            label: 'Save',
+            size: 'xl',
+            type: 'submit',
+        },
+    ],
+    inputs: [
+        {
+            label: 'Current Password',
+            name: PasswordFieldName.currentPassword,
+            placeholder: 'type your current password',
+            type: 'password',
+            validateOnChange: [
+                validatorRequired,
+            ],
+        },
+        {
+            dependentField: PasswordFieldName.currentPassword,
+            label: 'New Password',
+            name: PasswordFieldName.newPassword,
+            placeholder: 'type your new password',
+            type: 'password',
+            validateOnChange: [
+                validatorRequired,
+                validatorDoesNotMatchOther,
+                validatorPassword,
+            ],
+        },
+        {
+            dependentField: PasswordFieldName.newPassword,
+            label: 'Confirm Password',
+            name: PasswordFieldName.confirmPassword,
+            placeholder: 're-type your new password',
+            type: 'password',
+            validateOnChange: [
+                validatorRequired,
+                validatorMatchOther,
+            ],
+        },
+    ],
+    title: passwordFormTitle,
 }
diff --git a/src/utils/settings/profile-update/ProfileUpdate.tsx b/src/utils/settings/profile-update/ProfileUpdate.tsx
index f3a403a39..a9f92b9fa 100644
--- a/src/utils/settings/profile-update/ProfileUpdate.tsx
+++ b/src/utils/settings/profile-update/ProfileUpdate.tsx
@@ -1,68 +1,50 @@
-import { Dispatch, FC, FormEvent, SetStateAction, useContext, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
 import {
     Button,
+    Form,
     FormDefinition,
-    formInitializeValues,
-    formRenderTextInput,
+    formGetInputModel,
+    FormInputModel,
     formReset,
-    formSubmit,
-    formValidateAndUpdate,
-    ProfileContext,
+    profileContext,
     ProfileContextData,
     UserProfile,
     UserProfileUpdateRequest,
 } from '../../../lib'
 import '../../../lib/styles/index.scss'
-import { passwordFormTitle } from '../password-reset'
 
 import { ProfileFieldName, profileFormDef } from './profile-update-form.config'
 import styles from './ProfileUpdate.module.scss'
 
-export const profileFormTitle: string = 'Profile'
-
 interface ProfileUpdateProps {
-    passwordPath: string
+    readonly passwordPath: string
 }
 
-// TODO: further genericize forms so we're not repeating all this
 const ProfileUpdate: FC<ProfileUpdateProps> = (props: ProfileUpdateProps) => {
 
-    const profileContext: ProfileContextData = useContext(ProfileContext)
-    const { profile, updateProfile }: ProfileContextData = profileContext
-
-    const [disableSave, setDisableSave]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(true)
+    const profileContextData: ProfileContextData = useContext(profileContext)
+    const { profile, updateProfile }: ProfileContextData = profileContextData
 
-    const [profileForm, setProfileForm]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
+    const [profileForm]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
         = useState<FormDefinition>(profileFormDef)
 
-    // create the copy of the profile
-    const safeProfile: UserProfile = {
-        ...(profile as UserProfile),
-    }
-
-    function onChange(event: FormEvent<HTMLFormElement>): void {
-        const isValid: boolean = formValidateAndUpdate(event, profileForm)
-        setProfileForm({ ...profileForm })
-        setDisableSave(!isValid)
-    }
-
-    async function onSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
-        await formSubmit<UserProfileUpdateRequest, void>(event, profileForm, profileFormTitle, safeProfile, saveProfile, setDisableSave)
-        setProfileForm({ ...profileForm })
-    }
-
-    function resetForm(): void {
-        formReset(profileForm)
-        setProfileForm({ ...profileForm })
+    function requestGenerator(inputs: ReadonlyArray<FormInputModel>): UserProfileUpdateRequest {
+        const email: string = formGetInputModel(inputs, ProfileFieldName.email).value as string
+        const firstName: string = formGetInputModel(inputs, ProfileFieldName.firstName).value as string
+        const lastName: string = formGetInputModel(inputs, ProfileFieldName.lastName).value as string
+        return {
+            email,
+            firstName,
+            lastName,
+        }
     }
 
     function saveProfile(updatedProfile: UserProfileUpdateRequest): Promise<void> {
         return updateProfile({
-            ...profileContext,
+            ...profileContextData,
             profile: {
-                ...profileContext.profile as UserProfile,
+                ...profileContextData.profile as UserProfile,
                 email: updatedProfile.email,
                 firstName: updatedProfile.firstName,
                 lastName: updatedProfile.lastName,
@@ -70,53 +52,31 @@ const ProfileUpdate: FC<ProfileUpdateProps> = (props: ProfileUpdateProps) => {
         })
     }
 
-    formInitializeValues(profileForm, profile)
-
     return (
         <>
-            <form
-                action={''}
-                onChange={onChange}
-                onSubmit={onSubmit}
-            >
-                <hr />
-
-                <h6>{profileFormTitle}</h6>
-
-                <div className={styles['profile-form-fields']}>
-                    {formRenderTextInput(profileForm, ProfileFieldName.firstName)}
-                    {formRenderTextInput(profileForm, ProfileFieldName.lastName)}
-                    {formRenderTextInput(profileForm, ProfileFieldName.email)}
-                    {formRenderTextInput(profileForm, ProfileFieldName.handle)}
-                </div>
-
-                <div className='form-button-container'>
-                    <Button
-                        buttonStyle='secondary'
-                        disable={disableSave}
-                        label='Save'
-                        size='xl'
-                        tabIndex={4}
-                        type='submit'
-                    />
-                </div>
+            <hr />
 
-            </form>
+            <Form
+                formDef={profileForm}
+                formValues={profile}
+                requestGenerator={requestGenerator}
+                resetOnError={false}
+                save={saveProfile} />
 
             <hr />
 
-            <h6>{passwordFormTitle}</h6>
+            <h6>Password</h6>
 
             <div className={styles['profile-form-fields']}>
 
-                <div className='form-button-container'>
+                <div className='button-container'>
                     <Button
                         buttonStyle='tertiary'
                         label='Reset Password'
-                        onClick={resetForm}
+                        onClick={() => formReset(profileForm.inputs)}
                         route={props.passwordPath}
                         size='xl'
-                        tabIndex={5}
+                        tabIndex={-1}
                     />
                 </div>
 
diff --git a/src/utils/settings/profile-update/index.ts b/src/utils/settings/profile-update/index.ts
index 5eee4e17b..0e41f73f5 100644
--- a/src/utils/settings/profile-update/index.ts
+++ b/src/utils/settings/profile-update/index.ts
@@ -1 +1,2 @@
-export { default as ProfileUpdate, profileFormTitle } from './ProfileUpdate'
+export { default as ProfileUpdate } from './ProfileUpdate'
+export { profileFormTitle } from './profile-update-form.config'
diff --git a/src/utils/settings/profile-update/profile-update-form.config.ts b/src/utils/settings/profile-update/profile-update-form.config.ts
index 22e505c7f..483a14e04 100644
--- a/src/utils/settings/profile-update/profile-update-form.config.ts
+++ b/src/utils/settings/profile-update/profile-update-form.config.ts
@@ -1,5 +1,7 @@
 import { FormDefinition, validatorEmail, validatorRequired } from '../../../lib'
 
+export const profileFormTitle: string = 'Profile'
+
 export enum ProfileFieldName {
     email = 'email',
     firstName = 'firstName',
@@ -8,40 +10,48 @@ export enum ProfileFieldName {
 }
 
 export const profileFormDef: FormDefinition = {
-    email: {
-        label: 'Email',
-        name: ProfileFieldName.email,
-        tabIndex: 3,
-        type: 'text',
-        validators: [
-            validatorRequired,
-            validatorEmail,
-        ],
-    },
-    firstName: {
-        label: 'First Name',
-        name: ProfileFieldName.firstName,
-        tabIndex: 1,
-        type: 'text',
-        validators: [
-            validatorRequired,
-        ],
-    },
-    handle: {
-        disabled: true,
-        label: 'Username',
-        name: ProfileFieldName.handle,
-        tabIndex: -1,
-        type: 'text',
-        validators: [],
-    },
-    lastName: {
-        label: 'Last Name',
-        name: ProfileFieldName.lastName,
-        tabIndex: 2,
-        type: 'text',
-        validators: [
-            validatorRequired,
-        ],
-    },
+    buttons: [
+        {
+            buttonStyle: 'secondary',
+            isSave: true,
+            label: 'Save',
+            size: 'xl',
+            type: 'submit',
+        },
+    ],
+    inputs: [
+        {
+            label: 'First Name',
+            name: ProfileFieldName.firstName,
+            type: 'text',
+            validateOnChange: [
+                validatorRequired,
+            ],
+        },
+        {
+            label: 'Last Name',
+            name: ProfileFieldName.lastName,
+            type: 'text',
+            validateOnChange: [
+                validatorRequired,
+            ],
+        },
+        {
+            label: 'Email',
+            name: ProfileFieldName.email,
+            type: 'text',
+            validateOnChange: [
+                validatorRequired,
+                validatorEmail,
+            ],
+        },
+        {
+            disabled: true,
+            label: 'Username',
+            name: ProfileFieldName.handle,
+            notTabbable: true,
+            type: 'text',
+        },
+    ],
+    title: profileFormTitle,
 }