diff --git a/README.md b/README.md
index 1447652..d1ba1f9 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@api-components/api-summary)
 
-# api-summary
+# <api-summary>
 
 A component that renders basic information about an API.
 It uses AMF model to render the view.
@@ -17,7 +17,8 @@ For compatibility with previous model version use `3.x.x` version of the compone
 ## Usage
 
 ### Installation
-```
+
+```sh
 npm install --save @api-components/api-summary
 ```
 
@@ -86,7 +87,7 @@ class SampleElement extends PolymerElement {
 customElements.define('sample-element', SampleElement);
 ```
 
-### Installation
+## Development
 
 ```sh
 git clone https://github.com/advanced-rest-client/api-summary
diff --git a/src/Styles.js b/src/Styles.js
index b68850e..eab0a8c 100644
--- a/src/Styles.js
+++ b/src/Styles.js
@@ -56,6 +56,7 @@ arc-marked {
 }
 
 label.section {
+  color: var(--arc-font-subhead-color); 
   font-weight: var(--arc-font-subhead-font-weight);
   line-height: var(--arc-font-subhead-line-height);
   /* font-size: 18px; */
@@ -125,7 +126,7 @@ a:hover {
   cursor: pointer;
   margin-bottom: 4px;
   display: inline-block;
-  font-weight: 500;
+  font-weight: var(--api-summary-endpoint-path-font-weight, 500);
   color: var(--link-color, #0277BD);
   margin: 4px 0;
   word-break: break-all;
@@ -142,7 +143,11 @@ a:hover {
 }
 
 .section.endpoints-title {
-  font-weight: 500;
+  font-weight: var(--arc-font-title-font-weight, 500);
+  color: var(--arc-font-title-color); 
+  font-weight: var(--arc-font-title-font-weight);
+  line-height: var(--arc-font-title-line-height);
+  font-size: var(--arc-font-title-font-size);
 }
 
 .endpoint-path-name {