diff --git a/assets/scss/partials/comments/provider/cactus.scss b/assets/scss/partials/comments/provider/cactus.scss
new file mode 100644
index 0000000..b43a619
--- /dev/null
+++ b/assets/scss/partials/comments/provider/cactus.scss
@@ -0,0 +1,11 @@
+.cactus-editor-textarea {
+  color: var(--body-text-color);
+}
+
+.cactus-comment-header {
+  color: var(--card-text-color-main);
+}
+
+.cactus-message-text > p {
+  color: var(--body-text-color);
+}
\ No newline at end of file
diff --git a/layouts/partials/comments/provider/cactus.html b/layouts/partials/comments/provider/cactus.html
new file mode 100644
index 0000000..3fc1a5a
--- /dev/null
+++ b/layouts/partials/comments/provider/cactus.html
@@ -0,0 +1,13 @@
+{{- with .Site.Params.comments.cactus -}}
+<div id="comment-section"></div>
+
+<script>
+    initComments({
+        node: document.getElementById("comment-section"),
+        defaultHomeserverUrl: "{{ .defaultHomeserverUrl | safeHTML }}",
+        serverName: "{{ .serverName }}",
+        siteName: "{{ .siteName }}",
+        commentSectionId: "{{ $.File.UniqueID }}"
+    })
+</script>
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/partials/head/style.html b/layouts/partials/head/style.html
index 431e212..6c069f0 100644
--- a/layouts/partials/head/style.html
+++ b/layouts/partials/head/style.html
@@ -1,3 +1,11 @@
 {{ $sass := resources.Get "scss/style.scss" }}
 {{ $style := $sass | resources.ToCSS | minify }}
-<link rel="stylesheet" href="{{ $style.RelPermalink }}">
\ No newline at end of file
+<link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+{{ if .Site.Params.comments.enabled }}
+    {{ if eq .Site.Params.comments.provider "cactus" }}
+        {{ $sass_cactus := resources.Get "scss/partials/comments/provider/cactus.scss" }}
+        {{ $style_cactus := $sass_cactus | resources.ToCSS | minify }}
+        <link rel="stylesheet" href="{{ $style_cactus.RelPermalink }}">
+    {{ end }}
+{{ end }}
\ No newline at end of file