diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx b/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
index 06b10ecece6..426f978577e 100644
--- a/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
+++ b/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
@@ -38,7 +38,7 @@ export const Template: Story = () => {
             <div>
                 <h5>basic text</h5>
                 <TextCard
-                    className="react-grid-item min-h-60 min-w-[15rem]"
+                    className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
                     dashboardId={1}
                     textTile={makeTextTile('basic text')}
                 />
@@ -46,7 +46,7 @@ export const Template: Story = () => {
             <div>
                 <h5>markdown text</h5>
                 <TextCard
-                    className="react-grid-item min-h-60 min-w-[15rem]"
+                    className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
                     dashboardId={1}
                     textTile={makeTextTile('# a title \n\n **formatted** _text_')}
                 />
@@ -54,7 +54,7 @@ export const Template: Story = () => {
             <div>
                 <h5>Long text</h5>
                 <TextCard
-                    className="react-grid-item min-h-60 min-w-[15rem]"
+                    className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
                     style={{ height: '250px', width: '300px' }}
                     dashboardId={1}
                     textTile={makeTextTile(
@@ -65,7 +65,7 @@ export const Template: Story = () => {
             <div>
                 <h5>with resize handles</h5>
                 <TextCard
-                    className="react-grid-item min-h-60 min-w-[15rem]"
+                    className="react-grid-item react-draggable cssTransforms react-resizable min-h-60 min-w-[15rem]"
                     dashboardId={1}
                     showResizeHandles={true}
                     canResizeWidth={true}
@@ -76,7 +76,7 @@ export const Template: Story = () => {
             <div className="w-full" style={{ height: '200px' }}>
                 <h5>Large Card</h5>
                 <TextCard
-                    className="h-full w-full react-grid-item"
+                    className="h-full w-full react-grid-item react-draggable cssTransforms react-resizable"
                     dashboardId={1}
                     textTile={makeTextTile('basic text')}
                 />
diff --git a/frontend/src/scenes/dashboard/DashboardItems.scss b/frontend/src/scenes/dashboard/DashboardItems.scss
index 6e604e18bd3..574d5fdd3e6 100644
--- a/frontend/src/scenes/dashboard/DashboardItems.scss
+++ b/frontend/src/scenes/dashboard/DashboardItems.scss
@@ -14,11 +14,25 @@
     }
 }
 
+.react-grid-item.cssTransforms {
+    transition-property: transform;
+}
+
 .react-grid-item.resizing {
     z-index: 1;
     will-change: width, height;
 }
 
+.react-grid-item.react-draggable {
+    cursor: move;
+}
+
+.react-grid-item.react-draggable-dragging {
+    z-index: 105;
+    transition: none;
+    will-change: transform;
+}
+
 .react-grid-item.dropping {
     visibility: hidden;
 }
@@ -34,9 +48,41 @@
     transition: 100ms ease;
 }
 
+.react-resizable-hide > .react-resizable-handle {
+    display: none;
+}
+
 .react-grid-item {
     transition: all 100ms ease;
     transition-property: left, top;
+
+    & > .react-resizable-handle {
+        position: absolute;
+        right: -0.5rem;
+        bottom: -0.5rem;
+        z-index: 10;
+        width: 2rem;
+        height: 2rem;
+        cursor: se-resize;
+    }
+
+    & > .react-resizable-handle.react-resizable-handle-se {
+        cursor: se-resize;
+    }
+
+    & > .react-resizable-handle.react-resizable-handle-e {
+        top: 0;
+        bottom: 2rem;
+        height: auto;
+        cursor: ew-resize;
+    }
+
+    & > .react-resizable-handle.react-resizable-handle-s {
+        right: 2rem;
+        left: 0;
+        width: auto;
+        cursor: ns-resize;
+    }
 }
 
 // All dropdowns must be below top navigation
diff --git a/package.json b/package.json
index dace7cb92d9..de39b7c579e 100644
--- a/package.json
+++ b/package.json
@@ -152,10 +152,12 @@
         "rc-trigger": "^5.2.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-draggable": "^4.2.0",
         "react-grid-layout": "^1.3.0",
         "react-intersection-observer": "^9.5.3",
         "react-markdown": "^5.0.3",
         "react-modal": "^3.15.1",
+        "react-resizable": "^3.0.5",
         "react-shadow": "^20.3.0",
         "react-syntax-highlighter": "^15.5.0",
         "react-textarea-autosize": "^8.3.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d37c0c9def3..0afee1ac1d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -274,6 +274,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-draggable:
+    specifier: ^4.2.0
+    version: 4.4.5(react-dom@18.2.0)(react@18.2.0)
   react-grid-layout:
     specifier: ^1.3.0
     version: 1.3.4(react-dom@18.2.0)(react@18.2.0)
@@ -286,6 +289,9 @@ dependencies:
   react-modal:
     specifier: ^3.15.1
     version: 3.16.1(react-dom@18.2.0)(react@18.2.0)
+  react-resizable:
+    specifier: ^3.0.5
+    version: 3.0.5(react-dom@18.2.0)(react@18.2.0)
   react-shadow:
     specifier: ^20.3.0
     version: 20.4.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)