diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index bfa872ad..007ebcea 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -9,11 +9,11 @@ import { useSession, getSession } from 'next-auth/client';
 export default function EventType(props) {
     const router = useRouter();
     const [ session, loading ] = useSession();
-    const titleRef = useRef();
-    const slugRef = useRef();
-    const descriptionRef = useRef();
-    const lengthRef = useRef();
-    const isHiddenRef = useRef();
+    const titleRef = useRef<HTMLInputElement>();
+    const slugRef = useRef<HTMLInputElement>();
+    const descriptionRef = useRef<HTMLInputElement>();
+    const lengthRef = useRef<HTMLInputElement>();
+    const isHiddenRef = useRef<HTMLInputElement>();
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index be1346ba..2c1163b5 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -15,16 +15,16 @@ export default function Availability(props) {
     const [showAddModal, setShowAddModal] = useState(false);
     const [successModalOpen, setSuccessModalOpen] = useState(false);
     const [showChangeTimesModal, setShowChangeTimesModal] = useState(false);
-    const titleRef = useRef();
-    const slugRef = useRef();
-    const descriptionRef = useRef();
-    const lengthRef = useRef();
-    const isHiddenRef = useRef();
+    const titleRef = useRef<HTMLInputElement>();
+    const slugRef = useRef<HTMLInputElement>();
+    const descriptionRef = useRef<HTMLInputElement>();
+    const lengthRef = useRef<HTMLInputElement>();
+    const isHiddenRef = useRef<HTMLInputElement>();
 
-    const startHoursRef = useRef();
-    const startMinsRef = useRef();
-    const endHoursRef = useRef();
-    const endMinsRef = useRef();
+    const startHoursRef = useRef<HTMLInputElement>();
+    const startMinsRef = useRef<HTMLInputElement>();
+    const endHoursRef = useRef<HTMLInputElement>();
+    const endMinsRef = useRef<HTMLInputElement>();
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index c1ae06b0..8644d3c7 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -10,8 +10,8 @@ import { signIn, useSession, getSession } from 'next-auth/client';
 export default function Settings(props) {
     const [ session, loading ] = useSession();
     const [successModalOpen, setSuccessModalOpen] = useState(false);
-    const oldPasswordRef = useRef();
-    const newPasswordRef = useRef();
+    const oldPasswordRef = useRef<HTMLInputElement>();
+    const newPasswordRef = useRef<HTMLInputElement>();
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx
index 0749fd46..76039466 100644
--- a/pages/settings/profile.tsx
+++ b/pages/settings/profile.tsx
@@ -13,10 +13,10 @@ export default function Settings(props) {
     const [ session, loading ] = useSession();
     const router = useRouter();
     const [successModalOpen, setSuccessModalOpen] = useState(false);
-    const usernameRef = useRef();
-    const nameRef = useRef();
-    const descriptionRef = useRef();
-    const avatarRef = useRef();
+    const usernameRef = useRef<HTMLInputElement>();
+    const nameRef = useRef<HTMLInputElement>();
+    const descriptionRef = useRef<HTMLInputElement>();
+    const avatarRef = useRef<HTMLInputElement>();
 
     const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone });