diff --git a/library/package.json b/library/package.json
index bf0a29ba9..cb6227d68 100644
--- a/library/package.json
+++ b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asyncapi/react-component",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "private": false,
   "description": "A React component for AsyncAPI specification.",
   "repository": {
diff --git a/library/src/components/Bindings.tsx b/library/src/components/Bindings.tsx
index f40deb37f..a6c8fcc39 100644
--- a/library/src/components/Bindings.tsx
+++ b/library/src/components/Bindings.tsx
@@ -25,9 +25,9 @@ export const Bindings: React.FunctionComponent<Props> = ({
     const schemaName = (
       <div className="inline-block text-sm">
         <span>{name}</span>
-        <span className="bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-xs">
+        <strong className="bg-teal-500 no-underline text-white uppercase rounded mx-2 px-2 py-1 text-xs">
           {protocol}
-        </span>
+        </strong>
       </div>
     );
     return (
diff --git a/library/src/components/Schema.tsx b/library/src/components/Schema.tsx
index 0ccb5bb0d..61dd88ac8 100644
--- a/library/src/components/Schema.tsx
+++ b/library/src/components/Schema.tsx
@@ -160,37 +160,37 @@ export const Schema: React.FunctionComponent<Props> = ({
                 </div>
                 <div className="inline-block">
                   {schema.format() && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       format: {schema.format()}
-                    </span>
+                    </strong>
                   )}
 
                   {/* related to string */}
                   {schema.pattern() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded mr-2 p-1 text-xs">
                       must match: {schema.pattern()}
-                    </span>
+                    </strong>
                   )}
                   {schema.contentMediaType() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       media type: {schema.contentMediaType()}
-                    </span>
+                    </strong>
                   )}
                   {schema.contentEncoding() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       encoding: {schema.contentEncoding()}
-                    </span>
+                    </strong>
                   )}
 
                   {/* constraints */}
                   {!!constraints.length &&
                     constraints.map((c) => (
-                      <span
-                        className="bg-purple-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs"
+                      <strong
+                        className="bg-purple-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs"
                         key={c}
                       >
                         {c}
-                      </span>
+                      </strong>
                     ))}
 
                   {uid && !uid.startsWith('<anonymous-') && (
@@ -244,14 +244,14 @@ export const Schema: React.FunctionComponent<Props> = ({
                   </div>
                 )}
                 {externalDocs && (
-                  <span className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-2 py-0">
+                  <strong className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 no-underline text-xs uppercase rounded px-2 py-0">
                     <Href
                       href={externalDocs.url()}
                       title={externalDocs.description() ?? ''}
                     >
                       Documentation
                     </Href>
-                  </span>
+                  </strong>
                 )}
                 {schema.examples() && (
                   <ul className="text-xs">
diff --git a/library/src/containers/Info/Info.tsx b/library/src/containers/Info/Info.tsx
index 49a4d40d7..790c78b9a 100644
--- a/library/src/containers/Info/Info.tsx
+++ b/library/src/containers/Info/Info.tsx
@@ -46,9 +46,9 @@ export const Info: React.FunctionComponent = () => {
                     <span>{license.name()}</span>
                   </Href>
                 ) : (
-                  <span className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1">
+                  <strong className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 no-underline text-xs uppercase rounded px-3 py-1">
                     {license.name()}
-                  </span>
+                  </strong>
                 )}
               </li>
             )}
@@ -108,9 +108,9 @@ export const Info: React.FunctionComponent = () => {
             )}
             {specId && (
               <li className="inline-block mt-2 mr-2">
-                <span className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs uppercase rounded px-3 py-1">
+                <strong className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 no-underline text-xs uppercase rounded px-3 py-1">
                   ID: {specId}
-                </span>
+                </strong>
               </li>
             )}
           </ul>
diff --git a/library/src/containers/Messages/Message.tsx b/library/src/containers/Messages/Message.tsx
index 4d5c5fbf3..2b30b435b 100644
--- a/library/src/containers/Messages/Message.tsx
+++ b/library/src/containers/Messages/Message.tsx
@@ -55,12 +55,9 @@ export const Message: React.FunctionComponent<Props> = ({
         <div className="shadow rounded bg-gray-200 p-4 border">
           <div>
             {index !== undefined && (
-              <span className="text-gray-700 font-bold mr-2">#{index}</span>
+              <strong className="text-gray-700 mr-2">#{index}</strong>
             )}
             {title && <span className="text-gray-700 mr-2">{title}</span>}
-            <span className="border text-orange-600 rounded text-xs py-0 px-2">
-              {messageId}
-            </span>
           </div>
 
           {summary && <p className="text-gray-600 text-sm">{summary}</p>}
diff --git a/library/src/containers/Operations/Operation.tsx b/library/src/containers/Operations/Operation.tsx
index 26dc958d7..af98dd6c7 100644
--- a/library/src/containers/Operations/Operation.tsx
+++ b/library/src/containers/Operations/Operation.tsx
@@ -262,7 +262,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                   : 'bg-blue-600 border-blue-600'
               } text-sm rounded-t h-8 px-4 border text-white flex items-center`}
             >
-              <span className="font-bold">REPLY INFORMATION</span>
+              <strong>REPLY INFORMATION</strong>
             </div>
             <div className="flex">
               <div
diff --git a/library/src/containers/Servers/Security.tsx b/library/src/containers/Servers/Security.tsx
index 8fbe3847b..4279f95ae 100644
--- a/library/src/containers/Servers/Security.tsx
+++ b/library/src/containers/Servers/Security.tsx
@@ -130,22 +130,22 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
       <div className="px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded">
         {securityProtocol && (
           <div className="mt-1">
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               security.protocol:
-            </span>
-            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+            </strong>
+            <strong className="inline-block no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
               {securityProtocol}
-            </span>
+            </strong>
           </div>
         )}
         {saslMechanism && (
           <div className="mt-1">
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               sasl.mechanism:
-            </span>
-            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+            </strong>
+            <strong className="inline-block no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
               {saslMechanism}
-            </span>
+            </strong>
           </div>
         )}
       </div>
@@ -179,19 +179,19 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
           key={flowName}
         >
           <div>
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               Flow:
-            </span>
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            </strong>
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               {ServerHelpers.flowName(flowName)}
-            </span>
+            </strong>
           </div>
 
           {authorizationUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Auth URL:
-              </span>
+              </strong>
               <Href href={authorizationUrl} className="underline">
                 {authorizationUrl}
               </Href>
@@ -199,9 +199,9 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
           )}
           {tokenUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Token URL:
-              </span>
+              </strong>
               <Href href={tokenUrl} className="underline">
                 {tokenUrl}
               </Href>
@@ -209,9 +209,9 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
           )}
           {refreshUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Refresh URL:
-              </span>
+              </strong>
               <Href href={refreshUrl} className="underline">
                 {refreshUrl}
               </Href>
@@ -219,9 +219,9 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
           )}
           {scopes && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Scopes:
-              </span>
+              </strong>
               <ul className="inline-block">
                 {scopes &&
                   Object.entries(scopes).map(([scopeName, scopeDesc]) => (
diff --git a/library/src/containers/Servers/Server.tsx b/library/src/containers/Servers/Server.tsx
index 560444ee1..233efdf9c 100644
--- a/library/src/containers/Servers/Server.tsx
+++ b/library/src/containers/Servers/Server.tsx
@@ -34,14 +34,14 @@ export const Server: React.FunctionComponent<Props> = ({
         <div className="shadow rounded bg-gray-200 p-4 border bg-gray-100">
           <div>
             <span className="font-mono text-base">{server.url()}</span>
-            <span className="bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm">
+            <strong className="bg-teal-500 no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm">
               {protocolVersion
                 ? `${server.protocol()} ${protocolVersion}`
                 : server.protocol()}
-            </span>
-            <span className="bg-blue-500 font-bold no-underline text-white uppercase rounded px-2 py-1 text-sm">
+            </strong>
+            <strong className="bg-blue-500 no-underline text-white uppercase rounded px-2 py-1 text-sm">
               {serverName}
-            </span>
+            </strong>
           </div>
 
           {server.hasDescription() && (
diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx
index a834a2b40..fe313624e 100644
--- a/library/src/containers/Sidebar/Sidebar.tsx
+++ b/library/src/containers/Sidebar/Sidebar.tsx
@@ -356,12 +356,12 @@ const OperationItem: React.FunctionComponent<OperationItemProps> = ({
         href={`#${operationHrefId}`}
         onClick={() => setShowSidebar(false)}
       >
-        <span
-          className={`font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs ${bgColors.includes(backgroundColor) && backgroundColor}`}
+        <strong
+          className={`h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs ${bgColors.includes(backgroundColor) && backgroundColor}`}
           title={typeLabel}
         >
           {typeLabel}
-        </span>
+        </strong>
         <span className="break-all inline-block">{label}</span>
       </a>
     </li>
diff --git a/library/src/containers/Sidebar/__tests__/SideBar.test.tsx b/library/src/containers/Sidebar/__tests__/SideBar.test.tsx
index 4701a0006..6568f57e7 100644
--- a/library/src/containers/Sidebar/__tests__/SideBar.test.tsx
+++ b/library/src/containers/Sidebar/__tests__/SideBar.test.tsx
@@ -121,10 +121,10 @@ describe('Sidebar component', () => {
       'smartylighting.streetlights.1.0.action.{streetlightId}.dim',
     ];
     for (let i = 0; i < operations.length; i++) {
+      const description = operations[i].querySelector('span');
+
       // eslint-disable-next-line jest/no-standalone-expect
-      expect(operations[i].querySelectorAll('span')[1].textContent).toBe(
-        expectedOperationDescriptions[i],
-      );
+      expect(description?.textContent).toBe(expectedOperationDescriptions[i]);
     }
   });
 });
diff --git a/package-lock.json b/package-lock.json
index 93837294b..a974ab968 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
     },
     "library": {
       "name": "@asyncapi/react-component",
-      "version": "2.3.1",
+      "version": "2.3.3",
       "license": "Apache-2.0",
       "dependencies": {
         "@asyncapi/avro-schema-parser": "^3.0.24",
@@ -27671,10 +27671,10 @@
     },
     "web-component": {
       "name": "@asyncapi/web-component",
-      "version": "2.3.1",
+      "version": "2.3.3",
       "license": "Apache-2.0",
       "dependencies": {
-        "@asyncapi/react-component": "^2.3.1",
+        "@asyncapi/react-component": "^2.3.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "web-react-components": "^1.4.2"
diff --git a/web-component/package.json b/web-component/package.json
index e8e076177..cfd89549e 100644
--- a/web-component/package.json
+++ b/web-component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asyncapi/web-component",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "private": false,
   "description": "A web component for AsyncAPI specification. Based on @asyncapi/react-component.",
   "repository": {
@@ -44,7 +44,7 @@
     "install:reactcomp": "chmod +x ./bump-react-comp.sh && ./bump-react-comp.sh"
   },
   "dependencies": {
-    "@asyncapi/react-component": "^2.3.1",
+    "@asyncapi/react-component": "^2.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "web-react-components": "^1.4.2"