diff --git a/public/images/NoteIcon.svg b/public/images/NoteIcon.svg
new file mode 100644
index 0000000..b333028
--- /dev/null
+++ b/public/images/NoteIcon.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFDFD;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#FFFDFD;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<path d="M32,64c17.67,0,32-14.33,32-32C64,14.33,49.67,0,32,0S0,14.33,0,32C0,49.67,14.33,64,32,64z M35.5,48.89
+	c0,1.93-1.57,3.5-3.5,3.5s-3.5-1.57-3.5-3.5V29.54c0-1.93,1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5V48.89z M29.17,14.23
+	c0.75-0.75,1.78-1.18,2.83-1.18s2.08,0.43,2.83,1.18C35.57,14.97,36,16,36,17.05c0,1.06-0.43,2.09-1.17,2.83
+	c-0.18,0.19-0.39,0.36-0.61,0.5c-0.22,0.14-0.45,0.27-0.69,0.37c-0.24,0.1-0.49,0.18-0.75,0.23c-0.51,0.1-1.05,0.1-1.56,0
+	c-0.26-0.05-0.51-0.13-0.75-0.23c-0.24-0.1-0.47-0.23-0.69-0.37c-0.22-0.14-0.42-0.31-0.61-0.5c-0.18-0.18-0.35-0.39-0.5-0.6
+	c-0.14-0.22-0.26-0.45-0.36-0.69c-0.1-0.25-0.18-0.5-0.23-0.75C28.03,17.58,28,17.31,28,17.05C28,16,28.43,14.97,29.17,14.23z"/>
+</svg>
diff --git a/public/images/SeeAlsoIcon.svg b/public/images/SeeAlsoIcon.svg
new file mode 100644
index 0000000..31fd169
--- /dev/null
+++ b/public/images/SeeAlsoIcon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<g>
+	<path d="M32,0C14.33,0,0,14.33,0,32c0,17.67,14.33,32,32,32s32-14.33,32-32C64,14.33,49.67,0,32,0z M28.23,48.96
+		c-0.68,0.62-1.52,0.92-2.37,0.92c-0.95,0-1.89-0.38-2.58-1.13c-1.31-1.42-1.22-3.63,0.21-4.94L36.32,32L23.49,20.19
+		c-1.43-1.31-1.52-3.52-0.21-4.95c1.31-1.42,3.53-1.51,4.95-0.2L46.65,32L28.23,48.96z"/>
+</g>
+</svg>
diff --git a/public/images/WarningIcon.svg b/public/images/WarningIcon.svg
new file mode 100644
index 0000000..1875a84
--- /dev/null
+++ b/public/images/WarningIcon.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFDFD;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#FFFDFD;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path d="M-39.87,0c-17.67,0-32,14.33-32,32c0,17.67,14.33,32,32,32s32-14.33,32-32C-7.87,14.33-22.2,0-39.87,0z M-43.64,48.96
+		c-0.68,0.62-1.52,0.92-2.37,0.92c-0.95,0-1.89-0.38-2.58-1.13c-1.31-1.42-1.22-3.63,0.21-4.94L-35.55,32l-12.83-11.81
+		c-1.43-1.31-1.52-3.52-0.21-4.95c1.31-1.42,3.53-1.51,4.95-0.2L-25.22,32L-43.64,48.96z"/>
+</g>
+<path d="M32,0C14.33,0,0,14.33,0,32c0,17.67,14.33,32,32,32s32-14.33,32-32C64,14.33,49.67,0,32,0z M28.5,15.11
+	c0-1.93,1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5v19.35c0,1.93-1.57,3.5-3.5,3.5s-3.5-1.57-3.5-3.5V15.11z M34.83,49.77
+	c-0.75,0.75-1.78,1.18-2.83,1.18s-2.08-0.43-2.83-1.18C28.43,49.03,28,48,28,46.95c0-1.06,0.43-2.09,1.17-2.83
+	c0.18-0.19,0.39-0.36,0.61-0.5c0.22-0.14,0.45-0.27,0.69-0.37c0.24-0.1,0.49-0.18,0.75-0.23c0.51-0.1,1.05-0.1,1.56,0
+	c0.26,0.05,0.51,0.13,0.75,0.23c0.24,0.1,0.47,0.23,0.69,0.37c0.22,0.14,0.42,0.31,0.61,0.5c0.18,0.18,0.35,0.39,0.5,0.6
+	c0.14,0.22,0.26,0.45,0.36,0.69c0.1,0.25,0.18,0.5,0.23,0.75c0.05,0.26,0.08,0.53,0.08,0.79C36,48,35.57,49.03,34.83,49.77z"/>
+<circle cx="107.56" cy="32" r="32"/>
+<line class="st0" x1="107.56" y1="34.46" x2="107.56" y2="15.11"/>
+<line class="st1" x1="107.56" y1="46.95" x2="107.56" y2="46.95"/>
+</svg>
diff --git a/src/assets/pages/documentation/Body.jsx b/src/assets/pages/documentation/Body.jsx
index 0b3f5a7..3bde130 100644
--- a/src/assets/pages/documentation/Body.jsx
+++ b/src/assets/pages/documentation/Body.jsx
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { PageChange } from ".";
 import { motion } from "framer-motion";
 import Image from "./Image";
-import parse from "html-react-parser";
+import parse, { domToReact } from "html-react-parser";
 
 export default function Body({ initialPage }) {
   const [page, setPage] = useContext(PageChange);
@@ -12,9 +12,9 @@ export default function Body({ initialPage }) {
     (async () => {
       setHTML(null);
       let p = page;
-      if (initialPage === undefined) return
+      if (initialPage === undefined) return;
       if (page === "home") {
-        p = initialPage.slice(0, -3)
+        p = initialPage.slice(0, -3);
       }
       const data = await fetch(`/docs/${p}.html`);
       if (data.status === 404) {
@@ -27,7 +27,7 @@ export default function Body({ initialPage }) {
   }, [page, initialPage]);
 
   const options = {
-    replace: ({ name, attribs, children }) => {
+    replace: ({ name, attribs, children, data }) => {
       //convert all images to clickable images
       if (name === "img") {
         return <Image attribs={attribs} />;
@@ -40,7 +40,33 @@ export default function Body({ initialPage }) {
           </a>
         );
       }
-    }
+      
+      //content blocks
+      function handleContentBlock(data) {
+        const type = ["Note", "See Also", "Warning"];
+        for (let i = 0; i < type.length; i++) {
+          if (data?.slice(0, type[i].length + 1) === `${type[i].toUpperCase()}:`) {
+            return type[i];
+          }
+        }
+        return false;
+      }
+
+      if ((name === "p" || name === "li") && children[0].data !== undefined) {
+        const type = handleContentBlock(children[0].data);
+        if (!type) return;
+        const typeNoSpace = type.replace(" ", "");
+        return (
+          <div className="block">
+            <div className={`header ${typeNoSpace}Header`}>
+              <img src={`/images/${typeNoSpace}Icon.svg`} className="icon" />
+              {type}
+            </div>
+            <p>{domToReact(children, options)}</p>
+          </div>
+        );
+      }
+    },
   };
 
   const handleLoader = () => {
diff --git a/src/assets/styles/documentation.scss b/src/assets/styles/documentation.scss
index 6534963..0c65e4e 100644
--- a/src/assets/styles/documentation.scss
+++ b/src/assets/styles/documentation.scss
@@ -79,6 +79,44 @@
       cursor: zoom-out;
     }
   }
+
+  .block {
+    background-color: #d9dde2;
+    border-radius: 0.4em;
+    overflow: hidden;
+    margin-block: 0.8em;
+    p {
+      margin-inline: 0.7em;
+    }
+
+    .header {
+      color: #ffffff;
+      font-weight: 700;
+      letter-spacing: 0.6px;
+      padding-left: 0.7em;
+      padding-block: 0.2em;
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
+
+    .icon {
+      height: 20px;
+      filter: invert(1);
+    }
+
+    .NoteHeader {
+      background-color: $noteCol;
+    }
+    .SeeAlsoHeader {
+      background-color: $seeAlsoCol;
+    }
+    .WarningHeader {
+      background-color: $warningCol;
+    }
+  }
+
+
 }
 
 .documentation-container .sidebar {