diff --git a/package-lock.json b/package-lock.json
index cdf54218f7..76aac68ad8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,6 +98,7 @@
         "vite-plugin-electron": "0.29.0",
         "vite-tsconfig-paths": "5.1.2",
         "vitest": "2.1.2",
+        "vue-component-type-helpers": "2.1.6",
         "vue-tsc": "2.1.10",
         "yargs": "17.2.1"
       },
@@ -16205,13 +16206,20 @@
         }
       }
     },
-    "node_modules/vue-component-type-helpers": {
+    "node_modules/vue-component-meta/node_modules/vue-component-type-helpers": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.10.tgz",
       "integrity": "sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.6.tgz",
+      "integrity": "sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-docgen-api": {
       "version": "4.79.2",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.79.2.tgz",
diff --git a/package.json b/package.json
index a7f9ba22d9..114b642d4b 100644
--- a/package.json
+++ b/package.json
@@ -135,6 +135,7 @@
     "vite-plugin-electron": "0.29.0",
     "vite-tsconfig-paths": "5.1.2",
     "vitest": "2.1.2",
+    "vue-component-type-helpers": "2.1.6",
     "vue-tsc": "2.1.10",
     "yargs": "17.2.1"
   }
diff --git a/src/components/Menu/ContextMenu/Presentation.vue b/src/components/Menu/ContextMenu/Presentation.vue
index da26802ac7..29ad0d6346 100644
--- a/src/components/Menu/ContextMenu/Presentation.vue
+++ b/src/components/Menu/ContextMenu/Presentation.vue
@@ -38,6 +38,9 @@ defineProps<{
   uiLocked?: boolean;
 }>();
 defineExpose({
+  show: (event?: MouseEvent | undefined) => {
+    contextMenu.value?.show(event);
+  },
   hide: () => {
     contextMenu.value?.hide();
   },
diff --git a/src/components/Sing/ChangeValueDialog/CommonDialog.vue b/src/components/Sing/ChangeValueDialog/CommonDialog.vue
new file mode 100644
index 0000000000..2e619dbcf8
--- /dev/null
+++ b/src/components/Sing/ChangeValueDialog/CommonDialog.vue
@@ -0,0 +1,91 @@
+<!--
+  テンポや拍子などを変更・追加するためのダイアログ
+-->
+<template>
+  <QDialog ref="dialogRef" v-model="modelValue">
+    <QCard class="q-py-sm q-px-md dialog-card">
+      <QCardSection>
+        <div class="text-h5">
+          {{ props.title }}
+        </div>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardSection>
+        <QCardActions>
+          <div>{{ props.name }}</div>
+          <QSpace />
+          <slot />
+        </QCardActions>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardActions>
+        <QSpace />
+        <QBtn
+          unelevated
+          label="キャンセル"
+          color="surface"
+          textColor="display"
+          class="text-no-wrap text-bold q-mr-sm"
+          @click="handleCancel"
+        />
+        <QBtn
+          unelevated
+          :label="okText"
+          color="primary"
+          textColor="display-on-primary"
+          class="text-no-wrap text-bold q-mr-sm"
+          @click="handleOk"
+        />
+      </QCardActions>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from "quasar";
+import { computed } from "vue";
+
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+const modelValue = defineModel<boolean>();
+const props = defineProps<{
+  title: string;
+  mode: "add" | "edit";
+  name: string;
+}>();
+defineSlots<{
+  default(props: Record<string, never>): void;
+}>();
+
+defineEmits({
+  ...useDialogPluginComponent.emitsObject,
+});
+
+const okText = computed(() =>
+  props.mode === "edit" ? "変更する" : "追加する",
+);
+
+const handleOk = () => {
+  onDialogOK();
+};
+
+const handleCancel = () => {
+  onDialogCancel();
+  modelValue.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-card {
+  width: 400px;
+  max-width: 40vw;
+}
+
+.value-input {
+  width: 60px;
+}
+</style>
diff --git a/src/components/Sing/ChangeValueDialog/TempoChangeDialog.stories.ts b/src/components/Sing/ChangeValueDialog/TempoChangeDialog.stories.ts
new file mode 100644
index 0000000000..1027e0e929
--- /dev/null
+++ b/src/components/Sing/ChangeValueDialog/TempoChangeDialog.stories.ts
@@ -0,0 +1,101 @@
+import { userEvent, within, expect, fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/vue3";
+
+import TempoChangeDialog from "./TempoChangeDialog.vue";
+
+const meta: Meta<typeof TempoChangeDialog> = {
+  component: TempoChangeDialog,
+  args: {
+    modelValue: true,
+    tempoChange: undefined,
+    mode: "add",
+
+    onOk: fn(),
+    onHide: fn(),
+  },
+  tags: ["!autodocs"], // ダイアログ系はautodocsのプレビューが正しく表示されないので無効化
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CreateOpened: Story = {
+  name: "開いている：追加",
+  args: {
+    modelValue: true,
+    mode: "add",
+  },
+};
+export const ChangeOpened: Story = {
+  name: "開いている：変更",
+  args: {
+    modelValue: true,
+    tempoChange: {
+      bpm: 120,
+    },
+    mode: "edit",
+  },
+};
+
+export const ClickOk: Story = {
+  name: "OKボタンを押す：追加",
+  args: { ...CreateOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const input = canvas.getByLabelText("テンポ");
+    await userEvent.clear(input);
+    await userEvent.type(input, "100");
+
+    const button = canvas.getByRole("button", { name: /追加する/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).toBeCalledWith({
+      tempoChange: {
+        bpm: 100,
+      },
+    });
+  },
+};
+
+export const ClickDelete: Story = {
+  name: "OKボタンを押す：編集",
+  args: { ...ChangeOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const input = canvas.getByLabelText("テンポ");
+    await userEvent.clear(input);
+    await userEvent.type(input, "100");
+
+    const button = canvas.getByRole("button", { name: /変更する/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).toBeCalledWith({
+      tempoChange: {
+        bpm: 100,
+      },
+    });
+  },
+};
+
+export const CancelClose: Story = {
+  name: "キャンセルボタンを押す",
+  args: { ...ChangeOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const button = canvas.getByRole("button", { name: /キャンセル/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).not.toBeCalled();
+  },
+};
+
+export const Closed: Story = {
+  name: "閉じている",
+  tags: ["skip-screenshot"],
+  args: {
+    modelValue: false,
+  },
+};
diff --git a/src/components/Sing/ChangeValueDialog/TempoChangeDialog.vue b/src/components/Sing/ChangeValueDialog/TempoChangeDialog.vue
new file mode 100644
index 0000000000..6330c72ae8
--- /dev/null
+++ b/src/components/Sing/ChangeValueDialog/TempoChangeDialog.vue
@@ -0,0 +1,49 @@
+<template>
+  <CommonDialog
+    v-model="modelValue"
+    :title="props.mode === 'add' ? 'テンポの追加' : 'テンポの編集'"
+    name="テンポ"
+    :mode="props.mode"
+    @ok="() => $emit('ok', { tempoChange })"
+    @hide="() => $emit('hide')"
+  >
+    <QInput
+      v-model.number="tempoChange.bpm"
+      type="number"
+      dense
+      hideBottomSpace
+      class="value-input"
+      aria-label="テンポ"
+    />
+  </CommonDialog>
+</template>
+
+<script setup lang="ts">
+import { QInput, useDialogPluginComponent } from "quasar";
+import { ref } from "vue";
+import CommonDialog from "./CommonDialog.vue";
+import { Tempo } from "@/store/type";
+import { DEFAULT_BPM } from "@/sing/domain";
+import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
+
+const modelValue = defineModel<boolean>();
+const props = defineProps<{
+  tempoChange: Omit<Tempo, "position"> | undefined;
+  mode: "add" | "edit";
+}>();
+defineEmits({
+  ...useDialogPluginComponent.emitsObject,
+});
+
+const tempoChange = ref(
+  cloneWithUnwrapProxy(props.tempoChange) || {
+    bpm: DEFAULT_BPM,
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.value-input {
+  width: 60px;
+}
+</style>
diff --git a/src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.stories.ts b/src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.stories.ts
new file mode 100644
index 0000000000..56be9ca2de
--- /dev/null
+++ b/src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.stories.ts
@@ -0,0 +1,104 @@
+import { userEvent, within, expect, fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/vue3";
+
+import TimeSignatureChangeDialog from "./TimeSignatureChangeDialog.vue";
+
+const meta: Meta<typeof TimeSignatureChangeDialog> = {
+  component: TimeSignatureChangeDialog,
+  args: {
+    modelValue: true,
+    timeSignatureChange: undefined,
+    mode: "add",
+
+    onOk: fn(),
+    onHide: fn(),
+  },
+  tags: ["!autodocs"], // ダイアログ系はautodocsのプレビューが正しく表示されないので無効化
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CreateOpened: Story = {
+  name: "開いている：追加",
+  args: {
+    modelValue: true,
+    mode: "add",
+  },
+};
+export const ChangeOpened: Story = {
+  name: "開いている：変更",
+  args: {
+    modelValue: true,
+    timeSignatureChange: {
+      beats: 4,
+      beatType: 4,
+    },
+    mode: "edit",
+  },
+};
+
+export const ClickOk: Story = {
+  name: "OKボタンを押す：追加",
+  args: { ...CreateOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const input = canvas.getByLabelText("拍子の分子");
+    await userEvent.clear(input);
+    await userEvent.type(input, "3");
+
+    const button = canvas.getByRole("button", { name: /追加する/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).toBeCalledWith({
+      timeSignatureChange: {
+        beats: 3,
+        beatType: 4,
+      },
+    });
+  },
+};
+
+export const ClickDelete: Story = {
+  name: "OKボタンを押す：編集",
+  args: { ...ChangeOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const input = canvas.getByLabelText("拍子の分子");
+    await userEvent.clear(input);
+    await userEvent.type(input, "6");
+
+    const button = canvas.getByRole("button", { name: /変更する/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).toBeCalledWith({
+      timeSignatureChange: {
+        beats: 6,
+        beatType: 4,
+      },
+    });
+  },
+};
+
+export const CancelClose: Story = {
+  name: "キャンセルボタンを押す",
+  args: { ...ChangeOpened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const button = canvas.getByRole("button", { name: /キャンセル/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).not.toBeCalled();
+  },
+};
+
+export const Closed: Story = {
+  name: "閉じている",
+  tags: ["skip-screenshot"],
+  args: {
+    modelValue: false,
+  },
+};
diff --git a/src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.vue b/src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.vue
new file mode 100644
index 0000000000..a9e44e7a34
--- /dev/null
+++ b/src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <CommonDialog
+    v-model="modelValue"
+    :title="props.mode === 'add' ? '拍子の追加' : '拍子の編集'"
+    name="拍子"
+    :mode="props.mode"
+    @ok="() => $emit('ok', { timeSignatureChange })"
+    @hide="() => $emit('hide')"
+  >
+    <QInput
+      v-model.number="timeSignatureChange.beats"
+      type="number"
+      min="1"
+      max="32"
+      dense
+      transitionShow="none"
+      transitionHide="none"
+      class="value-input"
+      aria-label="拍子の分子"
+    />
+    <div class="q-px-sm">/</div>
+    <QSelect
+      v-model="timeSignatureChange.beatType"
+      :options="beatTypeOptions"
+      mapOptions
+      emitValue
+      dense
+      userInputs
+      optionsDense
+      transitionShow="none"
+      transitionHide="none"
+      class="value-input"
+      aria-label="拍子の分母"
+    />
+  </CommonDialog>
+</template>
+
+<script setup lang="ts">
+import { useDialogPluginComponent } from "quasar";
+import { ref } from "vue";
+import CommonDialog from "./CommonDialog.vue";
+import { TimeSignature } from "@/store/type";
+import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
+import { BEAT_TYPES, DEFAULT_BEAT_TYPE, DEFAULT_BEATS } from "@/sing/domain";
+
+const modelValue = defineModel<boolean>();
+const props = defineProps<{
+  timeSignatureChange: Omit<TimeSignature, "measureNumber"> | undefined;
+  mode: "add" | "edit";
+}>();
+defineEmits({
+  ...useDialogPluginComponent.emitsObject,
+});
+
+const timeSignatureChange = ref(
+  cloneWithUnwrapProxy(props.timeSignatureChange) || {
+    beats: DEFAULT_BEATS,
+    beatType: DEFAULT_BEAT_TYPE,
+  },
+);
+
+const beatTypeOptions = BEAT_TYPES.map((beatType) => ({
+  label: beatType.toString(),
+  value: beatType,
+}));
+</script>
+
+<style scoped lang="scss">
+.value-input {
+  width: 60px;
+}
+</style>
diff --git a/src/components/Sing/SequencerGrid/Presentation.vue b/src/components/Sing/SequencerGrid/Presentation.vue
index 8b6f9fb5c5..ac19ace72d 100644
--- a/src/components/Sing/SequencerGrid/Presentation.vue
+++ b/src/components/Sing/SequencerGrid/Presentation.vue
@@ -8,9 +8,10 @@
   >
     <defs>
       <pattern
-        id="sequencer-grid-pattern"
+        id="sequencer-grid-pattern-background"
         patternUnits="userSpaceOnUse"
-        :width="beatWidth * beatsPerMeasure"
+        :x="0"
+        :width="gridCellWidth"
         :height="gridCellHeight * 12"
       >
         <!-- セルの背景 -->
@@ -19,49 +20,67 @@
           :key="`cell-${index}`"
           x="0"
           :y="gridCellHeight * index"
-          :width="beatWidth * beatsPerMeasure"
-          :height="gridCellHeight"
+          :width="gridCellWidth"
+          :height="gridCellHeight * 12"
           :class="`sequencer-grid-cell sequencer-grid-cell-${keyInfo.color}`"
         />
         <!-- スナップグリッド線 -->
         <line
-          v-for="x in snapLinePositions"
-          :key="`snapline-${x}`"
-          :x1="x"
-          :x2="x"
+          :x1="gridCellWidth"
+          :x2="gridCellWidth"
           y1="0"
           :y2="gridCellHeight * 12"
           class="sequencer-grid-vertical-line"
         />
+      </pattern>
+      <pattern
+        v-for="(pattern, patternIndex) in gridPatterns"
+        :id="`sequencer-grid-pattern-${patternIndex}`"
+        :key="`pattern-${patternIndex}`"
+        patternUnits="userSpaceOnUse"
+        :x="pattern.x"
+        :width="pattern.patternWidth"
+        :height="gridCellHeight * 12"
+      >
         <!-- E/Fの中間線 -->
         <line
           v-for="index in horizontalLineIndices"
           :key="`horizontal-${index}`"
           x1="0"
-          :x2="beatWidth * beatsPerMeasure"
+          :x2="pattern.patternWidth"
           :y1="gridCellHeight * (index + 1)"
           :y2="gridCellHeight * (index + 1)"
           class="sequencer-grid-horizontal-line"
         />
         <!-- 拍線 -->
         <line
-          v-for="n in beatLineIndices"
+          v-for="n in pattern.timeSignature.beats"
           :key="`beatline-${n}`"
-          :x1="beatWidth * n"
-          :x2="beatWidth * n"
+          :x1="pattern.beatWidth * n"
+          :x2="pattern.beatWidth * n"
           y1="0"
           :y2="gridCellHeight * 12"
           class="sequencer-grid-beat-line"
         />
       </pattern>
     </defs>
-    <!-- グリッドパターン背景 -->
+    <!-- グリッド背景 -->
     <rect
       x="0"
       y="0"
       :width="gridWidth"
       :height="gridHeight"
-      fill="url(#sequencer-grid-pattern)"
+      :fill="`url(#sequencer-grid-pattern-background)`"
+    />
+    <!-- グリッドパターン -->
+    <rect
+      v-for="gridPattern in gridPatterns"
+      :key="`grid-${gridPattern.id}`"
+      :x="gridPattern.x"
+      y="0"
+      :width="gridPattern.width"
+      :height="gridHeight"
+      :fill="`url(#${gridPattern.id})`"
     />
     <!-- オクターブ線（グリッドの上に描画） -->
     <line
@@ -75,10 +94,10 @@
     />
     <!-- 小節線（グリッドおよびオクターブ線の上に描画） -->
     <line
-      v-for="n in numberOfMeasureLines"
-      :key="`measureline-${n}`"
-      :x1="beatWidth * beatsPerMeasure * n"
-      :x2="beatWidth * beatsPerMeasure * n"
+      v-for="x in measureLines"
+      :key="`measureline-${x}`"
+      :x1="x"
+      :x2="x"
       y1="0"
       :y2="gridHeight"
       class="sequencer-grid-measure-line"
@@ -87,10 +106,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 import { keyInfos, getKeyBaseHeight, tickToBaseX } from "@/sing/viewHelper";
 import { getMeasureDuration, getNoteDuration } from "@/sing/domain";
 import { TimeSignature } from "@/store/type";
+import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
 
 const props = defineProps<{
   tpqn: number;
@@ -111,30 +131,43 @@ const gridCellBaseHeight = getKeyBaseHeight();
 const gridCellHeight = computed(() => {
   return gridCellBaseHeight * props.sequencerZoomY;
 });
-const beatsPerMeasure = computed(() => {
-  return props.timeSignatures[0].beats;
-});
-const beatWidth = computed(() => {
-  const beatType = props.timeSignatures[0].beatType;
+const beatWidth = (timeSignature: TimeSignature) => {
+  const beatType = timeSignature.beatType;
   const wholeNoteDuration = props.tpqn * 4;
   const beatTicks = wholeNoteDuration / beatType;
   return tickToBaseX(beatTicks, props.tpqn) * props.sequencerZoomX;
-});
+};
+
 const gridWidth = computed(() => {
-  // TODO: 複数拍子に対応する
-  const beats = props.timeSignatures[0].beats;
-  const beatType = props.timeSignatures[0].beatType;
-  const measureDuration = getMeasureDuration(beats, beatType, props.tpqn);
-  const numMeasures = props.numMeasures;
-  const numOfGridColumns =
-    Math.round(measureDuration / gridCellTicks.value) * numMeasures;
+  let numOfGridColumns = 0;
+  for (const [i, timeSignature] of props.timeSignatures.entries()) {
+    const nextTimeSignature = props.timeSignatures[i + 1];
+    const nextMeasureNumber =
+      nextTimeSignature?.measureNumber ?? props.numMeasures + 1;
+    const beats = timeSignature.beats;
+    const beatType = timeSignature.beatType;
+    const measureDuration = getMeasureDuration(beats, beatType, props.tpqn);
+    numOfGridColumns +=
+      Math.round(measureDuration / gridCellTicks.value) *
+      (nextMeasureNumber - timeSignature.measureNumber);
+  }
   return gridCellWidth.value * numOfGridColumns;
 });
 const gridHeight = computed(() => {
   return gridCellHeight.value * keyInfos.length;
 });
+
+const gridPatterns = useSequencerGrid({
+  timeSignatures: toRef(() => props.timeSignatures),
+  tpqn: toRef(() => props.tpqn),
+  sequencerZoomX: toRef(() => props.sequencerZoomX),
+  numMeasures: toRef(() => props.numMeasures),
+});
+
 // 小節幅
-const measureWidth = computed(() => beatWidth.value * beatsPerMeasure.value);
+const measureWidth = (timeSignature: TimeSignature) =>
+  beatWidth(timeSignature) * timeSignature.beats;
+
 // グリッド線の計算
 // オクターブ線や小節線と重なる線は除外
 const gridLines = computed(() => {
@@ -150,25 +183,29 @@ const gridLines = computed(() => {
     { horizontalLines: [], octaveLines: [] },
   );
 });
-const numberOfMeasureLines = computed(() =>
-  Math.ceil(gridWidth.value / measureWidth.value),
-);
+const measureLines = computed(() => {
+  const measureLines = [0];
+  for (const [i, timeSignature] of props.timeSignatures.entries()) {
+    const nextTimeSignature = props.timeSignatures.at(i + 1);
+    const nextMeasureNumber =
+      nextTimeSignature?.measureNumber ?? props.numMeasures + 1;
+    const width = measureWidth(timeSignature);
+
+    const left = measureLines[measureLines.length - 1];
+    for (
+      let measureNumber = timeSignature.measureNumber;
+      measureNumber < nextMeasureNumber;
+      measureNumber++
+    ) {
+      measureLines.push(
+        left + width * (measureNumber - timeSignature.measureNumber + 1),
+      );
+    }
+  }
+  return measureLines;
+});
 const horizontalLineIndices = computed(() => gridLines.value.horizontalLines);
 const octaveLineIndices = computed(() => gridLines.value.octaveLines);
-const beatLineIndices = computed(() =>
-  Array.from({ length: beatsPerMeasure.value - 1 }, (_, i) => i + 1),
-);
-const snapLinePositions = computed(() => {
-  const snapTicks = gridCellTicks.value;
-  const measureTicks =
-    (props.tpqn * 4 * beatsPerMeasure.value) / props.timeSignatures[0].beatType;
-  const snapCount = Math.floor(measureTicks / snapTicks);
-
-  return Array.from({ length: snapCount }, (_, index) => {
-    const currentTick = snapTicks * index;
-    return (currentTick / measureTicks) * measureWidth.value;
-  });
-});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/Sing/SequencerGrid/index.stories.ts b/src/components/Sing/SequencerGrid/index.stories.ts
index 24133c0ab2..8acbdd97c9 100644
--- a/src/components/Sing/SequencerGrid/index.stories.ts
+++ b/src/components/Sing/SequencerGrid/index.stories.ts
@@ -1,6 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
 import Presentation from "./Presentation.vue";
+import {
+  ZOOM_X_MAX,
+  ZOOM_X_MIN,
+  ZOOM_X_STEP,
+  ZOOM_Y_MAX,
+  ZOOM_Y_MIN,
+  ZOOM_Y_STEP,
+} from "@/sing/viewHelper";
 
 const meta: Meta<typeof Presentation> = {
   component: Presentation,
@@ -18,6 +26,24 @@ const meta: Meta<typeof Presentation> = {
     sequencerSnapType: 16,
     numMeasures: 32,
   },
+  argTypes: {
+    sequencerZoomX: {
+      control: {
+        type: "range",
+        min: ZOOM_X_MIN,
+        max: ZOOM_X_MAX,
+        step: ZOOM_X_STEP,
+      },
+    },
+    sequencerZoomY: {
+      control: {
+        type: "range",
+        min: ZOOM_Y_MIN,
+        max: ZOOM_Y_MAX,
+        step: ZOOM_Y_STEP,
+      },
+    },
+  },
 
   render: (args) => ({
     components: { Presentation },
@@ -31,4 +57,30 @@ const meta: Meta<typeof Presentation> = {
 export default meta;
 type Story = StoryObj<typeof Presentation>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  name: "デフォルト",
+  args: {},
+};
+
+export const WithTimeSignatureChange: Story = {
+  name: "拍子変化",
+  args: {
+    timeSignatures: [
+      {
+        beats: 4,
+        beatType: 4,
+        measureNumber: 1,
+      },
+      {
+        beats: 3,
+        beatType: 4,
+        measureNumber: 3,
+      },
+      {
+        beats: 9,
+        beatType: 16,
+        measureNumber: 5,
+      },
+    ],
+  },
+};
diff --git a/src/components/Sing/SequencerPitch.vue b/src/components/Sing/SequencerPitch.vue
index ed3ae21b78..a558f5e1fd 100644
--- a/src/components/Sing/SequencerPitch.vue
+++ b/src/components/Sing/SequencerPitch.vue
@@ -51,7 +51,7 @@ const { warn, error } = createLogger("SequencerPitch");
 const store = useStore();
 const tpqn = computed(() => store.state.tpqn);
 const isDark = computed(() => store.state.currentTheme === "Dark");
-const tempos = computed(() => [store.state.tempos[0]]);
+const tempos = computed(() => store.state.tempos);
 const pitchEditData = computed(() => {
   return store.getters.SELECTED_TRACK.pitchEditData;
 });
diff --git a/src/components/Sing/SequencerRuler/Container.vue b/src/components/Sing/SequencerRuler/Container.vue
index 6824af1c48..07111d281f 100644
--- a/src/components/Sing/SequencerRuler/Container.vue
+++ b/src/components/Sing/SequencerRuler/Container.vue
@@ -1,13 +1,19 @@
 <template>
   <Presentation
     :offset
+    :numMeasures
     :tpqn
+    :tempos
     :timeSignatures
     :sequencerZoomX
-    :numMeasures
+    :uiLocked
     :playheadTicks
     :sequencerSnapType
     @update:playheadTicks="updatePlayheadTicks"
+    @removeTempo="removeTempo"
+    @removeTimeSignature="removeTimeSignature"
+    @setTempo="setTempo"
+    @setTimeSignature="setTimeSignature"
     @deselectAllNotes="deselectAllNotes"
   />
 </template>
@@ -16,6 +22,7 @@
 import { computed } from "vue";
 import Presentation from "./Presentation.vue";
 import { useStore } from "@/store";
+import { Tempo, TimeSignature } from "@/store/type";
 
 defineOptions({
   name: "SequencerRuler",
@@ -33,9 +40,12 @@ withDefaults(
 );
 
 const store = useStore();
+
 const tpqn = computed(() => store.state.tpqn);
+const tempos = computed(() => store.state.tempos);
 const timeSignatures = computed(() => store.state.timeSignatures);
 const sequencerZoomX = computed(() => store.state.sequencerZoomX);
+const uiLocked = computed(() => store.getters.UI_LOCKED);
 const sequencerSnapType = computed(() => store.state.sequencerSnapType);
 
 const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
@@ -47,4 +57,25 @@ const updatePlayheadTicks = (ticks: number) => {
 const deselectAllNotes = () => {
   void store.actions.DESELECT_ALL_NOTES();
 };
+
+const setTempo = (tempo: Tempo) => {
+  void store.actions.COMMAND_SET_TEMPO({
+    tempo,
+  });
+};
+const setTimeSignature = (timeSignature: TimeSignature) => {
+  void store.actions.COMMAND_SET_TIME_SIGNATURE({
+    timeSignature,
+  });
+};
+const removeTempo = (position: number) => {
+  void store.actions.COMMAND_REMOVE_TEMPO({
+    position,
+  });
+};
+const removeTimeSignature = (measureNumber: number) => {
+  void store.actions.COMMAND_REMOVE_TIME_SIGNATURE({
+    measureNumber,
+  });
+};
 </script>
diff --git a/src/components/Sing/SequencerRuler/Presentation.vue b/src/components/Sing/SequencerRuler/Presentation.vue
index 9cb4c75916..48d3ed2a1c 100644
--- a/src/components/Sing/SequencerRuler/Presentation.vue
+++ b/src/components/Sing/SequencerRuler/Presentation.vue
@@ -1,5 +1,16 @@
 <template>
-  <div ref="sequencerRuler" class="sequencer-ruler" @click="onClick">
+  <div
+    ref="sequencerRuler"
+    class="sequencer-ruler"
+    @click="onClick"
+    @contextmenu="onContextMenu"
+  >
+    <ContextMenu
+      ref="contextMenu"
+      :header="contextMenuHeader"
+      :menudata="contextMenudata"
+      :uiLocked
+    />
     <svg
       xmlns="http://www.w3.org/2000/svg"
       :width
@@ -8,25 +19,35 @@
     >
       <defs>
         <pattern
-          id="sequencer-ruler-measure"
+          v-for="(gridPattern, patternIndex) in gridPatterns"
+          :id="`sequencer-ruler-measure-${patternIndex}`"
+          :key="`pattern-${patternIndex}`"
           patternUnits="userSpaceOnUse"
-          :x="-offset % (beatWidth * beatsPerMeasure)"
-          :width="beatWidth * beatsPerMeasure"
+          :x="-offset + gridPattern.x"
+          :width="gridPattern.patternWidth"
           :height
         >
           <!-- 拍線（小節の最初を除く） -->
           <line
-            v-for="n in beatsPerMeasure - 1"
+            v-for="n in gridPattern.beatsPerMeasure"
             :key="n"
-            :x1="beatWidth * n"
-            :x2="beatWidth * n"
+            :x1="gridPattern.beatWidth * n"
+            :x2="gridPattern.beatWidth * n"
             y1="28"
             :y2="height"
             class="sequencer-ruler-beat-line"
           />
         </pattern>
       </defs>
-      <rect x="0.5" y="0" :width :height fill="url(#sequencer-ruler-measure)" />
+      <rect
+        v-for="(gridPattern, index) in gridPatterns"
+        :key="`grid-${index}`"
+        :x="0.5 + gridPattern.x - offset"
+        y="0"
+        :height
+        :width="gridPattern.width"
+        :fill="`url(#sequencer-ruler-measure-${index})`"
+      />
       <!-- 小節線 -->
       <line
         v-for="measureInfo in measureInfos"
@@ -43,13 +64,35 @@
         v-for="measureInfo in measureInfos"
         :key="measureInfo.number"
         font-size="12"
-        :x="measureInfo.x - offset + 4"
+        :x="measureInfo.x - offset + textPadding"
         y="34"
         class="sequencer-ruler-measure-number"
       >
         {{ measureInfo.number }}
       </text>
+      <!-- テンポ・拍子表示 -->
+      <template v-for="valueChange in valueChanges" :key="valueChange.position">
+        <text
+          ref="valueChangeText"
+          font-size="12"
+          :x="valueChange.x - offset + textPadding"
+          y="16"
+          class="sequencer-ruler-value-change"
+          @click.stop="onValueChangeClick($event, valueChange)"
+          @contextmenu.stop="onValueChangeClick($event, valueChange)"
+        >
+          {{ valueChange.displayText }}
+        </text>
+        <line
+          :x1="valueChange.x - offset"
+          :x2="valueChange.x - offset"
+          y1="0"
+          :y2="height"
+          class="sequencer-ruler-value-change-line"
+        />
+      </template>
     </svg>
+
     <div class="sequencer-ruler-border-bottom"></div>
     <div
       class="sequencer-ruler-playhead"
@@ -61,40 +104,61 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import {
+  computed,
+  ref,
+  onMounted,
+  onUnmounted,
+  ExtractPropTypes,
+  ComponentPublicInstance,
+  useTemplateRef,
+  Component,
+  toRef,
+} from "vue";
+import { Dialog } from "quasar";
 import {
   getMeasureDuration,
-  getTimeSignaturePositions,
   getNoteDuration,
+  getTimeSignaturePositions,
   snapTicksToGrid,
+  tickToMeasureNumber,
 } from "@/sing/domain";
 import { baseXToTick, tickToBaseX } from "@/sing/viewHelper";
-import { TimeSignature } from "@/store/type";
+import { Tempo, TimeSignature } from "@/store/type";
+import ContextMenu, {
+  ContextMenuItemData,
+} from "@/components/Menu/ContextMenu/Presentation.vue";
+import { UnreachableError } from "@/type/utility";
+import TempoChangeDialog from "@/components/Sing/ChangeValueDialog/TempoChangeDialog.vue";
+import TimeSignatureChangeDialog from "@/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.vue";
+import { FontSpecification, predictTextWidth } from "@/helpers/textWidth";
+import { createLogger } from "@/domain/frontend/log";
+import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
 
 const props = defineProps<{
   offset: number;
   numMeasures: number;
-
   tpqn: number;
+  tempos: Tempo[];
   timeSignatures: TimeSignature[];
   sequencerZoomX: number;
+  uiLocked: boolean;
   sequencerSnapType: number;
 }>();
-const playheadTicks = defineModel<number>("playheadTicks", { required: true });
+const playheadTicks = defineModel<number>("playheadTicks", {
+  required: true,
+});
 const emit = defineEmits<{
   deselectAllNotes: [];
+  setTempo: [tempo: Tempo];
+  removeTempo: [position: number];
+  setTimeSignature: [timeSignature: TimeSignature];
+  removeTimeSignature: [measureNumber: number];
 }>();
 
+const log = createLogger("SequencerRuler");
+
 const height = ref(40);
-const beatsPerMeasure = computed(() => {
-  return props.timeSignatures[0].beats;
-});
-const beatWidth = computed(() => {
-  const beatType = props.timeSignatures[0].beatType;
-  const wholeNoteDuration = props.tpqn * 4;
-  const beatTicks = wholeNoteDuration / beatType;
-  return tickToBaseX(beatTicks, props.tpqn) * props.sequencerZoomX;
-});
 const tsPositions = computed(() => {
   return getTimeSignaturePositions(props.timeSignatures, props.tpqn);
 });
@@ -110,6 +174,13 @@ const endTicks = computed(() => {
 const width = computed(() => {
   return tickToBaseX(endTicks.value, props.tpqn) * props.sequencerZoomX;
 });
+const gridPatterns = useSequencerGrid({
+  timeSignatures: toRef(() => props.timeSignatures),
+  tpqn: toRef(() => props.tpqn),
+  sequencerZoomX: toRef(() => props.sequencerZoomX),
+  numMeasures: toRef(() => props.numMeasures),
+});
+
 const measureInfos = computed(() => {
   return props.timeSignatures.flatMap((timeSignature, i) => {
     const measureDuration = getMeasureDuration(
@@ -135,6 +206,7 @@ const measureInfos = computed(() => {
     });
   });
 });
+
 const playheadX = computed(() => {
   const baseX = tickToBaseX(playheadTicks.value, props.tpqn);
   return Math.floor(baseX * props.sequencerZoomX);
@@ -144,6 +216,11 @@ const snapTicks = computed(() => {
   return getNoteDuration(props.sequencerSnapType, props.tpqn);
 });
 
+const getSnappedTickFromOffsetX = (offsetX: number) => {
+  const baseX = (props.offset + offsetX) / props.sequencerZoomX;
+  return snapTicksToGrid(baseXToTick(baseX, props.tpqn), snapTicks.value);
+};
+
 const onClick = (event: MouseEvent) => {
   emit("deselectAllNotes");
 
@@ -151,15 +228,11 @@ const onClick = (event: MouseEvent) => {
   if (!sequencerRulerElement) {
     throw new Error("sequencerRulerElement is null.");
   }
-  const baseX = (props.offset + event.offsetX) / props.sequencerZoomX;
-  const ticks = snapTicksToGrid(
-    baseXToTick(baseX, props.tpqn),
-    snapTicks.value,
-  );
+  const ticks = getSnappedTickFromOffsetX(event.offsetX);
   playheadTicks.value = ticks;
 };
 
-const sequencerRuler = ref<HTMLElement | null>(null);
+const sequencerRuler = useTemplateRef<HTMLDivElement>("sequencerRuler");
 let resizeObserver: ResizeObserver | undefined;
 
 onMounted(() => {
@@ -184,6 +257,281 @@ onMounted(() => {
 onUnmounted(() => {
   resizeObserver?.disconnect();
 });
+
+const contextMenu = ref<ComponentPublicInstance<typeof ContextMenu> | null>(
+  null,
+);
+const onContextMenu = async (event: MouseEvent) => {
+  emit("deselectAllNotes");
+
+  const snappedTicks = getSnappedTickFromOffsetX(event.offsetX);
+  playheadTicks.value = snappedTicks;
+};
+
+type ValueChange = {
+  position: number;
+  text: string;
+  tempoChange: Tempo | undefined;
+  timeSignatureChange: TimeSignature | undefined;
+  x: number;
+  displayType: "full" | "ellipsis" | "hidden";
+  displayText: string;
+};
+
+const onValueChangeClick = async (
+  event: MouseEvent,
+  valueChange: ValueChange,
+) => {
+  const ticks = valueChange.position;
+  playheadTicks.value = ticks;
+  contextMenu.value?.show(event);
+};
+
+const currentMeasure = computed(() =>
+  tickToMeasureNumber(playheadTicks.value, props.timeSignatures, props.tpqn),
+);
+
+const textPadding = 4;
+
+// NOTE: フォントの変更に対応していないが、基本的にフォントが変更されることは少ないので、
+// 複雑性を下げるためにも対応しない
+const valueChangeText = useTemplateRef<SVGTextElement[]>("valueChangeText");
+const valueChangeTextStyle = computed<FontSpecification | null>(() => {
+  if (!valueChangeText.value || valueChangeText.value.length === 0) {
+    return null;
+  }
+  const style = window.getComputedStyle(valueChangeText.value[0]);
+  return {
+    fontFamily: style.fontFamily,
+    fontSize: parseFloat(style.fontSize),
+    fontWeight: style.fontWeight,
+  };
+});
+
+const valueChanges = computed<ValueChange[]>(() => {
+  const timeSignaturesWithTicks = tsPositions.value.map((tsPosition, i) => ({
+    type: "timeSignature" as const,
+    position: tsPosition,
+    timeSignature: props.timeSignatures[i],
+  }));
+  const tempos = props.tempos.map((tempo) => {
+    return {
+      type: "tempo" as const,
+      position: tempo.position,
+      tempo,
+    };
+  });
+
+  const valueChanges: ValueChange[] = [
+    ...Map.groupBy(
+      [...tempos, ...timeSignaturesWithTicks],
+      (item) => item.position,
+    ).entries(),
+  ]
+    .toSorted((a, b) => a[0] - b[0])
+    .map(([tick, items]) => {
+      const tempo = items.find((item) => item.type === "tempo")?.tempo;
+      const timeSignature = items.find(
+        (item) => item.type === "timeSignature",
+      )?.timeSignature;
+
+      const tempoText = tempo?.bpm ?? "";
+      const timeSignatureText = timeSignature
+        ? `${timeSignature.beats}/${timeSignature.beatType}`
+        : "";
+
+      const text = [tempoText, timeSignatureText].join(" ");
+
+      return {
+        position: tick,
+        text,
+        tempoChange: tempo,
+        timeSignatureChange: timeSignature,
+        x: tickToBaseX(tick, props.tpqn) * props.sequencerZoomX,
+        displayType: "full" as const,
+        displayText: text,
+      };
+    });
+
+  if (valueChangeTextStyle.value != undefined) {
+    // NOTE: テキストの幅を計算して、表示できるかどうかを判定する
+    //   full: 通常表示（120 4/4）
+    //   ellipsis: fullが入りきらないときに表示する（...）
+    //   hidden: ellipsisも入りきらないときに表示する（\u200b）
+
+    const collapsedTextWidth =
+      predictTextWidth("...", valueChangeTextStyle.value) + textPadding * 2;
+    for (const [i, valueChange] of valueChanges.entries()) {
+      const next = valueChanges.at(i + 1);
+      if (!next) {
+        continue;
+      }
+      const requiredWidth =
+        predictTextWidth(valueChange.text, valueChangeTextStyle.value) +
+        textPadding;
+      const width = next.x - valueChange.x;
+      if (collapsedTextWidth > width) {
+        valueChange.displayType = "hidden";
+        valueChange.displayText = "\u200b"; // QTooltipは空文字列のtextにひっついてくれないので、ゼロ幅スペースを入れる
+      } else if (requiredWidth > width) {
+        valueChange.displayType = "ellipsis";
+        valueChange.displayText = "...";
+      }
+    }
+  } else {
+    log.warn("valueChangeTextElement is null. Cannot calculate text width.");
+  }
+
+  return valueChanges;
+});
+
+const currentTempo = computed(() => {
+  const maybeTempo = props.tempos.findLast((tempo) => {
+    return tempo.position <= playheadTicks.value;
+  });
+  if (!maybeTempo) {
+    throw new UnreachableError("assert: At least one tempo exists.");
+  }
+  return maybeTempo;
+});
+const currentTimeSignature = computed(() => {
+  const maybeTimeSignature = props.timeSignatures.findLast((timeSignature) => {
+    return timeSignature.measureNumber <= currentMeasure.value;
+  });
+  if (!maybeTimeSignature) {
+    throw new UnreachableError("assert: At least one time signature exists.");
+  }
+  return maybeTimeSignature;
+});
+const tempoChangeExists = computed(
+  () => currentTempo.value.position === playheadTicks.value,
+);
+const timeSignatureChangeExists = computed(
+  () => currentTimeSignature.value.measureNumber === currentMeasure.value,
+);
+
+const showValueChangeDialog = async <T extends Component, R>(
+  component: T,
+  componentProps: ExtractPropTypes<T>,
+) => {
+  const { promise, resolve } = Promise.withResolvers<R | "cancelled">();
+
+  Dialog.create({
+    component,
+    componentProps,
+  })
+    .onOk((result: R) => {
+      resolve(result);
+    })
+    .onCancel(() => {
+      resolve("cancelled");
+    });
+
+  const result = await promise;
+  if (result === "cancelled") {
+    return;
+  }
+
+  return result;
+};
+
+const contextMenuHeader = computed(() => {
+  const texts = [];
+  if (tempoChangeExists.value) {
+    texts.push(`テンポ：${currentTempo.value.bpm}`);
+  }
+  if (timeSignatureChangeExists.value) {
+    texts.push(
+      `拍子：${currentTimeSignature.value.beats}/${currentTimeSignature.value.beatType}`,
+    );
+  }
+  return texts.join("、");
+});
+const contextMenudata = computed<ContextMenuItemData[]>(
+  () =>
+    [
+      {
+        type: "button",
+        label: tempoChangeExists.value
+          ? `テンポ変化を編集`
+          : "テンポ変化を挿入",
+        onClick: async () => {
+          const result = await showValueChangeDialog<
+            typeof TempoChangeDialog,
+            {
+              tempoChange: Omit<Tempo, "position">;
+            }
+          >(TempoChangeDialog, {
+            tempoChange: tempoChangeExists.value
+              ? currentTempo.value
+              : undefined,
+            mode: tempoChangeExists.value ? "edit" : "add",
+          });
+          if (!result) {
+            return;
+          }
+          emit("setTempo", {
+            ...result.tempoChange,
+            position: playheadTicks.value,
+          });
+
+          contextMenu.value?.hide();
+        },
+        disableWhenUiLocked: true,
+      },
+      tempoChangeExists.value && {
+        type: "button",
+        label: "テンポ変化を削除",
+        disabled: currentTempo.value.position === 0,
+        onClick: () => {
+          emit("removeTempo", playheadTicks.value);
+
+          contextMenu.value?.hide();
+        },
+        disableWhenUiLocked: true,
+      },
+      {
+        type: "button",
+        label: timeSignatureChangeExists.value
+          ? `拍子変化を編集`
+          : "拍子変化を挿入",
+        onClick: async () => {
+          const result = await showValueChangeDialog<
+            typeof TimeSignatureChangeDialog,
+            {
+              timeSignatureChange: Omit<TimeSignature, "measureNumber">;
+            }
+          >(TimeSignatureChangeDialog, {
+            timeSignatureChange: timeSignatureChangeExists.value
+              ? currentTimeSignature.value
+              : undefined,
+            mode: timeSignatureChangeExists.value ? "edit" : "add",
+          });
+          if (!result) {
+            return;
+          }
+          emit("setTimeSignature", {
+            ...result.timeSignatureChange,
+            measureNumber: currentMeasure.value,
+          });
+
+          contextMenu.value?.hide();
+        },
+        disableWhenUiLocked: true,
+      },
+      timeSignatureChangeExists.value && {
+        type: "button",
+        label: "拍子変化を削除",
+        disabled: currentMeasure.value === 1,
+        onClick: () => {
+          emit("removeTimeSignature", currentMeasure.value);
+
+          contextMenu.value?.hide();
+        },
+        disableWhenUiLocked: true,
+      },
+    ].filter((item) => item !== false) as ContextMenuItemData[],
+);
 </script>
 
 <style scoped lang="scss">
@@ -213,6 +561,26 @@ onUnmounted(() => {
   font-weight: 700;
   fill: var(--scheme-color-on-surface-variant);
 }
+.sequencer-ruler-value-change {
+  font-weight: 700;
+  fill: var(--scheme-color-on-surface-variant);
+
+  &:hover {
+    cursor: pointer;
+
+    text-decoration: underline;
+  }
+}
+
+.sequencer-ruler-value-change-line {
+  backface-visibility: hidden;
+  stroke: var(--scheme-color-on-surface-variant);
+  stroke-width: 1px;
+}
+
+.sequencer-ruler-value-change-hitbox {
+  pointer-events: all;
+}
 
 .sequencer-ruler-measure-line {
   backface-visibility: hidden;
diff --git a/src/components/Sing/SequencerRuler/index.stories.ts b/src/components/Sing/SequencerRuler/index.stories.ts
index 48eb5e002d..8e7e625df0 100644
--- a/src/components/Sing/SequencerRuler/index.stories.ts
+++ b/src/components/Sing/SequencerRuler/index.stories.ts
@@ -4,10 +4,17 @@ import { ref } from "vue";
 
 import Presentation from "./Presentation.vue";
 import { UnreachableError } from "@/type/utility";
+import { ZOOM_X_MIN, ZOOM_X_MAX, ZOOM_X_STEP } from "@/sing/viewHelper";
 
 const meta: Meta<typeof Presentation> = {
   component: Presentation,
   args: {
+    tempos: [
+      {
+        bpm: 120,
+        position: 0,
+      },
+    ],
     timeSignatures: [
       {
         beats: 4,
@@ -19,10 +26,20 @@ const meta: Meta<typeof Presentation> = {
     tpqn: 480,
     offset: 0,
     numMeasures: 32,
-    sequencerSnapType: 4,
+    sequencerSnapType: 16,
     "onUpdate:playheadTicks": fn<(value: number) => void>(),
     onDeselectAllNotes: fn(),
   },
+  argTypes: {
+    sequencerZoomX: {
+      control: {
+        type: "range",
+        min: ZOOM_X_MIN,
+        max: ZOOM_X_MAX,
+        step: ZOOM_X_STEP,
+      },
+    },
+  },
   render: (args) => ({
     components: { Presentation },
     setup() {
@@ -36,7 +53,87 @@ const meta: Meta<typeof Presentation> = {
 export default meta;
 type Story = StoryObj<typeof Presentation>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  name: "デフォルト",
+  args: {},
+};
+
+export const WithBpmChange: Story = {
+  name: "テンポ変化",
+  args: {
+    tempos: [
+      {
+        bpm: 120,
+        position: 0,
+      },
+      {
+        bpm: 180,
+        position: 480 * 4,
+      },
+      {
+        bpm: 240,
+        position: 480 * 8,
+      },
+    ],
+  },
+};
+
+export const WithTimeSignatureChange: Story = {
+  name: "拍子変化",
+  args: {
+    timeSignatures: [
+      {
+        beats: 4,
+        beatType: 4,
+        measureNumber: 1,
+      },
+      {
+        beats: 3,
+        beatType: 4,
+        measureNumber: 3,
+      },
+      {
+        beats: 9,
+        beatType: 16,
+        measureNumber: 5,
+      },
+    ],
+  },
+};
+
+export const WithOffset: Story = {
+  name: "スクロール",
+  args: {
+    offset: 480 * 4,
+  },
+};
+
+export const Dense: Story = {
+  name: "密集表示",
+  args: {
+    timeSignatures: [
+      {
+        beats: 4,
+        beatType: 4,
+        measureNumber: 1,
+      },
+    ],
+    tempos: [
+      {
+        bpm: 120,
+        position: 0,
+      },
+      {
+        bpm: 120,
+        position: 400,
+      },
+      {
+        bpm: 120,
+        position: 480,
+      },
+    ],
+  },
+};
 
 export const MovePlayhead: Story = {
   name: "再生位置を移動",
diff --git a/src/components/Sing/ToolBar/ToolBar.vue b/src/components/Sing/ToolBar/ToolBar.vue
index bfbee5abb5..507a935ff3 100644
--- a/src/components/Sing/ToolBar/ToolBar.vue
+++ b/src/components/Sing/ToolBar/ToolBar.vue
@@ -41,7 +41,7 @@
         hideBottomSpace
         outlined
         unelevated
-        label="BPM"
+        label="テンポ"
         class="sing-tempo"
         padding="0"
         @update:modelValue="setBpmInputBuffer"
@@ -58,7 +58,7 @@
         <template #control>
           <div class="sing-beats">
             <QSelect
-              :modelValue="timeSignatures[0].beats"
+              :modelValue="currentTimeSignature.beats"
               :options="beatsOptions"
               hideBottomSpace
               hideDropdownIcon
@@ -73,7 +73,7 @@
             />
             <div class="sing-beats-separator">/</div>
             <QSelect
-              :modelValue="timeSignatures[0].beatType"
+              :modelValue="currentTimeSignature.beatType"
               :options="beatTypeOptions"
               hideBottomSpace
               hideDropdownIcon
@@ -165,7 +165,9 @@ import EditTargetSwicher from "./EditTargetSwicher.vue";
 import { useStore } from "@/store";
 
 import {
+  BEAT_TYPES,
   getSnapTypes,
+  getTimeSignaturePositions,
   isTriplet,
   isValidBeatType,
   isValidBeats,
@@ -176,6 +178,7 @@ import {
 import CharacterMenuButton from "@/components/Sing/CharacterMenuButton/MenuButton.vue";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { SequencerEditTarget } from "@/store/type";
+import { UnreachableError } from "@/type/utility";
 
 const store = useStore();
 
@@ -245,6 +248,12 @@ const volumeRangeAdjustment = computed(
   () => store.getters.SELECTED_TRACK.volumeRangeAdjustment,
 );
 const selectedTrackId = computed(() => store.getters.SELECTED_TRACK_ID);
+const tpqn = computed(() => store.state.tpqn);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
+
+const tsPositions = computed(() => {
+  return getTimeSignaturePositions(timeSignatures.value, tpqn.value);
+});
 
 const beatsOptions = computed(() => {
   return Array.from({ length: 32 }, (_, i) => ({
@@ -253,36 +262,15 @@ const beatsOptions = computed(() => {
   }));
 });
 
-const beatTypeOptions = computed(() => {
-  return [2, 4, 8, 16, 32].map((beatType) => ({
-    label: beatType.toString(),
-    value: beatType,
-  }));
-});
+const beatTypeOptions = BEAT_TYPES.map((beatType) => ({
+  label: beatType.toString(),
+  value: beatType,
+}));
 
 const bpmInputBuffer = ref(120);
-const beatsInputBuffer = ref(4);
-const beatTypeInputBuffer = ref(4);
 const keyRangeAdjustmentInputBuffer = ref(0);
 const volumeRangeAdjustmentInputBuffer = ref(0);
 
-watch(
-  tempos,
-  () => {
-    bpmInputBuffer.value = tempos.value[0].bpm;
-  },
-  { deep: true, immediate: true },
-);
-
-watch(
-  timeSignatures,
-  () => {
-    beatsInputBuffer.value = timeSignatures.value[0].beats;
-    beatTypeInputBuffer.value = timeSignatures.value[0].beatType;
-  },
-  { deep: true, immediate: true },
-);
-
 watch(
   keyRangeAdjustment,
   () => {
@@ -307,15 +295,26 @@ const setBpmInputBuffer = (bpmStr: string | number | null) => {
   bpmInputBuffer.value = bpmValue;
 };
 
+const currentTimeSignature = computed(() => {
+  const maybeTimeSignature = timeSignatures.value.findLast(
+    (_timeSignature, i) => tsPositions.value[i] <= playheadTicks.value,
+  );
+  if (!maybeTimeSignature) {
+    throw new UnreachableError("assert: at least one time signature exists");
+  }
+  return maybeTimeSignature;
+});
+
 const setBeats = (beats: { label: string; value: number }) => {
   if (!isValidBeats(beats.value)) {
     return;
   }
+
   void store.actions.COMMAND_SET_TIME_SIGNATURE({
     timeSignature: {
-      measureNumber: 1,
+      measureNumber: currentTimeSignature.value.measureNumber,
       beats: beats.value,
-      beatType: timeSignatures.value[0].beatType,
+      beatType: currentTimeSignature.value.beatType,
     },
   });
 };
@@ -326,8 +325,8 @@ const setBeatType = (beatType: { label: string; value: number }) => {
   }
   void store.actions.COMMAND_SET_TIME_SIGNATURE({
     timeSignature: {
-      measureNumber: 1,
-      beats: timeSignatures.value[0].beats,
+      measureNumber: currentTimeSignature.value.measureNumber,
+      beats: currentTimeSignature.value.beats,
       beatType: beatType.value,
     },
   });
@@ -355,9 +354,15 @@ const setVolumeRangeAdjustmentInputBuffer = (
 
 const setTempo = () => {
   const bpm = bpmInputBuffer.value;
+  const position = tempos.value.findLast(
+    (tempo) => tempo.position <= playheadTicks.value,
+  )?.position;
+  if (position == undefined) {
+    throw new UnreachableError("assert: at least one tempo exists");
+  }
   void store.actions.COMMAND_SET_TEMPO({
     tempo: {
-      position: 0,
+      position,
       bpm,
     },
   });
@@ -379,6 +384,20 @@ const setVolumeRangeAdjustment = () => {
   });
 };
 
+watch(
+  [tempos, playheadTicks],
+  () => {
+    const currentTempo = tempos.value.findLast(
+      (tempo) => tempo.position <= playheadTicks.value,
+    );
+    if (!currentTempo) {
+      throw new UnreachableError("assert: at least one tempo exists");
+    }
+    bpmInputBuffer.value = currentTempo.bpm;
+  },
+  { immediate: true },
+);
+
 const nowPlaying = computed(() => store.state.nowPlaying);
 
 const play = () => {
diff --git a/src/composables/useSequencerGridPattern.ts b/src/composables/useSequencerGridPattern.ts
new file mode 100644
index 0000000000..2a59ea7ea1
--- /dev/null
+++ b/src/composables/useSequencerGridPattern.ts
@@ -0,0 +1,60 @@
+import { computed, Ref } from "vue";
+import { tickToBaseX } from "@/sing/viewHelper";
+import { TimeSignature } from "@/store/type";
+
+const beatWidth = (
+  timeSignature: TimeSignature,
+  tpqn: number,
+  sequencerZoomX: number,
+) => {
+  const beatType = timeSignature.beatType;
+  const wholeNoteDuration = tpqn * 4;
+  const beatTicks = wholeNoteDuration / beatType;
+  return tickToBaseX(beatTicks, tpqn) * sequencerZoomX;
+};
+
+export const useSequencerGrid = ({
+  timeSignatures,
+  tpqn,
+  sequencerZoomX,
+  numMeasures,
+}: {
+  timeSignatures: Ref<TimeSignature[]>;
+  tpqn: Ref<number>;
+  sequencerZoomX: Ref<number>;
+  numMeasures: Ref<number>;
+}) =>
+  computed(() => {
+    const gridPatterns: {
+      id: string;
+      x: number;
+      timeSignature: TimeSignature;
+      beatWidth: number;
+      beatsPerMeasure: number;
+      patternWidth: number;
+      width: number;
+    }[] = [];
+    for (const [i, timeSignature] of timeSignatures.value.entries()) {
+      const maybeNextTimeSignature = timeSignatures.value.at(i + 1);
+      const nextMeasureNumber =
+        maybeNextTimeSignature?.measureNumber ?? numMeasures.value + 1;
+      const patternWidth =
+        beatWidth(timeSignature, tpqn.value, sequencerZoomX.value) *
+        timeSignature.beats;
+      gridPatterns.push({
+        id: `sequencer-grid-pattern-${i}`,
+        timeSignature,
+        x:
+          gridPatterns.length === 0
+            ? 0
+            : gridPatterns[gridPatterns.length - 1].x +
+              gridPatterns[gridPatterns.length - 1].width,
+        beatWidth: beatWidth(timeSignature, tpqn.value, sequencerZoomX.value),
+        beatsPerMeasure: timeSignature.beats,
+        patternWidth,
+        width: patternWidth * (nextMeasureNumber - timeSignature.measureNumber),
+      });
+    }
+
+    return gridPatterns;
+  });
diff --git a/src/domain/frontend/log.ts b/src/domain/frontend/log.ts
index 2aa6cdfbd2..4cb2aa8598 100644
--- a/src/domain/frontend/log.ts
+++ b/src/domain/frontend/log.ts
@@ -2,13 +2,21 @@
 // TODO: window.backendをDIできるようにする
 export function createLogger(scope: string) {
   const createInner =
-    (method: "logInfo" | "logError" | "logWarn") =>
+    (
+      method: "logInfo" | "logWarn" | "logError",
+      fallbackMethod: "info" | "warn" | "error",
+    ) =>
     (...args: unknown[]) => {
+      if (window.backend == undefined) {
+        // eslint-disable-next-line no-console
+        console[fallbackMethod](...args);
+        return;
+      }
       window.backend[method](`[${scope}]`, ...args);
     };
   return {
-    info: createInner("logInfo"),
-    error: createInner("logError"),
-    warn: createInner("logWarn"),
+    info: createInner("logInfo", "info"),
+    warn: createInner("logWarn", "warn"),
+    error: createInner("logError", "error"),
   };
 }
diff --git a/src/helpers/textWidth.ts b/src/helpers/textWidth.ts
new file mode 100644
index 0000000000..fced1cac29
--- /dev/null
+++ b/src/helpers/textWidth.ts
@@ -0,0 +1,41 @@
+import { z } from "zod";
+
+let textWidthTempCanvas: HTMLCanvasElement | undefined;
+let textWidthTempContext: CanvasRenderingContext2D | undefined;
+
+const textWidthCacheKeySchema = z.string().brand("TextWidthCacheKey");
+type TextWidthCacheKey = z.infer<typeof textWidthCacheKeySchema>;
+
+export type FontSpecification = {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+};
+const getTextWidthCacheKey = (text: string, font: FontSpecification) =>
+  textWidthCacheKeySchema.parse(
+    `${text}-${font.fontFamily}-${font.fontWeight}-${font.fontSize}`,
+  );
+
+const textWidthCache = new Map<TextWidthCacheKey, number>();
+/**
+ * 特定のフォントでの文字列の描画幅を取得する。
+ * @see  https://stackoverflow.com/a/21015393
+ */
+export function predictTextWidth(text: string, font: FontSpecification) {
+  const key = getTextWidthCacheKey(text, font);
+  const maybeCached = textWidthCache.get(key);
+  if (maybeCached != undefined) {
+    return maybeCached;
+  }
+  if (!textWidthTempCanvas) {
+    textWidthTempCanvas = document.createElement("canvas");
+    textWidthTempContext = textWidthTempCanvas.getContext("2d") ?? undefined;
+  }
+  if (!textWidthTempContext) {
+    throw new Error("Failed to get 2d context");
+  }
+  textWidthTempContext.font = `${font.fontWeight} ${font.fontSize}px ${font.fontFamily}`;
+  const metrics = textWidthTempContext.measureText(text);
+  textWidthCache.set(key, metrics.width);
+  return metrics.width;
+}
diff --git a/src/sing/domain.ts b/src/sing/domain.ts
index 850d691a75..c5e6a5468b 100644
--- a/src/sing/domain.ts
+++ b/src/sing/domain.ts
@@ -19,7 +19,7 @@ export type MeasuresBeats = {
   beats: number;
 };
 
-const BEAT_TYPES = [2, 4, 8, 16];
+export const BEAT_TYPES = [2, 4, 8, 16, 32];
 const MIN_BPM = 40;
 const MAX_SNAP_TYPE = 32;
 
diff --git a/src/store/singing.ts b/src/store/singing.ts
index 611fe2ce22..fd501930b4 100644
--- a/src/store/singing.ts
+++ b/src/store/singing.ts
@@ -1403,7 +1403,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           state.tempos,
           state.timeSignatures,
           state.tpqn,
-        ) + 1,
+        ) + 8,
       );
     },
   },
@@ -3596,16 +3596,6 @@ export const singingCommandStore = transformCommandStore(
           const { tempos, timeSignatures, tracks, tpqn } =
             ufProjectToVoicevox(project);
 
-          if (tempos.length > 1) {
-            logger.warn("Multiple tempos are not supported.");
-          }
-          if (timeSignatures.length > 1) {
-            logger.warn("Multiple time signatures are not supported.");
-          }
-
-          tempos.splice(1, tempos.length - 1); // TODO: 複数テンポに対応したら削除
-          timeSignatures.splice(1, timeSignatures.length - 1); // TODO: 複数拍子に対応したら削除
-
           if (tpqn !== state.tpqn) {
             throw new Error("TPQN does not match. Must be converted.");
           }
@@ -3648,9 +3638,6 @@ export const singingCommandStore = transformCommandStore(
           const { tempos, timeSignatures, tracks, tpqn, trackOrder } =
             project.song;
 
-          tempos.splice(1, tempos.length - 1); // TODO: 複数テンポに対応したら削除
-          timeSignatures.splice(1, timeSignatures.length - 1); // TODO: 複数拍子に対応したら削除
-
           if (tpqn !== state.tpqn) {
             throw new Error("TPQN does not match. Must be converted.");
           }
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" "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"
index 460a7f7cd9..140b1a6bf7 100644
--- "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"
+++ "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"
@@ -1,5 +1,6 @@
 // 起動中のStorybookで様々なStoryを表示し、スクリーンショットを撮って比較するVRT。
 // テスト自体はend-to-endではないが、Playwrightを使う関係でe2eディレクトリ内でテストしている。
+import fs from "node:fs/promises";
 import { test, expect, Locator } from "@playwright/test";
 import z from "zod";
 
@@ -41,6 +42,17 @@ try {
 
 const currentStories = getStoriesToTest(index);
 
+const screenshots = await fs.readdir(
+  `${import.meta.dirname}/スクリーンショット.spec.mts-snapshots/`,
+);
+for (const screenshot of screenshots) {
+  if (!currentStories.some((story) => screenshot.startsWith(story.id))) {
+    await fs.unlink(
+      `${import.meta.dirname}/スクリーンショット.spec.mts-snapshots/${screenshot}`,
+    );
+  }
+}
+
 const allStories: Record<string, Story[]> = {};
 for (const story of currentStories) {
   if (!allStories[story.title]) {
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-basecheckbox--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-basecheckbox--default-dark-storybook-win32.png"
deleted file mode 100644
index e5600783b2..0000000000
Binary files "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-basecheckbox--default-dark-storybook-win32.png" and /dev/null 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-basecheckbox--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-basecheckbox--default-light-storybook-win32.png"
deleted file mode 100644
index 3ffcb50ccb..0000000000
Binary files "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-basecheckbox--default-light-storybook-win32.png" and /dev/null 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-sing-changevaluedialog-tempochangedialog--change-opened-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-sing-changevaluedialog-tempochangedialog--change-opened-dark-storybook-win32.png"
new file mode 100644
index 0000000000..9a7606c113
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-sing-changevaluedialog-tempochangedialog--change-opened-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-sing-changevaluedialog-tempochangedialog--change-opened-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-sing-changevaluedialog-tempochangedialog--change-opened-light-storybook-win32.png"
new file mode 100644
index 0000000000..c0769287d6
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-sing-changevaluedialog-tempochangedialog--change-opened-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-sing-changevaluedialog-tempochangedialog--create-opened-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-sing-changevaluedialog-tempochangedialog--create-opened-dark-storybook-win32.png"
new file mode 100644
index 0000000000..45cdf78ae8
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-sing-changevaluedialog-tempochangedialog--create-opened-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-sing-changevaluedialog-tempochangedialog--create-opened-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-sing-changevaluedialog-tempochangedialog--create-opened-light-storybook-win32.png"
new file mode 100644
index 0000000000..60e11a9711
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-sing-changevaluedialog-tempochangedialog--create-opened-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-sing-changevaluedialog-timesignaturechangedialog--change-opened-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-sing-changevaluedialog-timesignaturechangedialog--change-opened-dark-storybook-win32.png"
new file mode 100644
index 0000000000..a602d170c0
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-sing-changevaluedialog-timesignaturechangedialog--change-opened-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-sing-changevaluedialog-timesignaturechangedialog--change-opened-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-sing-changevaluedialog-timesignaturechangedialog--change-opened-light-storybook-win32.png"
new file mode 100644
index 0000000000..3e4ee48433
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-sing-changevaluedialog-timesignaturechangedialog--change-opened-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-sing-changevaluedialog-timesignaturechangedialog--create-opened-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-sing-changevaluedialog-timesignaturechangedialog--create-opened-dark-storybook-win32.png"
new file mode 100644
index 0000000000..f98beaf90d
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-sing-changevaluedialog-timesignaturechangedialog--create-opened-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-sing-changevaluedialog-timesignaturechangedialog--create-opened-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-sing-changevaluedialog-timesignaturechangedialog--create-opened-light-storybook-win32.png"
new file mode 100644
index 0000000000..9784f41b03
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-sing-changevaluedialog-timesignaturechangedialog--create-opened-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-sing-sequencergrid--default-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-sing-sequencergrid--default-storybook-win32.png"
new file mode 100644
index 0000000000..5e8138d55a
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-sing-sequencergrid--default-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-sing-sequencergrid--with-time-signature-change-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-sing-sequencergrid--with-time-signature-change-dark-storybook-win32.png"
new file mode 100644
index 0000000000..bc8cc905e2
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-sing-sequencergrid--with-time-signature-change-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-sing-sequencergrid--with-time-signature-change-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-sing-sequencergrid--with-time-signature-change-light-storybook-win32.png"
new file mode 100644
index 0000000000..865f756ea9
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-sing-sequencergrid--with-time-signature-change-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-sing-sequencergrid--with-time-signature-change-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-sing-sequencergrid--with-time-signature-change-storybook-win32.png"
new file mode 100644
index 0000000000..17dd6ea1da
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-sing-sequencergrid--with-time-signature-change-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-sing-sequencerruler--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-sing-sequencerruler--default-dark-storybook-win32.png"
index 3a3f4c6c7a..d9bd5289d8 100644
Binary files "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-sing-sequencerruler--default-dark-storybook-win32.png" 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-sing-sequencerruler--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-sing-sequencerruler--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-sing-sequencerruler--default-light-storybook-win32.png"
index 87c6d0aad9..227b1735c0 100644
Binary files "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-sing-sequencerruler--default-light-storybook-win32.png" 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-sing-sequencerruler--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-sing-sequencerruler--default-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-sing-sequencerruler--default-storybook-win32.png"
index 38d7351162..d27683fad5 100644
Binary files "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-sing-sequencerruler--default-storybook-win32.png" 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-sing-sequencerruler--default-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-sing-sequencerruler--dense-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-sing-sequencerruler--dense-dark-storybook-win32.png"
new file mode 100644
index 0000000000..4c92c33a0b
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-sing-sequencerruler--dense-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-sing-sequencerruler--dense-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-sing-sequencerruler--dense-light-storybook-win32.png"
new file mode 100644
index 0000000000..52168d3efa
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-sing-sequencerruler--dense-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-sing-sequencerruler--with-bpm-change-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-sing-sequencerruler--with-bpm-change-dark-storybook-win32.png"
new file mode 100644
index 0000000000..70b2dfe918
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-sing-sequencerruler--with-bpm-change-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-sing-sequencerruler--with-bpm-change-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-sing-sequencerruler--with-bpm-change-light-storybook-win32.png"
new file mode 100644
index 0000000000..bededfc443
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-sing-sequencerruler--with-bpm-change-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-sing-sequencerruler--with-bpm-change-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-sing-sequencerruler--with-bpm-change-storybook-win32.png"
new file mode 100644
index 0000000000..80d36a1396
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-sing-sequencerruler--with-bpm-change-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-sing-sequencerruler--with-offset-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-sing-sequencerruler--with-offset-dark-storybook-win32.png"
new file mode 100644
index 0000000000..85b09c1763
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-sing-sequencerruler--with-offset-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-sing-sequencerruler--with-offset-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-sing-sequencerruler--with-offset-light-storybook-win32.png"
new file mode 100644
index 0000000000..d12cbfde46
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-sing-sequencerruler--with-offset-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-sing-sequencerruler--with-offset-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-sing-sequencerruler--with-offset-storybook-win32.png"
new file mode 100644
index 0000000000..b364227e88
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-sing-sequencerruler--with-offset-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-sing-sequencerruler--with-time-signature-change-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-sing-sequencerruler--with-time-signature-change-dark-storybook-win32.png"
new file mode 100644
index 0000000000..a5510d4b5e
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-sing-sequencerruler--with-time-signature-change-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-sing-sequencerruler--with-time-signature-change-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-sing-sequencerruler--with-time-signature-change-light-storybook-win32.png"
new file mode 100644
index 0000000000..32195209fe
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-sing-sequencerruler--with-time-signature-change-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-sing-sequencerruler--with-time-signature-change-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-sing-sequencerruler--with-time-signature-change-storybook-win32.png"
new file mode 100644
index 0000000000..c8604dcb6f
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-sing-sequencerruler--with-time-signature-change-storybook-win32.png" differ