diff --git a/src/app/views/querying/relational-algebra/relational-algebra.component.html b/src/app/views/querying/relational-algebra/relational-algebra.component.html
index be0fea36..08d0cd45 100644
--- a/src/app/views/querying/relational-algebra/relational-algebra.component.html
+++ b/src/app/views/querying/relational-algebra/relational-algebra.component.html
@@ -1,70 +1,62 @@
 <app-toast></app-toast>
+<div class="col-12" style="position:absolute; z-index: 2;" [hidden]="showingAnalysis">
+    <div class="btn-circle btn btn-primary"  id="run" (click)="clickRun($event)"><i class="fa fa-play"></i></div>
+    <div id="menu-top-left">
+        <div class="btn-group">
+            <a [routerLink]="[]" class="btn btn-light btn-sm" (click)="exportTree()">export</a>
+            <a [routerLink]="[]" class="btn btn-light btn-sm" (click)="importTree()">import</a>
+        </div>
+        <!--
+        <div class="analyze-query">
+            <input type="checkbox" class="analyze-query-input mr-1" id="analyzeQuery" [checked]="analyzeQuery"
+                   (change)="analyzeQuery = !analyzeQuery">
+            <label class="analyze-query-label" for="analyzeQuery">analyze query</label>
+        </div>
+        -->
+    </div>
 
-<div class="row" style="padding-bottom: 1em;">
+</div>
 
+<div class="row"  style="padding-bottom: 1em;position: relative; overflow: auto;">
     <div class="col-12" *ngIf="queryAnalysis">
         <app-information-manager [data]="queryAnalysis" [zoom]="_breadcrumb.getMasonryZoom()"
-                                 [hidden]="!showingAnalysis"></app-information-manager>
+            [hidden]="!showingAnalysis"></app-information-manager>
     </div>
 
     <div class="col-12" id="drop" cdkDropList cdkDropListSortingDisabled #dropArea (treeDrop)="treeDrop($event)"
-         [hidden]="showingAnalysis">
+        [hidden]="showingAnalysis">
         <ng-container *ngFor="let n of nodes | keyvalue; trackBy: trackNode">
-            <app-node [node]="n.value"
-                      (autocompleteChanged)="setAutocomplete()"
-                      (focusin)="n.value.zIndex = 2"
-                      (focusout)="setAutocomplete(); n.value.zIndex = 1"
-                      cdkDrag
-                      style="position:absolute;"
-                      [ngStyle]="{'top': n.value.top+'px', 'left':n.value.left+'px', 'z-index': n.value.zIndex}"
-                      [cdkDragFreeDragPosition]="{x: n.value.left, y: n.value.top}"
-                      (cdkDragStarted)="dragStart($event, n.value)"
-                      (cdkDragMoved)="draggingNode($event, n.value)"
-                      (cdkDragEnded)="savePos($event, n.value)"
-                      cdkDragBoundary="#drop">
+            <app-node [node]="n.value" (autocompleteChanged)="setAutocomplete()" (focusin)="n.value.zIndex = 2"
+                (focusout)="setAutocomplete(); n.value.zIndex = 1" cdkDrag style="position:absolute;"
+                [ngStyle]="{'top': n.value.top+'px', 'left':n.value.left+'px', 'z-index': n.value.zIndex}"
+                [cdkDragFreeDragPosition]="{x: n.value.left, y: n.value.top}"
+                (cdkDragStarted)="dragStart($event, n.value)" (cdkDragMoved)="draggingNode($event, n.value)"
+                (cdkDragEnded)="savePos($event, n.value)" cdkDragBoundary="#drop">
                 <!--<div *cdkDragPreview class="node-drag-preview">preview</div>-->
                 <div class="drag-handle card-header" cdkDragHandle>
                     {{n.value.type}}
                     <span>
-            &nbsp;(
-            <span *ngIf="n.value.relAlgSymbol" [innerHTML]="n.value.relAlgSymbol"></span>
-            <span *ngIf="!n.value.relAlgSymbol"><i [ngClass]="n.value.icon"></i></span>
-            )
-          </span>
-                    <span class="del float-right" (click)="deleteNode(n.value)"><i
-                            class="cui-trash"></i></span></div>
+                        &nbsp;(
+                        <span *ngIf="n.value.relAlgSymbol" [innerHTML]="n.value.relAlgSymbol"></span>
+                        <span *ngIf="!n.value.relAlgSymbol"><i [ngClass]="n.value.icon"></i></span>
+                        )
+                    </span>
+                    <span class="del float-right" (click)="deleteNode(n.value)"><i class="cui-trash"></i></span>
+                </div>
             </app-node>
         </ng-container>
 
-        <div class="btn-circle btn btn-primary" id="run" (click)="clickRun($event)"><i class="fa fa-play"></i></div>
-        <div id="menu-top-left">
-            <div class="btn-group">
-                <a [routerLink]="[]" class="btn btn-light btn-sm" (click)="exportTree()">export</a>
-                <a [routerLink]="[]" class="btn btn-light btn-sm" (click)="importTree()">import</a>
-            </div>
-            <!-->
-            <div class="analyze-query">
-                <input type="checkbox" class="analyze-query-input mr-1" id="analyzeQuery" [checked]="analyzeQuery"
-                       (change)="analyzeQuery = !analyzeQuery">
-                <label class="analyze-query-label" for="analyzeQuery">analyze query</label>
-            </div>
-            -->
-        </div>
 
         <svg width="100%" height="100%">
-            <marker id="arrowhead"
-                    viewBox="0 0 10 10" refX="0" refY="5"
-                    markerUnits="strokeWidth"
-                    markerWidth="5" markerHeight="5"
-                    orient="auto">
-                <path d="M 0,0 l 10,5 l -10,5 z"/>
+            <marker id="arrowhead" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="5"
+                markerHeight="5" orient="auto">
+                <path d="M 0,0 l 10,5 l -10,5 z" />
             </marker>
             <line *ngIf="temporalLine" [attr.x1]="temporalLine.x1" [attr.y1]="temporalLine.y1"
-                  [attr.x2]="temporalLine.x2"
-                  [attr.y2]="temporalLine.y2" marker-end="url(#arrowhead)"></line>
+                [attr.x2]="temporalLine.x2" [attr.y2]="temporalLine.y2" marker-end="url(#arrowhead)"></line>
             <line *ngFor="let conn of connections | keyvalue" [attr.x1]="getX1(conn.value.source)"
-                  [attr.y1]="getY1(conn.value.source)" [attr.x2]="getX2(conn.value.target)"
-                  [attr.y2]="getY2(conn.value.target)" marker-end="url(#arrowhead)"></line>
+                [attr.y1]="getY1(conn.value.source)" [attr.x2]="getX2(conn.value.target)"
+                [attr.y2]="getY2(conn.value.target)" marker-end="url(#arrowhead)"></line>
         </svg>
     </div>
 </div>
@@ -75,10 +67,10 @@
     <div class="card-header ">
         <span>{{resultSet.generatedQuery}}</span>
         <span class="badge pull-right" *ngIf="resultSet.error"
-              [ngClass]="{'badge-secondary': !resultSet.error, 'badge-danger': resultSet.error}">
+            [ngClass]="{'badge-secondary': !resultSet.error, 'badge-danger': resultSet.error}">
             <!--<ng-container *ngIf="!resultSet.error">{{resultSet.affectedRows}}</ng-container>-->
             <ng-container *ngIf="resultSet.error">!</ng-container>
-            </span>
+        </span>
     </div>
 
     <div class="card-body" style="padding-bottom: 0.25rem">
@@ -96,10 +88,10 @@
         <div class="row" *ngIf="resultSet && resultSet.data" [hidden]="showingAnalysis">
             <div class="col-lg-12">
                 <app-data-view [resultSet]="resultSet"
-                               [config]="{create: false, update: false, delete: false, sort: false, search: false, exploring: false}"
-                               (executeView)="createView($event)"></app-data-view>
+                    [config]="{create: false, update: false, delete: false, sort: false, search: false, exploring: false}"
+                    (executeView)="createView($event)"></app-data-view>
             </div>
         </div>
     </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/views/querying/relational-algebra/relational-algebra.component.scss b/src/app/views/querying/relational-algebra/relational-algebra.component.scss
index 5c5ea768..1ac8add8 100644
--- a/src/app/views/querying/relational-algebra/relational-algebra.component.scss
+++ b/src/app/views/querying/relational-algebra/relational-algebra.component.scss
@@ -1,7 +1,10 @@
 #operatorList .rel-op:hover {
   background: rgba(0, 0, 0, 0.05);
 }
-
+.row{
+  height: calc(100vh - 130px);
+  position: relative;
+}
 .rel-op {
   cursor: grab;
 }
@@ -9,7 +12,7 @@
 #drop {
   border: 1px solid #c8ced3;
   border-radius: 0.25rem;
-  height: 1000px;
+  width: auto;
 }
 
 #drop .node, .cdk-drag-preview .node {
@@ -106,7 +109,7 @@ svg {
 #run {
   position: absolute;
   top: 1em;
-  right: 1em;
+  right: 7em;
   cursor: pointer;
   z-index: 2;
 }
diff --git a/src/app/views/querying/relational-algebra/relational-algebra.component.ts b/src/app/views/querying/relational-algebra/relational-algebra.component.ts
index 4073420c..0051abfa 100644
--- a/src/app/views/querying/relational-algebra/relational-algebra.component.ts
+++ b/src/app/views/querying/relational-algebra/relational-algebra.component.ts
@@ -180,7 +180,6 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
         );
         this.subscriptions.add(sub);
     }
-
     treeDrop(e) {
         const id = 'node' + this.counter++;
         const x = Math.max(0, Math.min(this.dropArea.nativeElement.offsetWidth - 270, e.event.offsetX));
@@ -590,6 +589,25 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
     draggingNode(e, node: Node) {
         this.draggingNodeX = node.left + e.distance.x + document.documentElement.scrollLeft - this.scrollLeft;
         this.draggingNodeY = node.top + e.distance.y + document.documentElement.scrollTop - this.scrollTop;
+        // get max left on all nodes to take as ref to make the board bigger or not
+        let maxX=0
+        let maxY=0
+        for (const [key, value] of this.nodes.entries()) {
+            maxX=Math.max(maxX,value.left)
+            maxY=Math.max(maxY,value.top)
+        }
+        // check if the draging node has max left or right to make the board bigger or not
+        if(this.draggingNodeX >=maxX)
+        {
+            this.dropArea.nativeElement.style.minWidth = (this.draggingNodeX+node.width+400)+ 'px';
+
+        }
+
+        if(this.draggingNodeY >=maxY)
+        {
+            this.dropArea.nativeElement.style.minHeight = (this.draggingNodeY+node.height+400)+ 'px';
+
+        }
     }
 
     /**
@@ -602,10 +620,17 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
         const nodeHeight = $(nodeElement).height();
         const scrollTopDistance = document.documentElement.scrollTop - this.scrollTop;
         const scrollLeftDistance = document.documentElement.scrollLeft - this.scrollLeft;
-        node.left = Math.max(0, Math.min(node.left + e.distance.x + scrollLeftDistance, this.dropArea.nativeElement.offsetWidth - nodeWidth - 4));
-        node.top = Math.max(0, Math.min(node.top + e.distance.y + scrollTopDistance, this.dropArea.nativeElement.offsetHeight - nodeHeight - 4));
+        // node.left = Math.max(0, Math.min(node.left + e.distance.x + scrollLeftDistance, this.dropArea.nativeElement.offsetWidth - nodeWidth - 4));
+        // node.top = Math.max(0, Math.min(node.top + e.distance.y + scrollTopDistance, this.dropArea.nativeElement.offsetHeight - nodeHeight - 4));
+        
+        node.left=Math.max(0,node.left + e.distance.x + scrollLeftDistance);
+        node.top= Math.max(0,node.top + e.distance.y + scrollTopDistance);
+        
+        console.log("ces")
+        console.log(node.top)
         this.draggingNodeX = undefined;
         this.draggingNodeY = undefined;
+
     }
 
     trackNode(index: number, n: Node) {
@@ -640,9 +665,16 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
         const inputObj = JSON.parse(input);
         if (inputObj.nodes) {
             const importedNodes = new Map<string, Node>();
+            let maxX=0
+            let maxY=0
             for (const [k, v] of Object.entries(inputObj.nodes)) {
                 importedNodes.set(v[0], Node.fromJson(v[1], this.dropArea.nativeElement.offsetWidth, this.dropArea.nativeElement.offsetHeight));
+                maxX=Math.max(maxX,v[1].left)
+                maxY=Math.max(maxY,v[1].top)
             }
+            this.dropArea.nativeElement.style.minWidth = (maxX+400)+ 'px';
+            this.dropArea.nativeElement.style.minHeight = (maxY+400)+ 'px';
+
             this.nodes = importedNodes;
             this.counter = importedNodes.size;
         }