diff --git a/assets/icons/comment.svg b/assets/icons/comment.svg
new file mode 100644
index 0000000..789c740
--- /dev/null
+++ b/assets/icons/comment.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comment-dots" class="svg-inline--fa fa-comment-dots fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
\ No newline at end of file
diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html
new file mode 100644
index 0000000..98b261a
--- /dev/null
+++ b/layouts/shortcodes/note.html
@@ -0,0 +1,8 @@
+<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-neutral-700 border-2 ">
+  <span class="pr-3 text-primary-400">
+    {{ partial "icon.html" "comment" }}
+  </span>
+  <span class="no-prose dark:text-neutral-300">
+    <strong>NOTE: </strong> {{- .Inner | markdownify -}}
+  </span>
+</div>