diff --git a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
index cfb089eb21..0a0eade3c8 100644
--- a/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
+++ b/services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
@@ -1,5 +1,6 @@
import type { ReactNode } from 'react'
-import { DiffOperation } from '../../services/types/diff-operation'
+import type { DiffOperation } from '../../services/types/diff-operation'
+import Badge from '../../../../shared/components/badge'
type FileTreeItemProps = {
name: string
@@ -17,11 +18,9 @@ export default function FileTreeItem({
{icons}
diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less
index b40cac76c5..2dfd59d8b0 100644
--- a/services/web/frontend/stylesheets/app/editor/file-tree.less
+++ b/services/web/frontend/stylesheets/app/editor/file-tree.less
@@ -131,6 +131,26 @@
text-overflow: ellipsis;
text-align: left;
padding-right: 32px;
+ font-weight: normal;
+
+ .item-name-button-text {
+ display: inline-flex;
+ margin-right: 5px;
+ }
+
+ .item-name-button-badge {
+ text-transform: capitalize;
+ height: 20px;
+ font-size: @font-size-extra-small;
+
+ &:hover {
+ background-color: @neutral-20;
+ }
+
+ .badge-new-comment {
+ margin-left: 0;
+ }
+ }
}
}