diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 856a835b32..f836d8fb57 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -2622,9 +2622,9 @@ diff.browse_source = Browse source
 diff.parent = parent
 diff.commit = commit
 diff.git-notes = Notes
-diff.git-notes.add = Add Note
-diff.git-notes.remove-header = Remove Note
-diff.git-notes.remove-body = This will remove this Note
+diff.git-notes.add = Add note
+diff.git-notes.remove-header = Remove note
+diff.git-notes.remove-body = This note will be removed.
 diff.data_not_available = Diff content is not available
 diff.options_button = Diff options
 diff.show_diff_stats = Show stats
diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index aaec11385d..28b7bfc89c 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -128,6 +128,9 @@
 											</form>
 										</div>
 									</div>
+									<div id="commit-notes-add-button" class="item">
+										{{ctx.Locale.Tr "repo.diff.git-notes.add"}}
+									</div>
 								</div>
 							</div>
 						{{end}}
@@ -277,20 +280,20 @@
 				<span class="text grey" id="note-authored-time">{{DateUtils.TimeSince .NoteCommit.Author.When}}</span>
 				{{if or ($.Permission.CanWrite $.UnitTypeCode) (not $.Repository.IsArchived) (not .IsDeleted)}}
 					<div class="ui right">
-						<button id="commit-notes-edit-button" class="ui tiny button yellow" data-modal="#delete-note-modal">{{ctx.Locale.Tr "edit"}}</button>
+						<button id="commit-notes-edit-button" class="ui tiny primary button" data-modal="#delete-note-modal">{{ctx.Locale.Tr "edit"}}</button>
 						<button class="ui tiny button red show-modal" data-modal="#delete-note-modal">{{ctx.Locale.Tr "remove"}}</button>
 					</div>
 					<div class="ui small modal" id="delete-note-modal">
 						<div class="header">
 							{{ctx.Locale.Tr "repo.diff.git-notes.remove-header"}}
 						</div>
-						<p>{{ctx.Locale.Tr "repo.diff.git-notes.remove-body"}}</p>
 						<div class="content">
+							<p>{{ctx.Locale.Tr "repo.diff.git-notes.remove-body"}}</p>
 							<div class="text right actions">
 								<form action="{{.Link}}/notes/remove" method="post">
 									{{.CsrfTokenHtml}}
 									<button type="button" class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
-									<button type="submit" class="ui primary button red" href="{{.Link}}/notes/remove">{{ctx.Locale.Tr "remove"}}</button>
+									<button type="submit" class="ui red button" href="{{.Link}}/notes/remove">{{ctx.Locale.Tr "remove"}}</button>
 								</form>
 							</div>
 						</div>
@@ -316,7 +319,6 @@
 				</div>
 			{{end}}
 		{{else if and ($.Permission.CanWrite $.UnitTypeCode) (not $.Repository.IsArchived) (not .IsDeleted)}}
-			<button id="commit-notes-add-button" class="ui primary button green tw-mt-3">{{ctx.Locale.Tr "repo.diff.git-notes.add"}}</button>
 			<div id="commit-notes-add-area" class="ui tw-mt-3 segment tw-hidden">
 				<form class="ui form" action="{{.Link}}/notes" method="post">
 					{{.CsrfTokenHtml}}
diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js
index 88887d1110..988d57b891 100644
--- a/web_src/js/features/repo-commit.js
+++ b/web_src/js/features/repo-commit.js
@@ -38,7 +38,6 @@ export function initCommitNotes() {
   const notesAddButton = document.getElementById('commit-notes-add-button');
   if (notesAddButton !== null) {
     notesAddButton.addEventListener('click', () => {
-      notesAddButton.classList.add('tw-hidden');
       document.getElementById('commit-notes-add-area').classList.remove('tw-hidden');
     });
   }