diff --git a/app/src/renderer/components/SidePanel/artboardEditable.vue b/app/src/renderer/components/SidePanel/artboardEditable.vue
index 143a422f..f1150922 100644
--- a/app/src/renderer/components/SidePanel/artboardEditable.vue
+++ b/app/src/renderer/components/SidePanel/artboardEditable.vue
@@ -86,6 +86,7 @@ import rightClickMenu from '~/mixins/rightClickMenu'
 import { useArtboardsStore } from '~/store/artboards'
 import { useHoverArtboardsStore } from '~/store/hoverArtboards'
 import { useSelectedArtboardsStore } from '~/store/selectedArtboards'
+import { centerOnElement } from '~/components/panzoom/panzoomFns'
 
 export default {
   name: 'ArtboardEditable',
@@ -176,15 +177,18 @@ export default {
     },
     goToArtboard(id) {
       // Find the artboard (DOM)
-      const artboard = document.querySelector(`[artboard-id="${id}"]`)
+      const artboard = document.querySelector<HTMLElement>(
+        `[artboard-id="${id}"]`
+      )
       if (!artboard) {
         console.warn('No Artboard found')
         return false
       }
 
       // Pan to the position of the element relative to the parent
-      // TODO factor in the size of the artboard... Panzoom should scale down to fith the screen
-      this.$root.$panzoom.pan(-artboard.offsetLeft, artboard.offsetTop)
+      centerOnElement(artboard, {
+        instance: this.$root.$panzoom,
+      })
     },
     rightClickMenu(e, artboard) {
       rightClickMenu(this.$store, {
@@ -206,6 +210,7 @@ export default {
     selectArtboard(id) {
       // Move screen to the selected artboard
       this.goToArtboard(id)
+
       // Remove all previous selections
       const selectedArtboards = useSelectedArtboardsStore()
       selectedArtboards.empty()
diff --git a/app/src/renderer/components/panzoom/Panzoom.vue b/app/src/renderer/components/panzoom/Panzoom.vue
index c84c2797..89898721 100644
--- a/app/src/renderer/components/panzoom/Panzoom.vue
+++ b/app/src/renderer/components/panzoom/Panzoom.vue
@@ -1,7 +1,10 @@
 <template>
-  <div style="display: inline-block">
+  <div style="display: inline-block; width: 100%; height: 100%">
     <!-- We 'panzoom-exclude' to mark this as not relevant to Panzoom -->
     <!-- <PanzoomControls v-if="panzoomInstance" :instance="panzoomInstance" /> -->
+    <div class="dev">
+      <div>Mouse: {{ mouse }}</div>
+    </div>
     <div
       id="canvas"
       ref="outerPanArea"
@@ -10,20 +13,40 @@
         'dev-visual-debugger': showCanvasDebugger,
       }"
     >
+      <!-- For transform-origin: 50% 50% to work, this next element HAS to be display:block -->
       <div
         ref="innerPanArea"
-        :class="{
-          'dev-visual-debugger': showCanvasDebugger,
-        }"
+        style="
+          display: block;
+          position: relative;
+          /* height: 100%; */
+          /* width: 100%; */
+          overflow: visible;
+        "
       >
-        <slot />
+        <!-- Now we have the real panzoom content inside: -->
+        <div
+          class="panzoom-inner"
+          :class="{
+            'dev-visual-debugger': showCanvasDebugger,
+          }"
+        >
+          <slot />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, getCurrentInstance, onMounted, computed, watch } from 'vue'
+import {
+  ref,
+  reactive,
+  getCurrentInstance,
+  onMounted,
+  computed,
+  watch,
+} from 'vue'
 import Panzoom, { PanzoomObject } from '@panzoom/panzoom'
 import { ipcRenderer } from 'electron'
 import isElectron from 'is-electron'
@@ -31,6 +54,8 @@ import PanzoomControls from './PanzoomControls.vue'
 import { useInteractionStore } from '~/store/interactions'
 import useEventHandler from '../Screens/useEventHandler'
 import { useDevStore } from '~/store/dev'
+import { isEqual } from 'lodash'
+import { initialPanZoom, getPanzoomElement, minScale } from './panzoomFns'
 // import { useEventListener } from '@vueuse/core'
 
 const interactions = useInteractionStore()
@@ -38,14 +63,18 @@ const devStore = useDevStore()
 const { state: userEventsState } = useEventHandler()
 
 // Store
-// const showCanvasDebugger = false // TODO: Migrate from Vuex -> Pinia
-const showCanvasDebugger = devStore.showCanvasDebugger
+const showCanvasDebugger = computed(() => devStore.showCanvasDebugger)
 const panzoomEnabled = computed(() => interactions.panzoomEnabled)
 const isInteracting = computed(() => interactions.isInteracting)
 
+const mouse = reactive({
+  x: 0,
+  y: 0,
+})
+
 // Template refs
-const innerPanArea = ref()
-const outerPanArea = ref() // The parent DOM Node
+const innerPanArea = ref<HTMLElement>()
+const outerPanArea = ref<HTMLElement>() // The parent DOM Node
 const panzoomInstance = ref<PanzoomObject | undefined>()
 
 // Watch for changes and change Panzoom accordingly
@@ -63,17 +92,45 @@ watch(panzoomEnabled, (newVal) => {
 
 onMounted(async () => {
   // TODO: This should be refactored after Vue 3 update
-  const { $root } = getCurrentInstance()?.proxy
+  const { $root, $config } = getCurrentInstance()?.proxy
   if (!$root) console.warn('No Panzoom created')
 
+  outerPanArea.value?.addEventListener('mousemove', (e) => {
+    mouse.x = e.clientX
+    mouse.y = e.clientY
+  })
+
+  // const startZoom = initialZoom()
+  const { x: startX } = initialPanZoom()
+  const { y: startY } = initialPanZoom()
+  const { zoom: startZoom } = initialPanZoom()
+
   // Init Panzoom globally
   // We use the 'canvas' option to enable interactions on the parent DOM Node as well
   // Docs: https://github.com/timmywil/panzoom#canvas
+  if (!innerPanArea.value) {
+    console.warn('No innerPanArea')
+    return false
+  }
+
   $root.$panzoom = Panzoom(innerPanArea.value, {
     canvas: true, // Allows parent to control child
     cursor: 'grab',
-    startScale: 1,
-    startX: 0,
+    // origin = transform-origin is the origin from which transforms are applied
+    // Default: 50% 50% https://github.com/timmywil/panzoom#origin
+    origin: '0 0',
+    // origin: '0 0',
+    minScale: minScale,
+    startX: startX, // x
+    startY: startY, // y
+    startScale: startZoom,
+    // Override the focal point of the zoom
+    // because we don't use the default 50% 50% transform-origin
+    // focal: {
+    //   x: innerPanArea.value?.offsetLeft,
+    //   y: innerPanArea.value?.offsetTop,
+    // },
+    // contain: false,
     handleStartEvent: (event: PointerEvent) => {
       // WARNING: Don't use preventDefault, as it will block other events
       // event.preventDefault()
@@ -99,14 +156,25 @@ onMounted(async () => {
   // Reference inside of this component
   panzoomInstance.value = $root.$panzoom
 
-  // Center Panzoom
-  // this.panzoomInstance.pan(
-  //   origX + (current.clientX - startClientX) / scale,
-  //   origY + (current.clientY - startClientY) / scale,
-  //   {
-  //     animate: false,
-  //   }
-  // )
+  // TODO: Remove later; useful for debugging
+  const isDev = $config?.DEV
+  if (isDev) {
+    let zoom, pan
+    setInterval(() => {
+      const currZoom = panzoomInstance.value?.getScale()
+      const currPan = panzoomInstance.value?.getPan()
+
+      const isNewZoom = zoom !== currZoom
+      const isNewPan = isEqual(pan, currPan) === false
+
+      if (isNewZoom) zoom = currZoom
+      if (isNewPan) pan = currPan
+
+      if (isNewPan || isNewZoom) {
+        console.log('Panzoom', { zoom, ...pan }, isNewZoom, isNewPan)
+      }
+    }, 1000)
+  }
 
   // Enable event listeners
   enableEventListeners()
@@ -142,6 +210,10 @@ function disablePanzoom() {
 
 function enableEventListeners() {
   const instance = panzoomInstance.value
+  if (!instance) {
+    console.warn('No Panzoom instance')
+    return false
+  }
 
   // element.addEventListener("panzoomchange", event => {
   //   console.log(event.detail); // => { x: 0, y: 0, scale: 1 }
@@ -173,7 +245,7 @@ function enableEventListeners() {
  * @param DOMElement DOM element that Panzoom is on
  * @param instance The Panzoom instance
  */
-function wheelHandler(DOMElement, instance) {
+function wheelHandler(DOMElement, instance: PanzoomObject) {
   DOMElement.addEventListener('wheel', onWheel)
 
   function onWheel(event) {
@@ -184,10 +256,284 @@ function wheelHandler(DOMElement, instance) {
     // Prevent default scroll event
     event.preventDefault()
 
+    // Normalize to deltaX in case shift modifier is used on Mac
+    const delta =
+      event.deltaY === 0 && event.deltaX ? event.deltaX : event.deltaY
+    const wheel = delta < 0 ? 1 : -1
+
     // Require the CMD/CTRL key to be pressed
     // This prevents accidental scrolling
     if (event.ctrlKey || event.metaKey || event.altKey) {
-      instance.zoomWithWheel(event)
+      // If we were using transform-origin 50%,50% on the Panzoom class we could use instance.zoomWithWheel and be done with it
+      // instance.zoomWithWheel(event)
+      // But we are using origin 0,0 so we need to do this manually
+      // Docs: https://github.com/timmywil/panzoom#zoomtopoint
+      // https://github.com/timmywil/panzoom/issues/482#issuecomment-621933139
+      // https://github.com/timmywil/panzoom/issues/630#issuecomment-1419893403
+      // https://github.com/timmywil/panzoom/issues/564#issuecomment-832791748
+      // https://github.com/timmywil/panzoom/issues/555
+      // https://github.com/timmywil/panzoom/blob/7428761452cfb570a7ebf7e5d6d7cd18b1893ee2/src/panzoom.ts#L349
+
+      function convertClientPointToPanzoomViewport() {
+        // We receive a clientX and clientY from the event
+        // We need to convert this to a point relative to the Panzoom viewport
+        // This is because Panzoom uses the viewport as its origin
+        // We can do this by using the Panzoom instance's getBoundingClientRect method
+        const { el: viewport, rect: viewportRect } =
+          getPanzoomElement('viewport')
+        if (!viewport) return { x: 0, y: 0 }
+
+        // We need to subtract the Panzoom viewport's offset from the event's X/Y
+        // We calculate all the size outside the Panzoom Viewport and subtract it from the event's X/Y
+        const rootElement = document.body
+        const rootRect = rootElement.getBoundingClientRect()
+        // rootRect.height = rootRect.height - viewportRect.height
+        // rootRect.width = rootRect.width - viewportRect.width
+
+        console.log(rootElement, viewport)
+
+        console.log(rootRect.height, viewportRect.height)
+
+        const x = event.clientX - (rootRect.width - viewportRect.width)
+        const y = event.clientY - (rootRect.height - viewportRect.height)
+
+        return { x, y }
+      }
+
+      // const scale = instance.getScale()
+      // const toScale = scale * Math.exp(wheel / 3)
+      // const toScale = scale * Math.exp(wheel / 30)
+
+      // Calculate the new zoom level based on the wheel delta
+      // const delta = event.deltaY || event.detail || event.wheelDelta
+      // const delta =
+      //   event.deltaY === 0 && event.deltaX ? event.deltaX : event.deltaY
+
+      // const zoomDelta = delta ? delta / 10000 : 0 // TODO: Make the value smaller to zoom faster
+      // const zoomLevel = panzoomInstance.value?.getScale() + zoomDelta
+
+      // Calculate the center point of the viewport
+      const { el: viewport, rect: viewportRect } = getPanzoomElement('viewport')
+      const { el: container, rect: containerRect } =
+        getPanzoomElement('container')
+      if (!viewport || !container) return false
+
+      ////////////////
+
+      // Calculate the zoom scale
+      const delta = Math.max(-1, Math.min(1, event.deltaY))
+      // const zoomScale = Math.pow(1.2, delta)
+      const prevScale = instance.getScale()
+      let newScale = prevScale + delta / 100
+      newScale = Math.max(newScale, minScale) // Ensure the scale never goes below 0.001
+
+      // const deltaX =
+      //   (event.clientX - container.offsetLeft) * (1 / prevScale - 1 / newScale)
+      // const deltaY =
+      //   (event.clientY - container.offsetTop) * (1 / prevScale - 1 / newScale)
+      // const newX = instance.getPan().x - deltaX
+      // const newY = instance.getPan().y - deltaY
+      const currPan = {
+        x: instance.getPan().x,
+        y: instance.getPan().y,
+      }
+
+      // calculate the new pan position to keep the mouse centered
+      const zoomFactor = newScale / prevScale
+      const mouse = {
+        x: event.clientX,
+        y: event.clientY,
+      }
+
+      // const offset = {
+      //   x: mouse.x - containerRect.left - currPan.x * prevScale,
+      //   y: mouse.y - containerRect.top - currPan.y * prevScale,
+      // }
+      // const newPan = {
+      //   x: currPan.x - offset.x * delta,
+      //   y: currPan.y - offset.y * delta,
+      // }
+
+      // const offsetX = mouseOffset.x - viewport.offsetWidth / 2
+      // const offsetY = mouseOffset.y - viewport.offsetHeight / 2
+      // const panX =
+      //   instance.getPan().x -
+      //   offsetX * (newScale / prevScale - 1) +
+      //   ((container.offsetWidth - viewport.offsetWidth) / 2) *
+      //     (newScale / prevScale)
+      // const panY = instance.getPan().y - offsetY * (newScale / prevScale - 1)
+
+      // `focal` is a low-level option for focusing in on a point of the element,
+      // not relative to the parent dimensions.
+      // But zooming the way we usually think about it is often relative to parent dimensions
+      // and not the element, which is why Panzoom has the zoomToPoint method to make things easier.
+      // Setting the focal to the existing transform doesn't work, as those numbers aren't really related.
+      // Original `focal` implementation: https://github.com/timmywil/panzoom/blob/7428761452cfb570a7ebf7e5d6d7cd18b1893ee2/src/panzoom.ts#LL401C5-L404C6
+      // This assumes the transform-origin is 50%,50%
+      // In our case, the transform-origin is 0,0
+      // const focal = {
+      //   x: (mouse.x / viewportRect.width) * (viewportRect.width * newScale),
+      //   y: (mouse.y / viewportRect.height) * (viewportRect.height * newScale),
+      // }
+
+      ///////////////
+      // const viewportCenter = {
+      //   x: viewportRect.width / 2,
+      //   y: viewportRect.height / 2,
+      // }
+      // const containerCenter = {
+      //   x: containerRect.width / 2,
+      //   y: containerRect.height / 2,
+      // }
+      // const focal = {
+      //   x: (mouse.x / viewportCenter.x) * (containerCenter.x * newScale),
+      //   y: (mouse.y / viewportCenter.y) * (containerCenter.y * newScale),
+      // }
+      ///////////////
+      // const mouseOffset = {
+      //   x: mouse.x - containerRect.left - containerRect.width / 2,
+      //   y: mouse.y - containerRect.top - containerRect.height / 2,
+      // }
+
+      // console.log(container)
+      console.log(mouse.x - containerRect.left, mouse.y - containerRect.top)
+
+      const mouseOffset = {
+        x: mouse.x - containerRect.left - containerRect.width / 2,
+        y: mouse.y - containerRect.top - containerRect.height / 2,
+      }
+      // console.log('mouseOffset', mouseOffset)
+
+      // Calculate the focal point relative to the container element
+      // Convert the mouse point from it's position over the
+      // effective area before the scale to the position
+      // over the effective area after the scale.
+      const focal = {
+        x: (mouse.x - mouseOffset.x) * prevScale,
+        y: (mouse.y - mouseOffset.y) * prevScale,
+      }
+
+      // The difference between the point after the scale and the point before the scale
+      // plus the current translation after the scale
+      // neutralized to no scale (as the transform scale will apply to the translation)
+      const focal2 = {
+        x:
+          (focal.x / newScale - focal.x / prevScale + currPan.x * newScale) /
+          newScale,
+        y:
+          (focal.y / newScale - focal.y / prevScale + currPan.y * newScale) /
+          newScale,
+      }
+
+      // const focal = {
+      //   x: (viewportRect.width / 2 - mouseOffset.x) * newScale,
+      //   y: (viewportRect.height / 2 - mouseOffset.y) * newScale,
+      // }
+
+      instance.zoom(newScale, {
+        animate: true,
+        focal: focal,
+      })
+
+      // instance.pan(newPan.x, newPan.y, {
+      //   animate: true,
+      //   relative: true,
+      // })
+
+      // Pan relative to the current position
+      // instance.pan(newPan.x, newPan.y, { relative: true })
+      // instance.pan(newPan.x, newPan.y)
+
+      const table = {
+        scale: {
+          prev: prevScale,
+          new: newScale,
+        },
+        mouseX: {
+          prev: mouse.x,
+          new: mouseOffsetX,
+        },
+        mouseY: {
+          prev: mouse.y,
+          new: mouseOffsetY,
+        },
+        panX: {
+          prev: currPan.x,
+          new: newPanX,
+        },
+        panY: {
+          prev: currPan.y,
+          new: newPanY,
+        },
+      }
+
+      console.table(table)
+
+      ////////////////
+
+      // // Get the current x, y, and scale
+      // const { x: currX, y: currY } = instance.getPan()
+      // const currScale = instance.getScale()
+
+      // // Get the position and dimensions of the container element
+      // const left = container.offsetLeft
+      // const top = container.offsetTop
+      // const width = container.offsetWidth
+      // const height = container.offsetHeight
+
+      // // Get the position of the mouse in the viewport
+      // const mouseX = event.clientX
+      // const mouseY = event.clientY
+
+      // // Calculate the new scale based on the wheel delta
+      // // Normalize to deltaX in case shift modifier is used on Mac
+      // const delta =
+      //   event.deltaY === 0 && event.deltaX ? event.deltaX : event.deltaY
+      // const zoomLevel = delta / 1000
+      // const newScale = currScale + zoomLevel
+
+      // // Get the size of the viewport element
+      // const viewportWidth = viewport.clientWidth
+      // const viewportHeight = viewport.clientHeight
+
+      // // Calculate the difference between the current mouse position and the center of the viewport
+      // const diffX = (viewportWidth / 2 - currX - event.clientX) / currScale
+      // const diffY = (viewportHeight / 2 - currY - event.clientY) / currScale
+
+      // // Calculate the new x and y position of the container element
+      // const newLeft = container.offsetLeft - diffX * newScale
+      // const newTop = container.offsetTop - diffY * newScale
+
+      // // Pan and zoom to the new position and scale
+      // instance.pan(newLeft, newTop)
+      // instance.zoom(newScale, { animate: true })
+
+      ////////////////
+
+      /////////
+      // const targetX = event.clientX - viewport.offsetLeft
+      // const targetY = event.clientY - viewport.offsetTop
+      // const currentPan = panzoomInstance.value.getPan()
+      // const viewportX =
+      //   (targetX - currentPan.x) / panzoomInstance.value.getScale()
+      // const viewportY =
+      //   (targetY - currentPan.y) / panzoomInstance.value.getScale()
+      /////////
+
+      // instance.zoomToPoint(
+      //   zoomLevel,
+      //   {
+      //     clientX: viewportX,
+      //     clientY: viewportY,
+      //   },
+      //   { animate: true, transformOrigin: { x: 0, y: 0 } }
+      // )
+
+      // Adjust the pan position to keep the zoom centered on the mouse position
+      // instance.pan(offsetLeft, offsetTop)
+
+      // instance.zoom(toScale)
+      // instance.pan(x, y)
     } else {
       // Allow trackpads to pan using two fingers
       const currentPan = instance.getPan()
@@ -263,18 +609,20 @@ function fitToScreen() {
 
 <style lang="scss" scoped>
 .panzoom-container {
-  // position: absolute;
-  // overflow: hidden;
-  // outline: none;
+  position: relative !important;
   height: 100%;
   width: 100%;
-  position: relative;
-  // position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
 }
 
+.panzoom-inner {
+  position: relative; // Important
+  display: inline-block;
+  overflow: visible;
+}
+
 #parent {
   height: auto;
   width: auto;
@@ -316,16 +664,26 @@ function fitToScreen() {
 
   // Nested debugger
   .dev-visual-debugger {
+    box-shadow: 0 0 0 8px green;
+
     // Vertical line
     &:before {
+      position: absolute;
+      width: 50%;
+      z-index: 100;
+      height: 100%;
       left: 50%;
-      border-left: 1px solid green;
+      border-left: 5px solid green;
     }
 
     // Horizonal line
     &:after {
+      position: absolute;
+      width: 100%;
+      z-index: 100;
+      height: 50%;
       top: 50%;
-      border-top: 1px solid green;
+      border-top: 5px solid green;
     }
   }
 }
diff --git a/app/src/renderer/components/panzoom/panzoomFns.ts b/app/src/renderer/components/panzoom/panzoomFns.ts
new file mode 100644
index 00000000..69dac787
--- /dev/null
+++ b/app/src/renderer/components/panzoom/panzoomFns.ts
@@ -0,0 +1,396 @@
+// The CSS classes
+
+import Panzoom, { PanzoomObject } from '@panzoom/panzoom'
+
+// TODO: Add tests to make sure these don't break
+const panzoomContainer = '.panzoom-container'
+const panzoomChild = '.panzoom-inner'
+const zoomPadding = 0.25
+export const minScale = 0.001
+
+export function getPanzoomElement(name: 'viewport' | 'container') {
+  const viewport = document.querySelector(panzoomContainer) as HTMLElement
+  if (!viewport) {
+    console.error('No container')
+    return {}
+  }
+  // Calculate the position of the element relative to the viewport container
+  const viewportRect = viewport.getBoundingClientRect()
+
+  // Get the full size of the artboards container (panzoomChild)
+  const container = document.querySelector(panzoomChild) as HTMLElement
+  if (!container) return {}
+  const containerRect = container.getBoundingClientRect()
+
+  let element: HTMLElement
+  let elementRect: DOMRect
+
+  if (name === 'container') {
+    element = container
+    elementRect = containerRect
+  } else {
+    element = viewport
+    elementRect = viewportRect
+  }
+
+  // Always return an HTML Element and a bounding rectangle
+  return {
+    el: element,
+    rect: elementRect,
+  }
+}
+
+/**
+ * Returns the x, y, zoom for the initial app startup
+ */
+export function initialPanZoom() {
+  // Calculate the zoom to fit all artboards
+  const zoom = calculateZoomToFitAll()
+
+  // Pan
+  // Old calculation: https://github.com/reflex-app/reflex/blob/42b07e33cbed8404d60749c29f0ed5f04a412184/app/src/renderer/components/panzoom/panzoomFns.ts#L23
+  const { x: panX, y: panY } = getViewportCenterCoordinates(zoom)
+
+  // center child element within viewport
+  return {
+    x: panX,
+    y: panY,
+    zoom: zoom,
+  }
+}
+
+/**
+ * Programmatically centers an element in the viewport
+ */
+export function centerOnElement(
+  element: HTMLElement,
+  options: { instance: any }
+) {
+  // Get the position and dimensions of the element relative to the viewport.
+  // Then you can calculate the center point of the element by adding half of the width and height to its top-left position
+  // Then subtract the position of the parent element to get the center relative to its parent.
+
+  const { el: parent, rect: parentRect } = getPanzoomElement('viewport')
+  if (!parent) {
+    console.error('No container')
+    return {}
+  }
+  // Calculate the position of the element relative to the parent container
+
+  // Get the full size of the artboards container (panzoomChild)
+  const { el: container, rect: containerRect } = getPanzoomElement('container')
+  if (!container) return false
+
+  // Get the element's bounding rectangle relative to the viewport
+  const child = element
+  const childRect = child.getBoundingClientRect()
+
+  // console.log('Test', {
+  //   parent: parent,
+  //   container: container,
+  //   child: child,
+  // })
+
+  // Current settings
+  // TODO: Get the current zoom level
+  // const zoom = options.instance.getScale()
+  const zoom = getZoomToFitElement(child)
+  console.log('Zoom', zoom)
+  if (!zoom) return false
+
+  // Get the viewport dimensions in pixels
+  const viewportWidth = parent.offsetWidth
+  const viewportHeight = parent.offsetHeight
+
+  const containerOffsetLeft = child.offsetLeft * zoom
+  const containerOffsetTop = child.offsetTop * zoom
+  console.log('offset', containerOffsetLeft, containerOffsetTop)
+
+  console.log('viewportWidth:', viewportWidth)
+  console.log('viewportHeight:', viewportHeight)
+  console.log('containerOffsetLeft:', containerOffsetLeft)
+  console.log('containerOffsetTop:', containerOffsetTop)
+
+  // Calculate the center point of the viewport, adjusted for the container offset
+  // Factor in the zoom level
+  const viewportCenterX = (viewportWidth / 2 - containerOffsetLeft) / zoom
+  const viewportCenterY = (viewportHeight / 2 - containerOffsetTop) / zoom
+
+  console.log('viewportCenterX:', viewportCenterX)
+  console.log('viewportCenterY:', viewportCenterY)
+
+  // Set the position of the element to the adjusted center point of the viewport
+  const elementWidth = child.offsetWidth
+  const elementHeight = child.offsetHeight
+
+  console.log('elementWidth:', elementWidth)
+  console.log('elementHeight:', elementHeight)
+
+  // Final position
+  const x = viewportCenterX - elementWidth / 2
+  const y = viewportCenterY - elementHeight / 2
+
+  console.log('x:', x)
+  console.log('y:', y)
+
+  // Normally, we pan relative to the container
+  // But we want to pan relative to a specific element, so we can
+  // set our own transform values to be more specific
+  // This works... but it would be better to use pan() and zoom()
+  // options.instance.setStyle(
+  //   'transform',
+  //   `scale(${zoom}) translate(${x}px, ${y}px)`
+  // )
+
+  // Perform the panning & zoom
+  options.instance.pan(x, y)
+  options.instance.zoom(zoom)
+}
+
+/**
+ * This will get coordinates to place the container at the top-left of the viewport
+ */
+export function getCoordinatesTopLeft(
+  zoom: number,
+  options?: { instance: PanzoomObject }
+) {
+  let scale
+
+  // Set zoom
+  scale = zoom ? zoom : options?.instance.getScale()
+
+  console.log('scale', scale)
+
+  const { el: viewport, rect: viewportRect } = getPanzoomElement('viewport')
+  const { el: container, rect: containerRect } = getPanzoomElement('container')
+
+  if (!viewport || !container) return {}
+
+  // Get the viewport dimensions in pixels
+  const viewportWidth = viewport.offsetWidth
+  const viewportHeight = viewport.offsetHeight
+  console.log(viewportHeight, viewportWidth)
+
+  // Get the offset from the container element
+  const containerOffsetLeft = container.offsetLeft * scale
+  const containerOffsetTop = container.offsetTop * scale
+
+  // Calculate the center point of the viewport, adjusted for the container offset
+  // Factor in the zoom level
+  const viewportCenterX = viewportWidth / 2 - containerOffsetLeft
+  const viewportCenterY = viewportHeight / 2 - containerOffsetTop
+
+  // Final position
+  const containerWidth = Math.min(container.offsetWidth, viewportWidth)
+  const containerHeight = Math.min(container.offsetHeight, viewportHeight)
+  const x = viewportCenterX - containerWidth / 2
+  const y = viewportCenterY - containerHeight / 2
+
+  const offsetX = (viewportWidth - containerWidth) / 2
+  const offsetY = (viewportHeight - containerHeight) / 2
+
+  const finalX = x + offsetX
+  const finalY = y + offsetY
+
+  console.log('x:', x)
+  console.log('y:', y)
+
+  return { x: finalX, y: finalY }
+}
+
+/**
+ * Get the XY coordinates at the center of the viewport(container)
+ * Useful for centering all artboards in the viewport
+ */
+export function getViewportCenterCoordinates(
+  zoom: number,
+  options?: { instance: PanzoomObject }
+) {
+  let scale
+
+  // Set zoom
+  scale = zoom ? zoom : options?.instance.getScale()
+
+  const { el: viewport } = getPanzoomElement('viewport')
+  const { el: container } = getPanzoomElement('container')
+
+  if (!viewport || !container) return {}
+
+  // Get the viewport dimensions in pixels
+  const viewportWidth = viewport.offsetWidth
+  const viewportHeight = viewport.offsetHeight
+
+  // Get the offset from the container element
+  const containerOffsetLeft = container.offsetLeft * scale
+  const containerOffsetTop = container.offsetTop * scale
+
+  // Calculate the center point of the viewport, adjusted for the container offset
+  const viewportCenterX = (viewportWidth / 2 + containerOffsetLeft) / scale
+  const viewportCenterY = (viewportHeight / 2 + containerOffsetTop) / scale
+
+  // Calculate the container dimensions, scaled to the current zoom level
+  // NOTE: We don't need to calculate scale here
+  const containerWidth = container.offsetWidth
+  const containerHeight = container.offsetHeight
+
+  // Calculate the position of the container to be centered on the viewport center point
+  const x = viewportCenterX - containerWidth / 2
+  const y = viewportCenterY - containerHeight / 2
+
+  return { x: x, y: y }
+}
+
+/**
+ * Returns the X, Y coordinates of an element
+ * relative to the inner Panzoom container.
+ * Can use these coordinates with panzoom.pan()
+ */
+function getElementCoordinates(e: HTMLElement, zoom: number, options) {
+  let scale
+
+  // Set zoom
+  scale = zoom ? zoom : options?.instance.getScale()
+
+  console.log('scale', scale)
+
+  const { el: viewport, rect: viewportRect } = getPanzoomElement('viewport')
+  const { el: container, rect: containerRect } = getPanzoomElement('container')
+  const child = e
+
+  if (!viewport || !container) {
+    console.error('No parent or container element found')
+    return { x: 0, y: 0 }
+  }
+
+  const containerOffsetLeft = containerRect.left - viewport.offsetLeft
+  const containerOffsetTop = containerRect.top - viewport.offsetTop
+
+  // Calculate the center coordinates of the "container" element, accounting for the zoom/scale factor
+  const containerCenterX =
+    (containerOffsetLeft + container.offsetWidth / 2) * scale
+  const containerCenterY =
+    (containerOffsetTop + container.offsetHeight / 2) * scale
+
+  // Calculate the center coordinates of the "child" element relative to the "container" element, accounting for the zoom/scale factor
+  const childCenterX = (child.offsetWidth / 2) * scale
+  const childCenterY = (child.offsetHeight / 2) * scale
+
+  // Calculate the final center coordinates of the "child" element, accounting for the relative positioning and zoom/scale factor
+  const finalCenterX = containerCenterX + childCenterX
+  const finalCenterY = containerCenterY + childCenterY
+
+  return {
+    x: finalCenterX,
+    y: finalCenterY,
+  }
+}
+
+/**
+ * Returns the zoom scale needed to fit a specific element (e.g. an <Artboard>) in the viewport
+ */
+function getZoomToFitElement(e: HTMLElement) {
+  const { el: viewport } = getPanzoomElement('viewport')
+  if (!viewport) {
+    console.error('No container')
+    return 1
+  }
+
+  const { el: container, rect: containerRect } = getPanzoomElement('container')
+  if (!container) {
+    console.error('No container')
+    return 1
+  }
+
+  const child = e
+
+  // Calculate the zoom scale based on the longer side of the child element
+  const widthRatio =
+    viewport.offsetWidth / (child.offsetWidth + child.offsetWidth * zoomPadding)
+  const heightRatio =
+    viewport.offsetHeight /
+    (child.offsetHeight + child.offsetHeight * zoomPadding)
+
+  // If the child height is greater than the viewport height, calculate the zoom scale based on the child height
+  const maxHeightRatio =
+    viewport.offsetHeight /
+    (child.offsetHeight +
+      child.offsetHeight *
+        zoomPadding *
+        (viewport.offsetWidth / child.offsetWidth))
+  const aspectRatio = child.offsetWidth / child.offsetHeight
+  const maxAdjustedHeightRatio =
+    viewport.offsetHeight /
+    (child.offsetHeight +
+      (child.offsetHeight *
+        zoomPadding *
+        Math.sqrt(viewport.offsetWidth / child.offsetWidth)) /
+        aspectRatio)
+
+  // Adjust the zoom ratio based on the aspect ratio of the child element
+  const zoom = Math.min(
+    widthRatio,
+    heightRatio,
+    maxHeightRatio / aspectRatio,
+    maxAdjustedHeightRatio
+  )
+
+  // Return
+  return zoom
+}
+
+/**
+ * Returns a zoom factor which would fit all the current artboards within the viewport
+ */
+export function calculateZoomToFitAll(): number {
+  // We first calculate the available width and height for the container, and the aspect ratio of the container. We then calculate the zoom level based on the shorter side of the container and the maximum available width and height.
+  // Next, we check if the container is wider than the viewport, or taller than the viewport, or both. In each case, we adjust the zoom level based on the appropriate dimension (width or height or the larger dimension).
+  // Finally, we adjust the position of the container to keep it centered within the viewport, and return the calculated zoom level.
+  const { el: viewport } = getPanzoomElement('viewport')
+  if (!viewport) {
+    console.error('No container')
+    return 1
+  }
+
+  const { el: container, rect: containerRect } = getPanzoomElement('container')
+  if (!container) {
+    console.error('No container')
+    return 1
+  }
+
+  // Calculate the available width and height for the container
+  const maxWidth = viewport.offsetWidth * (1 - zoomPadding)
+  const maxHeight = viewport.offsetHeight * (1 - zoomPadding)
+
+  // Calculate the zoom scale based on the shorter side of the container and the maximum available width and height
+  let zoom = Math.min(
+    maxWidth / container.offsetWidth,
+    maxHeight / container.offsetHeight
+  )
+
+  // If the container is wider than the viewport, adjust the zoom scale based on the width of the container
+  if (container.offsetWidth > maxWidth && container.offsetHeight <= maxHeight) {
+    zoom = maxWidth / container.offsetWidth
+  }
+
+  // If the container is taller than the viewport, adjust the zoom scale based on the height of the container
+  if (container.offsetHeight > maxHeight && container.offsetWidth <= maxWidth) {
+    zoom = maxHeight / container.offsetHeight
+  }
+
+  // If the container is both wider and taller than the viewport, adjust the zoom scale based on the larger dimension (width or height) of the container
+  if (container.offsetWidth > maxWidth && container.offsetHeight > maxHeight) {
+    if (container.offsetWidth / maxWidth > container.offsetHeight / maxHeight) {
+      zoom = maxWidth / container.offsetWidth
+    } else {
+      zoom = maxHeight / container.offsetHeight
+    }
+  }
+
+  if (zoom <= minScale) {
+    console.warn(
+      `Zoom level calculated (${zoom}) would exceed min scale (${minScale}). Using min scale instead.`
+    )
+  }
+
+  return zoom
+}
diff --git a/app/src/renderer/layouts/default.vue b/app/src/renderer/layouts/default.vue
index 522e42df..70174dea 100644
--- a/app/src/renderer/layouts/default.vue
+++ b/app/src/renderer/layouts/default.vue
@@ -1,43 +1,38 @@
 <template>
   <div class="container">
-    <ToolBar />
     <nuxt />
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { ipcRenderer } from 'electron' // TODO Migrate to @electron/remote
 import isElectron from 'is-electron'
-import ToolBar from '@/components/ToolBar'
+
 import remote from '@electron/remote'
+import { onMounted, computed, ref } from 'vue'
 
-export default {
-  components: {
-    ToolBar,
-  },
-  mounted() {
-    // TODO: get app version
-    // console.info(`Version: ${remote.app.getVersion()}`)
+onMounted(() => {
+  // TODO: get app version
+  // console.info(`Version: ${remote.app.getVersion()}`)
 
-    // Global listeners
-    if (isElectron()) {
-      ipcRenderer.on('menu_reset-app', () => {
-        if (
-          confirm(
-            `Are you sure you want to reset all data and settings? Click "OK" to reset.`
-          )
-        ) {
-          window.localStorage.clear()
+  // Global listeners
+  if (isElectron()) {
+    ipcRenderer.on('menu_reset-app', () => {
+      if (
+        confirm(
+          `Are you sure you want to reset all data and settings? Click "OK" to reset.`
+        )
+      ) {
+        window.localStorage.clear()
 
-          setTimeout(() => {
-            // TODO: replace this with IPC
-            remote.getCurrentWindow().reload()
-          }, 150)
-        }
-      })
-    }
-  },
-}
+        setTimeout(() => {
+          // TODO: replace this with IPC
+          remote.getCurrentWindow().reload()
+        }, 150)
+      }
+    })
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/renderer/pages/index.vue b/app/src/renderer/pages/index.vue
index 1e9bf81d..5548f96d 100644
--- a/app/src/renderer/pages/index.vue
+++ b/app/src/renderer/pages/index.vue
@@ -1,9 +1,15 @@
 <template>
   <div id="main-view">
+    <ToolBar ref="toolbarElement" />
     <DevModeHud />
     <SidePanel />
     <Screenshots />
     <Panzoom>
+      <!-- :style="{
+        // height: `calc(100% - ${toolbarHeight}px)`,
+        height: '100%',
+        width: '100%',
+      }" -->
       <Artboards />
     </Panzoom>
   </div>
@@ -17,11 +23,16 @@ import Screenshots from '@/components/Screenshot/index.vue'
 import Artboards from '@/components/Screens/Artboards.vue'
 import useEventHandler from '@/components/Screens/useEventHandler'
 import DevModeHud from '~/components/DevModeHud.vue'
+import ToolBar from '~/components/ToolBar/index.vue'
 
 const { init } = useEventHandler() // init event handling
 
+const toolbarElement = ref() // Template Ref
+const toolbarHeight = ref()
+
 onMounted(() => {
   init() // initialize
+  toolbarHeight.value = toolbarElement.value.$el.offsetHeight
 })
 </script>