diff --git a/src/components/modal/StatusChangeModal.vue b/src/components/modal/StatusChangeModal.vue
index 3edf9bc0..39eb859f 100644
--- a/src/components/modal/StatusChangeModal.vue
+++ b/src/components/modal/StatusChangeModal.vue
@@ -1,67 +1,58 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import StatusChip from '/@/components/shared/StatusChip.vue'
 import { changeStatusUsecase } from '/@/features/request/usecase'
 import type { RequestStatus } from '/@/features/requestStatus/model'
+import type { RequestDetail } from '/@/features/request/model'
 
-interface Props {
+const props = defineProps<{
+  request: RequestDetail
   nextStatus: RequestStatus
-}
-
-const props = defineProps<Props>()
+}>()
 const emit = defineEmits<{
   (e: 'closeModal'): void
 }>()
 
 const toast = useToast()
-const requestDetailStore = useRequestDetailStore()
-
-const { request } = storeToRefs(requestDetailStore)
 
 const comment = ref('')
 
-async function putStatus(nextStatus: RequestStatus, comment: string) {
+const putStatus = async (nextStatus: RequestStatus, comment: string) => {
   try {
-    if (request.value === undefined) {
-      throw new Error('request is undefined')
-    }
-    await changeStatusUsecase(request.value.id, nextStatus, comment)
+    await changeStatusUsecase(props.request.id, nextStatus, comment)
     toast.success('申請の状態を変更しました')
     emit('closeModal')
-  } catch (e) {
-    if (e instanceof Error) {
-      toast.error(e.message)
-    }
+  } catch {
+    toast.error('変更に失敗しました')
   }
 }
 </script>
 
 <template>
   <div
-    v-if="request"
-    class="absolute inset-0 m-auto h-3/5 w-1/2 bg-white p-4 shadow-lg">
+    class="absolute inset-0 m-auto h-3/5 w-1/2 bg-white shadow-lg flex flex-col gap-6 pt-4 px-12">
     <h1 class="text-center text-3xl">申請の状態変更</h1>
-    <div class="mx-12 mt-8 flex flex-col justify-around gap-4">
-      <div class="mb-4 flex items-center">
-        申請の状態を
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-1">
+        <span>申請の状態を</span>
         <StatusChip class="mx-1" has-text :status="request.status" />
-        から
+        <span>から</span>
         <StatusChip class="mx-1" has-text :status="props.nextStatus" />
-        へ変更します
+        <span>へ変更します</span>
       </div>
-      <MarkdownTextarea v-model="comment" auto-focus placeholder="コメント" />
-      <div class="mt-4 text-center">
+      <MarkdownTextarea
+        v-model="comment"
+        auto-focus
+        placeholder="コメントを入力" />
+      <div class="flex justify-end">
         <SimpleButton
-          class="mb-4 w-60"
           font-size="xl"
           padding="sm"
+          type="success"
           @click="putStatus(nextStatus, comment)">
           申請の状態を変更する
         </SimpleButton>
diff --git a/src/components/requestDetail/CommentLog.vue b/src/components/requestDetail/CommentLog.vue
index 04d57e43..c4f33e14 100644
--- a/src/components/requestDetail/CommentLog.vue
+++ b/src/components/requestDetail/CommentLog.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
 
 import { useUserStore } from '/@/stores/user'
 
@@ -11,35 +9,33 @@ import MarkdownIt from '/@/components//shared/MarkdownIt.vue'
 import UserIcon from '/@/components/shared/UserIcon.vue'
 import type { RequestComment } from '/@/features/requestComment/model'
 
-interface Props {
+const props = defineProps<{
   comment: RequestComment
-}
-
-const props = defineProps<Props>()
+}>()
 
 const formattedDateAndTime = formatDateAndTime(props.comment.createdAt)
 
 const userStore = useUserStore()
 const { userMap } = storeToRefs(userStore)
-
-const route = useRoute()
-const hash = computed(() => route.hash.substring(1))
 </script>
 
 <template>
-  <div :id="comment.id" class="flex w-full p-2">
-    <UserIcon class="w-12" :name="userMap[comment.user]" />
-    <div class="w-full pl-2">
-      <div class="flex h-12 items-center justify-between">
-        {{ userMap[comment.user] }}がコメントしました。
-        <span>
-          {{ formattedDateAndTime }}
-        </span>
+  <div :id="comment.id" class="w-full flex flex-col gap-3">
+    <div class="flex w-full items-center">
+      <div class="flex items-center gap-4 flex-1">
+        <UserIcon class="w-12" :name="userMap[comment.user]" />
+        <div>
+          <span class="font-bold">{{ userMap[comment.user] }}</span>
+          がコメントしました
+        </div>
       </div>
+      <time class="text-gray-400" :datetime="comment.createdAt.toISO() ?? ''">
+        {{ formattedDateAndTime }}
+      </time>
+    </div>
+    <div class="ml-15">
       <MarkdownIt
-        :class="`border border-zinc-300 p-1 ${
-          hash === comment.id && 'border-3 border border-yellow-300'
-        }`"
+        class="border border-zinc-300 px-4 py-3 rounded-lg"
         :text="comment.comment" />
     </div>
   </div>
diff --git a/src/components/requestDetail/NewComment.vue b/src/components/requestDetail/NewComment.vue
index a96794f7..b0d4bb78 100644
--- a/src/components/requestDetail/NewComment.vue
+++ b/src/components/requestDetail/NewComment.vue
@@ -1,29 +1,27 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
 import { useNewComment } from '/@/components/requestDetail/composables/useNewComment'
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import type { RequestDetail } from '/@/features/request/model'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
 
-const requestDetailStore = useRequestDetailStore()
-const { request } = storeToRefs(requestDetailStore)
-const { comment, isSending, submit } = useNewComment(request.value?.id ?? '')
+const { comment, isSending, submit } = useNewComment(props.request.id)
 </script>
 
 <template>
-  <form class="mx-4 w-full">
-    <MarkdownTextarea v-model="comment" placeholder="コメント" />
-    <div class="mt-1">
+  <div class="w-full">
+    <MarkdownTextarea v-model="comment">
       <SimpleButton
-        class="ml-auto"
         :disabled="isSending"
         font-size="md"
-        padding="sm"
-        @click.prevent="submit">
+        padding="md"
+        type="success"
+        @click="submit">
         コメントする
       </SimpleButton>
-    </div>
-  </form>
+    </MarkdownTextarea>
+  </div>
 </template>
diff --git a/src/components/requestDetail/RequestAmount.vue b/src/components/requestDetail/RequestAmount.vue
deleted file mode 100644
index 297088c8..00000000
--- a/src/components/requestDetail/RequestAmount.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
-const requestDetailStore = useRequestDetailStore()
-
-const { request } = storeToRefs(requestDetailStore)
-
-const totalAmount = computed(
-  () => request.value?.targets.reduce((a, target) => a + target.amount, 0) ?? 0
-)
-</script>
-
-<template>
-  <div v-if="request" class="flex items-center">
-    <span class="text-2xl">金額：{{ totalAmount }}円</span>
-  </div>
-</template>
diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
index aa1fbdfc..d38471ff 100644
--- a/src/components/requestDetail/RequestContent.vue
+++ b/src/components/requestDetail/RequestContent.vue
@@ -1,58 +1,88 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
-import InputTextarea from '/@/components/shared/InputTextarea.vue'
-import MarkdownIt from '/@/components/shared/MarkdownIt.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
+import { formatDateAndTime } from '/@/lib/date'
 
-interface Props {
-  isEditMode: boolean
-}
+import MarkdownIt from '/@/components//shared/MarkdownIt.vue'
+import UserIcon from '/@/components/shared/UserIcon.vue'
+import type { RequestDetail } from '/@/features/request/model'
+import { ref } from 'vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import EditButton from '/@/components/shared/EditButton.vue'
+import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
+import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import { useToast } from 'vue-toastification'
+import { useRequest } from '/@/features/request/composables'
 
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
+const props = defineProps<{
+  request: RequestDetail
 }>()
 
+const formattedDateAndTime = formatDateAndTime(props.request.createdAt)
+
 const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { userMap } = storeToRefs(userStore)
+const toast = useToast()
+const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
 
-const hasAuthority = isRequestCreator(me.value)
+const hasAuthority = isRequestCreator.value(me.value)
+const isEditMode = ref(false)
+const editedContent = ref(props.request.content)
+const toggleEditContent = () => {
+  if (isEditMode.value) {
+    editedContent.value = props.request.content
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateContent = async () => {
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      content: editedContent.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
+  isEditMode.value = false
+}
 </script>
 
 <template>
-  <div class="flex w-3/5">
-    詳細：
-    <div v-if="!props.isEditMode && request" class="flex flex-grow items-end">
+  <div class="w-full flex flex-col gap-3">
+    <div class="flex w-full items-center">
+      <div class="flex items-center gap-4 flex-1">
+        <UserIcon class="w-12" :name="userMap[request.createdBy]" />
+        <div>
+          <span class="font-bold">{{ userMap[request.createdBy] }}</span>
+          がこの申請を作成しました
+        </div>
+      </div>
+      <time class="text-gray-400" :datetime="request.createdAt.toISO() ?? ''">
+        {{ formattedDateAndTime }}
+      </time>
+    </div>
+    <div class="ml-15 flex items-start gap-2">
       <MarkdownIt
-        class="h-32 flex-grow overflow-y-scroll border border-gray-300 pl-1"
+        v-if="!isEditMode"
+        class="border border-zinc-300 px-4 py-3 rounded-lg flex-1"
         :text="request.content" />
-      <SimpleButton
+      <MarkdownTextarea
+        v-else
+        v-model="editedContent"
+        auto-focus
+        class="flex-1" />
+      <EditButton
         v-if="hasAuthority"
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click="emit('changeEditMode', 'content')">
-        編集
-      </SimpleButton>
+        :is-edit-mode="isEditMode"
+        @click="toggleEditContent" />
     </div>
-    <div v-else class="flex flex-grow items-end">
-      <InputTextarea
-        v-model="editedValue.content"
-        class="h-30 flex-grow resize-none"
-        placeholder="詳細" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="emit('changeEditMode', '')">
+    <div class="flex justify-end">
+      <SimpleButton v-if="isEditMode" padding="sm" @click="handleUpdateContent">
         完了
       </SimpleButton>
     </div>
diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index e6d635d2..2b6730a0 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/src/components/requestDetail/RequestGroup.vue
@@ -1,63 +1,76 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 
-import { useGroupStore } from '/@/stores/group'
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
+import { computed, ref } from 'vue'
 import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
+import { useGroupStore } from '/@/stores/group'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import type { RequestDetail } from '/@/features/request/model'
+import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
+const props = defineProps<{
+  request: RequestDetail
 }>()
 
 const userStore = useUserStore()
 const groupStore = useGroupStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { groupOptions } = storeToRefs(groupStore)
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
+const { groupOptions } = storeToRefs(groupStore)
+const toast = useToast()
 
-const hasAuthority = isRequestCreator(me.value)
+const hasAuthority = isRequestCreator.value(me.value)
 
-const handleComplete = () => {
-  emit('changeEditMode', '')
+const defaultGroup = computed(() =>
+  props.request.group ? props.request.group.id : null
+)
+const groupName = computed(() =>
+  props.request.group ? props.request.group.name : 'なし'
+)
+
+const isEditMode = ref(false)
+const editedGroup = ref<string | null>(defaultGroup.value)
+const toggleEditGroup = () => {
+  if (isEditMode.value) {
+    editedGroup.value = defaultGroup.value
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateGroup = async () => {
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: editedGroup.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
+  isEditMode.value = false
 }
 </script>
 
 <template>
-  <div class="flex items-center">
-    グループ：
-    <div v-if="!props.isEditMode && request">
-      <span v-if="!request.group">なし</span>
-      <span v-else>{{ request.group.name }}</span>
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center justify-between">
+      <div class="text-sm font-bold">グループ</div>
       <EditButton
         v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'group')" />
+        :is-edit-mode="isEditMode"
+        @click="toggleEditGroup" />
     </div>
-    <div v-else class="flex">
-      <InputSelectSingle
-        v-model="editedValue.group"
-        class="w-52"
-        :options="groupOptions"
-        placeholder="グループ" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div>
+      <span v-if="!isEditMode">{{ groupName }}</span>
+      <div v-else>
+        <InputSelectSingle
+          v-model="editedGroup"
+          :options="groupOptions"
+          @close="handleUpdateGroup" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestHeader.vue b/src/components/requestDetail/RequestHeader.vue
new file mode 100644
index 00000000..b4d98089
--- /dev/null
+++ b/src/components/requestDetail/RequestHeader.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import type { RequestDetail } from '/@/features/request/model'
+import RequestStatusChange from '/@/components/requestDetail/RequestStatusChange.vue'
+import RequestTitle from '/@/components/requestDetail/RequestTitle.vue'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
+
+const totalAmount = computed(() =>
+  props.request.targets.reduce((a, target) => a + target.amount, 0)
+)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <RequestTitle :request="request" />
+    <div class="flex items-center justify-between">
+      <RequestStatusChange :request="request" />
+      <div class="text-3xl font-bold">{{ totalAmount }}円</div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 2adc0919..f56c18f8 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -1,33 +1,32 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
 import type { RequestComment } from '/@/features/requestComment/model'
 import type { RequestStatusDetail } from '/@/features/requestStatus/model'
 
 import CommentLog from './CommentLog.vue'
-import RequestFiles from './RequestFiles.vue'
 import StatusChangeLog from './StatusChangeLog.vue'
+import NewComment from './NewComment.vue'
+import RequestContent from '/@/components/requestDetail/RequestContent.vue'
+import type { RequestDetail } from '/@/features/request/model'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
 
 type CommentWithType = RequestComment & { type: 'comment' }
 type StatusWithType = RequestStatusDetail & { type: 'statusChange' }
 
 type Log = CommentWithType | StatusWithType
 
-const requestDetailStore = useRequestDetailStore()
-
-const { request } = storeToRefs(requestDetailStore)
-
 const logs = computed((): Log[] => {
   const comments: CommentWithType[] =
-    request.value?.comments.map(comment => ({
+    props.request.comments.map(comment => ({
       ...comment,
       type: 'comment'
     })) ?? []
   const statuses: StatusWithType[] =
-    request.value?.statuses.map(status => ({
+    props.request?.statuses.map(status => ({
       ...status,
       type: 'statusChange'
     })) ?? []
@@ -39,17 +38,20 @@ const logs = computed((): Log[] => {
 </script>
 
 <template>
-  <div v-if="request" class="h-120 overflow-y-scroll p-2">
-    <RequestFiles />
+  <div v-if="request">
     <ul>
+      <li class="vertical-bar">
+        <RequestContent :request="request" />
+      </li>
       <li
-        v-for="(log, i) in logs"
+        v-for="(log, i) in logs.slice(1)"
         :key="log.createdAt.toISO() ?? i"
         class="vertical-bar">
         <CommentLog v-if="log.type === 'comment'" :comment="log" />
-        <StatusChangeLog v-if="log.type === 'statusChange'" :log="log" />
+        <StatusChangeLog v-else-if="log.type === 'statusChange'" :log="log" />
       </li>
     </ul>
+    <NewComment :request="request" />
   </div>
 </template>
 
@@ -58,8 +60,10 @@ const logs = computed((): Log[] => {
   content: '';
   display: inline-block;
   width: 4px;
-  height: 36px;
+  height: 24px;
   background-color: #d4d4d8;
   margin-left: 70px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 </style>
diff --git a/src/components/requestDetail/RequestSidebar.vue b/src/components/requestDetail/RequestSidebar.vue
new file mode 100644
index 00000000..a7c0cb19
--- /dev/null
+++ b/src/components/requestDetail/RequestSidebar.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import RequestGroup from '/@/components/requestDetail/RequestGroup.vue'
+import RequestTags from '/@/components/requestDetail/RequestTags.vue'
+import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
+import type { RequestDetail } from '/@/features/request/model'
+
+defineProps<{
+  request: RequestDetail
+}>()
+</script>
+
+<template>
+  <div class="px-4 flex flex-col gap-8">
+    <div class="flex flex-col gap-3">
+      <RequestGroup :request="request" />
+      <RequestTags :request="request" />
+    </div>
+    <RequestTargets :request="request" />
+  </div>
+</template>
diff --git a/src/components/requestDetail/RequestStatusChange.vue b/src/components/requestDetail/RequestStatusChange.vue
new file mode 100644
index 00000000..ea70998b
--- /dev/null
+++ b/src/components/requestDetail/RequestStatusChange.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import StatusChip from '/@/components/shared/StatusChip.vue'
+import type { RequestDetail } from '/@/features/request/model'
+import { useStatusOptions } from '/@/features/requestStatus/composables'
+import FloatingMenu from '/@/components/shared/FloatingMenu.vue'
+import { useModal } from '/@/components/modal/composables/useModal'
+import type { RequestStatus } from '/@/features/requestStatus/model'
+import ModalWrapper from '/@/components/modal/ModalWrapper.vue'
+import StatusChangeModal from '/@/components/modal/StatusChangeModal.vue'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
+
+const handleSelectOption = (status: RequestStatus) => {
+  nextStatus.value = status
+  openModal()
+}
+
+const nextStatus = ref<RequestStatus>()
+const { shouldShowModal, openModal, closeModal } = useModal()
+
+const showMenu = ref(false)
+const { statusOptions } = useStatusOptions(props.request)
+</script>
+
+<template>
+  <div class="relative">
+    <StatusChip
+      :has-menu="statusOptions.length !== 0"
+      has-text
+      :status="request.status"
+      @click.stop="showMenu = true" />
+    <FloatingMenu
+      v-if="showMenu"
+      class="absolute top-12 left-0 w-40"
+      :current-value="request.status"
+      :options="statusOptions"
+      @close-menu="showMenu = false"
+      @select-option="handleSelectOption" />
+    <ModalWrapper v-if="shouldShowModal" @close-modal="closeModal">
+      <StatusChangeModal
+        v-if="nextStatus"
+        :next-status="nextStatus"
+        :request="request"
+        @close-modal="closeModal" />
+    </ModalWrapper>
+  </div>
+</template>
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index c5b91309..d23ca946 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -1,58 +1,71 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectTagWithCreation from '/@/components/shared/InputSelectTagWithCreation.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import TagsGroup from '/@/components/shared/TagsGroup.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
+import InputSelectTagWithCreation from '/@/components/shared/InputSelectTagWithCreation.vue'
+import type { Tag } from '/@/features/tag/model'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import type { RequestDetail } from '/@/features/request/model'
+import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
+const props = defineProps<{
+  request: RequestDetail
 }>()
 
 const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
+const toast = useToast()
 
-const hasAuthority = isRequestCreator(me.value)
+const hasAuthority = isRequestCreator.value(me.value)
 
-const handleComplete = () => {
-  emit('changeEditMode', '')
+const isEditMode = ref(false)
+const editedTags = ref<Tag[]>(props.request.tags)
+const toggleEditTags = () => {
+  if (isEditMode.value) {
+    editedTags.value = props.request.tags
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateTags = async () => {
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      tags: editedTags.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
+  isEditMode.value = false
 }
 </script>
 
 <template>
-  <div class="flex items-center">
-    <div v-if="!props.isEditMode && request" class="pb-2">
-      タグ：
-      <span v-if="request.tags.length === 0">なし</span>
-      <TagsGroup v-else :tags="request.tags" />
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center justify-between">
+      <div class="text-sm font-bold">タグ</div>
       <EditButton
         v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'tags')" />
+        :is-edit-mode="isEditMode"
+        @click="toggleEditTags" />
     </div>
-    <div v-else class="flex items-center">
-      タグ：
-      <InputSelectTagWithCreation v-model="editedValue.tags" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div>
+      <div v-if="!isEditMode">
+        <TagsGroup v-if="request?.tags" :tags="request.tags" />
+        <span v-else>なし</span>
+      </div>
+      <div v-else>
+        <InputSelectTagWithCreation
+          v-model="editedTags"
+          @close="handleUpdateTags" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
new file mode 100644
index 00000000..ad02713c
--- /dev/null
+++ b/src/components/requestDetail/RequestTarget.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
+import { useUserStore } from '/@/stores/user'
+import type {
+  RequestTargetDetail,
+  RequestTarget
+} from '/@/features/requestTarget/model'
+
+import UserIcon from '/@/components/shared/UserIcon.vue'
+import { RouterLink } from 'vue-router'
+import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
+import InputNumber from '/@/components/shared/InputNumber.vue'
+import { TrashIcon } from '@heroicons/vue/24/solid'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import type { RequestDetail } from '/@/features/request/model'
+
+import { useNewTransaction } from '/@/pages/composables/useNewTransaction'
+import { computed } from 'vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
+
+const props = defineProps<{
+  request: RequestDetail
+  isEditMode: boolean
+  target: RequestTargetDetail
+}>()
+
+const { isSending, postTransactionFromRequest } = useNewTransaction()
+const userStore = useUserStore()
+const { userMap, userOptions, isAdmin } = storeToRefs(userStore)
+
+const targets = computed(() =>
+  props.request.targets.map(target => target.target)
+)
+const targetOptions = computed(() =>
+  userOptions.value.filter(
+    user =>
+      user.value === props.target.target || !targets.value.includes(user.value)
+  )
+)
+
+const targetModel = defineModel<RequestTarget>('targetModel', {
+  required: true
+})
+
+const handleRemoveTarget = async () => {
+  const result = confirm('本当に削除しますか？')
+  if (!result) {
+    return
+  }
+
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null,
+      targets: props.request.targets.filter(
+        target => target.target !== props.target.target
+      )
+    })
+  } catch {
+    alert('削除に失敗しました')
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="!props.isEditMode"
+    class="grid grid-cols-[3fr,1fr,2fr] items-center">
+    <div class="flex items-center gap-1">
+      <UserIcon class="w-10" :name="userMap[target.target]" />
+      <div class="break-all">{{ userMap[target.target] }}</div>
+    </div>
+    <div>{{ target.amount }}円</div>
+    <div>
+      <!--TODO: targetのレスポンスにtransactionのidを入れてもらう-->
+      <div v-if="target.paidAt !== null" class="flex items-center gap-2">
+        払い戻し済み
+        <RouterLink
+          class="underline"
+          title="入出金記録へ"
+          :to="`/transactions/`">
+          <ArrowTopRightOnSquareIcon class="w-6" />
+        </RouterLink>
+      </div>
+      <button
+        v-else-if="isAdmin"
+        class="text-blue-500"
+        :disabled="isSending"
+        @click="postTransactionFromRequest(request, target)">
+        入出金記録を作成
+      </button>
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-between">
+    <div class="flex flex-col gap-1">
+      <InputSelectSingle
+        v-model="targetModel.target"
+        :options="targetOptions" />
+      <div><InputNumber v-model="targetModel.amount" />円</div>
+    </div>
+    <div>
+      <button @click="handleRemoveTarget">
+        <TrashIcon class="w-6 text-red-500 cursor-pointer" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index c128a312..e8e4eb5a 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -1,68 +1,80 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectMultiple from '/@/components/shared/InputSelectMultiple.vue'
+import { ref } from 'vue'
+import RequestTarget from '/@/components/requestDetail/RequestTarget.vue'
+import type { RequestTargetDetail } from '/@/features/requestTarget/model'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import type { RequestDetail } from '/@/features/request/model'
+import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
+const props = defineProps<{
+  request: RequestDetail
 }>()
 
 const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
-const { me, userOptions, userMap } = storeToRefs(userStore)
+const { isRequestCreator } = useRequest(props.request)
+const { me } = storeToRefs(userStore)
+const toast = useToast()
 
-const formattedTargets = computed(
-  () =>
-    request.value?.targets
-      .map(target => userMap.value[target.target])
-      .join(', ') ?? ''
-)
+const hasAuthority = isRequestCreator.value(me.value)
 
-const hasAuthority = isRequestCreator(me.value)
+const isEditMode = ref(false)
+const editedTargets = ref<RequestTargetDetail[]>(props.request.targets)
+const toggleEditTargets = () => {
+  editedTargets.value = props.request.targets
+  isEditMode.value = !isEditMode.value
+}
 
-const handleComplete = () => {
-  emit('changeEditMode', '')
+const handleUpdateTargets = async () => {
+  if (editedTargets.value.some(target => target.target === null)) {
+    toast.error('払い戻し対象者を選択してください')
+    return
+  }
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      targets: editedTargets.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
+  isEditMode.value = false
 }
 </script>
 
 <template>
-  <div>
-    <div v-if="!props.isEditMode">
-      払い戻し対象者：
-      {{ formattedTargets }}
-      <EditButton
-        v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'targets')" />
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center justify-between">
+      <div class="text-sm font-bold">払い戻し対象者</div>
+      <div class="flex items-center gap-2">
+        <SimpleButton
+          v-if="isEditMode"
+          padding="sm"
+          @click="handleUpdateTargets">
+          完了
+        </SimpleButton>
+        <EditButton
+          v-if="hasAuthority"
+          :is-edit-mode="isEditMode"
+          @click="toggleEditTargets" />
+      </div>
     </div>
-    <div v-else class="flex items-center">
-      払い戻し対象者：
-      <InputSelectMultiple
-        v-model="editedValue.targets"
-        :options="userOptions"
-        placeholder="払い戻し対象者"
-        uniq-key="target" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div v-if="request" class="flex flex-col gap-2">
+      <RequestTarget
+        v-for="(target, i) in request.targets"
+        :key="target.id"
+        v-model:targetModel="editedTargets[i]"
+        :is-edit-mode="isEditMode"
+        :request="request"
+        :target="target" />
     </div>
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestTitle.vue b/src/components/requestDetail/RequestTitle.vue
index 05be4c60..f63994ac 100644
--- a/src/components/requestDetail/RequestTitle.vue
+++ b/src/components/requestDetail/RequestTitle.vue
@@ -1,56 +1,60 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
+import { ref } from 'vue'
 
-import InputText from '/@/components/shared/InputText.vue'
+import type { RequestDetail } from '/@/features/request/model'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
+import InputText from '/@/components/shared/InputText.vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import EditButton from '/@/components/shared/EditButton.vue'
+import { useToast } from 'vue-toastification'
+import { useUserStore } from '/@/stores/user'
+import { useRequest } from '/@/features/request/composables'
+import { storeToRefs } from 'pinia'
 
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
+const props = defineProps<{
+  request: RequestDetail
 }>()
 
 const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
+const toast = useToast()
+
+const hasAuthority = isRequestCreator.value(me.value)
+const isEditMode = ref(false)
+const editedTitle = ref(props.request.title)
 
-const hasAuthority = isRequestCreator(me.value)
+const toggleEditTitle = () => {
+  if (isEditMode.value) {
+    editedTitle.value = props.request.title
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateTitle = async () => {
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null,
+      title: editedTitle.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
+  isEditMode.value = false
+}
 </script>
 
 <template>
-  <div v-if="!props.isEditMode && request" class="flex flex-grow">
-    <h1 class="flex-grow text-3xl">
-      {{ request.title }}
-    </h1>
-    <SimpleButton
-      v-if="hasAuthority"
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click="emit('changeEditMode', 'title')">
-      編集
-    </SimpleButton>
-  </div>
-  <div v-else class="flex flex-grow">
-    <InputText
-      v-model="editedValue.title"
-      class="flex-grow"
-      placeholder="タイトル" />
-    <SimpleButton
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click.stop="emit('changeEditMode', '')">
+  <div class="flex gap-2">
+    <h1 v-if="!isEditMode" class="text-2xl">{{ request.title }}</h1>
+    <InputText v-else v-model="editedTitle" auto-focus class="flex-1" />
+    <SimpleButton v-if="isEditMode" padding="sm" @click="handleUpdateTitle">
       完了
     </SimpleButton>
+    <EditButton
+      v-if="hasAuthority"
+      :is-edit-mode="isEditMode"
+      @click="toggleEditTitle" />
   </div>
 </template>
diff --git a/src/components/requestDetail/StatusChangeButtons.vue b/src/components/requestDetail/StatusChangeButtons.vue
deleted file mode 100644
index 4d041fe8..00000000
--- a/src/components/requestDetail/StatusChangeButtons.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
-
-import ModalWrapper from '/@/components/modal/ModalWrapper.vue'
-import StatusChangeModal from '/@/components/modal/StatusChangeModal.vue'
-import { useModal } from '/@/components/modal/composables/useModal'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { RequestStatus } from '/@/features/requestStatus/model'
-
-const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { me, isAdmin } = storeToRefs(userStore)
-
-const { request } = storeToRefs(requestDetailStore)
-
-const nextStatus = ref<RequestStatus>()
-const hasAuthority = isRequestCreator(me.value)
-const { shouldShowModal, openModal, closeModal } = useModal()
-
-const showToSubmitted =
-  (hasAuthority && request.value?.status === 'fix_required') ||
-  (isAdmin.value &&
-    (request.value?.status === 'fix_required' ||
-      request.value?.status === 'accepted'))
-const showToRequired = isAdmin.value && request.value?.status === 'submitted'
-const showToAccepted = isAdmin.value && request.value?.status === 'submitted'
-const showToRejected = isAdmin.value && request.value?.status === 'submitted'
-
-function handleOpenModal(status: RequestStatus) {
-  nextStatus.value = status
-  openModal()
-}
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <SimpleButton
-      v-if="showToSubmitted"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('submitted')">
-      承認待ちにする
-    </SimpleButton>
-    <SimpleButton
-      v-if="showToRequired"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('fix_required')">
-      要修正にする
-    </SimpleButton>
-    <SimpleButton
-      v-if="showToAccepted"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('accepted')">
-      承認済みにする
-    </SimpleButton>
-    <SimpleButton
-      v-if="showToRejected"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('rejected')">
-      却下する
-    </SimpleButton>
-  </div>
-  <ModalWrapper v-if="shouldShowModal" @close-modal="closeModal">
-    <StatusChangeModal
-      v-if="nextStatus"
-      :next-status="nextStatus"
-      @close-modal="closeModal" />
-  </ModalWrapper>
-</template>
diff --git a/src/components/requestDetail/StatusChangeLog.vue b/src/components/requestDetail/StatusChangeLog.vue
index 48682cee..ef301c39 100644
--- a/src/components/requestDetail/StatusChangeLog.vue
+++ b/src/components/requestDetail/StatusChangeLog.vue
@@ -21,13 +21,19 @@ const formattedDateAndTime = formatDateAndTime(props.log.createdAt)
 </script>
 
 <template>
-  <div class="w-5/7 flex items-center pl-12">
-    <UserIcon class="mr-2 w-12" :name="userMap[log.createdBy]" />
-    {{ userMap[log.createdBy] }}
-    が申請の状態を
-    <StatusChip class="mx-2" has-text :status="log.status" />
-    にしました。
-    <div class="ml-auto">
+  <div class="w-full flex items-center">
+    <div class="flex items-center gap-4 flex-1">
+      <UserIcon class="w-12" :name="userMap[log.createdBy]" />
+      <div class="flex items-center gap-2">
+        <span>
+          <span class="font-bold">{{ userMap[log.createdBy] }}</span>
+          が申請の状態を
+        </span>
+        <StatusChip has-text :status="log.status" />
+        <span>にしました</span>
+      </div>
+    </div>
+    <div class="text-gray-400">
       {{ formattedDateAndTime }}
     </div>
   </div>
diff --git a/src/components/requestDetail/ToTransactionButtons.vue b/src/components/requestDetail/ToTransactionButtons.vue
deleted file mode 100644
index 4e3325e0..00000000
--- a/src/components/requestDetail/ToTransactionButtons.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { RouterLink } from 'vue-router'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
-
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import { useNewTransaction } from '/@/pages/composables/useNewTransaction'
-
-const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isSending, postTransactionFromRequest } = useNewTransaction()
-
-const { request } = storeToRefs(requestDetailStore)
-const { isAdmin } = storeToRefs(userStore)
-</script>
-
-<template>
-  <div class="px-1/6 flex flex-col items-center gap-4 py-8">
-    <SimpleButton
-      v-if="isAdmin"
-      class="w-full"
-      :disabled="isSending"
-      font-size="md"
-      padding="sm"
-      @click="request && postTransactionFromRequest(request)">
-      この申請から入出金記録を作成する
-    </SimpleButton>
-    <RouterLink class="w-full" :to="`/transactions?requestID=${request?.id}`">
-      <SimpleButton class="w-full" font-size="md" padding="sm">
-        この申請の入出金記録へ移動
-      </SimpleButton>
-    </RouterLink>
-  </div>
-</template>
diff --git a/src/components/requestDetail/composables/useNewComment.ts b/src/components/requestDetail/composables/useNewComment.ts
index 4b7bde53..1597789d 100644
--- a/src/components/requestDetail/composables/useNewComment.ts
+++ b/src/components/requestDetail/composables/useNewComment.ts
@@ -20,9 +20,7 @@ export const useNewComment = (requestId: string) => {
       comment.value = ''
       toast.success('コメントを送信しました')
     } catch (e) {
-      if (e instanceof Error) {
-        toast.error(e.message)
-      }
+      toast.error('送信に失敗しました')
     }
     isSending.value = false
   }
diff --git a/src/components/requests/RequestItem.vue b/src/components/requests/RequestItem.vue
index 06fbd73e..0b36b429 100644
--- a/src/components/requests/RequestItem.vue
+++ b/src/components/requests/RequestItem.vue
@@ -41,7 +41,7 @@ const totalAmount = computed(
     <div>
       <div class="flex gap-4">
         <span v-if="request.group"> グループ：{{ request.group.name }} </span>
-        <span>申請者：{{ userMap[request.created_by] }}</span>
+        <span>申請者：{{ userMap[request.createdBy] }}</span>
         <span>申請日：{{ formattedDate }}</span>
       </div>
       <div class="text-right text-3xl">{{ totalAmount }}円</div>
diff --git a/src/components/shared/EditButton.vue b/src/components/shared/EditButton.vue
index 831c5fbd..15a70bd9 100644
--- a/src/components/shared/EditButton.vue
+++ b/src/components/shared/EditButton.vue
@@ -1,9 +1,23 @@
 <script lang="ts" setup>
-import { PencilIcon } from '@heroicons/vue/24/solid'
+import { PencilIcon, XMarkIcon } from '@heroicons/vue/24/solid'
+
+withDefaults(
+  defineProps<{
+    isEditMode: boolean
+  }>(),
+  {
+    isEditMode: false
+  }
+)
 </script>
 
 <template>
   <button class="inline-block">
-    <PencilIcon class="text-secondary hover:text-secondaryHover h-5 w-5" />
+    <PencilIcon
+      v-if="!isEditMode"
+      class="text-secondary hover:text-secondaryHover h-4 w-4" />
+    <XMarkIcon
+      v-else
+      class="text-secondary hover:text-secondaryHover h-4 w-4" />
   </button>
 </template>
diff --git a/src/components/shared/FloatingMenu.vue b/src/components/shared/FloatingMenu.vue
new file mode 100644
index 00000000..bbc20b7c
--- /dev/null
+++ b/src/components/shared/FloatingMenu.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts" generic="T extends string">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+defineProps<{
+  options: { key: string; value: T }[]
+  currentValue: T
+}>()
+
+const emit = defineEmits<{
+  (e: 'closeMenu'): void
+  (e: 'selectOption', value: T): void
+}>()
+
+const handleSelectOption = (value: T) => {
+  emit('selectOption', value)
+}
+
+const containerRef = ref<HTMLDivElement | null>(null)
+
+const callback = () => {
+  emit('closeMenu')
+}
+
+onMounted(() => {
+  window.addEventListener('click', callback)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', callback)
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="bg-white rounded-md p-2 flex flex-col gap-2 border"
+    @click.stop="">
+    <div
+      v-for="option in options"
+      :key="option.value"
+      class="hover:bg-gray-200 rounded p-1">
+      <button
+        class="w-full h-full text-left"
+        @click="handleSelectOption(option.value)">
+        {{ option.key }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
index 3c3ae66c..66951ccf 100644
--- a/src/components/shared/InputSelectMultiple.vue
+++ b/src/components/shared/InputSelectMultiple.vue
@@ -114,7 +114,7 @@ const removeValue = (selectedOption: Value) => {
 /* コンポーネント外がクリックされたときの処理 */
 const handleClickOutside = (e: MouseEvent) => {
   const target = e.target as HTMLElement
-  if (inputSelectRef.value === null) return
+  if (inputSelectRef.value === null || !isDropdownOpen.value) return
   if (!inputSelectRef.value.contains(target)) {
     isDropdownOpen.value = false
     emit('close')
diff --git a/src/components/shared/InputSelectSingle.vue b/src/components/shared/InputSelectSingle.vue
index 7e135674..474fd8c3 100644
--- a/src/components/shared/InputSelectSingle.vue
+++ b/src/components/shared/InputSelectSingle.vue
@@ -76,13 +76,13 @@ const selectValue = (selectedOption: Value) => {
 }
 const removeValue = () => {
   setTimeout(() => {
-    emit('update:modelValue', '')
+    emit('update:modelValue', null)
   }, 10)
 }
 
 const handleClickOutside = (e: MouseEvent) => {
   const target = e.target as HTMLElement
-  if (inputSelectRef.value === null) return
+  if (inputSelectRef.value === null || !isDropdownOpen.value) return
   if (!inputSelectRef.value.contains(target)) {
     isDropdownOpen.value = false
     emit('close')
diff --git a/src/components/shared/InputText.vue b/src/components/shared/InputText.vue
index e0fb3fa2..b8e7f94e 100644
--- a/src/components/shared/InputText.vue
+++ b/src/components/shared/InputText.vue
@@ -34,7 +34,7 @@ onMounted(() => {
 <template>
   <input
     ref="inputRef"
-    class="bg-background rounded border border-gray-300 py-1 px-2"
+    class="bg-white rounded border border-gray-300 py-1 px-2"
     :placeholder="props.placeholder"
     :required="props.required"
     :value="props.modelValue"
diff --git a/src/components/shared/InputTextarea.vue b/src/components/shared/InputTextarea.vue
index b583b824..20e550a7 100644
--- a/src/components/shared/InputTextarea.vue
+++ b/src/components/shared/InputTextarea.vue
@@ -34,7 +34,7 @@ onMounted(() => {
 <template>
   <textarea
     ref="textareaRef"
-    class="bg-background min-h-32 rounded border border-gray-300 px-1"
+    class="bg-background min-h-32 rounded border border-gray-300 px-3 py-2"
     :placeholder="props.placeholder"
     :required="required"
     :value="props.modelValue"
diff --git a/src/components/shared/MarkdownTextarea.vue b/src/components/shared/MarkdownTextarea.vue
index 1d7e11ec..2b9667ae 100644
--- a/src/components/shared/MarkdownTextarea.vue
+++ b/src/components/shared/MarkdownTextarea.vue
@@ -24,16 +24,15 @@ const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 const currentTab = ref<TabType>('input')
 const selectedTemplate = ref('')
 
-const templateOptions = computed(() => {
-  return (
+const templateOptions = computed(
+  () =>
     props.templates?.map(template => {
       return {
         key: template.name,
         value: template.name
       }
     }) ?? []
-  )
-})
+)
 
 function setTemplate(template: string) {
   const foundTemplate = props.templates?.find(t => t.name === template)
@@ -48,32 +47,39 @@ function changeCurrentTab(tab: TabType) {
 </script>
 
 <template>
-  <div>
-    <div class="flex gap-2">
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'input' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('input')">
-        入力
-      </button>
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'preview' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('preview')">
-        プレビュー
-      </button>
+  <div class="flex flex-col rounded border border-gray-300">
+    <div
+      class="flex items-center justify-between rounded-t bg-gray-100 px-4 pt-3">
+      <div class="flex items-center">
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'input'
+              ? 'bg-background border-t border-x border-gray-300'
+              : 'bg-gray-100'
+          }`"
+          @click="changeCurrentTab('input')">
+          入力
+        </button>
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'preview'
+              ? 'bg-background border-t border-x border-gray-300'
+              : 'bg-gray-100'
+          }`"
+          @click="changeCurrentTab('preview')">
+          プレビュー
+        </button>
+      </div>
       <InputSelectSingle
         v-if="props.templates !== undefined"
         v-model="selectedTemplate"
-        class="m-1 ml-auto inline-block w-1/3"
+        class="inline-block"
         :options="templateOptions"
         placeholder="テンプレートを選択"
         @option:selected="setTemplate(selectedTemplate)">
       </InputSelectSingle>
     </div>
-    <div>
+    <div class="px-5 py-3">
       <InputTextarea
         v-if="currentTab === 'input'"
         :auto-focus="autoFocus"
@@ -83,8 +89,11 @@ function changeCurrentTab(tab: TabType) {
         @update:model-value="emit('update:modelValue', $event)" />
       <MarkdownIt
         v-if="currentTab === 'preview'"
-        class="min-h-40 w-full overflow-y-scroll border border-gray-500 px-1"
+        class="min-h-40 w-full overflow-y-scroll rounded border border-gray-300 px-3 py-2"
         :text="modelValue" />
+      <div class="flex justify-end pt-3">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/shared/SimpleButton.vue b/src/components/shared/SimpleButton.vue
index 49d5037a..befb2b12 100644
--- a/src/components/shared/SimpleButton.vue
+++ b/src/components/shared/SimpleButton.vue
@@ -3,11 +3,16 @@ import { computed } from 'vue'
 
 interface Props {
   type?: 'plain' | 'danger' | 'success'
-  fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
-  padding: 'sm' | 'md' | 'lg' | 'xl'
+  fontSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  padding?: 'sm' | 'md' | 'lg' | 'xl'
   disabled?: boolean
 }
-const props = withDefaults(defineProps<Props>(), { disabled: false })
+const props = withDefaults(defineProps<Props>(), {
+  type: 'plain',
+  disabled: false,
+  fontSize: 'md',
+  padding: 'md'
+})
 
 const typeClass = computed(() => {
   switch (props.type) {
diff --git a/src/components/shared/StatusChip.vue b/src/components/shared/StatusChip.vue
index a2de1c62..9e2d19bd 100644
--- a/src/components/shared/StatusChip.vue
+++ b/src/components/shared/StatusChip.vue
@@ -4,7 +4,8 @@ import {
   CloudArrowUpIcon,
   ExclamationTriangleIcon,
   XCircleIcon,
-  CheckCircleIcon
+  CheckCircleIcon,
+  ChevronDownIcon
 } from '@heroicons/vue/24/solid'
 import { computed } from 'vue'
 
@@ -13,10 +14,12 @@ import type { RequestStatus } from '/@/features/requestStatus/model'
 interface Props {
   status: RequestStatus
   hasText?: boolean
+  hasMenu?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  hasText: false
+  hasText: false,
+  hasMenu: false
 })
 
 const statusToJpn = computed(() => (status: RequestStatus) => {
@@ -56,9 +59,9 @@ const backgroundColor = computed(() => (status: RequestStatus) => {
 
 <template>
   <div
-    :class="`inline flex items-center rounded-full p-2 text-white ${backgroundColor(
+    :class="`inline flex items-center rounded-3xl px-3 py-2 gap-2 text-white ${backgroundColor(
       status
-    )}`"
+    )}${hasMenu ? ' cursor-pointer' : ''}`"
     :title="statusToJpn(status)">
     <CheckCircleIcon v-if="status === 'accepted'" class="w-6" />
     <ExclamationTriangleIcon v-else-if="status === 'submitted'" class="w-6" />
@@ -69,5 +72,8 @@ const backgroundColor = computed(() => (status: RequestStatus) => {
     <span v-if="props.hasText">
       {{ statusToJpn(status) }}
     </span>
+    <div v-if="hasMenu">
+      <ChevronDownIcon class="w-4" />
+    </div>
   </div>
 </template>
diff --git a/src/components/shared/TagsGroup.vue b/src/components/shared/TagsGroup.vue
index 86947102..d3945f55 100644
--- a/src/components/shared/TagsGroup.vue
+++ b/src/components/shared/TagsGroup.vue
@@ -3,26 +3,23 @@ import type { Tag } from '/@/features/tag/model'
 
 interface Props {
   tags: Tag[]
-  limit?: number //1-indexedでlimitを指定
+  limit?: number
 }
 
-const props = withDefaults(defineProps<Props>(), { limit: 20 })
+const props = withDefaults(defineProps<Props>(), { limit: 4 })
 
-const slicedTags = props.tags.slice(
-  0,
-  !(props.tags.length > props.limit) ? props.tags.length : props.limit
-)
+const slicedTags = props.tags.slice(0, props.limit)
 const tagToolTip = props.tags.map(tag => tag.name).join(', ')
 </script>
 
 <template>
-  <span
-    v-for="(tag, index) in slicedTags"
-    :key="tag.id"
-    class="border-dark-600 rounded border p-0.5"
-    :class="index !== 0 ? 'ml-2' : ''"
-    :title="tagToolTip">
-    {{ tag.name }}
-  </span>
-  <span v-if="limit !== 0 && tags.length > limit"> ...</span>
+  <div class="flex items-center gap-2" :title="tagToolTip">
+    <div
+      v-for="tag in slicedTags"
+      :key="tag.id"
+      class="border-dark-600 rounded border p-0.5">
+      {{ tag.name }}
+    </div>
+    <span v-if="limit !== 0 && tags.length > limit"> ...</span>
+  </div>
 </template>
diff --git a/src/components/shared/UserIcon.vue b/src/components/shared/UserIcon.vue
index bbbd8d50..a6d0a64e 100644
--- a/src/components/shared/UserIcon.vue
+++ b/src/components/shared/UserIcon.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
-interface Props {
+// TODO: sizeも受け取りたい
+defineProps<{
   name: string
-}
-const props = defineProps<Props>()
+}>()
 </script>
 
 <template>
   <img
-    :alt="props.name"
+    :alt="name"
     class="rounded-1/2 h-full p-1"
-    :src="`https://q.trap.jp/api/v3/public/icon/${props.name}`" />
+    :src="`https://q.trap.jp/api/v3/public/icon/${name}`"
+    :title="name" />
 </template>
diff --git a/src/features/request/composables.ts b/src/features/request/composables.ts
new file mode 100644
index 00000000..dfae8758
--- /dev/null
+++ b/src/features/request/composables.ts
@@ -0,0 +1,12 @@
+import { computed } from 'vue'
+import type { RequestDetail } from '/@/features/request/model'
+import type { User } from '/@/features/user/model'
+
+export const useRequest = (request: RequestDetail) => {
+  const isRequestCreator = computed(() => (user: User | undefined) => {
+    if (!user) return false
+    return user.id === request.createdBy
+  })
+
+  return { isRequestCreator }
+}
diff --git a/src/features/request/converter.ts b/src/features/request/converter.ts
index 528550d9..842679a0 100644
--- a/src/features/request/converter.ts
+++ b/src/features/request/converter.ts
@@ -15,7 +15,7 @@ import type { Request, RequestDetail } from './model'
 export const convertRequestFromData = (request: RequestData): Request => ({
   id: request.id,
   status: request.status,
-  created_by: request.created_by,
+  createdBy: request.created_by,
   title: request.title,
   content: request.content,
   targets: request.targets.map(convertRequestTargetFromData),
@@ -29,7 +29,7 @@ export const convertRequestDetailFromData = (
 ): RequestDetail => ({
   id: request.id,
   status: request.status,
-  created_by: request.created_by,
+  createdBy: request.created_by,
   title: request.title,
   content: request.content,
   targets: request.targets.map(convertRequestTargetFromData),
diff --git a/src/features/request/model.ts b/src/features/request/model.ts
index ac71aaeb..3f912ef9 100644
--- a/src/features/request/model.ts
+++ b/src/features/request/model.ts
@@ -15,7 +15,7 @@ import type { Tag } from '/@/features/tag/model'
 export interface Request {
   id: string
   status: RequestStatus
-  created_by: string
+  createdBy: string
   title: string
   content: string
   targets: RequestTargetDetail[]
diff --git a/src/features/request/usecase.ts b/src/features/request/usecase.ts
index 6357f25d..05f8ea24 100644
--- a/src/features/request/usecase.ts
+++ b/src/features/request/usecase.ts
@@ -7,6 +7,7 @@ import type { RequestStatus } from '/@/features/requestStatus/model'
 
 import type { RequestSeed } from './model'
 import { useRequestRepository } from './repository'
+import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
 
 export const useFetchRequestsUsecase = async () => {
   const repository = useRequestRepository()
@@ -24,10 +25,9 @@ export const useFetchRequestsUsecase = async () => {
 
 export const useFetchRequestUsecase = async (id: string) => {
   const repository = useRequestRepository()
-  const { request } = storeToRefs(useRequestDetailStore())
 
   try {
-    request.value = await repository.fetchRequest(id)
+    return await repository.fetchRequest(id)
   } catch {
     throw new Error('申請の取得に失敗しました')
   }
@@ -49,13 +49,18 @@ export const createRequestUsecase = async (request: RequestSeed) => {
 
 export const editRequestUsecase = async (
   id: string,
-  requestSeed: RequestSeed
+  _requestSeed: RequestSeed
 ) => {
   const repository = useRequestRepository()
   const { request } = storeToRefs(useRequestDetailStore())
   if (!request.value) return
 
   try {
+    const tags = await createTagIfNotExistUsecase(_requestSeed.tags)
+    const requestSeed = {
+      ..._requestSeed,
+      tags
+    }
     const res = await repository.editRequest(id, requestSeed)
     request.value = res
   } catch {
diff --git a/src/features/requestStatus/composables.ts b/src/features/requestStatus/composables.ts
new file mode 100644
index 00000000..6c4e5e82
--- /dev/null
+++ b/src/features/requestStatus/composables.ts
@@ -0,0 +1,39 @@
+import type { RequestStatus } from '/@/features/requestStatus/model'
+
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '/@/stores/user'
+import type { RequestDetail } from '/@/features/request/model'
+import { computed } from 'vue'
+import { useRequest } from '/@/features/request/composables'
+
+export const useStatusOptions = (request: RequestDetail) => {
+  const userStore = useUserStore()
+  const { isRequestCreator } = useRequest(request)
+
+  const { me, isAdmin } = storeToRefs(userStore)
+  const hasAuthority = isRequestCreator.value(me.value)
+
+  const showToSubmitted =
+    (hasAuthority && request.status === 'fix_required') ||
+    (isAdmin.value &&
+      (request.status === 'fix_required' || request.status === 'accepted'))
+  const showToRequired = isAdmin.value && request.status === 'submitted'
+  const showToAccepted = isAdmin.value && request.status === 'submitted'
+  const showToRejected = isAdmin.value && request.status === 'submitted'
+
+  const statusOptions = computed<
+    { value: RequestStatus; key: string; show: boolean }[]
+  >(() => [
+    { value: 'submitted', key: '承認待ちにする', show: showToSubmitted }, //TODO: 表示するべきか確認
+    { value: 'rejected', key: '却下する', show: showToRejected },
+    { value: 'fix_required', key: '要修正にする', show: showToRequired },
+    { value: 'accepted', key: '承認する', show: showToAccepted }
+  ])
+  const showStatusOptions = computed(() =>
+    statusOptions.value
+      .filter(option => option.show)
+      .map(option => ({ value: option.value, key: option.key }))
+  )
+
+  return { statusOptions: showStatusOptions }
+}
diff --git a/src/features/requestTarget/mock.ts b/src/features/requestTarget/mock.ts
index 34ab6a78..0c2854ca 100644
--- a/src/features/requestTarget/mock.ts
+++ b/src/features/requestTarget/mock.ts
@@ -20,7 +20,7 @@ export const mockRequestTargets: RequestTargetDetail[] = [
     id: '3fa85f64-5717-4562-b3fc-2c963f66afa7',
     amount: 1500,
     target: '3fa85f64-5717-4562-b3fc-2c963f66afa7',
-    paid_at: '2020-01-02',
+    paid_at: null,
     created_at: '2020-01-02'
   }
 ]
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index b5ddc4ad..4272a663 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -1,54 +1,35 @@
 <script lang="ts" setup>
-import { DateTime } from 'luxon'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useGroupStore } from '/@/stores/group'
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useTagStore } from '/@/stores/tag'
 import { useUserStore } from '/@/stores/user'
 
-import { formatDate } from '/@/lib/date'
 import { toId } from '/@/lib/parseQueryParams'
 
-import NewComment from '/@/components/requestDetail/NewComment.vue'
-import RequestAmount from '/@/components/requestDetail/RequestAmount.vue'
-import RequestContent from '/@/components/requestDetail/RequestContent.vue'
-import RequestGroup from '/@/components/requestDetail/RequestGroup.vue'
 import RequestLogs from '/@/components/requestDetail/RequestLogs.vue'
-import RequestTags from '/@/components/requestDetail/RequestTags.vue'
-import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
-import RequestTitle from '/@/components/requestDetail/RequestTitle.vue'
-import StatusChangeButtons from '/@/components/requestDetail/StatusChangeButtons.vue'
-import ToTransactionButtons from '/@/components/requestDetail/ToTransactionButtons.vue'
-import StatusChip from '/@/components/shared/StatusChip.vue'
+import RequestSidebar from '/@/components/requestDetail/RequestSidebar.vue'
 import { useFetchGroupsUsecase } from '/@/features/group/usecase'
-import { useFetchRequestUsecase } from '/@/features/request/usecase'
 import { useFetchTagsUsecase } from '/@/features/tag/usecase'
 import { useFetchUsersUsecase } from '/@/features/user/usecase'
-
-import { useRequestDetail } from './composables/useRequestDetail'
+import RequestHeader from '/@/components/requestDetail/RequestHeader.vue'
+import { useRequestDetailStore } from '/@/stores/requestDetail'
 
 const route = useRoute()
 const id = toId(route.params.id)
 
-const requestDetailStore = useRequestDetailStore()
 const userStore = useUserStore()
 const groupStore = useGroupStore()
 const tagStore = useTagStore()
-const { isUserFetched, userMap } = storeToRefs(userStore)
+const requestDetailStore = useRequestDetailStore()
+const { isUserFetched } = storeToRefs(userStore)
 const { isGroupFetched } = storeToRefs(groupStore)
 const { isTagFetched } = storeToRefs(tagStore)
+const { useRequest } = requestDetailStore
 
-const { editMode, changeEditMode } = useRequestDetail()
-const { request } = storeToRefs(requestDetailStore)
+const request = await useRequest(id)
 
-const formattedDate = computed(() =>
-  formatDate(request.value?.createdAt ?? DateTime.fromISO(''))
-)
-
-await useFetchRequestUsecase(id)
 if (!isGroupFetched.value) {
   await useFetchGroupsUsecase()
 }
@@ -58,64 +39,17 @@ if (!isUserFetched.value) {
 if (!isTagFetched.value) {
   await useFetchTagsUsecase()
 }
-onMounted(() => {
-  if (route.hash !== '') {
-    document.getElementById(route.hash.substring(1))?.scrollIntoView(true)
-  }
-})
 </script>
 
 <template>
-  <div v-if="request !== undefined" class="min-w-160 mx-auto px-12 pt-4">
-    <div class="bottom-bar">
-      <div class="flex items-center justify-between">
-        <StatusChip has-text :status="request.status" />
-        <RequestTitle
-          class="ml-2"
-          :is-edit-mode="editMode === 'title'"
-          @change-edit-mode="changeEditMode($event)" />
-        <div class="ml-2">
-          <StatusChangeButtons />
-        </div>
-      </div>
-      <div class="mt-4 flex justify-between">
-        <RequestTags
-          :is-edit-mode="editMode === 'tags'"
-          @change-edit-mode="changeEditMode($event)" />
-        <div class="flex items-center gap-4">
-          <RequestGroup
-            :is-edit-mode="editMode === 'group'"
-            @change-edit-mode="changeEditMode($event)" />
-          <p>申請者：{{ userMap[request.created_by] }}</p>
-          <p>申請日：{{ formattedDate }}</p>
-          <RequestAmount />
-        </div>
-      </div>
-      <div class="mt-4 flex">
-        <RequestContent
-          :is-edit-mode="editMode === 'content'"
-          @change-edit-mode="changeEditMode($event)" />
-        <RequestTargets
-          :is-edit-mode="editMode === 'targets'"
-          @change-edit-mode="changeEditMode($event)" />
-      </div>
-    </div>
-    <div class="flex">
-      <RequestLogs class="w-2/3" />
-      <div class="w-1/3">
-        <ToTransactionButtons />
-        <NewComment />
-      </div>
+  <div
+    v-if="request !== undefined"
+    class="mx-auto w-4/5 pt-5 pb-20 flex flex-col gap-5">
+    <RequestHeader :request="request" />
+    <div class="h-0.25 bg-[#e5e7eb]" />
+    <div class="flex justify-between gap-20">
+      <RequestLogs class="basis-2/3" :request="request" />
+      <RequestSidebar class="basis-1/3" :request="request" />
     </div>
   </div>
 </template>
-
-<style scoped>
-.bottom-bar::after {
-  content: '';
-  display: block;
-  border: 1px solid #e5e7eb;
-  margin: 12px auto;
-  background-color: #e5e7eb;
-}
-</style>
diff --git a/src/pages/composables/useNewTransaction.ts b/src/pages/composables/useNewTransaction.ts
index 9f6464a3..ed6f7bca 100644
--- a/src/pages/composables/useNewTransaction.ts
+++ b/src/pages/composables/useNewTransaction.ts
@@ -7,12 +7,17 @@ import type { Tag } from '/@/features/tag/model'
 import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
 import type { TransactionCreateSeed } from '/@/features/transaction/model'
 import { createTransactionUsecase } from '/@/features/transaction/usecase'
+import type { RequestTarget } from '/@/features/requestTarget/model'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '/@/stores/user'
 
 export type MoneyDirection = 'toTraP' | 'fromTraP'
 
 export const useNewTransaction = () => {
   const toast = useToast()
   const router = useRouter()
+  const userStore = useUserStore()
+  const { userMap } = storeToRefs(userStore)
 
   const isSending = ref(false)
 
@@ -56,29 +61,33 @@ export const useNewTransaction = () => {
     isSending.value = false
   }
 
-  const postTransactionFromRequest = async (request: RequestDetail) => {
-    const result = confirm('この申請に紐づけて入出金記録を作成しますか？')
+  const postTransactionFromRequest = async (
+    request: RequestDetail,
+    target: RequestTarget
+  ) => {
+    const result = confirm(
+      `この申請に紐づけて@${
+        userMap.value[target.target]
+      }の入出金記録を作成しますか？`
+    )
     if (!result) return
     isSending.value = true
-    const promises: ReturnType<typeof createTransactionUsecase>[] =
-      request.targets.map(target => {
-        const willPostTransaction = {
-          amount: target.amount,
-          targets: [target.target],
-          tags: request.tags,
-          group: request.group?.id ?? null,
-          request: request.id
-        }
-        return createTransactionUsecase(willPostTransaction)
-      })
+    const willPostTransaction = {
+      amount: target.amount,
+      targets: [target.target],
+      tags: request.tags,
+      group: request.group?.id ?? null,
+      request: request.id
+    }
+    let transactionId
     try {
-      await Promise.all(promises)
+      transactionId = await createTransactionUsecase(willPostTransaction)
       toast.success('入出金記録を作成しました')
     } catch {
       toast.error('入出金記録の作成に失敗しました')
     }
     isSending.value = false
-    router.push('/transactions')
+    router.push(`/transactions/${transactionId}`)
   }
 
   return {
diff --git a/src/pages/composables/useRequestDetail.ts b/src/pages/composables/useRequestDetail.ts
deleted file mode 100644
index 971fc239..00000000
--- a/src/pages/composables/useRequestDetail.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { useToast } from 'vue-toastification'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
-import type { RequestSeed } from '/@/features/request/model'
-import { editRequestUsecase } from '/@/features/request/usecase'
-import type { Tag } from '/@/features/tag/model'
-import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
-
-export type EditMode =
-  | 'title'
-  | 'content'
-  | 'amount'
-  | 'group'
-  | 'tags'
-  | 'targets'
-  | ''
-
-export const useRequestDetail = () => {
-  const requestDetailStore = useRequestDetailStore()
-  const toast = useToast()
-  const { request, editedValue } = storeToRefs(requestDetailStore)
-
-  const isSending = ref(false)
-  const editMode = ref<EditMode>('')
-
-  const changeEditMode = async (kind: EditMode) => {
-    if (kind !== '') {
-      editMode.value = kind
-      return
-    }
-    if (editMode.value !== 'tags') {
-      const result = confirm(
-        '入出金記録に紐づいている申請のこの情報を変更すると、入出金記録の情報にも変更が反映されます。よろしいですか？'
-      )
-      if (!result) return
-    }
-    if (request.value !== undefined) {
-      await putRequest(request.value.id, editedValue.value)
-    } else {
-      toast.error('申請の更新に失敗しました')
-    }
-    editMode.value = ''
-  }
-
-  const putRequest = async (id: string, requestSeed: RequestSeed) => {
-    isSending.value = true
-    let tags: Tag[]
-    try {
-      tags = await createTagIfNotExistUsecase(requestSeed.tags)
-    } catch {
-      toast.error('新規タグの作成に失敗しました')
-      isSending.value = false
-      return
-    }
-    try {
-      const requestSeedWithNewTags = {
-        ...requestSeed,
-        tags
-      }
-      await editRequestUsecase(id, requestSeedWithNewTags)
-      toast.success('申請を更新しました')
-    } catch (e) {
-      if (e instanceof Error) {
-        toast.error(e.message)
-      }
-    }
-    isSending.value = false
-  }
-
-  return {
-    isSending,
-    editMode,
-    changeEditMode
-  }
-}
diff --git a/src/stores/requestDetail.ts b/src/stores/requestDetail.ts
index 079bde71..33efabc4 100644
--- a/src/stores/requestDetail.ts
+++ b/src/stores/requestDetail.ts
@@ -1,43 +1,23 @@
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
-import type { RequestDetail, RequestSeed } from '/@/features/request/model'
-import type { RequestTarget } from '/@/features/requestTarget/model'
-import type { User } from '/@/features/user/model'
+import type { RequestDetail } from '/@/features/request/model'
+import { useFetchRequestUsecase } from '/@/features/request/usecase'
 
 export const useRequestDetailStore = defineStore('requestDetail', () => {
-  const request = ref<RequestDetail>()
+  const request = ref<RequestDetail | null>(null)
 
-  const targets = computed((): RequestTarget[] => {
-    if (request.value === undefined) {
-      return []
+  const useRequest = async (id: string) => {
+    if (request.value !== null) {
+      return request.value
     }
-    return request.value.targets.map(target => ({
-      target: target.target,
-      amount: target.amount
-    }))
-  })
-
-  const editMode = ref('')
-  const editedValue = ref<RequestSeed>({
-    createdBy: '',
-    title: '',
-    content: '',
-    targets: [],
-    tags: [],
-    group: null
-  })
-
-  const isRequestCreator = computed(() => (user: User | undefined) => {
-    if (!user || request.value === undefined) return false
-    return user.id === request.value.created_by
-  })
+    const newRequest = await useFetchRequestUsecase(id)
+    request.value = newRequest
+    return newRequest
+  }
 
   return {
     request,
-    targets,
-    editMode,
-    editedValue,
-    isRequestCreator
+    useRequest
   }
 })