diff --git a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
index c589c543d4..27bf8502c1 100644
--- a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -1,4 +1,25 @@
 <div class="container">
+
+  <div *ngVar="(parent$ | async) as parent">
+    <div *ngIf="parent?.payload as parentContext">
+      <header>
+         <!-- Collection Name -->
+         <ds-comcol-page-header
+                 [name]="parentContext.name">
+         </ds-comcol-page-header>
+         
+         <!-- Introductionary text -->
+         <ds-comcol-page-content
+                 [content]="parentContext.introductoryText"
+                 [hasInnerHtml]="true">
+         </ds-comcol-page-content>
+                
+         <!-- Browse-By Links -->
+         <ds-comcol-page-browse-by [id]="parentContext.id"></ds-comcol-page-browse-by>
+      </header>
+    </div>
+  </div>
+  
   <div class="browse-by-metadata w-100">
     <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
       title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + browseId | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
diff --git a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.scss b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.scss
index e69de29bb2..8e1fedcbfc 100644
--- a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.scss
+++ b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.scss
@@ -0,0 +1,3 @@
+.browse-by-metadata {
+  margin: 2rem 0 ;
+}
\ No newline at end of file