diff --git a/ChangeLog.txt b/ChangeLog.txt
index 7a8794c5..122b66bc 100644
--- a/ChangeLog.txt
+++ b/ChangeLog.txt
@@ -1,3 +1,9 @@
+0.5.16
+Added 'New Features' layout to demo.
+New tab attribute, helpText, to show tooltip over tabs.
+New model action, deleteTabset, to delete a tabset and all it's child tabs.
+New tabset attribute, enableClose, to close the tabset
+
 0.5.15
 Added new Layout prop: onTabDrag that allows tab dragging to be intercepted.
 Added example of onTabDrag in demo app, example shows a list where tabs can be dragged into, 
diff --git a/examples/demo/App.tsx b/examples/demo/App.tsx
index 1d11512d..bab43aa2 100755
--- a/examples/demo/App.tsx
+++ b/examples/demo/App.tsx
@@ -1,10 +1,10 @@
-import * as React                                   from "react";
+import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import * as ReactDOM                                from "react-dom";
-import * as FlexLayout                                                                          from "../../src/index";
+import * as ReactDOM from "react-dom";
+import * as FlexLayout from "../../src/index";
 import { Action, Actions, BorderNode, DropInfo, IJsonTabNode, Node, Rect, TabNode, TabSetNode } from "../../src/index";
-import { ILayoutProps, ITabRenderValues, ITabSetRenderValues }                                  from "../../src/view/Layout";
-import Utils                                                                                    from "./Utils";
+import { ILayoutProps, ITabRenderValues, ITabSetRenderValues } from "../../src/view/Layout";
+import Utils from "./Utils";
 
 var fields = ["Name", "Field1", "Field2", "Field3", "Field4", "Field5"];
 
@@ -15,7 +15,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: FlexL
 
     constructor(props: any) {
         super(props);
-        this.state = { layoutFile: null, model: null, adding: false, fontSize: "medium", realtimeResize: false};
+        this.state = { layoutFile: null, model: null, adding: false, fontSize: "medium", realtimeResize: false };
 
         // save layout when unloading page
         window.onbeforeunload = (event: Event) => {
@@ -137,7 +137,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: FlexL
 
     onRealtimeResize = (event: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({
-          realtimeResize: event.target.checked
+            realtimeResize: event.target.checked
         });
     }
 
@@ -198,9 +198,9 @@ class App extends React.Component<any, { layoutFile: string | null, model: FlexL
 
     factory = (node: TabNode) => {
         // log lifecycle events
-        //node.setEventListener("resize", function(p){console.log("resize");});
-        //node.setEventListener("visibility", function(p){console.log("visibility");});
-        //node.setEventListener("close", function(p){console.log("close");});
+        //node.setEventListener("resize", function(p){console.log("resize", node);});
+        //node.setEventListener("visibility", function(p){console.log("visibility", node);});
+        //node.setEventListener("close", function(p){console.log("close", node);});
 
         var component = node.getComponent();
 
@@ -316,7 +316,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: FlexL
                     alt="Add"
                     key="Add button"
                     title="Add Tab (using onRenderTabSet callback, see Demo)"
-                    style={{ marginLeft: 5, width:24, height:24 }}
+                    style={{ marginLeft: 5, width: 24, height: 24 }}
                     onClick={() => this.onAddFromTabSetButton(node)}
                 />);
         }
@@ -372,6 +372,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: FlexL
             <div className="toolbar">
                 <select onChange={this.onSelectLayout}>
                     <option value="default">Default</option>
+                    <option value="newfeatures">New Features</option>
                     <option value="simple">Simple</option>
                     <option value="justsplitters">Just Splitters</option>
                     <option value="sub">SubLayout</option>
@@ -484,11 +485,11 @@ class SimpleTable extends React.Component<{ fields: any, data: any, onClick: any
     }
 }
 
-function TabStorage({tab, layout}: {tab: TabNode, layout: FlexLayout.Layout}) {
+function TabStorage({ tab, layout }: { tab: TabNode, layout: FlexLayout.Layout }) {
     const [storedTabs, setStoredTabs] = useState<IJsonTabNode[]>(tab.getConfig()?.storedTabs ?? [])
 
     useEffect(() => {
-        tab.getModel().doAction(Actions.updateNodeAttributes(tab.getId(), {config: {...(tab.getConfig() ?? {}), storedTabs}}))
+        tab.getModel().doAction(Actions.updateNodeAttributes(tab.getId(), { config: { ...(tab.getConfig() ?? {}), storedTabs } }))
     }, [storedTabs])
 
     const [contents, setContents] = useState<HTMLDivElement | null>(null)
@@ -578,10 +579,22 @@ function TabStorage({tab, layout}: {tab: TabNode, layout: FlexLayout.Layout}) {
         </p>
         <div ref={setList} className="tab-storage-tabs">
             {storedTabs.length === 0 && <div ref={setEmptyElem} className="tab-storage-empty">Looks like there's nothing here! Try dragging a tab over this text.</div>}
-            {storedTabs.map((stored, i) => <div ref={ref => refs[i] = ref ?? undefined} className="tab-storage-entry" key={stored.id} onMouseDown={e => {
-                e.preventDefault()
-                layout.addTabWithDragAndDrop(stored.name ?? 'Unnamed', stored, (node) => node && setStoredTabs(tabs => tabs.filter(tab => tab !== stored)))
-            }}>{stored.name ?? 'Unnamed'}</div>)}
+            {storedTabs.map((stored, i) => (
+                <div
+                    ref={ref => refs[i] = ref ?? undefined}
+                    className="tab-storage-entry"
+                    key={stored.id}
+                    onMouseDown={e => {
+                        e.preventDefault()
+                        layout.addTabWithDragAndDrop(stored.name ?? 'Unnamed', stored, (node) => node && setStoredTabs(tabs => tabs.filter(tab => tab !== stored)))
+                    }}
+                    onTouchStart={e => {
+                        layout.addTabWithDragAndDrop(stored.name ?? 'Unnamed', stored, (node) => node && setStoredTabs(tabs => tabs.filter(tab => tab !== stored)))
+                    }}
+                >
+                    {stored.name ?? 'Unnamed'}
+                </div>))
+            }
         </div>
     </div>
 }
diff --git a/examples/demo/gray.css b/examples/demo/gray.css
index 7e77451b..5398b0b3 100644
--- a/examples/demo/gray.css
+++ b/examples/demo/gray.css
@@ -94,3 +94,8 @@ html,body
 	background-color: #ddd;
 	border-radius: 0.5em;
 }
+
+small {
+    color: gray;
+}
+
diff --git a/examples/demo/layouts/default.layout b/examples/demo/layouts/default.layout
index e6785d08..eee5a7a3 100755
--- a/examples/demo/layouts/default.layout
+++ b/examples/demo/layouts/default.layout
@@ -39,11 +39,6 @@
                             "type":"url",
 							"data": "https://en.wikipedia.org/wiki/Main_Page"
 						}
-					},
-					{
-						"type": "tab",
-						"name": "Tab Storage",
-						"component": "tabstorage"
 					}
 				]
 			}
diff --git a/examples/demo/layouts/newfeatures.layout b/examples/demo/layouts/newfeatures.layout
new file mode 100755
index 00000000..b3eb2f95
--- /dev/null
+++ b/examples/demo/layouts/newfeatures.layout
@@ -0,0 +1,87 @@
+{
+	"global": {
+		"tabEnableFloat": true,
+        "tabSetEnableClose":true
+	},
+	"layout": {
+		"type": "row",
+		"children": [
+			{
+				"type": "tabset",
+				"weight": 12.5,
+				"active": true,
+				"children": [
+					{
+						"type": "tab",
+						"name": "One",
+                        "helpText": "this tab has helpText defined",
+						"component": "text",
+                        "config": {
+                            "text":"New:<ul><li>Help text (tooltip) option on tabs: <br><small>Hover over this tab button</small></li><li>Action to close tabset:<br><small>See added x button in this tabset</small></li><li>Intercept drag drop to allow dropping tabs into custom areas:<br><small>See Tab Storage tab<small></li></ul>"
+                            }
+					},
+					{
+						"type": "tab",
+						"name": "Two",
+						"component": "grid"
+					}
+				]
+			},
+			{
+				"type": "tabset",
+				"weight": 25,
+				"children": [
+					{
+						"type": "tab",
+						"name": "Tab Storage",
+						"component": "tabstorage"
+					}
+				]
+			}
+		]
+	},
+	"borders": [
+		{
+		    "type": "border",
+			"location": "bottom",
+			"children": [
+				{
+					"type": "tab",
+					"enableClose":false,
+					"name": "Output",
+					"component": "grid"
+				},
+				{
+					"type": "tab",
+					"enableClose":false,
+					"name": "Terminal",
+					"component": "grid"
+				}
+			]
+		},
+		 {
+		    "type": "border",
+		 	"location": "left",
+			"children": [
+				{
+					"type": "tab",
+					"enableClose":false,
+					"name": "Navigation",
+					"component": "grid"
+				}
+			]
+		},
+		{
+		    "type": "border",
+		 	"location": "right",
+			"children": [
+				{
+					"type": "tab",
+					"enableClose":false,
+					"name": "Options",
+					"component": "grid"
+				}
+			]
+		}
+	]
+}
diff --git a/src/I18nLabel.ts b/src/I18nLabel.ts
index cf9a8012..be794b2d 100644
--- a/src/I18nLabel.ts
+++ b/src/I18nLabel.ts
@@ -1,5 +1,6 @@
 export enum I18nLabel {
     Close_Tab = "Close",
+    Close_Tabset = "Close tabset",
     Move_Tab = "Move: ",
     Move_Tabset = "Move tabset",
     Maximize = "Maximize tabset",
diff --git a/src/Types.ts b/src/Types.ts
index 8c2afd66..0dd18293 100644
--- a/src/Types.ts
+++ b/src/Types.ts
@@ -75,4 +75,6 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ = "flexlayout__tab_toolbar_button-",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT = "flexlayout__tab_toolbar_button-float",
     FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
+    FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
+
 }
diff --git a/src/model/Actions.ts b/src/model/Actions.ts
index 768d778f..f1401e1b 100755
--- a/src/model/Actions.ts
+++ b/src/model/Actions.ts
@@ -8,6 +8,7 @@ class Actions {
     static ADD_NODE = "FlexLayout_AddNode";
     static MOVE_NODE = "FlexLayout_MoveNode";
     static DELETE_TAB = "FlexLayout_DeleteTab";
+    static DELETE_TABSET = "FlexLayout_DeleteTabset";
     static RENAME_TAB = "FlexLayout_RenameTab";
     static SELECT_TAB = "FlexLayout_SelectTab";
     static SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
@@ -26,7 +27,7 @@ class Actions {
      * @param location the location where the new tab will be added, one of the DockLocation enum values.
      * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
      * @param select (optional) whether to select the new tab, overriding autoSelectTab
-     * @returns {{type: (string|string), json: *, toNode: *, location: (*|string), index: *, select?: boolean}}
+     * @returns {Action} the action
      */
     static addNode(json: any, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action {
         return new Action(Actions.ADD_NODE, {
@@ -45,7 +46,7 @@ class Actions {
      * @param location the location where the moved node will be added, one of the DockLocation enum values.
      * @param index for docking to the center this value is the index of the tab, use -1 to add to the end.
      * @param select (optional) whether to select the moved tab(s) in new tabset, overriding autoSelectTab
-     * @returns {{type: (string|string), fromNode: *, toNode: *, location: (*|string), index: *}}
+     * @returns {Action} the action
      */
     static moveNode(fromNodeId: string, toNodeId: string, location: DockLocation, index: number, select?: boolean): Action {
         return new Action(Actions.MOVE_NODE, {
@@ -59,18 +60,27 @@ class Actions {
 
     /**
      * Deletes a tab node from the layout
-     * @param tabNodeId the id of the node to delete
-     * @returns {{type: (string|string), node: *}}
+     * @param tabsetNodeId the id of the tab node to delete
+     * @returns {Action} the action
      */
     static deleteTab(tabNodeId: string): Action {
         return new Action(Actions.DELETE_TAB, { node: tabNodeId });
     }
 
+    /**
+     * Deletes a tabset node and all it's child tab nodes from the layout
+     * @param tabsetNodeId the id of the tabset node to delete
+     * @returns {Action} the action
+     */
+     static deleteTabset(tabsetNodeId: string): Action {
+        return new Action(Actions.DELETE_TABSET, { node: tabsetNodeId });
+    }
+
     /**
      * Change the given nodes tab text
      * @param tabNodeId the id of the node to rename
      * @param text the test of the tab
-     * @returns {{type: (string|string), node: *, text: *}}
+     * @returns {Action} the action
      */
     static renameTab(tabNodeId: string, text: string): Action {
         return new Action(Actions.RENAME_TAB, { node: tabNodeId, text });
@@ -79,7 +89,7 @@ class Actions {
     /**
      * Selects the given tab in its parent tabset
      * @param tabNodeId the id of the node to set selected
-     * @returns {{type: (string|string), tabNode: *}}
+     * @returns {Action} the action
      */
     static selectTab(tabNodeId: string): Action {
         return new Action(Actions.SELECT_TAB, { tabNode: tabNodeId });
@@ -88,7 +98,7 @@ class Actions {
     /**
      * Set the given tabset node as the active tabset
      * @param tabsetNodeId the id of the tabset node to set as active
-     * @returns {{type: (string|string), tabsetNode: *}}
+     * @returns {Action} the action
      */
     static setActiveTabset(tabsetNodeId: string): Action {
         return new Action(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId });
@@ -100,7 +110,7 @@ class Actions {
      *  Actions.adjustSplit({node1: "1", weight1:30, pixelWidth1:300, node2: "2", weight2:70, pixelWidth2:700});
      *
      * @param splitSpec an object the defines the new split between two tabsets, see example below.
-     * @returns {{type: (string|string), node1: *, weight1: *, pixelWidth1: *, node2: *, weight2: *, pixelWidth2: *}}
+     * @returns {Action} the action
      */
     static adjustSplit(splitSpec: { node1Id: string; weight1: number; pixelWidth1: number; node2Id: string; weight2: number; pixelWidth2: number }): Action {
         const node1 = splitSpec.node1Id;
@@ -123,7 +133,7 @@ class Actions {
     /**
      * Maximizes the given tabset
      * @param tabsetNodeId the id of the tabset to maximize
-     * @returns {{type: (string|string), node: *}}
+     * @returns {Action} the action
      */
     static maximizeToggle(tabsetNodeId: string): Action {
         return new Action(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId });
@@ -132,7 +142,7 @@ class Actions {
     /**
      * Updates the global model jsone attributes
      * @param attributes the json for the model attributes to update (merge into the existing attributes)
-     * @returns {{type: (string|string), json: *}}
+     * @returns {Action} the action
      */
     static updateModelAttributes(attributes: any): Action {
         return new Action(Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
@@ -142,7 +152,7 @@ class Actions {
      * Updates the given nodes json attributes
      * @param nodeId the id of the node to update
      * @param attributes the json attributes to update (merge with the existing attributes)
-     * @returns {{type: (string|string), node: *, json: *}}
+     * @returns {Action} the action
      */
     static updateNodeAttributes(nodeId: string, attributes: any): Action {
         return new Action(Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
diff --git a/src/model/IJsonModel.ts b/src/model/IJsonModel.ts
index 72aed674..41d6443b 100755
--- a/src/model/IJsonModel.ts
+++ b/src/model/IJsonModel.ts
@@ -55,6 +55,7 @@ export interface IGlobalAttributes {
 	tabSetBorderInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
 	tabSetClassNameHeader?: string;
 	tabSetClassNameTabStrip?: string;
+	tabSetEnableClose?: boolean; // default: false
 	tabSetEnableDeleteWhenEmpty?: boolean; // default: true
 	tabSetEnableDivide?: boolean; // default: true
 	tabSetEnableDrag?: boolean; // default: true
@@ -81,6 +82,7 @@ export interface ITabSetAttributes {
 	classNameHeader?: string; //  - inherited from global tabSetClassNameHeader
 	classNameTabStrip?: string; //  - inherited from global tabSetClassNameTabStrip
 	config?: any;
+	enableClose?: boolean; // default: false - inherited from global tabSetEnableClose
 	enableDeleteWhenEmpty?: boolean; // default: true - inherited from global tabSetEnableDeleteWhenEmpty
 	enableDivide?: boolean; // default: true - inherited from global tabSetEnableDivide
 	enableDrag?: boolean; // default: true - inherited from global tabSetEnableDrag
diff --git a/src/model/Model.ts b/src/model/Model.ts
index 8691bb43..b9449d0e 100755
--- a/src/model/Model.ts
+++ b/src/model/Model.ts
@@ -76,6 +76,7 @@ class Model {
         attributeDefinitions.add("tabSetEnableDrag", true).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("tabSetEnableDivide", true).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("tabSetEnableMaximize", true).setType(Attribute.BOOLEAN);
+        attributeDefinitions.add("tabSetEnableClose", false).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("tabSetAutoSelectTab", true).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("tabSetClassNameTabStrip", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("tabSetClassNameHeader", undefined).setType(Attribute.STRING);
@@ -253,11 +254,25 @@ class Model {
             case Actions.DELETE_TAB: {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
-                    delete this._idMap[action.data.node];
                     node._delete();
                 }
                 break;
             }
+            case Actions.DELETE_TABSET: {
+                const node = this._idMap[action.data.node];
+
+                if (node instanceof TabSetNode) {
+                    // first delete all child tabs
+                    const children = [...node.getChildren()];
+                    children.forEach((child, i) => {
+                        (child as TabNode)._delete();
+                    });
+
+                    node._delete();
+                    this._tidy();
+                }
+                break;
+            }
             case Actions.FLOAT_TAB: {
                 const node = this._idMap[action.data.node];
                 if (node instanceof TabNode) {
diff --git a/src/model/TabSetNode.ts b/src/model/TabSetNode.ts
index cd9623d9..f94d3788 100755
--- a/src/model/TabSetNode.ts
+++ b/src/model/TabSetNode.ts
@@ -59,6 +59,7 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         attributeDefinitions.addInherited("enableDrag", "tabSetEnableDrag");
         attributeDefinitions.addInherited("enableDivide", "tabSetEnableDivide");
         attributeDefinitions.addInherited("enableMaximize", "tabSetEnableMaximize");
+        attributeDefinitions.addInherited("enableClose", "tabSetEnableClose");
         attributeDefinitions.addInherited("classNameTabStrip", "tabSetClassNameTabStrip");
         attributeDefinitions.addInherited("classNameHeader", "tabSetClassNameHeader");
         attributeDefinitions.addInherited("enableTabStrip", "tabSetEnableTabStrip");
@@ -181,6 +182,10 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         return this._getAttr("enableMaximize") as boolean;
     }
 
+    isEnableClose() {
+        return this._getAttr("enableClose") as boolean;
+    }
+
     canMaximize() {
         if (this.isEnableMaximize()) {
             // always allow maximize toggle if already maximized
@@ -340,6 +345,11 @@ class TabSetNode extends Node implements IDraggable, IDropTarget {
         });
     }
 
+    /** @hidden @internal */
+    _delete() {
+        (this._parent as RowNode)._removeChild(this);
+    }
+
     /** @hidden @internal */
     _remove(node: TabNode) {
         const removedIndex = this._removeChild(node);
diff --git a/src/view/Layout.tsx b/src/view/Layout.tsx
index ac9b0bdf..833f9d4c 100755
--- a/src/view/Layout.tsx
+++ b/src/view/Layout.tsx
@@ -98,6 +98,7 @@ export interface ILayoutState {
 
 export interface IIcons {
     close?: React.ReactNode;
+    closeTabset?: React.ReactNode;
     popout?: React.ReactNode;
     maximize?: React.ReactNode;
     restore?: React.ReactNode;
diff --git a/src/view/TabSet.tsx b/src/view/TabSet.tsx
index 68cd5a0b..7dff2dda 100755
--- a/src/view/TabSet.tsx
+++ b/src/view/TabSet.tsx
@@ -65,6 +65,10 @@ export const TabSet = (props: ITabSetProps) => {
         }
     };
 
+    const onClose = () => {
+        layout.doAction(Actions.deleteTabset(node.getId()));
+    };
+
     const onFloatTab = () => {
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
@@ -195,6 +199,23 @@ export const TabSet = (props: ITabSetProps) => {
         );
     }
 
+    if (!node.isMaximized() && node.isEnableClose()) {
+        const title = layout.i18nName(I18nLabel.Close_Tabset);
+        const btns = showHeader ? headerButtons : buttons;
+        btns.push(
+            <button
+                key="close"
+                title={title}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
+                onClick={onClose}
+                onMouseDown={onInterceptMouseDown}
+                onTouchStart={onInterceptMouseDown}
+            >
+                {icons?.closeTabset}
+            </button>
+        );
+    }
+
     toolbar = (
         <div key="toolbar" ref={toolbarRef}
             className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR)}
diff --git a/style/_base.scss b/style/_base.scss
index bba84e01..7af2f4dd 100755
--- a/style/_base.scss
+++ b/style/_base.scss
@@ -270,6 +270,10 @@
                 &-float {
                     background: transparent url("../images/popout.png") no-repeat center;
                 }
+
+                &-close {
+                    background: transparent url("../images/close.png") no-repeat center;
+                }
             }
 
             &_sticky_buttons_container {
diff --git a/style/dark.css b/style/dark.css
index 420fd037..7e27d398 100644
--- a/style/dark.css
+++ b/style/dark.css
@@ -232,6 +232,9 @@
 .flexlayout__tab_toolbar_button-float {
   background: transparent url("../images/popout.png") no-repeat center;
 }
+.flexlayout__tab_toolbar_button-close {
+  background: transparent url("../images/close.png") no-repeat center;
+}
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   align-items: center;
diff --git a/style/gray.css b/style/gray.css
index 67d2e196..25bc5e09 100644
--- a/style/gray.css
+++ b/style/gray.css
@@ -232,6 +232,9 @@
 .flexlayout__tab_toolbar_button-float {
   background: transparent url("../images/popout.png") no-repeat center;
 }
+.flexlayout__tab_toolbar_button-close {
+  background: transparent url("../images/close.png") no-repeat center;
+}
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   align-items: center;
diff --git a/style/light.css b/style/light.css
index d96e7c72..a3ef8813 100755
--- a/style/light.css
+++ b/style/light.css
@@ -220,6 +220,9 @@
 .flexlayout__tab_toolbar_button-float {
   background: transparent url("../images/popout.png") no-repeat center;
 }
+.flexlayout__tab_toolbar_button-close {
+  background: transparent url("../images/close.png") no-repeat center;
+}
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   align-items: center;
diff --git a/yarn.lock b/yarn.lock
index f22042ee..dc387cc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1846,6 +1846,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/uuid@^8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.1.tgz#1a32969cf8f0364b3d8c8af9cc3555b7805df14f"
+  integrity sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==
+
 "@types/webpack-sources@*":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
@@ -7101,7 +7106,7 @@ loglevelnext@^1.0.1:
     es6-symbol "^3.1.1"
     object.assign "^4.1.0"
 
-loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9143,6 +9148,15 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
@@ -9229,6 +9243,14 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -9756,6 +9778,14 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -11087,7 +11117,7 @@ uuid@^3.1.0, uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0:
+uuid@^8.3.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==