diff --git a/.eslintrc.js b/.eslintrc.js
index 12f954b96..7a98b162f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,9 +39,10 @@ module.exports = {
     // react
     "react/prop-types": OFF,
     "react/no-unescaped-entities": OFF,
-    "react/jsx-curly-brace-presence": "warn",
+    "react/jsx-curly-brace-presence": WARN,
     // jsx-ally
     "jsx-a11y/no-onchange": WARN,
+    // import
     "import/no-anonymous-default-export": OFF,
     // next
     "@next/next/no-img-element": OFF,
diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx
index edb3fd063..b1ad3b1ae 100644
--- a/src/components/Admonition.tsx
+++ b/src/components/Admonition.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react"
 import styles from "./Admonition.module.css"
 import { cva } from "class-variance-authority"
 
@@ -100,7 +101,17 @@ const admonition = cva(styles.admonition, {
   },
 })
 
-export const Admonition = ({ type, title, children }) => {
+type AdmonitionType = keyof typeof svgMap
+
+export const Admonition = ({
+  type,
+  title,
+  children,
+}: {
+  type: AdmonitionType
+  title: string
+  children: ReactNode
+}) => {
   return (
     <div className={admonition({ type })}>
       <div className={styles.admonitionHeading}>
diff --git a/src/components/ApiGallery.tsx b/src/components/ApiGallery.tsx
index a3a1b9ca4..d4e2623fc 100644
--- a/src/components/ApiGallery.tsx
+++ b/src/components/ApiGallery.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from "react"
+import type { MouseEventHandler } from "react"
 import Link from "next/link"
 import Footer from "./Footer"
 import typographyStyles from "../styles/typography.module.css"
@@ -10,8 +11,8 @@ import { useRouter } from "next/router"
 export default function ApiGallery() {
   const router = useRouter()
 
-  const onChange = (e) => {
-    const version = parseInt(e.target.value)
+  const onChange: MouseEventHandler<HTMLButtonElement> = (e) => {
+    const version = parseInt((e.target as HTMLElement).getAttribute("value")!)
 
     if (version !== 7) {
       router.push(`https://legacy.react-hook-form.com/v${version}/api`)
diff --git a/src/components/BuilderPage.tsx b/src/components/BuilderPage.tsx
index f23d43e59..981472643 100644
--- a/src/components/BuilderPage.tsx
+++ b/src/components/BuilderPage.tsx
@@ -2,9 +2,10 @@ import { useState, useRef, useEffect, memo, RefObject } from "react"
 import { useRouter } from "next/router"
 import { Animate } from "react-simple-animate"
 import { useForm } from "react-hook-form"
+import type { SubmitHandler } from "react-hook-form"
 import SortableContainer from "./SortableContainer"
 import { useStateMachine } from "little-state-machine"
-import type { GlobalState } from "little-state-machine"
+import type { GlobalState, FormDataItem } from "little-state-machine"
 import colors from "../styles/colors"
 import generateCode from "./logic/generateCode"
 import copyClipBoard from "./utils/copyClipBoard"
@@ -27,7 +28,9 @@ const errorStyle = {
   background: colors.errorPink,
 }
 
-const defaultValue = {
+type FormFieldDefinitionItem = Partial<FormDataItem> & { toggle?: boolean }
+
+const defaultValue: FormFieldDefinitionItem = {
   max: undefined,
   min: undefined,
   pattern: undefined,
@@ -36,7 +39,7 @@ const defaultValue = {
   required: undefined,
   name: "",
   type: "",
-  options: [],
+  options: "",
 }
 
 function BuilderPage({
@@ -61,41 +64,43 @@ function BuilderPage({
       }
     },
   })
-  const [editFormData, setFormData] = useState(defaultValue)
+  const [editFormData, setEditFormData] = useState(defaultValue)
   const { register, handleSubmit, watch, setValue, reset, formState } =
-    useForm()
+    useForm<FormFieldDefinitionItem>()
   const errors = formState.errors
   const [editIndex, setEditIndex] = useState(-1)
   const copyFormData = useRef<GlobalState["formData"]>([])
   const closeButton = useRef<HTMLButtonElement>(null)
   const [showValidation, toggleValidation] = useState(false)
-  const onSubmit = (data) => {
+
+  const onSubmit: SubmitHandler<FormFieldDefinitionItem> = (data) => {
     toggleValidation(false)
     if (editIndex >= 0) {
-      formData[editIndex] = data
+      formData[editIndex] = data as FormDataItem
       updateFormData([...formData.filter((formInput) => formInput)])
-      setFormData(defaultValue)
+      setEditFormData(defaultValue)
       setEditIndex(-1)
     } else {
       updateFormData([...formData, ...[data]])
     }
     reset()
   }
+
   const form = useRef<HTMLHeadingElement>(null)
   const type = watch("type")
   const shouldToggleOn =
-    editFormData.max ||
-    editFormData.min ||
-    editFormData.pattern ||
-    editFormData.maxLength ||
-    editFormData.minLength ||
+    !!editFormData.max ||
+    !!editFormData.min ||
+    !!editFormData.pattern ||
+    !!editFormData.maxLength ||
+    !!editFormData.minLength ||
     editFormData.required
   copyFormData.current = formData
   const editIndexRef = useRef<number | null>(null)
   editIndexRef.current = editIndex
   const router = useRouter()
 
-  const validate = (value) => {
+  const validate = (value: unknown) => {
     return (
       !Object.values(copyFormData.current).find(
         (data) => data.name === value
@@ -118,7 +123,7 @@ function BuilderPage({
   }, [editFormData.type, setValue])
 
   useEffect(() => {
-    setValue("required", editFormData.required)
+    setValue("required", !!editFormData.required)
   }, [editFormData.required, editIndex, setValue])
 
   const child = (
@@ -140,15 +145,12 @@ function BuilderPage({
           </p>
 
           <SortableContainer
-            {...{
-              updateFormData,
-              formData,
-              editIndex,
-              setEditIndex,
-              setFormData,
-              editFormData,
-              reset,
-            }}
+            updateFormData={updateFormData}
+            formData={formData}
+            editIndex={editIndex}
+            setEditIndex={setEditIndex}
+            setFormData={setEditFormData}
+            reset={reset}
           />
         </section>
 
diff --git a/src/components/DevTools.tsx b/src/components/DevTools.tsx
index 5f96e667d..1b9aac681 100644
--- a/src/components/DevTools.tsx
+++ b/src/components/DevTools.tsx
@@ -20,6 +20,7 @@ import type { DevtoolUIProps } from "@hookform/devtools/dist/devToolUI"
 
 const DevTool = dynamic<DevtoolUIProps>(
   () =>
+    // @ts-expect-error no types are available
     import("@hookform/devtools/dist/index.cjs.development").then(
       (mod) => mod.DevTool
     ),
@@ -37,7 +38,7 @@ export default function DevTools() {
 
   const { control } = methods
 
-  const onSubmit = (data) => console.log(data)
+  const onSubmit = (data: unknown) => console.log(data)
 
   return (
     <div className={containerStyles.container}>
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 0226712ca..c00078131 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -1,14 +1,14 @@
 import { memo } from "react"
 import { Animate } from "react-simple-animate"
 import { useStateMachine } from "little-state-machine"
-import FormFields from "./FormFields"
-import goToBuilder from "./utils/goToBuilder"
-import { FieldValues, UseFormReturn } from "react-hook-form"
+import type { FieldValues, UseFormReturn } from "react-hook-form"
 import home from "../data/home"
 import generic from "../data/generic"
 import buttonStyles from "../styles/button.module.css"
 import containerStyles from "../styles/container.module.css"
 import typographyStyles from "../styles/typography.module.css"
+import FormFields from "./FormFields"
+import goToBuilder from "./utils/goToBuilder"
 import styles from "./Form.module.css"
 
 const animationProps = {
@@ -76,7 +76,7 @@ function Form({
             Example
           </h2>
 
-          <FormFields {...{ formData, errors, register }} />
+          <FormFields formData={formData} errors={errors} register={register} />
 
           <button className={buttonStyles.pinkButton}>
             {home.liveDemo.submit}
@@ -136,7 +136,7 @@ function Form({
                 <pre className={styles.code}>
                   {Object.keys(errors).length > 0 &&
                     JSON.stringify(
-                      Object.entries(errors).reduce(
+                      Object.entries(errors).reduce<Record<string, unknown>>(
                         // @ts-expect-error needed for previous
                         // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         (previous, [key, { ref, ...rest }]) => {
diff --git a/src/components/FormFields.tsx b/src/components/FormFields.tsx
index 71c348df5..b0359182c 100644
--- a/src/components/FormFields.tsx
+++ b/src/components/FormFields.tsx
@@ -1,3 +1,5 @@
+import type { GlobalState } from "little-state-machine"
+import type { FieldErrors, UseFormRegister } from "react-hook-form"
 import colors from "../styles/colors"
 import styles from "./FormFields.module.css"
 
@@ -7,7 +9,25 @@ const errorStyle = {
   borderLeft: `10px solid ${colors.lightPink}`,
 }
 
-const FormFields = ({ formData, errors, register }) => {
+function getNumericValidationFor<
+  TKey extends "maxLength" | "minLength" | "min" | "max",
+>(name: TKey, value: string): Record<TKey, number> | null {
+  const number = parseInt(value, 10)
+  if (typeof number === "number" && !Number.isNaN(number)) {
+    return { [name]: number } as Record<TKey, number>
+  }
+  return null
+}
+
+const FormFields = ({
+  formData,
+  errors,
+  register,
+}: {
+  formData: GlobalState["formData"]
+  errors: FieldErrors
+  register: UseFormRegister<Record<string, unknown>>
+}) => {
   return (formData || []).map((field, i) => {
     switch (field.type) {
       case "select":
@@ -38,8 +58,8 @@ const FormFields = ({ formData, errors, register }) => {
             placeholder={field.name}
             {...register(field.name, {
               required: field.required,
-              ...(field.maxLength ? { maxLength: field.maxLength } : null),
-              ...(field.minLength ? { minLength: field.minLength } : null),
+              ...getNumericValidationFor("maxLength", field.maxLength),
+              ...getNumericValidationFor("minLength", field.minLength),
             })}
             key={field.name}
             style={{
@@ -96,13 +116,15 @@ const FormFields = ({ formData, errors, register }) => {
             placeholder={field.name}
             {...register(field.name, {
               required: field.required,
+
               ...(field.pattern
                 ? { pattern: new RegExp(field.pattern) }
                 : null),
-              ...(field.max ? { max: field.max } : null),
-              ...(field.min ? { min: field.min } : null),
-              ...(field.maxLength ? { maxLength: field.maxLength } : null),
-              ...(field.minLength ? { minLength: field.minLength } : null),
+
+              ...getNumericValidationFor("max", field.max),
+              ...getNumericValidationFor("min", field.min),
+              ...getNumericValidationFor("maxLength", field.maxLength),
+              ...getNumericValidationFor("minLength", field.minLength),
             })}
           />
         )
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index 5c0d1b6f8..e9fc91295 100755
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -1,4 +1,7 @@
 import { useState, useRef, useEffect, memo } from "react"
+import { useForm } from "react-hook-form"
+import type { SubmitHandler } from "react-hook-form"
+import Link from "next/link"
 import Form from "./Form"
 import Header from "./Header"
 import Watcher from "./Watcher"
@@ -16,8 +19,6 @@ import styles from "./HomePage.module.css"
 import { SponsorsList } from "./sponsorsList"
 import { useRouter } from "next/router"
 import { GeneralObserver } from "./general-observer"
-import Link from "next/link"
-import { useForm } from "react-hook-form"
 
 function HomePage() {
   const [submitData, updateSubmitData] = useState({})
@@ -33,7 +34,8 @@ function HomePage() {
   const [watchPlay, setWatchPlay] = useState(false)
   const { query } = useRouter()
   const methods = useForm()
-  const onSubmit = (data) => {
+
+  const onSubmit: SubmitHandler<Record<string, unknown>> = (data) => {
     updateSubmitData(data)
   }
 
@@ -273,13 +275,11 @@ function HomePage() {
       <div ref={HomeRef} />
 
       <Form
-        {...{
-          methods,
-          onSubmit,
-          submitData,
-          toggleBuilder,
-          formUpdated,
-        }}
+        methods={methods}
+        onSubmit={onSubmit}
+        submitData={submitData}
+        toggleBuilder={toggleBuilder}
+        formUpdated={formUpdated}
       />
 
       <section className={containerStyles.centerContent}>
diff --git a/src/components/IsolateRender.tsx b/src/components/IsolateRender.tsx
index 753f9440d..b3c15f332 100644
--- a/src/components/IsolateRender.tsx
+++ b/src/components/IsolateRender.tsx
@@ -1,4 +1,5 @@
 import { memo, useState } from "react"
+import type React from "react"
 import { AnimateKeyframes, Animate } from "react-simple-animate"
 import colors from "../styles/colors"
 import home from "../data/home"
@@ -39,7 +40,7 @@ const IsoLateInput = () => {
   )
 }
 
-const ControlledInputs = ({ style }) => {
+const ControlledInputs = ({ style }: { style?: React.CSSProperties }) => {
   const [play, setPlay] = useState(false)
 
   return (
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 39b9ce646..6fd3dabef 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -3,7 +3,13 @@ import searchStyles from "./Search.module.css"
 import useWindowSize from "./utils/useWindowSize"
 import { LARGE_SCREEN } from "../styles/breakpoints"
 
-const Search = ({ focus, setFocus }: { focus: boolean; setFocus }) => {
+const Search = ({
+  focus,
+  setFocus,
+}: {
+  focus: boolean
+  setFocus: (value: boolean) => void
+}) => {
   const { width } = useWindowSize()
   const searchRef = useRef<HTMLInputElement>(null)
 
@@ -55,4 +61,5 @@ const Search = ({ focus, setFocus }: { focus: boolean; setFocus }) => {
     </>
   )
 }
+
 export default Search
diff --git a/src/components/SortableContainer.tsx b/src/components/SortableContainer.tsx
index a7532871a..ef8341ed1 100644
--- a/src/components/SortableContainer.tsx
+++ b/src/components/SortableContainer.tsx
@@ -1,6 +1,7 @@
+// @ts-expect-error no types are available
 import Sortable from "react-sortablejs"
 import { Animate } from "react-simple-animate"
-import type { GlobalState } from "little-state-machine"
+import type { FormDataItem } from "little-state-machine"
 import colors from "../styles/colors"
 import generic from "../data/generic"
 import originalFormData from "../state/formData"
@@ -14,20 +15,20 @@ export default function SortableContainer({
   setFormData,
   reset,
 }: {
-  updateFormData: (data: object) => void
-  formData: GlobalState["formData"]
+  updateFormData: (data: FormDataItem[]) => void
+  formData: FormDataItem[]
   editIndex: number
   setEditIndex: (payload: number) => void
-  setFormData: (payload: object) => void
+  setFormData: (payload: FormDataItem) => void
   reset: () => void
 }) {
   return (
     <div className={styles.sortableWrapper}>
       <Sortable
         tag="ul"
-        onChange={(data) => {
+        onChange={(data: FormDataItem["name"][]) => {
           updateFormData(
-            data.reduce((previous, current) => {
+            data.reduce<FormDataItem[]>((previous, current) => {
               return [
                 ...previous,
                 formData[formData.findIndex((data) => current === data.name)],
@@ -75,7 +76,7 @@ export default function SortableContainer({
                       onClick={() => {
                         if (editIndex === index) {
                           setEditIndex(-1)
-                          setFormData({})
+                          setFormData({} as FormDataItem)
                           reset()
                         } else {
                           const index = formData.findIndex(
@@ -107,7 +108,7 @@ export default function SortableContainer({
                             setEditIndex(-1)
 
                             if (editIndex === index) {
-                              setFormData({})
+                              setFormData({} as FormDataItem)
                             }
                           }
                         }
@@ -129,7 +130,7 @@ export default function SortableContainer({
             updateFormData(originalFormData)
           }}
         >
-          Reset
+          {generic.reset}
         </button>
         <button
           onClick={() => {
diff --git a/src/components/TabGroup.tsx b/src/components/TabGroup.tsx
index 455f595f7..159c89bc6 100644
--- a/src/components/TabGroup.tsx
+++ b/src/components/TabGroup.tsx
@@ -1,7 +1,14 @@
 import { useState } from "react"
+import type { ReactNode } from "react"
 import styles from "./TabGroup.module.css"
 
-const TabGroup = ({ children, buttonLabels }) => {
+const TabGroup = ({
+  children,
+  buttonLabels,
+}: {
+  children: ReactNode[]
+  buttonLabels: string[]
+}) => {
   const [index, setIndex] = useState(0)
 
   return (
diff --git a/src/components/TypeText.tsx b/src/components/TypeText.tsx
index 43bd6c1a2..4c7364ce1 100644
--- a/src/components/TypeText.tsx
+++ b/src/components/TypeText.tsx
@@ -1,6 +1,7 @@
+import type { ReactNode } from "react"
 import typographyStyles from "../styles/typography.module.css"
 
-const TypeText = ({ children }) => {
+const TypeText = ({ children }: { children: ReactNode }) => {
   return <span className={typographyStyles.typeText}>{children}</span>
 }
 
diff --git a/src/components/logic/generateCode.ts b/src/components/logic/generateCode.ts
index 068603b78..f97389f86 100644
--- a/src/components/logic/generateCode.ts
+++ b/src/components/logic/generateCode.ts
@@ -1,4 +1,4 @@
-import { GlobalState } from "little-state-machine"
+import type { GlobalState } from "little-state-machine"
 
 export default (formData: GlobalState["formData"]) => {
   return `import React from 'react';
diff --git a/src/components/logic/getEditLink.tsx b/src/components/logic/getEditLink.tsx
index 64b0cce20..2e7bb3d4b 100644
--- a/src/components/logic/getEditLink.tsx
+++ b/src/components/logic/getEditLink.tsx
@@ -5,14 +5,14 @@ const dataPreFix = "data/"
 const pagesPreFix = "pages/"
 const content = "content/"
 
-const filterApiPageURL = (pathname) => {
+const filterApiPageURL = (pathname: string): string => {
   if (pathname.charAt(pathname.length - 1) === "/")
     return pathname.substring(0, pathname.length - 1).substring(1)
 
   return pathname.substring(1)
 }
 
-export const getEditLink = (pathname: string) => {
+export const getEditLink = (pathname: string): string => {
   if (!pathname) return ""
 
   if (pathname === "/" || pathname === "") {
@@ -38,4 +38,6 @@ export const getEditLink = (pathname: string) => {
   } else if (pathname.includes("resources")) {
     return `${preFix}${dataPreFix}resources.tsx`
   }
+
+  return ""
 }
diff --git a/src/components/mdx/code.tsx b/src/components/mdx/code.tsx
index 6f95062c0..aee6add49 100644
--- a/src/components/mdx/code.tsx
+++ b/src/components/mdx/code.tsx
@@ -1,7 +1,8 @@
+import { useEffect, useState } from "react"
+import type { ReactNode } from "react"
 import { Highlight } from "prism-react-renderer"
-import { theme, lightTheme } from "./theme"
 import { useTheme } from "next-themes"
-import { useEffect, useState } from "react"
+import { theme, lightTheme } from "./theme"
 
 const prism = {
   dark: theme,
@@ -23,13 +24,23 @@ function usePrismTheme() {
   return finalTheme
 }
 
-export const PrismSyntaxHighlight = ({ children, className }) => {
+export const PrismSyntaxHighlight = ({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className: string
+}) => {
   const language = className.replace(/language-/gm, "")
 
   const currentTheme = usePrismTheme()
 
   return (
-    <Highlight code={children.trim()} language={language} theme={currentTheme}>
+    <Highlight
+      code={(children as string).trim()}
+      language={language}
+      theme={currentTheme}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre className={className} style={style}>
           {tokens.map((line, i) => (
diff --git a/src/components/mdx/pre.tsx b/src/components/mdx/pre.tsx
index b1c05ba20..c2b283597 100644
--- a/src/components/mdx/pre.tsx
+++ b/src/components/mdx/pre.tsx
@@ -1,15 +1,25 @@
-import { useRef } from "react"
+import type { DetailedHTMLProps, HTMLAttributes } from "react"
+import { isValidElement, useRef } from "react"
 import ClipBoard from "../ClipBoard"
 import styles from "../CodeArea.module.css"
 import copyClipBoard from "../utils/copyClipBoard"
 import { CodeSandBoxLink } from "../CodeSandbox"
 
-export const Pre = (props) => {
+export const Pre = (
+  props: DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement> & {
+    copy?: boolean
+    sandbox?: string
+    expo?: boolean
+  }
+) => {
   const preRef = useRef<HTMLDivElement>(null)
-  const language =
-    props?.children?.props?.className?.replace(/language-/gm, "") || ""
+
+  const language = isValidElement<{ className?: string }>(props?.children)
+    ? props.children.props?.className?.replace(/language-/gm, "") || ""
+    : ""
 
   const isJs = language === "javascript"
+
   return (
     <div
       style={{
diff --git a/src/data/generic.tsx b/src/data/generic.tsx
index e79b25b2a..8b2a886e4 100644
--- a/src/data/generic.tsx
+++ b/src/data/generic.tsx
@@ -33,6 +33,7 @@ export default {
   example: "Example",
   edit: "Edit",
   cancelEdit: "Cancel Edit",
+  reset: "Reset",
   deleteAll: "Delete All",
   create: "Create",
   update: "Update",
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index a671d9c5f..9ef4423c2 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -19,7 +19,11 @@ export const getStaticPaths: GetStaticPaths = async () => {
   return { paths, fallback: false }
 }
 
-export const getStaticProps = ({ params }) => {
+export const getStaticProps = ({
+  params,
+}: {
+  params?: { slug?: string[] }
+}) => {
   // Find the doc for the current page.
   const doc = allDocs.find(
     (doc) => doc._raw.flattenedPath === params?.slug?.join("/")
diff --git a/src/pages/about-us.tsx b/src/pages/about-us.tsx
index e560eff83..466396c65 100644
--- a/src/pages/about-us.tsx
+++ b/src/pages/about-us.tsx
@@ -5,29 +5,17 @@ import containerStyle from "../styles/container.module.css"
 import typographyStyles from "../styles/typography.module.css"
 import styles from "../components/ResourcePage.module.css"
 
-const Twitter = ({ twitterName }) => (
-  <a
-    href={`https://twitter.com/${twitterName}`}
-    target="_blank"
-    rel="noopener noreferrer"
-    className={styles.twitter}
-  >
-    <svg
-      width="15"
-      height="15"
-      viewBox="0 -2 24 24"
-      fill="white"
-      style={{
-        marginRight: 8,
-        top: 2,
-      }}
-    >
-      <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
-    </svg>
-  </a>
-)
+interface AboutUsData {
+  name: string
+  imgUrl: string
+  url: string
+  twitterName: string
+  bio: string
+  interests: string[]
+  active: boolean
+}
 
-const data = [
+const data: AboutUsData[] = [
   {
     name: "Beier(Bill) Luo",
     imgUrl:
@@ -143,6 +131,28 @@ const data = [
   },
 ]
 
+const Twitter = ({ twitterName }: Pick<AboutUsData, "twitterName">) => (
+  <a
+    href={`https://twitter.com/${twitterName}`}
+    target="_blank"
+    rel="noopener noreferrer"
+    className={styles.twitter}
+  >
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 -2 24 24"
+      fill="white"
+      style={{
+        marginRight: 8,
+        top: 2,
+      }}
+    >
+      <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
+    </svg>
+  </a>
+)
+
 const AboutUs = () => {
   return (
     <Layout>
diff --git a/src/pages/api/[[...route]].ts b/src/pages/api/[[...route]].ts
index 36dc89ad4..2ea29eef2 100644
--- a/src/pages/api/[[...route]].ts
+++ b/src/pages/api/[[...route]].ts
@@ -15,5 +15,5 @@ export default function handler(
     return res.redirect(307, `/docs/${redirect}`)
   }
 
-  res.redirect(307, "/docs")
+  return res.redirect(307, "/docs")
 }
diff --git a/src/state/formData.ts b/src/state/formData.ts
index 5d458f27f..a9dd1c136 100644
--- a/src/state/formData.ts
+++ b/src/state/formData.ts
@@ -1,4 +1,6 @@
-const formData = [
+import type { GlobalState } from "little-state-machine"
+
+const formData: GlobalState["formData"] = [
   {
     name: "First name",
     type: "text",
diff --git a/src/types/little-state-machine.d.ts b/src/types/little-state-machine.d.ts
index 243c8df2e..157926feb 100644
--- a/src/types/little-state-machine.d.ts
+++ b/src/types/little-state-machine.d.ts
@@ -1,7 +1,7 @@
 import "little-state-machine"
 
 declare module "little-state-machine" {
-  interface FormDataItem {
+  export interface FormDataItem {
     name: string
     type: string
     required: boolean
diff --git a/tsconfig.json b/tsconfig.json
index 99a552394..12088f941 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
     /* Basic Options */
-    // "incremental": true,                         /* Enable incremental compilation */
+    "incremental": true /* Enable incremental compilation */,
     "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
     "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     "lib": [
@@ -10,7 +11,7 @@
       "es2017",
       "esnext"
     ] /* Specify library files to be included in the compilation. */,
-    // "allowJs": true,                             /* Allow javascript files to be compiled. */
+    "allowJs": true /* Allow javascript files to be compiled. */,
     // "checkJs": true,                             /* Report errors in .js files. */
     "jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
@@ -25,25 +26,28 @@
     "noEmit": true /* Do not emit outputs. */,
     // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
     /* Strict Type-Checking Options */
-    "strict": false /* Enable all strict type-checking options. */,
-    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
     // "strictNullChecks": true,                    /* Enable strict null checks. */
     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
     // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
     // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
+    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
     // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+
     /* Additional Checks */
-    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
-    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
+    "noUnusedLocals": true /* Report errors on unused locals. */,
+    "noUnusedParameters": true /* Report errors on unused parameters. */,
+    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
     // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+
     /* Module Resolution Options */
-    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     "baseUrl": "./",
     "paths": {
       "@/*": ["./src/*"],
@@ -60,23 +64,18 @@
     // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
     // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
     // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    "resolveJsonModule": true,
+
     /* Experimental Options */
     "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
     "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
+
     /* Advanced Options */
     "skipLibCheck": true /* Skip type checking of declaration files. */,
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "allowJs": true,
-    "incremental": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "strictNullChecks": true
+
+    /** Editor Support */
+    "plugins": [{ "name": "next" }]
   },
   "include": [
     "next-env.d.ts",