diff --git a/pynecone/.templates/web/bun.lockb b/pynecone/.templates/web/bun.lockb
index 0cfe62a6f..2deee3fa1 100755
Binary files a/pynecone/.templates/web/bun.lockb and b/pynecone/.templates/web/bun.lockb differ
diff --git a/pynecone/.templates/web/package.json b/pynecone/.templates/web/package.json
index f4acc2d1f..6052c5774 100644
--- a/pynecone/.templates/web/package.json
+++ b/pynecone/.templates/web/package.json
@@ -25,6 +25,7 @@
     "react-plotly.js": "^2.6.0",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-katex": "^6.0.2",
+    "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1"
   }
diff --git a/pynecone/components/typography/markdown.py b/pynecone/components/typography/markdown.py
index b9f0739a2..7941cb8f3 100644
--- a/pynecone/components/typography/markdown.py
+++ b/pynecone/components/typography/markdown.py
@@ -19,11 +19,20 @@ class Markdown(Component):
 
     def _get_imports(self):
         imports = super()._get_imports()
-        imports["@chakra-ui/react"] = {"Heading", "Code", "Text", "Link"}
+        imports["@chakra-ui/react"] = {
+            "Heading",
+            "Code",
+            "Text",
+            "Link",
+            "UnorderedList",
+            "OrderedList",
+            "ListItem",
+        }
         imports["react-syntax-highlighter"] = {"Prism"}
         imports["remark-math"] = {"remarkMath"}
         imports["remark-gfm"] = {"remarkGfm"}
         imports["rehype-katex"] = {"rehypeKatex"}
+        imports["rehype-raw"] = {"rehypeRaw"}
         imports[""] = {"katex/dist/katex.min.css"}
         return imports
 
@@ -35,9 +44,11 @@ class Markdown(Component):
                 "h1": "{({node, ...props}) => <Heading size='2xl' {...props} />}",
                 "h2": "{({node, ...props}) => <Heading size='xl' {...props} />}",
                 "h3": "{({node, ...props}) => <Heading size='lg' {...props} />}",
+                "ul": "{UnorderedList}",
+                "ol": "{OrderedList}",
+                "li": "{ListItem}",
                 "p": "{Text}",
                 "a": "{Link}",
-                # "code": "{Code}"
                 "code": """{({node, inline, className, children, ...props}) => 
                     {
         const match = (className || '').match(/language-(?<lang>.*)/);
@@ -57,6 +68,6 @@ class Markdown(Component):
                 ),
             },
             remark_plugins=BaseVar(name="[remarkMath, remarkGfm]", type_=List[str]),
-            rehype_plugins=BaseVar(name="[rehypeKatex]", type_=List[str]),
+            rehype_plugins=BaseVar(name="[rehypeKatex, rehypeRaw]", type_=List[str]),
             src="",
         )