diff --git a/.changeset/few-cougars-live.md b/.changeset/few-cougars-live.md
new file mode 100644
index 0000000000..43222a7f54
--- /dev/null
+++ b/.changeset/few-cougars-live.md
@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+Use custom editor labels for pages, layouts and API routes.
diff --git a/.changeset/thin-birds-brush.md b/.changeset/thin-birds-brush.md
new file mode 100644
index 0000000000..06cf5fec83
--- /dev/null
+++ b/.changeset/thin-birds-brush.md
@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+Use the workspace typescript version by default so you get Next.js specific typesafety!
diff --git a/cli/src/installers/index.ts b/cli/src/installers/index.ts
index 69c3479145..57281aae01 100644
--- a/cli/src/installers/index.ts
+++ b/cli/src/installers/index.ts
@@ -7,6 +7,7 @@ import { type PackageManager } from "~/utils/getUserPkgManager.js";
 import { dbContainerInstaller } from "./dbContainer.js";
 import { drizzleInstaller } from "./drizzle.js";
 import { dynamicEslintInstaller } from "./eslint.js";
+import { vscodeInstaller } from "./vscode.js";
 
 // Turning this into a const allows the list to be iterated over for programatically creating prompt options
 // Should increase extensability in the future
@@ -19,6 +20,7 @@ export const availablePackages = [
   "envVariables",
   "eslint",
   "dbContainer",
+  "vscode",
 ] as const;
 export type AvailablePackages = (typeof availablePackages)[number];
 
@@ -86,4 +88,8 @@ export const buildPkgInstallerMap = (
     inUse: true,
     installer: dynamicEslintInstaller,
   },
+  vscode: {
+    inUse: true,
+    installer: vscodeInstaller,
+  },
 });
diff --git a/cli/src/installers/vscode.ts b/cli/src/installers/vscode.ts
new file mode 100644
index 0000000000..d008857123
--- /dev/null
+++ b/cli/src/installers/vscode.ts
@@ -0,0 +1,7 @@
+import fs from "fs-extra";
+
+import { type Installer } from "~/installers/index.js";
+
+export const vscodeInstaller: Installer = ({ projectDir }) => {
+  fs.copySync("cli/template/extras/config/.vscode", projectDir + "/.vscode");
+};
diff --git a/cli/template/extras/config/.vscode/settings.json b/cli/template/extras/config/.vscode/settings.json
new file mode 100644
index 0000000000..acacff41ed
--- /dev/null
+++ b/cli/template/extras/config/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+  /**
+   * Makes sure you're using the TypeScript plugin that comes with Next.js
+   *
+   * @see
+   * https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin
+   */
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  /**
+   * Custom editor labels Makes it easy to distinguish between pages, layouts and API routes in
+   * Next.js
+   */
+  "workbench.editor.customLabels.enabled": true,
+  "workbench.editor.customLabels.patterns": {
+    "**/src/app/**/page.tsx": "${dirname} - Page",
+    "**/src/app/**/layout.tsx": "${dirname} - Layout",
+    "**/src/app/**/route.{ts,tsx}": "${dirname} - API"
+  }
+}