diff --git a/pynecone/components/__init__.py b/pynecone/components/__init__.py
index 7dfb7cd5e2..a241277926 100644
--- a/pynecone/components/__init__.py
+++ b/pynecone/components/__init__.py
@@ -204,6 +204,7 @@
 popover_trigger = PopoverTrigger.create
 tooltip = Tooltip.create
 heading = Heading.create
+highlight = Highlight.create
 markdown = Markdown.create
 span = Span.create
 text = Text.create
diff --git a/pynecone/components/typography/__init__.py b/pynecone/components/typography/__init__.py
index 6db3cc1531..07f7166ba4 100644
--- a/pynecone/components/typography/__init__.py
+++ b/pynecone/components/typography/__init__.py
@@ -3,6 +3,7 @@
 from pynecone.components.component import Component
 
 from .heading import Heading
+from .highlight import Highlight
 from .markdown import Markdown
 from .span import Span
 from .text import Text
diff --git a/pynecone/components/typography/highlight.py b/pynecone/components/typography/highlight.py
index e23658998c..961c6744e4 100644
--- a/pynecone/components/typography/highlight.py
+++ b/pynecone/components/typography/highlight.py
@@ -1,9 +1,10 @@
-"""A heading component."""
+"""A highlight component."""
 
 from typing import List
 
 from pynecone.components.libs.chakra import ChakraComponent
-from pynecone.vars import Var
+from pynecone.components.tags import Tag
+from pynecone.vars import Dict, Var
 
 
 class Highlight(ChakraComponent):
@@ -13,3 +14,10 @@ class Highlight(ChakraComponent):
 
     # A query for the text to highlight. Can be a string or a list of strings.
     query: Var[List[str]]
+
+    # The style of the content.
+    # Note: styles and style are different prop.
+    styles: Var[Dict] = {"px": "2", "py": "1", "rounded": "full", "bg": "teal.100"}  # type: ignore
+
+    def _render(self) -> Tag:
+        return super()._render().add_props(styles=self.style)