diff --git a/modules/markup/sanitizer_default.go b/modules/markup/sanitizer_default.go
index 0fbf0f0b24c08..7fdf66c4bce5a 100644
--- a/modules/markup/sanitizer_default.go
+++ b/modules/markup/sanitizer_default.go
@@ -30,6 +30,9 @@ func (st *Sanitizer) createDefaultPolicy() *bluemonday.Policy {
 	// Chroma always uses 1-2 letters for style names, we could tolerate it at the moment
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^\w{0,2}$`)).OnElements("span")
 
+	// Line numbers on codepreview
+	policy.AllowAttrs("data-line-number").OnElements("span")
+
 	// Custom URL-Schemes
 	if len(setting.Markdown.CustomURLSchemes) > 0 {
 		policy.AllowURLSchemes(setting.Markdown.CustomURLSchemes...)
diff --git a/services/markup/renderhelper_codepreview.go b/services/markup/renderhelper_codepreview.go
index fa1eb824a2f54..44c0596dcecd8 100644
--- a/services/markup/renderhelper_codepreview.go
+++ b/services/markup/renderhelper_codepreview.go
@@ -110,6 +110,7 @@ func renderRepoFileCodePreview(ctx context.Context, opts markup.RenderCodePrevie
 		"FilePath":         opts.FilePath,
 		"LineStart":        opts.LineStart,
 		"LineStop":         realLineStop,
+		"RepoName":         opts.RepoName,
 		"RepoLink":         dbRepo.Link(),
 		"CommitID":         opts.CommitID,
 		"HighlightLines":   highlightLines,
diff --git a/services/markup/renderhelper_codepreview_test.go b/services/markup/renderhelper_codepreview_test.go
index ea945584b427e..63e7f4d3bdf10 100644
--- a/services/markup/renderhelper_codepreview_test.go
+++ b/services/markup/renderhelper_codepreview_test.go
@@ -24,15 +24,15 @@ func TestRenderHelperCodePreview(t *testing.T) {
 		OwnerName: "user2",
 		RepoName:  "repo1",
 		CommitID:  "65f1bf27bc3bf70f64657658635e66094edbcb4d",
-		FilePath:  "/README.md",
+		FilePath:  "README.md",
 		LineStart: 1,
 		LineStop:  2,
 	})
 	assert.NoError(t, err)
 	assert.Equal(t, `<div class="code-preview-container file-content">
 	<div class="code-preview-header">
-		<a href="http://full" class="muted" rel="nofollow">/README.md</a>
-		repo.code_preview_line_from_to:1,2,<a href="/user2/repo1/src/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" rel="nofollow">65f1bf27bc</a>
+		<a href="http://full" class="tw-font-semibold" rel="nofollow">repo1/README.md</a>
+		repo.code_preview_line_from_to:1,2,<a href="/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" class="muted tw-font-mono tw-text-text" rel="nofollow">65f1bf27bc</a>
 	</div>
 	<table class="file-view">
 		<tbody><tr>
@@ -52,14 +52,14 @@ func TestRenderHelperCodePreview(t *testing.T) {
 		OwnerName: "user2",
 		RepoName:  "repo1",
 		CommitID:  "65f1bf27bc3bf70f64657658635e66094edbcb4d",
-		FilePath:  "/README.md",
+		FilePath:  "README.md",
 		LineStart: 1,
 	})
 	assert.NoError(t, err)
 	assert.Equal(t, `<div class="code-preview-container file-content">
 	<div class="code-preview-header">
-		<a href="http://full" class="muted" rel="nofollow">/README.md</a>
-		repo.code_preview_line_in:1,<a href="/user2/repo1/src/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" rel="nofollow">65f1bf27bc</a>
+		<a href="http://full" class="tw-font-semibold" rel="nofollow">repo1/README.md</a>
+		repo.code_preview_line_in:1,<a href="/user2/repo1/commit/65f1bf27bc3bf70f64657658635e66094edbcb4d" class="muted tw-font-mono tw-text-text" rel="nofollow">65f1bf27bc</a>
 	</div>
 	<table class="file-view">
 		<tbody><tr>
@@ -76,7 +76,7 @@ func TestRenderHelperCodePreview(t *testing.T) {
 		OwnerName: "user15",
 		RepoName:  "big_test_private_1",
 		CommitID:  "65f1bf27bc3bf70f64657658635e66094edbcb4d",
-		FilePath:  "/README.md",
+		FilePath:  "README.md",
 		LineStart: 1,
 		LineStop:  10,
 	})
diff --git a/templates/base/markup_codepreview.tmpl b/templates/base/markup_codepreview.tmpl
index a1a4f26b478da..e16848581d949 100644
--- a/templates/base/markup_codepreview.tmpl
+++ b/templates/base/markup_codepreview.tmpl
@@ -1,7 +1,7 @@
 <div class="code-preview-container file-content">
 	<div class="code-preview-header">
-		<a href="{{.FullURL}}" class="muted" rel="nofollow">{{.FilePath}}</a>
-		{{$link := HTMLFormat `<a href="%s/src/commit/%s" rel="nofollow">%s</a>` .RepoLink .CommitID (.CommitID | ShortSha) -}}
+		<a href="{{.FullURL}}" class="tw-font-semibold" rel="nofollow">{{.RepoName}}/{{.FilePath}}</a>
+		{{$link := HTMLFormat `<a href="%s/commit/%s" class="muted tw-font-mono tw-text-text" rel="nofollow">%s</a>` .RepoLink .CommitID (.CommitID | ShortSha) -}}
 		{{- if eq .LineStart .LineStop -}}
 			{{ctx.Locale.Tr "repo.code_preview_line_in" .LineStart $link}}
 		{{- else -}}
diff --git a/web_src/css/markup/codepreview.css b/web_src/css/markup/codepreview.css
index c9d19f5cc8523..155bb5a74d291 100644
--- a/web_src/css/markup/codepreview.css
+++ b/web_src/css/markup/codepreview.css
@@ -5,6 +5,7 @@
 }
 
 .markup .code-preview-container .code-preview-header {
+  color: var(--color-text-light-1);
   border-bottom: 1px solid var(--color-secondary);
   padding: 0.5em;
   font-size: 12px;