diff --git a/apps/guide/content/docs/legacy/interactions/images/modal-example.png b/apps/guide/content/docs/legacy/interactions/images/modal-example.png
index 9cee3d67d630..e63c9b3074be 100644
Binary files a/apps/guide/content/docs/legacy/interactions/images/modal-example.png and b/apps/guide/content/docs/legacy/interactions/images/modal-example.png differ
diff --git a/apps/guide/content/docs/legacy/interactions/images/modal-text-display-example.png b/apps/guide/content/docs/legacy/interactions/images/modal-text-display-example.png
new file mode 100644
index 000000000000..db81e63372ed
Binary files /dev/null and b/apps/guide/content/docs/legacy/interactions/images/modal-text-display-example.png differ
diff --git a/apps/guide/content/docs/legacy/interactions/modals.mdx b/apps/guide/content/docs/legacy/interactions/modals.mdx
index 4bdc32bc4a6f..5c09b7f37512 100644
--- a/apps/guide/content/docs/legacy/interactions/modals.mdx
+++ b/apps/guide/content/docs/legacy/interactions/modals.mdx
@@ -2,7 +2,7 @@
 title: Modals
 ---
 
-With modals you can create pop-up forms that allow users to provide you with formatted inputs through submissions. We'll cover how to create, show, and receive modal forms using discord.js!
+With modals you can create pop-up forms that allow users to provide you with formatted inputs through submissions. We'll cover how to create, show, and receive modals
 
 <Callout>
 	This page is a follow-up to the [interactions (slash commands) page](../slash-commands/advanced-creation). Please
@@ -14,8 +14,8 @@ With modals you can create pop-up forms that allow users to provide you with for
 Unlike message components, modals aren't strictly components themselves. They're a callback structure used to respond to interactions.
 
 <Callout>
-	You can have a maximum of five `ActionRowBuilder`s per modal builder, and one `TextInputBuilder` within an
-	`ActionRowBuilder`. Currently, you can only use `TextInputBuilder`s in modal action rows builders.
+	You can have a maximum of five `Label` or `Text Display` components per modal. Similarly a `Label` must only contain
+	one component.
 </Callout>
 
 To create a modal you construct a new `ModalBuilder`. You can then use the setters to add the custom id and title.
@@ -36,25 +36,15 @@ client.on(Events.InteractionCreate, async (interaction) => {
 
 <Callout>
 	The custom id is a developer-defined string of up to 100 characters. Use this field to ensure you can uniquely define
-	all incoming interactions from your modals!
+	all incoming interactions from your modals.
 </Callout>
 
-The next step is to add the input fields in which users responding can enter free-text. Adding inputs is similar to adding components to messages.
+The next step is to add a Modal components to the `modalBuilder`. Which users responding can enter free-text. Adding inputs is similar to adding components to messages.
 
 At the end, we then call `ChatInputCommandInteraction#showModal` to display the modal to the user.
 
-<Callout type="warn">
-If you're using typescript you'll need to specify the type of components your action row holds. This can be done by specifying the generic parameter in `ActionRowBuilder`:
-
-```diff
-- new ActionRowBuilder()
-+ new ActionRowBuilder<ModalActionRowComponentBuilder>()
-```
-
-</Callout>
-
 ```js
-const { ActionRowBuilder, Events, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
+const { Events, LabelBuilder, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
 
 client.on(Events.InteractionCreate, async (interaction) => {
 	if (!interaction.isChatInputCommand()) return;
@@ -63,29 +53,35 @@ client.on(Events.InteractionCreate, async (interaction) => {
 		// Create the modal
 		const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');
 
-		// Add components to modal
-
+		// [!code focus:31]
 		// Create the text input components
 		const favoriteColorInput = new TextInputBuilder()
 			.setCustomId('favoriteColorInput')
-			// The label is the prompt the user sees for this input
-			.setLabel("What's your favorite color?")
 			// Short means only a single line of text
 			.setStyle(TextInputStyle.Short);
 
 		const hobbiesInput = new TextInputBuilder()
 			.setCustomId('hobbiesInput')
-			.setLabel("What's some of your favorite hobbies?")
 			// Paragraph means multiple lines of text.
-			.setStyle(TextInputStyle.Paragraph);
+			.setStyle(TextInputStyle.Paragraph)
+			// Uninteractable text inside of the text input
+			.setPlaceholder('card games, films, books, etc.');
 
-		// An action row only holds one text input,
-		// so you need one action row per text input.
-		const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);
-		const secondActionRow = new ActionRowBuilder().addComponents(hobbiesInput);
+		// Creating labels for the text input components
+		const favoriteColorLabel = new LabelBuilder()
+			// The label is the prompt the user sees for this component
+			.setLabel("What's your favorite color?")
+			// Add the text input to the label
+			.setTextInputComponent(favoriteColorInput);
+
+		const hobbiesLabel = new LabelBuilder()
+			.setLabel("What's some of your favorite hobbies?")
+			// The description is a small text under the label and above the interactive component
+			.setDescription('Activities you like to participate in')
+			.setTextInputComponent(hobbiesInput);
 
-		// Add inputs to the modal
-		modal.addComponents(firstActionRow, secondActionRow);
+		// Add labels to the modal
+		modal.addLabelComponents(favoriteColorLabel, hobbiesLabel);
 
 		// Show the modal to the user
 		await interaction.showModal(modal); // [!code word:showModal]
@@ -93,40 +89,15 @@ client.on(Events.InteractionCreate, async (interaction) => {
 });
 ```
 
-Restart your bot and invoke the `/ping` command again. You should see a popup form resembling the image below:
+Restart your bot and invoke the `/ping` command again. You should see the modal as imaged below:
 
 ![Modal Example](./images/modal-example.png)
 
 <Callout type="warn">
-	Showing a modal must be the first response to an interaction. You cannot `defer()` or `deferUpdate()` then show a
+	Showing a modal must be the first response to an interaction. You cannot `deferReply()` or `deferUpdate()` then show a
 	modal later.
 </Callout>
 
-### Input styles
-
-Currently there are two different input styles available:
-
-- `Short`, a single-line text entry;
-- `Paragraph`, a multi-line text entry similar to the HTML `<textarea>`;
-
-### Input properties
-
-In addition to the `customId`, `label` and `style`, a text input can be customised in a number of ways to apply validation, prompt the user, or set default values via the `TextInputBuilder` methods:
-
-```js
-const input = new TextInputBuilder()
-	// set the maximum number of characters to allow
-	.setMaxLength(1_000)
-	// set the minimum number of characters required for submission
-	.setMinLength(10)
-	// set a placeholder string to prompt the user
-	.setPlaceholder('Enter some text!')
-	// set a default value to pre-fill the input
-	.setValue('Default')
-	// require a value in this input field
-	.setRequired(true);
-```
-
 ## Receiving modal submissions
 
 ### Interaction collectors
@@ -165,6 +136,7 @@ If the modal was shown from a `ButtonInteraction` or `StringSelectMenuInteractio
 ```js
 client.on(Events.InteractionCreate, async (interaction) => {
 	if (!interaction.isModalSubmit()) return;
+	// [!code focus:3]
 	if (interaction.customId === 'myModal') {
 		await interaction.reply({ content: 'Your submission was received successfully!' });
 	}
@@ -172,7 +144,7 @@ client.on(Events.InteractionCreate, async (interaction) => {
 ```
 
 <Callout>
-	If you're using typescript, you can use the `ModalSubmitInteraction#isFromMessage` typeguard, to make sure the
+	If you're using typescript, you can use the `ModalSubmitInteraction#isFromMessage` type guard, to make sure the
 	received interaction was from a `MessageComponentInteraction`.
 </Callout>
 
@@ -183,10 +155,89 @@ You'll most likely need to read the data sent by the user in the modal. You can
 ```js
 client.on(Events.InteractionCreate, (interaction) => {
 	if (!interaction.isModalSubmit()) return;
+	if (interaction.customId === 'myModal') {
+		await interaction.reply({ content: 'Your submission was received successfully!' });
 
-	// Get the data entered by the user
-	const favoriteColor = interaction.fields.getTextInputValue('favoriteColorInput');
-	const hobbies = interaction.fields.getTextInputValue('hobbiesInput');
-	console.log({ favoriteColor, hobbies });
+		// [!code focus:5]
+		// Get the data entered by the user
+		const favoriteColor = interaction.fields.getTextInputValue('favoriteColorInput');
+		const hobbies = interaction.fields.getTextInputValue('hobbiesInput');
+
+		console.log({ favoriteColor, hobbies });
+	}
 });
 ```
+
+## Modal Components
+
+Modals are built using components.
+
+<Callout>
+	Current supported component for modals are: - [Label](#label) - A layout component to add interactive components to
+	modals - [Text Display](#text-display) - A content component used to contain text
+</Callout>
+
+### Label
+
+A Layout component, labels are used to display a label and description ore interactive components in modals.
+
+<Callout type="warn">
+	`label` can be a max length of 45 characters `description` can be a max length of 100 characters
+</Callout>
+<Callout>
+	Labels need to have one interactive components. Current supported component for labels are: - [Text
+	Input](#text-input) - An interactive component allowing free form text input - [Select
+	Menus](../interactive-components/select-menus#using-select-menus-in-modals) - Interactive components allowing for
+	limiting user input to users, roles, channels, and preselected options
+</Callout>
+
+### Text Input
+
+### Input styles
+
+Currently there are two different input styles available:
+
+- `Short`, a single-line text entry
+- `Paragraph`, a multi-line text entry
+
+### Input properties
+
+In addition to the `customId` and `style`, a text input can be customised in a number of ways to apply validation, prompt the user, or set default values via the `TextInputBuilder` methods:
+
+```js
+const input = new TextInputBuilder()
+	// set the component id (this is not the custom id)
+	.setId(0)
+	// Set the maximum number of characters to allowed
+	.setMaxLength(1_000)
+	// Set the minimum number of characters required for submission
+	.setMinLength(10)
+	// Set a default value to pre-fill the text input
+	.setValue('Default')
+	// Require a value in this text input field (defaults to true)
+	.setRequired(true);
+```
+
+### Text Display
+
+Modals support adding a texts display. Unlike interactive components a text display is added to the modal builder, without being put in a label first.
+
+<Callout>
+	Adding text display components decrees the number of labels that can be added to the modal. The modal only has maximum
+	of five `Label` or `Text Display` components.
+</Callout>
+
+```js
+const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');
+
+// Set the content of the text display
+const text = new TextDisplayBuilder().setContent(
+	"## Important Information\nAccording to all known laws of aviation, there is no way a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyway because bees don't care what humans think is impossible.",
+);
+
+// Add the text display to the Modal
+modal.addTextDisplayComponents(text);
+```
+
+Below image is an example of a modal with only one text display in it:
+![Modal with on text display example](./images/modal-text-display-example.png)
diff --git a/apps/guide/content/docs/legacy/interactive-components/images/modal-select-menu-example.png b/apps/guide/content/docs/legacy/interactive-components/images/modal-select-menu-example.png
new file mode 100644
index 000000000000..f1bf18ff4b91
Binary files /dev/null and b/apps/guide/content/docs/legacy/interactive-components/images/modal-select-menu-example.png differ
diff --git a/apps/guide/content/docs/legacy/interactive-components/select-menus.mdx b/apps/guide/content/docs/legacy/interactive-components/select-menus.mdx
index f2acc745629d..cc9da7aa6580 100644
--- a/apps/guide/content/docs/legacy/interactive-components/select-menus.mdx
+++ b/apps/guide/content/docs/legacy/interactive-components/select-menus.mdx
@@ -2,7 +2,7 @@
 title: Select Menus
 ---
 
-Select menus are one of the `MessageComponent` classes, which can be sent via messages or interaction responses.
+Select menus are Interactive components. which can be sent via messages, interaction responses, or in modals
 
 <Callout>
 	This page is a follow-up to the [slash commands](../slash-commands/advanced-creation) section and [action
@@ -22,13 +22,17 @@ const { StringSelectMenuBuilder, StringSelectMenuOptionBuilder, SlashCommandBuil
 module.exports = {
 	// data: new SlashCommandBuilder()...
 	async execute(interaction) {
-		const select = new StringSelectMenuBuilder()
+		const favoriteStarterSelect = new StringSelectMenuBuilder()
 			.setCustomId('starter')
 			.setPlaceholder('Make a selection!')
 			.addOptions(
+				// String select menu options
 				new StringSelectMenuOptionBuilder()
+					// Label displayed to user
 					.setLabel('Bulbasaur')
+					// Description of option
 					.setDescription('The dual-type Grass/Poison Seed Pokémon.')
+					// Value returned to in modal submission
 					.setValue('bulbasaur'),
 				new StringSelectMenuOptionBuilder()
 					.setLabel('Charmander')
@@ -59,17 +63,21 @@ const {
 	StringSelectMenuOptionBuilder,
 	SlashCommandBuilder,
 } = require('discord.js');
-// [!code focus:30]
+// [!code focus:33]
 module.exports = {
 	// data: new SlashCommandBuilder()...
 	async execute(interaction) {
-		const select = new StringSelectMenuBuilder()
+		const favoriteStarterSelect = new StringSelectMenuBuilder()
 			.setCustomId('starter')
 			.setPlaceholder('Make a selection!')
 			.addOptions(
+				// String select menu options
 				new StringSelectMenuOptionBuilder()
+					// Label displayed to user
 					.setLabel('Bulbasaur')
+					// Description of option
 					.setDescription('The dual-type Grass/Poison Seed Pokémon.')
+					// Value returned to in modal submission
 					.setValue('bulbasaur'),
 				new StringSelectMenuOptionBuilder()
 					.setLabel('Charmander')
@@ -81,9 +89,11 @@ module.exports = {
 					.setValue('squirtle'),
 			);
 
-		// [!code ++:6]
-		const row = new ActionRowBuilder().addComponents(select);
+		// [!code ++:8]
+		// Adding String select menu to action row
+		const row = new ActionRowBuilder().addComponents(favoriteStarterSelect);
 
+		// reply with action row
 		await interaction.reply({
 			content: 'Choose your starter!',
 			components: [row],
@@ -99,7 +109,88 @@ module.exports = {
 	components](../popular-topics/display-components) system.
 </Callout>
 
-### String select menu options
+## Using select menus in modals
+
+In modals Text inputs allow free from responses. Select menus allow you to limit user inputs to a preselected list of values
+
+```js
+const {
+	LabelBuilder,
+	ModalBuilder,
+	StringSelectMenuBuilder,
+	StringSelectMenuOptionBuilder,
+	SlashCommandBuilder,
+} = require('discord.js');
+module.exports = {
+	// data: new SlashCommandBuilder()...
+	async execute(interaction) {
+		// [!code focus:5]
+		const favoriteStarterSelect = new StringSelectMenuBuilder()
+			.setCustomId('starter')
+			.setPlaceholder('Make a selection!')
+			// [!code ++:2]
+			// Modal only property on select menus to prevent submission, defaults to true
+			.setRequired(true)
+			.addOptions(
+				// String select menu options
+				new StringSelectMenuOptionBuilder()
+					// Label displayed to user
+					.setLabel('Bulbasaur')
+					// Description of option
+					.setDescription('The dual-type Grass/Poison Seed Pokémon.')
+					// Value returned to in modal submission
+					.setValue('bulbasaur'),
+				new StringSelectMenuOptionBuilder()
+					.setLabel('Charmander')
+					.setDescription('The Fire-type Lizard Pokémon.')
+					.setValue('charmander'),
+				new StringSelectMenuOptionBuilder()
+					.setLabel('Squirtle')
+					.setDescription('The Water-type Tiny Turtle Pokémon.')
+					.setValue('squirtle'),
+			);
+		// [!code focus:11]
+		// [!code ++:11]
+		const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');
+
+		const favoriteStarterLabel = new LabelBuilder()
+			.setLabel("What's your favorite Gen 1 Pokémon starter?")
+			// The Description is small text under the label above the interactive component
+			.setStringSelectMenuComponent(favoriteStarterSelect);
+
+		modal.setLabelComponents(favoriteStarterLabel);
+
+		// Show modal to user
+		interaction.showModal(modal);
+	},
+};
+```
+
+Image of what a select menu in modal
+![example of string select menu in a modal](./images/modal-select-menu-example.png)
+
+### Extracting data from modal submissions
+
+Unlike when used in a message or interaction reply select menus in a modal to not cause a `Client#InteractionCreate` event. Instead the selected menu values with be in the fields property of the modal submission interaction
+
+<Callout>The get function will always return an array even if no values are selected</Callout>
+
+```js
+client.on(Events.InteractionCreate, (interaction) => {
+
+	// [!code focus:3]
+	if (!interaction.isModalSubmit()) return;
+	if (interaction.customId === 'myModal') {
+		const favoriteStarter = interaction.fields.getStringSelectValues('starter');
+
+		await interaction.reply({ content: 'Your submission was received successfully!' });
+		console.log(favoriteStarter);
+
+	}
+});
+```
+
+## String select menu options
 
 String select menu options are custom-defined by the user, as shown in the example above. At a minimum, each option must have it's `label` and `value` defined. The label is shown to the user, while the value is included in the interaction sent to the bot.
 
diff --git a/apps/guide/content/docs/legacy/popular-topics/display-components.mdx b/apps/guide/content/docs/legacy/popular-topics/display-components.mdx
index ebf64dba5c95..335c390b5834 100644
--- a/apps/guide/content/docs/legacy/popular-topics/display-components.mdx
+++ b/apps/guide/content/docs/legacy/popular-topics/display-components.mdx
@@ -32,6 +32,10 @@ Text Display components let you add markdown-formatted text to your message and
 	Sending user and role mentions in text display components **will notify users and roles**! You can and should control
 	mentions with the `allowedMentions` message option.
 </Callout>
+<Callout>
+	Text displays components can be used in modals. see [modal guide](../interactions/modals.mdx#text-display) for how to
+	use them in modals
+</Callout>
 
 The example below shows how you can send a Text Display component in a channel.