diff --git a/AppSchema.json b/AppSchema.json
index c6e118daa..ac31319eb 100644
--- a/AppSchema.json
+++ b/AppSchema.json
@@ -8129,7 +8129,7 @@
             }
         ],
         "initialValues": {
-            "config": "{ \n\"initialDatetime\": \"2019-07-01T00:00:00.000Z\",\n\"finalDatetime\": \"2019-09-01T00:00:00.000Z\"\n}"
+            "config": "{ \n\"initialDatetime\": \"2019-07-01T00:00:00.000Z\",\n\"finalDatetime\": \"2019-09-01T00:00:00.000Z\",\n \"allowStartingFromThePast\": false\n}"
         },
         "addLeftIcons": true,
         "editors": {
diff --git a/BackendServers/WebServer/AppLoader.js b/BackendServers/WebServer/AppLoader.js
index 3657bf68a..bffa4527a 100644
--- a/BackendServers/WebServer/AppLoader.js
+++ b/BackendServers/WebServer/AppLoader.js
@@ -57,6 +57,7 @@ function newAppLoader() {
                 'DesignSpace/Workspace/FunctionLibraries/DataMineFunctions.js',
                 'DesignSpace/Workspace/FunctionLibraries/DataStorageFunctions.js',
                 'DesignSpace/Workspace/FunctionLibraries/ChartingSpaceFunctions.js',
+                'DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js',
 
                 'Utilities/CoordinateTransformations.js',
                 'Utilities/DateRateTransformations.js',
diff --git a/BackendServers/WebServer/index.html b/BackendServers/WebServer/index.html
index ffe5f49f5..ea5997c80 100644
--- a/BackendServers/WebServer/index.html
+++ b/BackendServers/WebServer/index.html
@@ -10,6 +10,10 @@
     <script type="text/javascript" src="WebServer/AppPreLoader.js"></script>
     <script src="externalScripts/CCapture.all.min.js"></script>
 
+    <!-- Documentation Style Sheets -->
+    <link rel="stylesheet" type="text/css"
+        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
     <script type="text/javascript">
         function loadCanvas() {
             try {
@@ -37,9 +41,50 @@
     <div id="masterApp"></div>
     <div id="canvasApp"></div>
     <div id="docApp" style="position:fixed; top:100000px; left:100000px">
-        <iframe id="docIFrame" src="https://julian-molina.github.io/Documentation/" style="border:none; " height="2000" width="900"></iframe>
+        <iframe id="docIFrame" src="https://julian-molina.github.io/Documentation/" style="border:none; " height="2000"
+            width="900"></iframe>
     </div>
     <div id="textAreaDiv"></div>
     <div id="inputDiv" style="font-family:saira condensed;">&nbsp;</div>
+
+    <!-- Tutorial Step Template -->
+    <div id="tutorialStepDiv" class="tutorial-step" style="position:fixed; top:100000px; left:100000px;">
+
+        <div>
+            <h1 class="tutorial-saira-large">Trading Engine</h1>
+        </div>
+        <div>
+            <div class="tutorial-summary">Summary</div>
+            <h2 class="tutorial-saira-medium">Sub-Title</h2>
+            <table class="tutorial-definitionTable">
+                <tr>
+                    <td>
+                        <img
+                            src="https://julian-molina.github.io/Documentation/images/icons/nodes/png150/trading-engine.png" />
+                    </td>
+                    <td>
+                        <strong class="tutorial-saira-bold-small">The trading engine hierarchy is t ible and exposed to others.</strong>
+                    </td>
+                </tr>
+            </table>
+            <p class="tutorial-saira-small">You will use th purposes:</p>
+            <ul>
+                <li>
+                    <p class="tutorial-saira-small"><strong class="tutorial-saira-bold-small">To let your trading systems:</strong> This allows stratrunning.</p>
+                </li>
+                <li>
+                    <p class="tutorial-saira-small"><strong class="tutorial-saira-bold-small">To keep track of the actions:</strong> By analyzing runtiading session.</p>
+                </li>
+            </ul>
+            <p class="tutorial-saira-small">The hierarchyusers.</p>
+            <div class="tutorial-saira-bold-small tutorial-callout"> callout text.</div>
+            <p class="tutorial-saira-small">The hiera feedback capabilities to users.</p>
+            <div class="tutorial-alert-info" role="alert"><i class="tutorial-fa tutorial-info-circle"></i> <b>Note:</b> Esto es una nota, algonoteworthy.</div>
+            <div class="tutorial-alert-success" role="alert"><i class="tutorial-fa tutorial-check-square-o"></i> <b>Tip:</b> Esto es un tip. </div>
+            <div class="tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> Esto es  algo importante.</div>
+            <div class="tutorial-alert-danger" role="alert"><i class="tutorial-fa tutorial-exclamation-circle"></i> <b>Warning:</b>  Esto es una aviso de alerta.</div>
+        </div>
+    </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/BackendServers/WebServer/main.css b/BackendServers/WebServer/main.css
index 9c38d04a2..8827f01cb 100644
--- a/BackendServers/WebServer/main.css
+++ b/BackendServers/WebServer/main.css
@@ -13,4 +13,151 @@
   font-weight: 300;
   src: local('Saira Condensed Light'), local('SairaCondensed-Light'), url(Fonts/Saira-Condensed.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+.tutorial-step {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 2px solid;
+  border-color: #1b998b;
+  border-radius: 8px;
+  background-color: #fdfdfd;
+}
+
+.tutorial-summary {
+  font-size:120%;
+  color: #808080;
+  margin:20px 0px 20px 0px;
+  border-left: 5px solid #fd6a33;
+  padding-left: 10px;
+
+}
+
+.tutorial-summary:before {
+  content: "Summary: ";
+  font-weight: bold;
+}
+
+.tutorial-definitionTable {
+  background-color: #f3f3f3;
+  border-top-color: #a6e1ec;
+  padding: 15px;
+  margin: 20px 0;
+  border: solid 0px;
+  vertical-align: middle;
+  min-width: 100px;
+  width: 100%;
+}
+
+.tutorial-alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #a6e1ec;
+}
+
+.tutorial-alert-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #c9e2b3
+}
+
+.tutorial-alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #f7e1b5
+}
+
+.tutorial-alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #e4b9c0
+}
+
+.tutorial-callout {
+  padding: 20px;
+  margin: 20px 0;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
+  border-left-color: #bcd643;
+  font-weight: 500;
+}
+ 
+.tutorial-info-circle:before {
+  content:"\f05a"
+}
+
+.tutorial-check-square-o:before {
+  content:"\f046"
+}
+
+.tutorial-exclamation-circle:before { 
+  content:"\f06a"
+}
+
+.tutorial-warning:before,.fa-exclamation-triangle:before {
+  content:"\f071"
+}
+
+.tutorial-fa {
+  display:inline-block;
+  font:normal normal normal 14px/1 FontAwesome;
+  font-size:inherit;
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-small {
+  display:inline-block;
+  font:normal normal normal 14px/1 "Saira";
+  font-size:inherit;
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-medium {
+  display:inline-block;
+  font:normal normal normal 30px/1 "Saira";
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-large {
+  display:inline-block;
+  font:bold normal normal 40px/1 "Saira";
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-bold-small {
+  display:inline-block;
+  font:bold normal normal 14px/1 "Saira";
+  font-size:inherit;
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
 }
\ No newline at end of file
diff --git a/BackendServers/WebServer/suite-dummy.html b/BackendServers/WebServer/suite-dummy.html
new file mode 100644
index 000000000..78b108803
--- /dev/null
+++ b/BackendServers/WebServer/suite-dummy.html
@@ -0,0 +1,54 @@
+<h2 id="trading-engine">Trading Engine</h2>
+
+<table class="definitionTable"><tr><td>
+
+<img src="images/icons/nodes/png150/trading-engine.png" />
+
+</td><td>
+
+<strong>The trading engine hierarchy is the data structure used by the trading bot to keep runtime information highly accessible and exposed to others.</strong>
+
+</td></tr></table>
+
+<p>You will use this hierarchy for two main purposes:</p>
+
+<p>The hierarchy exposes—literally—all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users. The hierarchy exposes—literally—all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users.</p>
+
+<ul>
+  <li>
+    <p><strong>To let your trading systems:</strong> This allows strategies to keep track of and react to current and past events—including those involving the exchange, such as orders placed or filled—as the bot is running.</p>
+  </li>
+  <li>
+    <p><strong>To keep track of the actions:</strong> By analyzing runtime information, you may gain a detailed understanding of what happens, when, and why, throughout a trading session.</p>
+  </li>
+</ul>
+
+<p>The hierarchy exposes—literally—all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users.</p>
+
+<div class="bs-callout bs-callout-success">Este callout se usa para resaltar una idea particularmente importante. Algo se sobresale, como una conclusion, o algo por el estilo.</div>
+
+<p>The hierarchy exposes all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users. The hierarchy exposes all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users.</p>
+
+<div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> Esto es una nota, algo noteworthy.</div>
+
+<div class="alert alert-success" role="alert"><i class="fa fa-check-square-o"></i> <b>Tip:</b> Esto es un tip.</div>
+
+<div class="alert alert-warning" role="alert"><i class="fa fa-warning"></i> <b>Important:</b> Esto es algo importante.</div>
+
+<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle"></i> <b>Warning:</b> Esto es una aviso de alerta.</div>
+
+<h4 id="adding-a-trading-engine-node">Adding a Trading Engine Node</h4>
+
+<p>Calculo que con este segundo nivel de titulo alcanza.</p>
+
+<h4 id="este-es-otro-formato-tipico-de-la-doc--trading-engine">Este es otro formato tipico de la doc:  Trading Engine</h4>
+
+<table class="definitionTable"><tr><td>
+
+<img src="images/icons/nodes/png50/trading-engine.png" />
+
+</td><td>
+
+The trading engine hierarchy is the data structure used by the trading bot to keep runtime information highly accessible and exposed to others.
+
+</td></tr></table>
diff --git a/CanvasApp/DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js
new file mode 100644
index 000000000..49abd5e01
--- /dev/null
+++ b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js
@@ -0,0 +1,24 @@
+function newTutorialFunctions() {
+    thisObject = {
+        play: play
+    }
+    const HEIGHT = 800
+    const WIDTH = 600
+    const MARGIN = 300
+    return thisObject
+
+    function play(node) {
+        let docAppDiv = document.getElementById('tutorialStepDiv')
+        tutorialPosition = {
+            x: MARGIN,
+            y: (browserCanvas.height - HEIGHT) / 2
+        }
+     
+        docAppDiv.style = '   ' + 
+        'position:fixed; top:' + tutorialPosition.y + 'px; ' + 
+        'left:' + tutorialPosition.x + 'px; ' + 
+        'width: ' + WIDTH + 'px;' +
+        'height: ' + HEIGHT + 'px;' + 
+        'z-index:1;'
+    }
+}
diff --git a/CanvasApp/DesignSpace/Workspace/Workspace.js b/CanvasApp/DesignSpace/Workspace/Workspace.js
index 875e0214c..2fb7c7976 100644
--- a/CanvasApp/DesignSpace/Workspace/Workspace.js
+++ b/CanvasApp/DesignSpace/Workspace/Workspace.js
@@ -69,6 +69,7 @@ function newWorkspace() {
     let functionLibraryDataMineFunctions = newDataMineFunctions()
     let functionLibraryDataStorageFunctions = newDataStorageFunctions()
     let functionLibraryChartingSpaceFunctions = newChartingSpaceFunctions()
+    let functionLibraryTutorialFunctions = newTutorialFunctions()
 
     thisObject.nodeChildren = newNodeChildren()
 
@@ -635,6 +636,11 @@ function newWorkspace() {
                     functionLibraryChartingSpaceFunctions.addAllDataMineLayers(payload.node, functionLibraryUiObjectsFromNodes)
                 }
                 break
+            case 'Play Tutorial':
+                {
+                    functionLibraryTutorialFunctions.play(payload.node)
+                }
+                break
             case 'Send Webhook Test Message':
                 {
                     functionLibraryWebhookFunctions.sendTestMessage(payload.node, callBackFunction)
diff --git a/CanvasApp/FloatingSpace/UiObject.js b/CanvasApp/FloatingSpace/UiObject.js
index f3b1885dd..d67d14733 100644
--- a/CanvasApp/FloatingSpace/UiObject.js
+++ b/CanvasApp/FloatingSpace/UiObject.js
@@ -1551,23 +1551,23 @@ function newUiObject() {
 
     function drawErrorMessage() {
         if (thisObject.hasError === false) { return }
-        drawMessage(errorMessage)
+        drawMessage(errorMessage, UI_COLOR.RUSTED_RED)
     }
 
     function drawWarningMessage() {
         if (thisObject.hasError === true) { return }
         if (thisObject.hasWarning !== true) { return }
-        drawMessage(warningMessage)
+        drawMessage(warningMessage, UI_COLOR.TITANIUM_YELLOW)
     }
 
     function drawInfoMessage() {
         if (thisObject.hasError === true) { return }
         if (thisObject.hasWarning === true) { return }
         if (thisObject.hasInfo !== true) { return }
-        drawMessage(infoMessage)
+        drawMessage(infoMessage, UI_COLOR.TURQUOISE)
     }
 
-    function drawMessage(message) {
+    function drawMessage(message, textColor) {
 
         if (canvas.floatingSpace.inMapMode === true) {
             return
@@ -1603,11 +1603,12 @@ function newUiObject() {
 
                 labelPoint = {
                     x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
-                    y: position.y + radius * 2 / 5 + fontSize * FONT_ASPECT_RATIO + 15
+                    y: position.y + radius * 2 / 5 + fontSize * FONT_ASPECT_RATIO + 25
                 }
 
                 browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
+
+                browserCanvasContext.fillStyle = 'rgba(' + textColor + ', 1)'
                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
             }
         }
diff --git a/CanvasApp/FloatingSpace/UiObjectConstructor.js b/CanvasApp/FloatingSpace/UiObjectConstructor.js
index 218b544d6..4443ea708 100644
--- a/CanvasApp/FloatingSpace/UiObjectConstructor.js
+++ b/CanvasApp/FloatingSpace/UiObjectConstructor.js
@@ -565,7 +565,7 @@ function newUiObjectConstructor() {
             floatingObject.friction = INITIAL_FRICTION
 
             floatingObject.initializeMass(300)
-            floatingObject.initializeRadius(INITIAL_RADIOUS - 5)
+            floatingObject.initializeRadius(INITIAL_RADIOUS - 2)
             floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
             floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 10)
             floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
@@ -581,7 +581,7 @@ function newUiObjectConstructor() {
             floatingObject.friction = INITIAL_FRICTION
 
             floatingObject.initializeMass(150)
-            floatingObject.initializeRadius(INITIAL_RADIOUS - 10)
+            floatingObject.initializeRadius(INITIAL_RADIOUS - 4)
             floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
             floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 20)
             floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
@@ -597,7 +597,7 @@ function newUiObjectConstructor() {
             floatingObject.friction = INITIAL_FRICTION
 
             floatingObject.initializeMass(75)
-            floatingObject.initializeRadius(INITIAL_RADIOUS - 15)
+            floatingObject.initializeRadius(INITIAL_RADIOUS - 6)
             floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
             floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 30)
             floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
@@ -613,7 +613,7 @@ function newUiObjectConstructor() {
             floatingObject.friction = INITIAL_FRICTION
 
             floatingObject.initializeMass(50)
-            floatingObject.initializeRadius(INITIAL_RADIOUS - 20)
+            floatingObject.initializeRadius(INITIAL_RADIOUS - 8)
             floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
             floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 40)
             floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
@@ -625,7 +625,7 @@ function newUiObjectConstructor() {
             floatingObject.friction = INITIAL_FRICTION
 
             floatingObject.initializeMass(25)
-            floatingObject.initializeRadius(INITIAL_RADIOUS - 25)
+            floatingObject.initializeRadius(INITIAL_RADIOUS - 10)
             floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
             floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 50)
             floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
diff --git a/TaskServer/LowFrequencyTrading/TradingOrders.js b/TaskServer/LowFrequencyTrading/TradingOrders.js
index 04c320e0f..d09b2cd60 100644
--- a/TaskServer/LowFrequencyTrading/TradingOrders.js
+++ b/TaskServer/LowFrequencyTrading/TradingOrders.js
@@ -607,6 +607,7 @@ exports.newTradingOrders = function newTradingOrders(bot, logger, tradingEngineM
                     tradingEngine.current.episode.distanceToEvent.closeOrder.value = 1
 
                     updateEndsWithCycle(tradingEngineOrder)
+                    tradingSystem.infos.push([tradingSystemOrder.id, 'percentageFilledSimulation -> Closing Order with Exit Type ' + tradingEngineOrder.exitType.value])
                 }
             }
         }
@@ -703,6 +704,7 @@ exports.newTradingOrders = function newTradingOrders(bot, logger, tradingEngineM
             tradingEngine.current.episode.distanceToEvent.closeOrder.value = 1
 
             await updateEndsWithCycle(tradingEngineOrder)
+            tradingSystem.infos.push([tradingSystemOrder.id, 'checkExchangeEvents -> Closing Order with Exit Type ' + tradingEngineOrder.exitType.value])
         }
         if (order.remaining > 0 && order.status === AT_EXCHANGE_STATUS.CLOSED) {
 
@@ -714,6 +716,7 @@ exports.newTradingOrders = function newTradingOrders(bot, logger, tradingEngineM
             tradingEngine.current.episode.distanceToEvent.closeOrder.value = 1
 
             await updateEndsWithCycle(tradingEngineOrder)
+            tradingSystem.infos.push([tradingSystemOrder.id, 'checkExchangeEvents -> Closing Order with Exit Type ' + tradingEngineOrder.exitType.value])
         }
         if (order.status === AT_EXCHANGE_STATUS.CANCELLED) {
 
@@ -734,6 +737,7 @@ exports.newTradingOrders = function newTradingOrders(bot, logger, tradingEngineM
             tradingEngine.current.episode.distanceToEvent.closeOrder.value = 1
 
             await updateEndsWithCycle(tradingEngineOrder)
+            tradingSystem.infos.push([tradingSystemOrder.id, 'checkExchangeEvents -> Closing Order with Exit Type ' + tradingEngineOrder.exitType.value])
         }
 
         /*
@@ -1081,6 +1085,9 @@ exports.newTradingOrders = function newTradingOrders(bot, logger, tradingEngineM
         /* Initialize this */
         tradingEngine.current.episode.distanceToEvent.closeOrder.value = 1
 
+        await updateEndsWithCycle(tradingEngineOrder)
+        tradingSystem.infos.push([tradingSystemOrder.id, 'simulateCancelOrder -> Closing Order with Exit Type ' + tradingEngineOrder.exitType.value])
+
         recalculateStageSize(tradingEngineStage, tradingEngineOrder)
     }
 
@@ -1132,6 +1139,9 @@ exports.newTradingOrders = function newTradingOrders(bot, logger, tradingEngineM
             /* Initialize this */
             tradingEngine.current.episode.distanceToEvent.closeOrder.value = 1
 
+            await updateEndsWithCycle(tradingEngineOrder)
+            tradingSystem.infos.push([tradingSystemOrder.id, 'exchangeCancelOrder -> Closing Order with Exit Type ' + tradingEngineOrder.exitType.value])
+
             await syncWithExchange(tradingEngineStage, tradingSystemOrder, tradingEngineOrder, order)
 
             await recalculateStageSize(tradingEngineStage, tradingEngineOrder)