diff --git a/options/locale/locale_en-US.json b/options/locale/locale_en-US.json
index 307cccf8bd6bf..0f0906e981c52 100644
--- a/options/locale/locale_en-US.json
+++ b/options/locale/locale_en-US.json
@@ -3781,10 +3781,10 @@
   },
   "git.filemode": {
     "changed_filemode": "%[1]s → %[2]s",
-    "directory": "Directory",
-    "normal_file": "Normal file",
-    "executable_file": "Executable file",
-    "symbolic_link": "Symbolic link",
-    "submodule": "Submodule"
+    "directory": "directory",
+    "normal_file": "normal",
+    "executable_file": "executable",
+    "symbolic_link": "symlink",
+    "submodule": "submodule"
   }
 }
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index ff9bd2e792ede..a42e241099aa5 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -91,34 +91,33 @@
 										{{svg "octicon-chevron-down" 18}}
 									{{end}}
 								</button>
-								<div class="tw-font-semibold tw-flex tw-items-center tw-font-mono">
-									{{if $file.IsBin}}
-										<span class="tw-ml-0.5 tw-mr-2">
-											{{ctx.Locale.Tr "repo.diff.bin"}}
-										</span>
-									{{else}}
-										{{template "repo/diff/stats" dict "file" . "root" $}}
-									{{end}}
-								</div>
-								<span class="file tw-flex tw-items-center tw-font-mono tw-flex-1"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>
-									<button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}" data-tooltip-content="{{ctx.Locale.Tr "copy_path"}}">{{svg "octicon-copy" 14}}</button>
+								<span class="file tw-font-mono">
+									<a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>
+									<button class="btn interact-fg tw-p-2 tw-shrink-0" data-clipboard-text="{{$file.Name}}" data-tooltip-content="{{ctx.Locale.Tr "copy_path"}}">{{svg "octicon-copy" 14}}</button>
 									{{if .IsLFSFile}}<span class="ui label">LFS</span>{{end}}
 									{{if $file.IsGenerated}}
-										<span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
+										<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
 									{{end}}
 									{{if $file.IsVendored}}
-										<span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
+										<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
 									{{end}}
 									{{if and $file.Mode $file.OldMode}}
 										{{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}}
 										{{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}
-										<span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
+										<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
 									{{else if $file.Mode}}
-										<span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
+										<span class="ui label tw-font-sans tw-shrink-0">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
 									{{end}}
 								</span>
 							</div>
-							<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
+							<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap tw-ml-2">
+								<div class="tw-font-semibold tw-flex tw-items-center tw-font-mono">
+									{{if $file.IsBin}}
+										{{ctx.Locale.Tr "repo.diff.bin"}}
+									{{else}}
+										{{template "repo/diff/stats" dict "file" . "root" $}}
+									{{end}}
+								</div>
 								{{if $showFileViewToggle}}
 									<div class="ui compact icon buttons">
 										<button class="ui tiny basic button file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-tooltip-content="{{ctx.Locale.Tr "repo.file_view_source"}}">{{svg "octicon-code"}}</button>
diff --git a/templates/repo/diff/stats.tmpl b/templates/repo/diff/stats.tmpl
index d0dff1bd094d9..a136c78479aab 100644
--- a/templates/repo/diff/stats.tmpl
+++ b/templates/repo/diff/stats.tmpl
@@ -1,5 +1,10 @@
-{{Eval .file.Addition "+" .file.Deletion}}
-<span class="diff-stats-bar tw-mx-2" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.stats_desc_file" (Eval .file.Addition "+" .file.Deletion) .file.Addition .file.Deletion}}">
-	{{/* if the denominator is zero, then the float result is "width: NaNpx", as before, it just works */}}
-	<div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .file.Addition "/" "(" .file.Addition "+" .file.Deletion "+" 0.0 ")"}}%"></div>
-</span>
+<div class="tw-flex tw-items-center tw-gap-2 tw-text-[13px] tw-font-sans">
+	<span>
+		{{if .file.Addition}}<span class="tw-text-green">+{{.file.Addition}}</span>{{end}}
+		{{if .file.Deletion}}<span class="tw-text-red">-{{.file.Deletion}}</span>{{end}}
+	</span>
+	<span class="diff-stats-bar" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.stats_desc_file" (Eval .file.Addition "+" .file.Deletion) .file.Addition .file.Deletion}}">
+		{{/* if the denominator is zero, then the float result is "width: NaNpx", as before, it just works */}}
+		<div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .file.Addition "/" "(" .file.Addition "+" .file.Deletion "+" 0.0 ")"}}%"></div>
+	</span>
+</div>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 0bf37ca083807..c4611befc6926 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1684,6 +1684,7 @@ tbody.commit-list {
 .diff-file-header {
   padding: 5px 8px !important;
   box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
+  font-size: 14px !important; /* override h4.ui.header */
   font-weight: var(--font-weight-normal);
   display: flex;
   justify-content: space-between;
@@ -1693,6 +1694,10 @@ tbody.commit-list {
 
 .diff-file-header .file {
   min-width: 0;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 4px;
 }
 
 .diff-file-header .file-link {