diff --git a/app/components/Edit/DesktopTodoDataSelect.vue b/app/components/Edit/DesktopTodoDataSelect.vue
new file mode 100644
index 0000000..252713d
--- /dev/null
+++ b/app/components/Edit/DesktopTodoDataSelect.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+	import type { CreateTodoData, UUID } from "~/utils/types";
+	import CategorySelect from "../Utils/Label/CategorySelect.vue";
+	import TagSelect from "../Utils/Label/TagSelect.vue";
+	import NoteSelect from "./NoteSelect.vue";
+	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();
+
+	const todoData = defineModel<CreateTodoData>("todo", {
+		required: true,
+	});
+
+	const time = computed({
+		get: () => todoData.value.time,
+		set: (value) => {
+			todoData.value.time = value;
+		},
+	});
+
+	const { timeRange, timeRecurring, timePoint } = useExtractedTime(time);
+
+	const selectedTimeType = ref<"range" | "recurring" | "point">(
+		time.value?.type ?? "range",
+	);
+</script>
+
+<template>
+	<div class="h-full flex gap-1">
+		<div class="h-full flex flex-col flex-1">
+			<TitleSelect v-model:title="todoData.title" />
+			<div class="relative flex-1 overflow-scroll py-1">
+				<NoteSelect v-model:note="todoData.note" />
+			</div>
+			<div class="flex h-10 gap-1">
+				<slot />
+			</div>
+		</div>
+		<div class="overflow-scroll">
+			<h2 class="text-muted-text text-lg">{{ t("categories") }}</h2>
+			<CategorySelect v-model:category="todoData.category" />
+			<h2 class="text-muted-text text-lg">{{ t("tags") }}</h2>
+			<TagSelect v-model:tags="todoData.tags" :category="todoData.category" />
+
+			<select v-model="selectedTimeType">
+				<option value="range">{{ t("date-range") }} </option>
+				<option value="recurring">{{ t("date-recurring") }} </option>
+				<option value="point">{{ t("date-point") }} </option>
+			</select>
+			<div>
+				<TimeRangeSelect
+					v-if="selectedTimeType === 'range'"
+					v-model:timeRange="timeRange"
+				/>
+				<TimeRecurringSelect
+					v-if="selectedTimeType === 'recurring'"
+					v-model:timeRecurring="timeRecurring"
+				/>
+				<TimePointSelect
+					v-if="selectedTimeType === 'point'"
+					v-model:timePoint="timePoint"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/app/components/Edit/MobileTodoDataSelect.vue b/app/components/Edit/MobileTodoDataSelect.vue
new file mode 100644
index 0000000..12c8063
--- /dev/null
+++ b/app/components/Edit/MobileTodoDataSelect.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+	import type { CreateTodoData, UUID } from "~/utils/types";
+	import TabedDataSelect from "./TabedDataSelect.vue";
+	import TitleSelect from "./TitleSelect.vue";
+
+	const todoData = defineModel<CreateTodoData>("todo", {
+		required: true,
+	});
+</script>
+
+<template>
+	<TitleSelect v-model:title="todoData.title" />
+	<TabedDataSelect
+		v-model:time="todoData.time"
+		v-model:tags="todoData.tags"
+		v-model:category="todoData.category"
+		v-model:note="todoData.note"
+	/>
+	<div class="flex h-10 gap-1">
+		<slot />
+	</div>
+</template>
diff --git a/app/components/Edit/TabedDataSelect.vue b/app/components/Edit/TabedDataSelect.vue
index b150896..16cd3c9 100644
--- a/app/components/Edit/TabedDataSelect.vue
+++ b/app/components/Edit/TabedDataSelect.vue
@@ -25,33 +25,7 @@
 	});
 	const note = defineModel<string>("note", { required: true });
 
-	function useTimeComputed<T extends Time["type"]>(
-		marker: T,
-	): ComputedRef<Omit<Extract<Time, { type: T }>, "type"> | undefined> {
-		return computed<Omit<Extract<Time, { type: T }>, "type"> | undefined>({
-			get(): Omit<Extract<Time, { type: T }>, "type"> | undefined {
-				if (time.value?.type !== marker) return undefined;
-
-				const { type, ...rest } = time.value as Extract<Time, { type: T }>;
-				return rest;
-			},
-			set(value) {
-				if (!value) {
-					time.value = undefined;
-					return;
-				}
-
-				time.value = {
-					type: marker,
-					...value,
-				} as Extract<Time, { type: T }>;
-			},
-		});
-	}
-
-	const timeRange = useTimeComputed("range");
-	const timeRecurring = useTimeComputed("recurring");
-	const timePoint = useTimeComputed("point");
+	const { timeRange, timeRecurring, timePoint } = useExtractedTime(time);
 
 	const activeTab = ref("notes");
 	const selectedTimeType = ref<"range" | "recurring" | "point">(
diff --git a/app/components/Edit/TodoForm.vue b/app/components/Edit/TodoForm.vue
index f2dc4d1..4126ea0 100644
--- a/app/components/Edit/TodoForm.vue
+++ b/app/components/Edit/TodoForm.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-	import { computed, ref } from "vue";
 	import type { CreateTodoData, UUID } from "~/utils/types";
-	import TabedDataSelect from "./TabedDataSelect.vue";
-	import TitleSelect from "./TitleSelect.vue";
+	import DesktopTodoDataSelect from "./DesktopTodoDataSelect.vue";
+	import MobileTodoDataSelect from "./MobileTodoDataSelect.vue";
 
 	const todoData = defineModel<CreateTodoData>("todo", {
 		required: true,
@@ -12,6 +11,8 @@
 	function onSubmit() {
 		emit("submit");
 	}
+
+	const { isMobile } = useDevice();
 </script>
 
 <template>
@@ -20,15 +21,11 @@
 		class="flex h-full flex-col justify-between"
 		@submit.prevent="onSubmit"
 	>
-		<TitleSelect v-model:title="todoData.title" />
-		<TabedDataSelect
-			v-model:time="todoData.time"
-			v-model:tags="todoData.tags"
-			v-model:category="todoData.category"
-			v-model:note="todoData.note"
-		/>
-		<div class="flex h-10 gap-1">
+		<MobileTodoDataSelect v-if="isMobile" v-model:todo="todoData">
+			<slot />
+		</MobileTodoDataSelect>
+		<DesktopTodoDataSelect v-else v-model:todo="todoData">
 			<slot />
-		</div>
+		</DesktopTodoDataSelect>
 	</form>
 </template>
diff --git a/app/composables/useExtractedTime.ts b/app/composables/useExtractedTime.ts
new file mode 100644
index 0000000..77e2ed9
--- /dev/null
+++ b/app/composables/useExtractedTime.ts
@@ -0,0 +1,35 @@
+export function useExtractedTime(time: Ref<Time | undefined>) {
+	function useTimeComputed<T extends Time["type"]>(
+		marker: T,
+	): ComputedRef<Omit<Extract<Time, { type: T }>, "type"> | undefined> {
+		return computed<Omit<Extract<Time, { type: T }>, "type"> | undefined>({
+			get(): Omit<Extract<Time, { type: T }>, "type"> | undefined {
+				if (time.value?.type !== marker) return undefined;
+
+				const { type, ...rest } = time.value as Extract<Time, { type: T }>;
+				return rest;
+			},
+			set(value) {
+				if (!value) {
+					time.value = undefined;
+					return;
+				}
+
+				time.value = {
+					type: marker,
+					...value,
+				} as Extract<Time, { type: T }>;
+			},
+		});
+	}
+
+	const timeRange = useTimeComputed("range");
+	const timeRecurring = useTimeComputed("recurring");
+	const timePoint = useTimeComputed("point");
+
+	return {
+		timeRange,
+		timeRecurring,
+		timePoint,
+	};
+}