diff --git a/src/Elastic.Documentation.Site/Assets/markdown/hr.css b/src/Elastic.Documentation.Site/Assets/markdown/hr.css
new file mode 100644
index 000000000..498f7e9b3
--- /dev/null
+++ b/src/Elastic.Documentation.Site/Assets/markdown/hr.css
@@ -0,0 +1,7 @@
+@layer components {
+	.markdown-content {
+		hr {
+			@apply bg-grey-20 mt-9 mb-8 h-[1px] border-0;
+		}
+	}
+}
diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
index 04d5597fc..e515379a8 100644
--- a/src/Elastic.Documentation.Site/Assets/styles.css
+++ b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -18,6 +18,7 @@
 @import './markdown/definition-list.css';
 @import './markdown/images.css';
 @import './markdown/image-carousel.css';
+@import './markdown/hr.css';
 @import './modal.css';
 @import './archive.css';
 @import './markdown/stepper.css';