diff --git a/amd/src/report-viewer-components.js b/amd/src/report-viewer-components.js
index 959c2fb..679e384 100644
--- a/amd/src/report-viewer-components.js
+++ b/amd/src/report-viewer-components.js
@@ -286,7 +286,8 @@ export default {
                 <div class='r-studyplan-content'>
                     <!-- First paint the headings-->
                     <div class='r-studyplan-headings'
-                        ><r-studyline-heading  v-for="(line,lineindex) in page.studylines"
+                        ><s-studyline-header-heading></s-studyline-header-heading>
+                        <r-studyline-heading  v-for="(line,lineindex) in page.studylines"
                             :key="line.id"
                             v-model="page.studylines[lineindex]"
                             :layers='countLineLayers(line)+1'
@@ -298,6 +299,15 @@ export default {
                     <!-- Next, paint all the cells in the scrollable -->
                     <div class="r-studyplan-scrollable" >
                         <div class="r-studyplan-timeline" :style="columns_stylerule">
+                        <!-- add period information -->
+                        <template v-for="(n,index) in (page.periods+1)">
+                            <s-studyline-header-period 
+                                v-if="index > 0"
+                                v-model="page.perioddesc[index-1]"
+                                ></s-studyline-header-period>
+                            <div class="s-studyline-header-filter"></div>
+                        </template>
+                             
                         <!-- Line by line add the items -->
                         <!-- The grid layout handles putting it in rows and columns -->
                         <template v-for="(line,lineindex) in page.studylines"
diff --git a/amd/src/treestudyplan-components.js b/amd/src/treestudyplan-components.js
index d8e39c5..727bf61 100644
--- a/amd/src/treestudyplan-components.js
+++ b/amd/src/treestudyplan-components.js
@@ -169,9 +169,16 @@ export default {
             },
             template: `
             <div class="s-studyline-header-period" ref="main"
-                ><p><abbr v-b-tooltip.hover :title="value.fullname">{{ value.shortname }}</abbr>
-                <slot></slot><p
-                ><p class="datespan">
+                ><p><abbr :id="'s-period-'+value.id" :title="value.fullname">{{ value.shortname }}</abbr>
+                <b-tooltip
+                    :target="'s-period-'+value.id" triggers="hover"
+                    >{{ value.fullname }}<br>
+                    <span class="s-studyline-header-period-datespan">
+                        <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>
+                    <span>
+                </b-tooltip>
+                <slot></slot
+                ><p class="s-studyline-header-period-datespan small">
                     <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>
                 </p>
             </div>
diff --git a/css/devstyles.css b/css/devstyles.css
index f8f5eef..6dd25c8 100644
--- a/css/devstyles.css
+++ b/css/devstyles.css
@@ -583,7 +583,22 @@ a.t-item-course-config {
     border-bottom-style: solid;
 }
 
-.s-studyline-header-period .datespan{
+.s-studyline-header-period {
+    text-align: center;
+}
+.s-studyline-header-period p {
+    margin-bottom: 0;
+}
+
+.s-studyline-header-period-datespan{
+    white-space: nowrap;
+}
+
+.s-studyline-header-period-datespan .date{
+    font-weight: bold;
+}
+
+.s-studyline-header-period-datespan.small{
     font-size: 9px;
 }