diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index f8b99d5..8e9d0f5 100644
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -554,6 +554,39 @@ class Canvas extends React.Component {
         }, this.applyTransform)
     }
 
+    setPan = (x, y) => {
+        this.setState({
+            currentTranslate: {x, y}
+        })
+    }
+
+    panToWidget = (widgetId) => {
+
+        const widget = this.getWidgetById(widgetId).current
+
+        const canvasBoundingRect = this.getCanvasBoundingRect(); // Get the canvas dimensions
+
+        // Get widget position
+        const widgetRect = widget.getBoundingRect(); // Get widget's bounding box
+    
+        // Calculate widget center position in canvas space
+        const widgetCenter = {
+            x: (widgetRect.left - canvasBoundingRect.left + widgetRect.width / 2) / this.state.zoom,
+            y: (widgetRect.top - canvasBoundingRect.top + widgetRect.height / 2) / this.state.zoom
+        }
+
+        // Calculate new translation to center the widget in the viewport
+        const newTranslate = {
+            x: (canvasBoundingRect.width / 2) / this.state.zoom - widgetCenter.x,
+            y: (canvasBoundingRect.height / 2) / this.state.zoom - widgetCenter.y
+        }  
+
+        this.setState({
+            currentTranslate: newTranslate
+        })
+
+    }
+
     // setSelectedWidget(selectedWidget) {
     //     this.setState({ selectedWidget: [selectedWidget] })
     // }
@@ -1053,8 +1086,6 @@ class Canvas extends React.Component {
     }
 
     getWidgetById(id) {
-        console.log("ID: ", id, this.widgetRefs.current)
-
         return this.widgetRefs.current[id]
     }
 
@@ -1198,9 +1229,13 @@ class Canvas extends React.Component {
                     zoom: this.state.zoom,
                     pan: this.state.currentTranslate
                 }}
+
+                onSelect={(widgetId) => this.setSelectedWidget(this.getWidgetById(widgetId)?.current)}
                 
                 onWidgetDeleteRequest={this.removeWidget}
 
+                onPanToWidget={this.panToWidget}
+
                 onWidgetUpdate={this.onActiveWidgetUpdate}
                 onAddChildWidget={this.handleAddWidgetChild}
                 onCreateWidgetRequest={this.createWidget} // create widget when dropped from sidebar
@@ -1275,7 +1310,14 @@ class Canvas extends React.Component {
                                                     }}
                                                 />
                                                 {/* Canvas */}
-                                                <div data-canvas className={`tw-w-full tw-h-full tw-absolute ${!IS_PRODUCTION ? "tw-bg-red-300" : "tw-bg-transparent"} tw-top-0 tw-select-none`}
+                                                {/* TODO: add translation in class instead of applyTransform function */}
+                                                <div data-canvas className={`tw-w-full tw-h-full tw-absolute ${!IS_PRODUCTION ? "tw-bg-red-300" : "tw-bg-transparent"} 
+                                                                            tw-top-0 tw-select-none
+                                                                            `}
+
+                                                        style={{
+                                                            transform: `translate(${this.state.currentTranslate.x}px, ${this.state.currentTranslate.y}px) scale(${this.state.zoom})`
+                                                        }}
                                                     ref={this.canvasRef}>
                                                     <div className="tw-relative tw-w-full tw-h-full">
                                                         {
diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index 4776bd0..910345f 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -225,29 +225,29 @@ class Widget extends React.Component {
     componentWillUnmount() {
     }
 
-    __fixWidgetPosition = () => {
+    // __fixWidgetPosition = () => {
         
-        if (this.state.parentLayout?.layout === Layouts.FLEX || this.state.parentLayout?.layout === Layouts.GRID ){
-            const elementRect = this.elementRef.current.getBoundingClientRect()
-            const {pan: canvasPan, zoom: canvasZoom} = this.canvasMetaData
-            console.log("elemnt rect: ", elementRect)
+    //     if (this.state.parentLayout?.layout === Layouts.FLEX || this.state.parentLayout?.layout === Layouts.GRID ){
+    //         const elementRect = this.elementRef.current.getBoundingClientRect()
+    //         const {pan: canvasPan, zoom: canvasZoom} = this.canvasMetaData
+    //         console.log("elemnt rect: ", elementRect)
         
 
-            const pos = {  // if the layout is flex or grid the position should be the where it stays
-                // x: ((elementRect?.x || 0) - canvasPan.x) / canvasZoom,
-                // y: ((elementRect?.y || 0) - canvasPan.y) / canvasZoom,
+    //         const pos = {  // if the layout is flex or grid the position should be the where it stays
+    //             // x: ((elementRect?.x || 0) - canvasPan.x) / canvasZoom,
+    //             // y: ((elementRect?.y || 0) - canvasPan.y) / canvasZoom,
 
-                x: elementRect?.x,
-                y: elementRect?.y,
-            }
+    //             x: elementRect?.x,
+    //             y: elementRect?.y,
+    //         }
 
-            this.setState({
-                ...this.state,
-                pos: pos
-            })
-        }
+    //         this.setState({
+    //             ...this.state,
+    //             pos: pos
+    //         })
+    //     }
 
-    }
+    // }
 
     updateState = (newState, callback) => {
 
@@ -394,6 +394,8 @@ class Widget extends React.Component {
             selected: true
         })
 
+        this.props.onSelect(this.__id)
+
     }
 
     deSelect() {
@@ -867,6 +869,9 @@ class Widget extends React.Component {
 
     }
 
+    panToWidget = () => {
+        this.props.onPanToWidget(this.__id)
+    }
 
     handleDragStart = (e, callback) => {
         e.stopPropagation()
diff --git a/src/components/cards.js b/src/components/cards.js
index 1e04891..f337d57 100644
--- a/src/components/cards.js
+++ b/src/components/cards.js
@@ -11,6 +11,7 @@ import { GithubOutlined, GitlabOutlined, LinkOutlined,
             EyeInvisibleOutlined} from "@ant-design/icons"
 
 import DraggableWrapper from "./draggable/draggable"
+import { useWidgetContext } from "../canvas/context/widgetContext"
 
 
 export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerRef}){
@@ -157,6 +158,7 @@ export function DraggableAssetCard({file, onDelete}){
 export const TreeViewCard = memo(({widgetRef, title, isTopLevel}) => {
 
     const [widgetVisible, setWidgetVisible] = useState(widgetRef.current.isWidgetVisible)
+    const {activeWidget} = useWidgetContext()
 
     const onDelete = () => {
         widgetRef.current.deleteWidget()
@@ -173,9 +175,17 @@ export const TreeViewCard = memo(({widgetRef, title, isTopLevel}) => {
         }
     }
 
+    const handleSingleClick = () => {
+        activeWidget?.deSelect()
+        widgetRef.current.select()
+    }
+
     return (
         <div className="tw-flex tw-place-items-center tw-px-2 tw-p-1 tw-place-content-between 
-                            tw-gap-4 tw-w-full" style={{width: "100%"}}>
+                            tw-gap-4 tw-w-full" style={{width: "100%"}} 
+                            onClick={handleSingleClick}
+                            onDoubleClick={() => widgetRef?.current.panToWidget()}
+                            >
             <div className={`tw-text-sm ${isTopLevel ? "tw-font-medium" : ""}`}>
                 {title}
             </div>
diff --git a/src/sidebar/treeviewContainer.js b/src/sidebar/treeviewContainer.js
index f926346..ea6f82c 100644
--- a/src/sidebar/treeviewContainer.js
+++ b/src/sidebar/treeviewContainer.js
@@ -38,10 +38,6 @@ function TreeviewContainer() {
 
     const topLevelKeys = transformedContent.filter(cont => cont.isTopLevel).map(cont => cont.key)
 
-    const onDeleteRequest = (widgetId) => {
-        widgetRefs.current[widgetId].current?.deleteWidget()
-    }
-
 
     return (
         <div className="tw-w-full tw-p-2 tw-gap-4 tw-flex tw-flex-col tw-overflow-x-hidden">