diff --git a/apps/studio/components/interfaces/App/FeaturePreview/InlineEditorPreview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/InlineEditorPreview.tsx
index 684a91ef02a..fa6dddae436 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/InlineEditorPreview.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/InlineEditorPreview.tsx
@@ -1,9 +1,17 @@
-import { Code } from 'lucide-react'
+import { BASE_PATH } from 'lib/constants'
+import Image from 'next/image'
 
 const InlineEditorPreview = () => {
   return (
-    <div className="space-y-2">
-      <p className="text-sm text-foreground-light">
+    <div>
+      <Image
+        src={`${BASE_PATH}/img/previews/inline-editor-preview.png`}
+        width={1296}
+        height={900}
+        alt="api-docs-side-panel-preview"
+        className="rounded border mb-4"
+      />
+      <p className="text-sm text-foreground-light mb-2">
         The inline editor allows you to quickly edit SQL queries directly in the interface without
         opening a new tab or window. This feature streamlines your workflow by providing immediate
         access to query editing capabilities wherever you see SQL code.
diff --git a/apps/studio/public/img/previews/inline-editor-preview.png b/apps/studio/public/img/previews/inline-editor-preview.png
new file mode 100644
index 00000000000..13e749e9770
Binary files /dev/null and b/apps/studio/public/img/previews/inline-editor-preview.png differ