diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
index c19e3a4..9c8d598 100644
--- a/app/components/Edit/DesktopTodoDataSelect.vue
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -18,7 +18,6 @@
 	import TimePointSelect from "./Time/TimePointSelect.vue";
 	import TimeRangeSelect from "./Time/TimeRangeSelect.vue";
 	import TimeRecurringSelect from "./Time/TimeRecurringSelect.vue";
-	import TitleSelect from "./TitleSelect.vue";
 
 	const { t } = useI18n();
 
@@ -76,7 +75,6 @@
 		auto-save-id="todo-data"
 	>
 		<SplitterPanel class="h-full flex flex-col flex-1">
-			<TitleSelect v-model:title="todoData.title" />
 			<div class="relative flex-1 overflow-auto py-1">
 				<NoteSelect v-model:note="todoData.note" />
 			</div>
diff --git a/app/components/Edit/EditTodoSheet.vue b/app/components/Edit/EditTodoSheet.vue
index 3f0ff31..ead9682 100644
--- a/app/components/Edit/EditTodoSheet.vue
+++ b/app/components/Edit/EditTodoSheet.vue
@@ -3,6 +3,7 @@
 	import { useDeleteTodo, useUpdateTodo } from "~/mutations/todo";
 	import type { CreateTodoData } from "~/utils/types";
 	import Sheet from "../Utils/Sheet.vue";
+	import TitleSelect from "./TitleSelect.vue";
 	import TodoForm from "./TodoForm.vue";
 
 	const isOpen = ref(false);
@@ -84,27 +85,32 @@
 		:size="modalSize"
 		@close="close"
 	>
-		<TodoForm v-model:todo="todoData" @submit="onSaveTodo">
-			<button
-				type="submit"
-				data-testid="submit-edit-todo-button"
-				:disabled="!isValid"
-				class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex cursor-pointer items-center justify-center rounded transition-colors flex-1"
-			>
-				<Icon
-					v-if="showSaveIcon"
-					name="material-symbols:save-rounded"
-					size="24"
-				/>
-				<Icon v-else name="material-symbols:check-rounded" size="24" />
-			</button>
-			<button
-				type="button"
-				class="bg-secondary hover:bg-danger flex aspect-square cursor-pointer items-center justify-center rounded transition-colors"
-				@click="onDeleteTodo"
-			>
-				<Icon name="material-symbols:delete-outline-rounded" size="24" />
-			</button>
-		</TodoForm>
+		<template v-slot:header>
+			<TitleSelect v-model:title="todoData.title" />
+		</template>
+		<template v-slot:content>
+			<TodoForm v-model:todo="todoData" @submit="onSaveTodo">
+				<button
+					type="submit"
+					data-testid="submit-edit-todo-button"
+					:disabled="!isValid"
+					class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex cursor-pointer items-center justify-center rounded transition-colors flex-1"
+				>
+					<Icon
+						v-if="showSaveIcon"
+						name="material-symbols:save-rounded"
+						size="24"
+					/>
+					<Icon v-else name="material-symbols:check-rounded" size="24" />
+				</button>
+				<button
+					type="button"
+					class="bg-secondary hover:bg-danger flex aspect-square cursor-pointer items-center justify-center rounded transition-colors"
+					@click="onDeleteTodo"
+				>
+					<Icon name="material-symbols:delete-outline-rounded" size="24" />
+				</button>
+			</TodoForm>
+		</template>
 	</Sheet>
 </template>
diff --git a/app/components/Edit/MobileTodoDataSelect.vue b/app/components/Edit/MobileTodoDataSelect.vue
index f43619f..0441c5a 100644
--- a/app/components/Edit/MobileTodoDataSelect.vue
+++ b/app/components/Edit/MobileTodoDataSelect.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	import type { CreateTodoData } from "~/utils/types";
 	import TabedDataSelect from "./TabedDataSelect.vue";
-	import TitleSelect from "./TitleSelect.vue";
 
 	const todoData = defineModel<CreateTodoData>("todo", {
 		required: true,
@@ -9,7 +8,6 @@
 </script>
 
 <template>
-	<TitleSelect v-model:title="todoData.title" />
 	<TabedDataSelect
 		v-model:time="todoData.time"
 		v-model:tags="todoData.tags"
diff --git a/app/components/Edit/NewTodoSheet.vue b/app/components/Edit/NewTodoSheet.vue
index 3a88349..9f1f7c0 100644
--- a/app/components/Edit/NewTodoSheet.vue
+++ b/app/components/Edit/NewTodoSheet.vue
@@ -4,6 +4,7 @@
 	import { useAddTodo } from "~/mutations/todo";
 	import type { CreateTodoData } from "~/utils/types";
 	import Sheet from "../Utils/Sheet.vue";
+	import TitleSelect from "./TitleSelect.vue";
 	import TodoForm from "./TodoForm.vue";
 
 	const { t } = useI18n();
@@ -83,26 +84,31 @@
 		:size="modalSize"
 		@close="close"
 	>
-		<TodoForm v-model:todo="todoData" @submit="onSubmitForm">
-			<button
-				type="button"
-				data-testid="submit-new-todo-button"
-				:disabled="!isValid"
-				class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex flex-1 cursor-pointer items-center justify-center rounded transition-colors"
-				@click="onAddTodo()"
-			>
-				<Icon name="material-symbols:add-2-rounded" size="24" />
-			</button>
-			<button
-				type="button"
-				data-testid="submit-another-new-todo-button"
-				:disabled="!isValid"
-				class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex w-min cursor-pointer items-center justify-center gap-1 rounded px-2 text-sm transition-colors"
-				@click="onAddTodoNoClose"
-			>
-				<Icon name="material-symbols:add-2-rounded" size="20" />
-				{{ t("another") }}
-			</button>
-		</TodoForm>
+		<template v-slot:header>
+			<TitleSelect v-model:title="todoData.title" />
+		</template>
+		<template v-slot:content>
+			<TodoForm v-model:todo="todoData" @submit="onSubmitForm">
+				<button
+					type="button"
+					data-testid="submit-new-todo-button"
+					:disabled="!isValid"
+					class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex flex-1 cursor-pointer items-center justify-center rounded transition-colors"
+					@click="onAddTodo()"
+				>
+					<Icon name="material-symbols:add-2-rounded" size="24" />
+				</button>
+				<button
+					type="button"
+					data-testid="submit-another-new-todo-button"
+					:disabled="!isValid"
+					class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex w-min cursor-pointer items-center justify-center gap-1 rounded px-2 text-sm transition-colors"
+					@click="onAddTodoNoClose"
+				>
+					<Icon name="material-symbols:add-2-rounded" size="20" />
+					{{ t("another") }}
+				</button>
+			</TodoForm>
+		</template>
 	</Sheet>
 </template>
diff --git a/app/components/Edit/TitleSelect.vue b/app/components/Edit/TitleSelect.vue
index 891fd88..17541f3 100644
--- a/app/components/Edit/TitleSelect.vue
+++ b/app/components/Edit/TitleSelect.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 	const { t } = useI18n();
 	const title = defineModel<string>("title");
+
+	const { isMobile } = useDevice();
 </script>
 
 <template>
@@ -8,6 +10,7 @@
 		v-model="title"
 		data-testid="title-input"
 		:placeholder="t('title')"
-		class="border-secondary rounded border pl-1 text-xl focus:outline-none focus:border-secondary-hover"
+		:data-mobile="isMobile ? 'true' : undefined"
+		class="rounded pl-1 text-2xl focus:outline-none focus:border-secondary-hover w-full data-mobile:border data-mobile:border-secondary"
 	>
 </template>
diff --git a/app/components/Filter/FilterSheet.vue b/app/components/Filter/FilterSheet.vue
index 0c90551..70798fb 100644
--- a/app/components/Filter/FilterSheet.vue
+++ b/app/components/Filter/FilterSheet.vue
@@ -17,19 +17,21 @@
 
 <template>
 	<Sheet :is-open="isOpen" :title="t('model.title.filter')" @close="close">
-		<div class="flex flex-col gap-1">
-			<div>
-				<h2 class="text-muted-text text-lg">{{ t("time") }}</h2>
-				<TimeSelect v-model:time="time" />
+		<template v-slot:content>
+			<div class="flex flex-col gap-1">
+				<div>
+					<h2 class="text-muted-text text-lg">{{ t("time") }}</h2>
+					<TimeSelect v-model:time="time" />
+				</div>
+				<div>
+					<h2 class="text-muted-text text-lg">{{ t("categories") }}</h2>
+					<CategorySelect v-model:categorys="rawCategory" />
+				</div>
+				<div>
+					<h2 class="text-muted-text text-lg">{{ t("tags") }}</h2>
+					<TagSelect v-model:tags="rawTags" />
+				</div>
 			</div>
-			<div>
-				<h2 class="text-muted-text text-lg">{{ t("categories") }}</h2>
-				<CategorySelect v-model:categorys="rawCategory" />
-			</div>
-			<div>
-				<h2 class="text-muted-text text-lg">{{ t("tags") }}</h2>
-				<TagSelect v-model:tags="rawTags" />
-			</div>
-		</div>
+		</template>
 	</Sheet>
 </template>
diff --git a/app/components/Settings/SettingsSheet.vue b/app/components/Settings/SettingsSheet.vue
index 0e0e2a4..93de659 100644
--- a/app/components/Settings/SettingsSheet.vue
+++ b/app/components/Settings/SettingsSheet.vue
@@ -58,106 +58,116 @@
 
 <template>
 	<Sheet :is-open="isOpen" :title="t('model.title.settings')" @close="close">
-		<div data-testid="settings-sheet" class="flex flex-col gap-4">
-			<div
-				v-if="isMobile"
-				class="w-fit bg-surface border-secondary h-8 rounded border px-1 flex items-center"
-			>
-				<OrgSelect />
-			</div>
-			<div class="flex flex-wrap gap-2">
-				<GoogleLogin />
-				<div>
-					<button
-						type="button"
-						data-testid="add-label-button"
-						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-1 flex items-center gap-1"
-						@click="sendPush()"
-					>
-						<Icon
-							name="material-symbols:notification-add-outline-rounded"
-							size="20"
-						/>
-						{{ t("notification") }}
-					</button>
+		<template v-slot:content>
+			<div data-testid="settings-sheet" class="flex flex-col gap-4">
+				<div
+					v-if="isMobile"
+					class="w-fit bg-surface border-secondary h-8 rounded border px-1 flex items-center"
+				>
+					<OrgSelect />
 				</div>
-				<div>
-					<NuxtLink
-						:to="$localePath({name: 'deleted', query: route.query})"
-						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-1 text-white flex items-center gap-1"
-					>
-						<Icon name="material-symbols:delete-outline-rounded" size="20" />
-						{{ t("deleted") }}
-					</NuxtLink>
+				<div class="flex flex-wrap gap-2">
+					<GoogleLogin />
+					<div>
+						<button
+							type="button"
+							data-testid="add-label-button"
+							class="bg-surface border-secondary h-8 cursor-pointer rounded border px-1 flex items-center gap-1"
+							@click="sendPush()"
+						>
+							<Icon
+								name="material-symbols:notification-add-outline-rounded"
+								size="20"
+							/>
+							{{ t("notification") }}
+						</button>
+					</div>
+					<div>
+						<NuxtLink
+							:to="$localePath({name: 'deleted', query: route.query})"
+							class="bg-surface border-secondary h-8 cursor-pointer rounded border px-1 text-white flex items-center gap-1"
+						>
+							<Icon name="material-symbols:delete-outline-rounded" size="20" />
+							{{ t("deleted") }}
+						</NuxtLink>
+					</div>
 				</div>
-			</div>
 
-			<div class="flex gap-2 flex-wrap">
-				<div>
-					<h2 class="text-muted-text text-md pb-0.5">
-						{{ t("settings.languages.title") }}
-					</h2>
-					<select
-						data-testid="language-select"
-						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
-						:value="locale"
-						@change="
+				<div class="flex gap-2 flex-wrap">
+					<div>
+						<h2 class="text-muted-text text-md pb-0.5">
+							{{ t("settings.languages.title") }}
+						</h2>
+						<select
+							data-testid="language-select"
+							class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
+							:value="locale"
+							@change="
   						onLanguageChange(($event.target as HTMLSelectElement).value)
   					"
-					>
-						<option v-for="lang in locales" :key="lang.code" :value="lang.code">
-							{{ t(`languageNames.${lang.code}`) }}
-						</option>
-					</select>
-				</div>
-				<div v-if="isMobile">
-					<h2 class="text-muted-text text-md pb-0.5">
-						{{ t("settings.design.title") }}
-					</h2>
-					<select
-						v-model="design"
-						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
-					>
-						<option value="classic">{{ t(`settings.design.classic`) }}</option>
-						<option value="floating">
-							{{ t(`settings.design.floating`) }}
-						</option>
-					</select>
+						>
+							<option
+								v-for="lang in locales"
+								:key="lang.code"
+								:value="lang.code"
+							>
+								{{ t(`languageNames.${lang.code}`) }}
+							</option>
+						</select>
+					</div>
+					<div v-if="isMobile">
+						<h2 class="text-muted-text text-md pb-0.5">
+							{{ t("settings.design.title") }}
+						</h2>
+						<select
+							v-model="design"
+							class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
+						>
+							<option value="classic">
+								{{ t(`settings.design.classic`) }}
+							</option>
+							<option value="floating">
+								{{ t(`settings.design.floating`) }}
+							</option>
+						</select>
+					</div>
+
+					<div>
+						<h2 class="text-muted-text text-md pb-0.5">
+							{{ t("settings.insertionPoint.title") }}
+						</h2>
+						<select
+							v-model="insertionPoint"
+							class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
+						>
+							<option value="top">
+								{{ t(`settings.insertionPoint.top`) }}
+							</option>
+							<option value="bottom">
+								{{ t(`settings.insertionPoint.bottom`) }}
+							</option>
+						</select>
+					</div>
+
+					<div>
+						<h2 class="text-muted-text text-md pb-0.5">
+							{{ t("settings.modalSize.title") }}
+						</h2>
+						<select
+							v-model="modalSize"
+							class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
+						>
+							<option value="md">{{ t(`settings.modalSize.md`) }}</option>
+							<option value="lg">{{ t(`settings.modalSize.lg`) }}</option>
+						</select>
+					</div>
 				</div>
 
-				<div>
-					<h2 class="text-muted-text text-md pb-0.5">
-						{{ t("settings.insertionPoint.title") }}
-					</h2>
-					<select
-						v-model="insertionPoint"
-						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
-					>
-						<option value="top">{{ t(`settings.insertionPoint.top`) }}</option>
-						<option value="bottom">
-							{{ t(`settings.insertionPoint.bottom`) }}
-						</option>
-					</select>
-				</div>
-
-				<div>
-					<h2 class="text-muted-text text-md pb-0.5">
-						{{ t("settings.modalSize.title") }}
-					</h2>
-					<select
-						v-model="modalSize"
-						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
-					>
-						<option value="md">{{ t(`settings.modalSize.md`) }}</option>
-						<option value="lg">{{ t(`settings.modalSize.lg`) }}</option>
-					</select>
-				</div>
+				<Categories />
+				<Tags />
+				<Organizations />
+				<ApiKeys />
 			</div>
-
-			<Categories />
-			<Tags />
-			<Organizations />
-			<ApiKeys />
-		</div>
+		</template>
 	</Sheet>
 </template>
diff --git a/app/components/Utils/Sheet.vue b/app/components/Utils/Sheet.vue
index 0f9215a..ee059df 100644
--- a/app/components/Utils/Sheet.vue
+++ b/app/components/Utils/Sheet.vue
@@ -43,12 +43,15 @@
 							<DrawerDescription>{{ title }}</DrawerDescription>
 						</VisuallyHidden>
 						<DrawerHandle class="my-2" />
+						<div class="px-2">
+							<slot name="header" />
+						</div>
 						<div
 							class="
-							h-full overflow-auto px-2 pb-7
+							h-[calc(100%-35px)] overflow-auto px-2 pb-7
 					        pwa:pb-17"
 						>
-							<slot />
+							<slot name="content" />
 						</div>
 					</div>
 				</DrawerContent>
@@ -66,10 +69,15 @@
 				>
 					<DialogContent
 						:data-size="size"
-						class="bg-surface fixed top-1/2 left-1/2 z-30 h-128 data-[size=lg]:h-156 w-9/10 max-w-196 data-[size=lg]:max-w-252 -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-lg p-1 drop-shadow-xl duration-200 flex flex-col"
+						@open-auto-focus="(e) => e.preventDefault()"
+						class="bg-surface fixed top-1/2 left-1/2 z-30 h-128 data-[size=lg]:h-156 w-9/10 max-w-196 data-[size=lg]:max-w-252 -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-lg p-1 drop-shadow-xl drop-shadow-background duration-200 flex flex-col"
 					>
-						<div class="flex justify-between items-start h-10">
-							<DialogTitle class="text-2xl pl-1">{{ title }}</DialogTitle>
+						<div class="flex justify-between items-start">
+							<div class="w-full pl-1">
+								<slot name="header">
+									<DialogTitle class="text-2xl pl-1">{{ title }}</DialogTitle>
+								</slot>
+							</div>
 							<DialogClose as-child>
 								<button
 									type="button"
@@ -83,7 +91,7 @@
 								<DialogDescription>{{ title }}</DialogDescription>
 							</VisuallyHidden>
 						</div>
-						<div class="p-1 flex-1 overflow-auto"><slot /></div>
+						<div class="p-1 flex-1 overflow-auto"><slot name="content" /></div>
 					</DialogContent>
 				</Transition>
 			</DialogPortal>