diff --git a/react/components/Address.tsx b/react/components/Address.tsx
index 34d0bca..e04f731 100644
--- a/react/components/Address.tsx
+++ b/react/components/Address.tsx
@@ -1,10 +1,11 @@
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import { useEnsName } from "wagmi"
+import { AddressProps } from "../lib/types"
 
-export default function Address(props) {
+export default function Address(props: AddressProps) {
   const match = props.address.match(/^(0x.{4}).+(.{4})$/)
-  const truncated = match[1] + "..." + match[2]
+  const truncated = match![1] + "..." + match![2]
 
   const [ens, setEns] = useState(truncated)
 
diff --git a/react/components/AppProvider.tsx b/react/components/AppProvider.tsx
index 7dd7e6e..113cf56 100644
--- a/react/components/AppProvider.tsx
+++ b/react/components/AppProvider.tsx
@@ -1,19 +1,25 @@
 import { ethers } from "ethers"
-import { createContext, useContext, useState } from "react"
+import React, { createContext, useContext, useState } from "react"
 import Confetti from "react-confetti"
 import toast from "react-hot-toast"
 import { useAccount, useContractEvent, useContractRead } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { Tweet as TweetType } from "../lib/types"
 
-const AppContext = createContext(null)
+const AppContext = createContext<{
+  tweets: Map<number, TweetType> | undefined
+  setTweets: React.Dispatch<
+    React.SetStateAction<Map<number, TweetType> | undefined>
+  >
+}>(undefined!)
 
-export const AppProvider = ({ children }) => {
+export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [address, setAddress] = useState("")
-  const [tweets, setTweets] = useState(null)
+  const [tweets, setTweets] = useState<Map<number, TweetType> | undefined>()
   const [confetti, setConfetti] = useState(false)
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
@@ -31,7 +37,7 @@ export const AppProvider = ({ children }) => {
     {
       onSuccess(data) {
         if (data) {
-          setTweets((prevState) => {
+          setTweets((prevState: Map<number, TweetType> | undefined) => {
             let newState = new Map(prevState)
             data.forEach((tweet, id) => {
               newState.set(id + 1, {
diff --git a/react/components/Avatar.tsx b/react/components/Avatar.tsx
index 3deaf11..7cf1dc8 100644
--- a/react/components/Avatar.tsx
+++ b/react/components/Avatar.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react"
 import { useEnsAvatar } from "wagmi"
+import { AvatarProps } from "../lib/types"
 
-export default function Avatar(props) {
+export default function Avatar(props: AvatarProps) {
   const [avatar, setAvatar] = useState("")
   const seedrandom = require("seedrandom")
   const colors = [
@@ -73,9 +74,9 @@ export default function Avatar(props) {
           avatar
             ? "hidden"
             : props.styles
-            ? `${props.styles} ${getColorFromAddress(props.address)}`
+            ? `${props.styles} ${getColorFromAddress(Number(props.address))}`
             : `mx-3 inline h-12 w-12 self-start rounded-full ${getColorFromAddress(
-                props.address
+                Number(props.address)
               )}`
         }
       >
diff --git a/react/components/Controls.tsx b/react/components/Controls.tsx
index f6ed673..8e36628 100644
--- a/react/components/Controls.tsx
+++ b/react/components/Controls.tsx
@@ -108,7 +108,10 @@ export default function Controls() {
         toast.success("Cleared tweets")
         console.debug("Cleared --", data.hash)
         totalTweetsRefetch().then((value) => {
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
diff --git a/react/components/EditModal.tsx b/react/components/EditModal.tsx
index 2556629..f012781 100644
--- a/react/components/EditModal.tsx
+++ b/react/components/EditModal.tsx
@@ -4,10 +4,11 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { EditProps } from "../lib/types.js"
 import Avatar from "./Avatar"
 
-export default function ReplyTweet(props) {
+export default function EditTweet(props: EditProps) {
   /**
    * Contract hooks
    */
@@ -30,7 +31,10 @@ export default function ReplyTweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Edited tweet!")
           console.debug("Edited --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
diff --git a/react/components/Editor.tsx b/react/components/Editor.tsx
index bb25630..10894bb 100644
--- a/react/components/Editor.tsx
+++ b/react/components/Editor.tsx
@@ -9,7 +9,7 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
 import Avatar from "./Avatar"
 
 export default function Editor() {
@@ -18,7 +18,7 @@ export default function Editor() {
   const [price, setPrice] = useState("")
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
@@ -59,7 +59,10 @@ export default function Editor() {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
diff --git a/react/components/Layout.tsx b/react/components/Layout.tsx
index 394a216..fc79bea 100644
--- a/react/components/Layout.tsx
+++ b/react/components/Layout.tsx
@@ -3,12 +3,13 @@ import { useRouter } from "next/router"
 import { useState } from "react"
 import { toast, Toaster } from "react-hot-toast"
 import { useAccount, useContractRead } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { LayoutProps } from "../lib/types.js"
 import Nav from "./Nav"
 import Sidebar from "./Sidebar"
 import TweetModal from "./TweetModal"
 
-export default function Layout(props) {
+export default function Layout(props: LayoutProps) {
   const { children, ...pageMeta } = props
   const router = useRouter()
   const meta = {
@@ -25,7 +26,7 @@ export default function Layout(props) {
   const [isOwner, setIsOwner] = useState(false)
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
         console.debug("Found authorized account: ", data.address)
 
@@ -48,7 +49,7 @@ export default function Layout(props) {
         // Check if this is the owner's wallet
         if (
           ownerData &&
-          ownerData.toUpperCase() === data.address.toUpperCase()
+          ownerData.toUpperCase() === data.address!.toUpperCase()
         ) {
           setIsOwner(true)
         } else {
diff --git a/react/components/Nav.tsx b/react/components/Nav.tsx
index 424a70e..069081a 100644
--- a/react/components/Nav.tsx
+++ b/react/components/Nav.tsx
@@ -8,7 +8,7 @@ export default function Nav() {
   const [address, setAddress] = useState("")
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
diff --git a/react/components/ReplyModal.tsx b/react/components/ReplyModal.tsx
index afff1d3..a266f53 100644
--- a/react/components/ReplyModal.tsx
+++ b/react/components/ReplyModal.tsx
@@ -6,7 +6,8 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { ReplyProps } from "../lib/types.js"
 import Address from "./Address"
 import Avatar from "./Avatar"
 
@@ -15,7 +16,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 dayjs.extend(relativeTime)
 
-export default function ReplyTweet(props) {
+export default function ReplyTweet(props: ReplyProps) {
   const [price, setPrice] = useState("")
   const [message, setMessage] = useState("")
 
@@ -54,7 +55,10 @@ export default function ReplyTweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
diff --git a/react/components/Sidebar.tsx b/react/components/Sidebar.tsx
index a422a5c..f35712a 100644
--- a/react/components/Sidebar.tsx
+++ b/react/components/Sidebar.tsx
@@ -1,7 +1,7 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit"
 import Controls from "./Controls"
 
-export default function Sidebar(props) {
+export default function Sidebar(props: { isOwner: boolean }) {
   return (
     <aside className="hidden min-h-screen w-1/4 flex-col lg:flex">
       <div className="mt-3 self-center">
diff --git a/react/components/Tweet.tsx b/react/components/Tweet.tsx
index a02b0ce..df9a42f 100644
--- a/react/components/Tweet.tsx
+++ b/react/components/Tweet.tsx
@@ -7,8 +7,8 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
-import { Tweet as TweetType } from "../lib/types"
+import { contractABI, contractAddress } from "../lib/contract"
+import { Tweet as TweetType, TweetProps } from "../lib/types"
 import Address from "./Address"
 import { useTweets } from "./AppProvider"
 import Avatar from "./Avatar"
@@ -20,7 +20,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 dayjs.extend(relativeTime)
 
-export default function Tweet(props) {
+export default function Tweet(props: TweetProps) {
   const [address, setAddress] = useState("")
   const [price, setPrice] = useState("")
   const [tweet, setTweet]: [any, any] = useState()
@@ -32,7 +32,7 @@ export default function Tweet(props) {
   const { tweets } = useTweets()
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
@@ -73,7 +73,10 @@ export default function Tweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
@@ -99,7 +102,10 @@ export default function Tweet(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Deleted tweet!")
           console.debug("Deleted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
@@ -153,21 +159,24 @@ export default function Tweet(props) {
    * @param {number} id
    * @returns {Array}
    */
-  const getReplies = (id: number): TweetType[] => {
-    let replies = [...tweets.entries()].filter(
-      (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
-    )
-    return replies
+  const getReplies = (id: number): [number, TweetType][] => {
+    if (tweets) {
+      let replies = [...tweets.entries()].filter(
+        (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
+      )
+      return replies
+    }
+    return []
   }
 
   /*
    * On page load, get the relevant tweet or retweet
    */
   useEffect(() => {
-    if (props.id && tweets.get(props.id).retweetID.isZero()) {
+    if (tweets && props.id && tweets.get(props.id)!.retweetID.isZero()) {
       setTweet(tweets.get(props.id))
-    } else if (props.id) {
-      const retweetID = tweets.get(props.id).retweetID
+    } else if (tweets && props.id) {
+      const retweetID = tweets.get(props.id)!.retweetID
       setTweet(tweets.get(retweetID.toNumber()))
       setRetweet(tweets.get(props.id))
     }
diff --git a/react/components/TweetList.tsx b/react/components/TweetList.tsx
index 556be27..79cfbdc 100644
--- a/react/components/TweetList.tsx
+++ b/react/components/TweetList.tsx
@@ -2,7 +2,7 @@ import { Tweet as TweetType } from "../lib/types"
 import { useTweets } from "./AppProvider"
 import Tweet from "./Tweet"
 
-export default function TweetList(props) {
+export default function TweetList(props: { author?: string }) {
   const { tweets } = useTweets()
 
   /**
@@ -10,13 +10,16 @@ export default function TweetList(props) {
    * @returns {Array}
    */
   const getAuthorTweets = (): TweetType[] => {
-    let filtered = [...tweets.values()].filter(
-      (tweet) => tweet.replyID.eq(0) && !tweet.deleted
-    )
-    if (props.author) {
-      filtered = filtered.filter((tweet) => tweet.from == props.author)
+    if (tweets) {
+      let filtered = [...tweets.values()].filter(
+        (tweet) => tweet.replyID.eq(0) && !tweet.deleted
+      )
+      if (props.author) {
+        filtered = filtered.filter((tweet) => tweet.from == props.author)
+      }
+      return filtered
     }
-    return filtered
+    return []
   }
 
   /**
@@ -24,11 +27,14 @@ export default function TweetList(props) {
    * @param {number} id
    * @returns {Array}
    */
-  const getReplies = (id: number): TweetType[] => {
-    let replies = [...tweets.entries()].filter(
-      (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
-    )
-    return replies
+  const getReplies = (id: number): [number, TweetType][] => {
+    if (tweets) {
+      let replies = [...tweets.entries()].filter(
+        (tweet) => tweet[1].replyID.eq(id) && !tweet[1].deleted
+      )
+      return replies
+    }
+    return []
   }
 
   return (
diff --git a/react/components/TweetModal.tsx b/react/components/TweetModal.tsx
index e09e8a5..486062b 100644
--- a/react/components/TweetModal.tsx
+++ b/react/components/TweetModal.tsx
@@ -6,10 +6,11 @@ import {
   useContractWrite,
   UserRejectedRequestError,
 } from "wagmi"
-import { contractABI, contractAddress } from "../lib/contract.js"
+import { contractABI, contractAddress } from "../lib/contract"
+import { ModalProps } from "../lib/types.js"
 import Avatar from "./Avatar"
 
-export default function TweetModal(props) {
+export default function TweetModal(props: ModalProps) {
   const [price, setPrice] = useState("")
   const [message, setMessage] = useState("")
 
@@ -48,7 +49,10 @@ export default function TweetModal(props) {
         totalTweetsRefetch().then((value) => {
           toast.success("Sent tweet!")
           console.debug("Tweeted --", data.hash)
-          console.debug("Retrieved total tweet count --", value.data.toNumber())
+          console.debug(
+            "Retrieved total tweet count --",
+            value.data!.toNumber()
+          )
         })
       },
       onError(error) {
diff --git a/react/lib/contract.js b/react/lib/contract.ts
similarity index 100%
rename from react/lib/contract.js
rename to react/lib/contract.ts
diff --git a/react/lib/types.ts b/react/lib/types.ts
index df94d62..8413d12 100644
--- a/react/lib/types.ts
+++ b/react/lib/types.ts
@@ -1,4 +1,5 @@
 import { BigNumber } from "ethers"
+import { Dispatch, ReactNode, SetStateAction } from "react"
 
 export type Tweet = {
   id: number
@@ -9,3 +10,52 @@ export type Tweet = {
   replyID: BigNumber
   retweetID: BigNumber
 }
+
+export type AddressProps = {
+  address: string
+  styles?: string
+  suffix?: string
+}
+
+export type AvatarProps = {
+  address?: string
+  styles?: string
+}
+
+export type EditProps = {
+  id: number
+  address: string
+  modal: boolean
+  setModal: Dispatch<SetStateAction<boolean>>
+  message: string
+  setMessage: Dispatch<SetStateAction<string>>
+}
+
+export type ReplyProps = {
+  id: number
+  address: string
+  tweet: Tweet
+  modal: boolean
+  setModal: Dispatch<SetStateAction<boolean>>
+}
+
+export type LayoutProps = {
+  title?: string
+  description?: string
+  image?: string
+  date?: string
+  type?: string
+  children?: ReactNode
+}
+
+export type TweetProps = {
+  id: number
+  key: number
+  replies: [number, Tweet][]
+}
+
+export type ModalProps = {
+  address: string
+  modal: boolean
+  setModal: Dispatch<SetStateAction<boolean>>
+}
diff --git a/react/pages/404.tsx b/react/pages/404.tsx
index 5505168..7476f45 100644
--- a/react/pages/404.tsx
+++ b/react/pages/404.tsx
@@ -8,7 +8,7 @@ export default function Error404() {
   const [address, setAddress] = useState("")
   useAccount({
     onSuccess(data) {
-      if (data && !address) {
+      if (data.address && !address) {
         setAddress(data.address)
       }
     },
diff --git a/react/pages/[address].tsx b/react/pages/[address].tsx
index 3ed45d8..54760c3 100644
--- a/react/pages/[address].tsx
+++ b/react/pages/[address].tsx
@@ -27,14 +27,15 @@ export default function Profile() {
   })
 
   const { refetch: resolverRefetch } = useEnsResolver({
-    name: name,
+    name: String(name),
     enabled: false,
     onSuccess(data) {
-      data.getText("description").then((value) => {
-        if (value) {
-          setDescription(value)
-        }
-      })
+      data &&
+        data.getText("description").then((value) => {
+          if (value) {
+            setDescription(value)
+          }
+        })
     },
     onError(error) {
       console.error("Error fetching ENS", error)
@@ -80,7 +81,7 @@ export default function Profile() {
           <div className="mt-4 h-48 w-full bg-twitter-blue" />
           <div className="relative -top-16">
             <Avatar
-              address={address}
+              address={address?.toString()}
               styles="top-0 left-0 z-10 ml-4 block h-32 w-32 rounded-full border-4 border-white"
             />
             <a href={`https://etherscan.io/address/${address}`}>
@@ -96,7 +97,7 @@ export default function Profile() {
             <p className="mt-4">{description}</p>
           </div>
         </section>
-        <TweetList author={address} />
+        <TweetList author={address?.toString()} />
       </Layout>
     </>
   )
diff --git a/react/pages/_app.tsx b/react/pages/_app.tsx
index e6ff6a1..20b856e 100644
--- a/react/pages/_app.tsx
+++ b/react/pages/_app.tsx
@@ -6,6 +6,7 @@ import {
   wallet,
 } from "@rainbow-me/rainbowkit"
 import "@rainbow-me/rainbowkit/styles.css"
+import { AppProps } from "next/app"
 import Head from "next/head"
 import Script from "next/script"
 import { chain, configureChains, createClient, WagmiConfig } from "wagmi"
@@ -53,7 +54,7 @@ const wagmiClient = createClient({
   provider,
 })
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
diff --git a/react/tsconfig.json b/react/tsconfig.json
index 3549b2c..5cc983e 100644
--- a/react/tsconfig.json
+++ b/react/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": [
       "dom",
       "dom.iterable",
@@ -8,7 +8,7 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "incremental": true,