diff --git a/app/messages/components/new-message-bottom-sheet.tsx b/app/messages/components/new-message-bottom-sheet.tsx
index 024577b..439650a 100644
--- a/app/messages/components/new-message-bottom-sheet.tsx
+++ b/app/messages/components/new-message-bottom-sheet.tsx
@@ -1,18 +1,22 @@
-import { Suspense, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { BottomSheet } from "react-spring-bottom-sheet";
-import { atom, useAtom } from "jotai";
+import { useAtom } from "jotai";
 import { useRouter, Routes } from "blitz";
 
 import "react-spring-bottom-sheet/dist/style.css";
 
 import NewMessageArea from "./new-message-area";
-
-export const bottomSheetOpenAtom = atom(false);
+import { bottomSheetOpenAtom } from "../pages/messages";
 
 export default function NewMessageBottomSheet() {
 	const router = useRouter();
 	const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom);
 	const [recipient, setRecipient] = useState("");
+	const recipientRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		recipientRef.current?.focus();
+	});
 
 	return (
 		<BottomSheet
@@ -33,6 +37,7 @@ export default function NewMessageBottomSheet() {
 				<div className="flex items-center p-4 border-t border-b">
 					<span className="mr-4 text-[#333]">To:</span>
 					<input
+						ref={recipientRef}
 						onChange={(event) => setRecipient(event.target.value)}
 						className="bg-none border-none outline-none flex-1 text-black"
 					/>
diff --git a/app/messages/pages/messages.tsx b/app/messages/pages/messages.tsx
index 7e8296c..339bced 100644
--- a/app/messages/pages/messages.tsx
+++ b/app/messages/pages/messages.tsx
@@ -1,12 +1,12 @@
 import { Suspense, useEffect } from "react";
+import dynamic from "next/dynamic";
 import type { BlitzPage } from "blitz";
 import { Routes } from "blitz";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 
 import Layout from "../../core/layouts/layout";
 import ConversationsList from "../components/conversations-list";
 import NewMessageButton from "../components/new-message-button";
-import NewMessageBottomSheet, { bottomSheetOpenAtom } from "../components/new-message-bottom-sheet";
 import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
 import useNotifications from "../../core/hooks/use-notifications";
 
@@ -35,6 +35,13 @@ const Messages: BlitzPage = () => {
 	);
 };
 
+const NewMessageBottomSheet = dynamic(() => import("../components/new-message-bottom-sheet"), {
+	ssr: false,
+	loading: () => null,
+});
+
+export const bottomSheetOpenAtom = atom(false);
+
 Messages.getLayout = (page) => <Layout title="Messages">{page}</Layout>;
 
 Messages.authenticate = { redirectTo: Routes.SignIn().pathname };