diff --git a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts
index b2914a210..4846edd81 100644
--- a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts
+++ b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.css.ts
@@ -6,6 +6,20 @@ export const root = style({
   height: '100%',
 });
 
+export const dragPreview = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '8px 16px 8px 12px',
+  background: cssVarV2.layer.background.primary,
+  borderRadius: 4,
+  border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
+  fontSize: 14,
+});
+export const dragPreviewIcon = style({
+  fontSize: 24,
+});
+
 export const listViewRoot = style({
   padding: '0px 4px',
   width: '100%',
diff --git a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
index d405fbb74..cc03bdd53 100644
--- a/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
+++ b/packages/frontend/core/src/components/explorer/docs-view/doc-list-item.tsx
@@ -181,8 +181,10 @@ export const DocListItem = ({ ...props }: DocListItemProps) => {
         )}
       </WorkbenchLink>
       <CustomDragPreview>
-        <RawDocIcon id={props.docId} />
-        <RawDocTitle id={props.docId} />
+        <div className={styles.dragPreview}>
+          <RawDocIcon id={props.docId} className={styles.dragPreviewIcon} />
+          <RawDocTitle id={props.docId} />
+        </div>
       </CustomDragPreview>
     </>
   );