diff --git a/src/main/org/freemarker/docgen/less/lib/components/page-menu.less b/src/main/org/freemarker/docgen/less/lib/components/page-menu.less
index bd84fbe..861576b 100644
--- a/src/main/org/freemarker/docgen/less/lib/components/page-menu.less
+++ b/src/main/org/freemarker/docgen/less/lib/components/page-menu.less
@@ -1,5 +1,12 @@
 .page-menu {
 
+  .page-menu-title {
+    margin-top: 0;
+    margin-bottom: 1em;
+    color: @header-color;
+    font-weight: bold;
+  }
+
   @border-spacing: 12px;
 
   margin: 0 0 @border-spacing;
@@ -22,4 +29,5 @@
       color: #800080;
     }
   }
+  
 }
diff --git a/src/main/org/freemarker/docgen/templates/page.ftl b/src/main/org/freemarker/docgen/templates/page.ftl
index eb3dda9..b77f14a 100644
--- a/src/main/org/freemarker/docgen/templates/page.ftl
+++ b/src/main/org/freemarker/docgen/templates/page.ftl
@@ -136,8 +136,10 @@
       <#elseIf pageType == "docgen:detailed_toc">
         <@toc att="docgen_detailed_toc_element" maxDepth=99 /><#t>
       <#else>
-        <@toc att="docgen_file_element" maxDepth=maxTOFDisplayDepth /><#t>
-        <@toc att="docgen_page_toc_element" maxDepth=99 minLength=2 /><#t>
+        <@toc att="docgen_file_element" maxDepth=maxTOFDisplayDepth
+            title=(.node?parent?nodeType == "document")?then('Table of Contents', 'Section Contents')
+        /><#t>
+        <@toc att="docgen_page_toc_element" maxDepth=99 minLength=2 title="Page Contents" /><#t>
         <#-- - Render the usual content, like <para>-s etc.: -->
         <#list .node.* as child>
           <#if child.@docgen_file_element?size == 0
@@ -175,11 +177,16 @@
 </#macro>
 
 
-<#macro toc att maxDepth minLength=1>
+<#macro toc att maxDepth minLength=1 title=''>
   <#compress>
     <#local tocElems = .node["*[@${att}]"]>
     <#if (tocElems?size >= minLength)>
+      <div class="page-menu">
+        <#if title != ''>
+          <div class="page-menu-title">${title?html}</div>
+        </#if>
         <@toc_inner tocElems=tocElems att=att maxDepth=maxDepth curDepth=1 /><#t>
+      </div>
     </#if>
   </#compress>
 </#macro>
@@ -189,11 +196,7 @@
   <#compress>
     <#if tocElems?size == 0><#return></#if>
 
-    <#if curDepth == 1>
-      <#local class = "page-menu">
-    </#if>
-
-    <ul<#if class?hasContent> class="${class?trim}"</#if>><#t>
+    <ul><#t>
       <#list tocElems as tocElem>
         <li><#t>
           <a class="page-menu-link" href="${CreateLinkFromID(tocElem.@id)?html}" data-menu-target="${tocElem.@id}"><#t>