diff --git a/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
index 87826b32d38..05e8d1e788f 100644
--- a/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx
@@ -7,7 +7,6 @@ import { suffixWithLimit } from 'components/interfaces/SQLEditor/SQLEditor.utils
 import Results from 'components/interfaces/SQLEditor/UtilityPanel/Results'
 import { BarChart, Bar, XAxis, CartesianGrid } from 'recharts'
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
-import { Rnd } from 'react-rnd'
 import { Admonition } from 'ui-patterns'
 import useNewQuery from 'components/interfaces/SQLEditor/hooks'
 
@@ -75,31 +74,8 @@ const SqlSnippetWrapper = ({ sql, isLoading, readOnly = false }: SqlSnippetWrapp
   formatted = formatted.replace(/--\s*props:\s*\{[^}]+\}/, '').trim()
   console.log('props:', propsMatch, title, propsMatch)
 
-  const handleDragStart = useCallback(
-    (e: React.DragEvent) => {
-      e.dataTransfer.setData(
-        'text/plain',
-        JSON.stringify({
-          props: {
-            id: `sql-snippet-${Math.random().toString(36).substr(2, 9)}`,
-            title,
-            sql: formatted,
-            isChart: props.isChart,
-            xAxis: props.xAxis,
-            yAxis: props.yAxis,
-          },
-        })
-      )
-    },
-    [title, formatted, props.isChart, props.xAxis, props.yAxis]
-  )
-
   return (
-    <div
-      draggable
-      onDragStart={handleDragStart}
-      className="-mx-8 my-3 mt-2 border-b overflow-hidden"
-    >
+    <div className="-mx-8 my-3 mt-2 border-b overflow-hidden">
       <SqlCard
         sql={formatted}
         isChart={props.isChart}
diff --git a/apps/studio/package.json b/apps/studio/package.json
index 197d67afd1c..2250f650732 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -104,7 +104,6 @@
     "react-inlinesvg": "^4.0.4",
     "react-intersection-observer": "^9.5.3",
     "react-markdown": "^8.0.3",
-    "react-rnd": "^10.4.13",
     "react-simple-maps": "4.0.0-beta.6",
     "react-tracked": "^1.7.11",
     "react-use": "^17.5.0",
diff --git a/apps/studio/pages/project/[ref]/canvas/index.tsx b/apps/studio/pages/project/[ref]/canvas/index.tsx
deleted file mode 100644
index f1bb550fbd0..00000000000
--- a/apps/studio/pages/project/[ref]/canvas/index.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import React, { useEffect, useCallback, useRef } from 'react'
-import { useRouter } from 'next/router'
-import { create } from 'zustand'
-import { Rnd } from 'react-rnd'
-import { Button } from 'ui'
-import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout/ProjectLayout'
-import { SqlCard } from 'components/ui/AIAssistantPanel/SqlSnippet'
-import type { NextPageWithLayout } from 'types'
-
-const CanvasPage: NextPageWithLayout = () => {
-  return <Component />
-}
-
-CanvasPage.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
-
-export default CanvasPage
-
-interface DraggedItem {
-  id: number
-  x: number
-  y: number
-  width: number
-  height: number
-  props: Record<string, any>
-}
-
-interface CanvasStore {
-  items: DraggedItem[]
-  addItem: (item: DraggedItem) => void
-  updateItemPosition: (id: number, x: number, y: number) => void
-  updateItemSize: (id: number, width: number, height: number) => void
-  setItems: (items: DraggedItem[]) => void
-}
-
-const useCanvasStore = create<CanvasStore>((set) => ({
-  items: [],
-  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
-  updateItemPosition: (id, x, y) =>
-    set((state) => ({
-      items: state.items.map((item) => (item.props.id === id ? { ...item, x, y } : item)),
-    })),
-  updateItemSize: (id, width, height) =>
-    set((state) => ({
-      items: state.items.map((item) => (item.props.id === id ? { ...item, width, height } : item)),
-    })),
-  setItems: (items) => set({ items }),
-}))
-
-const DraggableItem: React.FC<{ id: number; props: Record<string, any> }> = ({ id, props }) => {
-  const handleDragStart = (e: React.DragEvent) => {
-    e.dataTransfer.setData('text/plain', JSON.stringify({ id, props }))
-  }
-
-  return (
-    <div draggable onDragStart={handleDragStart} className="cursor-move">
-      <Button type="outline">Drag Me (ID: {id})</Button>
-    </div>
-  )
-}
-
-const Canvas: React.FC = () => {
-  const router = useRouter()
-  const items = useCanvasStore((state) => state.items)
-  const addItem = useCanvasStore((state) => state.addItem)
-  const updateItemPosition = useCanvasStore((state) => state.updateItemPosition)
-  const updateItemSize = useCanvasStore((state) => state.updateItemSize)
-  const setItems = useCanvasStore((state) => state.setItems)
-
-  const debounceTimer = useRef<NodeJS.Timeout>()
-
-  useEffect(() => {
-    const queryItems = router.query.items
-    if (queryItems && typeof queryItems === 'string') {
-      try {
-        const parsedItems = JSON.parse(decodeURIComponent(queryItems))
-        setItems(parsedItems)
-      } catch (error) {
-        console.error('Failed to parse items from URL:', error)
-      }
-    }
-  }, [router.query.items, setItems])
-
-  useEffect(() => {
-    if (items.length > 0) {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current)
-      }
-
-      debounceTimer.current = setTimeout(() => {
-        const queryString = encodeURIComponent(
-          JSON.stringify(
-            items.map((item) => ({
-              id: item.id,
-              x: item.x,
-              y: item.y,
-              width: item.width,
-              height: item.height,
-            }))
-          )
-        )
-        router.replace(
-          {
-            query: { ...router.query, items: queryString },
-          },
-          undefined,
-          { shallow: true }
-        )
-      }, 500) // 500ms debounce delay
-
-      return () => {
-        if (debounceTimer.current) {
-          clearTimeout(debounceTimer.current)
-        }
-      }
-    }
-  }, [items, router])
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    const data = JSON.parse(e.dataTransfer.getData('text/plain'))
-    const rect = e.currentTarget.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    addItem({ ...data, x, y, width: 400, height: 150 })
-  }
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault()
-  }
-
-  return (
-    <div
-      onDrop={handleDrop}
-      onDragOver={handleDragOver}
-      className="w-full h-full border-2 border-dashed border-gray-300 relative overflow-hidden"
-    >
-      {items.map((item) => (
-        <Rnd
-          className="bg shadow rounded-lg overflow-hidden"
-          key={item.props.id}
-          position={{ x: item.x, y: item.y }}
-          size={{ width: item.width, height: item.height }}
-          onDragStop={(e, d) => {
-            updateItemPosition(item.props.id, d.x, d.y)
-          }}
-          onResizeStop={(e, direction, ref, delta, position) => {
-            updateItemSize(item.props.id, parseFloat(ref.style.width), parseFloat(ref.style.height))
-            updateItemPosition(item.props.id, position.x, position.y)
-          }}
-        >
-          <SqlCard {...item.props} />
-        </Rnd>
-      ))}
-    </div>
-  )
-}
-
-function Component() {
-  return (
-    <div className="p-4 space-y-4 h-full w-full">
-      <Canvas />
-    </div>
-  )
-}
diff --git a/package-lock.json b/package-lock.json
index eb9735d9ac8..23d92343932 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1864,7 +1864,6 @@
         "react-inlinesvg": "^4.0.4",
         "react-intersection-observer": "^9.5.3",
         "react-markdown": "^8.0.3",
-        "react-rnd": "^10.4.13",
         "react-simple-maps": "4.0.0-beta.6",
         "react-tracked": "^1.7.11",
         "react-use": "^17.5.0",
@@ -36474,16 +36473,6 @@
         "safe-buffer": "^5.1.0"
       }
     },
-    "node_modules/re-resizable": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.0.tgz",
-      "integrity": "sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -36998,21 +36987,6 @@
         "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-rnd": {
-      "version": "10.4.13",
-      "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.13.tgz",
-      "integrity": "sha512-Vgbf0iihspcQ6nkaFhpOGWfmnuVbhkhoB0hBbYl8aRDA4horsQHESc4E1z7O/P27kFFjK2aqM0u5CGzfr9gEZA==",
-      "license": "MIT",
-      "dependencies": {
-        "re-resizable": "6.10.0",
-        "react-draggable": "4.4.6",
-        "tslib": "2.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0",
-        "react-dom": ">=16.3.0"
-      }
-    },
     "node_modules/react-simple-maps": {
       "version": "4.0.0-beta.6",
       "resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-4.0.0-beta.6.tgz",