diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 8bf8fae62..faca81529 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -619,10 +619,11 @@ defineExpose({
 			.line::before {
 				content: "";
 				display: block;
-				margin-bottom: -10px;
+				margin-bottom: -4px;
 				margin-top: 16px;
-				border-left: 2px solid var(--X13);
+				border-left: 2px solid currentColor;
 				margin-left: calc((var(--avatarSize) / 2) - 1px);
+				opacity: .25;
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 62fcf7b34..e4f3f4d09 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -431,6 +431,7 @@ function noteClick(e) {
 
 		> .avatar-container {
 			margin-right: 8px;
+			z-index: 2;
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
@@ -651,10 +652,11 @@ function noteClick(e) {
 			flex-grow: 1;
 			margin-bottom: -10px;
 			pointer-events: none;
+			opacity: .25;
 			&::before {
 				content: "";
 				position: absolute;
-				border-left: 2px solid var(--X13);
+				border-left: 2px solid currentColor;
 				margin-left: calc((var(--avatarSize) / 2) - 1px);
 				width: calc(var(--indent) / 2);
 				inset-block: 0;
@@ -692,11 +694,12 @@ function noteClick(e) {
 			z-index: 2;
 			left: 0;
 			top: 0;
+			opacity: .25;
 			&::after {
 				content: "";
 				position: absolute;
-				border-left: 2px solid var(--X13);
-				border-bottom: 2px solid var(--X13);
+				border-left: 2px solid currentColor;
+				border-bottom: 2px solid currentColor;
 				margin-left: calc((var(--avatarSize) / 2) - 1px);
 				width: calc(var(--indent) / 2);
 				height: calc((var(--avatarSize) / 2));