diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 24a42845f1..406e2b6794 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -31,7 +31,7 @@ defineEmits<{
 
 .button {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   text-wrap: nowrap;
   height: vars.$size-control;
diff --git a/src/components/Base/BaseIconButton.stories.ts b/src/components/Base/BaseIconButton.stories.ts
new file mode 100644
index 0000000000..34d45c08e8
--- /dev/null
+++ b/src/components/Base/BaseIconButton.stories.ts
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { TooltipProvider } from "radix-vue";
+import BaseIconButton from "./BaseIconButton.vue";
+
+const meta: Meta<typeof BaseIconButton> = {
+  component: BaseIconButton,
+  render: (args) => ({
+    components: { BaseIconButton, TooltipProvider },
+    setup() {
+      return { args };
+    },
+    template: `
+    <TooltipProvider>
+      <BaseIconButton v-bind="args" />
+    </TooltipProvider>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseIconButton>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+    icon: "settings",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled",
+    icon: "settings",
+    disabled: true,
+  },
+};
diff --git a/src/components/Base/BaseIconButton.vue b/src/components/Base/BaseIconButton.vue
new file mode 100644
index 0000000000..267b00f776
--- /dev/null
+++ b/src/components/Base/BaseIconButton.vue
@@ -0,0 +1,62 @@
+<template>
+  <BaseTooltip :label>
+    <button
+      class="button"
+      :disabled
+      @click="(payload) => $emit('click', payload)"
+    >
+      <!-- 暫定でq-iconを使用 -->
+      <QIcon v-if="icon" :name="icon" size="sm" />
+    </button>
+  </BaseTooltip>
+</template>
+
+<script setup lang="ts">
+import BaseTooltip from "./BaseTooltip.vue";
+
+defineProps<{
+  icon: string;
+  label: string;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.button {
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: vars.$size-control;
+  width: vars.$size-control;
+  border-radius: vars.$radius-1;
+  color: colors.$display;
+  background-color: colors.$clear;
+  cursor: pointer;
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:disabled {
+    // Quasar側のopacity: 0.6 !important;を上書きするためimportantを付与
+    opacity: 0.4 !important;
+  }
+}
+</style>
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 013d81d7ed..b1bc064f4e 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -52,6 +52,7 @@ import {
 .ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
+  z-index: vars.$z-index-scrollbar;
 }
 
 .ScrollAreaScrollbar[data-orientation="vertical"] {
diff --git a/src/components/Dialog/HotkeyRecordingDialog.vue b/src/components/Dialog/HotkeyRecordingDialog.vue
index d608f85746..46047b9b65 100644
--- a/src/components/Dialog/HotkeyRecordingDialog.vue
+++ b/src/components/Dialog/HotkeyRecordingDialog.vue
@@ -44,7 +44,7 @@
         />
         <QBtn
           padding="xs md"
-          label="ショートカットキーを未設定にする"
+          label="ショートカットキーを未割り当てにする"
           unelevated
           color="surface"
           textColor="display"
diff --git a/src/components/Dialog/HotkeySettingDialog.vue b/src/components/Dialog/HotkeySettingDialog.vue
index 8417edb6b9..558dd3c476 100644
--- a/src/components/Dialog/HotkeySettingDialog.vue
+++ b/src/components/Dialog/HotkeySettingDialog.vue
@@ -45,74 +45,64 @@
 
       <QPageContainer>
         <QPage>
-          <QTable
-            v-model:pagination="hotkeyPagination"
-            flat
-            dense
-            hideBottom
-            cardClass="bg-background text-display"
-            tableClass="text-display"
-            rowKey="hotkeyIndexes"
-            :filter="hotkeyFilter"
-            :rows="hotkeySettings"
-            :columns="hotkeyColumns"
-            class="hotkey-table"
-          >
-            <template #header="tableProps">
-              <QTr :props="tableProps">
-                <QTh
-                  v-for="col of tableProps.cols"
-                  :key="col.name"
-                  :props="tableProps"
+          <div class="container">
+            <BaseScrollArea>
+              <div class="table">
+                <div class="table-header">
+                  <div class="table-cell"></div>
+                  <div class="table-cell">操作</div>
+                  <div class="table-cell">ショートカットキー</div>
+                </div>
+                <div
+                  v-for="hotkeySetting in hotkeySettings.filter(
+                    (hotkeySetting) =>
+                      hotkeySetting.action.includes(hotkeyFilter) ||
+                      hotkeySetting.combination
+                        .toLocaleLowerCase()
+                        .includes(hotkeyFilter.toLocaleLowerCase()),
+                  )"
+                  :key="hotkeySetting.action"
+                  class="table-row"
                 >
-                  {{ col.label }}
-                </QTh>
-              </QTr>
-            </template>
-
-            <template #body="tableProps">
-              <QTr :props="tableProps">
-                <QTd :key="tableProps.cols[0].name" noHover :props="tableProps">
-                  {{ tableProps.row.action }}
-                </QTd>
-                <QTd :key="tableProps.cols[1].name" noHover :props="tableProps">
-                  <QBtn
-                    dense
-                    textColor="display"
-                    padding="none sm"
-                    flat
-                    :disable="checkHotkeyReadonly(tableProps.row.action)"
-                    noCaps
-                    :label="
-                      getHotkeyText(
-                        tableProps.row.action,
-                        tableProps.row.combination,
-                      )
-                        .split(' ')
-                        .map((hotkeyText) => {
-                          // Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する
-                          // Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している
-                          return hotkeyText === 'Meta' ? 'Cmd' : hotkeyText;
-                        })
-                        .join(' + ')
-                    "
-                    @click="openHotkeyDialog(tableProps.row.action)"
-                  />
-                  <QBtn
-                    rounded
-                    flat
-                    icon="settings_backup_restore"
-                    padding="none sm"
-                    size="1em"
-                    :disable="checkHotkeyReadonly(tableProps.row.action)"
-                    @click="resetHotkey(tableProps.row.action)"
-                  >
-                    <QTooltip :delay="500">デフォルトに戻す</QTooltip>
-                  </QBtn>
-                </QTd>
-              </QTr>
-            </template>
-          </QTable>
+                  <div class="table-cell"></div>
+                  <div class="table-cell hotkey-name">
+                    {{ hotkeySetting.action }}
+                  </div>
+                  <div class="table-cell key-button">
+                    <BaseButton
+                      :label="
+                        getHotkeyText(
+                          hotkeySetting.action,
+                          hotkeySetting.combination,
+                        )
+                          .split(' ')
+                          .map((hotkeyText) => {
+                            // Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する
+                            // Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している
+                            return hotkeyText === 'Meta' ? 'Cmd' : hotkeyText;
+                          })
+                          .join(' + ')
+                      "
+                      :disabled="checkHotkeyReadonly(hotkeySetting.action)"
+                      @click="openHotkeyDialog(hotkeySetting.action)"
+                    />
+                  </div>
+                  <div class="table-cell icon-buttons">
+                    <BaseIconButton
+                      icon="settings_backup_restore"
+                      label="デフォルトに戻す"
+                      :disabled="
+                        checkHotkeyReadonly(hotkeySetting.action) ||
+                        isDefaultCombination(hotkeySetting.action)
+                      "
+                      @click="resetHotkey(hotkeySetting.action)"
+                    />
+                  </div>
+                  <div class="table-cell"></div>
+                </div>
+              </div>
+            </BaseScrollArea>
+          </div>
         </QPage>
       </QPageContainer>
     </QLayout>
@@ -132,6 +122,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import HotkeyRecordingDialog from "./HotkeyRecordingDialog.vue";
+import BaseButton from "@/components/Base/BaseButton.vue";
+import BaseIconButton from "@/components/Base/BaseIconButton.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useStore } from "@/store";
 import {
   HotkeyActionNameType,
@@ -156,34 +149,10 @@ const hotkeySettingDialogOpenComputed = computed({
 
 const isHotkeyDialogOpened = ref(false);
 
-const hotkeyPagination = ref({ rowsPerPage: 0 });
 const hotkeyFilter = ref("");
 
 const hotkeySettings = computed(() => store.state.hotkeySettings);
 
-// FIXME: satisfiesを使うなどで型を表現したい
-const hotkeyColumns = ref<
-  {
-    name: string;
-    align: "left" | "right" | "center" | undefined;
-    label: string;
-    field: string;
-  }[]
->([
-  {
-    name: "action",
-    align: "left",
-    label: "操作",
-    field: "action",
-  },
-  {
-    name: "combination",
-    align: "left",
-    label: "ショートカットキー",
-    field: "combination",
-  },
-]);
-
 const lastAction = ref("");
 const lastRecord = ref(HotkeyCombination(""));
 
@@ -191,11 +160,11 @@ const lastRecord = ref(HotkeyCombination(""));
 const recordCombination = (event: KeyboardEvent) => {
   if (!isHotkeyDialogOpened.value) {
     return;
-  } else {
-    const recordedCombo = eventToCombination(event);
-    lastRecord.value = recordedCombo;
-    event.preventDefault();
   }
+
+  const recordedCombo = eventToCombination(event);
+  lastRecord.value = recordedCombo;
+  event.preventDefault();
 };
 
 // FIXME: HotkeyRecordingDialog内に移動する
@@ -230,22 +199,16 @@ const deleteHotkey = (action: string) => {
 };
 
 const getHotkeyText = (action: string, combo: string) => {
-  if (checkHotkeyReadonly(action)) combo = "（読み取り専用）" + combo;
-  if (combo == "") return "未設定";
-  else return combo;
+  if (checkHotkeyReadonly(action)) return "（読み取り専用）" + combo;
+  if (combo == "") return "未割り当て";
+  return combo;
 };
 
 // for later developers, in case anyone wants to add a readonly hotkey
 const readonlyHotkeyKeys: string[] = [];
 
 const checkHotkeyReadonly = (action: string) => {
-  let flag = false;
-  readonlyHotkeyKeys.forEach((key) => {
-    if (key == action) {
-      flag = true;
-    }
-  });
-  return flag;
+  return readonlyHotkeyKeys.includes(action);
 };
 
 const openHotkeyDialog = (action: string) => {
@@ -262,97 +225,60 @@ const setHotkeyDialogOpened = () => {
   document.removeEventListener("keydown", recordCombination);
 };
 
+const defaultSettings = ref<HotkeySettingType[]>([]);
+void window.backend
+  .getDefaultHotkeySettings()
+  .then((settings) => (defaultSettings.value = settings));
+
+const isDefaultCombination = (action: string) => {
+  const defaultSetting = defaultSettings.value.find(
+    (value) => value.action === action,
+  );
+  const hotkeySetting = hotkeySettings.value.find(
+    (value) => value.action === action,
+  );
+  return hotkeySetting?.combination === defaultSetting?.combination;
+};
+
 const resetHotkey = async (action: string) => {
   const result = await store.actions.SHOW_CONFIRM_DIALOG({
-    title: "ショートカットキーを初期値に戻します",
-    message: `${action}のショートカットキーを初期値に戻します。\n本当に戻しますか？`,
-    actionName: "初期値に戻す",
-    cancel: "初期値に戻さない",
+    title: "ショートカットキーをデフォルトに戻します",
+    message: `${action}のショートカットキーをデフォルトに戻します。\n本当に戻しますか？`,
+    actionName: "デフォルトに戻す",
+    cancel: "デフォルトに戻さない",
   });
-  if (result === "OK") {
-    void window.backend
-      .getDefaultHotkeySettings()
-      .then((defaultSettings: HotkeySettingType[]) => {
-        const setting = defaultSettings.find((value) => value.action == action);
-        if (setting == undefined) {
-          return;
-        }
-        // デフォルトが未設定でない場合は、衝突チェックを行う
-        if (setting.combination) {
-          const duplicated = hotkeySettings.value.find(
-            (item) =>
-              item.combination == setting.combination && item.action != action,
-          );
-          if (duplicated != undefined) {
-            openHotkeyDialog(action);
-            lastRecord.value = duplicated.combination;
-            return;
-          }
-        }
-        void changeHotkeySettings(action, setting.combination);
-      });
+
+  if (result !== "OK") return;
+
+  const setting = defaultSettings.value.find((value) => value.action == action);
+  if (setting == undefined) {
+    return;
+  }
+  // デフォルトが未設定でない場合は、衝突チェックを行う
+  if (setting.combination) {
+    const duplicated = hotkeySettings.value.find(
+      (item) =>
+        item.combination == setting.combination && item.action != action,
+    );
+    if (duplicated != undefined) {
+      openHotkeyDialog(action);
+      lastRecord.value = duplicated.combination;
+      return;
+    }
   }
+  void changeHotkeySettings(action, setting.combination);
 };
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/visually-hidden" as visually-hidden;
 
 .search-box {
   width: 200px;
 }
 
-.hotkey-table {
-  width: calc(100vw - #{vars.$window-border-width * 2});
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  );
-
-  > :deep(.scroll) {
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-
-  tbody tr {
-    td button:last-child {
-      float: right;
-      display: none;
-    }
-    &:hover td button:last-child {
-      display: inline-flex;
-      color: colors.$display;
-      opacity: 0.5;
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  thead tr th {
-    position: sticky;
-    top: 0;
-    font-weight: bold;
-    background-color: colors.$surface;
-    z-index: 1;
-  }
-
-  thead tr th:first-child,
-  tbody tr td:first-child {
-    width: 70%;
-    max-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  thead tr th:last-child,
-  tbody tr td:last-child {
-    max-width: 0;
-    min-width: 180px;
-  }
-}
-
 .q-layout-container > :deep(.absolute-full) {
   right: 0 !important;
   > .scroll {
@@ -360,4 +286,72 @@ const resetHotkey = async (action: string) => {
     overflow: hidden;
   }
 }
+
+.key-button {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background-color: colors.$background;
+}
+
+.table {
+  display: grid;
+  grid-template-columns: 1fr minmax(auto, 480px) auto auto 1fr;
+  width: 100%;
+}
+
+.table-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: 1px solid colors.$border;
+  font-weight: 700;
+  background-color: colors.$surface;
+  height: 32px;
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 5;
+  align-items: center;
+}
+
+.table-row {
+  height: 40px;
+}
+
+.table-row:nth-child(odd) {
+  background-color: colors.$background-alt;
+}
+
+.table-cell {
+  padding: 0 vars.$padding-1;
+}
+
+.table-cell:first-child,
+.table-cell:last-child {
+  width: 100%;
+}
+
+.hotkey-name {
+  max-width: 480px;
+}
+
+.icon-buttons {
+  display: flex;
+  gap: vars.$gap-1;
+  opacity: 0;
+}
+
+:where(:hover, :has(:focus-visible)) > .icon-buttons {
+  opacity: 1;
+}
 </style>
diff --git a/src/styles/v2/colors.scss b/src/styles/v2/colors.scss
index 94dc830f0f..d68687ce67 100644
--- a/src/styles/v2/colors.scss
+++ b/src/styles/v2/colors.scss
@@ -12,6 +12,7 @@ $primitive-red: #d04756;
 // ライトテーマの色
 :root[is-dark-theme="false"] {
   --color-v2-background: #{color.adjust($primitive-primary, $lightness: 25%)};
+  --color-v2-background-alt: #{color.adjust($primitive-white, $lightness: -5%)};
   --color-v2-background-drawer: #{rgba(color.adjust($primitive-primary, $lightness: 20%), 0.75)};
 
   --color-v2-surface: #{$primitive-white};
@@ -48,6 +49,7 @@ $primitive-red: #d04756;
 // ダークテーマの色
 :root[is-dark-theme="true"] {
   --color-v2-background: #{$primitive-black};
+  --color-v2-background-alt: #{color.adjust($primitive-black, $lightness: 2%)};
   --color-v2-background-drawer: #{rgba($primitive-black, 0.75)};
 
   --color-v2-surface: #{color.adjust($primitive-black, $lightness: 3%)};
@@ -82,6 +84,7 @@ $primitive-red: #d04756;
 }
 
 $background: var(--color-v2-background);
+$background-alt: var(--color-v2-background-alt);
 $background-drawer: var(--color-v2-background-drawer);
 
 $surface: var(--color-v2-surface);
diff --git a/src/styles/v2/variables.scss b/src/styles/v2/variables.scss
index fe64a25ba5..abe056c97a 100644
--- a/src/styles/v2/variables.scss
+++ b/src/styles/v2/variables.scss
@@ -23,6 +23,7 @@ $radius-2: calc(var(--radius-basis) * 2);
 
 $transition-duration: 100ms;
 
+$z-index-scrollbar: 100;
 $z-index-fullscreen-dialog: 1000;
 $z-index-dropdown: 1010;
 $z-index-fixed: 1020;
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-dark-storybook-win32.png"
new file mode 100644
index 0000000000..40d858a05f
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-light-storybook-win32.png"
new file mode 100644
index 0000000000..a79bc9a826
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-dark-storybook-win32.png"
new file mode 100644
index 0000000000..f7e35bb00e
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-light-storybook-win32.png"
new file mode 100644
index 0000000000..31441b7c5c
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-light-storybook-win32.png" differ