diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx
index 41a88bed..6deba5c0 100644
--- a/src/components/ContentItems/ContentItems.tsx
+++ b/src/components/ContentItems/ContentItems.tsx
@@ -4,10 +4,10 @@ import * as React from 'react';
 import { SECTION_ATTR } from '../../services/MenuStore';
 import { Markdown } from '../Markdown/Markdown';
 
-import { H1, MiddlePanel, Row, ShareLink } from '../../common-elements';
+import { H1, H2, MiddlePanel, Row, ShareLink } from '../../common-elements';
 import { MDXComponentMeta } from '../../services/MarkdownRenderer';
 import { ContentItemModel } from '../../services/MenuBuilder';
-import { OperationModel } from '../../services/models';
+import { GroupModel, OperationModel } from '../../services/models';
 import { Operation } from '../Operation/Operation';
 import { SecurityDefs } from '../SecuritySchemes/SecuritySchemes';
 import { StoreConsumer } from '../StoreBuilder';
@@ -79,15 +79,16 @@ export class ContentItem extends React.Component<ContentItemProps> {
 @observer
 export class SectionItem extends React.Component<ContentItemProps> {
   render() {
-    const { name, description } = this.props.item;
+    const { name, description, level } = this.props.item as GroupModel;
     const components = this.props.allowedMdComponents;
+    const Header = level === 2 ? H2 : H1;
     return (
       <Row>
         <MiddlePanel>
-          <H1>
+          <Header>
             <ShareLink href={'#' + this.props.item.id} />
             {name}
-          </H1>
+          </Header>
           {components ? (
             <StoreConsumer>
               {store => (
diff --git a/src/services/MarkdownRenderer.ts b/src/services/MarkdownRenderer.ts
index ab2835c6..95afec75 100644
--- a/src/services/MarkdownRenderer.ts
+++ b/src/services/MarkdownRenderer.ts
@@ -25,6 +25,7 @@ export interface MDXComponentMeta {
 export interface MarkdownHeading {
   id: string;
   name: string;
+  level: number;
   items?: MarkdownHeading[];
   description?: string;
 }
@@ -50,12 +51,14 @@ export class MarkdownRenderer {
 
   saveHeading(
     name: string,
+    level: number,
     container: MarkdownHeading[] = this.headings,
     parentId?: string,
   ): MarkdownHeading {
     const item = {
       id: parentId ? `${parentId}/${safeSlugify(name)}` : `section/${safeSlugify(name)}`,
       name,
+      level,
       items: [],
     };
     container.push(item);
@@ -105,10 +108,11 @@ export class MarkdownRenderer {
 
   headingRule = (text: string, level: number, raw: string) => {
     if (level === 1) {
-      this.currentTopHeading = this.saveHeading(text);
+      this.currentTopHeading = this.saveHeading(text, level);
     } else if (level === 2) {
       this.saveHeading(
         text,
+        level,
         this.currentTopHeading && this.currentTopHeading.items,
         this.currentTopHeading && this.currentTopHeading.id,
       );
diff --git a/src/services/models/Group.model.ts b/src/services/models/Group.model.ts
index 52d9108b..34f2b73c 100644
--- a/src/services/models/Group.model.ts
+++ b/src/services/models/Group.model.ts
@@ -25,6 +25,7 @@ export class GroupModel implements IMenuItem {
   @observable expanded: boolean = false;
 
   depth: number;
+  level: number;
   //#endregion
 
   constructor(
@@ -36,6 +37,7 @@ export class GroupModel implements IMenuItem {
     this.id = (tagOrGroup as MarkdownHeading).id || type + '/' + safeSlugify(tagOrGroup.name);
     this.type = type;
     this.name = tagOrGroup['x-displayName'] || tagOrGroup.name;
+    this.level = (tagOrGroup as MarkdownHeading).level || 1;
     this.description = tagOrGroup.description || '';
     this.parent = parent;
     this.externalDocs = (tagOrGroup as OpenAPITag).externalDocs;