diff --git a/src/assets/PlanningTool.css b/src/assets/PlanningTool.css
index 5255075..a5389e0 100644
--- a/src/assets/PlanningTool.css
+++ b/src/assets/PlanningTool.css
@@ -9,18 +9,6 @@
   width: calc(100% - 30rem);
 }
 
-.task_card {
-  background: #0000aa;
-}
-
-.scheduled_wo {
-  background: #00aa00;
-}
-
-.maintenance_wo {
-  background: #aa0000;
-}
-
 .rct-sidebar {
   position: relative;
   padding-right: 0.25rem;
@@ -58,26 +46,19 @@
   margin-bottom: 1.25rem;
 }
 
-.explanatory-notes .note .color {
-  display: inline-block;
+.explanatory-notes .note {
+  display: flex;
+  align-items: center;
+  padding-top: .5rem;
+}
+
+.explanatory-notes .note .legend-color {
   background-color: #000;
   width: 1.5rem;
   height: 0.8rem;
   margin-right: 1.3rem;
 }
 
-.explanatory-notes .note .color.scheduled-wo {
-  background-color: #aa0000;
-}
-
-.explanatory-notes .note .color.task-card {
-  background-color: #00aa00;
-}
-
-.explanatory-notes .note .color.maintenance-wo {
-  background-color: #0000aa;
-}
-
 .static-item:after {
   content: '';
   display: block;
diff --git a/src/components/Legend.jsx b/src/components/Legend.jsx
new file mode 100644
index 0000000..b910bc5
--- /dev/null
+++ b/src/components/Legend.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+import Constants from "../constants/Constants";
+
+const Legend = ({ title, legendItems }) => {
+  let defaultItems = Constants.DEFAULT_LEGEND_ITEMS;
+
+  return (
+    <div className="explanatory-notes">
+      <h3>{title}</h3>
+      <React.Fragment>
+        {legendItems.map((item, index) => {
+          return (
+            <div key={index} className="note">
+              <div
+                className="legend-color"
+                style={{ background: `${item.color}` }}
+              />
+              <div className="legend-item">{item.name}</div>
+            </div>
+          );
+        })}
+        {defaultItems.map((item, index) => {
+          return (
+            <div key={index} className="note">
+              <div
+                className="legend-color"
+                style={{ background: `${item.color}` }}
+              />
+              <div className="legend-item">{item.name}</div>
+            </div>
+          );
+        })}
+      </React.Fragment>
+    </div>
+  );
+};
+
+export default Legend;
diff --git a/src/components/PlanningTool.jsx b/src/components/PlanningTool.jsx
index 53bd67a..cbe0f68 100644
--- a/src/components/PlanningTool.jsx
+++ b/src/components/PlanningTool.jsx
@@ -15,6 +15,7 @@ import Popup from './Popup'
 import Modal from './Modal'
 import EditItemModal from './EditItemModal'
 import Constants from '../constants/Constants'
+import Legend from "./Legend";
 
 const keys = {
   groupIdKey: "id",
@@ -1627,21 +1628,7 @@ class PlanningTool extends Component {
             }
           </Timeline>
           <div className="explanatory-notes-container">
-            <div className="explanatory-notes">
-              <h3>Task types</h3>
-              <div className="note">
-                <span className="color scheduled-wo"/>
-                Scheduled_wo
-              </div>
-              <div className="note">
-                <span className="color task-card"/>
-                Task_card
-              </div>
-              <div className="note">
-                <span className="color maintenance-wo"/>
-                Maintenance_wo
-              </div>
-            </div>
+            <Legend legendItems={this.props.legendItems} title="Legend" />
             {this.renderPopup(popup)}
             {/*undo redo*/}
             <div className="action-buttons">
@@ -1710,6 +1697,10 @@ PlanningTool
     date: PropTypes.instanceOf(moment).isRequired,
     label: PropTypes.string,
     color: PropTypes.string,
+  })),
+  legendItems: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string
   }))
 }
 
@@ -1734,5 +1725,19 @@ PlanningTool
   ],
   groups: [],
   popup: Popup,
+  legendItems: [
+      {
+        name: "scheduled_wo",
+        color: "red"
+      },
+    {
+      name: "maintenance_wo",
+      color: "green"
+    },
+    {
+      name: "task group",
+      color: "blue"
+    }
+    ]
 }
 export default PlanningTool
\ No newline at end of file
diff --git a/src/constants/Constants.js b/src/constants/Constants.js
index 14f4ef5..1164b7a 100644
--- a/src/constants/Constants.js
+++ b/src/constants/Constants.js
@@ -7,4 +7,15 @@ export default class Constants{
   static RESOURCE_REORDER = 'resource-reorder'
   static MILESTONE_ADD = 'milestone-add'
   static MILESTONE_EDIT = 'milestone-edit'
+  static DEFAULT_LEGEND_ITEMS = [
+    {
+      name: "Current selection & parents/children",
+      color: "#FFC107",
+    },
+    {
+      name: "Non-movable item",
+      color:
+          "repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #465298 2px, #465298 4px )",
+    },
+  ];
 }
\ No newline at end of file