diff --git a/queries/jsx/highlights.scm b/queries/jsx/highlights.scm
index 83d9e6de4..ba3e44a55 100644
--- a/queries/jsx/highlights.scm
+++ b/queries/jsx/highlights.scm
@@ -11,18 +11,27 @@
 (jsx_closing_element
   name: (identifier) @tag)
 
-(jsx_self_closing_element 
+(jsx_self_closing_element
   name: (identifier) @tag)
 
 (jsx_opening_element ((identifier) @type
  (#match? @type "^[A-Z]")))
 
+; Handle the dot operator effectively - <My.Component>
+(jsx_opening_element ((nested_identifier (identifier) @type (identifier) @type)))
+
 (jsx_closing_element ((identifier) @type
  (#match? @type "^[A-Z]")))
 
+; Handle the dot operator effectively - </My.Component>
+(jsx_closing_element ((nested_identifier (identifier) @type (identifier) @type)))
+
 (jsx_self_closing_element ((identifier) @type
  (#match? @type "^[A-Z]")))
 
+; Handle the dot operator effectively - <My.Component />
+(jsx_self_closing_element ((nested_identifier (identifier) @type (identifier) @type)))
+
 (variable_declarator ((identifier) @type
  (#match? @type "^[A-Z]")))