diff --git a/Canvas.js b/Canvas.js
index 0b3e7ff7c..6d36cecc2 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -1,4 +1,4 @@
- 
+
 let browserCanvasContext          // The context of the canvas object.
 
 let stepsInitializationCounter = 0         // This counter the initialization steps required to be able to turn off the splash screen.
@@ -13,13 +13,14 @@ function newCanvas () {
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
 
-    /* Mouse event related variables. */
+   /* Mouse event related variables. */
 
   let containerDragStarted = false
   let floatingObjectDragStarted = false
   let floatingObjectBeingDragged
   let containerBeingDragged
   let viewPortBeingDragged = false
+  let ignoreNextClick = false
 
   let dragVector = {
     downX: 0,
@@ -28,7 +29,7 @@ function newCanvas () {
     upY: 0
   }
 
-    /* canvas object */
+   /* canvas object */
 
   let thisObject = {
     eventHandler: undefined,
@@ -49,34 +50,34 @@ function newCanvas () {
   return thisObject
 
 /*
-    The canvas object represents a layer on top of the browser canvas object.
+   The canvas object represents a layer on top of the browser canvas object.
 
-    Graphically, thiscanvas object has 4 spaces:
+   Graphically, thiscanvas object has 4 spaces:
 
-    1. The "Top Space": It is where Team and User information is displayed.
-    2. The "Chart Space": It is where the charts are plotted.
-    3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.
-    4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.
-    5. The "Bottom Space": Includes the breakpoint bar and a toolbar.
+   1. The "Top Space": It is where Team and User information is displayed.
+   2. The "Chart Space": It is where the charts are plotted.
+   3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.
+   4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.
+   5. The "Bottom Space": Includes the breakpoint bar and a toolbar.
 
-    All these spaces are child objects of the Canvas object.
+   All these spaces are child objects of the Canvas object.
 
-    Canvas
-    |
-    |
-    ---> topSpace
-    |
-    |
-    ---> chartSpace
-    |
-    |
-    ---> flaotingSpace
-    |
-    |
-    ---> panelsSpace
-    |
-    |
-    ---> bottomSpace
+   Canvas
+   |
+   |
+   ---> topSpace
+   |
+   |
+   ---> chartSpace
+   |
+   |
+   ---> flaotingSpace
+   |
+   |
+   ---> panelsSpace
+   |
+   |
+   ---> bottomSpace
 */
 
   function finalize () {
@@ -91,15 +92,15 @@ function newCanvas () {
       browserCanvas.removeEventListener('mousemove', onMouseMove, false)
       browserCanvas.removeEventListener('click', onMouseClick, false)
 
-            /* Mouse wheel events. */
+           /* Mouse wheel events. */
 
       if (browserCanvas.removeEventListener) {
-                // IE9, Chrome, Safari, Opera
+               // IE9, Chrome, Safari, Opera
         browserCanvas.removeEventListener('mousewheel', onMouseWheel, false)
-                // Firefox
+               // Firefox
         browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false)
       }
-            // IE 6/7/8
+           // IE 6/7/8
       else browserCanvas.detachEvent('onmousewheel', onMouseWheel)
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err) }
@@ -114,7 +115,7 @@ function newCanvas () {
 
       addCanvasEvents()
 
-            /* Instantiate all the children spaces of Canvas object */
+           /* Instantiate all the children spaces of Canvas object */
 
       thisObject.topSpace = newTopSpace()
       thisObject.topSpace.initialize()
@@ -142,7 +143,7 @@ function newCanvas () {
         }
       }
 
-            /* Splash Screen */
+           /* Splash Screen */
 
       splashScreen = newSplashScreen()
       splashScreen.initialize()
@@ -156,7 +157,7 @@ function newCanvas () {
 
           thisObject.animation = animation
 
-                    /* Here we add all the functions that will be called during the animation cycle. */
+                   /* Here we add all the functions that will be called during the animation cycle. */
 
           animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
@@ -177,7 +178,7 @@ function newCanvas () {
 
                 if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> Animation Stopped since a vital funtion could not be added.') }
 
-                                /* Display some Error Page here. */
+                               /* Display some Error Page here. */
               }
             } catch (err) {
               if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err) }
@@ -240,23 +241,28 @@ function newCanvas () {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') }
 
-            /* Mouse down and up events to control the drag of the canvas. */
+           /* Mouse down and up events to control the drag of the canvas. */
 
       browserCanvas.addEventListener('mousedown', onMouseDown, false)
       browserCanvas.addEventListener('mouseup', onMouseUp, false)
       browserCanvas.addEventListener('mousemove', onMouseMove, false)
       browserCanvas.addEventListener('click', onMouseClick, false)
 
-            /* Mouse wheel events. */
+           /* Mouse wheel events. */
 
       if (browserCanvas.addEventListener) {
-                // IE9, Chrome, Safari, Opera
+               // IE9, Chrome, Safari, Opera
         browserCanvas.addEventListener('mousewheel', onMouseWheel, false)
-                // Firefox
+               // Firefox
         browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false)
       }
-            // IE 6/7/8
+           // IE 6/7/8
       else browserCanvas.attachEvent('onmousewheel', onMouseWheel)
+
+      //  Disables the context menu when you right mouse click the canvas.
+      browserCanvas.oncontextmenu = function (e) {
+        e.preventDefault()
+      }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err) }
     }
@@ -266,18 +272,18 @@ function newCanvas () {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') }
 
-            /*
+           /*
 
-            There are four types of elements that can be dragged.
+           There are four types of elements that can be dragged.
 
-            1. Panels.
-            2. Floating Elements (Currently only FloatingObjects).
-            3. Charts.
-            4. The Viewport.
+           1. Panels.
+           2. Floating Elements (Currently only FloatingObjects).
+           3. Charts.
+           4. The Viewport.
 
-            We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport.
+           We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport.
 
-            */
+           */
 
       let point = {
         x: event.pageX,
@@ -289,7 +295,7 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Top Space / */
+           /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)
 
@@ -299,7 +305,7 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over an element of the Bottom Space / */
+           /* We check if the mouse is over an element of the Bottom Space / */
 
       container = thisObject.bottomSpace.getContainer(point)
 
@@ -309,17 +315,22 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over a panel/ */
+           /* We check if the mouse is over a panel/ */
 
       container = thisObject.panelsSpace.getContainer(point)
 
-      if (container !== undefined && container.isDraggeable === true) {
+      if (container !== undefined && container.isDraggeable === true && event.button === 2) {
         containerBeingDragged = container
         containerDragStarted = true
         return
       }
 
-            /* We check if the mouse is over a floatingObject/ */
+      if (container !== undefined && container.isClickeable === true) {
+       /* We dont want to mess up with the click */
+        return
+      }
+
+           /* We check if the mouse is over a floatingObject/ */
 
       floatingObjectBeingDragged = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
 
@@ -328,7 +339,7 @@ function newCanvas () {
         return
       }
 
-            /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
+           /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
       container = thisObject.chartSpace.getContainer(point)
 
@@ -348,6 +359,10 @@ function newCanvas () {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') }
 
+      if (ignoreNextClick === true) {
+        ignoreNextClick = false
+        return
+      }
       let point = {
         x: event.pageX,
         y: event.pageY - window.canvasApp.topMargin
@@ -355,7 +370,7 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Top Space / */
+           /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)
 
@@ -364,7 +379,7 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over an element of the Bottom Space / */
+           /* We check if the mouse is over an element of the Bottom Space / */
 
       container = thisObject.bottomSpace.getContainer(point)
 
@@ -373,7 +388,7 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over a panel/ */
+           /* We check if the mouse is over a panel/ */
 
       container = thisObject.panelsSpace.getContainer(point)
 
@@ -382,7 +397,7 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over a floatingObject/ */
+           /* We check if the mouse is over a floatingObject/ */
 
       let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
 
@@ -393,7 +408,7 @@ function newCanvas () {
         return
       }
 
-            /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
+           /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
       container = thisObject.chartSpace.getContainer(point)
 
@@ -414,7 +429,14 @@ function newCanvas () {
         thisObject.eventHandler.raiseEvent('Drag Finished', undefined)
       }
 
-            /* Turn off all the possible things that can be dragged. */
+      if (
+     containerDragStarted ||
+     floatingObjectDragStarted ||
+     viewPortBeingDragged
+     ) {
+        ignoreNextClick = true
+      }
+           /* Turn off all the possible things that can be dragged. */
 
       containerDragStarted = false
       floatingObjectDragStarted = false
@@ -443,8 +465,8 @@ function newCanvas () {
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
         if (floatingObjectDragStarted === true) {
           if (thisObject.floatingSpace.floatingLayer.isInsideFloatingObject(floatingObjectBeingDragged, point.x, point.y) === false) {
-                        /* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer.
-                        In this case we cancell the drag operation . */
+                       /* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer.
+                       In this case we cancell the drag operation . */
 
             floatingObjectDragStarted = false
             browserCanvas.style.cursor = 'auto'
@@ -468,11 +490,11 @@ function newCanvas () {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') }
 
-            /* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */
+           /* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */
 
       thisObject.eventHandler.raiseEvent('onMouseNotOver')
 
-            /* Then we check who is the current object underneeth the mounse. */
+           /* Then we check who is the current object underneeth the mounse. */
 
       let point = {
         x: event.pageX,
@@ -481,7 +503,7 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Top Space / */
+           /* We check if the mouse is over an element of the Top Space / */
 
       container = thisObject.topSpace.getContainer(point)
 
@@ -490,7 +512,7 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over an element of the Bottom Space / */
+           /* We check if the mouse is over an element of the Bottom Space / */
 
       container = thisObject.bottomSpace.getContainer(point)
 
@@ -499,7 +521,7 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over a panel/ */
+           /* We check if the mouse is over a panel/ */
 
       container = thisObject.panelsSpace.getContainer(point)
 
@@ -508,7 +530,7 @@ function newCanvas () {
         return
       }
 
-            /* We check if the mouse is over a floatingObject/ */
+           /* We check if the mouse is over a floatingObject/ */
 
       let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
 
@@ -519,7 +541,7 @@ function newCanvas () {
         return
       }
 
-            /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
+           /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
       container = thisObject.chartSpace.getContainer(point)
 
@@ -536,11 +558,11 @@ function newCanvas () {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') }
 
-            // cross-browser wheel delta
+           // cross-browser wheel delta
       var event = window.event || event // old IE support
       let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail))
 
-            /* We try first with panels. */
+           /* We try first with panels. */
 
       let point = {
         x: event.pageX,
@@ -554,7 +576,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-            /* We try second with floating objects. */
+           /* We try second with floating objects. */
 
       let floatingObjectIndex = canvas.floatingSpace.floatingLayer.isInside(point.x, point.y)
 
@@ -563,7 +585,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-            /* We try the Bottom Space. */
+           /* We try the Bottom Space. */
 
       let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y })
 
@@ -572,7 +594,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-            /* Finally we try the Chart Space. */
+           /* Finally we try the Chart Space. */
 
       let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y })
 
@@ -580,7 +602,7 @@ function newCanvas () {
         chartContainer.eventHandler.raiseEvent('Mouse Wheel', event.wheelDelta)
         return false  // This instructs the browser not to take the event and scroll the page.
       } else {
-                /* If all the above fails, we fallback into applying zoom to the viewPort */
+               /* If all the above fails, we fallback into applying zoom to the viewPort */
 
         viewPort.applyZoom(delta)
         return false  // This instructs the browser not to take the event and scroll the page.
@@ -613,7 +635,7 @@ function newCanvas () {
         }
 
         if (containerDragStarted || viewPortBeingDragged) {
-                    /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */
+                   /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */
 
           let downCopy = {
             x: dragVector.downX,
@@ -622,7 +644,7 @@ function newCanvas () {
 
           let downCopyNoTransf
           downCopyNoTransf = viewPort.unzoomThisPoint(downCopy)
-                    // downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf);
+                   // downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf);
 
           let upCopy = {
             x: dragVector.upX,
@@ -647,7 +669,7 @@ function newCanvas () {
           }
         }
 
-                /* Finally we set the starting point of the new dragVector at this current point. */
+               /* Finally we set the starting point of the new dragVector at this current point. */
 
         dragVector.downX = dragVector.upX
         dragVector.downY = dragVector.upY
@@ -657,3 +679,4 @@ function newCanvas () {
     }
   }
 }
+
diff --git a/Globals.js b/Globals.js
index ae3b813cc..cb98311a1 100644
--- a/Globals.js
+++ b/Globals.js
@@ -131,7 +131,7 @@ const EARLIEST_DATE = new Date(2014, 0, 18, 4, 26, 8);
 
 const TOP_SPACE_HEIGHT = 5;
 const BOTTOM_SPACE_HEIGHT = 35;
-
+const BREAKPOINT_HEIGHT = 15;
 
 const PRODUCT_CARD_STATUS = {
     ON: 'on',
diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js
index 856d276c8..4d804ad94 100644
--- a/Panels/ProductsPanel.js
+++ b/Panels/ProductsPanel.js
@@ -17,9 +17,15 @@
    container.isDraggeable = true
    container.isWheelable = true
 
+   container.isClickeable = true
+
    thisObject.container = container
    thisObject.container.frame.containerName = "Indicators and Algobots's Products"
 
+   /* Lets listen to our own events to react when we have a Mouse Click */
+
+   thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed)
+
    let isInitialized = false
    let productCards = []
 
@@ -28,7 +34,14 @@
 
     /* Needed Variables */
 
-   var lastY = 5
+   let lastY = 5
+
+   /* Animation to hide the pannel */
+
+   let tabStatus = 'visible'
+   let visiblePosition = {}
+   let hiddenPosition = {}
+   let transitionPosition = {}
 
    return thisObject
 
@@ -43,6 +56,15 @@
 
      thisObject.container.frame.position = position
 
+     visiblePosition.x = thisObject.container.frame.position.x
+     visiblePosition.y = thisObject.container.frame.position.y
+
+     hiddenPosition.x = thisObject.container.frame.position.x
+     hiddenPosition.y = viewPort.visibleArea.bottomRight.y
+
+     transitionPosition.x = visiblePosition.x
+     transitionPosition.y = visiblePosition.y
+
         /* First thing is to build the productCards array */
 
      let devTeams = ecosystem.getTeams()
@@ -113,6 +135,27 @@
      isInitialized = true
    }
 
+   function buttonPressed (event) {
+     if (tabStatus === 'visible') {
+       visiblePosition.x = thisObject.container.frame.position.x
+       visiblePosition.y = thisObject.container.frame.position.y
+
+       hiddenPosition.x = thisObject.container.frame.position.x
+       hiddenPosition.y = viewPort.visibleArea.bottomRight.y
+
+       transitionPosition.x = visiblePosition.x
+       transitionPosition.y = visiblePosition.y
+
+       container.isDraggeable = false
+       container.isWheelable = false
+       tabStatus = 'going down'
+     } else {
+       container.isDraggeable = true
+       container.isWheelable = true
+       tabStatus = 'going up'
+     }
+   }
+
    function onMouseWheel (pDelta) {
      if (pDelta > 0) {
        pDelta = -1
@@ -201,6 +244,25 @@
    function draw () {
      if (isInitialized === false) { return }
 
+     if (tabStatus === 'going down') {
+       if (transitionPosition.y < hiddenPosition.y) {
+         transitionPosition.y = transitionPosition.y + 15
+         thisObject.container.frame.position.y = transitionPosition.y
+       } else {
+         thisObject.container.frame.position.y = hiddenPosition.y
+         tabStatus = 'hidden'
+       }
+     }
+     if (tabStatus === 'going up') {
+       if (transitionPosition.y > visiblePosition.y) {
+         transitionPosition.y = transitionPosition.y - 15
+         thisObject.container.frame.position.y = transitionPosition.y
+       } else {
+         thisObject.container.frame.position.y = visiblePosition.y
+         tabStatus = 'visible'
+       }
+     }
+
      thisObject.container.frame.draw(false, false, true)
 
      for (let i = 0; i < visibleProductCards.length; i++) {
diff --git a/TopSpace/CurrentBot.js b/TopSpace/CurrentBot.js
index 46185d12b..0e0aa3054 100644
--- a/TopSpace/CurrentBot.js
+++ b/TopSpace/CurrentBot.js
@@ -50,7 +50,7 @@ function newCurrentBot () {
 
   function resize () {
     container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 1
-    container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+    container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
   }
 
   function onDevTeamChanged () {
diff --git a/TopSpace/CurrentEvent.js b/TopSpace/CurrentEvent.js
index b40942a7e..578627227 100644
--- a/TopSpace/CurrentEvent.js
+++ b/TopSpace/CurrentEvent.js
@@ -122,7 +122,7 @@ function newCurrentEvent () {
 
   function resize () {
     container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 2
-    container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+    container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
   }
 
   function onClick () {
diff --git a/TopSpace/CurrentProcess.js b/TopSpace/CurrentProcess.js
index f9c08ad7c..d15917722 100644
--- a/TopSpace/CurrentProcess.js
+++ b/TopSpace/CurrentProcess.js
@@ -50,7 +50,7 @@ function newCurrentProcess () {
 
   function resize () {
     container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 3
-    container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+    container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
   }
 
   function onUserBotChanged () {
diff --git a/TopSpace/CurrentStartMode.js b/TopSpace/CurrentStartMode.js
index e6ca9eb09..7200afdd9 100644
--- a/TopSpace/CurrentStartMode.js
+++ b/TopSpace/CurrentStartMode.js
@@ -35,7 +35,7 @@ function newCurrentStartMode () {
 
   function resize () {
     container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 4
-    container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+    container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
   }
 
   function onClick () {
diff --git a/TopSpace/DevTeam.js b/TopSpace/DevTeam.js
index 5f17d67be..0ffd863c4 100644
--- a/TopSpace/DevTeam.js
+++ b/TopSpace/DevTeam.js
@@ -56,7 +56,7 @@ function newDevTeam () {
 
   function resize () {
     container.frame.position.x = viewPort.visibleArea.topLeft.x + thisObject.container.frame.width * 0
-    container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+    container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
   }
 
   function onClick () {
diff --git a/TopSpace/EndUser.js b/TopSpace/EndUser.js
index 2f70223ce..6edaf5b44 100644
--- a/TopSpace/EndUser.js
+++ b/TopSpace/EndUser.js
@@ -15,7 +15,7 @@ function newEndUser () {
   thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
 
   container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5
-  container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+  container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
 
   container.isDraggeable = false
 
diff --git a/TopSpace/Login.js b/TopSpace/Login.js
index 8de07fd84..3f94dda77 100644
--- a/TopSpace/Login.js
+++ b/TopSpace/Login.js
@@ -15,7 +15,7 @@ function newLogin () {
   thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
 
   container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1
-  container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+  container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT
 
   container.isDraggeable = false
   container.isClickeable = true