diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 118a0ee540..7d71282e40 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -2754,7 +2754,7 @@ branch.included = Included
 branch.create_new_branch = Create branch from branch:
 branch.confirm_create_branch = Create branch
 branch.warning_rename_default_branch = You are renaming the default branch.
-branch.rename_branch_to = Rename "%s" to:
+branch.rename_branch_to = Renaming branch "%s".
 branch.create_branch_operation = Create branch
 branch.new_branch = Create new branch
 branch.new_branch_from = Create new branch from "%s"
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 164ecbf62c..55a7bbcf07 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -32,9 +32,7 @@
 							<td class="right aligned middle aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not $.Repository.IsMirror) (not .IsDeleted)}}
 									<button class="btn interact-bg show-create-branch-modal tw-p-2"
-										data-modal="#create-branch-modal"
 										data-branch-from="{{$.DefaultBranchBranch.DBBranch.Name}}"
-										data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranchBranch.DBBranch.Name}}"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" ($.DefaultBranchBranch.DBBranch.Name)}}"
 									>
 										{{svg "octicon-git-branch"}}
@@ -53,9 +51,8 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
-									<button class="btn interact-bg tw-p-2 show-modal show-rename-branch-modal"
+									<button class="btn interact-bg tw-p-2 show-rename-branch-modal"
 										data-is-default-branch="true"
-										data-modal="#rename-branch-modal"
 										data-old-branch-name="{{$.DefaultBranchBranch.DBBranch.Name}}"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.rename" ($.DefaultBranchBranch.DBBranch.Name)}}"
 									>
@@ -156,11 +153,9 @@
 							</td>
 							<td class="three wide right aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not $.Repository.IsMirror) (not .DBBranch.IsDeleted)}}
-									<button class="btn interact-bg tw-p-2 show-modal show-create-branch-modal"
+									<button class="btn interact-bg tw-p-2 show-create-branch-modal"
 										data-branch-from="{{.DBBranch.Name}}"
-										data-branch-from-urlcomponent="{{PathEscapeSegments .DBBranch.Name}}"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" .DBBranch.Name}}"
-										data-modal="#create-branch-modal" data-name="{{.DBBranch.Name}}"
 									>
 										{{svg "octicon-git-branch"}}
 									</button>
@@ -178,10 +173,9 @@
 									</div>
 								{{end}}
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted) (not $.IsMirror)}}
-									<button class="btn interact-bg tw-p-2 show-modal show-rename-branch-modal"
+									<button class="btn interact-bg tw-p-2 show-rename-branch-modal"
 										data-is-default-branch="false"
 										data-old-branch-name="{{.DBBranch.Name}}"
-										data-modal="#rename-branch-modal"
 										data-tooltip-content="{{ctx.Locale.Tr "repo.branch.rename" (.DBBranch.Name)}}"
 									>
 										{{svg "octicon-pencil"}}
@@ -221,44 +215,44 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-<div class="ui mini modal" id="create-branch-modal">
-	<div class="header">
-		{{ctx.Locale.Tr "repo.branch.new_branch"}}
-	</div>
+<dialog id="create-branch-modal">
+	<article>
+		<header>{{ctx.Locale.Tr "repo.branch.new_branch"}}</header>
+		<form class="ui form" id="create-branch-form" action="" data-base-action="{{.Link}}/_new/branch/" method="post">
+			<div class="content">
+				<div class="field">
+					{{ctx.Locale.Tr "repo.branch.create_new_branch"}}
+					<span id="modal-create-branch-from-span"></span>
+				</div>
+				<div class="required field">
+					<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
+					<input id="new_branch_name" name="new_branch_name" required>
+				</div>
+			</div>
+			{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+		</form>
+	</article>
+</dialog>
 
-	<form class="ui form" id="create-branch-form" action="" data-base-action="{{.Link}}/_new/branch/" method="post">
-		<div class="content">
-			<div class="field">
-				{{ctx.Locale.Tr "repo.branch.create_new_branch"}}
-				<span id="modal-create-branch-from-span"></span>
-			</div>
-			<div class="required field">
-				<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
-				<input id="new_branch_name" name="new_branch_name" required>
-			</div>
+<dialog id="rename-branch-modal">
+	<article>
+		<header>{{ctx.Locale.Tr "repo.settings.rename_branch"}}</header>
+		<div class="content default-branch-warning">
+			<div class="ui warning message">{{ctx.Locale.Tr "repo.branch.warning_rename_default_branch"}}</div>
 		</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
-	</form>
-</div>
-
-<div class="ui mini modal" id="rename-branch-modal">
-	<div class="header">
-		{{ctx.Locale.Tr "repo.settings.rename_branch"}}
-	</div>
-	<form class="ui form" action="{{$.Repository.Link}}/settings/rename_branch" method="post">
-		<div class="content">
-			<div class="field default-branch-warning">
-				<span class="text red">{{ctx.Locale.Tr "repo.branch.warning_rename_default_branch"}}</span>
+		<form class="ui form" action="{{$.Repository.Link}}/settings/rename_branch" method="post">
+			<div class="content">
+				<input name="from" type="hidden" required>
+				<div class="field">
+					<span class="label-branch-from" data-locale="{{ctx.Locale.Tr "repo.branch.rename_branch_to"}}"></span>
+				</div>
+				<div class="required field">
+					<label for="to_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
+					<input id="to_branch_name" name="to" required>
+				</div>
 			</div>
-			<div class="field">
-				<span class="text" data-rename-branch-to="{{ctx.Locale.Tr "repo.branch.rename_branch_to"}}"></span>
-			</div>
-			<input name="from" type="hidden" required>
-			<div class="required field">
-				<input name="to" required>
-			</div>
-		</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
-	</form>
-</div>
+			{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
+		</form>
+	</article>
+</dialog>
 {{template "base/footer" .}}
diff --git a/templates/repo/commit_header.tmpl b/templates/repo/commit_header.tmpl
index 512af1091f..3426d5feac 100644
--- a/templates/repo/commit_header.tmpl
+++ b/templates/repo/commit_header.tmpl
@@ -37,20 +37,10 @@
 						<div class="menu">
 							<div class="ui header">{{ctx.Locale.Tr "repo.commit.operations"}}</div>
 							<div class="divider"></div>
-							<div class="item show-create-branch-modal"
-								data-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" (.CommitID)}}" {{/* used by the form */}}
-								data-branch-from="{{ShortSha .CommitID}}"
-								data-branch-from-urlcomponent="{{.CommitID}}"
-								data-modal="#create-branch-modal">
+							<div class="item show-modal" data-modal="#create-branch-modal">
 								{{ctx.Locale.Tr "repo.branch.create_branch_operation"}}
 							</div>
-							<div class="item show-create-branch-modal"
-								data-content="{{ctx.Locale.Tr "repo.branch.new_branch_from" (.CommitID)}}" {{/* used by the form */}}
-								data-branch-from="{{ShortSha .CommitID}}"
-								data-branch-from-urlcomponent="{{.CommitID}}"
-								data-modal="#create-tag-modal"
-								data-modal-from-span="#modal-create-tag-from-span"
-								data-modal-form="#create-tag-form">
+							<div class="item show-modal" data-modal="#create-tag-modal">
 								{{ctx.Locale.Tr "repo.tag.create_tag_operation"}}
 							</div>
 							<div class="item show-modal revert-button"
@@ -84,53 +74,47 @@
 									</form>
 								</div>
 							</div>
-							<div class="ui small modal" id="create-branch-modal">
-								<div class="header">
-									{{ctx.Locale.Tr "repo.branch.new_branch"}}
-								</div>
-								<div class="content">
-									<form class="ui form" id="create-branch-form" action="" data-base-action="{{.RepoLink}}/branches/_new/commit/" method="post">
-										<div class="field">
-											<label>
-												{{ctx.Locale.Tr "repo.branch.new_branch_from" (`<span class="text" id="modal-create-branch-from-span"></span>`|SafeHTML)}}
-											</label>
+							<dialog id="create-branch-modal">
+								<article>
+									<header>{{ctx.Locale.Tr "repo.branch.new_branch"}}</header>
+									<form class="ui form" action="{{.RepoLink}}/branches/_new/commit/{{.CommitID}}" method="post">
+										<div class="content">
+											<div class="field">
+												<label><span class="text">{{ctx.Locale.Tr "repo.branch.new_branch_from" (ShortSha .CommitID)}}</span></label>
+											</div>
+											<div class="required field">
+												<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
+												<input id="new_branch_name" name="new_branch_name" required>
+											</div>
 										</div>
-										<div class="required field">
-											<label for="new_branch_name">{{ctx.Locale.Tr "repo.branch.name"}}</label>
-											<input id="new_branch_name" name="new_branch_name" required>
-										</div>
-
-										<div class="text right actions">
-											<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
+										<div class="actions">
+											<button type="button" class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
 											<button class="ui primary button">{{ctx.Locale.Tr "repo.branch.confirm_create_branch"}}</button>
 										</div>
 									</form>
-								</div>
-							</div>
-							<div class="ui small modal" id="create-tag-modal">
-								<div class="header">
-									{{ctx.Locale.Tr "repo.tag.create_tag_operation"}}
-								</div>
-								<div class="content">
-									<form class="ui form" id="create-tag-form" action="" data-base-action="{{.RepoLink}}/branches/_new/commit/" method="post">
-										<input type="hidden" name="create_tag" value="true">
-										<div class="field">
-											<label>
-												{{ctx.Locale.Tr "repo.tag.create_tag_from" (`<span class="text" id="modal-create-tag-from-span"></span>`|SafeHTML)}}
-											</label>
+								</article>
+							</dialog>
+							<dialog id="create-tag-modal">
+								<article>
+									<header>{{ctx.Locale.Tr "repo.tag.create_tag_operation"}}</header>
+									<form class="ui form" action="{{.RepoLink}}/branches/_new/commit/{{.CommitID}}" method="post">
+										<div class="content">
+											<input type="hidden" name="create_tag" value="true">
+											<div class="field">
+												<label><span class="text">{{ctx.Locale.Tr "repo.tag.create_tag_from" (ShortSha .CommitID)}}</span></label>
+											</div>
+											<div class="required field">
+												<label for="new_branch_name">{{ctx.Locale.Tr "repo.release.tag_name"}}</label>
+												<input id="new_branch_name" name="new_branch_name" required>
+											</div>
 										</div>
-										<div class="required field">
-											<label for="new_branch_name">{{ctx.Locale.Tr "repo.release.tag_name"}}</label>
-											<input id="new_branch_name" name="new_branch_name" required>
-										</div>
-
-										<div class="text right actions">
-											<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
+										<div class="actions">
+											<button type="button" class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
 											<button class="ui primary button">{{ctx.Locale.Tr "repo.tag.confirm_create_tag"}}</button>
 										</div>
 									</form>
-								</div>
-							</div>
+								</article>
+							</dialog>
 							{{if not .NoteRendered}}
 								<div id="commit-notes-add-button" class="item">
 									{{ctx.Locale.Tr "repo.diff.git-notes.add"}}
diff --git a/tests/e2e/branch-operations.test.e2e.ts b/tests/e2e/branch-operations.test.e2e.ts
new file mode 100644
index 0000000000..8d8bdf691c
--- /dev/null
+++ b/tests/e2e/branch-operations.test.e2e.ts
@@ -0,0 +1,95 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// templates/repo/branch/list.tmpl
+// web_src/js/features/repo-branch.ts
+// @watch end
+
+import {expect} from '@playwright/test';
+import {dynamic_id, test} from './utils_e2e.ts';
+import {screenshot} from './shared/screenshots.ts';
+
+test.use({user: 'user2'});
+
+test('Create branch from branch', async ({page}) => {
+  let response = await page.goto('/user2/repo1/branches');
+  expect(response?.status()).toBe(200);
+
+  // Open create branch modal.
+  await page.getByRole('button', {name: 'Create new branch from "branch2"'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+  await screenshot(page, page.locator('#create-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeHidden();
+
+  // Open it again and make a branch.
+  await page.getByRole('button', {name: 'Create new branch from "branch2"'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Confirm'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
+
+test('Rename normal branch', async ({page}) => {
+  let response = await page.goto('/user2/repo1/branches');
+  expect(response?.status()).toBe(200);
+
+  // Open rename branch modal.
+  await page.locator('button[data-is-default-branch="false"]:not([data-old-branch-name="branch2"])').first().click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeHidden();
+  await screenshot(page, page.locator('#rename-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#rename-branch-modal')).toBeHidden();
+
+  // Open it again and rename the branch.
+  await page.locator('button[data-is-default-branch="false"]:not([data-old-branch-name="branch2"])').first().click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeHidden();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Confirm'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
+
+test('Rename default branch', async ({page}) => {
+  let response = await page.goto('/user2/repo1/branches');
+  expect(response?.status()).toBe(200);
+
+  // Open rename branch modal.
+  await page.locator('button[data-is-default-branch="true"]').click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeVisible();
+  await screenshot(page, page.locator('#rename-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#rename-branch-modal')).toBeHidden();
+
+  // Open it again and rename the branch.
+  await page.locator('button[data-is-default-branch="true"]').click();
+  await expect(page.locator('#rename-branch-modal')).toBeVisible();
+  await expect(page.locator('#rename-branch-modal .warning')).toBeVisible();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Confirm'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
diff --git a/tests/e2e/commit-operations.test.e2e.ts b/tests/e2e/commit-operations.test.e2e.ts
new file mode 100644
index 0000000000..6ef02b66f8
--- /dev/null
+++ b/tests/e2e/commit-operations.test.e2e.ts
@@ -0,0 +1,68 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// templates/repo/commit_header.tmpl
+// @watch end
+
+import {expect} from '@playwright/test';
+import {dynamic_id, test} from './utils_e2e.ts';
+import {screenshot} from './shared/screenshots.ts';
+
+test.use({user: 'user2'});
+
+test('Create branch from commit', async ({page}) => {
+  let response = await page.goto('/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d');
+  expect(response?.status()).toBe(200);
+
+  // Open create branch modal.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create branch'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+  await screenshot(page, page.locator('#create-branch-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeHidden();
+
+  // Open it again and make a branch.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create branch'}).click();
+  await expect(page.locator('#create-branch-modal')).toBeVisible();
+
+  const branchName = dynamic_id();
+  await page.getByRole('textbox').fill(branchName);
+  await page.getByRole('button', {name: 'Create branch'}).click();
+
+  // Verify branch exists.
+  response = await page.goto(`/user2/repo1/src/branch/${branchName}`);
+  expect(response?.status()).toBe(200);
+});
+
+test('Create tag from commit', async ({page}) => {
+  let response = await page.goto('/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d');
+  expect(response?.status()).toBe(200);
+
+  // Open create tag modal.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create tag'}).click();
+  await expect(page.locator('#create-tag-modal')).toBeVisible();
+  await screenshot(page, page.locator('#create-tag-modal'));
+
+  // Check that it can be cancelled.
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await expect(page.locator('#create-tag-modal')).toBeHidden();
+
+  // Open it again and make a branch.
+  await page.locator('.commit-header-buttons .dropdown.button').click();
+  await page.getByRole('option', {name: 'Create tag'}).click();
+  await expect(page.locator('#create-tag-modal')).toBeVisible();
+
+  const tagName = dynamic_id();
+  await page.getByRole('textbox').fill(tagName);
+  await page.getByRole('button', {name: 'Create tag'}).click();
+
+  // Verify tag exists.
+  response = await page.goto(`/user2/repo1/releases/tag/${tagName}`);
+  expect(response?.status()).toBe(200);
+});
diff --git a/web_src/css/modules/dialog.css b/web_src/css/modules/dialog.css
index 711d54b3ea..f31d34ccd9 100644
--- a/web_src/css/modules/dialog.css
+++ b/web_src/css/modules/dialog.css
@@ -69,6 +69,10 @@ dialog .content {
   color: var(--color-text);
 }
 
+dialog .content:not(.tw-hidden) + form > .content {
+  padding-top: 0;
+}
+
 dialog .actions {
   background: var(--color-secondary-bg);
   border-color: var(--color-secondary);
diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js
deleted file mode 100644
index b9ffc6127f..0000000000
--- a/web_src/js/features/repo-branch.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import $ from 'jquery';
-import {toggleElem} from '../utils/dom.js';
-
-export function initRepoBranchButton() {
-  initRepoCreateBranchButton();
-  initRepoRenameBranchButton();
-}
-
-function initRepoCreateBranchButton() {
-  // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code)
-  for (const el of document.querySelectorAll('.show-create-branch-modal')) {
-    el.addEventListener('click', () => {
-      const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form';
-      const modalForm = document.querySelector(modalFormName);
-      if (!modalForm) return;
-      modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`;
-
-      const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
-      document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');
-
-      $(el.getAttribute('data-modal')).modal('show');
-    });
-  }
-}
-
-function initRepoRenameBranchButton() {
-  for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
-    el.addEventListener('click', () => {
-      const target = el.getAttribute('data-modal');
-      const modal = document.querySelector(target);
-      const oldBranchName = el.getAttribute('data-old-branch-name');
-      modal.querySelector('input[name=from]').value = oldBranchName;
-
-      // display the warning that the branch which is chosen is the default branch
-      const warn = modal.querySelector('.default-branch-warning');
-      toggleElem(warn, el.getAttribute('data-is-default-branch') === 'true');
-
-      const text = modal.querySelector('[data-rename-branch-to]');
-      text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName);
-    });
-  }
-}
diff --git a/web_src/js/features/repo-branch.ts b/web_src/js/features/repo-branch.ts
new file mode 100644
index 0000000000..a90045b3fc
--- /dev/null
+++ b/web_src/js/features/repo-branch.ts
@@ -0,0 +1,35 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import {toggleElem} from '../utils/dom.js';
+import {showModal} from '../modules/modal.ts';
+
+export function initRepoBranchButton() {
+  const createBranchModal = document.querySelector('#create-branch-modal');
+  for (const el of document.querySelectorAll('.show-create-branch-modal')) {
+    el.addEventListener('click', () => {
+      const createBranchModalForm = createBranchModal.querySelector('form');
+      const branchFromName = el.getAttribute('data-branch-from');
+
+      createBranchModalForm.action = createBranchModalForm.getAttribute('data-base-action') + encodeURIComponent(branchFromName);
+      createBranchModal.querySelector('#modal-create-branch-from-span').textContent = branchFromName;
+
+      showModal('create-branch-modal', undefined);
+    });
+  }
+
+  const renameBranchModel = document.querySelector('#rename-branch-modal');
+  for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
+    el.addEventListener('click', () => {
+      const oldBranchName = el.getAttribute('data-old-branch-name');
+      (renameBranchModel.querySelector('input[name="from"]') as HTMLInputElement).value = oldBranchName;
+
+      const branchToEl = renameBranchModel.querySelector('.label-branch-from');
+      branchToEl.textContent = branchToEl.getAttribute('data-locale').replace('%s', oldBranchName);
+
+      toggleElem(renameBranchModel.querySelector('.default-branch-warning'), el.getAttribute('data-is-default-branch') === 'true');
+
+      showModal('rename-branch-modal', undefined);
+    });
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 93510c1e23..8701385e92 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -66,7 +66,7 @@ import {initRepoEditor} from './features/repo-editor.js';
 import {initCompSearchUserBox} from './features/comp/SearchUserBox.js';
 import {initInstall} from './features/install.js';
 import {initCompWebHookEditor} from './features/comp/WebHookEditor.js';
-import {initRepoBranchButton} from './features/repo-branch.js';
+import {initRepoBranchButton} from './features/repo-branch.ts';
 import {initCommonOrganization} from './features/common-organization.js';
 import {initRepoWikiForm} from './features/repo-wiki.js';
 import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';