diff --git a/src/app/components/book-checkbox/book-checkbox.tsx b/src/app/components/book-checkbox/book-checkbox.tsx
index 012a83138..8f447cd5b 100644
--- a/src/app/components/book-checkbox/book-checkbox.tsx
+++ b/src/app/components/book-checkbox/book-checkbox.tsx
@@ -2,13 +2,19 @@ import React from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
 import {treatSpaceOrEnterAsClick} from '~/helpers/events';
-import type { SalesforceBook } from '~/helpers/books';
+import type {SalesforceBook} from '~/helpers/books';
 import cn from 'classnames';
 import './book-checkbox.scss';
 
-export default function BookCheckbox({book, name, checked, toggle, disabled}: {
+export default function BookCheckbox({
+    book,
+    name,
+    checked,
+    toggle,
+    disabled
+}: {
     book: SalesforceBook;
-    name: string;
+    name?: string;
     checked: boolean;
     toggle: (b: SalesforceBook) => void;
     disabled?: boolean;
@@ -36,6 +42,7 @@ export default function BookCheckbox({book, name, checked, toggle, disabled}: {
                 className="indicator"
                 tabIndex={disabled ? -1 : 0}
                 role="checkbox"
+                aria-label={label}
                 aria-checked={checked}
                 aria-disabled={disabled}
                 onKeyDown={treatSpaceOrEnterAsClick}
diff --git a/src/app/components/book-selector/book-selector.tsx b/src/app/components/book-selector/book-selector.tsx
index 9973c3a89..51390ffcb 100644
--- a/src/app/components/book-selector/book-selector.tsx
+++ b/src/app/components/book-selector/book-selector.tsx
@@ -18,7 +18,7 @@ function Subject({
 }: {
     subject: string;
     books: SalesforceBook[];
-    name: string;
+    name?: string;
     selectedBooks: SalesforceBook[];
     toggleBook: (b: SalesforceBook) => void;
     limitReached: boolean;
@@ -64,12 +64,12 @@ const defaultIncludeFilter = () => true;
 
 type PropsFromOutside = {
     prompt: string;
-    name: string;
+    name?: string;
     selectedBooks: SalesforceBook[];
     toggleBook: (b: SalesforceBook) => void;
     limit?: number;
     additionalInstructions?: string;
-    includeFilter?: () => boolean;
+    includeFilter?: (b: SalesforceBook) => boolean;
 };
 
 type Books = Parameters<typeof salesforceTitles>[0]
diff --git a/src/app/components/form-input/form-input.tsx b/src/app/components/form-input/form-input.tsx
index f861b309b..a57bef88e 100644
--- a/src/app/components/form-input/form-input.tsx
+++ b/src/app/components/form-input/form-input.tsx
@@ -152,7 +152,7 @@ export default function FormInput({
     inputProps,
     suggestions
 }: {
-    label: string;
+    label?: string;
     longLabel?: string;
     inputProps: InputProps;
     suggestions?: string[];
@@ -211,7 +211,11 @@ export default function FormInput({
     return (
         <label className="form-input">
             <div className="control-group">
-                {label && <label className="field-label" htmlFor={id}>{label}</label>}
+                {label && (
+                    <label className="field-label" htmlFor={id}>
+                        {label}
+                    </label>
+                )}
                 {longLabel && (
                     <label className="field-long-label">{longLabel}</label>
                 )}
diff --git a/src/app/components/multi-page-form/multi-page-form.tsx b/src/app/components/multi-page-form/multi-page-form.tsx
index 0711600d9..54426a8c8 100644
--- a/src/app/components/multi-page-form/multi-page-form.tsx
+++ b/src/app/components/multi-page-form/multi-page-form.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import usePaginatorContext, {PaginatorContextProvider} from '~/components/paginator/paginator-context';
+import usePaginatorContext, {
+    PaginatorContextProvider
+} from '~/components/paginator/paginator-context';
 import usePagesContext, {PagesContextProvider} from './pages-context';
 import {FormattedMessage} from 'react-intl';
 import ButtonRow from './buttons';
@@ -13,24 +15,22 @@ function MarkupChildren({children}: {children: React.ReactNode[]}) {
     const {isVisible} = usePaginatorContext();
     const {validatedPages, activeRef} = usePagesContext();
 
-    return (
-        children.map((child, i) => {
-            const isActive = isVisible(i);
-            const pageNumber = i + 1;
-            const isValidated = pageNumber in validatedPages;
+    return children.map((child, i) => {
+        const isActive = isVisible(i);
+        const pageNumber = i + 1;
+        const isValidated = pageNumber in validatedPages;
 
-            return (
-                <div
-                    className={isValidated ? 'validated' : undefined}
-                    hidden={!isActive}
-                    ref={isActive ? activeRef : null}
-                    key={i}
-                >
-                    {child}
-                </div>
-            );
-        })
-    );
+        return (
+            <div
+                className={isValidated ? 'validated' : undefined}
+                hidden={!isActive}
+                ref={isActive ? activeRef : null}
+                key={i}
+            >
+                {child}
+            </div>
+        );
+    });
 }
 
 function PageCount() {
@@ -39,15 +39,18 @@ function PageCount() {
 
     return (
         <div className="page-count">
-            <FormattedMessage id="form.step-of" values={{current: currentPage, total: pages}} />
+            <FormattedMessage
+                id="form.step-of"
+                values={{current: currentPage, total: pages}}
+            />
         </div>
     );
 }
 
 type MultiPageFormProps = {
     children: React.ReactNode[];
-    validatePage?: (p: unknown) => boolean;
-    onPageChange?: (p: unknown) => boolean;
+    validatePage?: (p: number) => boolean;
+    onPageChange?: (p: number) => void;
     onSubmit: (form: HTMLFormElement) => void;
     submitting: boolean;
     // onSubmit is redefined above to be simpler
@@ -55,16 +58,22 @@ type MultiPageFormProps = {
 
 function MultiPageFormInContext({
     children,
-    validatePage=pass, onPageChange=pass, onSubmit,
-    submitting, ...formParams
+    validatePage = pass,
+    onPageChange = pass,
+    onSubmit,
+    submitting,
+    ...formParams
 }: MultiPageFormProps) {
     const formRef = React.useRef<HTMLFormElement>(null);
 
     return (
         <div className="multi-page-form">
             <form
-                acceptCharset="UTF-8" className="form"
-                method="post" ref={formRef} {...formParams}
+                acceptCharset="UTF-8"
+                className="form"
+                method="post"
+                ref={formRef}
+                {...formParams}
                 aria-label="form"
             >
                 <PagesContextProvider
@@ -76,10 +85,9 @@ function MultiPageFormInContext({
                 >
                     <MarkupChildren children={children} />
                     <PageCount />
-                    {
-                        submitting &&
-                            <div className="big-message">Submitting...</div>
-                    }
+                    {submitting && (
+                        <div className="big-message">Submitting...</div>
+                    )}
                     <ButtonRow disabled={submitting} {...{formRef, onSubmit}} />
                 </PagesContextProvider>
             </form>
diff --git a/src/app/components/multi-page-form/pages-context.tsx b/src/app/components/multi-page-form/pages-context.tsx
index b168da6ab..6726211f2 100644
--- a/src/app/components/multi-page-form/pages-context.tsx
+++ b/src/app/components/multi-page-form/pages-context.tsx
@@ -2,23 +2,24 @@ import {useState, useRef, useEffect, useCallback} from 'react';
 import usePaginatorContext from '~/components/paginator/paginator-context';
 import buildContext from '~/components/jsx-helpers/build-context';
 
-function useContextValue({pages, validatePage, onPageChange}: {
+function useContextValue({
+    pages,
+    validatePage,
+    onPageChange
+}: {
     pages: number;
-    validatePage: (p: unknown) => boolean;
-    onPageChange: (p: unknown) => void;
+    validatePage: (p: number) => boolean;
+    onPageChange: (p: number) => void;
 }) {
     const [validatedPages, setValidatedPages] = useState({});
     const activeRef = useRef<HTMLDivElement>(null);
     const {currentPage} = usePaginatorContext();
-    const validateCurrentPage = useCallback(
-        () => {
-            const invalid = activeRef.current?.querySelector(':invalid');
+    const validateCurrentPage = useCallback(() => {
+        const invalid = activeRef.current?.querySelector(':invalid');
 
-            setValidatedPages({[currentPage]: true, ...validatedPages});
-            return invalid === null && validatePage(currentPage);
-        },
-        [currentPage, validatedPages, validatePage]
-    );
+        setValidatedPages({[currentPage]: true, ...validatedPages});
+        return invalid === null && validatePage(currentPage);
+    }, [currentPage, validatedPages, validatePage]);
 
     useEffect(() => {
         onPageChange(currentPage);
@@ -29,7 +30,4 @@ function useContextValue({pages, validatePage, onPageChange}: {
 
 const {useContext, ContextProvider} = buildContext({useContextValue});
 
-export {
-    useContext as default,
-    ContextProvider as PagesContextProvider
-};
+export {useContext as default, ContextProvider as PagesContextProvider};
diff --git a/src/app/helpers/use-document-head.ts b/src/app/helpers/use-document-head.ts
index 2a038e5e7..7d54b1fa8 100644
--- a/src/app/helpers/use-document-head.ts
+++ b/src/app/helpers/use-document-head.ts
@@ -151,11 +151,11 @@ export default function useDocumentHead({
     noindex = false
 }: {
     title?: string;
-    description?: string;
+    description?: string | null;
     noindex?: boolean;
 }) {
     useEffect(() => {
-        setPageTitleAndDescription(title, description);
+        setPageTitleAndDescription(title, description ?? undefined);
     }, [title, description]);
 
     useEffect(() => {
diff --git a/src/app/pages/adoption/adoption.js b/src/app/pages/adoption/adoption.tsx
similarity index 55%
rename from src/app/pages/adoption/adoption.js
rename to src/app/pages/adoption/adoption.tsx
index 98ded78bd..d2dfa04b2 100644
--- a/src/app/pages/adoption/adoption.js
+++ b/src/app/pages/adoption/adoption.tsx
@@ -11,6 +11,7 @@ import {useAfterSubmit} from '~/components/book-selector/after-form-submit';
 import BookSelector, {
     useSelectedBooks
 } from '~/components/book-selector/book-selector';
+import {SalesforceBook} from '~/helpers/books';
 import HowUsing from './how-using/how-using';
 import useSalesforceContext from '~/contexts/salesforce';
 import useFormTarget from '~/components/form-target/form-target';
@@ -18,16 +19,23 @@ import TrackingParameters from '~/components/tracking-parameters/tracking-parame
 import {useIntl} from 'react-intl';
 import './adoption.scss';
 
-function BookSelectorPage({selectedBooksRef, year}) {
+function BookSelectorPage({
+    selectedBooksRef,
+    year
+}: {
+    selectedBooksRef: React.MutableRefObject<SalesforceBook[]>;
+    year?: string;
+}) {
     const [selectedBooks, toggleBook] = useSelectedBooks();
     const bookList = React.useMemo(
-    () => selectedBooks.map((b) => b.value.replace(/ *\[.*/, '')).join('; '),
+        () =>
+            selectedBooks.map((b) => b.value.replace(/ *\[.*/, '')).join('; '),
         [selectedBooks]
     );
     const {formatMessage} = useIntl();
     const instructions = formatMessage({id: 'adoption.instructions'});
     const includeFilter = React.useCallback(
-        (b) => !b.comingSoon,
+        (b: SalesforceBook) => !b.comingSoon,
         []
     );
 
@@ -36,10 +44,9 @@ function BookSelectorPage({selectedBooksRef, year}) {
         <React.Fragment>
             <BookSelector
                 prompt={formatMessage({id: 'adoption.book-prompt'})}
-                required
                 selectedBooks={selectedBooks}
                 toggleBook={toggleBook}
-                limit="5"
+                limit={5}
                 additionalInstructions={instructions}
                 includeFilter={includeFilter}
             />
@@ -53,56 +60,72 @@ function BookSelectorPage({selectedBooksRef, year}) {
     );
 }
 
-function FacultyForm({position, onPageChange}) {
-    const selectedBooksRef = useRef();
+function FacultyForm({
+    position,
+    onPageChange
+}: {
+    position: string;
+    onPageChange: (page: number) => void;
+}) {
+    const selectedBooksRef = useRef<SalesforceBook[]>([]);
     const afterSubmit = useAfterSubmit(selectedBooksRef);
     const {onSubmit, submitting, FormTarget} = useFormTarget(afterSubmit);
     const {adoptionUrl} = useSalesforceContext();
-    const validatePage = React.useCallback(
-        (page) => {
-            if (page === 1 && position === 'Student') {
-                return false;
-            }
-            if (page === 2 && selectedBooksRef.current.length < 1) {
-                return false;
-            }
-            return true;
-        },
-        [position]
-    );
+    const validatePage = React.useCallback((page: number) => {
+        if (page === 2 && selectedBooksRef.current.length < 1) {
+            return false;
+        }
+        return true;
+    }, []);
     const doSubmit = React.useCallback(
-        (form) => {
-            if (selectedBooksRef.current?.length > 0) {
-                form.submit();
-                onSubmit();
-            }
+        (form: HTMLFormElement) => {
+            form.submit();
+            onSubmit();
         },
         [onSubmit]
     );
     const {search} = useLocation();
-    const selectedYear = new window.URLSearchParams(search).get('year') ?? undefined;
-    const [copyOfYear, setCopyOfYear] = React.useState();
+    const selectedYear =
+        new window.URLSearchParams(search).get('year') ?? undefined;
+    const [copyOfYear, setCopyOfYear] = React.useState<string>();
 
     return (
         <React.Fragment>
-            <FormTarget submitting={submitting} />
+            <FormTarget />
             <MultiPageForm
-                validatePage={validatePage} action={adoptionUrl}
-                onPageChange={onPageChange} onSubmit={doSubmit}
-                submitting={submitting} target="form-target"
+                validatePage={validatePage}
+                action={adoptionUrl}
+                onPageChange={onPageChange}
+                onSubmit={doSubmit}
+                submitting={submitting}
+                target="form-target"
             >
                 <React.Fragment>
                     <TrackingParameters />
                     <input type="hidden" name="position" value={position} />
                     <input type="hidden" name="role" value="Instructor" />
-                    <input type="hidden" name="lead_source" value="Adoption Form" />
-                    <input type="hidden" name="process_adoptions" value={true} />
+                    <input
+                        type="hidden"
+                        name="lead_source"
+                        value="Adoption Form"
+                    />
+                    <input
+                        type="hidden"
+                        name="process_adoptions"
+                        value="true"
+                    />
                     <div className="year-selector-container">
-                        <YearSelector selectedYear={selectedYear} onValueUpdate={setCopyOfYear} />
+                        <YearSelector
+                            selectedYear={selectedYear}
+                            onValueUpdate={setCopyOfYear}
+                        />
                     </div>
                     <ContactInfo />
                 </React.Fragment>
-                <BookSelectorPage selectedBooksRef={selectedBooksRef} year={copyOfYear} />
+                <BookSelectorPage
+                    selectedBooksRef={selectedBooksRef}
+                    year={copyOfYear}
+                />
             </MultiPageForm>
         </React.Fragment>
     );
@@ -111,14 +134,11 @@ function FacultyForm({position, onPageChange}) {
 export default function AdoptionForm() {
     const [selectedRole, setSelectedRole] = useState('');
     const [hideRoleSelector, setHideRoleSelector] = useState(false);
-    const ref = useRef();
-    const onPageChange = React.useCallback(
-        (page) => {
-            setHideRoleSelector(page > 1);
-            ref.current.scrollIntoView();
-        },
-        []
-    );
+    const ref = useRef<HTMLDivElement>(null);
+    const onPageChange = React.useCallback((page: number) => {
+        setHideRoleSelector(page > 1);
+        ref.current?.scrollIntoView();
+    }, []);
 
     useDocumentHead({title: 'Adoption Form'});
     useCanonicalLink();
@@ -126,11 +146,24 @@ export default function AdoptionForm() {
     return (
         <main className="adoption-form-v2">
             <FormHeader prefix="adoption" />
-            <img className="strips" src="/dist/images/components/strips.svg" height="10" alt="" role="presentation" />
+            <img
+                className="strips"
+                src="/dist/images/components/strips.svg"
+                height="10"
+                alt=""
+                role="presentation"
+            />
             <div className="text-content" ref={ref}>
-                <RoleSelector value={selectedRole} setValue={setSelectedRole} hidden={hideRoleSelector}>
+                <RoleSelector
+                    value={selectedRole}
+                    setValue={setSelectedRole}
+                    hidden={hideRoleSelector}
+                >
                     <StudentForm />
-                    <FacultyForm position={selectedRole} onPageChange={onPageChange} />
+                    <FacultyForm
+                        position={selectedRole}
+                        onPageChange={onPageChange}
+                    />
                 </RoleSelector>
             </div>
         </main>
diff --git a/src/app/pages/adoption/how-using/how-using.js b/src/app/pages/adoption/how-using/how-using.tsx
similarity index 79%
rename from src/app/pages/adoption/how-using/how-using.js
rename to src/app/pages/adoption/how-using/how-using.tsx
index a4945b425..b6e127301 100644
--- a/src/app/pages/adoption/how-using/how-using.js
+++ b/src/app/pages/adoption/how-using/how-using.tsx
@@ -2,12 +2,16 @@ import React from 'react';
 import FormInput from '~/components/form-input/form-input';
 import FormSelect from '~/components/form-select/form-select';
 import {adoptionOptions} from '~/contexts/salesforce';
+import {SalesforceBook} from '~/helpers/books';
 import {FormattedMessage, useIntl} from 'react-intl';
 import './how-using.scss';
 
-function HowManyStudents({book, dispatch}) {
+function HowManyStudents({book, dispatch}: {
+    book: SalesforceBook;
+    dispatch: React.Dispatch<object>;
+}) {
     const updateBookValue = React.useCallback(
-        ({target: {value}}) => {
+        ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
             dispatch({[book.value]: value});
         },
         [book, dispatch]
@@ -36,9 +40,12 @@ function HowManyStudents({book, dispatch}) {
     );
 }
 
-function HowUsingBook({book, dispatch}) {
+function HowUsingBook({book, dispatch}: {
+    book: SalesforceBook;
+    dispatch: React.Dispatch<object>;
+}) {
     const updateBookValue = React.useCallback(
-        (value) => dispatch({[book.value]: value}),
+        (value: string) => dispatch({[book.value]: value}),
         [book, dispatch]
     );
     const {formatMessage} = useIntl();
@@ -48,18 +55,16 @@ function HowUsingBook({book, dispatch}) {
         outside: formatMessage({id: 'how-using.outside'}),
         self: formatMessage({id: 'how-using.self'})
     };
-
-    adoptionOptions.forEach((opt) => {
-        opt.label = adoptionTexts[opt.key];
-    });
+    const adoptionOptionsWithLabels = adoptionOptions.map((opt) => ({...opt, label: adoptionTexts[opt.key]}));
 
     return (
         <FormSelect
+            name={`hufs_${book.text}`}
             label={formatMessage(
                 {id: 'how-using.how-using'},
                 {title: book.text}
             )}
-            options={adoptionOptions}
+            options={adoptionOptionsWithLabels}
             selectAttributes={{
                 name: `hu_${book.text}`,
                 placeholder: formatMessage({id: 'selector.select-one'}),
@@ -70,11 +75,14 @@ function HowUsingBook({book, dispatch}) {
     );
 }
 
-function reducer(state, action) {
+function reducer(state: Record<string, unknown>, action: object) {
     return {...state, ...action};
 }
 
-export default function HowUsing({selectedBooks, year}) {
+export default function HowUsing({selectedBooks, year}: {
+    selectedBooks: SalesforceBook[];
+    year?: string;
+}) {
     const [bookData, dispatch] = React.useReducer(reducer, {});
     const [useData, udDispatch] = React.useReducer(reducer, {});
     const json = React.useMemo(() => {
diff --git a/src/app/pages/general/general.js b/src/app/pages/general/general.tsx
similarity index 82%
rename from src/app/pages/general/general.js
rename to src/app/pages/general/general.tsx
index ea6db987f..fc692faa1 100644
--- a/src/app/pages/general/general.js
+++ b/src/app/pages/general/general.tsx
@@ -5,7 +5,7 @@ import {useTextFromSlug} from '~/helpers/page-data-utils';
 import {useLocation} from 'react-router-dom';
 import './general.scss';
 
-function GeneralPage({html}) {
+function GeneralPage({html}: {html: string}) {
     const parser = new window.DOMParser();
     const newDoc = parser.parseFromString(html, 'text/html');
     const strips = parser
@@ -13,7 +13,7 @@ function GeneralPage({html}) {
             '<img class="strips" src="/dist/images/components/strips.svg" height="10" alt="">',
             'text/html'
         )
-        .querySelector('img');
+        .querySelector('img') as HTMLImageElement;
     const innerHTML = Array.from(newDoc.body.children)
         .reduce((arr, el) => {
             if (el.classList.contains('block-heading')) {
@@ -22,21 +22,21 @@ function GeneralPage({html}) {
             }
             arr.push(el.outerHTML);
             return arr;
-        }, [])
+        }, [] as string[])
         .join('\n');
 
-    return <RawHTML className='general page' html={innerHTML} embed />;
+    return <RawHTML className="general page" html={innerHTML} embed />;
 }
 
-function isCanonical(slug) {
+function isCanonical(slug: string) {
     return slug.includes('kinetic') || slug.endsWith('partner-program');
 }
 
-function getCanonicalPath(slug) {
+function getCanonicalPath(slug: string) {
     return `${slug.replace(/.*\/(?!$)/, '/')}${slug.endsWith('/') ? '' : '/'}`;
 }
 
-export function GeneralPageFromSlug({slug}) {
+export function GeneralPageFromSlug({slug}: {slug: string}) {
     const {head, text: html} = useTextFromSlug(slug);
     const canonicalPath = getCanonicalPath(slug);
     const putCanonicalLinkInPage = isCanonical(slug);
@@ -49,7 +49,7 @@ export function GeneralPageFromSlug({slug}) {
     useCanonicalLink(putCanonicalLinkInPage, canonicalPath);
 
     if (html instanceof Error) {
-        return <h1>Error: {head}</h1>;
+        return <h1>Error: {JSON.stringify(head)}</h1>;
     }
 
     return !html ? <h1>Loading...</h1> : <GeneralPage html={html} />;
diff --git a/src/app/pages/interest/interest.js b/src/app/pages/interest/interest.tsx
similarity index 67%
rename from src/app/pages/interest/interest.js
rename to src/app/pages/interest/interest.tsx
index d5c0c4ffd..6ec59f4c7 100644
--- a/src/app/pages/interest/interest.js
+++ b/src/app/pages/interest/interest.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useRef } from 'react';
-import useDocumentHead, { useCanonicalLink } from '~/helpers/use-document-head';
+import React, {useState, useRef} from 'react';
+import useDocumentHead, {useCanonicalLink} from '~/helpers/use-document-head';
 import FormHeader from '~/components/form-header/form-header';
 import RoleSelector from '~/components/role-selector/role-selector';
 import StudentForm from '~/components/student-form/student-form';
@@ -16,11 +16,12 @@ import FormCheckboxgroup from '~/components/form-checkboxgroup/form-checkboxgrou
 import TrackingParameters from '~/components/tracking-parameters/tracking-parameters';
 import {useIntl} from 'react-intl';
 import './interest.scss';
+import {SalesforceBook} from '~/helpers/books';
 
 function useBundledValues() {
     const [bundledValues, setBundledValues] = useState('');
     const onChange = React.useCallback(
-        (values) => setBundledValues(values.join('; ')),
+        (values: unknown[]) => setBundledValues(values.join('; ')),
         []
     );
 
@@ -34,28 +35,52 @@ function useBundledValues() {
         );
     }
 
-    return { onChange, BundledValuesInput };
+    return {onChange, BundledValuesInput};
 }
 
 function HowDidYouHear() {
     const {formatMessage} = useIntl();
     const options = [
-        { value: 'Web search', label: formatMessage({id: 'interest.option.Web search'}) },
-        { value: 'Colleague', label: formatMessage({id: 'interest.option.Colleague'}) },
-        { value: 'Conference', label: formatMessage({id: 'interest.option.Conference'}) },
-        { value: 'Email', label: formatMessage({id: 'interest.option.Email'}) },
-        { value: 'Facebook', label: formatMessage({id: 'interest.option.Facebook'}) },
-        { value: 'Twitter', label: formatMessage({id: 'interest.option.Twitter'}) },
-        { value: 'Webinar', label: formatMessage({id: 'interest.option.Webinar'}) },
-        { value: 'Partner organization', label: formatMessage({id: 'interest.option.Partner organization'}) }
+        {
+            value: 'Web search',
+            label: formatMessage({id: 'interest.option.Web search'})
+        },
+        {
+            value: 'Colleague',
+            label: formatMessage({id: 'interest.option.Colleague'})
+        },
+        {
+            value: 'Conference',
+            label: formatMessage({id: 'interest.option.Conference'})
+        },
+        {value: 'Email', label: formatMessage({id: 'interest.option.Email'})},
+        {
+            value: 'Facebook',
+            label: formatMessage({id: 'interest.option.Facebook'})
+        },
+        {
+            value: 'Twitter',
+            label: formatMessage({id: 'interest.option.Twitter'})
+        },
+        {
+            value: 'Webinar',
+            label: formatMessage({id: 'interest.option.Webinar'})
+        },
+        {
+            value: 'Partner organization',
+            label: formatMessage({id: 'interest.option.Partner organization'})
+        }
     ];
-    const { onChange, BundledValuesInput } = useBundledValues();
+    const {onChange, BundledValuesInput} = useBundledValues();
 
     return (
         <React.Fragment>
             <FormCheckboxgroup
+                name="how_did_you_hear"
                 longLabel={formatMessage({id: 'interest.how'})}
-                instructions={formatMessage({id: 'interest.select-instruction'})}
+                instructions={formatMessage({
+                    id: 'interest.select-instruction'
+                })}
                 options={options}
                 onChange={onChange}
             />
@@ -64,7 +89,11 @@ function HowDidYouHear() {
     );
 }
 
-function BookSelectorPage({ selectedBooksRef }) {
+function BookSelectorPage({
+    selectedBooksRef
+}: {
+    selectedBooksRef: React.MutableRefObject<unknown>;
+}) {
     const [selectedBooks, toggleBook] = useSelectedBooks();
     const bookList = selectedBooks.map((b) => b.value).join('; ');
     const {formatMessage} = useIntl();
@@ -75,10 +104,9 @@ function BookSelectorPage({ selectedBooksRef }) {
         <div className="page-2">
             <BookSelector
                 prompt={formatMessage({id: 'interest.books-prompt'})}
-                required
                 selectedBooks={selectedBooks}
                 toggleBook={toggleBook}
-                limit="5"
+                limit={5}
             />
             <FormInput
                 longLabel={formatMessage({id: 'interest.students-prompt'})}
@@ -96,29 +124,35 @@ function BookSelectorPage({ selectedBooksRef }) {
     );
 }
 
-function FacultyForm({ position, onPageChange, role }) {
-    const selectedBooksRef = useRef();
+function FacultyForm({
+    position,
+    onPageChange,
+    role
+}: {
+    position: string;
+    onPageChange?: (p: number) => void;
+    role: string;
+}) {
+    const selectedBooksRef = useRef<SalesforceBook[]>([]);
     const afterSubmit = useAfterSubmit(selectedBooksRef);
-    const { onSubmit, submitting, FormTarget } = useFormTarget(afterSubmit);
-    const { interestUrl } = useSalesforceContext();
+    const {onSubmit, submitting, FormTarget} = useFormTarget(afterSubmit);
+    const {interestUrl} = useSalesforceContext();
 
-    function validatePage(page) {
+    function validatePage(page: number) {
         return Boolean(page !== 1 || position !== 'Student');
     }
 
     const doSubmit = React.useCallback(
-        (form) => {
-            if (selectedBooksRef.current?.length > 0) {
-                form.submit();
-                onSubmit();
-            }
+        (form: HTMLFormElement) => {
+            form.submit();
+            onSubmit();
         },
         [onSubmit]
     );
 
     return (
         <React.Fragment>
-            <FormTarget submitting={submitting} />
+            <FormTarget />
             <MultiPageForm
                 validatePage={validatePage}
                 action={interestUrl}
@@ -144,13 +178,13 @@ function FacultyForm({ position, onPageChange, role }) {
     );
 }
 
-export function InterestForm({ role = 'Instructor' }) {
+export function InterestForm({role = 'Instructor'}) {
     const [selectedRole, setSelectedRole] = useState('');
     const [hideRoleSelector, setHideRoleSelector] = useState(false);
-    const ref = useRef();
-    const onPageChange = React.useCallback((page) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const onPageChange = React.useCallback((page: number) => {
         setHideRoleSelector(page > 1);
-        ref.current.scrollIntoView();
+        ref.current?.scrollIntoView();
     }, []);
 
     return (
@@ -172,7 +206,7 @@ export function InterestForm({ role = 'Instructor' }) {
 }
 
 export default function InterestPage() {
-    useDocumentHead({ title: 'Interest Form' });
+    useDocumentHead({title: 'Interest Form'});
     useCanonicalLink();
 
     return (
diff --git a/test/src/components/role-selector.test.tsx b/test/src/components/role-selector.test.tsx
index fc356f4d3..5226f91f0 100644
--- a/test/src/components/role-selector.test.tsx
+++ b/test/src/components/role-selector.test.tsx
@@ -50,9 +50,8 @@ describe('role-selector', () => {
         await user.keyboard('{Escape}');
         // Select by space
         await user.keyboard('{ArrowDown} ');
-        await waitFor(() => expect(options[1].getAttribute('aria-selected')).toBe('true'));
-        // fireEvent(options[0], new MouseEvent('mouseenter', {
-        //     bubbles: true
-        // }));
+        const i = options.findIndex((o) => o.getAttribute('aria-selected') === 'true');
+
+        expect(i).toBe(1);
     });
 });
diff --git a/test/src/data/kinetic.js b/test/src/data/kinetic.js
index 7327ae693..d7ab4f887 100644
--- a/test/src/data/kinetic.js
+++ b/test/src/data/kinetic.js
@@ -22,7 +22,9 @@ export default `
 </head>
 <body>
 
-
+  <section class="block-heading">
+    <h1>This is a block heading</h1>
+  </section>
     
         <section class="block-html">
             <script type="application/javascript">
diff --git a/test/src/general/general.test.js b/test/src/general/general.test.js
deleted file mode 100644
index 3fa8d9835..000000000
--- a/test/src/general/general.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/preact';
-import {MemoryRouter} from 'react-router-dom';
-import {RouterContextProvider} from '~/components/shell/router-context';
-import GeneralPageLoader from '~/pages/general/general';
-
-test(
-    'renders kinetic page',
-    async () => {
-        render(
-            <MemoryRouter initialEntries={['/general/kinetic']}>
-                <RouterContextProvider>
-                    <GeneralPageLoader />
-                </RouterContextProvider>
-            </MemoryRouter>
-        );
-        await screen.findByText(/Example activities/i);
-    }
-);
\ No newline at end of file
diff --git a/test/src/general/general.test.tsx b/test/src/general/general.test.tsx
new file mode 100644
index 000000000..4820eb793
--- /dev/null
+++ b/test/src/general/general.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import MemoryRouter from '~/../../test/helpers/future-memory-router';
+import {RouterContextProvider} from '~/components/shell/router-context';
+import GeneralPageLoader from '~/pages/general/general';
+import * as DH from '~/helpers/use-document-head';
+import * as PDU from '~/helpers/page-data-utils';
+
+
+jest.spyOn(DH, 'default').mockReturnValue();
+
+describe('general page', () => {
+    it(
+        'renders kinetic page',
+        async () => {
+            render(
+                <MemoryRouter initialEntries={['/general/kinetic']}>
+                    <RouterContextProvider>
+                        <GeneralPageLoader />
+                    </RouterContextProvider>
+                </MemoryRouter>
+            );
+            await screen.findByText(/Example activities/i);
+        }
+    );
+    it('renders kinetic page (trailing slash)', async () => {
+        document.title = 'OpenStax Test';
+        render(
+            <MemoryRouter initialEntries={['/general/kinetic/']}>
+                <RouterContextProvider>
+                    <GeneralPageLoader />
+                </RouterContextProvider>
+            </MemoryRouter>
+        );
+        await screen.findByText(/Example activities/i);
+        expect(document.head.querySelector('link')?.getAttribute('href')).toBe('https://openstax.org/kinetic');
+    });
+    it('handles page load error', async () => {
+        const mockUseTextFromSlug = jest.spyOn(PDU, 'useTextFromSlug').mockReturnValueOnce({
+            head: {},
+            text: new Error('whoops')
+        });
+
+        render(
+            <MemoryRouter initialEntries={['/general/whoops/']}>
+                <RouterContextProvider>
+                    <GeneralPageLoader />
+                </RouterContextProvider>
+            </MemoryRouter>
+        );
+
+        const h = screen.getByRole('heading', {level: 1});
+
+        expect(h.textContent).toBe('Error: {}');
+        mockUseTextFromSlug.mockRestore();
+    });
+});
diff --git a/test/src/pages/adoption.test.tsx b/test/src/pages/adoption.test.tsx
new file mode 100644
index 000000000..99b6c12f9
--- /dev/null
+++ b/test/src/pages/adoption.test.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+import AdoptionForm from '~/pages/adoption/adoption';
+import MemoryRouter from '~/../../test/helpers/future-memory-router';
+import {MainClassContextProvider} from '~/contexts/main-class';
+import {SharedDataContextProvider} from '~/contexts/shared-data';
+import {LanguageContextProvider} from '~/contexts/language';
+import * as CI from '~/components/contact-info/contact-info';
+import HowUsing from '~/pages/adoption/how-using/how-using';
+import {SalesforceBook} from '~/helpers/books';
+
+jest.spyOn(CI, 'default').mockReturnValue(<h1>Contact info</h1>);
+
+describe('adoption-form', () => {
+    const saveWarn = console.warn;
+    const user = userEvent.setup();
+
+    beforeAll(() => {
+        console.warn = jest.fn();
+    });
+    afterAll(() => {
+        console.warn = saveWarn;
+    });
+
+    beforeEach(async () => {
+        render(
+            <LanguageContextProvider>
+                <SharedDataContextProvider>
+                    <MemoryRouter
+                        initialEntries={[
+                            '/details/books/college-algebra',
+                            '/adoption'
+                        ]}
+                    >
+                        <MainClassContextProvider>
+                            <AdoptionForm />
+                        </MainClassContextProvider>
+                    </MemoryRouter>
+                </SharedDataContextProvider>
+            </LanguageContextProvider>
+        );
+        await screen.findByText(/Let us know you're using/);
+    });
+
+    it('no form appears when Student role is selected', async () => {
+        const listBoxes = screen.queryAllByRole('listbox');
+
+        await user.click(listBoxes[1]);
+        const options = await screen.findAllByRole('option', {hidden: true});
+        const studentOption = options.find((o) => o.textContent === 'Student');
+
+        await user.click(studentOption as HTMLElement);
+        expect(await screen.queryByRole('form')).toBeNull();
+    });
+    it('form appears when role is selected', async () => {
+        const listBoxes = screen.queryAllByRole('listbox');
+
+        await user.click(listBoxes[1]);
+        const options = await screen.findAllByRole('option', {hidden: true});
+        const instructorOption = options.find(
+            (o) => o.textContent === 'Instructor'
+        );
+
+        await user.click(instructorOption as HTMLElement);
+        screen.getByRole('form');
+        // Contact info has been mocked
+        await user.click(screen.getByRole('button', {name: 'Next'}));
+        // Reject submission when no books checked
+        await user.click(screen.getByRole('button', {name: 'Submit'}));
+        await user.click(
+            (await screen.findAllByRole('checkbox', {name: 'Biology 2e'}))[0]
+        );
+        await user.type(screen.getByRole('spinbutton'), '12');
+        await user.click(screen.getAllByRole('combobox').pop() as Element);
+        await user.click(
+            screen.getByRole('option', {
+                name: 'As the core textbook for my course'
+            })
+        );
+        console.error = jest.fn();
+        // Submit and get navigation error
+        await user.click(screen.getByRole('button', {name: 'Submit'}));
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining(
+                'Not implemented: HTMLFormElement.prototype.submit'
+            ),
+            undefined
+        );
+    });
+});
+describe('how-using', () => {
+    it('strips [Spanish] from book title', () => {
+        const selectedBooks: SalesforceBook[] = [
+            {
+                text: 'Fisica universitaria volumen 1',
+                value: 'University Physics [Spanish]',
+                comingSoon: false,
+                subjects: [],
+                coverUrl: 'meh'
+            }
+        ];
+
+        render(
+            <LanguageContextProvider>
+                <HowUsing selectedBooks={selectedBooks} />
+            </LanguageContextProvider>
+        );
+        const jsonField = document.querySelector(
+            '[name="adoption_json"]'
+        ) as HTMLInputElement;
+        const value = JSON.parse(jsonField.value).Books[0];
+
+        expect(value.name).toBe('University Physics');
+    });
+});
diff --git a/test/src/pages/adoption/adoption.test.tsx b/test/src/pages/adoption/adoption.test.tsx
deleted file mode 100644
index 286a4e9af..000000000
--- a/test/src/pages/adoption/adoption.test.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/preact';
-import userEvent from '@testing-library/user-event';
-import AdoptionForm from '~/pages/adoption/adoption';
-import FormHeader from '~/components/form-header/form-header';
-import MemoryRouter from '~/../../test/helpers/future-memory-router';
-import {MainClassContextProvider} from '~/contexts/main-class';
-import {SharedDataContextProvider} from '~/contexts/shared-data';
-import {LanguageContextProvider} from '~/contexts/language';
-import usePortalContext, {PortalContextProvider} from '~/contexts/portal';
-
-describe('adoption-form', () => {
-    const saveWarn = console.warn;
-
-    beforeAll(() => {
-        console.warn = jest.fn();
-    });
-    afterAll(() => {
-        console.warn = saveWarn;
-    });
-
-    beforeEach(async () => {
-        render(
-            <LanguageContextProvider>
-                <SharedDataContextProvider>
-                    <MemoryRouter
-                        initialEntries={['/details/books/college-algebra', '/adoption']}
-                    >
-                        <MainClassContextProvider>
-                            <AdoptionForm />
-                        </MainClassContextProvider>
-                    </MemoryRouter>
-                </SharedDataContextProvider>
-            </LanguageContextProvider>
-        );
-        await screen.findByText(/Let us know you're using/);
-    });
-
-    it('creates with role selector', () =>
-        expect(screen.queryAllByRole('option', {hidden: true})).toHaveLength(8));
-
-    it('form appears when role is selected', async () => {
-        const listBoxes = screen.queryAllByRole('listbox');
-        const user = userEvent.setup();
-
-        await user.click(listBoxes[1]);
-        const options = await screen.findAllByRole('option', {hidden: true});
-        const instructorOption = options.find(
-            (o) => o.textContent === 'Instructor'
-        );
-
-        await user.click(instructorOption as HTMLElement);
-        await screen.findByRole('form');
-    });
-});
-
-describe('form-header in portal', () => {
-    function Component() {
-        const {setPortal} = usePortalContext();
-
-        setPortal('some-portal');
-
-        return <FormHeader prefix="adoption" />;
-    }
-
-    it('rewrites links', async () => {
-        render(
-            <LanguageContextProvider>
-                <MemoryRouter initialEntries={['/some-portal/adoption']}>
-                    <PortalContextProvider>
-                        <Component />
-                    </PortalContextProvider>
-                </MemoryRouter>
-            </LanguageContextProvider>
-        );
-        const link = await screen.findByRole('link');
-
-        expect(link.getAttribute('href')).toBe('/some-portal/interest');
-    });
-});
diff --git a/test/src/pages/interest.test.tsx b/test/src/pages/interest.test.tsx
new file mode 100644
index 000000000..e23473939
--- /dev/null
+++ b/test/src/pages/interest.test.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+import InterestPage from '~/pages/interest/interest';
+import MemoryRouter from '~/../../test/helpers/future-memory-router';
+import {MainClassContextProvider} from '~/contexts/main-class';
+import {SharedDataContextProvider} from '~/contexts/shared-data';
+import {LanguageContextProvider} from '~/contexts/language';
+import * as CI from '~/components/contact-info/contact-info';
+
+jest.spyOn(CI, 'default').mockReturnValue(<h1>Contact info</h1>);
+
+function Component() {
+    return (
+        <LanguageContextProvider>
+            <SharedDataContextProvider>
+                <MemoryRouter
+                    initialEntries={[
+                        '/details/books/college-algebra',
+                        '/adoption'
+                    ]}
+                >
+                    <MainClassContextProvider>
+                        <InterestPage />
+                    </MainClassContextProvider>
+                </MemoryRouter>
+            </SharedDataContextProvider>
+        </LanguageContextProvider>
+    );
+}
+
+const user = userEvent.setup();
+
+describe('interest form', () => {
+    it('renders', async () => {
+        render(<Component />);
+        const roleSelector = await screen.findByRole('combobox');
+
+        console.info('*** RS:', roleSelector.outerHTML);
+        await user.click(roleSelector);
+        const options = screen.getAllByRole('option');
+
+        await user.click(
+            options.find((o) => o.textContent === 'Student') as Element
+        );
+        screen.findByText("Students don't need to fill out any forms", {
+            exact: false
+        });
+        await user.click(
+            options.find((o) => o.textContent === 'Other') as Element
+        );
+        await user.click(screen.getByRole('button', {name: 'Next'}));
+        await user.click(screen.getByRole('button', {name: 'Submit'}));
+        await user.click(
+            (await screen.findAllByRole('checkbox', {name: 'Biology 2e'}))[0]
+        );
+        await user.type(screen.getByRole('spinbutton'), '12');
+
+        // The value in here should update, but it doesn't work in Jest.
+        // const bundledInput = () => document.querySelector('[name="how_did_you_hear"]') as HTMLInputElement;
+
+        await user.click(screen.getByRole('checkbox', {name: 'Web search'}));
+        await user.click(screen.getByRole('checkbox', {name: 'Email'}));
+        await user.click(screen.getByRole('button', {name: 'Submit'}));
+    });
+});
diff --git a/test/src/pages/partners/partners.test.tsx b/test/src/pages/partners/partners.test.tsx
index 27deffe1b..64d1309a7 100644
--- a/test/src/pages/partners/partners.test.tsx
+++ b/test/src/pages/partners/partners.test.tsx
@@ -311,10 +311,13 @@ describe('partners full page', () => {
         );
 
         const buttons = screen.getAllByRole('checkbox');
+        const label = buttons[0].getAttribute('aria-label');
 
         await user.click(buttons[0]);
         await user.click(await screen.findByRole('button', {name: 'close'}));
         await screen.findByRole('button', {name: 'Filters (1)'});
+        await user.click(screen.getByRole('button', {name: `remove filter for ${label}`}));
+        expect(screen.queryByRole('button', {name: `remove filter for ${label}`})).toBeNull();
     });
     // This one has to be last; something doesn't reset
     it('uses default infoLinkText when none is provided', async () => {