diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx
index 2e1e2cd..47d3f9d 100644
--- a/components/pages/Home.tsx
+++ b/components/pages/Home.tsx
@@ -63,6 +63,7 @@ import useNoteProvider from '../notes/useNoteProvider'
 import useSettings from '../settings/useSettings'
 import { SelectedTodoProvider } from '../todos/SelectedTodo'
 import { useTodoActionSheet } from '../todos/TodoActionSheet'
+import { useCreateTodoModal } from '../todos/CreateTodo'
 
 const Home = () => {
 	// Search stuff
@@ -115,11 +116,14 @@ const Home = () => {
 
 	// Creating todo stuff
 	const fab = useRef<HTMLIonFabElement>(null)
-	const [createTodoModalOpen, setCreateTodoModalOpen] = useState(false)
+	const [presentCreateTodoModal, dismiss] = useCreateTodoModal()
 	const openCreateTodoModal = useCallback(() => {
-		setCreateTodoModalOpen(true)
-		if (fab.current) fab.current.activated = true
-	}, [fab])
+		presentCreateTodoModal({
+			onWillDismiss: () => {
+				if (fab.current) fab.current.activated = false
+			},
+		})
+	}, [fab, presentCreateTodoModal])
 
 	const contentRef = useRef<HTMLIonContentElement>(null)
 
@@ -201,13 +205,6 @@ const Home = () => {
 									<IonIcon icon={add}></IonIcon>
 								</IonFabButton>
 							</IonFab>
-							<CreateTodoModal
-								fab={fab}
-								open={createTodoModalOpen}
-								onWillDismiss={() => {
-									setCreateTodoModalOpen(false)
-								}}
-							/>
 						</>
 					)}
 				</IonContent>
@@ -735,107 +732,6 @@ export const IceboxItem = ({
 	)
 }
 
-export const CreateTodoModal = ({
-	fab,
-	open,
-	onWillDismiss,
-}: {
-	fab: RefObject<HTMLIonFabElement>
-	open: boolean
-	onWillDismiss: ComponentProps<typeof IonModal>['onWillDismiss']
-}) => {
-	const modal = useRef<HTMLIonModalElement>(null)
-
-	const input = useRef<HTMLIonInputElement>(null)
-	const noteInput = useRef<HTMLIonTextareaElement>(null)
-	const noteProvider = useNoteProvider()
-
-	const createTodo = useCallback(
-		async ({ note, title }: { note?: any; title: any }) => {
-			let uri
-			if (note && noteProvider) {
-				uri = await noteProvider.create({ content: note })
-			}
-			await db.todos.add({
-				createdAt: new Date(),
-				title,
-				...(uri && { note: { uri } }),
-			})
-		},
-		[noteProvider],
-	)
-
-	return (
-		<IonModal
-			isOpen={open}
-			ref={modal}
-			onDidPresent={() => input.current?.setFocus()}
-			onKeyDown={event => {
-				if (event.key === 'Enter') {
-					event.preventDefault()
-					modal.current?.dismiss({}, 'confirm')
-				}
-			}}
-			onWillDismiss={event => {
-				onWillDismiss?.(event)
-				if (event.detail.role === 'confirm') {
-					createTodo({
-						title: input.current?.value,
-						note: noteInput.current?.value,
-					})
-				}
-				if (fab.current) fab.current.activated = false
-			}}
-		>
-			<IonHeader translucent>
-				<IonToolbar>
-					<IonTitle>Create todo</IonTitle>
-					<IonButtons slot="secondary">
-						<IonButton
-							role="cancel"
-							onClick={() => modal.current?.dismiss({}, 'cancel')}
-						>
-							Cancel
-						</IonButton>
-					</IonButtons>
-					<IonButtons slot="primary">
-						<IonButton
-							onClick={() => {
-								modal.current?.dismiss({}, 'confirm')
-							}}
-							strong={true}
-						>
-							Confirm
-						</IonButton>
-					</IonButtons>
-				</IonToolbar>
-			</IonHeader>
-			<IonContent className="space-y-4 ion-padding">
-				<IonInput
-					fill="outline"
-					ref={input}
-					type="text"
-					label="Title"
-					labelPlacement="floating"
-				/>
-				{!noteProvider && (
-					<p>Set a note provider in settings to enable this feature.</p>
-				)}
-				<IonTextarea
-					className="h-48"
-					disabled={!noteProvider}
-					helperText="A note with this initial content will be created with your note provider and linked to this todo."
-					fill="outline"
-					label="Note"
-					labelPlacement="floating"
-					placeholder="Write markdown here..."
-					ref={noteInput}
-				/>
-			</IonContent>
-		</IonModal>
-	)
-}
-
 function moveItemInArray<T>(
 	array: T[],
 	fromIndex: number,
diff --git a/components/todos/CreateTodo.tsx b/components/todos/CreateTodo.tsx
new file mode 100644
index 0000000..bddef91
--- /dev/null
+++ b/components/todos/CreateTodo.tsx
@@ -0,0 +1,56 @@
+import { IonHeader, IonModal, useIonModal } from '@ionic/react'
+import { ComponentProps, RefObject, useCallback, useRef } from 'react'
+import useNoteProvider from '../notes/useNoteProvider'
+import { db } from '../db'
+import TodoModal from './TodoModal'
+import { HookOverlayOptions } from '@ionic/react/dist/types/hooks/HookOverlayOptions'
+
+export function CreateTodoModal({
+	dismiss,
+}: {
+	dismiss: (data?: any, role?: string) => void
+}) {
+	return <TodoModal dismiss={dismiss} />
+}
+
+export function useCreateTodoModal(): [
+	({
+		onWillDismiss,
+	}: {
+		onWillDismiss: HookOverlayOptions['onWillDismiss']
+	}) => void,
+	(data?: any, role?: string) => void,
+] {
+	const [present, dismiss] = useIonModal(CreateTodoModal, {
+		dismiss: (data: string, role: string) => dismiss(data, role),
+	})
+
+	const noteProvider = useNoteProvider()
+	const createTodo = useCallback(
+		async ({ note, title }: { note?: any; title: any }) => {
+			let uri
+			if (note && noteProvider) {
+				uri = await noteProvider.create({ content: note })
+			}
+			await db.todos.add({
+				createdAt: new Date(),
+				title,
+				...(uri && { note: { uri } }),
+			})
+		},
+		[noteProvider],
+	)
+
+	return [
+		({ onWillDismiss }: HookOverlayOptions) => {
+			present({
+				onWillDismiss: event => {
+					const todo = event.detail.data
+					if (event.detail.role === 'confirm') createTodo(todo)
+					onWillDismiss?.(event)
+				},
+			})
+		},
+		dismiss,
+	]
+}
diff --git a/components/todos/EditTodo.tsx b/components/todos/EditTodo.tsx
index 7925cfb..edf8a72 100644
--- a/components/todos/EditTodo.tsx
+++ b/components/todos/EditTodo.tsx
@@ -1,21 +1,9 @@
-import {
-	IonButton,
-	IonButtons,
-	IonContent,
-	IonHeader,
-	IonIcon,
-	IonInput,
-	IonPage,
-	IonTextarea,
-	IonTitle,
-	IonToolbar,
-	useIonModal,
-} from '@ionic/react'
-import { openOutline } from 'ionicons/icons'
-import { useCallback, useEffect, useRef } from 'react'
+import { useIonModal } from '@ionic/react'
+import { useCallback } from 'react'
 import { CreatedTodo, db } from '../db'
 import useNoteProvider from '../notes/useNoteProvider'
 import useSelectedTodo from './SelectedTodo'
+import TodoModal from './TodoModal'
 
 export function EditTodoModal({
 	dismiss,
@@ -24,105 +12,18 @@ export function EditTodoModal({
 	dismiss: (data?: any, role?: string) => void
 	todo: CreatedTodo
 }) {
-	const page = useRef<HTMLIonModalElement>(null)
-	const input = useRef<HTMLIonInputElement>(null)
-	const noteInput = useRef<HTMLIonTextareaElement>(null)
-
-	useEffect(() => {
-		input.current?.setFocus()
-	}, [])
-
-	const noteProvider = useNoteProvider()
-
 	return (
-		<IonPage
-			ref={page}
-			onKeyDown={event => {
-				if (event.key === 'Enter') {
-					event.preventDefault()
-					dismiss(
-						{
-							...todo,
-							title: input.current?.value,
-							note: noteInput.current?.value,
-						},
-						'confirm',
-					)
-				}
-			}}
-		>
-			<IonHeader>
-				<IonToolbar>
-					<IonTitle>Edit todo</IonTitle>
-					<IonButtons slot="secondary">
-						<IonButton
-							role="cancel"
-							onClick={() => dismiss(null, 'cancel')}
-						>
-							Cancel
-						</IonButton>
-					</IonButtons>
-					<IonButtons slot="primary">
-						<IonButton
-							onClick={() => {
-								dismiss(
-									{
-										...todo,
-										title: input.current?.value,
-										note: noteInput.current?.value,
-									},
-									'confirm',
-								)
-							}}
-							strong={true}
-						>
-							Confirm
-						</IonButton>
-					</IonButtons>
-				</IonToolbar>
-			</IonHeader>
-			<IonContent className="space-y-4 ion-padding">
-				<IonInput
-					fill="outline"
-					ref={input}
-					type="text"
-					label="Title"
-					labelPlacement="floating"
-					value={todo?.title}
-				/>
-				{!noteProvider && (
-					<p>Set a note provider in settings to enable this feature.</p>
-				)}
-				{todo?.note ? (
-					<div>
-						<a
-							className="space-x-1"
-							href={todo?.note?.uri}
-							target="_blank"
-							rel="noreferrer"
-						>
-							<span>Open note</span>
-							<IonIcon icon={openOutline} />
-						</a>
-					</div>
-				) : (
-					<IonTextarea
-						className="h-48"
-						disabled={!noteProvider}
-						helperText="A note with this initial content will be created with your note provider and linked to this todo."
-						fill="outline"
-						label="Note"
-						labelPlacement="floating"
-						placeholder="Write markdown here..."
-						ref={noteInput}
-					/>
-				)}
-			</IonContent>
-		</IonPage>
+		<TodoModal
+			todo={todo}
+			dismiss={dismiss}
+		/>
 	)
 }
 
-export function useEditTodoModal() {
+export function useEditTodoModal(): [
+	(todo: CreatedTodo) => void,
+	(data?: any, role?: string) => void,
+] {
 	const [todo, setTodo] = useSelectedTodo()
 	const [present, dismiss] = useIonModal(EditTodoModal, {
 		dismiss: (data: string, role: string) => dismiss(data, role),
diff --git a/components/todos/TodoModal.tsx b/components/todos/TodoModal.tsx
new file mode 100644
index 0000000..7c53613
--- /dev/null
+++ b/components/todos/TodoModal.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useRef } from 'react'
+import useNoteProvider from '../notes/useNoteProvider'
+import {
+	IonButton,
+	IonButtons,
+	IonContent,
+	IonHeader,
+	IonIcon,
+	IonInput,
+	IonPage,
+	IonTextarea,
+	IonTitle,
+	IonToolbar,
+} from '@ionic/react'
+import { openOutline } from 'ionicons/icons'
+import { Todo } from '../db'
+
+export default function TodoModal({
+	dismiss,
+	todo = {},
+}: {
+	dismiss: (data?: any, role?: string) => void
+	todo?: Partial<Todo>
+}) {
+	const page = useRef<HTMLIonModalElement>(null)
+	const input = useRef<HTMLIonInputElement>(null)
+	const noteInput = useRef<HTMLIonTextareaElement>(null)
+
+	// Might cause problems that this runs on every render but seems fine atm...
+	useEffect(() => {
+		input.current?.setFocus()
+	})
+
+	const noteProvider = useNoteProvider()
+
+	return (
+		<IonPage
+			ref={page}
+			onKeyDown={event => {
+				if (event.key === 'Enter') {
+					event.preventDefault()
+					dismiss(
+						{
+							...todo,
+							title: input.current?.value,
+							note: noteInput.current?.value,
+						},
+						'confirm',
+					)
+				}
+			}}
+		>
+			<IonHeader>
+				<IonToolbar>
+					<IonTitle>Edit todo</IonTitle>
+					<IonButtons slot="secondary">
+						<IonButton
+							role="cancel"
+							onClick={() => dismiss(null, 'cancel')}
+						>
+							Cancel
+						</IonButton>
+					</IonButtons>
+					<IonButtons slot="primary">
+						<IonButton
+							onClick={() => {
+								dismiss(
+									{
+										...todo,
+										title: input.current?.value,
+										note: noteInput.current?.value,
+									},
+									'confirm',
+								)
+							}}
+							strong={true}
+						>
+							Confirm
+						</IonButton>
+					</IonButtons>
+				</IonToolbar>
+			</IonHeader>
+			<IonContent className="space-y-4 ion-padding">
+				<IonInput
+					fill="outline"
+					ref={input}
+					type="text"
+					label="Title"
+					labelPlacement="floating"
+					value={todo?.title}
+				/>
+				{!noteProvider && (
+					<p>Set a note provider in settings to enable this feature.</p>
+				)}
+				{todo?.note ? (
+					<div>
+						<a
+							className="space-x-1"
+							href={todo?.note?.uri}
+							target="_blank"
+							rel="noreferrer"
+						>
+							<span>Open note</span>
+							<IonIcon icon={openOutline} />
+						</a>
+					</div>
+				) : (
+					<IonTextarea
+						className="h-48"
+						disabled={!noteProvider}
+						helperText="A note with this initial content will be created with your note provider and linked to this todo."
+						fill="outline"
+						label="Note"
+						labelPlacement="floating"
+						placeholder="Write markdown here..."
+						ref={noteInput}
+					/>
+				)}
+			</IonContent>
+		</IonPage>
+	)
+}