diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 406e2b6794..a939575e7e 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -33,8 +33,7 @@ defineEmits<{
   display: flex;
   justify-content: center;
   align-items: center;
-  text-wrap: nowrap;
-  height: vars.$size-control;
+  min-height: vars.$size-control;
   border-radius: vars.$radius-1;
   padding: 0 vars.$padding-2;
   gap: vars.$gap-1;
diff --git a/src/components/Dialog/AllDialog.vue b/src/components/Dialog/AllDialog.vue
index 1dbbca07da..61abdb3b9b 100644
--- a/src/components/Dialog/AllDialog.vue
+++ b/src/components/Dialog/AllDialog.vue
@@ -10,14 +10,19 @@
   <ToolBarCustomDialog
     v-model:dialogOpened="isToolbarSettingDialogOpenComputed"
   />
+  <CharacterListDialog
+    v-if="orderedAllCharacterInfos.length > 0"
+    v-model:dialogOpened="isCharacterListDialogOpenComputed"
+    :characterInfos="orderedAllCharacterInfos"
+  />
   <CharacterOrderDialog
     v-if="orderedAllCharacterInfos.length > 0"
-    v-model:dialogOpened="isCharacterOrderDialogOpenComputed"
+    v-model:dialogOpened="isOldCharacterOrderDialogOpenComputed"
     :characterInfos="orderedAllCharacterInfos"
   />
   <DefaultStyleListDialog
     v-if="orderedTalkCharacterInfos.length > 0"
-    v-model:dialogOpened="isDefaultStyleSelectDialogOpenComputed"
+    v-model:dialogOpened="isOldDefaultStyleSelectDialogOpenComputed"
     :characterInfos="orderedTalkCharacterInfos"
   />
   <DictionaryManageDialog
@@ -39,6 +44,7 @@ import SettingDialog from "@/components/Dialog/SettingDialog/SettingDialog.vue";
 import HotkeySettingDialog from "@/components/Dialog/HotkeySettingDialog.vue";
 import ToolBarCustomDialog from "@/components/Dialog/ToolBarCustomDialog.vue";
 import DefaultStyleListDialog from "@/components/Dialog/OldDefaultStyleListDialog.vue";
+import CharacterListDialog from "@/components/Dialog/CharacterListDialog.vue";
 import CharacterOrderDialog from "@/components/Dialog/OldCharacterOrderDialog.vue";
 import AcceptRetrieveTelemetryDialog from "@/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue";
 import AcceptTermsDialog from "@/components/Dialog/AcceptDialog/AcceptTermsDialog.vue";
@@ -90,17 +96,26 @@ const isAcceptTermsDialogOpenComputed = computed({
     }),
 });
 
+// キャラクター・スタイルの管理
+const isCharacterListDialogOpenComputed = computed({
+  get: () => store.state.isCharacterListDialogOpen,
+  set: (val) =>
+    store.actions.SET_DIALOG_OPEN({
+      isCharacterListDialogOpen: val,
+    }),
+});
+
 // キャラクター並び替え
 const orderedAllCharacterInfos = computed(
   () => store.getters.GET_ORDERED_ALL_CHARACTER_INFOS,
 );
-const isCharacterOrderDialogOpenComputed = computed({
+const isOldCharacterOrderDialogOpenComputed = computed({
   get: () =>
     !store.state.isAcceptTermsDialogOpen &&
-    store.state.isCharacterOrderDialogOpen,
+    store.state.isOldCharacterOrderDialogOpen,
   set: (val) =>
     store.actions.SET_DIALOG_OPEN({
-      isCharacterOrderDialogOpen: val,
+      isOldCharacterOrderDialogOpen: val,
     }),
 });
 
@@ -111,14 +126,14 @@ const orderedTalkCharacterInfos = computed(() => {
     "talk",
   );
 });
-const isDefaultStyleSelectDialogOpenComputed = computed({
+const isOldDefaultStyleSelectDialogOpenComputed = computed({
   get: () =>
     !store.state.isAcceptTermsDialogOpen &&
-    !store.state.isCharacterOrderDialogOpen &&
-    store.state.isDefaultStyleSelectDialogOpen,
+    !store.state.isOldCharacterOrderDialogOpen &&
+    store.state.isOldDefaultStyleSelectDialogOpen,
   set: (val) =>
     store.actions.SET_DIALOG_OPEN({
-      isDefaultStyleSelectDialogOpen: val,
+      isOldDefaultStyleSelectDialogOpen: val,
     }),
 });
 
@@ -143,8 +158,8 @@ const isDictionaryManageDialogOpenComputed = computed({
 const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
   get: () =>
     !store.state.isAcceptTermsDialogOpen &&
-    !store.state.isCharacterOrderDialogOpen &&
-    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isOldCharacterOrderDialogOpen &&
+    !store.state.isOldDefaultStyleSelectDialogOpen &&
     store.state.isAcceptRetrieveTelemetryDialogOpen,
   set: (val) =>
     store.actions.SET_DIALOG_OPEN({
@@ -156,8 +171,8 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
 const canOpenNotificationDialog = computed(() => {
   return (
     !store.state.isAcceptTermsDialogOpen &&
-    !store.state.isCharacterOrderDialogOpen &&
-    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isOldCharacterOrderDialogOpen &&
+    !store.state.isOldDefaultStyleSelectDialogOpen &&
     !store.state.isAcceptRetrieveTelemetryDialogOpen &&
     props.isEnginesReady
   );
diff --git a/src/components/Dialog/CharacterDetailDialog.vue b/src/components/Dialog/CharacterDetailDialog.vue
new file mode 100644
index 0000000000..24cc9343a0
--- /dev/null
+++ b/src/components/Dialog/CharacterDetailDialog.vue
@@ -0,0 +1,389 @@
+<template>
+  <QDialog
+    v-model="dialogOpened"
+    maximized
+    transitionShow="none"
+    transitionHide="none"
+    transitionDuration="100"
+    class="default-style-select-dialog transparent-backdrop"
+  >
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
+          <QToolbarTitle class="text-display"
+            >設定 / キャラクター・スタイルの管理 /
+            {{ characterInfo.metas.speakerName }}</QToolbarTitle
+          >
+
+          <QSpace />
+
+          <QBtn
+            unelevated
+            label="戻る"
+            color="toolbar-button"
+            textColor="toolbar-button-display"
+            class="text-no-wrap"
+            @click="closeDialog"
+          />
+        </QToolbar>
+      </QHeader>
+
+      <QPageContainer>
+        <QPage>
+          <div class="container">
+            <img :src="characterInfo.portraitPath" class="character-portrait" />
+            <BaseScrollArea>
+              <div class="inner">
+                <div class="character-detail">
+                  <h1 class="character-name">
+                    {{ characterInfo.metas.speakerName }}
+                  </h1>
+                  <section class="section">
+                    <h2 class="headline">デフォルトスタイル</h2>
+                    <div>
+                      デフォルトスタイル：{{
+                        characterInfo.metas.styles[selectedStyleIndex].styleName
+                      }}
+                    </div>
+                    <div class="style-grid">
+                      <!-- TODO: Button in Buttonなデザインになっているのを変更する -->
+                      <button
+                        v-for="(style, styleIndex) of talkStyles"
+                        :key="styleIndex"
+                        clickable
+                        class="q-pa-none style-item"
+                        :class="[
+                          selectedStyleIndex === styleIndex &&
+                            'active-style-item',
+                          isHoverableStyleItem && 'hoverable-style-item',
+                        ]"
+                        @click="selectStyleIndex(styleIndex)"
+                      >
+                        <QRadio
+                          class="style-radio"
+                          :modelValue="selectedStyleIndex"
+                          :val="styleIndex"
+                          @update:modelValue="selectStyleIndex(styleIndex)"
+                        />
+                        <img :src="style.iconPath" class="style-icon" />
+                        <span class="style-name">{{
+                          style.styleName || DEFAULT_STYLE_NAME
+                        }}</span>
+                        <div class="voice-samples">
+                          <BaseIconButton
+                            v-for="voiceSampleIndex of [...Array(3).keys()]"
+                            :key="voiceSampleIndex"
+                            :icon="
+                              playing != undefined &&
+                              characterInfo.metas.speakerUuid ===
+                                playing.speakerUuid &&
+                              style.styleId === playing.styleId &&
+                              voiceSampleIndex === playing.index
+                                ? 'stop'
+                                : 'play_arrow'
+                            "
+                            :label="`サンプルボイス${voiceSampleIndex + 1}`"
+                            @click.stop="
+                              playing != undefined &&
+                              characterInfo.metas.speakerUuid ===
+                                playing.speakerUuid &&
+                              style.styleId === playing.styleId &&
+                              voiceSampleIndex === playing.index
+                                ? stop()
+                                : play(
+                                    characterInfo.metas.speakerUuid,
+                                    style,
+                                    voiceSampleIndex,
+                                  )
+                            "
+                          />
+                        </div>
+                      </button>
+                    </div>
+                  </section>
+                  <section class="section">
+                    <h2 class="headline">利用規約</h2>
+                    <BaseDocumentView class="character-policy">
+                      <!-- eslint-disable-next-line vue/no-v-html -->
+                      <div v-html="policyHtml"></div>
+                    </BaseDocumentView>
+                  </section>
+                </div>
+              </div>
+            </BaseScrollArea>
+          </div>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import BaseIconButton from "@/components/Base/BaseIconButton.vue";
+import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
+import { useMarkdownIt } from "@/plugins/markdownItPlugin";
+import { useStore } from "@/store";
+import { DEFAULT_STYLE_NAME } from "@/store/utility";
+import {
+  CharacterInfo,
+  DefaultStyleId,
+  SpeakerId,
+  StyleId,
+  StyleInfo,
+} from "@/type/preload";
+import { debounce } from "@/helpers/timer";
+
+const dialogOpened = defineModel<boolean>({ default: false });
+
+const props = defineProps<{
+  characterInfo: CharacterInfo;
+}>();
+
+const store = useStore();
+
+const selectedStyleIndex = ref<number>(0);
+
+const talkStyles = computed(() =>
+  props.characterInfo.metas.styles.filter(
+    (style) => style.styleType === "talk",
+  ),
+);
+
+// ダイアログが開かれたときに初期値を求める
+watch([dialogOpened], async ([newValue]) => {
+  if (!newValue) return;
+
+  const defaultStyle = store.state.defaultStyleIds.find(
+    (defaultStyleId) =>
+      defaultStyleId.speakerUuid === props.characterInfo.metas.speakerUuid,
+  );
+
+  if (defaultStyle == undefined) {
+    selectedStyleIndex.value = 0;
+    return;
+  }
+
+  selectedStyleIndex.value = props.characterInfo.metas.styles.findIndex(
+    (style) => style.styleId === defaultStyle.defaultStyleId,
+  );
+});
+
+const saveDefaultStyle = debounce((styleIndex: number) => {
+  // 既に設定が存在する場合があるので、新しい設定と既存設定を合成させる
+  const defaultStyleIds = JSON.parse(
+    JSON.stringify(store.state.defaultStyleIds),
+  ) as DefaultStyleId[];
+  void store.actions.SET_DEFAULT_STYLE_IDS([
+    ...defaultStyleIds.filter(
+      (defaultStyleId) =>
+        defaultStyleId.speakerUuid !== props.characterInfo.metas.speakerUuid,
+    ),
+    {
+      speakerUuid: props.characterInfo.metas.speakerUuid,
+      defaultStyleId: props.characterInfo.metas.styles[styleIndex].styleId,
+      engineId: props.characterInfo.metas.styles[styleIndex].engineId,
+    },
+  ]);
+}, 300);
+
+const selectStyleIndex = (styleIndex: number) => {
+  if (selectedStyleIndex.value !== styleIndex) {
+    saveDefaultStyle(styleIndex);
+  }
+
+  selectedStyleIndex.value = styleIndex;
+
+  // 音声を再生する。同じ話者/styleIndexだったら停止する。
+  const selectedStyleInfo = props.characterInfo.metas.styles[styleIndex];
+  if (
+    playing.value != undefined &&
+    playing.value.styleId === selectedStyleInfo.styleId
+  ) {
+    stop();
+  } else {
+    play(props.characterInfo.metas.speakerUuid, selectedStyleInfo, 0);
+  }
+};
+
+const isHoverableStyleItem = ref(true);
+
+const playing = ref<{ speakerUuid: string; styleId: StyleId; index: number }>();
+
+const audio = new Audio();
+audio.volume = 0.5;
+audio.onended = () => stop();
+
+const play = (
+  speakerUuid: SpeakerId,
+  { styleId, voiceSamplePaths }: StyleInfo,
+  index: number,
+) => {
+  if (audio.src !== "") stop();
+
+  audio.src = voiceSamplePaths[index];
+  void audio.play();
+  playing.value = { speakerUuid, styleId, index };
+};
+const stop = () => {
+  if (audio.src === "") return;
+
+  audio.pause();
+  audio.removeAttribute("src");
+  playing.value = undefined;
+};
+
+const md = useMarkdownIt();
+
+const policyHtml = computed(() => {
+  return md.render(props.characterInfo.metas.policy);
+});
+
+const closeDialog = () => {
+  stop();
+  dialogOpened.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.q-toolbar div:first-child {
+  min-width: 0;
+}
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、Dialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: colors.$background;
+  display: grid;
+  grid-template-columns: 33vw 1fr;
+  gap: vars.$gap-2;
+}
+
+.inner {
+  padding: vars.$padding-2;
+}
+
+.character-detail {
+  max-width: 960px;
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-2;
+}
+
+.character-portrait {
+  height: auto;
+  max-height: 80vh;
+  width: 100%;
+  margin: auto;
+  object-fit: contain;
+}
+
+.character-name {
+  @include mixin.headline-1;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-1;
+}
+
+.headline {
+  @include mixin.headline-2;
+}
+
+.style-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  column-gap: 10px;
+  row-gap: 10px;
+}
+
+.style-item {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  place-items: center;
+  grid-template-rows: auto auto;
+  border: 1px solid colors.$border;
+  background-color: colors.$surface;
+  color: colors.$display;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-1;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background-color: colors.$control-hovered;
+  }
+
+  &:active {
+    background-color: colors.$control-pressed;
+    box-shadow: 0 0 0 transparent;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  .style-radio {
+    grid-column: 1 / 2;
+    grid-row: 1 / 3;
+  }
+
+  .style-icon {
+    grid-column: 2 / 3;
+    grid-row: 1 / 3;
+    $icon-size: 64px;
+    width: $icon-size;
+    height: $icon-size;
+    border-radius: vars.$radius-1;
+  }
+
+  .style-name {
+    text-align: left;
+    font-weight: 600;
+  }
+
+  .voice-samples {
+    display: flex;
+  }
+}
+
+.character-policy {
+  line-height: 1.75;
+  padding: vars.$padding-2;
+  border-radius: vars.$radius-2;
+  border: 1px solid colors.$border;
+  background-color: colors.$surface;
+}
+
+.q-layout-container > :deep(.absolute-full) {
+  right: 0 !important;
+  > .scroll {
+    width: unset !important;
+    overflow: hidden;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+
+  .character-portrait {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/Dialog/CharacterListDialog.vue b/src/components/Dialog/CharacterListDialog.vue
new file mode 100644
index 0000000000..142699467f
--- /dev/null
+++ b/src/components/Dialog/CharacterListDialog.vue
@@ -0,0 +1,372 @@
+<template>
+  <CharacterDetailDialog
+    v-if="styleSelectDialogState.isOpen"
+    :modelValue="styleSelectDialogState.isOpen"
+    :characterInfo="styleSelectDialogState.characterInfo"
+    @update:modelValue="onCloseStyleSelectDialog"
+  />
+
+  <QDialog
+    v-model="dialogOpened"
+    maximized
+    transitionShow="jump-up"
+    transitionHide="jump-down"
+    class="transparent-backdrop"
+  >
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
+          <div class="column">
+            <QToolbarTitle class="text-display">{{
+              hasNewCharacter
+                ? "追加キャラクターの紹介"
+                : "設定 / キャラクター・スタイルの管理"
+            }}</QToolbarTitle>
+          </div>
+
+          <QSpace />
+
+          <div class="row items-center no-wrap">
+            <QBtn
+              unelevated
+              label="完了"
+              color="toolbar-button"
+              textColor="toolbar-button-display"
+              class="text-no-wrap"
+              @click="closeDialog"
+            />
+          </div>
+        </QToolbar>
+      </QHeader>
+
+      <QPageContainer>
+        <QPage>
+          <div class="container">
+            <!-- NOTE: styleTypeが変更されたときにスクロール領域を正しく再計算させる -->
+            <BaseScrollArea :key="styleType">
+              <div class="inner">
+                <div class="header">
+                  <span class="title">キャラクター一覧</span>
+                  <div class="header-controls">
+                    サンプル音声
+                    <BaseToggleGroup v-model="styleType" type="single">
+                      <BaseToggleGroupItem label="トーク" value="talk" />
+                      <BaseToggleGroupItem label="ソング" value="singerLike" />
+                    </BaseToggleGroup>
+                  </div>
+                </div>
+                <div class="character-items-container">
+                  <template
+                    v-for="characterInfo of filterCharacterInfosByStyleType(
+                      characterInfos,
+                      styleType,
+                    )"
+                    :key="characterInfo.metas.speakerUuid"
+                  >
+                    <CharacterTryListenCard
+                      :characterInfo
+                      :isNewCharacter="
+                        newCharacters.includes(characterInfo.metas.speakerUuid)
+                      "
+                      :playing
+                      :togglePlayOrStop
+                      @selectCharacter="selectCharacter"
+                    />
+                  </template>
+                </div>
+              </div>
+            </BaseScrollArea>
+            <div class="character-order-container">
+              <div class="character-order-headline">キャラクター並び替え</div>
+              <BaseScrollArea>
+                <Draggable
+                  v-model="characterOrder"
+                  class="character-order"
+                  :itemKey="keyOfCharacterOrderItem"
+                  @end="saveCharacterOrder(characterOrder)"
+                >
+                  <template #item="{ element }">
+                    <div class="character-order-item">
+                      {{ element.metas.speakerName }}
+                    </div>
+                  </template>
+                </Draggable>
+              </BaseScrollArea>
+            </div>
+          </div>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import Draggable from "vuedraggable";
+import CharacterDetailDialog from "./CharacterDetailDialog.vue";
+import CharacterTryListenCard from "./CharacterTryListenCard.vue";
+import BaseToggleGroup from "@/components/Base/BaseToggleGroup.vue";
+import BaseToggleGroupItem from "@/components/Base/BaseToggleGroupItem.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
+import { useStore } from "@/store";
+import { CharacterInfo, SpeakerId, StyleId, StyleInfo } from "@/type/preload";
+import { filterCharacterInfosByStyleType } from "@/store/utility";
+import { debounce } from "@/helpers/timer";
+
+const dialogOpened = defineModel<boolean>("dialogOpened", { default: false });
+const props = defineProps<{
+  characterInfos: CharacterInfo[];
+}>();
+
+const store = useStore();
+
+const characterInfosMap = computed(() => {
+  const map: { [key: SpeakerId]: CharacterInfo } = {};
+  props.characterInfos.forEach((characterInfo) => {
+    map[characterInfo.metas.speakerUuid] = characterInfo;
+  });
+  return map;
+});
+
+// 新しいキャラクター
+const newCharacters = ref<SpeakerId[]>([]);
+const hasNewCharacter = computed(() => newCharacters.value.length > 0);
+
+const styleType = ref<"talk" | "singerLike">("talk");
+
+// サンプルボイス一覧のキャラクター順番
+const sampleCharacterOrder = ref<SpeakerId[]>([]);
+
+// 選択中のキャラクター
+const styleSelectDialogState = ref<
+  { isOpen: true; characterInfo: CharacterInfo } | { isOpen: false }
+>({
+  isOpen: false,
+});
+const selectCharacter = (speakerUuid: SpeakerId) => {
+  const characterInfo = props.characterInfos.find(
+    (characterInfo) => characterInfo.metas.speakerUuid == speakerUuid,
+  );
+  if (characterInfo == undefined)
+    throw new Error(`キャラクターが見つかりません: ${speakerUuid}`);
+  styleSelectDialogState.value = { isOpen: true, characterInfo };
+};
+
+const onCloseStyleSelectDialog = () => {
+  styleSelectDialogState.value = { isOpen: false };
+};
+
+// キャラクター表示順序
+const characterOrder = ref<CharacterInfo[]>([]);
+
+// ダイアログが開かれたときに初期値を求める
+watch(dialogOpened, async (newValue, oldValue) => {
+  if (!oldValue && newValue) {
+    // 新しいキャラクター
+    newCharacters.value = await store.actions.GET_NEW_CHARACTERS();
+
+    // サンプルの順番、新しいキャラクターは上に
+    sampleCharacterOrder.value = [
+      ...newCharacters.value,
+      ...props.characterInfos
+        .filter((info) => !newCharacters.value.includes(info.metas.speakerUuid))
+        .map((info) => info.metas.speakerUuid),
+    ];
+
+    // 保存済みのキャラクターリストを取得
+    // FIXME: 不明なキャラを無視しているので、不明キャラの順番が保存時にリセットされてしまう
+    characterOrder.value = store.state.userCharacterOrder
+      .map((speakerUuid) => characterInfosMap.value[speakerUuid])
+      .filter((info) => info != undefined);
+
+    // 含まれていないキャラクターを足す
+    const notIncludesCharacterInfos = props.characterInfos.filter(
+      (characterInfo) =>
+        !characterOrder.value.find(
+          (characterInfoInList) =>
+            characterInfoInList.metas.speakerUuid ===
+            characterInfo.metas.speakerUuid,
+        ),
+    );
+    characterOrder.value = [
+      ...characterOrder.value,
+      ...notIncludesCharacterInfos,
+    ];
+
+    // 新しいキャラクターがいる場合は認識済みにする
+    if (hasNewCharacter.value) {
+      acknowledgeNewCharacters();
+    }
+  }
+});
+
+// draggable用
+const keyOfCharacterOrderItem = (item: CharacterInfo) => item.metas.speakerUuid;
+
+// 音声再生
+const playing = ref<{
+  speakerUuid: SpeakerId;
+  styleId: StyleId;
+  index: number;
+}>();
+
+const audio = new Audio();
+audio.volume = 0.5;
+audio.onended = () => stop();
+
+const play = (
+  speakerUuid: SpeakerId,
+  { styleId, voiceSamplePaths }: StyleInfo,
+  index: number,
+) => {
+  if (audio.src !== "") stop();
+
+  audio.src = voiceSamplePaths[index];
+  void audio.play();
+  playing.value = { speakerUuid, styleId, index };
+};
+const stop = () => {
+  if (audio.src === "") return;
+
+  audio.pause();
+  audio.removeAttribute("src");
+  playing.value = undefined;
+};
+
+// 再生していたら停止、再生していなかったら再生
+const togglePlayOrStop = (
+  speakerUuid: SpeakerId,
+  styleInfo: StyleInfo,
+  index: number,
+) => {
+  if (
+    playing.value == undefined ||
+    speakerUuid !== playing.value.speakerUuid ||
+    styleInfo.styleId !== playing.value.styleId ||
+    index !== playing.value.index
+  ) {
+    play(speakerUuid, styleInfo, index);
+  } else {
+    stop();
+  }
+};
+
+const saveCharacterOrder = debounce((characterInfos: CharacterInfo[]) => {
+  void store.actions.SET_USER_CHARACTER_ORDER(
+    characterInfos.map((info) => info.metas.speakerUuid),
+  );
+}, 300);
+
+function acknowledgeNewCharacters() {
+  // NOTE: 新しいキャラクターが存在するかはUSER_CHARACTER_ORDERで判定しているので、USER_CHARACTER_ORDERを更新する
+  // ref: https://github.com/VOICEVOX/voicevox/pull/2505#discussion_r2055218127
+  // FIXME: 新しいキャラクターをチェックしたかの判定をUSER_CHARACTER_ORDERで行わないようにする
+  saveCharacterOrder(characterOrder.value);
+}
+
+const closeDialog = () => {
+  stop();
+  dialogOpened.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.q-toolbar div:first-child {
+  min-width: 0;
+}
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、Dialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  background-color: colors.$background;
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.inner {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: vars.$gap-1;
+  padding: vars.$padding-2;
+}
+
+.character-items-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: vars.$gap-2;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: vars.$gap-1;
+  width: 100%;
+}
+
+.title {
+  @include mixin.headline-1;
+}
+
+.header-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: vars.$gap-1;
+}
+
+.character-order-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba($color: #000000, $alpha: 0.4);
+}
+
+.character-order-container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+  background-color: colors.$background;
+  border-left: 1px solid colors.$border;
+}
+
+.character-order-headline {
+  @include mixin.headline-3;
+  padding: vars.$padding-2;
+}
+
+.character-order {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  padding-top: 0;
+  gap: vars.$gap-1;
+
+  .character-order-item {
+    border-radius: vars.$radius-1;
+    padding: vars.$padding-1;
+    border: 1px solid colors.$border;
+    background-color: colors.$surface;
+    text-align: center;
+    cursor: grab;
+
+    &[draggable="true"] {
+      border: 2px solid colors.$primary;
+    }
+  }
+}
+
+.q-layout-container > :deep(.absolute-full) {
+  right: 0 !important;
+  > .scroll {
+    width: unset !important;
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/src/components/Dialog/CharacterOrderDialog.vue b/src/components/Dialog/CharacterOrderDialog.vue
deleted file mode 100644
index 3ece85a70b..0000000000
--- a/src/components/Dialog/CharacterOrderDialog.vue
+++ /dev/null
@@ -1,355 +0,0 @@
-<template>
-  <QDialog
-    v-model="dialogOpened"
-    maximized
-    transitionShow="jump-up"
-    transitionHide="jump-down"
-    class="transparent-backdrop"
-  >
-    <QLayout container view="hHh Lpr lff" class="bg-background">
-      <QHeader class="q-py-sm">
-        <QToolbar>
-          <div class="column">
-            <QToolbarTitle class="text-display">{{
-              hasNewCharacter
-                ? "追加キャラクターの紹介"
-                : "設定 / キャラクター並び替え・試聴"
-            }}</QToolbarTitle>
-          </div>
-
-          <QSpace />
-
-          <div class="row items-center no-wrap">
-            <QBtn
-              unelevated
-              label="完了"
-              color="toolbar-button"
-              textColor="toolbar-button-display"
-              class="text-no-wrap"
-              @click="closeDialog"
-            />
-          </div>
-        </QToolbar>
-      </QHeader>
-
-      <QDrawer
-        bordered
-        showIfAbove
-        :modelValue="true"
-        :width="$q.screen.width / 3 > 300 ? 300 : $q.screen.width / 3"
-        :breakpoint="0"
-      >
-        <div class="character-portrait-wrapper">
-          <img :src="portrait" class="character-portrait" />
-        </div>
-      </QDrawer>
-
-      <QPageContainer>
-        <QPage class="main">
-          <div class="character-items-container">
-            <span class="text-h6 q-py-md">サンプルボイス一覧</span>
-            <div>
-              <CharacterTryListenCard
-                v-for="characterInfo of characterInfos"
-                :key="characterInfo.metas.speakerUuid"
-                :characterInfo
-                :isSelected="
-                  selectedCharacter === characterInfo.metas.speakerUuid
-                "
-                :isNewCharacter="
-                  newCharacters.includes(characterInfo.metas.speakerUuid)
-                "
-                :playing
-                :togglePlayOrStop
-                @update:portrait="updatePortrait"
-                @update:selectCharacter="selectCharacter"
-              />
-            </div>
-          </div>
-
-          <div class="character-order-container">
-            <div class="text-subtitle1 text-weight-bold text-center q-py-md">
-              キャラクター並び替え
-            </div>
-            <Draggable
-              v-model="characterOrder"
-              class="character-order q-px-sm"
-              :itemKey="keyOfCharacterOrderItem"
-              @start="characterOrderDragging = true"
-              @end="characterOrderDragging = false"
-            >
-              <template #item="{ element }">
-                <div
-                  class="character-order-item q-py-sm"
-                  :class="[
-                    selectedCharacter === element.metas.speakerUuid &&
-                      'selected-character-order-item',
-                  ]"
-                  @mouseenter="
-                    // ドラッグ中はバグるので無視
-                    characterOrderDragging ||
-                    selectCharacterWithChangePortrait(element.metas.speakerUuid)
-                  "
-                >
-                  {{ element.metas.speakerName }}
-                </div>
-              </template>
-            </Draggable>
-          </div>
-        </QPage>
-      </QPageContainer>
-    </QLayout>
-  </QDialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import Draggable from "vuedraggable";
-import { useQuasar } from "quasar";
-import CharacterTryListenCard from "./CharacterTryListenCard.vue";
-import { useStore } from "@/store";
-import { CharacterInfo, SpeakerId, StyleId, StyleInfo } from "@/type/preload";
-
-const dialogOpened = defineModel<boolean>("dialogOpened", { default: false });
-const props = defineProps<{
-  characterInfos: CharacterInfo[];
-}>();
-
-const $q = useQuasar();
-
-const store = useStore();
-
-const characterInfosMap = computed(() => {
-  const map: { [key: SpeakerId]: CharacterInfo } = {};
-  props.characterInfos.forEach((characterInfo) => {
-    map[characterInfo.metas.speakerUuid] = characterInfo;
-  });
-  return map;
-});
-
-// 新しいキャラクター
-const newCharacters = ref<SpeakerId[]>([]);
-const hasNewCharacter = computed(() => newCharacters.value.length > 0);
-
-// サンプルボイス一覧のキャラクター順番
-const sampleCharacterOrder = ref<SpeakerId[]>([]);
-
-// 選択中のキャラクター
-const selectedCharacter = ref(props.characterInfos[0].metas.speakerUuid);
-const selectCharacter = (speakerUuid: SpeakerId) => {
-  selectedCharacter.value = speakerUuid;
-};
-const selectCharacterWithChangePortrait = (speakerUuid: SpeakerId) => {
-  selectCharacter(speakerUuid);
-  portrait.value = characterInfosMap.value[speakerUuid].portraitPath;
-};
-
-// キャラクター表示順序
-const characterOrder = ref<CharacterInfo[]>([]);
-
-// ダイアログが開かれたときに初期値を求める
-watch(dialogOpened, async (newValue, oldValue) => {
-  if (!oldValue && newValue) {
-    // 新しいキャラクター
-    newCharacters.value = await store.actions.GET_NEW_CHARACTERS();
-
-    // サンプルの順番、新しいキャラクターは上に
-    sampleCharacterOrder.value = [
-      ...newCharacters.value,
-      ...props.characterInfos
-        .filter((info) => !newCharacters.value.includes(info.metas.speakerUuid))
-        .map((info) => info.metas.speakerUuid),
-    ];
-
-    selectedCharacter.value = sampleCharacterOrder.value[0];
-
-    // 保存済みのキャラクターリストを取得
-    // FIXME: 不明なキャラを無視しているので、不明キャラの順番が保存時にリセットされてしまう
-    characterOrder.value = store.state.userCharacterOrder
-      .map((speakerUuid) => characterInfosMap.value[speakerUuid])
-      .filter((info) => info != undefined);
-
-    // 含まれていないキャラクターを足す
-    const notIncludesCharacterInfos = props.characterInfos.filter(
-      (characterInfo) =>
-        !characterOrder.value.find(
-          (characterInfoInList) =>
-            characterInfoInList.metas.speakerUuid ===
-            characterInfo.metas.speakerUuid,
-        ),
-    );
-    characterOrder.value = [
-      ...characterOrder.value,
-      ...notIncludesCharacterInfos,
-    ];
-  }
-});
-
-// draggable用
-const keyOfCharacterOrderItem = (item: CharacterInfo) => item.metas.speakerUuid;
-
-// 音声再生
-const playing = ref<{
-  speakerUuid: SpeakerId;
-  styleId: StyleId;
-  index: number;
-}>();
-
-const audio = new Audio();
-audio.volume = 0.5;
-audio.onended = () => stop();
-
-const play = (
-  speakerUuid: SpeakerId,
-  { styleId, voiceSamplePaths }: StyleInfo,
-  index: number,
-) => {
-  if (audio.src !== "") stop();
-
-  audio.src = voiceSamplePaths[index];
-  void audio.play();
-  playing.value = { speakerUuid, styleId, index };
-};
-const stop = () => {
-  if (audio.src === "") return;
-
-  audio.pause();
-  audio.removeAttribute("src");
-  playing.value = undefined;
-};
-
-// 再生していたら停止、再生していなかったら再生
-const togglePlayOrStop = (
-  speakerUuid: SpeakerId,
-  styleInfo: StyleInfo,
-  index: number,
-) => {
-  if (
-    playing.value == undefined ||
-    speakerUuid !== playing.value.speakerUuid ||
-    styleInfo.styleId !== playing.value.styleId ||
-    index !== playing.value.index
-  ) {
-    play(speakerUuid, styleInfo, index);
-  } else {
-    stop();
-  }
-};
-
-// ドラッグ中かどうか
-const characterOrderDragging = ref(false);
-
-const closeDialog = () => {
-  void store.actions.SET_USER_CHARACTER_ORDER(
-    characterOrder.value.map((info) => info.metas.speakerUuid),
-  );
-  stop();
-  dialogOpened.value = false;
-};
-
-const portrait = ref<string | undefined>(
-  characterInfosMap.value[selectedCharacter.value].portraitPath,
-);
-const updatePortrait = (portraitPath: string) => {
-  portrait.value = portraitPath;
-};
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors" as colors;
-
-.q-toolbar div:first-child {
-  min-width: 0;
-}
-.character-portrait-wrapper {
-  display: grid;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  .character-portrait {
-    margin: auto;
-  }
-}
-
-.main {
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  );
-
-  display: flex;
-  flex-direction: row;
-}
-
-.character-items-container {
-  height: 100%;
-  padding: 5px 16px;
-
-  flex-grow: 1;
-
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-
-  > div {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, vars.$character-item-size);
-    grid-auto-rows: vars.$character-item-size;
-    column-gap: 10px;
-    row-gap: 10px;
-    align-content: center;
-    justify-content: center;
-  }
-}
-
-.character-order-container {
-  width: 180px;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-
-  .character-order {
-    flex: 1;
-
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    height: 100%;
-
-    overflow-y: auto;
-
-    .character-order-item {
-      border-radius: 10px;
-      border: 2px solid rgba(colors.$display-rgb, 0.15);
-      text-align: center;
-      cursor: grab;
-      &.selected-character-order-item {
-        border: 2px solid colors.$primary;
-      }
-    }
-  }
-}
-
-.q-layout-container > :deep(.absolute-full) {
-  right: 0 !important;
-  > .scroll {
-    width: unset !important;
-    overflow: hidden;
-  }
-}
-
-@media screen and (max-width: 880px) {
-  .q-drawer-container {
-    display: none;
-  }
-  .q-page-container {
-    padding-left: unset !important;
-    .q-page-sticky {
-      left: 0 !important;
-    }
-  }
-}
-</style>
diff --git a/src/components/Dialog/CharacterTryListenCard.vue b/src/components/Dialog/CharacterTryListenCard.vue
index d8838da856..0b228563cd 100644
--- a/src/components/Dialog/CharacterTryListenCard.vue
+++ b/src/components/Dialog/CharacterTryListenCard.vue
@@ -1,105 +1,59 @@
 <template>
-  <QItem
-    v-ripple="isHoverableItem"
-    clickable
-    class="q-pa-none character-item"
-    :class="[
-      isHoverableItem && 'hoverable-character-item',
-      isSelected && 'selected-character-item',
-    ]"
-    @click="
-      selectCharacter(speakerUuid);
-      togglePlayOrStop(speakerUuid, selectedStyle, 0);
-    "
-  >
-    <div class="character-item-inner">
+  <div class="character-card">
+    <button
+      class="character-detail-button"
+      @click="$emit('selectCharacter', speakerUuid)"
+    >
       <img
-        :src="characterInfo.metas.styles[selectedStyleIndex || 0].iconPath"
+        :src="selectedStyle.iconPath"
         :alt="characterInfo.metas.speakerName"
         class="style-icon"
       />
-      <span class="text-subtitle1 q-ma-sm">{{
-        characterInfo.metas.speakerName
-      }}</span>
-      <div
+      <div class="speaker-name">{{ characterInfo.metas.speakerName }}</div>
+    </button>
+    <hr class="line" />
+    <div class="style-select-container">
+      <BaseIconButton
         v-if="characterInfo.metas.styles.length > 1"
-        class="style-select-container"
-      >
-        <QBtn
-          flat
-          dense
-          icon="chevron_left"
-          textColor="display"
-          class="style-select-button"
-          aria-label="前のスタイル"
-          @mouseenter="isHoverableItem = false"
-          @mouseleave="isHoverableItem = true"
-          @click.stop="
-            selectCharacter(speakerUuid);
-            rollStyleIndex(speakerUuid, -1);
-          "
-        />
-        <span aria-live="polite">{{
-          selectedStyle.styleName || DEFAULT_STYLE_NAME
-        }}</span>
-        <QBtn
-          flat
-          dense
-          icon="chevron_right"
-          textColor="display"
-          class="style-select-button"
-          aria-label="次のスタイル"
-          @mouseenter="isHoverableItem = false"
-          @mouseleave="isHoverableItem = true"
-          @click.stop="
-            selectCharacter(speakerUuid);
-            rollStyleIndex(speakerUuid, 1);
-          "
-        />
-      </div>
-      <div class="voice-samples">
-        <QBtn
-          v-for="voiceSampleIndex of [...Array(3).keys()]"
-          :key="voiceSampleIndex"
-          round
-          outline
+        icon="chevron_left"
+        label="前のスタイル"
+        @click.stop="rollStyleIndex(speakerUuid, -1)"
+      />
+      <div v-else></div>
+      <BaseTooltip label="サンプルボイスを再生">
+        <BaseButton
           :icon="
             playing != undefined &&
             speakerUuid === playing.speakerUuid &&
-            selectedStyle.styleId === playing.styleId &&
-            voiceSampleIndex === playing.index
+            selectedStyle.styleId === playing.styleId
               ? 'stop'
               : 'play_arrow'
           "
-          color="primary"
-          class="voice-sample-btn"
-          :aria-label="`サンプルボイス${voiceSampleIndex + 1}`"
-          @mouseenter="isHoverableItem = false"
-          @mouseleave="isHoverableItem = true"
-          @click.stop="
-            selectCharacter(speakerUuid);
-            togglePlayOrStop(speakerUuid, selectedStyle, voiceSampleIndex);
-          "
+          :label="selectedStyle.styleName || DEFAULT_STYLE_NAME"
+          @click.stop="togglePlayOrStop(speakerUuid, selectedStyle, 0)"
         />
-      </div>
-      <div
-        v-if="isNewCharacter"
-        class="new-character-item q-pa-sm text-weight-bold"
-      >
-        NEW!
-      </div>
+      </BaseTooltip>
+      <BaseIconButton
+        v-if="characterInfo.metas.styles.length > 1"
+        icon="chevron_right"
+        label="次のスタイル"
+        @click.stop="rollStyleIndex(speakerUuid, 1)"
+      />
     </div>
-  </QItem>
+    <div v-if="isNewCharacter" class="new-character-item">NEW!</div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import BaseIconButton from "@/components/Base/BaseIconButton.vue";
+import BaseButton from "@/components/Base/BaseButton.vue";
+import BaseTooltip from "@/components/Base/BaseTooltip.vue";
 import { CharacterInfo, SpeakerId, StyleId, StyleInfo } from "@/type/preload";
 import { DEFAULT_STYLE_NAME } from "@/store/utility";
 
 const props = defineProps<{
   characterInfo: CharacterInfo;
-  isSelected: boolean;
   isNewCharacter?: boolean;
   playing?: {
     speakerUuid: SpeakerId;
@@ -113,29 +67,10 @@ const props = defineProps<{
   ) => void;
 }>();
 
-const emit = defineEmits<{
-  (event: "update:selectCharacter", speakerUuid: SpeakerId): void;
-  (event: "update:portrait", portrait: string): void;
+defineEmits<{
+  (event: "selectCharacter", speakerUuid: SpeakerId): void;
 }>();
 
-// キャラクター枠のホバー状態を表示するかどうか
-// 再生ボタンなどにカーソルがある場合はキャラクター枠のホバーUIを表示しないようにするため
-const isHoverableItem = ref(true);
-
-const selectCharacter = (speakerUuid: SpeakerId) => {
-  emit("update:selectCharacter", speakerUuid);
-  updatePortrait();
-};
-
-const updatePortrait = () => {
-  let portraitPath = props.characterInfo.portraitPath;
-  const stylePortraitPath = selectedStyle.value.portraitPath;
-  if (stylePortraitPath) {
-    portraitPath = stylePortraitPath;
-  }
-  emit("update:portrait", portraitPath);
-};
-
 const speakerUuid = computed(() => props.characterInfo.metas.speakerUuid);
 
 // 選択中のスタイル
@@ -155,59 +90,90 @@ const rollStyleIndex = (speakerUuid: SpeakerId, diff: number) => {
 
   // 音声を再生する。同じstyleIndexだったら停止する。
   props.togglePlayOrStop(speakerUuid, selectedStyle.value, 0);
-  updatePortrait();
 };
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors" as colors;
-
-.character-item {
-  box-shadow: 0 0 0 1px rgba(colors.$primary-rgb, 0.5);
-  border-radius: 10px;
-  overflow: hidden;
-  &.selected-character-item {
-    box-shadow: 0 0 0 2px colors.$primary;
-  }
-  &:hover :deep(.q-focus-helper) {
-    opacity: 0 !important;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.character-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: vars.$gap-1;
+  padding: vars.$padding-1;
+  border: 1px solid colors.$border;
+  background-color: colors.$surface;
+  border-radius: vars.$radius-2;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.character-detail-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: vars.$gap-1;
+  cursor: pointer;
+  width: 100%;
+  border-radius: vars.$radius-1;
+  border: none;
+  background-color: transparent;
+
+  &:hover {
+    background-color: colors.$clear-hovered;
   }
-  &.hoverable-character-item:hover :deep(.q-focus-helper) {
-    opacity: 0.15 !important;
+
+  &:active {
+    background-color: colors.$control-pressed;
+    box-shadow: 0 0 0 transparent;
   }
-  .character-item-inner {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    .style-icon {
-      $icon-size: calc(vars.$character-item-size / 2);
-      width: $icon-size;
-      height: $icon-size;
-      border-radius: 5px;
-    }
-    .style-select-container {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      margin-top: -1rem;
-    }
-    .voice-samples {
-      display: flex;
-      column-gap: 5px;
-      align-items: center;
-      justify-content: center;
-    }
-    .new-character-item {
-      color: colors.$primary;
-      position: absolute;
-      left: 0px;
-      top: 0px;
-    }
+
+  &:focus-visible {
+    @include mixin.on-focus;
   }
 }
+
+.style-icon {
+  height: 128px;
+  aspect-ratio: 1 / 1;
+  border-radius: vars.$radius-1;
+}
+
+.speaker-name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  text-align: center;
+  line-height: 1;
+}
+
+.line {
+  height: 1px;
+  width: 100%;
+  background-color: colors.$border;
+  border: none;
+  margin: 0;
+}
+
+.style-select-container {
+  display: grid;
+  grid-template-columns: vars.$size-control 1fr vars.$size-control;
+  align-items: center;
+  width: 100%;
+  margin: auto;
+}
+
+.new-character-item {
+  position: absolute;
+  left: vars.$padding-1;
+  top: vars.$padding-1;
+  border-radius: vars.$radius-1;
+  background-color: colors.$primary;
+  color: colors.$display-oncolor;
+  padding: vars.$padding-1;
+  line-height: 1;
+  font-weight: bold;
+}
 </style>
diff --git a/src/components/Dialog/DefaultStyleListDialog.vue b/src/components/Dialog/DefaultStyleListDialog.vue
deleted file mode 100644
index 387ad09bcc..0000000000
--- a/src/components/Dialog/DefaultStyleListDialog.vue
+++ /dev/null
@@ -1,295 +0,0 @@
-<template>
-  <DefaultStyleSelectDialog
-    v-if="
-      selectedCharacterInfo &&
-      selectedStyleIndexes[selectedCharacterInfo.metas.speakerUuid] !==
-        undefined
-    "
-    v-model:dialogOpened="showStyleSelectDialog"
-    v-model:selectedStyleIndex="
-      selectedStyleIndexes[selectedCharacterInfo.metas.speakerUuid]
-    "
-    :characterInfo="selectedCharacterInfo"
-  />
-  <QDialog
-    v-model="dialogOpened"
-    maximized
-    transitionShow="jump-up"
-    transitionHide="jump-down"
-    class="transparent-backdrop"
-  >
-    <QLayout container view="hHh Lpr lff" class="bg-background">
-      <QHeader class="q-py-sm">
-        <QToolbar>
-          <div class="column">
-            <QToolbarTitle class="text-display"
-              >設定 / デフォルトスタイル・試聴</QToolbarTitle
-            >
-          </div>
-
-          <QSpace />
-
-          <div class="row items-center no-wrap">
-            <QBtn
-              unelevated
-              label="完了"
-              color="toolbar-button"
-              textColor="toolbar-button-display"
-              class="text-no-wrap"
-              @click="closeDialog"
-            />
-          </div>
-        </QToolbar>
-      </QHeader>
-
-      <QPageContainer>
-        <QPage class="main">
-          <div class="character-items-container">
-            <div>
-              <QItem
-                v-for="speaker of speakerWithMultipleStyles"
-                :key="speaker.metas.speakerUuid"
-                v-ripple="isHoverableItem"
-                clickable
-                class="q-pa-none character-item"
-                :class="[isHoverableItem && 'hoverable-character-item']"
-                @click="openStyleSelectDialog(speaker)"
-              >
-                <div class="character-item-inner">
-                  <img
-                    :src="
-                      speaker.metas.styles[
-                        selectedStyleIndexes[speaker.metas.speakerUuid]
-                      ].iconPath
-                    "
-                    class="style-icon"
-                  />
-                  <span
-                    class="text-subtitle1 q-mt-sm q-mb-xs text-weight-bold"
-                    >{{
-                      characterInfosMap[speaker.metas.speakerUuid].metas
-                        .speakerName
-                    }}</span
-                  >
-                  <div
-                    v-if="
-                      characterInfosMap[speaker.metas.speakerUuid].metas.styles
-                        .length > 1
-                    "
-                    class="style-select-container"
-                  >
-                    <span>{{
-                      selectedStyles[speaker.metas.speakerUuid]
-                        ? selectedStyles[speaker.metas.speakerUuid].styleName
-                        : DEFAULT_STYLE_NAME
-                    }}</span
-                    ><span class="text-caption"
-                      >全{{
-                        characterInfosMap[speaker.metas.speakerUuid].metas
-                          .styles.length
-                      }}スタイル</span
-                    >
-                  </div>
-                </div>
-              </QItem>
-            </div>
-          </div>
-        </QPage>
-      </QPageContainer>
-    </QLayout>
-  </QDialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import DefaultStyleSelectDialog from "./DefaultStyleSelectDialog.vue";
-import { useStore } from "@/store";
-import { DEFAULT_STYLE_NAME } from "@/store/utility";
-import { CharacterInfo, SpeakerId, StyleInfo } from "@/type/preload";
-
-const dialogOpened = defineModel<boolean>("dialogOpened", { default: false });
-
-const props = defineProps<{
-  characterInfos: CharacterInfo[];
-}>();
-
-const store = useStore();
-
-// 選択中のキャラクター
-const selectedCharacter = ref(props.characterInfos[0].metas.speakerUuid);
-
-const showStyleSelectDialog = ref<boolean>(false);
-const selectedCharacterInfo = computed(() => {
-  return props.characterInfos.find(
-    (characterInfo) =>
-      characterInfo.metas.speakerUuid === selectedCharacter.value,
-  );
-});
-
-const characterInfosMap = computed(() => {
-  const map: { [key: SpeakerId]: CharacterInfo } = {};
-  props.characterInfos.forEach((characterInfo) => {
-    map[characterInfo.metas.speakerUuid] = characterInfo;
-  });
-  return map;
-});
-
-// サンプルボイス一覧のキャラクター順番
-const speakerWithMultipleStyles = ref<CharacterInfo[]>([]);
-
-// 選択中のスタイル
-const selectedStyleIndexes = ref<Record<SpeakerId, number>>({});
-const selectedStyles = computed(() => {
-  const map: { [key: string]: StyleInfo } = {};
-  props.characterInfos.forEach((characterInfo) => {
-    const selectedStyleIndex: number | undefined =
-      selectedStyleIndexes.value[characterInfo.metas.speakerUuid];
-    map[characterInfo.metas.speakerUuid] =
-      characterInfo.metas.styles[selectedStyleIndex ?? 0];
-  });
-  return map;
-});
-
-// ダイアログが開かれたときに初期値を求める
-watch([dialogOpened], async ([newValue]) => {
-  if (newValue) {
-    speakerWithMultipleStyles.value = store.state.userCharacterOrder
-      .map((speakerUuid) => characterInfosMap.value[speakerUuid])
-      .filter((characterInfo) => characterInfo != undefined)
-      .filter((characterInfo) => characterInfo.metas.styles.length > 1);
-    // FIXME: エンジン未起動状態でデフォルトスタイル選択ダイアログを開くと
-    // 未起動エンジンのキャラのデフォルトスタイルが消えてしまう
-    selectedStyleIndexes.value = Object.fromEntries(
-      [
-        ...store.state.userCharacterOrder.map(
-          (speakerUuid) => [speakerUuid, 0] as const,
-        ),
-        ...store.state.defaultStyleIds.map(
-          (defaultStyle) =>
-            [
-              defaultStyle.speakerUuid,
-              characterInfosMap.value[
-                defaultStyle.speakerUuid
-              ]?.metas.styles.findIndex(
-                (style) => style.styleId === defaultStyle.defaultStyleId,
-              ),
-            ] as const,
-        ),
-      ].filter(([speakerUuid]) => speakerUuid in characterInfosMap.value),
-    );
-  }
-});
-
-// キャラクター枠のホバー状態を表示するかどうか
-// 再生ボタンなどにカーソルがある場合はキャラクター枠のホバーUIを表示しないようにするため
-const isHoverableItem = ref(true);
-
-const closeDialog = () => {
-  void store.actions.SET_DEFAULT_STYLE_IDS(
-    Object.entries(selectedStyleIndexes.value).map(
-      ([speakerUuidStr, styleIndex]) => {
-        const speakerUuid = SpeakerId(speakerUuidStr);
-        return {
-          speakerUuid,
-          defaultStyleId:
-            characterInfosMap.value[speakerUuid].metas.styles[styleIndex]
-              .styleId,
-          engineId:
-            characterInfosMap.value[speakerUuid].metas.styles[styleIndex]
-              .engineId,
-        };
-      },
-    ),
-  );
-  stop();
-  dialogOpened.value = false;
-};
-const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
-  stop();
-  selectedCharacter.value = characterInfo.metas.speakerUuid;
-  showStyleSelectDialog.value = true;
-};
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors" as colors;
-
-.q-toolbar div:first-child {
-  min-width: 0;
-}
-
-.main {
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  );
-
-  display: flex;
-  flex-direction: row;
-}
-
-.character-items-container {
-  height: 100%;
-  padding: 5px 16px;
-
-  flex-grow: 1;
-
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-
-  > div {
-    $character-item-size: 200px;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, $character-item-size);
-    grid-auto-rows: 200px;
-    column-gap: 10px;
-    row-gap: 10px;
-    align-content: center;
-    justify-content: center;
-    .character-item {
-      box-shadow: 0 0 0 1px rgba(colors.$primary-rgb, 0.5);
-      border-radius: 10px;
-      overflow: hidden;
-      &.selected-character-item {
-        box-shadow: 0 0 0 2px colors.$primary;
-      }
-      &:hover :deep(.q-focus-helper) {
-        opacity: 0 !important;
-      }
-      &.hoverable-character-item:hover :deep(.q-focus-helper) {
-        opacity: 0.15 !important;
-      }
-      .character-item-inner {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        .style-icon {
-          $icon-size: calc(vars.$character-item-size / 2);
-          width: $icon-size;
-          height: $icon-size;
-          border-radius: 5px;
-        }
-        .style-select-container {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
-  }
-}
-
-.q-layout-container > :deep(.absolute-full) {
-  right: 0 !important;
-  > .scroll {
-    width: unset !important;
-    overflow: hidden;
-  }
-}
-</style>
diff --git a/src/components/Dialog/OldDefaultStyleListDialog.vue b/src/components/Dialog/OldDefaultStyleListDialog.vue
index 387ad09bcc..d7fca57661 100644
--- a/src/components/Dialog/OldDefaultStyleListDialog.vue
+++ b/src/components/Dialog/OldDefaultStyleListDialog.vue
@@ -102,7 +102,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import DefaultStyleSelectDialog from "./DefaultStyleSelectDialog.vue";
+import DefaultStyleSelectDialog from "./OldDefaultStyleSelectDialog.vue";
 import { useStore } from "@/store";
 import { DEFAULT_STYLE_NAME } from "@/store/utility";
 import { CharacterInfo, SpeakerId, StyleInfo } from "@/type/preload";
diff --git a/src/components/Dialog/DefaultStyleSelectDialog.vue b/src/components/Dialog/OldDefaultStyleSelectDialog.vue
similarity index 100%
rename from src/components/Dialog/DefaultStyleSelectDialog.vue
rename to src/components/Dialog/OldDefaultStyleSelectDialog.vue
diff --git a/src/components/Menu/MenuBar/useCommonMenuBarData.ts b/src/components/Menu/MenuBar/useCommonMenuBarData.ts
index e4a47015e3..fe051e8691 100644
--- a/src/components/Menu/MenuBar/useCommonMenuBarData.ts
+++ b/src/components/Menu/MenuBar/useCommonMenuBarData.ts
@@ -4,6 +4,7 @@ import { MaybeComputedMenuBarContent } from "./menuBarData";
 import { ensureNotNullish } from "@/helpers/errorHelper";
 import { useHotkeyManager, HotkeyAction } from "@/plugins/hotkeyPlugin";
 import { Store } from "@/store";
+import { isProduction } from "@/helpers/platform";
 
 export const useCommonMenuBarData = (store: Store) => {
   const uiLocked = computed(() => store.getters.UI_LOCKED);
@@ -314,12 +315,26 @@ export const useCommonMenuBarData = (store: Store) => {
           },
           disableWhenUiLocked: false,
         },
+        ...(!isProduction
+          ? [
+              {
+                type: "button",
+                label: "キャラクター・スタイルの管理",
+                onClick() {
+                  void store.actions.SET_DIALOG_OPEN({
+                    isCharacterListDialogOpen: true,
+                  });
+                },
+                disableWhenUiLocked: true,
+              } as const,
+            ]
+          : []),
         {
           type: "button",
           label: "キャラクター並び替え・試聴",
           onClick() {
             void store.actions.SET_DIALOG_OPEN({
-              isCharacterOrderDialogOpen: true,
+              isOldCharacterOrderDialogOpen: true,
             });
           },
           disableWhenUiLocked: true,
@@ -329,7 +344,7 @@ export const useCommonMenuBarData = (store: Store) => {
           label: "デフォルトスタイル",
           onClick() {
             void store.actions.SET_DIALOG_OPEN({
-              isDefaultStyleSelectDialogOpen: true,
+              isOldDefaultStyleSelectDialogOpen: true,
             });
           },
           disableWhenUiLocked: true,
diff --git a/src/store/engine.ts b/src/store/engine.ts
index c0d4189d1b..e12e002221 100644
--- a/src/store/engine.ts
+++ b/src/store/engine.ts
@@ -266,7 +266,7 @@ export const engineStore = createPartialStore<EngineStoreTypes>({
       };
       if (mergedResult.anyNewCharacters) {
         void actions.SET_DIALOG_OPEN({
-          isCharacterOrderDialogOpen: true,
+          isOldCharacterOrderDialogOpen: true,
         });
       }
 
diff --git a/src/store/type.ts b/src/store/type.ts
index 7dfce51019..9131127836 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -2043,8 +2043,9 @@ export type UiStoreState = {
 
 export type DialogStates = {
   isSettingDialogOpen: boolean;
-  isCharacterOrderDialogOpen: boolean;
-  isDefaultStyleSelectDialogOpen: boolean;
+  isCharacterListDialogOpen: boolean;
+  isOldCharacterOrderDialogOpen: boolean;
+  isOldDefaultStyleSelectDialogOpen: boolean;
   isHotkeySettingDialogOpen: boolean;
   isToolbarSettingDialogOpen: boolean;
   isAcceptRetrieveTelemetryDialogOpen: boolean;
diff --git a/src/store/ui.ts b/src/store/ui.ts
index 79002e8fbb..6f51839f06 100644
--- a/src/store/ui.ts
+++ b/src/store/ui.ts
@@ -69,8 +69,9 @@ export const uiStoreState: UiStoreState = {
   isSettingDialogOpen: false,
   isHotkeySettingDialogOpen: false,
   isToolbarSettingDialogOpen: false,
-  isCharacterOrderDialogOpen: false,
-  isDefaultStyleSelectDialogOpen: false,
+  isCharacterListDialogOpen: false,
+  isOldCharacterOrderDialogOpen: false,
+  isOldDefaultStyleSelectDialogOpen: false,
   isAcceptRetrieveTelemetryDialogOpen: false,
   isAcceptTermsDialogOpen: false,
   isDictionaryManageDialogOpen: false,
diff --git "a/tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\344\270\246\343\201\263\346\233\277\343\201\210\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts" "b/tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\343\201\256\347\256\241\347\220\206\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
similarity index 50%
rename from "tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\344\270\246\343\201\263\346\233\277\343\201\210\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
rename to "tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\343\201\256\347\256\241\347\220\206\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
index 123421fd68..ee73a7a810 100644
--- "a/tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\344\270\246\343\201\263\346\233\277\343\201\210\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
+++ "b/tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\343\201\256\347\256\241\347\220\206\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
@@ -4,15 +4,15 @@ import { gotoHome, navigateToMain } from "../navigators";
 
 test.beforeEach(gotoHome);
 
-test("「設定」→「キャラクター並び替え・視聴」で「設定 / キャラクター並び替え・視聴」ページが表示される", async ({
+test("「設定」→「キャラクター・スタイルの管理」で「設定 / キャラクター・スタイルの管理」ページが表示される", async ({
   page,
 }) => {
   await navigateToMain(page);
   await page.getByText("設定").click();
   await page.waitForTimeout(100);
-  await page.getByText("キャラクター並び替え・試聴").click();
+  await page.getByText("キャラクター・スタイルの管理").click();
   await page.waitForTimeout(100);
   await expect(
-    page.getByText("設定 / キャラクター並び替え・試聴"),
+    page.getByText("設定 / キャラクター・スタイルの管理"),
   ).toBeVisible();
 });
diff --git "a/tests/e2e/browser/\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\202\271\343\202\277\343\202\244\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts" "b/tests/e2e/browser/\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\202\271\343\202\277\343\202\244\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
deleted file mode 100644
index 8af7d3ed7d..0000000000
--- "a/tests/e2e/browser/\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\202\271\343\202\277\343\202\244\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
+++ /dev/null
@@ -1,14 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-import { gotoHome, navigateToMain } from "../navigators";
-
-test.beforeEach(gotoHome);
-
-test("「設定」→「デフォルトスタイル」で「設定 / デフォルトスタイル・試聴」ダイアログが表示される", async ({
-  page,
-}) => {
-  await navigateToMain(page);
-  await page.getByRole("button", { name: "設定" }).click();
-  await page.getByText("デフォルトスタイル").click();
-  await expect(page.getByText("設定 / デフォルトスタイル・試聴")).toBeVisible();
-});
diff --git "a/tests/e2e/browser/\345\210\235\345\233\236\350\265\267\345\213\225\346\231\202.spec.ts" "b/tests/e2e/browser/\345\210\235\345\233\236\350\265\267\345\213\225\346\231\202.spec.ts"
index d61cd7b2f1..68ef9ce85a 100644
--- "a/tests/e2e/browser/\345\210\235\345\233\236\350\265\267\345\213\225\346\231\202.spec.ts"
+++ "b/tests/e2e/browser/\345\210\235\345\233\236\350\265\267\345\213\225\346\231\202.spec.ts"
@@ -15,7 +15,7 @@ test("利用規約同意前に各種UIが無効になっている", async ({ pag
   });
 
   // ソングボタン
-  const songButton = page.getByText("ソング");
+  const songButton = page.getByRole("toolbar").getByText("ソング");
   await expect(songButton).toBeVisible();
   await expect(songButton).toBeDisabled();
 });