diff --git a/notes.md b/notes.md
index 6253288..26ee4ba 100644
--- a/notes.md
+++ b/notes.md
@@ -2,4 +2,8 @@
 ### Update to TypeScript
 
 
-### Don't use delete keyword to delete keys from object, it becomes hard to debug
\ No newline at end of file
+### Don't use delete keyword to delete keys from object, it becomes hard to debug
+
+
+
+## F\*CK Javascript, why the fu\*k, this.bind(this), class sucks in js, you can also use arrow functions, but you won't be able to override it in the subclass, because arrow functions, inherits from the surrounding context.
\ No newline at end of file
diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index b06c960..f0362c9 100644
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -237,7 +237,7 @@ class Canvas extends React.Component {
                     this.state.selectedWidget?.setZIndex(0)
                     selectedWidget.setZIndex(1000)
                     selectedWidget.select()
-                    // console.log("selected widget", selectedWidget, this.state.selectedWidget)
+                    console.log("selected widget", selectedWidget.getToolbarAttrs(), selectedWidget, this.state.selectedWidget)
                     this.setState({
                         selectedWidget: selectedWidget,
                         toolbarAttrs: selectedWidget.getToolbarAttrs()
@@ -672,6 +672,7 @@ class Canvas extends React.Component {
         }
 
 
+        console.log("droped on canvas: ", container)
 
         if (container === WidgetContainer.SIDEBAR) {
 
@@ -717,10 +718,12 @@ class Canvas extends React.Component {
                         ...childData,
                         pos: { x: finalPosition.x, y: finalPosition.y },
                         positionType: PosType.ABSOLUTE, // makes sure that after dropping the position is set to absolute value
+                        parentLayout: null,// reset the parent layout when its put on the canvas
                         zIndex: 0,
                         widgetContainer: WidgetContainer.CANVAS
                     }
                 }
+                console.log("dropped to canvas: ", updatedChildWidget)
             
                 let updatedWidgets = this.removeWidgetFromCurrentList(widgetObj.current.getId())
 
@@ -765,7 +768,7 @@ class Canvas extends React.Component {
         // Find the dragged widget object
         let dragWidgetObj = this.findWidgetFromListById(dragElementID)
 
-        // console.log("Drag widget obj: ", dragWidgetObj)
+        console.log("Drag widget obj: ", dragWidgetObj, dropWidgetObj)
 
         if (dropWidgetObj && dragWidgetObj) {
             const dragWidget = this.widgetRefs[dragWidgetObj.id]
@@ -815,9 +818,9 @@ class Canvas extends React.Component {
                 // Non-swap mode: Add the dragged widget as a child of the drop widget
                 let updatedWidgets = this.removeWidgetFromCurrentList(dragElementID)
 
-                const parentLayout = parentWidget.getLayout()?.layout
+                const parentLayout = parentWidget.getLayout()?.layout || null
 
-                console.log("parent layout: ", parentLayout, parentWidget.getLayout(), parentWidget)
+                console.log("parent layout child add: ", parentLayout, parentWidget.getLayout(), parentWidget)
                 dragWidget.current.setPos(finalPosition.x, finalPosition.y)
                 const updatedDragWidget = {
                     ...dragWidgetObj,
@@ -825,6 +828,7 @@ class Canvas extends React.Component {
                     initialData: {
                         ...dragData,
                         positionType: parentLayout === Layouts.PLACE ? PosType.ABSOLUTE : PosType.NONE,
+                        parentLayout: parentLayout,
                         zIndex: 0,
                         pos: {x: finalPosition.x, y: finalPosition.y},
                         widgetContainer: WidgetContainer.WIDGET
diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js
index 7f1f4d3..2433048 100644
--- a/src/canvas/toolbar.js
+++ b/src/canvas/toolbar.js
@@ -87,7 +87,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
                         }}
                     />
                 </div>
-                <div className="tw-flex tw-flex-col">
+                {/* <div className="tw-flex tw-flex-col">
                     <span className="tw-text-sm tw-font-medium">Grids</span>
                     <div className="tw-flex tw-gap-2">
                         <div className="tw-flex tw-flex-col">
@@ -123,7 +123,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
                             />
                         </div>
                     </div>
-                </div>
+                </div> */}
 
             </div>
         )
diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index b0508aa..a471267 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -12,8 +12,10 @@ import { DragWidgetProvider } from "./draggableWidgetContext"
 import WidgetDraggable from "./widgetDragDrop"
 import WidgetContainer from "../constants/containers"
 import { DragContext } from "../../components/draggable/draggableContext"
+import { removeKeyFromObject } from "../../utils/common"
 
 // FIXME: make it possible to have fit-width and height
+// FIXME: widget styling not being applied if directly added to child instead of the canvas
 
 const ATTRS_KEYS = ['value', 'label', 'tool', 'onChange', 'toolProps'] // these are attrs keywords, don't use these keywords as keys while defining the attrs property
 
@@ -90,7 +92,10 @@ class Widget extends React.Component {
             size: { width: 100, height: 100 },
             positionType: PosType.ABSOLUTE,
 
-            widgetStyling: {
+            widgetOuterStyling: {
+                // responsible for stuff like position, grid placement etc
+            },
+            widgetInnerStyling: {
                 // use for widget's inner styling
                 backgroundColor: "#fff",
                 display: "flex",
@@ -106,7 +111,7 @@ class Widget extends React.Component {
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#fff",
                         onChange: (value) => {
-                            this.setWidgetStyling("backgroundColor", value)
+                            this.setWidgetInnerStyle("backgroundColor", value)
                             this.setAttrValue("styling.backgroundColor", value)
                         }
                     },
@@ -119,10 +124,10 @@ class Widget extends React.Component {
                     value: {
                         layout: "flex",
                         direction: "row",
-                        grid: {
-                            rows: 1,
-                            cols: 1
-                        },
+                        // grid: {
+                        //     rows: 12,
+                        //     cols: 12
+                        // },
                         gap: 10,
                     },
                     toolProps: {
@@ -133,7 +138,6 @@ class Widget extends React.Component {
                         ],
                     },
                     onChange: (value) => {
-                        console.log("changed: ", value)
                         // this.setAttrValue("layout", value)
                         this.setLayout(value)
                     }
@@ -168,9 +172,12 @@ class Widget extends React.Component {
         this.setPos = this.setPos.bind(this)
         this.setAttrValue = this.setAttrValue.bind(this)
         this.setWidgetName = this.setWidgetName.bind(this)
-        this.setWidgetStyling = this.setWidgetStyling.bind(this)
-        this.setPosType = this.setPosType.bind(this)
+        
+        this.setWidgetInnerStyle = this.setWidgetInnerStyle.bind(this)
+        this.setWidgetOuterStyle = this.setWidgetOuterStyle.bind(this)
 
+        this.setPosType = this.setPosType.bind(this)
+        this.setParentLayout = this.setParentLayout.bind(this)
     }
 
     componentDidMount() {
@@ -183,7 +190,7 @@ class Widget extends React.Component {
         }
         
         if (this.state.attrs.styling.backgroundColor)
-            this.setWidgetStyling('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff")
+            this.setWidgetInnerStyle('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff")
 
         this.load(this.props.initialData || {}) // load the initial data
 
@@ -223,6 +230,8 @@ class Widget extends React.Component {
 
     getToolbarAttrs() {
 
+        console.log("Current attributes: ", this.state.attrs)
+
         return ({
             id: this.__id,
             widgetName: {
@@ -363,6 +372,23 @@ class Widget extends React.Component {
     }
 
 
+    /**
+     * 
+     * @param {string} path - eg: styling.backgroundColor
+     * @returns 
+     */
+    removeAttr = (path) =>{
+
+        const newAttrs = removeKeyFromObject(path, this.state.attrs)
+
+        this.setState({
+            attrs: newAttrs
+        })
+
+        return newAttrs
+
+    }
+
     /**
      * Given the key as a path, sets the value for the widget attribute
      * @param {string} path - path to the key, eg: styling.backgroundColor
@@ -460,10 +486,10 @@ class Widget extends React.Component {
     }
 
     /**
-     * 
+     * inform the child about the parent layout changes
      * @param {Layouts} layout 
      */
-    setParentLayout = (layout) => {
+    setParentLayout(layout){
 
         let updates = {
             parentLayout: layout,
@@ -488,6 +514,10 @@ class Widget extends React.Component {
         this.setState(updates)
     }
 
+    getParentLayout = () => {
+        return this.state.parentLayout
+    }
+
     getLayout = () => {
 
         return this.state?.attrs?.layout?.value || Layouts.FLEX
@@ -499,17 +529,19 @@ class Widget extends React.Component {
 
         console.log("layout value: ", value)
 
-        const widgetStyle = {
-            ...this.state.widgetStyling,
+        let widgetStyle = {
+            ...this.state.widgetInnerStyling,
             display: layout !== Layouts.PLACE ? layout : "block",
             flexDirection: direction,
             gap: `${gap}px`,
-            flexWrap: "wrap"
-            // TODO: add grid rows and cols
+            flexWrap: "wrap",
+            gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+            gridTemplateRows: "repeat(auto-fill, minmax(100px, 1fr))",  
+            // gridAutoRows: "auto"
         }
 
         this.updateState({
-            widgetStyling: widgetStyle
+            widgetInnerStyling: widgetStyle
         })
 
         this.setAttrValue("layout", value)
@@ -517,20 +549,46 @@ class Widget extends React.Component {
 
     }
 
+    getWidgetInnerStyle = (key) => {
+        return this.state.widgetInnerStyling[key]
+    }
+
+    getWidgetOuterStyle = (key) => {
+        return this.state.widgetOuterStyling[key]
+    }
+
+    /**
+     * sets outer styling like grid placement etc, don't use this for background color, foreground color etc
+     * @param {string} key - The string in react Style format
+     * @param {string} value - Value of the style
+     */
+    setWidgetOuterStyle(key, value){
+        const widgetStyle = {
+            ...this.state.widgetOuterStyling,
+            [key]: value
+        }
+
+        this.setState({
+            widgetOuterStyling: widgetStyle
+        })
+
+        console.log("widget styling: ", widgetStyle)
+    }
+
     /**
      * 
      * @param {string} key - The string in react Style format
      * @param {string} value - Value of the style
      */
-    setWidgetStyling(key, value) {
+    setWidgetInnerStyle(key, value) {
         
         const widgetStyle = {
-            ...this.state.widgetStyling,
+            ...this.state.widgetInnerStyling,
             [key]: value
         }
 
         this.setState({
-            widgetStyling: widgetStyle
+            widgetInnerStyling: widgetStyle
         })
 
     }
@@ -597,7 +655,8 @@ class Widget extends React.Component {
             pos: this.state.pos,
             size: this.state.size,
             widgetContainer: this.state.widgetContainer,
-            widgetStyling: this.state.widgetStyling,
+            widgetInnerStyling: this.state.widgetInnerStyling,
+            widgetOuterStyling: this.state.widgetOuterStyling,
             parentLayout: this.state.parentLayout,
             positionType: this.state.positionType,
             attrs: this.serializeAttrsValues() // makes sure that functions are not serialized
@@ -638,7 +697,7 @@ class Widget extends React.Component {
 
         const newData = {
             ...restData,
-            layoutUpdates
+            ...layoutUpdates
         }
         console.log("loaded layout2: ", newData)
 
@@ -660,7 +719,8 @@ class Widget extends React.Component {
                 })
 
                 // Set the value at the last key
-                nestedObject[lastKey].value = value
+                if (nestedObject[lastKey])
+                    nestedObject[lastKey].value = value
             })
 
             this.updateState({ attrs: newAttrs })
@@ -899,12 +959,12 @@ class Widget extends React.Component {
 
     /**
      * Note: you must implement this method in subclass, if you want children make sure to pass
-     * {this.props.children}, to modify the style add this.state.widgetStyling
+     * {this.props.children}, to modify the style add this.state.widgetInnerStyling
     */
     renderContent() {
         // throw new NotImplementedError("render method has to be implemented")
         return (
-            <div className="tw-w-full tw-h-full tw-p-2 tw-content-start tw-rounded-md tw-overflow-hidden" style={this.state.widgetStyling}>
+            <div className="tw-w-full tw-h-full tw-p-2 tw-content-start tw-rounded-md tw-overflow-hidden" style={this.state.widgetInnerStyling}>
                 {this.props.children}
             </div>
         )
@@ -918,6 +978,7 @@ class Widget extends React.Component {
     render() {  
 
         let outerStyle = {
+            ...this.state.widgetOuterStyling,
             cursor: this.cursor,
             zIndex: this.state.zIndex,
             position: this.state.positionType, //  don't change this if it has to be movable on the canvas
diff --git a/src/frameworks/tkinter/plugins/analogTimepicker.js b/src/frameworks/tkinter/plugins/analogTimepicker.js
index c8db18b..7ecd96c 100644
--- a/src/frameworks/tkinter/plugins/analogTimepicker.js
+++ b/src/frameworks/tkinter/plugins/analogTimepicker.js
@@ -34,7 +34,7 @@ class AnalogTimePicker extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -92,7 +92,7 @@ class AnalogTimePicker extends Widget{
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none" 
-                        style={this.state.widgetStyling} ref={this.timePickerRef}>
+                        style={this.state.widgetInnerStyling} ref={this.timePickerRef}>
                     
                 </div>
             </div>
diff --git a/src/frameworks/tkinter/plugins/mapview.js b/src/frameworks/tkinter/plugins/mapview.js
index bd6ddf4..123edd8 100644
--- a/src/frameworks/tkinter/plugins/mapview.js
+++ b/src/frameworks/tkinter/plugins/mapview.js
@@ -52,7 +52,7 @@ class MapView extends Widget{
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none" 
-                        style={this.state.widgetStyling}>
+                        style={this.state.widgetInnerStyling}>
                     <div className="tw-relative tw-w-full tw-h-full">
                         <div className="tw-absolute tw-left-5 tw-top-3  tw-flex tw-flex-col tw-gap-2">
                             <div className="tw-text-white tw-bg-black tw-text-center
diff --git a/src/frameworks/tkinter/plugins/pandasTable.js b/src/frameworks/tkinter/plugins/pandasTable.js
index 6c90c3b..1b38cd5 100644
--- a/src/frameworks/tkinter/plugins/pandasTable.js
+++ b/src/frameworks/tkinter/plugins/pandasTable.js
@@ -107,7 +107,7 @@ class PandasTable extends Widget{
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none" 
-                        style={this.state.widgetStyling}>
+                        style={this.state.widgetInnerStyling}>
                     <ResizableTable />
                 </div>
             </div>
diff --git a/src/frameworks/tkinter/plugins/videoPlayer.js b/src/frameworks/tkinter/plugins/videoPlayer.js
index 5225e75..ef0623d 100644
--- a/src/frameworks/tkinter/plugins/videoPlayer.js
+++ b/src/frameworks/tkinter/plugins/videoPlayer.js
@@ -51,7 +51,7 @@ class VideoPlayer extends Widget{
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
                 <div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none" 
-                        style={this.state.widgetStyling}>
+                        style={this.state.widgetInnerStyling}>
                     <div className="tw-relative tw-w-full tw-h-full">
                         <div className="tw-absolute tw-text-white tw-left-1/2 tw-top-1/2 
                                         tw--translate-x-1/2 tw--translate-y-1/2">
diff --git a/src/frameworks/tkinter/widgets/ checkButton.js b/src/frameworks/tkinter/widgets/ checkButton.js
index 2823b77..66c9e19 100644
--- a/src/frameworks/tkinter/widgets/ checkButton.js	
+++ b/src/frameworks/tkinter/widgets/ checkButton.js	
@@ -1,12 +1,12 @@
 import Widget from "../../../canvas/widgets/base"
 
 import Tools from "../../../canvas/constants/tools"
-import { Checkbox } from "antd"
 import { removeKeyFromObject } from "../../../utils/common"
-import { CheckOutlined, CheckSquareFilled } from "@ant-design/icons"
+import { CheckSquareFilled } from "@ant-design/icons"
+import TkinterBase from "./base"
 
 
-export class CheckBox extends Widget{
+export class CheckBox extends TkinterBase{
 
     static widgetType = "check_button"
     // TODO: remove layouts
@@ -34,7 +34,7 @@ export class CheckBox extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -61,7 +61,7 @@ export class CheckBox extends Widget{
         super.componentDidMount()
         // this.setAttrValue("styling.backgroundColor", "#fff")
         this.setWidgetName("Checkbox")
-        this.setWidgetStyling("backgroundColor", "#fff0")
+        this.setWidgetInnerStyle("backgroundColor", "#fff0")
     }
 
     getToolbarAttrs(){
@@ -81,7 +81,7 @@ export class CheckBox extends Widget{
     renderContent(){
         return (
             <div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
-                style={this.state.widgetStyling}
+                style={this.state.widgetInnerStyling}
                 >
                 
                 <div className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center tw-place-content-center">
@@ -135,7 +135,7 @@ export class RadioButton extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -158,8 +158,8 @@ export class RadioButton extends Widget{
     componentDidMount(){
         super.componentDidMount()
         // this.setAttrValue("styling.backgroundColor", "#fff")
-        this.setWidgetName("Checkbox")
-        this.setWidgetStyling("backgroundColor", "#fff0")
+        this.setWidgetName("Radio button")
+        this.setWidgetInnerStyle("backgroundColor", "#fff0")
     }
 
     getToolbarAttrs(){
@@ -182,7 +182,7 @@ export class RadioButton extends Widget{
 
         return (
             <div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
-                style={this.state.widgetStyling}
+                style={this.state.widgetInnerStyling}
                 >
                 
                 {
@@ -201,7 +201,7 @@ export class RadioButton extends Widget{
                                             </div>
                                     }
                                 </div>
-                                <span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
+                                <span className="tw-text-base" style={{color: this.state.widgetInnerStyling.foregroundColor}}>
                                     {value}
                                 </span>
                             </div>
diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js
new file mode 100644
index 0000000..86a3b64
--- /dev/null
+++ b/src/frameworks/tkinter/widgets/base.js
@@ -0,0 +1,197 @@
+import { Layouts, PosType } from "../../../canvas/constants/layouts"
+import Tools from "../../../canvas/constants/tools";
+import Widget from "../../../canvas/widgets/base";
+
+
+
+class TkinterBase extends Widget {
+
+    componentDidMount(){
+        super.componentDidMount()
+        console.log("parent layout: ", this.state.parentLayout)
+        // this.setParentLayout(this.props.initialData)
+    }
+
+    
+    
+    setParentLayout(layout){
+        // show attributes related to the layout manager
+        let updates = {
+            parentLayout: layout,
+        }
+        console.log("Parent layout updated1: ", layout)
+        
+        this.removeAttr("gridManager")
+        if (layout === Layouts.FLEX || layout === Layouts.GRID) {
+
+            updates = {
+                ...updates,
+                positionType: PosType.NONE
+            }
+            console.log("Manager1 :", layout)
+            if (layout === Layouts.GRID) {
+                // Set attributes related to grid layout manager
+                updates = {
+                    ...updates,
+                    attrs: {
+                        ...this.state.attrs,
+                        gridManager: {
+                            label: "Grid manager",
+                            display: "horizontal",
+                            row: {
+                                label: "Row",
+                                tool: Tools.NUMBER_INPUT, 
+                                toolProps: { placeholder: "width", max: 1000, min: 1 },
+                                value: 1,
+                                onChange: (value) => {
+                                    this.setAttrValue("gridManager.row", value)
+                                    
+                                    const previousRow = this.getWidgetOuterStyle("gridRow") || "1/1"
+
+                                    const [_row=1, rowSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
+
+
+                                    this.setWidgetOuterStyle("gridRow", `${value+' / '+rowSpan}`)
+                                }
+                            },
+                            rowSpan: {
+                                label: "Row span",
+                                tool: Tools.NUMBER_INPUT,
+                                toolProps: { placeholder: "height", max: 1000, min: 1 },
+                                value: 1,
+                                onChange: (value) => {
+                                    this.setAttrValue("gridManager.rowSpan", value)
+                                    
+                                    const previousRow = this.getWidgetOuterStyle("gridRow") || "1/1"
+
+                                    const [row=1, _rowSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
+
+                                    this.setWidgetOuterStyle("gridRow", `${row + ' / ' +value}`)
+                                }
+                            },
+                            column: {
+                                label: "Column",
+                                tool: Tools.NUMBER_INPUT,
+                                toolProps: { placeholder: "height", max: 1000, min: 1 },
+                                value: 1,
+                                onChange: (value) => {
+                                    this.setAttrValue("gridManager.column", value)
+                                    
+                                    const previousRow = this.getWidgetOuterStyle("gridColumn") || "1/1"
+
+                                    const [_col=1, colSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
+                                    console.log("column: ", value, colSpan)
+                                    this.setWidgetOuterStyle("gridColumn", `${value +' / ' + colSpan}`)
+                                }
+                            },
+                            columnSpan: {
+                                label: "Column span",
+                                tool: Tools.NUMBER_INPUT,
+                                toolProps: { placeholder: "height", max: 1000, min: 1 },
+                                value: 1,
+                                onChange: (value) => {
+                                    this.setAttrValue("gridManager.columnSpan", value)
+                                    
+                                    const previousCol = this.getWidgetOuterStyle("gridColumn") || "1/1"
+
+                                    console.log("Value: ", previousCol)
+
+                                    const [col=1, _colSpan=1] = previousCol.replace(/\s+/g, '').split("/").map(Number)
+
+                                    this.setWidgetOuterStyle("gridColumn", `${col + ' / ' + value}`)
+                                }
+                            },
+                        }
+                    }
+                }
+
+            }
+
+        } else if (layout === Layouts.PLACE) {
+            updates = {
+                ...updates,
+                positionType: PosType.ABSOLUTE
+            }
+        }
+
+        console.log("Parent layout updated2: ", updates)
+
+        this.updateState(updates)
+
+        return updates
+    }
+
+    /**
+     * loads the data 
+     * @param {object} data 
+     */
+    load = (data) => {
+
+        if (Object.keys(data).length === 0) return // no data to load
+
+        data = {...data} // create a shallow copy
+
+        const {attrs, parentLayout, ...restData} = data
+
+
+        let layoutUpdates = {
+            parentLayout: parentLayout
+        }
+
+        if (parentLayout === Layouts.FLEX || parentLayout === Layouts.GRID){
+
+            layoutUpdates = {
+                ...layoutUpdates,
+                positionType: PosType.NONE
+            }
+
+        }else if (parentLayout === Layouts.PLACE){
+            layoutUpdates = {
+                ...layoutUpdates,
+                positionType: PosType.ABSOLUTE
+            }
+        }
+
+        const newData = {
+            ...restData,
+            ...layoutUpdates
+        }
+
+        this.setState(newData,  () => {
+            let layoutAttrs = this.setParentLayout(parentLayout).attrs || {}
+            console.log("loaded layout2: ", layoutUpdates)
+
+
+            // UPdates attrs
+            let newAttrs = { ...this.state.attrs, ...layoutAttrs }
+
+            // Iterate over each path in the updates object
+            Object.entries(attrs).forEach(([path, value]) => {
+                const keys = path.split('.')
+                const lastKey = keys.pop()
+
+                // Traverse the nested object within attrs
+                let nestedObject = newAttrs
+
+                keys.forEach(key => {
+                    nestedObject[key] = { ...nestedObject[key] } // Ensure immutability for each nested level
+                    nestedObject = nestedObject[key]
+                })
+
+                // Set the value at the last key
+                if (nestedObject[lastKey])
+                    nestedObject[lastKey].value = value
+            })
+
+            this.updateState({ attrs: newAttrs })
+
+        })  
+
+
+    }
+
+
+}
+
+
+export default TkinterBase
\ No newline at end of file
diff --git a/src/frameworks/tkinter/widgets/button.js b/src/frameworks/tkinter/widgets/button.js
index f1b49b8..362ae5c 100644
--- a/src/frameworks/tkinter/widgets/button.js
+++ b/src/frameworks/tkinter/widgets/button.js
@@ -1,9 +1,10 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
+import TkinterBase from "./base"
 
 
-class Button extends Widget{
+class Button extends TkinterBase{
 
     static widgetType = "button"
 
@@ -25,7 +26,7 @@ class Button extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -68,7 +69,7 @@ class Button extends Widget{
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md 
                             tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
                     {/* {this.props.children} */}
                     <div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
                         {this.getAttrValue("buttonLabel")}
diff --git a/src/frameworks/tkinter/widgets/frame.js b/src/frameworks/tkinter/widgets/frame.js
index 04b9ce7..1bf177b 100644
--- a/src/frameworks/tkinter/widgets/frame.js
+++ b/src/frameworks/tkinter/widgets/frame.js
@@ -1,7 +1,8 @@
 import Widget from "../../../canvas/widgets/base"
+import TkinterBase from "./base"
 
 
-class Frame extends Widget{
+class Frame extends TkinterBase{
 
     static widgetType = "frame"
 
@@ -25,9 +26,10 @@ class Frame extends Widget{
     }
 
     renderContent(){
+        // console.log("widget styling: ", this.state.widgetInnerStyling)
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-relative tw-rounded-md tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
                     {this.props.children}
                 </div>
             </div>
diff --git a/src/frameworks/tkinter/widgets/input.js b/src/frameworks/tkinter/widgets/input.js
index fca46fb..0530225 100644
--- a/src/frameworks/tkinter/widgets/input.js
+++ b/src/frameworks/tkinter/widgets/input.js
@@ -1,9 +1,10 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
+import TkinterBase from "./base"
 
 
-export class Input extends Widget{
+export class Input extends TkinterBase{
 
     static widgetType = "entry"
     
@@ -26,7 +27,7 @@ export class Input extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -67,7 +68,7 @@ export class Input extends Widget{
     renderContent(){
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetInnerStyling}>
                     <div className="tw-text-sm tw-text-gray-300">
                         {this.getAttrValue("placeHolder")}
                     </div>
@@ -79,7 +80,7 @@ export class Input extends Widget{
 }
 
 
-export class Text extends Widget{
+export class Text extends TkinterBase{
 
     static widgetType = "Text"
 
@@ -102,7 +103,7 @@ export class Text extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -142,7 +143,7 @@ export class Text extends Widget{
     renderContent(){
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
                     <div className="tw-text-sm tw-text-gray-300">
                         {this.getAttrValue("placeHolder")}
                     </div>
diff --git a/src/frameworks/tkinter/widgets/label.js b/src/frameworks/tkinter/widgets/label.js
index 3239fc4..430de65 100644
--- a/src/frameworks/tkinter/widgets/label.js
+++ b/src/frameworks/tkinter/widgets/label.js
@@ -1,19 +1,17 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
+import TkinterBase from "./base"
 
 
-class Label extends Widget{
+class Label extends TkinterBase{
 
     static widgetType = "label"
 
     constructor(props) {
         super(props)
 
-        this.droppableTags = {
-            // TODO: exclude all
-            exclude: ["image", "video", "media", "main_window", "toplevel"]
-        }
+        this.droppableTags = null
 
         const newAttrs = removeKeyFromObject("layout", this.state.attrs)
         
@@ -30,7 +28,7 @@ class Label extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -50,7 +48,7 @@ class Label extends Widget{
     componentDidMount(){
         super.componentDidMount()
         this.setAttrValue("styling.backgroundColor", "#fff")
-        this.setWidgetStyling("backgroundColor", "#fff0")
+        this.setWidgetInnerStyle("backgroundColor", "#fff0")
     }
 
     getToolbarAttrs(){
@@ -70,7 +68,7 @@ class Label extends Widget{
     renderContent(){
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
                     {/* {this.props.children} */}
                     <div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
                         {this.getAttrValue("labelWidget")}
diff --git a/src/frameworks/tkinter/widgets/mainWindow.js b/src/frameworks/tkinter/widgets/mainWindow.js
index f2e973f..0dd9762 100644
--- a/src/frameworks/tkinter/widgets/mainWindow.js
+++ b/src/frameworks/tkinter/widgets/mainWindow.js
@@ -65,7 +65,7 @@ class MainWindow extends Widget{
                         </div>
                     </div>
                 </div>
-                <div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" style={this.state.widgetInnerStyling}>
                     {this.props.children}
                 </div>
             </div>
diff --git a/src/frameworks/tkinter/widgets/optionMenu.js b/src/frameworks/tkinter/widgets/optionMenu.js
index fd8893e..73b3489 100644
--- a/src/frameworks/tkinter/widgets/optionMenu.js
+++ b/src/frameworks/tkinter/widgets/optionMenu.js
@@ -3,9 +3,10 @@ import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
 import { ArrowDownOutlined, DownOutlined } from "@ant-design/icons"
+import TkinterBase from "./base"
 
 
-class OptionMenu extends Widget{
+class OptionMenu extends TkinterBase{
 
     static widgetType = "option_menu"
     // FIXME: the radio buttons are not visible because of the default heigh provided
@@ -34,7 +35,7 @@ class OptionMenu extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -65,7 +66,7 @@ class OptionMenu extends Widget{
         super.componentDidMount()
         // this.setAttrValue("styling.backgroundColor", "#fff")
         this.setWidgetName("Option menu")
-        this.setWidgetStyling("backgroundColor", "#fff")
+        this.setWidgetInnerStyle("backgroundColor", "#fff")
     }
 
     getToolbarAttrs(){
@@ -94,7 +95,7 @@ class OptionMenu extends Widget{
 
         return (
             <div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
-                style={this.state.widgetStyling}
+                style={this.state.widgetInnerStyling}
                 onClick={this.toggleDropDownOpen}
                 >
                 <div className="tw-flex tw-justify-between tw-gap-1">
@@ -115,7 +116,7 @@ class OptionMenu extends Widget{
                                     <div key={index} className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center
                                                                 hover:tw-bg-[#c5c5c573] tw-p-1">
                                     
-                                        <span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
+                                        <span className="tw-text-base" style={{color: this.state.widgetInnerStyling.foregroundColor}}>
                                             {value}
                                         </span>
                                     </div>
diff --git a/src/frameworks/tkinter/widgets/slider.js b/src/frameworks/tkinter/widgets/slider.js
index 972ee06..d75e0ce 100644
--- a/src/frameworks/tkinter/widgets/slider.js
+++ b/src/frameworks/tkinter/widgets/slider.js
@@ -1,9 +1,10 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
+import TkinterBase from "./base"
 
 
-class Slider extends Widget{
+class Slider extends TkinterBase{
 
     static widgetType = "scale"
 
@@ -26,7 +27,7 @@ class Slider extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
diff --git a/src/frameworks/tkinter/widgets/spinBox.js b/src/frameworks/tkinter/widgets/spinBox.js
index 341fec4..107589e 100644
--- a/src/frameworks/tkinter/widgets/spinBox.js
+++ b/src/frameworks/tkinter/widgets/spinBox.js
@@ -2,9 +2,10 @@ import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
 import { DownOutlined, UpOutlined } from "@ant-design/icons"
+import TkinterBase from "./base"
 
 
-class SpinBox extends Widget{
+class SpinBox extends TkinterBase{
 
     static widgetType = "spin_box"
     constructor(props) {
@@ -26,7 +27,7 @@ class SpinBox extends Widget{
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
                         value: "#000",
                         onChange: (value) => {
-                            this.setWidgetStyling("color", value)
+                            this.setWidgetInnerStyle("color", value)
                             this.setAttrValue("styling.foregroundColor", value)
                         }
                     }
@@ -92,7 +93,7 @@ class SpinBox extends Widget{
     renderContent(){
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center tw-justify-between" style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center tw-justify-between" style={this.state.widgetInnerStyling}>
                     <div className="tw-text-sm ">
                         {this.getAttrValue("spinProps.default")}
                     </div>
diff --git a/src/frameworks/tkinter/widgets/toplevel.js b/src/frameworks/tkinter/widgets/toplevel.js
index 731096d..6e759c0 100644
--- a/src/frameworks/tkinter/widgets/toplevel.js
+++ b/src/frameworks/tkinter/widgets/toplevel.js
@@ -65,7 +65,7 @@ class TopLevel extends Widget{
                         </div>
                     </div>
                 </div>
-                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetStyling}>
+                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
                     {this.props.children}
                 </div>
             </div>