diff --git a/src/components/groupDetail/GroupBudget.vue b/src/components/groupDetail/GroupBudget.vue
index 440458e0..54a6a262 100644
--- a/src/components/groupDetail/GroupBudget.vue
+++ b/src/components/groupDetail/GroupBudget.vue
@@ -2,66 +2,15 @@
 import { storeToRefs } from 'pinia'
 
 import { useGroupDetailStore } from '/@/stores/groupDetail'
-import { useUserStore } from '/@/stores/user'
 
-import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
-import EditButton from '/@/components/shared/EditButton.vue'
-import InputNumber from '/@/components/shared/InputNumber.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-
-interface Props {
-  isEditMode: boolean
-  isSending: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-  (e: 'finishEditing'): void
-}>()
-
-const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
 
-const { group, editedValue } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = canEditGroup(me.value)
+const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
-  <div v-if="!isEditMode && group" class="flex items-center">
-    予算：{{ group.budget }}円
-    <EditButton
-      v-if="hasAuthority"
-      class="ml-1"
-      :is-edit-mode="props.isEditMode"
-      @click="emit('changeEditMode', 'budget')" />
-  </div>
-  <div v-else class="flex items-center">
-    予算：
-    <InputNumber
-      v-model="editedValue.budget"
-      auto-focus
-      class="mr-1 w-24"
-      :min="1"
-      placeholder="金額" />円
-    <SimpleButton
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click="emit('changeEditMode', '')">
-      キャンセル
-    </SimpleButton>
-    <SimpleButton
-      class="ml-2"
-      :disabled="props.isSending"
-      font-size="sm"
-      padding="sm"
-      type="success"
-      @click="emit('finishEditing')">
-      完了
-    </SimpleButton>
+  <div v-if="group" class="flex flex-col">
+    <label class="text-xl">予算</label>
+    <p class="mt-3">{{ group?.budget }} 円</p>
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupDescription.vue b/src/components/groupDetail/GroupDescription.vue
index d94be342..3c054395 100644
--- a/src/components/groupDetail/GroupDescription.vue
+++ b/src/components/groupDetail/GroupDescription.vue
@@ -2,74 +2,18 @@
 import { storeToRefs } from 'pinia'
 
 import { useGroupDetailStore } from '/@/stores/groupDetail'
-import { useUserStore } from '/@/stores/user'
 
-import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
-import InputTextarea from '/@/components/shared/InputTextarea.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-
-interface Props {
-  isEditMode: boolean
-  isSending: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-  (e: 'finishEditing'): void
-}>()
-
-const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
-const { group, editedValue } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = canEditGroup(me.value)
+const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
   <div v-if="group">
-    <p>詳細</p>
-    <div v-if="!isEditMode" class="flex w-full">
-      <p class="h-32 w-4/5 rounded border border-surface-secondary pl-1">
+    <p class="text-xl">詳細</p>
+    <div class="flex w-full mt-3">
+      <p class="min-h-32 w-full rounded border border-surface-secondary p-2">
         {{ group.description }}
       </p>
-      <div class="flex items-end">
-        <SimpleButton
-          v-if="hasAuthority"
-          class="ml-2"
-          font-size="sm"
-          padding="sm"
-          @click="emit('changeEditMode', 'description')">
-          編集
-        </SimpleButton>
-      </div>
-    </div>
-    <div v-else class="flex w-full">
-      <InputTextarea
-        v-model="editedValue.description"
-        auto-focus
-        class="w-4/5"
-        placeholder="詳細" />
-      <div class="flex items-end">
-        <SimpleButton
-          class="ml-2"
-          font-size="sm"
-          padding="sm"
-          @click="emit('changeEditMode', '')">
-          キャンセル
-        </SimpleButton>
-        <SimpleButton
-          class="ml-2"
-          :disabled="props.isSending"
-          font-size="sm"
-          padding="sm"
-          type="success"
-          @click="emit('finishEditing')">
-          完了
-        </SimpleButton>
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupMembers.vue b/src/components/groupDetail/GroupMembers.vue
index fafa6295..c4de6f93 100644
--- a/src/components/groupDetail/GroupMembers.vue
+++ b/src/components/groupDetail/GroupMembers.vue
@@ -24,43 +24,41 @@ const { absentMemberOptions, isSending, addMembers, removeMember } =
 </script>
 
 <template>
-  <div
-    v-if="group"
-    class="relative flex h-2/5 flex-col justify-between border border-surface-secondary">
-    <p class="bg-surface-primary absolute -top-3 left-2 px-2">
-      グループメンバー
-    </p>
-    <ul class="h-full p-4">
-      <li
-        v-for="member in group.members"
-        :key="member"
-        class="not-first:mt-2 flex items-center justify-between">
-        <div class="flex items-center">
-          <UserIcon class="w-12" :name="userMap[member]" />
-          <p class="mx-1 break-all">{{ userMap[member] }}</p>
-        </div>
+  <div v-if="group" class="relative flex flex-col justify-between">
+    <p class="text-xl">グループメンバー</p>
+    <div class="mt-3 border border-surface-secondary">
+      <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
+        <li
+          v-for="member in group.members"
+          :key="member"
+          class="flex items-center justify-between">
+          <div class="flex items-center">
+            <UserIcon class="w-12" :name="userMap[member]" />
+            <p class="mx-1 break-all">{{ userMap[member] }}</p>
+          </div>
+          <button
+            v-if="hasAuthority"
+            class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
+            :disabled="isSending"
+            @click="removeMember(member)">
+            <MinusIcon class="w-6" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="hasAuthority" class="flex p-2 gap-2 w-full">
+        <InputSelectMultiple
+          v-model="membersToBeAdded"
+          class="flex-grow w-1"
+          is-dropdown-above
+          :options="absentMemberOptions"
+          placeholder="追加するメンバーを選択" />
         <button
-          v-if="hasAuthority"
           class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-          :disabled="isSending"
-          @click="removeMember(member)">
-          <MinusIcon class="w-6" />
+          :disabled="membersToBeAdded.length === 0 || isSending"
+          @click="addMembers(membersToBeAdded)">
+          <PlusIcon class="w-6" />
         </button>
-      </li>
-    </ul>
-    <div v-if="hasAuthority" class="flex p-2">
-      <InputSelectMultiple
-        v-model="membersToBeAdded"
-        class="mr-2 flex-grow"
-        is-dropdown-above
-        :options="absentMemberOptions"
-        placeholder="追加するメンバーを選択" />
-      <button
-        class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-        :disabled="membersToBeAdded.length === 0 || isSending"
-        @click="addMembers(membersToBeAdded)">
-        <PlusIcon class="w-6" />
-      </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupName.vue b/src/components/groupDetail/GroupName.vue
index 924a7d88..e2f72cce 100644
--- a/src/components/groupDetail/GroupName.vue
+++ b/src/components/groupDetail/GroupName.vue
@@ -6,6 +6,7 @@ import { useUserStore } from '/@/stores/user'
 
 import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
 import InputText from '/@/components/shared/InputText.vue'
+import EditButton from '/@/components/shared/EditButton.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 
 interface Props {
@@ -29,8 +30,8 @@ const hasAuthority = canEditGroup(me.value)
 </script>
 
 <template>
-  <div v-if="group" class="flex items-center">
-    <h1 v-if="!isEditMode" class="flex-grow text-3xl">
+  <div v-if="group" class="flex items-center gap-3">
+    <h1 v-if="!props.isEditMode" class="flex-grow text-2xl">
       {{ group.name }}
     </h1>
     <InputText
@@ -40,30 +41,19 @@ const hasAuthority = canEditGroup(me.value)
       class="flex-grow"
       placeholder="グループ名" />
     <SimpleButton
-      v-if="hasAuthority && !isEditMode"
-      class="ml-2"
-      font-size="sm"
+      v-if="isEditMode"
+      font-size="base"
       padding="sm"
-      @click="emit('changeEditMode', 'name')">
-      編集
+      @click="emit('finishEditing')">
+      完了
     </SimpleButton>
-    <template v-else-if="hasAuthority && isEditMode">
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click="emit('changeEditMode', '')">
-        キャンセル
-      </SimpleButton>
-      <SimpleButton
-        class="ml-2"
-        :disabled="props.isSending"
-        font-size="sm"
-        padding="sm"
-        type="success"
-        @click="emit('finishEditing')">
-        完了
-      </SimpleButton>
-    </template>
+    <EditButton
+      v-if="hasAuthority"
+      :is-edit-mode="props.isEditMode"
+      @click="
+        props.isEditMode
+          ? emit('changeEditMode', '')
+          : emit('changeEditMode', 'name')
+      " />
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupOwners.vue b/src/components/groupDetail/GroupOwners.vue
index d3edb578..2304987c 100644
--- a/src/components/groupDetail/GroupOwners.vue
+++ b/src/components/groupDetail/GroupOwners.vue
@@ -24,42 +24,40 @@ const { absentOwnerOptions, isSending, addOwners, removeOwner } =
 </script>
 
 <template>
-  <div
-    v-if="group"
-    class="relative flex h-2/5 flex-col justify-between border border-surface-secondary">
-    <p class="bg-surface-primary absolute -top-3 left-2 px-2">
-      グループオーナー
-    </p>
-    <ul class="h-full p-4">
-      <li
-        v-for="owner in group.owners"
-        :key="owner"
-        class="not-first:mt-2 flex items-center justify-between">
-        <div class="flex items-center">
-          <UserIcon class="w-12" :name="userMap[owner]" />
-          <p class="mx-1 break-all">{{ userMap[owner] }}</p>
-        </div>
+  <div v-if="group" class="relative flex flex-col justify-between">
+    <p class="text-xl">グループオーナー</p>
+    <div class="mt-3 border border-surface-secondary">
+      <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
+        <li
+          v-for="owner in group.owners"
+          :key="owner"
+          class="flex items-center justify-between">
+          <div class="flex items-center">
+            <UserIcon class="w-12" :name="userMap[owner]" />
+            <p class="mx-1 break-all">{{ userMap[owner] }}</p>
+          </div>
+          <button
+            v-if="hasAuthority"
+            class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
+            :disabled="isSending"
+            @click="removeOwner(owner)">
+            <MinusIcon class="w-6" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="hasAuthority" class="flex p-2 gap-2">
+        <InputSelectMultiple
+          v-model="ownersToBeAdded"
+          class="flex-grow w-1"
+          :options="absentOwnerOptions"
+          placeholder="追加するオーナーを選択" />
         <button
-          v-if="hasAuthority"
           class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-          :disabled="isSending"
-          @click="removeOwner(owner)">
-          <MinusIcon class="w-6" />
+          :disabled="ownersToBeAdded.length === 0 || isSending"
+          @click="addOwners(ownersToBeAdded)">
+          <PlusIcon class="w-6" />
         </button>
-      </li>
-    </ul>
-    <div v-if="hasAuthority" class="flex p-2">
-      <InputSelectMultiple
-        v-model="ownersToBeAdded"
-        class="mr-2 flex-grow"
-        :options="absentOwnerOptions"
-        placeholder="追加するオーナーを選択" />
-      <button
-        class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-        :disabled="ownersToBeAdded.length === 0 || isSending"
-        @click="addOwners(ownersToBeAdded)">
-        <PlusIcon class="w-6" />
-      </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
index 8282e059..18f2a0b6 100644
--- a/src/components/shared/InputSelectMultiple.vue
+++ b/src/components/shared/InputSelectMultiple.vue
@@ -269,14 +269,12 @@ onUnmounted(() => {
 <template>
   <div
     ref="inputSelectRef"
-    :class="`relative ${
-      disabled && 'cursor-not-allowed'
-    } min-w-72 ${calcWidth}`">
+    :class="`relative ${disabled && 'cursor-not-allowed'} ${calcWidth}`">
     <div
-      class="flex w-full cursor-text items-center rounded border border-surface-secondary py-1 pl-1"
+      class="flex cursor-text items-center rounded border border-surface-secondary py-1 pl-1"
       :class="`${disabled && 'pointer-events-none'}`"
       @click.prevent="handleClick">
-      <div class="flex w-full items-center overflow-x-auto">
+      <div class="flex items-center overflow-x-auto">
         <div
           v-for="selectedValue in selectedValues"
           :key="selectedValue.key"
diff --git a/src/pages/GroupDetailPage.vue b/src/pages/GroupDetailPage.vue
index 41653797..1405503f 100644
--- a/src/pages/GroupDetailPage.vue
+++ b/src/pages/GroupDetailPage.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
 import { storeToRefs } from 'pinia'
 import { RouterLink, useRoute } from 'vue-router'
 
@@ -13,11 +12,10 @@ import GroupDescription from '/@/components/groupDetail/GroupDescription.vue'
 import GroupMembers from '/@/components/groupDetail/GroupMembers.vue'
 import GroupName from '/@/components/groupDetail/GroupName.vue'
 import GroupOwners from '/@/components/groupDetail/GroupOwners.vue'
-import { useDeleteGroup } from '/@/components/groupDetail/composables/useDeleteGroup'
 import { useGroupInformation } from '/@/components/groupDetail/composables/useGroupInformation'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { useFetchGroup } from '/@/features/group/usecase'
 import { useFetchUsersUsecase } from '/@/features/user/usecase'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
 
 const route = useRoute()
 const id = toId(route.params.id)
@@ -26,16 +24,11 @@ const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
 
 const { group } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
 const { isUserFetched } = storeToRefs(userStore)
 
 const { isSending, editMode, changeEditMode, finishEditing } =
   useGroupInformation()
 
-const hasAuthority = canEditGroup(me.value)
-const { isDeleting, deleteGroup } = useDeleteGroup()
-
 await useFetchGroup(id)
 if (!isUserFetched.value) {
   await useFetchUsersUsecase()
@@ -43,8 +36,8 @@ if (!isUserFetched.value) {
 </script>
 
 <template>
-  <div v-if="group !== undefined" class="min-w-96 mx-auto h-full w-4/5 pt-4">
-    <div class="flex h-12 justify-between">
+  <div v-if="group !== undefined" class="mx-auto w-4/5 mt-5 mb-5">
+    <div class="flex">
       <GroupName
         class="flex-grow"
         :is-edit-mode="editMode === 'name'"
@@ -52,7 +45,7 @@ if (!isUserFetched.value) {
         @change-edit-mode="changeEditMode($event)"
         @finish-editing="finishEditing" />
     </div>
-    <div class="mt-4 flex h-full">
+    <div class="mt-6 flex h-full gap-10 flex-col md:flex-row">
       <div class="flex-grow">
         <GroupDescription
           :is-edit-mode="editMode === 'description'"
@@ -60,7 +53,7 @@ if (!isUserFetched.value) {
           @change-edit-mode="changeEditMode($event)"
           @finish-editing="finishEditing" />
         <GroupBudget
-          class="mt-4 h-8"
+          class="mt-6"
           :is-edit-mode="editMode === 'budget'"
           :is-sending="isSending"
           @change-edit-mode="changeEditMode($event)"
@@ -71,20 +64,8 @@ if (!isUserFetched.value) {
           このグループの入出金記録へ
           <ArrowTopRightOnSquareIcon class="ml-1 w-6" />
         </RouterLink>
-        <div class="text-right">
-          <SimpleButton
-            v-if="hasAuthority"
-            class="mr-8"
-            :disabled="isDeleting"
-            font-size="sm"
-            padding="sm"
-            type="danger"
-            @click="deleteGroup(group?.id ?? '')">
-            グループを削除
-          </SimpleButton>
-        </div>
       </div>
-      <div class="flex w-1/4 flex-col gap-8">
+      <div class="flex w-full md:w-1/3 flex-col gap-10">
         <GroupOwners />
         <GroupMembers />
       </div>