diff --git a/packages/language-server/src/ls-config.ts b/packages/language-server/src/ls-config.ts
index 49daa4564..b8ad15f8a 100644
--- a/packages/language-server/src/ls-config.ts
+++ b/packages/language-server/src/ls-config.ts
@@ -400,7 +400,8 @@ export class LSConfigManager {
                 config.suggest?.includeCompletionsForImportStatements ?? true,
             includeAutomaticOptionalChainCompletions:
                 config.suggest?.includeAutomaticOptionalChainCompletions ?? true,
-            includeCompletionsWithInsertText: true
+            includeCompletionsWithInsertText: true,
+            useLabelDetailsInCompletionEntries: true
         };
     }
 
diff --git a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
index 46d8e4efe..9ff99d725 100644
--- a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
+++ b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
@@ -455,6 +455,14 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
             ? TextEdit.replace(convertRange(snapshot, replacementSpan), insertText ?? label)
             : undefined;
 
+        const labelDetails =
+            comp.labelDetails ??
+            (comp.sourceDisplay
+                ? {
+                      description: ts.displayPartsToString(comp.sourceDisplay)
+                  }
+                : undefined);
+
         return {
             label,
             insertText,
@@ -463,6 +471,7 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
             // Make sure svelte component takes precedence
             sortText: isSvelteComp ? '-1' : comp.sortText,
             preselect: isSvelteComp ? true : comp.isRecommended,
+            labelDetails,
             textEdit,
             // pass essential data for resolving completion
             data: {
@@ -626,6 +635,15 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
             const { detail: itemDetail, documentation: itemDocumentation } =
                 this.getCompletionDocument(detail, is$typeImport);
 
+            // VSCode + tsserver won't have this pop-in effect
+            // because tsserver has internal APIs for caching
+            // TODO: consider if we should adopt the internal APIs
+            if (detail.sourceDisplay && !completionItem.labelDetails) {
+                completionItem.labelDetails = {
+                    description: ts.displayPartsToString(detail.sourceDisplay)
+                };
+            }
+
             completionItem.detail = itemDetail;
             completionItem.documentation = itemDocumentation;
         }
@@ -661,17 +679,19 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
 
     private getCompletionDocument(compDetail: ts.CompletionEntryDetails, is$typeImport: boolean) {
         const { sourceDisplay, documentation: tsDocumentation, displayParts, tags } = compDetail;
-        let detail: string = changeSvelteComponentName(ts.displayPartsToString(displayParts));
+        let parts = compDetail.codeActions?.map((codeAction) => codeAction.description) ?? [];
 
-        if (sourceDisplay) {
-            let importPath = ts.displayPartsToString(sourceDisplay);
-            if (is$typeImport) {
-                // Take into account Node16 moduleResolution
-                importPath = `'./$types${importPath.endsWith('.js') ? '.js' : ''}'`;
-            }
-            detail = `Auto import from ${importPath}\n${detail}`;
+        if (sourceDisplay && is$typeImport) {
+            const importPath = ts.displayPartsToString(sourceDisplay);
+
+            // Take into account Node16 moduleResolution
+            parts = parts.map((detail) =>
+                detail.replace(importPath, `'./$types${importPath.endsWith('.js') ? '.js' : ''}'`)
+            );
         }
 
+        parts.push(changeSvelteComponentName(ts.displayPartsToString(displayParts)));
+
         const markdownDoc = getMarkdownDocumentation(tsDocumentation, tags);
         const documentation: MarkupContent | undefined = markdownDoc
             ? { value: markdownDoc, kind: MarkupKind.Markdown }
@@ -679,7 +699,7 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
 
         return {
             documentation,
-            detail
+            detail: parts.filter(Boolean).join('\n\n')
         };
     }
 
diff --git a/packages/language-server/src/server.ts b/packages/language-server/src/server.ts
index 0391acf61..bd2b409cb 100644
--- a/packages/language-server/src/server.ts
+++ b/packages/language-server/src/server.ts
@@ -222,7 +222,10 @@ export function startServer(options?: LSOptions) {
                         // Svelte
                         ':',
                         '|'
-                    ]
+                    ],
+                    completionItem: {
+                        labelDetailsSupport: true
+                    }
                 },
                 documentFormattingProvider: true,
                 colorProvider: true,
diff --git a/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts b/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
index 8c47b2fe8..33ed44146 100644
--- a/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
+++ b/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
@@ -87,7 +87,8 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: ['.', ',', ';', '('],
                 preselect: undefined,
-                textEdit: undefined
+                textEdit: undefined,
+                labelDetails: undefined
             });
         });
 
@@ -113,7 +114,8 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: ['.', ',', ';', '('],
                 preselect: undefined,
-                textEdit: undefined
+                textEdit: undefined,
+                labelDetails: undefined
             });
         });
 
@@ -635,7 +637,7 @@ function test(useNewTransformation: boolean) {
 
             assert.strictEqual(
                 detail,
-                'Auto import from ../definitions\nfunction blubb(): boolean'
+                'Add import from "../definitions"\n\nfunction blubb(): boolean'
             );
 
             assert.strictEqual(
@@ -671,7 +673,7 @@ function test(useNewTransformation: boolean) {
 
             assert.strictEqual(
                 detail,
-                'Auto import from ../definitions\nfunction blubb(): boolean'
+                'Add import from "../definitions"\n\nfunction blubb(): boolean'
             );
 
             assert.strictEqual(
@@ -706,7 +708,7 @@ function test(useNewTransformation: boolean) {
 
             assert.strictEqual(
                 detail,
-                'Auto import from ../definitions\nfunction blubb(): boolean'
+                'Add import from "../definitions"\n\nfunction blubb(): boolean'
             );
 
             assert.strictEqual(
@@ -737,7 +739,7 @@ function test(useNewTransformation: boolean) {
 
             assert.strictEqual(
                 detail,
-                'Auto import from svelte\nfunction onMount(fn: () => any): void'
+                'Add import from "svelte"\n\nfunction onMount(fn: () => any): void'
             );
 
             assert.strictEqual(
@@ -842,7 +844,7 @@ function test(useNewTransformation: boolean) {
 
             assert.strictEqual(
                 detail,
-                'Auto import from ../imported-file.svelte\nclass ImportedFile'
+                'Add import from "../imported-file.svelte"\n\nclass ImportedFile'
             );
 
             assert.strictEqual(
@@ -880,7 +882,7 @@ function test(useNewTransformation: boolean) {
 
             assert.strictEqual(
                 detail,
-                'Auto import from ../imported-file.svelte\nclass ImportedFile'
+                'Add import from "../imported-file.svelte"\n\nclass ImportedFile'
             );
 
             assert.strictEqual(
@@ -1169,6 +1171,9 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: undefined,
                 preselect: undefined,
+                labelDetails: {
+                    description: '../definitions'
+                },
                 textEdit: {
                     newText: '{ blubb } from "../definitions";',
                     range: {
@@ -1227,6 +1232,7 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: ['.', ',', ';', '('],
                 preselect: undefined,
+                labelDetails: undefined,
                 textEdit: {
                     newText: '.toString',
                     range: {
@@ -1267,6 +1273,7 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 preselect: undefined,
                 insertText: undefined,
+                labelDetails: undefined,
                 commitCharacters: ['.', ',', ';', '('],
                 textEdit: {
                     newText: '@hi',
@@ -1410,7 +1417,10 @@ function test(useNewTransformation: boolean) {
 
             const { detail } = await completionProvider.resolveCompletion(document, item!);
 
-            assert.strictEqual(detail, 'Auto import from random-package2\nfunction foo(): string');
+            assert.strictEqual(
+                detail,
+                'Add import from "random-package2"\n\nfunction foo(): string'
+            );
         });
 
         // Hacky, but it works. Needed due to testing both new and old transformation