diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index a7bea64e3..c4720781d 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -1,5 +1,3 @@
-// TODO(chris): Comments
-
 import GridItem from './Grid/Item.js';
 import GridLogic from '../../composables/GridLogic.js';
 
@@ -13,6 +11,12 @@ export default {
 	components: {
 		GridItem,
 	},
+	inject: {
+		sectionName: {
+			type: String,
+			default: '',
+		}
+	},
 	props: {
 		cols: Number,
 		items: Array,
@@ -26,7 +30,7 @@ export default {
 			type: Number,
 			default: 0
 		},
-		additionalRow:{
+		additionalRow: {
 			type: Boolean,
 			default: false,
 		}
@@ -50,18 +54,12 @@ export default {
 			permUpdates: [],
 			positionUpdates: null,
 			fixedPositionUpdates: null,
-			draggedOffset: [0,0],
+			draggedOffset: [0, 0],
 			draggedItem: null,
 			draggedNode: null,
 			reorderedItems:[],
 			clonedWidget:null,
-		}
-	},
-	inject:{
-		sectionName: {
-			type: String,
-			default: '',
-		},
+		};
 	},
 	computed: {
 		additionalRowComputed: {
@@ -86,7 +84,7 @@ export default {
 			});	
 			return items
 		},
-		items_placeholders(){
+		items_placeholders() {
 			let placeholders = [];
 			let col_max = this.cols;
 			let rows_max = this.rows;
@@ -133,7 +131,6 @@ export default {
 					return this.grid ? (this.grid.h+1) : 1;
 			}
 			return this.grid ? this.grid.h : 1;
-			
 		},
 		gridStyle() {
 			const addH = this.active ? this.marginForExtraRow : 0;
@@ -218,14 +215,12 @@ export default {
 				return false;
 			return this.grid.isFreeSlot(this.x, this.y);
 		},
-		widgetSetup(){
-			if (!this.widgetsSetup)
-				return;
-			return this.widgetsSetup.reduce((acc, ele) => { 
-				acc[ele.widget_id] =ele;
-				return acc;
-			} ,{});
-		},
+		currentItems() {
+			if (this.mode != 1 && this.mode != 2 && this.active)
+				return this.placedItems_withPlaceholders;
+
+			return this.placedItems;
+		}
 	},
 	watch: {
 		active(active) {
@@ -256,22 +251,22 @@ export default {
 		}
 	},
 	methods: {
-		needsReordering(item){
+		needsReordering(item) {
 			if (!item?.data?.place[this.cols]){
 				return true;
 			}
 			return false;
 		},
-		toggleDraggedItemOverlay(condition){
-			if(!this.draggedNode)
+		toggleDraggedItemOverlay(condition) {
+			if (!this.draggedNode)
 				return;
-			if(condition){
+			if (condition) {
 				this.draggedNode.firstElementChild.classList.add("dashboard-item-overlay");
-			}else{
+			} else {
 				this.draggedNode.firstElementChild.classList.remove("dashboard-item-overlay");
 			}
 		},
-		dragging(event){
+		dragging(event) {
 			if(this.mode == MODE_MOVE){
 				this.toggleDraggedItemOverlay(true);
 				
@@ -313,7 +308,7 @@ export default {
 			sortedItems.forEach(item => {
 				let freeSlots = this.grid.getFreeSlots();
 				
-				if(this.needsReordering(item)){
+				if (this.needsReordering(item)) {
 					let firstFreeSlot = freeSlots.shift();
 					if (!firstFreeSlot) {
 						item.x = 0;
@@ -354,7 +349,6 @@ export default {
 			return result;
 		},
 		convertGridResultToUpdate(input, output, baseArray) {
-			
 			if (!input)
 				return;
 			if (!baseArray)
@@ -374,13 +368,6 @@ export default {
 				output[item.index] = result;
 			});
 		},
-		mouseLeave() {
-			/* if (this.mode == MODE_IDLE) {
-				this.x = -1;
-				this.y = -1;
-				
-			}  */
-		},
 		updateCursor(evt) {
 			if (!this.active) {
 				this.x = this.y = -1;
@@ -415,7 +402,6 @@ export default {
 			}
 		},
 		startMove(evt, item) {
-			
 			if (!this.active)
 				return;
 			
@@ -458,7 +444,7 @@ export default {
 			if (!this.active)
 				return this.dragCancel();
 			this.checkPinnedWidgetAnimation();
-			if(this.mode == MODE_RESIZE){
+			if (this.mode == MODE_RESIZE) {
 				this.checkWidgetSizeLimitAnimation();
 			}
 			if (this.updateCursor(evt)) {
@@ -505,7 +491,6 @@ export default {
 			this.draggedItem = null;
 			this.$emit('draggedItem',null);
 			this.draggedNode = null;
-			
 		},
 		dragEnd() {
 			this.removeWidgetClones();
@@ -554,14 +539,14 @@ export default {
 			this.additionalRowComputed = false;
 			this.$emit('newItem', this.x, this.y);
 		},
-		updateCursorOnMouseMove(evt){
-			if(this.mode == MODE_IDLE){
+		updateCursorOnMouseMove(evt) {
+			if(this.mode == MODE_IDLE) {
 				this.updateCursor(evt);
 			}
 		},
-		checkPinnedWidgetAnimation(){
-			let itemAtPosition=[];
-			switch(this.mode){
+		checkPinnedWidgetAnimation() {
+			let itemAtPosition = [];
+			switch (this.mode) {
 				case MODE_RESIZE:
 					for (let x = this.draggedItem.x; x <= this.x; x++) {
 						for (let y = this.draggedItem.y; y <= this.y; y++) {
@@ -580,9 +565,9 @@ export default {
 			
 			Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => {
 				ele.classList.remove("denied-dragging-animation");
-			})
+			});
 
-			itemAtPosition.forEach(item=>{
+			itemAtPosition.forEach(item => {
 				if (item.place[this.cols] && item.place[this.cols].pinned) {
 					let pinnedWidget = document.getElementById(item.widgetid);
 					let pinNode = pinnedWidget.querySelector("[pinned='true']");
@@ -590,10 +575,9 @@ export default {
 						pinNode.classList.add("denied-dragging-animation");
 					}
 				}	
-			})
+			});
 		},
 		checkWidgetSizeLimitAnimation() {
-
 			let draggedItemSetup = this.itemsSetup[this.draggedItem.data.widget];
 			let draggedItemMaxWidth = draggedItemSetup.width.max ?? draggedItemSetup.width;
 			let draggedItemMinWidth = draggedItemSetup.width.min ?? draggedItemSetup.width;
@@ -603,7 +587,7 @@ export default {
 
 			let width_after_resize = this.x - this.draggedItem.x + 1; 
 			let height_after_resize = this.y - this.draggedItem.y + 1; 
-			if(  
+			if (
 				(width_after_resize > 0 && (width_after_resize > draggedItemMaxWidth
 				|| width_after_resize < draggedItemMinWidth)
 				)
@@ -611,26 +595,26 @@ export default {
 				(height_after_resize > 0 && (height_after_resize > draggedItemMaxHeight
 				|| height_after_resize < draggedItemMinHeight)
 				)
-			){
+			) {
 				draggedItemNode.classList.add("border-danger");
-			}else{
+			} else {
 				draggedItemNode.classList.remove("border-danger");
 			}
 		},
-		removeWidgetClones(){
+		removeWidgetClones() {
 			let widgetClones = Array.from(document.getElementsByClassName("widgetClone"));
 			for (let i = 0; i < widgetClones.length; i++) {
 				this.$refs.container.removeChild(widgetClones[i]);
 			}
 		},
-		mouseDown(){
+		mouseDown() {
 			this.mode = MODE_MOUSE_DOWN;
 		},
 		mouseUp() {
 			this.mode = MODE_IDLE;
 		},
 	},
-	template: `
+	template: /* html */`
 	<div
 		ref="container"
 		class="drop-grid position-relative h-0"
@@ -638,24 +622,16 @@ export default {
 		@touchmove="dragOver"
 		@touchend="dragCancel"
 		@dragover.prevent="dragOver"
-		@drop="dragEnd($event)"
+		@drop="dragEnd"
 		@mousemove="updateCursorOnMouseMove"
-		@mouseleave="mouseLeave">
-		<TransitionGroup tag="div">
+	>
+		<TransitionGroup>
 			<grid-item
 				ref="gridItems"
-				v-for="(item,index) in ((mode != 1 && mode != 2) && active ? placedItems_withPlaceholders : placedItems)"
+				v-for="(item, index) in currentItems"
 				:key="item.data.id"
-				:item="item"
-				@start-move="startMove"
-				@mouse-down="mouseDown"
-				@mouse-up="mouseUp"
-				@start-resize="startResize"
-				@dragging="dragging"
-				@end-drag="dragEnd"
-				@touch-end="dragEnd();mouseUp();"
-				@touch-start="updateCursorOnMouseMove($event); mouseDown();"
 				class="position-absolute"
+				:item="item"
 				:active="active"
 				:style="{
 					zIndex: item.resizeOverlay ? 1 : 'auto',
@@ -666,29 +642,24 @@ export default {
 					paddingTop: 'var(--fhc-dg-item-padding-top)',
 					paddingLeft: 'var(--fhc-dg-item-padding-horizontal)',
 					paddingRight: 'var(--fhc-dg-item-padding-horizontal)'
-				}">
+				}"
+				@start-move="startMove"
+				@mouse-down="mouseDown"
+				@mouse-up="mouseUp"
+				@start-resize="startResize"
+				@dragging="dragging"
+				@end-drag="dragEnd"
+				@touch-end="dragEnd();mouseUp();"
+				@touch-start="updateCursorOnMouseMove($event); mouseDown();"
+			>
 				<template v-slot="item">
-					<slot v-bind="{...item, ...item.data, index:index}" :x="item.x" :y="item.y" ></slot>
+					<slot
+						v-bind="{ ...item, ...item.data, index: index }"
+						:x="item.x"
+						:y="item.y"
+					></slot>
 				</template>
 			</grid-item>
 		</TransitionGroup>
-		
 	</div>`
 }
-
-/*
-OLD VERSION - ON HOVER
-<div
-	v-if="showEmptyTileHover"
-	class="position-absolute d-flex justify-content-center align-items-center"
-	:style="{
-		cursor: 'pointer',
-		top: 'calc(' + y + ' * var(--fhc-dg-row-height))',
-		left: 'calc(' + x + ' * var(--fhc-dg-col-width))',
-		width: 'var(--fhc-dg-col-width)',
-		height: 'var(--fhc-dg-row-height)'
-	}"
-	@click="emptyTileClicked">
-	<slot :x="x" :y="y" name="empty-tile-hover"></slot>
-</div>
-*/
\ No newline at end of file
diff --git a/public/js/components/Drop/Grid/Item.js b/public/js/components/Drop/Grid/Item.js
index bd256a1fb..49f2bbbcf 100644
--- a/public/js/components/Drop/Grid/Item.js
+++ b/public/js/components/Drop/Grid/Item.js
@@ -1,9 +1,5 @@
 export default {
 	name:'GridItem',
-	components: {
-	},
-	inject: {
-	},
 	props: {
 		item: Object,
 		active: Boolean
@@ -15,18 +11,14 @@ export default {
 		"startResize",
 		"dragging",
 		"endDrag",
-		"dropDrag",
-		"item",
 		"touchStart",
-		"touchEnd",
+		"touchEnd"
 	],
 	data() {
 		return {
 			dragAction: '',
 			dragging: false
-		}
-	},
-	computed: {
+		};
 	},
 	methods: {
 		registerDragAction(evt) {
@@ -42,16 +34,15 @@ export default {
 				}
 			}
 		},
-		tryDragStart(evt, item) {
+		tryDragStart(evt) {
 			let dragAction = this.dragAction || evt.target.getAttribute('drag-action');
 			if (dragAction) {
 				this.dragging = true;
 				if (dragAction == 'move')
-					return this.$emit('startMove', evt, item);
+					return this.$emit('startMove', evt, this.item);
 				else if (dragAction == 'resize')
-					return this.$emit('startResize', evt, item);
+					return this.$emit('startResize', evt, this.item);
 			}
-			//evt.preventDefault();
 		},
 		touchDragEnd(evt) {
 			if (!this.dragging)
@@ -59,30 +50,32 @@ export default {
 			this.dragging = false;
 			this.$emit('touchEnd', evt);
 		},
-		touchStart(event){
+		touchStart(event) {
 			this.$emit('touchStart', event); 
 			this.registerDragAction(event); 
-			this.tryDragStart(event, this.item);
+			this.tryDragStart(event);
 		},
-		touchMove(event){
-			if(this.dragging){
+		touchMove(event) {
+			if (this.dragging){
 				event.preventDefault();
 				this.$emit('dragging', event);
 			}
 		}
 		
 	},
-	template: `
-	<div class="drop-grid-item"
+	template: /* html */`
+	<div
+		class="drop-grid-item"
+		:draggable="active && !item.placeholder"
 		@mousedown="registerDragAction"
 		@mouseup="$emit('mouseUp', $event)"
 		@touchstart="touchStart"
 		@touchend="touchDragEnd"
-		@dragstart="tryDragStart($event, item)"
-		@drag="$emit('dragging',$event)"
+		@dragstart="tryDragStart"
+		@drag="$emit('dragging', $event)"
 		@touchmove="touchMove"
 		@dragend="$emit('endDrag', $event); dragging = false"
-		:draggable="active && !item.placeholder">
+	>
 		<slot v-bind="item"></slot>
 	</div>`
 }