diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo
index 9d5e7f592..b1f087a1c 100644
Binary files a/.vs/AAWebPlatform/v15/.suo and b/.vs/AAWebPlatform/v15/.suo differ
diff --git a/AAWebPlatform.njsproj b/AAWebPlatform.njsproj
index ba5c19177..815beb72a 100644
--- a/AAWebPlatform.njsproj
+++ b/AAWebPlatform.njsproj
@@ -36,7 +36,7 @@
     <Compile Include="Azure\azure-storage.file.js" />
     <Compile Include="Ball.js" />
     <Compile Include="Balls.js" />
-    <Compile Include="Product.js">
+    <Compile Include="ProductCard.js">
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="Ecosystem.js">
diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js
index d5e99607f..8ee72b81e 100644
--- a/Panels/ProductsPanel.js
+++ b/Panels/ProductsPanel.js
@@ -10,7 +10,7 @@ function newProductsPanel() {
 
     var thisObject = {
         container: undefined,
-        getOnProducts: getOnProducts,
+        getOnProductCards: getOnProductCards,
         getProductStatus: getProductStatus,
         draw: draw,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -25,7 +25,7 @@ function newProductsPanel() {
     thisObject.container.frame.containerName = "Chart Layers Panel";
 
     let isInitialized = false;
-    let products;
+    let productCards;
 
     return thisObject;
 
@@ -45,7 +45,7 @@ function newProductsPanel() {
 
         var lastY = 5;
 
-        /* First thing is to build the products array */
+        /* First thing is to build the productCards array */
 
         let devTeams = ecosystem.getTeams();
 
@@ -63,24 +63,24 @@ function newProductsPanel() {
 
                     /* Now we create Product objects */
 
-                    var product = newProduct();
+                    let productCard = newProductCard();
 
-                    product.devTeam = devTeam;
-                    product.bot = bot;
-                    product.product = product;
+                    productCard.devTeam = devTeam;
+                    productCard.bot = bot;
+                    productCard.product = product;
 
-                    product.code = devTeam.codeName + '-' + bot.codeName + '-' + product.codeName;
+                    productCard.code = devTeam.codeName + '-' + bot.codeName + '-' + product.codeName;
 
                     /* Container Stuff */
 
-                    product.container.displacement.parentDisplacement = this.container.displacement;
-                    product.container.zoom.parentZoom = this.container.zoom;
-                    product.container.frame.parentFrame = this.container.frame;
-                    product.container.parentContainer = this.container;
+                    productCard.container.displacement.parentDisplacement = this.container.displacement;
+                    productCard.container.zoom.parentZoom = this.container.zoom;
+                    productCard.container.frame.parentFrame = this.container.frame;
+                    productCard.container.parentContainer = this.container;
 
                     /* Initialize it */
 
-                    product.initialize();
+                    productCard.initialize();
 
                     /* Positioning within this Panel */
 
@@ -88,32 +88,32 @@ function newProductsPanel() {
                         x: 10,
                         y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight()
                     };
-                    product.container.frame.position.x = position.x;
-                    product.container.frame.position.y = position.y + lastY;
+                    productCard.container.frame.position.x = position.x;
+                    productCard.container.frame.position.y = position.y + lastY;
 
-                    lastY = lastY + product.container.frame.height;
+                    lastY = lastY + productCard.container.frame.height;
 
-                    /*  We start listening to the products click event, so as to know when one was pressed. */
+                    /*  We start listening to the productCard click event, so as to know when one was pressed. */
 
-                    product.container.eventHandler.listenToEvent('onMouseClick', buttonPressed, i);
+                    productCard.container.eventHandler.listenToEvent('onMouseClick', buttonPressed, i);
 
                     /* We retrieve the locally stored status of the Product */
 
-                    let storedValue = window.localStorage.getItem(product.code);
+                    let storedValue = window.localStorage.getItem(productCard.code);
 
                     if (storedValue !== null) {
 
-                        product.status = storedValue;
+                        productCard.status = storedValue;
 
                     } else {
 
-                        product.status = PRODUCT_STATUS.ON;
+                        productCard.status = PRODUCT_STATUS.ON;
 
                     }
 
                     /* Add to the Product Array */
 
-                    products.push(product);
+                    productCards.push(productCard);
 
                 }
             }
@@ -123,17 +123,17 @@ function newProductsPanel() {
 
     }
 
-    function getOnProducts() {
+    function getOnProductCards() {
 
-        /* Returns all products which status is ON */
+        /* Returns all productCards which status is ON */
 
         let onProducts = [];
 
-        for (let i = 0; i < products.length; i++) {
+        for (let i = 0; i < productCards.length; i++) {
 
-            if (products[i].status = PRODUCT_STATUS.ON) {
+            if (productCards[i].status = PRODUCT_STATUS.ON) {
 
-                onProducts.push(products[i]);
+                onProducts.push(productCards[i]);
             }
         }
 
@@ -142,9 +142,9 @@ function newProductsPanel() {
 
     function getProductStatus(pProductCode) {
 
-        for (let i = 0; i < products.length; i++) {
+        for (let i = 0; i < productCards.length; i++) {
 
-            let button = products[i];
+            let button = productCards[i];
 
             if (button.code === pProductCode) {
 
@@ -168,9 +168,9 @@ function newProductsPanel() {
             /* Now we see which is the inner most container that has it */
 
 
-            for (var i = 0; i < products.length; i++) {
+            for (var i = 0; i < productCards.length; i++) {
 
-                container = products[i].getContainer(point);
+                container = productCards[i].getContainer(point);
 
                 if (container !== undefined) {
 
@@ -195,26 +195,23 @@ function newProductsPanel() {
 
     function buttonPressed(event, index) {
 
-        switch (products[index].status) {
+        switch (productCards[index].status) {
 
             case PRODUCT_STATUS.ON:
-                products[index].status = PRODUCT_STATUS.OFF;
+                productCards[index].status = PRODUCT_STATUS.OFF;
                 break;
 
             case PRODUCT_STATUS.OFF:
-                products[index].status = PRODUCT_STATUS.ON;
+                productCards[index].status = PRODUCT_STATUS.ON;
                 break;
 
         }
 
-        let eventData = {
-            productCode: products[index].code,
-            status: products[index].status
-        }
+        let eventData = productCards[index];    
 
-        thisObject.container.eventHandler.raiseEvent('Product Status Changed', eventData);
+        thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', eventData);
 
-        window.localStorage.setItem(products[index].code, products[index].status);
+        window.localStorage.setItem(productCards[index].code, productCards[index].status);
 
     }
 
@@ -224,8 +221,8 @@ function newProductsPanel() {
 
         thisObject.container.frame.draw(false, false, true);
 
-        for (let i = 0; i < products.length; i++) {
-            products[i].draw();
+        for (let i = 0; i < productCards.length; i++) {
+            productCards[i].draw();
         }
 
     }
diff --git a/Product.js b/ProductCard.js
similarity index 99%
rename from Product.js
rename to ProductCard.js
index d18523d46..aab34efb5 100644
--- a/Product.js
+++ b/ProductCard.js
@@ -1,4 +1,4 @@
-function newProduct() {
+function newProductCard() {
 
     var thisObject = {
         container: undefined,
@@ -56,15 +56,12 @@
 
     }
 
-
-
     function draw() {
 
         drawIcon();
 
     }
 
-
     function drawIcon() {
 
         centerPoint = {
@@ -97,7 +94,6 @@
 
         }
 
-
         browserCanvasContext.fill();
 
         browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)';
@@ -106,7 +102,6 @@
 
         browserCanvasContext.closePath();
 
-
         /* print the text */
 
         let labelPoint;
@@ -178,9 +173,5 @@
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
-
     }
-
-
-
 }
\ No newline at end of file
diff --git a/TimelineChart.js b/TimelineChart.js
index 3b80757eb..5434ffd2d 100644
--- a/TimelineChart.js
+++ b/TimelineChart.js
@@ -42,18 +42,22 @@ function newTimelineChart() {
 
     let currentCandlePanel;
     let currentVolumePanel;
-    let botsPanel;
+    let productsPanel;
     let orderBookPanel;
 
     return timelineChart;
 
-    function initialize(exchange, market, currentCandlePanelToUse, currentVolumePanelToUse, botsPanelToUse, orderBookPanelToUse, callBackFunction) {
+    function initialize(exchange, market, currentCandlePanelToUse, currentVolumePanelToUse, pProductsPanel, orderBookPanelToUse, callBackFunction) {
 
         currentCandlePanel = currentCandlePanelToUse;
         currentVolumePanel = currentVolumePanelToUse;
-        botsPanel = botsPanelToUse;
         orderBookPanel = orderBookPanelToUse;
 
+
+        productsPanel = pProductsPanel;
+
+        productsPanel.eventHandler.listenToEvent("Product Card Status Changed", onProductStatusChanged);
+
         marketId = market;
         exchangeId = exchange;
 
@@ -100,15 +104,15 @@ function newTimelineChart() {
 
         /* Lets get all the cards that are turned on. */
 
-        let onProducts = botsPanel.getOnProducts();
+        let onProductCards = productsPanel.getOnProductCards();
 
-        for (let i = 0; i < onProducts.length; i++) {
+        for (let i = 0; i < onProductCards.length; i++) {
 
             /* For each one, we will initialize the associated plotter. */
 
-            let onCard = onProducts[i];
+            let onProductCard = onProductCards[i];
 
-            let plotter = getNewPlotter(onCard.plotter.devTeam, onCard.plotter.repo, onCard.plotter.moduleName);
+            let plotter = getNewPlotter(onProductCard.product.plotter.devTeam, onProductCard.product.plotter.repo, onProductCard.product.plotter.moduleName);
 
             plotter.container.displacement.parentDisplacement = timelineChart.container.displacement;
             plotter.container.zoom.parentZoom = timelineChart.container.zoom;
@@ -126,7 +130,7 @@ function newTimelineChart() {
 
             function onInizialized() {
 
-                console.log(onCard.plotter.devTeam + '->' + onCard.plotter.repo + '->' + onCard.plotter.moduleName + " Initialized. ");
+                console.log(onProductCard.product.plotter.devTeam + '->' + onProductCard.product.plotter.repo + '->' + onProductCard.product.plotter.moduleName + " Initialized. ");
 
                 try {
                     plotter.positionAtDatetime(INITIAL_DATE);  
@@ -135,7 +139,7 @@ function newTimelineChart() {
                 }
 
                 let layer = {
-                    onCard: onCard,
+                    onProductCard: onProductCard,
                     plotter: plotter
                 };
 
@@ -145,6 +149,12 @@ function newTimelineChart() {
         }
     } 
 
+    function onProductStatusChanged(pProductCard) {
+
+
+
+    }
+
     function onZoomChanged(event) {
 
         if (initializationReady === true) {
@@ -201,7 +211,6 @@ function newTimelineChart() {
 
     }
 
-
     function recalculateCurrentDatetime() {
 
         let center = {
@@ -228,9 +237,6 @@ function newTimelineChart() {
   
     }
 
-
-
-
     function getContainer(point) {
 
         var container;
@@ -267,8 +273,6 @@ function newTimelineChart() {
         }
     }
 
-
-
     function draw() {
 
         if (timelineChart.container.frame.isInViewPort()) {
@@ -323,7 +327,6 @@ function newTimelineChart() {
 
     }
 
-
     function tooSmall() {
 
         if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) {
diff --git a/index.html b/index.html
index b57cf4f56..cb72df15b 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <!--Plotters-->
 
     <script type="text/javascript" src="Plotters.js"></script>
-    <script type="text/javascript" src="Product.js"></script>
+    <script type="text/javascript" src="ProductCard.js"></script>
     <script type="text/javascript" src="Ecosystem.js"></script>
     <script type="text/javascript" src="File.js"></script>
     <script type="text/javascript" src="FileServer.js"></script>