diff --git a/src/vs/workbench/browser/media/part.css b/src/vs/workbench/browser/media/part.css
index b299dfa5e4a..f2787c2bf3b 100644
--- a/src/vs/workbench/browser/media/part.css
+++ b/src/vs/workbench/browser/media/part.css
@@ -23,12 +23,12 @@
 }
 
 .monaco-workbench .part > .title,
-.monaco-workbench .part > .composite-bar-area {
-	display: none; /* Parts have to opt in to show  and composite bar area */
+.monaco-workbench .part > .header-or-footer {
+	display: none; /* Parts have to opt in to show area */
 }
 
 .monaco-workbench .part > .title,
-.monaco-workbench .part > .composite-bar-area {
+.monaco-workbench .part > .header-or-footer {
 	height: 35px;
 	display: flex;
 	box-sizing: border-box;
@@ -36,7 +36,7 @@
 }
 
 .monaco-workbench .part > .title,
-.monaco-workbench .part > .composite-bar-area {
+.monaco-workbench .part > .header-or-footer {
 	padding-left: 8px;
 	padding-right: 8px;
 }
diff --git a/src/vs/workbench/browser/part.ts b/src/vs/workbench/browser/part.ts
index 0141d6c2707..3889641d222 100644
--- a/src/vs/workbench/browser/part.ts
+++ b/src/vs/workbench/browser/part.ts
@@ -20,9 +20,10 @@ export interface IPartOptions {
 }
 
 export interface ILayoutContentResult {
+	readonly headerSize: IDimension;
 	readonly titleSize: IDimension;
 	readonly contentSize: IDimension;
-	readonly compositeBarSize: IDimension;
+	readonly footerSize: IDimension;
 }
 
 /**
@@ -41,9 +42,10 @@ export abstract class Part extends Component implements ISerializableView {
 	readonly onDidVisibilityChange = this._onDidVisibilityChange.event;
 
 	private parent: HTMLElement | undefined;
+	private headerArea: HTMLElement | undefined;
 	private titleArea: HTMLElement | undefined;
 	private contentArea: HTMLElement | undefined;
-	private compositeBarArea: HTMLElement | undefined;
+	private footerArea: HTMLElement | undefined;
 	private partLayout: PartLayout | undefined;
 
 	constructor(
@@ -122,35 +124,67 @@ export abstract class Part extends Component implements ISerializableView {
 	}
 
 	/**
-	 * Creates the composite bar and sets the proper position.
+	 * Sets the header area
 	 */
-	protected setCompositeBarArea(compositeBarContainer: HTMLElement, position: 'top' | 'bottom'): void {
-		if (this.compositeBarArea) {
-			throw new Error('Composite bar already exists');
+	protected setHeaderArea(headerContainer: HTMLElement): void {
+		if (this.headerArea) {
+			throw new Error('Header already exists');
 		}
 
 		if (!this.parent || !this.titleArea) {
 			return;
 		}
 
-		if (position === 'top') {
-			prepend(this.parent, compositeBarContainer);
-			compositeBarContainer.classList.add('top');
-		} else {
-			this.parent.appendChild(compositeBarContainer);
-			compositeBarContainer.classList.add('bottom');
-		}
+		prepend(this.parent, headerContainer);
+		headerContainer.classList.add('header-or-footer');
+		headerContainer.classList.add('header');
 
-		this.compositeBarArea = compositeBarContainer;
-		this.partLayout?.setCompositeBarVisibility(true);
+		this.headerArea = headerContainer;
+		this.partLayout?.setHeaderVisibility(true);
 		this.relayout();
 	}
 
-	protected removeCompositeBarArea(): void {
-		if (this.compositeBarArea) {
-			this.compositeBarArea.remove();
-			this.compositeBarArea = undefined;
-			this.partLayout?.setCompositeBarVisibility(false);
+	/**
+	 * Sets the footer area
+	 */
+	protected setFooterArea(footerContainer: HTMLElement): void {
+		if (this.footerArea) {
+			throw new Error('Footer already exists');
+		}
+
+		if (!this.parent || !this.titleArea) {
+			return;
+		}
+
+		this.parent.appendChild(footerContainer);
+		footerContainer.classList.add('header-or-footer');
+		footerContainer.classList.add('footer');
+
+		this.footerArea = footerContainer;
+		this.partLayout?.setFooterVisibility(true);
+		this.relayout();
+	}
+
+	/**
+	 * removes the header area
+	 */
+	protected removeHeaderArea(): void {
+		if (this.headerArea) {
+			this.headerArea.remove();
+			this.headerArea = undefined;
+			this.partLayout?.setHeaderVisibility(false);
+			this.relayout();
+		}
+	}
+
+	/**
+	 * removes the footer area
+	 */
+	protected removeFooterArea(): void {
+		if (this.footerArea) {
+			this.footerArea.remove();
+			this.footerArea = undefined;
+			this.partLayout?.setFooterVisibility(false);
 			this.relayout();
 		}
 	}
@@ -197,10 +231,12 @@ export abstract class Part extends Component implements ISerializableView {
 
 class PartLayout {
 
+	private static readonly HEADER_HEIGHT = 35;
 	private static readonly TITLE_HEIGHT = 35;
-	private static readonly COMPOSITE_BAR_HEIGHT = 35;
+	private static readonly Footer_HEIGHT = 35;
 
-	private compositeBarAreaVisible: boolean = false;
+	private headerVisible: boolean = false;
+	private footerVisible: boolean = false;
 
 	constructor(private options: IPartOptions, private contentArea: HTMLElement | undefined) { }
 
@@ -214,12 +250,20 @@ class PartLayout {
 			titleSize = Dimension.None;
 		}
 
-		// Footer Size: Width (Fill), Height (Variable)
-		let compositeBarSize: Dimension;
-		if (this.compositeBarAreaVisible) {
-			compositeBarSize = new Dimension(width, Math.min(height, PartLayout.COMPOSITE_BAR_HEIGHT));
+		// Header Size: Width (Fill), Height (Variable)
+		let headerSize: Dimension;
+		if (this.headerVisible) {
+			headerSize = new Dimension(width, Math.min(height, PartLayout.HEADER_HEIGHT));
 		} else {
-			compositeBarSize = Dimension.None;
+			headerSize = Dimension.None;
+		}
+
+		// Footer Size: Width (Fill), Height (Variable)
+		let footerSize: Dimension;
+		if (this.footerVisible) {
+			footerSize = new Dimension(width, Math.min(height, PartLayout.Footer_HEIGHT));
+		} else {
+			footerSize = Dimension.None;
 		}
 
 		let contentWidth = width;
@@ -228,18 +272,22 @@ class PartLayout {
 		}
 
 		// Content Size: Width (Fill), Height (Variable)
-		const contentSize = new Dimension(contentWidth, height - titleSize.height - compositeBarSize.height);
+		const contentSize = new Dimension(contentWidth, height - titleSize.height - headerSize.height - footerSize.height);
 
 		// Content
 		if (this.contentArea) {
 			size(this.contentArea, contentSize.width, contentSize.height);
 		}
 
-		return { titleSize, contentSize, compositeBarSize };
+		return { headerSize, titleSize, contentSize, footerSize };
 	}
 
-	setCompositeBarVisibility(visible: boolean): void {
-		this.compositeBarAreaVisible = visible;
+	setFooterVisibility(visible: boolean): void {
+		this.footerVisible = visible;
+	}
+
+	setHeaderVisibility(visible: boolean): void {
+		this.headerVisible = visible;
 	}
 }
 
diff --git a/src/vs/workbench/browser/parts/compositePart.ts b/src/vs/workbench/browser/parts/compositePart.ts
index 146a58620b1..4adf1f7d162 100644
--- a/src/vs/workbench/browser/parts/compositePart.ts
+++ b/src/vs/workbench/browser/parts/compositePart.ts
@@ -438,7 +438,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
 		};
 	}
 
-	protected createCompositeBarArea(): HTMLElement {
+	protected createHeaderFooterCompositeBarArea(): HTMLElement {
 		return $('.composite.composite-bar-area');
 	}
 
diff --git a/src/vs/workbench/browser/parts/media/compositepart.css b/src/vs/workbench/browser/parts/media/compositepart.css
index 4f7afbfab50..98f07d9cf18 100644
--- a/src/vs/workbench/browser/parts/media/compositepart.css
+++ b/src/vs/workbench/browser/parts/media/compositepart.css
@@ -7,7 +7,7 @@
 	height: 100%;
 }
 
-.monaco-workbench .part > .composite.composite-bar-area,
+.monaco-workbench .part > .composite.header-or-footer,
 .monaco-workbench .part > .composite.title {
 	display: flex;
 }
diff --git a/src/vs/workbench/browser/parts/media/paneCompositePart.css b/src/vs/workbench/browser/parts/media/paneCompositePart.css
index a324f08d4b4..f2b2b178b81 100644
--- a/src/vs/workbench/browser/parts/media/paneCompositePart.css
+++ b/src/vs/workbench/browser/parts/media/paneCompositePart.css
@@ -20,18 +20,18 @@
 	display: none;
 }
 
-.monaco-workbench .pane-composite-part > .composite-bar-area.bottom {
+.monaco-workbench .pane-composite-part > .header-or-footer.bottom {
 	border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
 }
 
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container {
 	display: flex;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -41,13 +41,13 @@
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar {
 	line-height: 27px; /* matches panel titles in settings */
 	height: 35px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item {
 	text-transform: uppercase;
 	padding-left: 10px;
 	padding-right: 10px;
@@ -58,26 +58,26 @@
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon {
 	height: 24px;
 	padding: 0 5px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container >.composite-bar .monaco-action-bar .action-label.codicon,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container >.composite-bar .monaco-action-bar .action-label.codicon {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container >.composite-bar .monaco-action-bar .action-label.codicon {
 	font-size: 18px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon),
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon) {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon) {
 	width: 16px;
 	height: 16px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
 	content: '';
 	width: 2px;
 	height: 24px;
@@ -92,32 +92,32 @@
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after {
 	display: block;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before {
 	left: 1px;
 	margin-left: -2px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
 	right: 1px;
 	margin-right: -2px;
 }
 
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before {
 	left: 2px;
 	margin-left: -2px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
 	right: 2px;
 	margin-right: -2px;
 }
@@ -126,10 +126,10 @@
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after {
 	transition-delay: 0s;
 }
 
@@ -138,51 +138,51 @@
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over-head  > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right + .action-item::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over-head  > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right + .action-item::before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over-head  > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
 	opacity: 1;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
 	margin-right: 0;
 	padding: 2px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
 	border-radius: 0;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon {
 	background: none !important;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label {
 	margin-right: 0;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .badge {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge {
 	margin-left: 8px;
 	display: flex;
 	align-items: center;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge {
 	margin-left: 0px;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content {
 	padding: 3px 5px;
 	border-radius: 11px;
 	font-size: 11px;
@@ -197,7 +197,7 @@
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -210,7 +210,7 @@
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content {
 	position: absolute;
 	top: 11px;
 	right: 0px;
@@ -225,7 +225,7 @@
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before {
 	mask-size: 11px;
 	-webkit-mask-size: 11px;
 	top: 3px;
@@ -234,7 +234,7 @@
 
 /* active item indicator */
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
 	position: absolute;
 	z-index: 1;
 	bottom: 0;
@@ -244,14 +244,14 @@
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
 	top: -4px;
 	left: 10px;
 	width: calc(100% - 20px);
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator {
 	top: 1px;
 	left: 2px;
 	width: calc(100% - 4px);
@@ -259,8 +259,8 @@
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
 	content: "";
 	position: absolute;
 	z-index: 1;
@@ -272,24 +272,24 @@
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before {
 	border-top-color: transparent !important; /* hides border on clicked state */
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
 	border-top-color: var(--vscode-focusBorder) !important;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {
 	outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important;
 }
 
 .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label,
-.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label {
+.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label {
 	outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important;
 }
 
diff --git a/src/vs/workbench/browser/parts/paneCompositePart.ts b/src/vs/workbench/browser/parts/paneCompositePart.ts
index 876e85c3aea..fea45721bc8 100644
--- a/src/vs/workbench/browser/parts/paneCompositePart.ts
+++ b/src/vs/workbench/browser/parts/paneCompositePart.ts
@@ -114,8 +114,8 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 
 	private readonly location: ViewContainerLocation;
 	private titleContainer: HTMLElement | undefined;
-	private separateCompositeBarContainer: HTMLElement | undefined;
-	private separateCompositeBarDispoables = this._register(new DisposableStore());
+	private headerFooterCompositeBarContainer: HTMLElement | undefined;
+	private headerFooterCompositeBarDispoables = this._register(new DisposableStore());
 	private paneCompositeBarContainer: HTMLElement | undefined;
 	private paneCompositeBar = this._register(new MutableDisposable<PaneCompositeBar>());
 	private compositeBarPosition: CompositeBarPosition | undefined = undefined;
@@ -353,7 +353,7 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 
 		// Remove old composite bar
 		if (wasCompositeBarVisible) {
-			const previousCompositeBarContainer = previousPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.separateCompositeBarContainer;
+			const previousCompositeBarContainer = previousPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.headerFooterCompositeBarContainer;
 			if (!this.paneCompositeBarContainer || !this.paneCompositeBar.value || !previousCompositeBarContainer) {
 				throw new Error('Composite bar containers should exist when removing the previous composite bar');
 			}
@@ -364,13 +364,15 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 
 			previousCompositeBarContainer.classList.remove('has-composite-bar');
 
-			if (previousPosition !== CompositeBarPosition.TITLE) {
-				this.removeCompositeBarArea();
+			if (previousPosition === CompositeBarPosition.TOP) {
+				this.removeFooterHeaderArea(true);
+			} else if (previousPosition === CompositeBarPosition.BOTTOM) {
+				this.removeFooterHeaderArea(false);
 			}
 		}
 
 		// Create new composite bar
-		const newCompositeBarContainer = newPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.createCompositeBarArea();
+		const newCompositeBarContainer = newPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.createHeaderFooterCompositeBarArea();
 		if (isCompositeBarVisible) {
 
 			if (this.paneCompositeBarContainer || this.paneCompositeBar.value || !newCompositeBarContainer) {
@@ -382,33 +384,39 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 			this.paneCompositeBar.value = this.createCompositeBar();
 			this.paneCompositeBar.value.create(this.paneCompositeBarContainer);
 
-			if (newPosition !== CompositeBarPosition.TITLE) {
-				this.setCompositeBarArea(newCompositeBarContainer, newPosition === CompositeBarPosition.BOTTOM ? 'bottom' : 'top');
+			if (newPosition === CompositeBarPosition.TOP) {
+				this.setHeaderArea(newCompositeBarContainer);
+			} else if (newPosition === CompositeBarPosition.BOTTOM) {
+				this.setFooterArea(newCompositeBarContainer);
 			}
 		}
 
 		this.compositeBarPosition = newPosition;
 	}
 
-	protected override createCompositeBarArea(): HTMLElement {
-		const compositeBarArea = super.createCompositeBarArea();
-		this.separateCompositeBarContainer = compositeBarArea;
+	protected override createHeaderFooterCompositeBarArea(): HTMLElement {
+		const compositeBarArea = super.createHeaderFooterCompositeBarArea();
+		this.headerFooterCompositeBarContainer = compositeBarArea;
 
-		this.separateCompositeBarDispoables.add(addDisposableListener(compositeBarArea, EventType.CONTEXT_MENU, e => {
+		this.headerFooterCompositeBarDispoables.add(addDisposableListener(compositeBarArea, EventType.CONTEXT_MENU, e => {
 			this.onCompositeBarAreaContextMenu(new StandardMouseEvent(getWindow(compositeBarArea), e));
 		}));
-		this.separateCompositeBarDispoables.add(Gesture.addTarget(compositeBarArea));
-		this.separateCompositeBarDispoables.add(addDisposableListener(compositeBarArea, GestureEventType.Contextmenu, e => {
+		this.headerFooterCompositeBarDispoables.add(Gesture.addTarget(compositeBarArea));
+		this.headerFooterCompositeBarDispoables.add(addDisposableListener(compositeBarArea, GestureEventType.Contextmenu, e => {
 			this.onCompositeBarAreaContextMenu(new StandardMouseEvent(getWindow(compositeBarArea), e));
 		}));
 
 		return compositeBarArea;
 	}
 
-	protected override removeCompositeBarArea(): void {
-		this.separateCompositeBarContainer = undefined;
-		this.separateCompositeBarDispoables.clear();
-		super.removeCompositeBarArea();
+	private removeFooterHeaderArea(header: boolean): void {
+		this.headerFooterCompositeBarContainer = undefined;
+		this.headerFooterCompositeBarDispoables.clear();
+		if (header) {
+			this.removeHeaderArea();
+		} else {
+			this.removeFooterArea();
+		}
 	}
 
 	protected createCompositeBar(): PaneCompositeBar {