diff --git a/package.json b/package.json
index 073bce68e..7f51356d5 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "dependencies": {
         "@datadog/browser-logs": "^4.5.0",
         "@heroicons/react": "^1.0.6",
+        "axios": "^0.26.1",
         "browser-cookies": "^1.2.0",
         "classnames": "^2.3.1",
         "react": "^17.0.2",
@@ -51,6 +52,7 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.2.1",
+        "@types/axios": "^0.14.0",
         "@types/jest": "^27.0.1",
         "@types/node": "^16.7.13",
         "@types/react": "^17.0.20",
diff --git a/src/App.tsx b/src/App.tsx
index d81440aec..4c72f4c17 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,11 +3,11 @@ import { Route, Routes } from 'react-router-dom'
 
 import { EnvironmentConfig } from './config'
 import { Header } from './header'
-import { AnalyticsService, LoggingService, ProfileProvider } from './lib'
+import { initializeAnalytics, initializeLogger, ProfileProvider  } from './lib'
 import { RouteContext, RouteContextData } from './lib/route-provider'
 
-new AnalyticsService().initialize(EnvironmentConfig)
-new LoggingService().initialize(EnvironmentConfig)
+initializeAnalytics(EnvironmentConfig)
+initializeLogger(EnvironmentConfig)
 
 const App: FC<{}> = () => {
 
diff --git a/src/config/environments/environment.default.config.ts b/src/config/environments/environment.default.config.ts
index 0e1c938e4..6b9b02526 100644
--- a/src/config/environments/environment.default.config.ts
+++ b/src/config/environments/environment.default.config.ts
@@ -4,6 +4,7 @@ import { AppHostEnvironment } from './app-host-environment.enum'
 
 export const EnvironmentConfigDefault: GlobalConfig = {
     API: {
+        V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },
     ENV: AppHostEnvironment.default,
diff --git a/src/config/environments/environment.prod.config.ts b/src/config/environments/environment.prod.config.ts
index 44d87c356..14d232096 100644
--- a/src/config/environments/environment.prod.config.ts
+++ b/src/config/environments/environment.prod.config.ts
@@ -6,6 +6,7 @@ import { EnvironmentConfigDefault } from './environment.default.config'
 export const EnvironmentConfigProd: GlobalConfig = {
     ...EnvironmentConfigDefault,
     API: {
+        V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
     ENV: AppHostEnvironment.prod,
diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss
index d4c19f025..5b5626e41 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss
@@ -2,7 +2,7 @@
 
 $overlaySquare: calc($pad-xxxxl + 2 * $border);
 
-.profile-avater,
+.profile-avatar,
 .overlay {
     cursor: pointer;
 }
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 becea8cfa..6a14a8a17 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,6 +1,6 @@
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { Avatar, IconOutline, LoggingService, ProfileContext, ProfileContextData } from '../../../../../lib'
+import { Avatar, IconOutline, logInfo , ProfileContext, ProfileContextData } from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
@@ -9,10 +9,9 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     const { profile }: ProfileContextData = useContext(ProfileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const logger: LoggingService = new LoggingService()
 
     if (!profile) {
-        logger.logInfo('tried to render the logged in profile w/out a profile')
+        logInfo('tried to render the logged in profile w/out a profile')
         return <></>
     }
 
@@ -22,7 +21,7 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     return (
         <>
-            <div className={styles['profile-avater']} onClick={() => toggleProfilePanel()} >
+            <div className={styles['profile-avatar']} onClick={() => toggleProfilePanel()} >
                 <Avatar
                     firstName={profile.firstName}
                     lastName={profile.lastName}
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 0552a89fc..722443d85 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
@@ -2,10 +2,10 @@ import { FC, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 import {
-    AuthenticationUrlConfig,
+    logoutUrl,
     ProfileContext,
     ProfileContextData,
-    ProfileRouteConfig,
+    profileRoute,
 } from '../../../../../../lib'
 
 import styles from './ProfilePanel.module.scss'
@@ -31,11 +31,11 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={ProfileRouteConfig.profile}
+                to={profileRoute}
             >
                 My Profile
             </Link>
-            <a href={AuthenticationUrlConfig.logout} className={styles.logout}>
+            <a href={logoutUrl} className={styles.logout}>
                 Log Out
             </a>
         </div>
diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx
index 8fff4946d..4c9114d99 100644
--- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx
+++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx
@@ -1,29 +1,28 @@
-import classNames from 'classnames'
 import { FC } from 'react'
 
-import { AuthenticationUrlConfig, routeRoot } from '../../../../../lib'
+import { Button, loginUrl, routeRoot, signupUrl } from '../../../../../lib'
 import '../../../../../lib/styles/index.scss'
 
 import styles from './ProfileNotLoggedIn.module.scss'
 
 const ProfileNotLoggedIn: FC<{}> = () => {
 
-    const buttonClass: string = 'button'
-
     return (
         <>
-            <a
-                className={classNames(buttonClass, styles.login)}
-                href={AuthenticationUrlConfig.login(routeRoot)}
-            >
-                Log In
-            </a>
-            <a
-                className={classNames(buttonClass, 'all-white', styles.signup)}
-                href={AuthenticationUrlConfig.signup(routeRoot)}
-            >
-                Sign Up
-            </a>
+            <Button
+                className={styles.login}
+                label='Log In'
+                size='sm'
+                buttonStyle='text'
+                url={loginUrl(routeRoot)}
+            />
+            <Button
+                className={styles.signup}
+                label='Sign Up'
+                size='sm'
+                buttonStyle='tertiary'
+                url={signupUrl(routeRoot)}
+            />
         </>
     )
 }
diff --git a/src/lib/button/Button.tsx b/src/lib/button/Button.tsx
new file mode 100644
index 000000000..d83ff782f
--- /dev/null
+++ b/src/lib/button/Button.tsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+
+interface ButtonProps {
+    readonly buttonStyle?: 'primary' | 'secondary' | 'tertiary' | 'text'
+    readonly className?: string
+    readonly disable?: boolean
+    readonly label: string
+    readonly onClick?: (event?: any) => void
+    readonly size?: 'sm' | 'md' | 'lg' | 'xl'
+    readonly type?: 'button' | 'submit'
+    readonly url?: string
+}
+
+const Button: FC<ButtonProps> = (props: ButtonProps) => {
+
+    const classes: string = classNames(
+        'button',
+        props.className,
+        props.buttonStyle || 'primary',
+        `button-${props.size || 'md'}`
+    )
+
+    // if there is a url, this is a link button
+    if (!!props.url) {
+        return (
+            <a
+                className={classes}
+                href={props.url}
+            >
+                {props.label}
+            </a>
+        )
+    }
+
+    // if there is no click handler, the button is prob a submit
+    // button, so just add a blank click handler
+    const clickHandler: (event: any) => void = props.onClick || (() => undefined)
+
+    return (
+        <button
+            className={classes}
+            disabled={!!props.disable}
+            onClick={event => clickHandler(event)}
+            type={props.type || 'button'}
+        >
+            {props.label}
+        </button>
+    )
+}
+
+export default Button
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
new file mode 100644
index 000000000..375b5832f
--- /dev/null
+++ b/src/lib/button/index.ts
@@ -0,0 +1 @@
+export {  default as Button } from './Button'
diff --git a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.module.scss b/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.module.scss
new file mode 100644
index 000000000..d7cdc7c7a
--- /dev/null
+++ b/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.module.scss
@@ -0,0 +1,83 @@
+@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 {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: $pad-sm $form-pad-top;
+        height: calc($pad-xxl * 2);
+        background: $tc-white;
+        border: $border-xs solid $black-40;
+        box-sizing: border-box;
+        border-radius: $pad-xs;
+        margin-bottom: calc($error-line-height + $pad-xs);
+
+        &:hover,
+        &.focus {
+            border-color: $turq-160;
+
+            &.form-field-error {
+                border-color: $red-100;
+            }
+        }
+
+        &.focus,
+        &.form-field-error {
+            border-width: $border;
+            padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs);
+        }
+
+        &.disabled {
+            background-color: $black-10;
+            background: $black-10;
+            border-color: $black-40;
+        }
+
+        &.form-field-error {
+            border-color: $red-100;
+            margin-bottom: 0;
+
+            .label {
+                color: $red-100;
+            }
+        }
+
+        .label {
+            top: calc(50% - $form-pad-top/2);
+            color: $turq-160;
+            margin-bottom: $pad-xs;
+            // extend ultra-small and override some properties
+            @extend .ultra-small;
+            @include font-weight-medium;
+            line-height: calc($pad-md - $border);
+            font-style: normal;
+        }
+    }
+
+    .error {
+        display: flex;
+        align-items: center;
+        color: $red-100;
+        // extend body ultra small and override it
+        @extend .body-ultra-small;
+        line-height: $error-line-height;
+        margin-top: $pad-xs;
+
+        svg {
+            @include icon-md;
+            fill: $red-100;
+            margin-right: $pad-xs;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.test.tsx b/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.test.tsx
new file mode 100644
index 000000000..2f4d41d32
--- /dev/null
+++ b/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.test.tsx
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<FormFieldWrapper /> ', () => {
+
+    test('it should display the FormField', () => {})
+})
diff --git a/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx b/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx
new file mode 100644
index 000000000..8acdeefa5
--- /dev/null
+++ b/src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx
@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
+
+import { IconSolid } from '../../svgs'
+
+import styles from './Form-Field-Wrapper.module.scss'
+
+interface FormFieldWrapperProps {
+    children: ReactNode
+    disabled: boolean
+    error?: string
+    label: string
+    name: string
+}
+
+const FormFieldWrapper: FC<FormFieldWrapperProps> = (props: FormFieldWrapperProps) => {
+
+    const [focusStyle, setFocusStyle]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()
+    const formFieldClasses: string = classNames(
+        styles['form-field'],
+        props.disabled ? styles.disabled : undefined,
+        focusStyle,
+        !!props.error ? styles['form-field-error'] : undefined
+    )
+
+    return (
+        <div className={styles['form-field-wrapper']}>
+
+            <div
+                className={formFieldClasses}
+                onBlur={() => setFocusStyle(undefined)}
+                onFocus={() => setFocusStyle(styles.focus)}
+            >
+                <label
+                    className={styles.label}
+                    role='presentation'
+                >
+                    {props.label}
+                    {props.children}
+                </label>
+            </div>
+
+            {!!props.error && (
+                <div className={styles.error}>
+                    <IconSolid.ExclamationIcon />
+                    {props.error}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default FormFieldWrapper
diff --git a/src/lib/form-elements/form-field-wrapper/index.ts b/src/lib/form-elements/form-field-wrapper/index.ts
new file mode 100644
index 000000000..e90de43ef
--- /dev/null
+++ b/src/lib/form-elements/form-field-wrapper/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 000000000..2fcb5d4a1
--- /dev/null
+++ b/src/lib/form-elements/form-functions/form-definition.model.ts
@@ -0,0 +1,5 @@
+import { TextInputModel } from './text-input.model'
+
+export interface FormDefinition {
+    [input: string]: TextInputModel
+}
diff --git a/src/lib/form-elements/form-functions/form.functions.ts b/src/lib/form-elements/form-functions/form.functions.ts
new file mode 100644
index 000000000..5f5c0cd94
--- /dev/null
+++ b/src/lib/form-elements/form-functions/form.functions.ts
@@ -0,0 +1,54 @@
+import { Dispatch, FormEvent, SetStateAction } from 'react'
+
+import { FormDefinition } from './form-definition.model'
+import { TextInputModel } from './text-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 validateAndUpdate(
+    event: FormEvent<HTMLFormElement>,
+    form: FormDefinition,
+    callback: Dispatch<SetStateAction<FormDefinition>>,
+): boolean {
+    const input: HTMLInputElement = (event.target as HTMLInputElement)
+    return validateAndUpdateInput(input, form, callback)
+}
+
+function validateAndUpdateInput(
+    input: HTMLInputElement,
+    form: FormDefinition,
+    callback: Dispatch<SetStateAction<FormDefinition>>,
+): boolean {
+
+    const inputDef: TextInputModel = form[input.name]
+    const formElements: HTMLFormControlsCollection = (input.form as HTMLFormElement).elements
+
+    inputDef.error = undefined
+    inputDef.validators
+        .forEach(validator => {
+            if (!inputDef.error) {
+                inputDef.error = validator(input.value, formElements, inputDef.requiredIfField)
+            }
+        })
+
+    // validate the input's dependent fields as well
+    // NOTE: must be VERY careful that this doesn't
+    // get stuck in an infinite loop
+    inputDef.dependentFields
+        ?.forEach(dep => {
+            const otherinput: HTMLInputElement = getInput(formElements, dep)
+            validateAndUpdateInput(otherinput, form, callback)
+        })
+
+    callback({ ...form })
+    const formIsNotValid: boolean = Object.keys(form)
+        .map(key => form[key])
+        .some(i => !!i.error)
+    return !formIsNotValid
+}
diff --git a/src/lib/form-elements/form-functions/index.ts b/src/lib/form-elements/form-functions/index.ts
new file mode 100644
index 000000000..81a1b782d
--- /dev/null
+++ b/src/lib/form-elements/form-functions/index.ts
@@ -0,0 +1,7 @@
+export * from './form-definition.model'
+export {
+    getInput as getFormInput,
+    getValue as getFormValue,
+    validateAndUpdate as validateAndUpdateForm,
+} from './form.functions'
+export * from './text-input.model'
diff --git a/src/lib/form-elements/form-functions/text-input.model.ts b/src/lib/form-elements/form-functions/text-input.model.ts
new file mode 100644
index 000000000..fd9e28634
--- /dev/null
+++ b/src/lib/form-elements/form-functions/text-input.model.ts
@@ -0,0 +1,13 @@
+export interface TextInputModel {
+    dependentFields?: Array<string>
+    disabled?: boolean
+    error?: string
+    label?: string
+    name: string
+    placeholder?: string
+    preventAutocomplete?: boolean
+    requiredIfField?: string
+    type: 'password' | 'text'
+    validators: Array<(value: string | undefined, formValues?: HTMLFormControlsCollection, otherField?: string) => string | undefined>
+    value?: string
+}
diff --git a/src/lib/form-elements/index.ts b/src/lib/form-elements/index.ts
index 97d3ff77f..6496cf2b3 100644
--- a/src/lib/form-elements/index.ts
+++ b/src/lib/form-elements/index.ts
@@ -1 +1,3 @@
-export * from './form-field'
+export * from './form-functions'
+export * from './text-input'
+export * from './validator-functions'
diff --git a/src/lib/form-elements/text-input/Text-Input.module.scss b/src/lib/form-elements/text-input/Text-Input.module.scss
new file mode 100644
index 000000000..6f36e4e9d
--- /dev/null
+++ b/src/lib/form-elements/text-input/Text-Input.module.scss
@@ -0,0 +1,29 @@
+@import '../../styles';
+
+.form-input-text {
+    @extend .body-small;
+    color: $black-60;
+    box-sizing: border-box;
+    border: 0;
+    width: 100%;
+    padding: 0;
+
+    &:focus {
+        box-shadow: none;
+        border: none;
+        outline: none;
+        color: $black-100;
+
+        &::placeholder {
+            color: $black-60;
+        }
+    }
+  
+    &:disabled {
+        background-color: $black-10;
+    }
+
+    &::placeholder {
+        opacity: 1;
+    }
+}
diff --git a/src/lib/form-elements/text-input/Text-Input.test.tsx b/src/lib/form-elements/text-input/Text-Input.test.tsx
new file mode 100644
index 000000000..bf32a169a
--- /dev/null
+++ b/src/lib/form-elements/text-input/Text-Input.test.tsx
@@ -0,0 +1,6 @@
+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
new file mode 100644
index 000000000..dab1f51cc
--- /dev/null
+++ b/src/lib/form-elements/text-input/Text-Input.tsx
@@ -0,0 +1,40 @@
+import { FC } from 'react'
+
+import { FormFieldWrapper } from '../form-field-wrapper'
+
+import styles from './Text-Input.module.scss'
+
+interface TextInputProps {
+    disabled?: boolean
+    error?: string
+    label?: string
+    name: string
+    placeholder?: string
+    preventAutocomplete?: boolean
+    tabIndex: number
+    type: 'password' | 'text'
+    value?: string
+}
+
+const TextInput: FC<TextInputProps> = (props: TextInputProps) => {
+    return (
+        <FormFieldWrapper
+            disabled={!!props.disabled}
+            label={props.label || props.name}
+            error={props.error}
+            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}
+                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
new file mode 100644
index 000000000..1988f9151
--- /dev/null
+++ b/src/lib/form-elements/text-input/index.ts
@@ -0,0 +1 @@
+export { default as TextInput } from './Text-Input'
diff --git a/src/lib/form-elements/validator-functions/index.ts b/src/lib/form-elements/validator-functions/index.ts
new file mode 100644
index 000000000..4d360e810
--- /dev/null
+++ b/src/lib/form-elements/validator-functions/index.ts
@@ -0,0 +1,5 @@
+export {
+    email as emailValidator,
+    required as requiredValidator,
+    requiredIfOther as requiredIfOtherValidator,
+} from './validator.functions'
diff --git a/src/lib/form-elements/validator-functions/validator.functions.ts b/src/lib/form-elements/validator-functions/validator.functions.ts
new file mode 100644
index 000000000..15af4ccb2
--- /dev/null
+++ b/src/lib/form-elements/validator-functions/validator.functions.ts
@@ -0,0 +1,51 @@
+import { getFormInput } from '../form-functions'
+
+export function email(value: string | undefined): string | undefined {
+
+    // tslint:disable-next-line: no-useless-escape
+    const emailRegex: RegExp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+    // if there is no value, do not set the error
+    // b/c this is an email validator, not a required
+    // validator
+    if (!value) {
+        return undefined
+    }
+
+    return !emailRegex.test(value) ? 'invalid email' : undefined
+}
+
+export function required(value: string | undefined): string | undefined {
+    return !value ? 'required' : undefined
+}
+
+export function requiredIfOther(value: string | undefined, formElements?: HTMLFormControlsCollection, otherFieldName?: string): string | undefined {
+
+    // if there are no form values or an other field name, we have a problem
+    if (!formElements || !otherFieldName) {
+        throw new Error(`Cannot use the required if other validator if there isn't both formValues (${formElements}) and an otherFieldName (${otherFieldName})`)
+    }
+
+    // if there is a value, there's no need to check the other input
+    if (!!value) {
+        return undefined
+    }
+
+    // get the other form field
+    const otherField: HTMLInputElement = getFormInput(formElements, otherFieldName)
+
+    // if there is no other field, we have a problem
+    if (!otherField) {
+        throw new Error(`Cannot use the required if other validator if the otherField (${otherFieldName}) doesn't exist on the form`)
+    }
+
+    // if the other field doesn't have a value, then we're good
+    if (!otherField.value) {
+        return undefined
+    }
+
+    // get the label of the dependent field
+    const otherFieldLabel: string = otherField.labels?.[0].firstChild?.nodeValue || otherFieldName
+
+    return `required when ${otherFieldLabel} is not blank`
+}
diff --git a/src/lib/functions/analytics-functions/analytics.functions.test.ts b/src/lib/functions/analytics-functions/analytics.functions.test.ts
new file mode 100644
index 000000000..b6d88521d
--- /dev/null
+++ b/src/lib/functions/analytics-functions/analytics.functions.test.ts
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('Analytics Functions', () => {
+
+    test('analytics', () => { })
+})
diff --git a/src/lib/functions/analytics-functions/analytics.functions.ts b/src/lib/functions/analytics-functions/analytics.functions.ts
new file mode 100644
index 000000000..e01b88a93
--- /dev/null
+++ b/src/lib/functions/analytics-functions/analytics.functions.ts
@@ -0,0 +1,17 @@
+import TagManager from 'react-gtm-module'
+
+import { GlobalConfig } from '../../global-config.model'
+
+export function initialize(config: GlobalConfig): void {
+
+    // if we don't have an ID
+    // then tags aren't supported in this environment,
+    // so don't initialize anything
+    if (!config.TAG_MANAGER_ID) {
+        return
+    }
+
+    TagManager.initialize({
+        gtmId: config.TAG_MANAGER_ID,
+    })
+}
diff --git a/src/lib/functions/analytics-functions/index.ts b/src/lib/functions/analytics-functions/index.ts
new file mode 100644
index 000000000..051e3bdfd
--- /dev/null
+++ b/src/lib/functions/analytics-functions/index.ts
@@ -0,0 +1 @@
+export { initialize as initializeAnalytics } from './analytics.functions'
diff --git a/src/lib/functions/authentication-functions/authentication-url.config.ts b/src/lib/functions/authentication-functions/authentication-url.config.ts
new file mode 100644
index 000000000..39d8ef9e2
--- /dev/null
+++ b/src/lib/functions/authentication-functions/authentication-url.config.ts
@@ -0,0 +1,13 @@
+import { EnvironmentConfig } from '../../../config'
+
+export const authentication: string = EnvironmentConfig.URL.ACCOUNTS_APP_CONNECTOR
+
+export function login(fallback: string): string {
+    return `${authentication}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}`
+}
+
+export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}`
+
+export function signup(fallback: string): string {
+    return `${login(fallback)}&regSource=tcBusiness&mode=signUp`
+}
diff --git a/src/lib/services/authentication-service/authentication.service.test.ts b/src/lib/functions/authentication-functions/authentication.functions.test.ts
similarity index 63%
rename from src/lib/services/authentication-service/authentication.service.test.ts
rename to src/lib/functions/authentication-functions/authentication.functions.test.ts
index 93e9c6c41..8d3b4e806 100644
--- a/src/lib/services/authentication-service/authentication.service.test.ts
+++ b/src/lib/functions/authentication-functions/authentication.functions.test.ts
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('Authentication Service', () => {
+describe('Authentication Functions', () => {
 
     test('authentication', () => { })
 })
diff --git a/src/lib/functions/authentication-functions/authentication.functions.ts b/src/lib/functions/authentication-functions/authentication.functions.ts
new file mode 100644
index 000000000..8b878abcc
--- /dev/null
+++ b/src/lib/functions/authentication-functions/authentication.functions.ts
@@ -0,0 +1,67 @@
+import cookies from 'browser-cookies'
+import { configureConnector, decodeToken, getFreshToken } from 'tc-auth-lib'
+
+import { User } from '../../../../types/tc-auth-lib'
+import { EnvironmentConfig } from '../../../config'
+import { logError } from '../logging-functions'
+
+import { authentication as authenticationUrl } from './authentication-url.config'
+import { CookieKeys } from './cookie-keys.enum'
+
+interface TokenData {
+    tokenV2?: string
+    tokenV3?: string
+}
+
+configureConnector({
+    connectorUrl: authenticationUrl,
+    frameId: 'tc-accounts-iframe',
+    mockMode: undefined,
+    mockToken: undefined,
+})
+
+export async function authenticate(): Promise<string | undefined> {
+
+    return getFreshToken()
+        .then((tokenV3: string) => {
+            const tokenV2: string | null = cookies.get(CookieKeys.tcjwt)
+            return {
+                tokenV2,
+                tokenV3,
+            }
+        })
+        .catch((error: Error) => {
+            logError(error?.message || `${error}` || 'unknown error getting authentication token')
+            return {}
+        })
+        .then((token: TokenData) => {
+            handleRefresh(token)
+            return token.tokenV3
+        })
+}
+
+function handleRefresh(token: TokenData): number {
+
+    let time: number = Number.MAX_VALUE
+
+    const user: User = !!token.tokenV3 ? decodeToken(token.tokenV3) : {}
+
+    // if we havea tctv2, use its expiration
+    if (!!token.tokenV2) {
+        time = decodeToken(token.tokenV2).exp
+    }
+
+    // if we have a user, take the min btwn
+    // the current time and the uservl expiration
+    if (!!user.exp) {
+        time = Math.min(time, user.exp)
+    }
+
+    if (time < Number.MAX_VALUE) {
+        time = 1000 * (time - EnvironmentConfig.REAUTH_OFFSET)
+        time = Math.max(0, time - Date.now())
+        setTimeout(() => authenticate(), time)
+    }
+
+    return time
+}
diff --git a/src/lib/services/authentication-service/cookie-keys.enum.ts b/src/lib/functions/authentication-functions/cookie-keys.enum.ts
similarity index 100%
rename from src/lib/services/authentication-service/cookie-keys.enum.ts
rename to src/lib/functions/authentication-functions/cookie-keys.enum.ts
diff --git a/src/lib/functions/authentication-functions/index.ts b/src/lib/functions/authentication-functions/index.ts
new file mode 100644
index 000000000..6092d71cc
--- /dev/null
+++ b/src/lib/functions/authentication-functions/index.ts
@@ -0,0 +1,6 @@
+export {
+    login as loginUrl,
+    logout as logoutUrl,
+    signup as signupUrl,
+} from './authentication-url.config'
+export * from './authentication.functions'
diff --git a/src/lib/functions/index.ts b/src/lib/functions/index.ts
new file mode 100644
index 000000000..b973e45f8
--- /dev/null
+++ b/src/lib/functions/index.ts
@@ -0,0 +1,5 @@
+export * from './analytics-functions'
+export { loginUrl, logoutUrl, signupUrl } from './authentication-functions'
+export * from './logging-functions'
+export * from './user-functions'
+export * from './xhr-functions'
diff --git a/src/lib/functions/logging-functions/index.ts b/src/lib/functions/logging-functions/index.ts
new file mode 100644
index 000000000..b5689eff1
--- /dev/null
+++ b/src/lib/functions/logging-functions/index.ts
@@ -0,0 +1,5 @@
+export {
+    initialize as initializeLogger,
+    logError,
+    logInfo,
+} from './logging.functions'
diff --git a/src/lib/functions/logging-functions/logging.functions.test.ts b/src/lib/functions/logging-functions/logging.functions.test.ts
new file mode 100644
index 000000000..d165f7373
--- /dev/null
+++ b/src/lib/functions/logging-functions/logging.functions.test.ts
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('Logging Functions', () => {
+
+    test('', () => { })
+})
diff --git a/src/lib/functions/logging-functions/logging.functions.ts b/src/lib/functions/logging-functions/logging.functions.ts
new file mode 100644
index 000000000..c51cd1f88
--- /dev/null
+++ b/src/lib/functions/logging-functions/logging.functions.ts
@@ -0,0 +1,30 @@
+import { datadogLogs } from '@datadog/browser-logs'
+
+import { GlobalConfig } from '../../global-config.model'
+
+export function initialize(config: GlobalConfig): void {
+
+    // if we don't have a token and service,
+    // logging isn't supported in this environment,
+    // so don't initialize anything
+    if (!config.LOGGING?.PUBLIC_TOKEN || !config.LOGGING?.SERVICE) {
+        return
+    }
+
+    datadogLogs.init({
+        clientToken: config.LOGGING.PUBLIC_TOKEN,
+        env: config.ENV,
+        service: config.LOGGING.SERVICE,
+        silentMultipleInit: true,
+    })
+
+    logInfo(`initialized logging for ${config.ENV}`)
+}
+
+export function logError(message: string, messageContext?: object): void {
+    datadogLogs.logger.error(message, messageContext)
+}
+
+export function logInfo(message: string, messageContext?: object): void {
+    datadogLogs.logger.info(message, messageContext)
+}
diff --git a/src/lib/functions/token-functions/index.ts b/src/lib/functions/token-functions/index.ts
new file mode 100644
index 000000000..17a053440
--- /dev/null
+++ b/src/lib/functions/token-functions/index.ts
@@ -0,0 +1,2 @@
+export * from './token.model'
+export * from './token.functions'
diff --git a/src/lib/services/logging-service/logging.service.test.ts b/src/lib/functions/token-functions/token.functions.test.ts
similarity index 64%
rename from src/lib/services/logging-service/logging.service.test.ts
rename to src/lib/functions/token-functions/token.functions.test.ts
index a4c95550c..342a3bf53 100644
--- a/src/lib/services/logging-service/logging.service.test.ts
+++ b/src/lib/functions/token-functions/token.functions.test.ts
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('Logging Service', () => {
+describe('Token Functions', () => {
 
     test('', () => { })
 })
diff --git a/src/lib/functions/token-functions/token.functions.ts b/src/lib/functions/token-functions/token.functions.ts
new file mode 100644
index 000000000..25cef25ff
--- /dev/null
+++ b/src/lib/functions/token-functions/token.functions.ts
@@ -0,0 +1,32 @@
+import { decodeToken } from 'tc-auth-lib'
+
+import { authenticate } from '../authentication-functions'
+import { logError } from '../logging-functions'
+
+import { TokenModel } from './token.model'
+
+export async function get(): Promise<TokenModel> {
+
+    const token: string | undefined = await authenticate()
+
+    // if there is no token, no need to try to get the handle
+    if (!token) {
+        return Promise.resolve({})
+    }
+
+    try {
+        const { handle }: { handle?: string } = decodeToken(token)
+
+        // if we didn't find the handle, we have a bad token
+        if (!handle) {
+            logError(`token did not have a handle: ${token}`)
+            return Promise.resolve({})
+        }
+
+        return Promise.resolve({ handle, token })
+
+    } catch (error: any) {
+        logError(error)
+        return Promise.resolve({})
+    }
+}
diff --git a/src/lib/functions/token-functions/token.model.ts b/src/lib/functions/token-functions/token.model.ts
new file mode 100644
index 000000000..99e72a5d0
--- /dev/null
+++ b/src/lib/functions/token-functions/token.model.ts
@@ -0,0 +1,4 @@
+export interface TokenModel {
+    handle?: string
+    token?: string
+}
diff --git a/src/lib/functions/user-functions/index.ts b/src/lib/functions/user-functions/index.ts
new file mode 100644
index 000000000..ba0df2138
--- /dev/null
+++ b/src/lib/functions/user-functions/index.ts
@@ -0,0 +1 @@
+export * from './user.functions'
diff --git a/src/lib/functions/user-functions/user-store/index.ts b/src/lib/functions/user-functions/user-store/index.ts
new file mode 100644
index 000000000..c8200c5d9
--- /dev/null
+++ b/src/lib/functions/user-functions/user-store/index.ts
@@ -0,0 +1 @@
+export * from './user-xhr.store'
diff --git a/src/lib/functions/user-functions/user-store/user-endpoint.config.ts b/src/lib/functions/user-functions/user-store/user-endpoint.config.ts
new file mode 100644
index 000000000..ffa2183f5
--- /dev/null
+++ b/src/lib/functions/user-functions/user-store/user-endpoint.config.ts
@@ -0,0 +1,5 @@
+import { EnvironmentConfig } from '../../../../config'
+
+export  function user(userId: number): string {
+    return `${EnvironmentConfig.API.V3}/users/${userId}`
+}
diff --git a/src/lib/functions/user-functions/user-store/user-xhr.store.ts b/src/lib/functions/user-functions/user-store/user-xhr.store.ts
new file mode 100644
index 000000000..7af0af73e
--- /dev/null
+++ b/src/lib/functions/user-functions/user-store/user-xhr.store.ts
@@ -0,0 +1,18 @@
+import { User } from '../../../../../types/tc-auth-lib'
+import { patch as xhrPatch } from '../../xhr-functions'
+
+import { user as userEndpoint } from './user-endpoint.config'
+
+export interface UserPatchRequest {
+    param: {
+        credential: {
+            currentPassword: string
+            password: string
+        }
+    }
+}
+
+export async function patchUser(userId: number, request: UserPatchRequest): Promise<User> {
+    const url: string = userEndpoint(userId)
+    return xhrPatch(url, request)
+}
diff --git a/src/lib/profile-provider/profile-service/profile.service.test.ts b/src/lib/functions/user-functions/user.functions.test.ts
similarity index 65%
rename from src/lib/profile-provider/profile-service/profile.service.test.ts
rename to src/lib/functions/user-functions/user.functions.test.ts
index d807fe55b..c77886f77 100644
--- a/src/lib/profile-provider/profile-service/profile.service.test.ts
+++ b/src/lib/functions/user-functions/user.functions.test.ts
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('Profile Service', () => {
+describe('Profile Functions', () => {
 
     test('TODO', () => {
 
diff --git a/src/lib/functions/user-functions/user.functions.ts b/src/lib/functions/user-functions/user.functions.ts
new file mode 100644
index 000000000..acf8a6798
--- /dev/null
+++ b/src/lib/functions/user-functions/user.functions.ts
@@ -0,0 +1,14 @@
+import { patchUser, UserPatchRequest } from './user-store'
+
+export async function updatePassword(userId: number, currentPassword: string, password: string): Promise<void> {
+    const request: UserPatchRequest = {
+        param: {
+            credential: {
+                currentPassword,
+                password,
+            },
+        },
+    }
+    return patchUser(userId, request)
+        .then(() => undefined)
+}
diff --git a/src/lib/functions/xhr-functions/index.ts b/src/lib/functions/xhr-functions/index.ts
new file mode 100644
index 000000000..5d4aa524b
--- /dev/null
+++ b/src/lib/functions/xhr-functions/index.ts
@@ -0,0 +1 @@
+export * from './xhr.functions'
diff --git a/src/lib/functions/xhr-functions/xhr.functions.test.ts b/src/lib/functions/xhr-functions/xhr.functions.test.ts
new file mode 100644
index 000000000..c2a3e7aec
--- /dev/null
+++ b/src/lib/functions/xhr-functions/xhr.functions.test.ts
@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('XHR Functions', () => {
+
+    test('', () => { })
+})
diff --git a/src/lib/functions/xhr-functions/xhr.functions.ts b/src/lib/functions/xhr-functions/xhr.functions.ts
new file mode 100644
index 000000000..777172089
--- /dev/null
+++ b/src/lib/functions/xhr-functions/xhr.functions.ts
@@ -0,0 +1,44 @@
+import axios, { AxiosInstance, AxiosResponse } from 'axios'
+
+import { get as tokenGet, TokenModel } from '../token-functions'
+
+// initialize the instance
+const xhrInstance: AxiosInstance = axios.create({
+    headers: {
+        'Content-Type': 'application/json',
+    },
+})
+
+// add the auth token to all xhr calls
+xhrInstance.interceptors.request.use(async (config) => {
+    const tokenData: TokenModel = await tokenGet()
+    config.headers = config.headers || {}
+    config.headers.Authorization = `Bearer ${tokenData.token}`
+    return config
+})
+
+// handle all http errors
+xhrInstance.interceptors.response.use((config) => config,
+    (error: any) => {
+
+        // if there is server error message, then return it inside `message` property of error
+        error.message = error?.response?.data?.message || error.message
+
+        return Promise.reject(error)
+    }
+)
+
+export async function get<T>(url: string): Promise<T> {
+    const output: AxiosResponse<T> = await xhrInstance.get(url)
+    return output.data
+}
+
+export async function patch<T, R>(url: string, data: T): Promise<R> {
+    const output: AxiosResponse<R> = await xhrInstance.patch(url, data)
+    return output.data
+}
+
+export async function put<T>(url: string, data: T): Promise<T> {
+    const output: AxiosResponse<T> = await xhrInstance.put(url, data)
+    return output.data
+}
diff --git a/src/lib/global-config.model.ts b/src/lib/global-config.model.ts
index 4958abd7f..3f0ea23c0 100644
--- a/src/lib/global-config.model.ts
+++ b/src/lib/global-config.model.ts
@@ -1,5 +1,6 @@
 export interface GlobalConfig {
     API: {
+        V3: string
         V5: string
     }
     ENV: string
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 05087242b..2148d276b 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,13 +1,18 @@
 export * from './avatar'
+export * from './button'
 export * from './content-layout'
 export * from './form-elements'
 export * from './global-config.model'
 export * from './profile-provider'
 export {
-    AnalyticsService,
-    AuthenticationUrlConfig,
-    LoggingService,
-} from './services'
+    initializeAnalytics,
+    initializeLogger,
+    logError,
+    logInfo,
+    loginUrl,
+    logoutUrl,
+    signupUrl,
+} from './functions'
 export * from './svgs'
 
 /*
diff --git a/src/lib/profile-provider/index.ts b/src/lib/profile-provider/index.ts
index d2422c7f6..4d249f07f 100644
--- a/src/lib/profile-provider/index.ts
+++ b/src/lib/profile-provider/index.ts
@@ -1,5 +1,6 @@
 export * from './profile-context-data.model'
-export { default as ProfileRouteConfig } from './profile-routes.config'
+export { profile as profileRoute } from './profile-routes.config'
 export { default as ProfileContext, defaultProfileContextData } from './profile.context'
 export { ProfileProvider } from './profile.provider'
+export * from './user-profile-detail.model'
 export * from './user-profile.model'
diff --git a/src/lib/profile-provider/profile-context-data.model.ts b/src/lib/profile-provider/profile-context-data.model.ts
index 8e98b0231..c4a6a6804 100644
--- a/src/lib/profile-provider/profile-context-data.model.ts
+++ b/src/lib/profile-provider/profile-context-data.model.ts
@@ -1,6 +1,8 @@
-import { UserProfile } from './user-profile.model'
+import { UserProfileDetail } from './user-profile-detail.model'
 
 export interface ProfileContextData {
     initialized: boolean
-    profile?: UserProfile
+    profile?: UserProfileDetail
+    updatePassword: (userId: number, currentPassword: string, password: string) => Promise<void>
+    updateProfile: (profileContext: ProfileContextData) => Promise<void>
 }
diff --git a/src/lib/profile-provider/profile-functions/index.ts b/src/lib/profile-provider/profile-functions/index.ts
new file mode 100644
index 000000000..3b97f287a
--- /dev/null
+++ b/src/lib/profile-provider/profile-functions/index.ts
@@ -0,0 +1 @@
+export * from './profile.functions'
diff --git a/src/lib/profile-provider/profile-functions/profile-store/index.ts b/src/lib/profile-provider/profile-functions/profile-store/index.ts
new file mode 100644
index 000000000..45fc8b9cc
--- /dev/null
+++ b/src/lib/profile-provider/profile-functions/profile-store/index.ts
@@ -0,0 +1 @@
+export * from './profile-xhr.store'
diff --git a/src/lib/profile-provider/profile-functions/profile-store/profile-endpoint.config.ts b/src/lib/profile-provider/profile-functions/profile-store/profile-endpoint.config.ts
new file mode 100644
index 000000000..4dc01694b
--- /dev/null
+++ b/src/lib/profile-provider/profile-functions/profile-store/profile-endpoint.config.ts
@@ -0,0 +1,5 @@
+import { EnvironmentConfig } from '../../../../config'
+
+export function profile(handle: string): string {
+    return `${EnvironmentConfig.API.V5}/members/${handle}`
+}
diff --git a/src/lib/profile-provider/profile-functions/profile-store/profile-xhr.store.ts b/src/lib/profile-provider/profile-functions/profile-store/profile-xhr.store.ts
new file mode 100644
index 000000000..1bd1d703c
--- /dev/null
+++ b/src/lib/profile-provider/profile-functions/profile-store/profile-xhr.store.ts
@@ -0,0 +1,13 @@
+import { get as xhrGet, put as xhrPut } from '../../../functions'
+import { UserProfileDetail } from '../../user-profile-detail.model'
+import { UserProfile } from '../../user-profile.model'
+
+import { profile as profileUrl } from './profile-endpoint.config'
+
+export async function get(handle: string): Promise<UserProfileDetail> {
+    return xhrGet<UserProfileDetail>(profileUrl(handle))
+}
+
+export async function put(handle: string, profile: UserProfile): Promise<UserProfile> {
+    return xhrPut<UserProfile>(profileUrl(handle), profile)
+}
diff --git a/src/lib/profile-provider/profile-functions/profile.functions.test.ts b/src/lib/profile-provider/profile-functions/profile.functions.test.ts
new file mode 100644
index 000000000..c77886f77
--- /dev/null
+++ b/src/lib/profile-provider/profile-functions/profile.functions.test.ts
@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom'
+
+describe('Profile Functions', () => {
+
+    test('TODO', () => {
+
+    })
+})
diff --git a/src/lib/profile-provider/profile-functions/profile.functions.ts b/src/lib/profile-provider/profile-functions/profile.functions.ts
new file mode 100644
index 000000000..5b1c264ea
--- /dev/null
+++ b/src/lib/profile-provider/profile-functions/profile.functions.ts
@@ -0,0 +1,14 @@
+import { get as tokenGet } from '../../functions/token-functions'
+import { UserProfileDetail } from '../user-profile-detail.model'
+import { UserProfile } from '../user-profile.model'
+
+import { get as storeGet, put as storePut } from './profile-store'
+
+export async function get(handle?: string): Promise<UserProfileDetail | undefined> {
+    handle = handle || (await tokenGet())?.handle
+    return !handle ? Promise.resolve(undefined) : storeGet(handle)
+}
+
+export async function update(handle: string, profile: UserProfile): Promise<UserProfile | undefined> {
+    return storePut(handle, profile)
+}
diff --git a/src/lib/profile-provider/profile-routes-config.model.ts b/src/lib/profile-provider/profile-routes-config.model.ts
deleted file mode 100644
index a7d789534..000000000
--- a/src/lib/profile-provider/profile-routes-config.model.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface ProfileRouteConfigModel {
-    readonly profile: string
-}
diff --git a/src/lib/profile-provider/profile-routes-config.service.ts b/src/lib/profile-provider/profile-routes-config.service.ts
deleted file mode 100644
index 8fff6dbab..000000000
--- a/src/lib/profile-provider/profile-routes-config.service.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export class ProfileRouteConfigService {
-
-    readonly profile: string = 'profile'
-}
diff --git a/src/lib/profile-provider/profile-routes.config.ts b/src/lib/profile-provider/profile-routes.config.ts
index 5f8bdbfb2..b5307c8be 100644
--- a/src/lib/profile-provider/profile-routes.config.ts
+++ b/src/lib/profile-provider/profile-routes.config.ts
@@ -1,10 +1 @@
-import { ProfileRouteConfigModel } from './profile-routes-config.model'
-import { ProfileRouteConfigService } from './profile-routes-config.service'
-
-const service: ProfileRouteConfigService = new ProfileRouteConfigService()
-
-const profileRoutesConfig: ProfileRouteConfigModel = {
-    profile: service.profile,
-}
-
-export default profileRoutesConfig
+export const profile: string = 'profile'
diff --git a/src/lib/profile-provider/profile-service/index.ts b/src/lib/profile-provider/profile-service/index.ts
deleted file mode 100644
index 2a8452e4c..000000000
--- a/src/lib/profile-provider/profile-service/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './profile.service'
diff --git a/src/lib/profile-provider/profile-service/profile-store/index.ts b/src/lib/profile-provider/profile-service/profile-store/index.ts
deleted file mode 100644
index cbddcc22e..000000000
--- a/src/lib/profile-provider/profile-service/profile-store/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './profile-fetch.store'
diff --git a/src/lib/profile-provider/profile-service/profile-store/profile-endpoint-config.model.ts b/src/lib/profile-provider/profile-service/profile-store/profile-endpoint-config.model.ts
deleted file mode 100644
index 9f3d354ce..000000000
--- a/src/lib/profile-provider/profile-service/profile-store/profile-endpoint-config.model.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface ProfileEndpointConfigModel {
-    readonly profile: (handle: string) => string
-}
diff --git a/src/lib/profile-provider/profile-service/profile-store/profile-endpoint-config.service.ts b/src/lib/profile-provider/profile-service/profile-store/profile-endpoint-config.service.ts
deleted file mode 100644
index 97eb2ce92..000000000
--- a/src/lib/profile-provider/profile-service/profile-store/profile-endpoint-config.service.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { EnvironmentConfig } from '../../../../config'
-
-export class ProfileEndpointConfigService {
-
-    profile(handle: string): string {
-        return `${EnvironmentConfig.API.V5}/members/${handle}`
-    }
-}
diff --git a/src/lib/profile-provider/profile-service/profile-store/profile-endpoint.config.ts b/src/lib/profile-provider/profile-service/profile-store/profile-endpoint.config.ts
deleted file mode 100644
index 9b9a1e112..000000000
--- a/src/lib/profile-provider/profile-service/profile-store/profile-endpoint.config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ProfileEndpointConfigModel } from './profile-endpoint-config.model'
-import { ProfileEndpointConfigService } from './profile-endpoint-config.service'
-
-const service: ProfileEndpointConfigService = new ProfileEndpointConfigService()
-
-const profileEndpointConfig: ProfileEndpointConfigModel = {
-    profile: service.profile,
-}
-
-export default profileEndpointConfig
diff --git a/src/lib/profile-provider/profile-service/profile-store/profile-fetch.store.ts b/src/lib/profile-provider/profile-service/profile-store/profile-fetch.store.ts
deleted file mode 100644
index 91a498e9a..000000000
--- a/src/lib/profile-provider/profile-service/profile-store/profile-fetch.store.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FetchService } from '../../../services'
-import { UserProfile } from '../../user-profile.model'
-
-import { default as ProfileEndpointConfig } from './profile-endpoint.config'
-
-export class ProfileFetchStore {
-
-    private fetchService: FetchService = new FetchService()
-
-    async get(token: string, handle: string): Promise<UserProfile> {
-
-        const url: string = ProfileEndpointConfig.profile(handle)
-        const method: { method: string } = this.fetchService.methods.get
-
-        const userProfileJson: Response = await this.fetchService.getFetcher(token)(url, method)
-        return userProfileJson.json() || {}
-    }
-}
diff --git a/src/lib/profile-provider/profile-service/profile.service.ts b/src/lib/profile-provider/profile-service/profile.service.ts
deleted file mode 100644
index f28db213b..000000000
--- a/src/lib/profile-provider/profile-service/profile.service.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { decodeToken } from 'tc-auth-lib'
-
-import { AuthenticationService } from '../../services/authentication-service'
-import { LoggingService } from '../../services/logging-service'
-import { UserProfile } from '../user-profile.model'
-
-import { ProfileFetchStore } from './profile-store'
-
-export class ProfileService {
-
-    private readonly authenticationService: AuthenticationService = new AuthenticationService()
-    private readonly loggingService: LoggingService = new LoggingService()
-    private readonly profileFetchStore: ProfileFetchStore = new ProfileFetchStore()
-
-    async get(): Promise<UserProfile | undefined> {
-
-        const token: string | undefined = await this.authenticationService.authenticate()
-
-        // if there is no token, don't try to get a profile
-        if (!token) {
-            return Promise.resolve(undefined)
-        }
-
-        try {
-            const { handle }: { handle?: string } = decodeToken(token)
-
-            // if we didn't find the handle, we can't get the profile
-            if (!handle) {
-                this.loggingService.logInfo(`token did not have a handle: ${token}`)
-                return Promise.resolve(undefined)
-            }
-
-            return this.profileFetchStore.get(token, handle)
-
-        } catch (error: any) {
-            this.loggingService.logError(error)
-            return Promise.resolve(undefined)
-        }
-    }
-}
diff --git a/src/lib/profile-provider/profile.context.tsx b/src/lib/profile-provider/profile.context.tsx
index 4f60ac923..8a7351768 100644
--- a/src/lib/profile-provider/profile.context.tsx
+++ b/src/lib/profile-provider/profile.context.tsx
@@ -4,6 +4,8 @@ import { ProfileContextData } from './profile-context-data.model'
 
 export const defaultProfileContextData: ProfileContextData = {
     initialized: false,
+    updatePassword: () => Promise.resolve(),
+    updateProfile: () => Promise.resolve(),
 }
 
 const ProfileContext: Context<ProfileContextData> = createContext(defaultProfileContextData)
diff --git a/src/lib/profile-provider/profile.provider.tsx b/src/lib/profile-provider/profile.provider.tsx
index d297ab458..f62fd2411 100644
--- a/src/lib/profile-provider/profile.provider.tsx
+++ b/src/lib/profile-provider/profile.provider.tsx
@@ -1,13 +1,39 @@
 import { Dispatch, FC, ReactNode, SetStateAction, useEffect, useState } from 'react'
 
+import { updatePassword as updateUserPassword } from '../functions'
+
 import { ProfileContextData } from './profile-context-data.model'
-import { ProfileService } from './profile-service'
+import { get as profileGet, update as profileUpdate } from './profile-functions'
 import { default as ProfileContext, defaultProfileContextData } from './profile.context'
+import { UserProfileDetail } from './user-profile-detail.model'
 import { UserProfile } from './user-profile.model'
 
 export const ProfileProvider: FC<{ children: ReactNode }> = ({ children }: { children: ReactNode }) => {
 
-    const [profileContext, setProfileContext]: [ProfileContextData, Dispatch<SetStateAction<ProfileContextData>>] = useState<ProfileContextData>(defaultProfileContextData)
+    const [profileContext, setProfileContext]: [ProfileContextData, Dispatch<SetStateAction<ProfileContextData>>]
+        = useState<ProfileContextData>(defaultProfileContextData)
+
+    function updatePassword(userId: number, currentPassword: string, password: string): Promise<void> {
+        return updateUserPassword(userId, currentPassword, password)
+    }
+
+    function updateProfile(updatedContext: ProfileContextData): Promise<void> {
+
+        const { profile }: ProfileContextData = updatedContext
+
+        if (!profile) {
+            throw new Error('Cannot update an undefined profile')
+        }
+
+        const updatedProfile: UserProfile = {
+            email: profile.email,
+            firstName: profile.firstName,
+            lastName: profile.lastName,
+        }
+
+        return profileUpdate(profile.handle, updatedProfile)
+            .then(() => setProfileContext(updatedContext))
+    }
 
     useEffect(() => {
 
@@ -17,18 +43,18 @@ export const ProfileProvider: FC<{ children: ReactNode }> = ({ children }: { chi
         }
 
         const getAndSetProfile: () => Promise<void> = async () => {
-            const profile: UserProfile | undefined = await new ProfileService().get()
+            const profile: UserProfileDetail | undefined = await profileGet()
             const contextData: ProfileContextData = {
                 initialized: true,
                 profile,
+                updatePassword,
+                updateProfile,
             }
             setProfileContext(contextData)
         }
 
         getAndSetProfile()
-    }, [
-        profileContext.initialized,
-    ])
+    })
 
     return (
         <ProfileContext.Provider value={profileContext}>
diff --git a/src/lib/profile-provider/user-profile-detail.model.ts b/src/lib/profile-provider/user-profile-detail.model.ts
new file mode 100644
index 000000000..29a9614fc
--- /dev/null
+++ b/src/lib/profile-provider/user-profile-detail.model.ts
@@ -0,0 +1,13 @@
+import { UserProfile } from './user-profile.model'
+
+export interface UserProfileDetail extends UserProfile {
+    competitionCountryCode: string
+    createdAt: number
+    handle: string
+    handleLower: string
+    homeCountryCode: string
+    photoURL?: string
+    status: string
+    updatedAt: number
+    userId: number
+}
diff --git a/src/lib/profile-provider/user-profile.model.ts b/src/lib/profile-provider/user-profile.model.ts
index 96ede70d0..5136269bc 100644
--- a/src/lib/profile-provider/user-profile.model.ts
+++ b/src/lib/profile-provider/user-profile.model.ts
@@ -1,14 +1,5 @@
 export interface UserProfile {
-    competitionCountryCode: string
-    createdAt: number
     email: string
     firstName: string
-    handle: string
-    handleLower: string
-    homeCountryCode: string
     lastName: string
-    photoURL?: string
-    status: string
-    updatedAt: number
-    userId: number
 }
diff --git a/src/lib/services/analytics-service/analytics.service.test.ts b/src/lib/services/analytics-service/analytics.service.test.ts
deleted file mode 100644
index 36c3f3fec..000000000
--- a/src/lib/services/analytics-service/analytics.service.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@testing-library/jest-dom'
-
-describe('Analytics Service', () => {
-
-    test('analytics', () => {})
-})
diff --git a/src/lib/services/analytics-service/analytics.service.ts b/src/lib/services/analytics-service/analytics.service.ts
deleted file mode 100644
index cbfac2fb4..000000000
--- a/src/lib/services/analytics-service/analytics.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import TagManager from 'react-gtm-module'
-
-import { GlobalConfig } from '../../global-config.model'
-
-export class AnalyticsService {
-
-    initialize(config: GlobalConfig): void {
-
-        // if we don't have an ID
-        // then tags aren't supported in this environment,
-        // so don't initialize anything
-        if (!config.TAG_MANAGER_ID) {
-            return
-        }
-
-        TagManager.initialize({
-            gtmId: config.TAG_MANAGER_ID,
-        })
-    }
-}
diff --git a/src/lib/services/analytics-service/index.ts b/src/lib/services/analytics-service/index.ts
deleted file mode 100644
index 93b055f35..000000000
--- a/src/lib/services/analytics-service/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './analytics.service'
diff --git a/src/lib/services/authentication-service/authentication-url-config.model.ts b/src/lib/services/authentication-service/authentication-url-config.model.ts
deleted file mode 100644
index 2265db675..000000000
--- a/src/lib/services/authentication-service/authentication-url-config.model.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface AuthenticationUrlConfigModel {
-    readonly authentication: string
-    readonly login: (fallback: string) => string
-    readonly logout: string
-    readonly signup: (fallback: string) => string
-}
diff --git a/src/lib/services/authentication-service/authentication-url-config.service.ts b/src/lib/services/authentication-service/authentication-url-config.service.ts
deleted file mode 100644
index 6f73c6ee1..000000000
--- a/src/lib/services/authentication-service/authentication-url-config.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { EnvironmentConfig } from '../../../config'
-
-export class AuthenticationUrlConfigService {
-
-    readonly authentication: string = EnvironmentConfig.URL.ACCOUNTS_APP_CONNECTOR
-
-    get logout(): string {
-        return `${this.authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}`
-    }
-
-    login(fallback: string): string {
-        return `${this.authentication}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}`
-    }
-
-    signup(fallback: string): string {
-        return `${this.login(fallback)}&regSource=tcBusiness&mode=signUp`
-    }
-}
diff --git a/src/lib/services/authentication-service/authentication-url.config.ts b/src/lib/services/authentication-service/authentication-url.config.ts
deleted file mode 100644
index 8730a68a8..000000000
--- a/src/lib/services/authentication-service/authentication-url.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { AuthenticationUrlConfigModel } from './authentication-url-config.model'
-import { AuthenticationUrlConfigService } from './authentication-url-config.service'
-
-const service: AuthenticationUrlConfigService = new AuthenticationUrlConfigService()
-
-const authenticationUrlConfig: AuthenticationUrlConfigModel = {
-    authentication: service.authentication,
-    login: service.login,
-    logout: service.logout,
-    signup: service.signup,
-}
-
-export default authenticationUrlConfig
diff --git a/src/lib/services/authentication-service/authentication.service.ts b/src/lib/services/authentication-service/authentication.service.ts
deleted file mode 100644
index 78e62746c..000000000
--- a/src/lib/services/authentication-service/authentication.service.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import cookies from 'browser-cookies'
-import { configureConnector, decodeToken, getFreshToken } from 'tc-auth-lib'
-
-import { User } from '../../../../types/tc-auth-lib'
-import { EnvironmentConfig } from '../../../config'
-import { LoggingService } from '../logging-service'
-
-import { default as AuthenticationUrlConfig } from './authentication-url.config'
-import { CookieKeys } from './cookie-keys.enum'
-
-interface TokenData {
-    tokenV2?: string
-    tokenV3?: string
-}
-
-export class AuthenticationService {
-
-    private readonly loggingService: LoggingService = new LoggingService()
-
-    constructor() {
-        configureConnector({
-            connectorUrl: AuthenticationUrlConfig.authentication,
-            frameId: 'tc-accounts-iframe',
-            mockMode: undefined,
-            mockToken: undefined,
-        })
-    }
-
-    async authenticate(): Promise<string | undefined> {
-
-        return getFreshToken()
-            .then((tokenV3: string) => {
-                const tokenV2: string | null = cookies.get(CookieKeys.tcjwt)
-                return {
-                    tokenV2,
-                    tokenV3,
-                }
-            })
-            .catch((error: Error) => {
-                this.loggingService.logError(error?.message || `${error}` || 'unknown error getting authentication token')
-                return {}
-            })
-            .then((token: TokenData) => {
-                this.handleRefresh(token)
-                return token.tokenV3
-            })
-    }
-
-    private handleRefresh(token: TokenData): number {
-
-        let time: number = Number.MAX_VALUE
-
-        const user: User = !!token.tokenV3 ? decodeToken(token.tokenV3) : {}
-
-        // if we havea tctv2, use its expiration
-        if (!!token.tokenV2) {
-            time = decodeToken(token.tokenV2).exp
-        }
-
-        // if we have a user, take the min btwn
-        // the current time and the uservl expiration
-        if (!!user.exp) {
-            time = Math.min(time, user.exp)
-        }
-
-        if (time < Number.MAX_VALUE) {
-            time = 1000 * (time - EnvironmentConfig.REAUTH_OFFSET)
-            time = Math.max(0, time - Date.now())
-            setTimeout(() => this.authenticate(), time)
-        }
-
-        return time
-    }
-}
diff --git a/src/lib/services/authentication-service/index.ts b/src/lib/services/authentication-service/index.ts
deleted file mode 100644
index 980411ff6..000000000
--- a/src/lib/services/authentication-service/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as AuthenticationUrlConfig } from './authentication-url.config'
-export * from './authentication.service'
diff --git a/src/lib/services/fetch-service/fetch.service.test.ts b/src/lib/services/fetch-service/fetch.service.test.ts
deleted file mode 100644
index 6e5f4a3f3..000000000
--- a/src/lib/services/fetch-service/fetch.service.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@testing-library/jest-dom'
-
-describe('Fetch Service', () => {
-
-    test('', () => {})
-})
diff --git a/src/lib/services/fetch-service/fetch.service.ts b/src/lib/services/fetch-service/fetch.service.ts
deleted file mode 100644
index c35d1c016..000000000
--- a/src/lib/services/fetch-service/fetch.service.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export class FetchService {
-
-    methods: {
-        get: {
-            method: string
-        }
-    } = {
-            get: {
-                method: 'get',
-            },
-        }
-
-    getFetcher(token: string): (endpoint: string, options: RequestInit) => Promise<Response> {
-
-        const fetcher: (endpoint: string, options: RequestInit) => Promise<Response> = (endpoint: string, options: RequestInit = {}) => {
-
-            const headers: any = options.headers ? { ...options.headers } : {}
-
-            if (token) {
-                headers.Authorization = `Bearer ${token}`
-            }
-
-            const contentTypeKey: string = 'Content-Type'
-            switch (headers[contentTypeKey]) {
-                // tslint:disable-next-line: no-null-keyword
-                case null:
-                    delete headers[contentTypeKey]
-                    break
-                case undefined:
-                    headers[contentTypeKey] = 'application/json'
-                    break
-                default:
-            }
-
-            return fetch(`${endpoint}`, {
-                ...options,
-                headers,
-            })
-        }
-
-        return fetcher
-    }
-}
diff --git a/src/lib/services/fetch-service/index.ts b/src/lib/services/fetch-service/index.ts
deleted file mode 100644
index 3abe988a4..000000000
--- a/src/lib/services/fetch-service/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './fetch.service'
diff --git a/src/lib/services/index.ts b/src/lib/services/index.ts
deleted file mode 100644
index 569a0e33d..000000000
--- a/src/lib/services/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './analytics-service'
-export { AuthenticationUrlConfig } from './authentication-service'
-export * from './fetch-service'
-export * from './logging-service'
diff --git a/src/lib/services/logging-service/index.ts b/src/lib/services/logging-service/index.ts
deleted file mode 100644
index f25702db5..000000000
--- a/src/lib/services/logging-service/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './logging.service'
diff --git a/src/lib/services/logging-service/logging.service.ts b/src/lib/services/logging-service/logging.service.ts
deleted file mode 100644
index 39836c780..000000000
--- a/src/lib/services/logging-service/logging.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { datadogLogs } from '@datadog/browser-logs'
-
-import { GlobalConfig } from '../../global-config.model'
-
-export class LoggingService {
-
-    initialize(config: GlobalConfig): void {
-
-        // if we don't have a token and service,
-        // logging isn't supported in this environment,
-        // so don't initialize anything
-        if (!config.LOGGING?.PUBLIC_TOKEN || !config.LOGGING?.SERVICE) {
-            return
-        }
-
-        datadogLogs.init({
-            clientToken: config.LOGGING.PUBLIC_TOKEN,
-            env: config.ENV,
-            service: config.LOGGING.SERVICE,
-            silentMultipleInit: true,
-        })
-
-        this.logInfo(`initialized logging for ${config.ENV}`)
-    }
-
-    logError(message: string, messageContext?: object): void {
-        datadogLogs.logger.error(message, messageContext)
-    }
-
-    logInfo(message: string, messageContext?: object): void {
-        datadogLogs.logger.info(message, messageContext)
-    }
-}
diff --git a/src/lib/styles/_buttons.scss b/src/lib/styles/_buttons.scss
index 588623871..850663249 100644
--- a/src/lib/styles/_buttons.scss
+++ b/src/lib/styles/_buttons.scss
@@ -7,38 +7,103 @@ a {
     text-decoration: none;
 }
 
-// TODO: are our buttons actually chips?
-a.button {
+.button {
     color: $tc-white;
     text-transform: uppercase;
-    padding: 10px 15px;
     border-radius: 25px;
+    border: solid $border;
     white-space: nowrap;
+    cursor: pointer;
+    margin: $pad-md;
     // extend body ultra small medium and override it
     @extend .body-ultra-small-medium;
-    line-height: 12px;
+    line-height: 24px;
+
+    &.button-sm {
+        padding: 0 $pad-lg;
+        font-size: 12px;
+    }
     
-    &.secondary,
-    &.all-white {
-        color: $turq-160;
-        border: solid 1px;
+    &.button-md {
+        padding: $pad-xs $pad-xl;
+        font-size: 13px;
+    }
+
+    &.button-lg {
+        padding: $pad-sm $pad-xxl;
+        font-size: 14px;
+    }
+    
+    &.button-xl {
+        padding: $pad-md $pad-xxl;
+        font-size: 16px;
+    }
+
+    &.primary {
+        color: $tc-white;
+        background-color: $turq-160;
+        border-color: $turq-160;
+
+        &:hover {
+            background-color: $turq-140;
+            border-color: $turq-140;
+        }
+
+        &:active {
+            background-color: $turq-180;
+            border-color: $turq-180;
+        }
+
+        &.disabled {
+            color: $black-60;
+            background-color: $black-5;
+            border-color: $black-5;
+        }
     }
 
     &.secondary {
+        color: $turq-160;
+        background-color: $tc-white;
         border-color: $turq-160;
+
+        &:hover {
+            border-color: $turq-140;
+        }
+
+        &:active {
+            border-color: $turq-180;
+        }
+
+        &:disabled {
+            color: $black-60;
+            background-color: $black-5;
+            border-color: $black-5;
+        }
     }
 
-    &.all-white {
+    &.tertiary {
+        color: $turq-160;
         background-color: $tc-white;
         border-color: $tc-white;
-        @include font-weight-medium;
 
         &:hover {
+            color: $turq-140;
             box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
         }
 
         &:active {
+            color: $turq-180;
             box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
         }
+
+        &:disabled {
+            color: $black-60;
+            background-color: $tc-white;
+            border-color: $black-5;
+        }
+    }
+
+    &.text {
+        border-color: transparent;
     }
 }
diff --git a/src/utils/profile/Profile.tsx b/src/utils/profile/Profile.tsx
index 2b96e108c..d2b148a82 100644
--- a/src/utils/profile/Profile.tsx
+++ b/src/utils/profile/Profile.tsx
@@ -1,91 +1,143 @@
-import { FC, useContext } from 'react'
+import { Dispatch, FC, FormEvent, SetStateAction, useContext, useState } from 'react'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
 
 import {
+    Button,
     ContentLayout,
-    FormField,
+    FormDefinition,
+    getFormInput,
+    getFormValue,
+    loginUrl,
     ProfileContext,
     ProfileContextData,
+    routeRoot,
     TextInput,
+    TextInputModel,
+    UserProfileDetail,
+    validateAndUpdateForm,
 } from '../../lib'
 
+import { FieldNames, profileFormDef } from './profile-form.config'
 import styles from './Profile.module.scss'
 
 export const utilTitle: string = 'Profile'
 
 const Profile: FC<{}> = () => {
 
-    const { profile }: ProfileContextData = useContext(ProfileContext)
+    const profileContext: ProfileContextData = useContext(ProfileContext)
+    const { profile, updateProfile, updatePassword }: ProfileContextData = profileContext
 
-    // if we don't have a profile, we have a problem
-    // TODO: figure out how to lock down the profile
-    // so that it requires authentication
+    const [disableButton, setDisableButton]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(true)
+
+    const [profileForm, setProfileForm]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
+        = useState<FormDefinition>(profileFormDef)
+
+    const navigate: NavigateFunction = useNavigate()
+
+    // if we don't have a profile, navigate to the login page
     if (!profile) {
+        navigate(loginUrl(routeRoot))
         return <></>
     }
 
-    // TODO: validation
+    // need to define this here so the compiler
+    // knows that the profile will never be undefined
+    const updatedProfile: UserProfileDetail = {
+        ...profile,
+    }
+
+    function onChange(event: FormEvent<HTMLFormElement>): void {
+        const isValid: boolean = validateAndUpdateForm(event, profileForm, setProfileForm)
+        setDisableButton(!isValid)
+    }
+
+    function onSubmit(event: FormEvent<HTMLFormElement>): void {
+
+        event.preventDefault()
+
+        setDisableButton(true)
+
+        // all the profile fields on this form
+        const profileFields: Array<string> = [FieldNames.email, FieldNames.firstName, FieldNames.lastName]
+
+        const formValues: HTMLFormControlsCollection = (event.target as HTMLFormElement).elements
+
+        Object.keys(updatedProfile)
+            .filter(key => profileFields.includes(key))
+            .forEach(key => (updatedProfile as any)[key] = getFormValue(formValues, key))
+
+        const updatedContext: ProfileContextData = {
+            ...profileContext,
+            profile: updatedProfile,
+        }
+
+        const currentPassword: string = getFormValue(formValues, FieldNames.currentPassword)
+        const password: string = getFormValue(formValues, FieldNames.newPassword)
+
+        // TODO: check profile is dirty
+        updateProfile(updatedContext)
+            .then(() => !!password ? updatePassword(updatedProfile.userId, currentPassword, password) : Promise.resolve())
+            .then(() => {
+                getFormInput(formValues, FieldNames.currentPassword).value = ''
+                getFormInput(formValues, FieldNames.newPassword).value = ''
+                getFormInput(formValues, FieldNames.confirmPassword).value = ''
+                setDisableButton(false)
+            })
+    }
+
+    function renderFormField(fieldName: string, currentTabIndex: number): JSX.Element {
+
+        const formField: TextInputModel = (profileForm as any)[fieldName]
+
+        return (
+            <TextInput
+                {...formField}
+                tabIndex={currentTabIndex}
+                type={formField.type || 'text'}
+                value={(profile as any)[formField.name]}
+            />
+        )
+    }
 
     let tabIndex: number = 1
 
     return (
         <ContentLayout title={utilTitle}>
 
-            <h3>Basic Information</h3>
-
-            <div className={styles.profile}>
-
-                <FormField disabled label='Username' tabIndex={-1}>
-                    <TextInput name='username' props={{
-                        defaultValue: profile.handle,
-                        disabled: true,
-                    }} />
-                </FormField>
-
-                <FormField label='Email' tabIndex={tabIndex++}>
-                    <TextInput name='email' props={{
-                        defaultValue: profile.email,
-                    }} />
-                </FormField>
-
-                <FormField label='First Name' tabIndex={tabIndex++}>
-                    <TextInput name='firstName' props={{
-                        defaultValue: profile.firstName,
-                    }} />
-                </FormField>
-
-                <FormField label='Last Name' tabIndex={tabIndex++}>
-                    <TextInput name='lastName' props={{
-                        defaultValue: profile.lastName,
-                    }} />
-                </FormField>
-
-            </div>
-
-            <h3>Reset Password</h3>
-
-            <div className={styles.profile}>
-
-                <FormField label='Current Password' tabIndex={tabIndex++}>
-                    <TextInput name='currentPassword' props={{
-                        autoComplete: 'off',
-                        placeholder: 'type your current password',
-                    }} />
-                </FormField>
-
-                <FormField label='Password' tabIndex={tabIndex++}>
-                    <TextInput name='password' props={{
-                        autoComplete: 'off',
-                        placeholder: 'type your new password',
-                    }} />
-                </FormField>
-
-                <FormField label='Confirm Password' tabIndex={tabIndex++}>
-                    <TextInput name='confirmPassword' props={{
-                        autoComplete: 'off',
-                        placeholder: 're-type your new password',
-                    }} />
-                </FormField>
-            </div>
+            <form
+                action={''}
+                onChange={onChange}
+                onSubmit={onSubmit}
+            >
+
+                <h3>Basic Information</h3>
+
+                <div className={styles.profile}>
+                    {renderFormField(FieldNames.handle, -1)}
+                    {renderFormField(FieldNames.email, tabIndex++)}
+                    {renderFormField(FieldNames.firstName, tabIndex++)}
+                    {renderFormField(FieldNames.lastName, tabIndex++)}
+                </div>
+
+                <h3>Reset Password</h3>
+
+                <div className={styles.profile}>
+                    {renderFormField(FieldNames.currentPassword, tabIndex++)}
+                    {renderFormField(FieldNames.newPassword, tabIndex++)}
+                    {renderFormField(FieldNames.confirmPassword, tabIndex++)}
+                </div>
+
+                <div>
+                    <Button
+                        disable={disableButton}
+                        label='Save'
+                        size='xl'
+                        buttonStyle='secondary'
+                        type='submit' />
+                </div>
+
+            </form>
 
         </ContentLayout >
     )
diff --git a/src/utils/profile/profile-form.config.ts b/src/utils/profile/profile-form.config.ts
new file mode 100644
index 000000000..c67b270ed
--- /dev/null
+++ b/src/utils/profile/profile-form.config.ts
@@ -0,0 +1,77 @@
+import { emailValidator, FormDefinition, requiredIfOtherValidator, requiredValidator } from '../../lib'
+
+export enum FieldNames {
+    confirmPassword = 'confirmPassword',
+    currentPassword = 'password',
+    email = 'email',
+    firstName = 'firstName',
+    handle = 'handle',
+    lastName = 'lastName',
+    newPassword = 'newPassword',
+}
+
+export const profileFormDef: FormDefinition = {
+    confirmPassword: {
+        label: 'Confirm Password',
+        name: FieldNames.confirmPassword,
+        placeholder: 're-type your new password',
+        requiredIfField: FieldNames.newPassword,
+        type: 'password',
+        validators: [
+            requiredIfOtherValidator,
+        ],
+    },
+    email: {
+        label: 'Email',
+        name: FieldNames.email,
+        type: 'text',
+        validators: [
+            requiredValidator,
+            emailValidator,
+        ],
+    },
+    firstName: {
+        label: 'First Name',
+        name: FieldNames.firstName,
+        type: 'text',
+        validators: [
+            requiredValidator,
+        ],
+    },
+    handle: {
+        disabled: true,
+        label: 'Username',
+        name: FieldNames.handle,
+        type: 'text',
+        validators: [],
+    },
+    lastName: {
+        label: 'Last Name',
+        name: FieldNames.lastName,
+        type: 'text',
+        validators: [
+            requiredValidator,
+        ],
+    },
+    newPassword: {
+        dependentFields: [
+            FieldNames.confirmPassword,
+            FieldNames.currentPassword,
+        ],
+        label: 'New Password',
+        name: FieldNames.newPassword,
+        placeholder: 'type your new password',
+        type: 'password',
+        validators: [],
+    },
+    password: {
+        label: 'Current Password',
+        name: FieldNames.currentPassword,
+        placeholder: 'type your current password',
+        requiredIfField: FieldNames.newPassword,
+        type: 'password',
+        validators: [
+            requiredIfOtherValidator,
+        ],
+    },
+}
diff --git a/yarn.lock b/yarn.lock
index 004ce4d37..c7862aca2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1647,6 +1647,13 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
   integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
 
+"@types/axios@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
+  integrity sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=
+  dependencies:
+    axios "*"
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
   version "7.1.18"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.18.tgz#1a29abcc411a9c05e2094c98f9a1b7da6cdf49f8"
@@ -2499,6 +2506,13 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
+axios@*, axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4286,7 +4300,7 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==