diff --git a/src/App.js b/src/App.js
index 0a9809a..c040107 100644
--- a/src/App.js
+++ b/src/App.js
@@ -85,15 +85,49 @@ function App() {
 
 
 	useEffect(() => {
+
+		if (!canvasRef)
+			return
+
+		const canvasBoundingBox = canvasRef.current.getCanvasContainerBoundingRect()
+		const canvasCenterX = (canvasBoundingBox.width - canvasBoundingBox.left) / 2
+		const canvasCenterY = (canvasBoundingBox.height - canvasBoundingBox.top) / 2
+
 		if (UIFramework === FrameWorks.TKINTER){
-			canvasRef?.current?.createWidget(TkMainWindow)
+			canvasRef?.current?.createWidget(TkMainWindow, ({id, widgetRef}) => {
+				
+				// center the widget when adding to canvas
+				if (!widgetRef.current){
+					return
+				}
+
+				const widgetBoundingBox = widgetRef.current?.getBoundingRect()
+				const widgetCenterX = (widgetBoundingBox.width - widgetBoundingBox.left) / 2
+				const widgetCenterY = (widgetBoundingBox.height - widgetBoundingBox.top) / 2
+
+
+				widgetRef.current?.setPos(canvasCenterX-widgetCenterX, canvasCenterY-widgetCenterY)
+			})
 
 		}else if (UIFramework === FrameWorks.CUSTOMTK){
-			canvasRef?.current?.createWidget(CTkMainWindow)
+			canvasRef?.current?.createWidget(CTkMainWindow, ({id, widgetRef}) => {
+
+				// center the widget when adding to canvas
+				if (!widgetRef.current){
+					return
+				}
+
+				const widgetBoundingBox = widgetRef.current?.getBoundingRect()
+				const widgetCenterX = (widgetBoundingBox.width - widgetBoundingBox.left) / 2
+				const widgetCenterY = (widgetBoundingBox.height - widgetBoundingBox.top) / 2
+
+
+				widgetRef.current?.setPos(canvasCenterX-widgetCenterX, canvasCenterY-widgetCenterY)
+			})
 		}
 
 
-	}, [UIFramework])
+	}, [UIFramework, canvasRef])
 
 	// const handleDragStart = (event) => {
 	// 	console.log("Drag start: ", event)
@@ -169,7 +203,6 @@ function App() {
 
 	const handleWidgetAddedToCanvas = (widgets) => {
 		setCanvasWidgets(widgets)
-		console.log("widget added: ", widgets)
 	}
 
 	const handleCodeGen = () => {
@@ -223,7 +256,7 @@ function App() {
 							
 							{/* <ActiveWidgetProvider> */}
 							<Canvas ref={canvasRef} widgets={canvasWidgets} 
-									onWidgetAdded={handleWidgetAddedToCanvas}/>
+									/>
 							{/* </ActiveWidgetProvider> */}
 						</div>
 						{/* dragOverlay (dnd-kit) helps move items from one container to another */}
diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index 4ac96f5..504bf2f 100644
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -50,7 +50,7 @@ class Canvas extends React.Component {
     constructor(props) {
         super(props)
 
-        const { canvasWidgets, onWidgetListUpdated } = props
+        // const { canvasWidgets, onWidgetListUpdated } = props
 
         this.canvasRef = React.createRef()
         this.canvasContainerRef = React.createRef()
@@ -90,7 +90,7 @@ class Canvas extends React.Component {
             toolbarAttrs: null
         }
 
-        this._onWidgetListUpdated = onWidgetListUpdated // a function callback when the widget is added to the canvas
+        // this._onWidgetListUpdated = onWidgetListUpdated // a function callback when the widget is added to the canvas
 
         this.resetTransforms = this.resetTransforms.bind(this)
         this.renderWidget = this.renderWidget.bind(this)
@@ -1068,8 +1068,8 @@ class Canvas extends React.Component {
             if (callback)
                 callback({ id, widgetRef })
 
-            if (this._onWidgetListUpdated)
-                this._onWidgetListUpdated(widgets) // inform the parent container
+            // if (this._onWidgetListUpdated)
+            //     this._onWidgetListUpdated(widgets) // inform the parent container
         }, 1)
 
         // Update the state to include the new widget's type and ID
@@ -1128,8 +1128,8 @@ class Canvas extends React.Component {
         //     widgets: []
         // })
 
-        if (this._onWidgetListUpdated)
-            this._onWidgetListUpdated([])
+        // if (this._onWidgetListUpdated)
+        //     this._onWidgetListUpdated([])
     }
 
     getWidgetByIdFromWidgetList = (widgetId) => {
@@ -1165,8 +1165,8 @@ class Canvas extends React.Component {
         // })
         this.setWidgets(widgets)
 
-        if (this._onWidgetListUpdated)
-            this._onWidgetListUpdated(widgets)
+        // if (this._onWidgetListUpdated)
+        //     this._onWidgetListUpdated(widgets)
     }
 
     onActiveWidgetUpdate(widgetId) {
@@ -1268,7 +1268,7 @@ class Canvas extends React.Component {
                         return (<div className="tw-relative tw-overflow-hidden tw-flex tw-w-full tw-h-full tw-max-h-[100vh]">
 
                                     <div className="tw-absolute tw-p-2 tw-bg-white tw-z-10 tw-min-w-[100px] tw-h-[50px] tw-gap-2 
-                                                        tw-top-4 tw-place-items-center tw-right-4 tw-shadow-md tw-rounded-md tw-flex">
+                                                        tw-top-4 tw-place-items-center tw-left-4 tw-shadow-md tw-rounded-md tw-flex">
 
                                         <Tooltip title="Reset viewport">
                                             <Button icon={<ReloadOutlined />} onClick={this.resetTransforms} />
diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js
index 2e3a830..055b6d7 100644
--- a/src/canvas/toolbar.js
+++ b/src/canvas/toolbar.js
@@ -394,9 +394,9 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
 
     return (
         <div
-            className={`tw-absolute tw-top-20 tw-right-5 tw-bg-white 
+            className={`tw-absolute tw-top-10 tw-right-5 tw-bg-white 
                 ${toolbarOpen ? "tw-translate-x-0" : "tw-translate-x-full"} 
-                tw-w-[280px] tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg 
+                tw-w-[280px] tw-px-3 tw-p-2 tw-h-[80vh] tw-rounded-md tw-z-[1000] tw-shadow-lg 
                 tw-transition-transform tw-duration-[0.3s] tw-overflow-x-hidden
                 tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto tw-border-[2px] 
                 tw-border-solid tw-border-gray-300`}
diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js
index 35bfee7..926897d 100644
--- a/src/frameworks/tkinter/widgets/base.js
+++ b/src/frameworks/tkinter/widgets/base.js
@@ -508,7 +508,7 @@ export class TkinterWidgetBase extends TkinterBase{
                     padX: {
                         label: "Pad X",
                         tool: Tools.NUMBER_INPUT,
-                        toolProps: {min: 1, max: 140},
+                        toolProps: {min: 0, max: 140},
                         value: null,
                         onChange: (value) => {
                             // this.setWidgetInnerStyle("paddingLeft", `${value}px`)
@@ -531,7 +531,7 @@ export class TkinterWidgetBase extends TkinterBase{
                     padY: {
                         label: "Pad Y",
                         tool: Tools.NUMBER_INPUT,
-                        toolProps: {min: 1, max: 140},
+                        toolProps: {min: 0, max: 140},
                         value: null,
                         onChange: (value) => {
                             const widgetStyle = {
@@ -547,6 +547,46 @@ export class TkinterWidgetBase extends TkinterBase{
                         }
                     },
                 },
+                margin: {
+                    label: "Margin",
+                    marginX: {
+                        label: "Margin X",
+                        tool: Tools.NUMBER_INPUT,
+                        toolProps: {min: 0, max: 140},
+                        value: null,
+                        onChange: (value) => {
+
+                            const widgetStyle = {
+                                ...this.state.widgetOuterStyling,
+                                marginLeft: `${value}px`,
+                                marginRight: `${value}px`
+                            }
+
+                            this.updateState({
+                                widgetOuterStyling: widgetStyle,
+                            })
+                            this.setAttrValue("margin.marginX", value)
+                        }
+                    },
+                    marginY: {
+                        label: "Margin Y",
+                        tool: Tools.NUMBER_INPUT,
+                        toolProps: {min: 0, max: 140},
+                        value: null,
+                        onChange: (value) => {
+                            const widgetStyle = {
+                                ...this.state.widgetOuterStyling,
+                                marginTop: `${value}px`,
+                                marginBottom: `${value}px`
+                            }
+
+                            this.updateState({
+                                widgetOuterStyling: widgetStyle,
+                            })
+                            this.setAttrValue("margin.marginY", value)
+                        }
+                    },
+                },
                 font: {
                     label: "font",
                     fontFamily: {
@@ -608,11 +648,21 @@ export class TkinterWidgetBase extends TkinterBase{
             config["cursor"] = `"${this.getAttrValue("cursor")}"`
 
         if (this.getAttrValue("padding.padX")){
-            config["padx"] = this.getAttrValue("padding.padX")
+            // inner padding
+            config["ipadx"] = this.getAttrValue("padding.padX")
         }
 
         if (this.getAttrValue("padding.padY")){
-            config["pady"] = this.getAttrValue("padding.padY")
+            config["ipady"] = this.getAttrValue("padding.padY")
+        }
+
+
+        if (this.getAttrValue("margin.marginX")){
+            config["padx"] = this.getAttrValue("margin.marginX")
+        }
+
+        if (this.getAttrValue("margin.marginY")){
+            config["pady"] = this.getAttrValue("margin.marginY")
         }
 
         // FIXME: add width and height, the scales may not be correct as the width and height are based on characters in pack and grid not pixels
diff --git a/src/sidebar/utils/premium.js b/src/sidebar/utils/premium.js
index 910d744..44989e3 100644
--- a/src/sidebar/utils/premium.js
+++ b/src/sidebar/utils/premium.js
@@ -78,6 +78,14 @@ function Premium({ children, className = "" }) {
                                     <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                                     <span>Commercial use</span>
                                 </li>
+                                <li className="tw-flex tw-place-items-center tw-gap-2">
+                                    <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                                    <span>Premium widgets</span>
+                                </li>
+                                <li className="tw-flex tw-place-items-center tw-gap-2">
+                                    <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
+                                    <span>Premium Templates</span>
+                                </li>
                                 <li className="tw-flex tw-place-items-center tw-gap-2">
                                     <i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
                                     <span>Downloadable UI builder exe for local development</span>
@@ -147,6 +155,14 @@ function Premium({ children, className = "" }) {
                                     <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                                     <span>Downloadable UI builder exe for local development</span>
                                 </li>
+                                <li className="tw-flex tw-place-items-center tw-gap-2">
+                                    <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                                    <span>Premium widgets</span>
+                                </li>
+                                <li className="tw-flex tw-place-items-center tw-gap-2">
+                                    <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                                    <span>Premium Templates</span>
+                                </li>
                                 <li className="tw-flex tw-place-items-center tw-gap-2">
                                     <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                                     <span>Preview live</span>
@@ -226,6 +242,14 @@ function Premium({ children, className = "" }) {
                                     <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                                     <span>Downloadable UI builder exe for local development</span>
                                 </li>
+                                <li className="tw-flex tw-place-items-center tw-gap-2">
+                                    <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                                    <span>Premium widgets</span>
+                                </li>
+                                <li className="tw-flex tw-place-items-center tw-gap-2">
+                                    <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
+                                    <span>Premium Templates</span>
+                                </li>
                                 <li className="tw-flex tw-place-items-center tw-gap-2">
                                     <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                                     <span>Preview live</span>