diff --git a/src/features/comments/comment-list.component.tsx b/src/features/comments/comment-list.component.tsx
index e7d3f1bf..72d2a67e 100644
--- a/src/features/comments/comment-list.component.tsx
+++ b/src/features/comments/comment-list.component.tsx
@@ -11,6 +11,8 @@ import { Button } from '@/components/ui/button';
 import Header from '@/components/ui/header';
 import NotFound from '@/components/ui/not-found';
 
+import RulesAlert from '@/features/comments/comment-rules-alert.component';
+
 import useSession from '@/services/hooks/auth/use-session';
 import useCommentThread from '@/services/hooks/comments/use-comment-thread';
 import useComments from '@/services/hooks/comments/use-comments';
@@ -65,6 +67,7 @@ const CommentList: FC<Props> = ({ slug, content_type, comment_reference }) => {
                 )}
             </Header>
             <div className="flex flex-col gap-4">
+                <RulesAlert />
                 {loggedUser && !comment_reference && (
                     <CommentInput slug={slug} content_type={content_type} />
                 )}
diff --git a/src/features/comments/comment-rules-alert.component.tsx b/src/features/comments/comment-rules-alert.component.tsx
new file mode 100644
index 00000000..e68f0cb4
--- /dev/null
+++ b/src/features/comments/comment-rules-alert.component.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import { useEffect } from 'react';
+import MaterialSymbolsInfoRounded from '~icons/material-symbols/info-rounded';
+
+import MDViewer from '@/components/markdown/viewer/MD-viewer';
+import { Button } from '@/components/ui/button';
+
+import { useModalContext } from '@/services/providers/modal-provider';
+
+const CommentRulesAlert = () => {
+    const [rules, setRules] = React.useState('');
+    const { openModal } = useModalContext();
+
+    useEffect(() => {
+        fetch(
+            'https://raw.githubusercontent.com/hikka-io/rules/main/COMMENT_RULES.md',
+            // TODO: change this when the rules are created
+        )
+            .then((res) => res.text())
+            .then((res) => setRules(res));
+    }, []);
+
+    return (
+        <div>
+            <div className="flex items-center gap-4 rounded-md border border-secondary/60 bg-secondary/30 p-4">
+                <MaterialSymbolsInfoRounded className="text-xl" />
+                <span className="flex-1 text-sm">
+                    Перш ніж залишати коментарі, рекомендуємо ознайомитись з{' '}
+                    <Button
+                        onClick={() =>
+                            openModal({
+                                content: (
+                                    <MDViewer className="overflow-scroll px-6 py-4 md:overflow-hidden md:p-0">
+                                        {rules}
+                                    </MDViewer>
+                                ),
+                                title: 'Правила коментування контенту',
+                            })
+                        }
+                        variant="link"
+                        className="h-auto p-0 text-primary hover:underline"
+                    >
+                        нашими правилами
+                    </Button>{' '}
+                    коментування контенту.
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default CommentRulesAlert;