diff --git a/packages/manager/.changeset/pr-9709-upcoming-features-1697141846298.md b/packages/manager/.changeset/pr-9709-upcoming-features-1697141846298.md
new file mode 100644
index 00000000000..95bcf2498ee
--- /dev/null
+++ b/packages/manager/.changeset/pr-9709-upcoming-features-1697141846298.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Support VPCs in Add/Edit Linode Config dialog ([#9709](https://github.com/linode/manager/pull/9709))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx
index d2004576c00..736d9889bc4 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx
@@ -18,7 +18,7 @@ import {
 
 import { InterfaceSelect } from '../LinodesDetail/LinodeSettings/InterfaceSelect';
 
-// @TODO Delete this file when VPC is released
+// @TODO VPC: Delete this file when VPC is released
 
 interface Props {
   handleVLANChange: (updatedInterface: Interface) => void;
@@ -105,14 +105,16 @@ export const AttachVLAN = React.memo((props: Props) => {
             .
           </Typography>
           <InterfaceSelect
+            errors={{
+              ipamError,
+              labelError,
+            }}
             handleChange={(newInterface: Interface) =>
               handleVLANChange(newInterface)
             }
             fromAddonsPanel
             ipamAddress={ipamAddress}
-            ipamError={ipamError}
             label={vlanLabel}
-            labelError={labelError}
             purpose="vlan"
             readOnly={readOnly || !regionSupportsVLANs || false}
             region={region}
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
index 38dcca48e4c..5d26aee194e 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -612,6 +612,7 @@ export class LinodeCreate extends React.PureComponent<
             }
             assignPublicIPv4Address={this.props.assignPublicIPv4Address}
             autoassignIPv4WithinVPC={this.props.autoassignIPv4WithinVPC}
+            from="linodeCreate"
             handleSelectVPC={this.props.setSelectedVPC}
             handleSubnetChange={this.props.handleSubnetChange}
             handleVPCIPv4Change={this.props.handleVPCIPv4Change}
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx
index 37488a5839e..393f81ef7e7 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx
@@ -108,14 +108,16 @@ export const VLANAccordion = React.memo((props: Props) => {
         .
       </Typography>
       <InterfaceSelect
+        errors={{
+          ipamError,
+          labelError,
+        }}
         handleChange={(newInterface: Interface) =>
           handleVLANChange(newInterface)
         }
         fromAddonsPanel
         ipamAddress={ipamAddress}
-        ipamError={ipamError}
         label={vlanLabel}
-        labelError={labelError}
         purpose="vlan"
         readOnly={readOnly || !regionSupportsVLANs || false}
         region={region}
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
index e9d17c68b4f..6adead72adf 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
@@ -7,7 +7,7 @@ import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { rest, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
-import { VPCPanel } from './VPCPanel';
+import { VPCPanel, VPCPanelProps } from './VPCPanel';
 
 const queryClient = new QueryClient();
 
@@ -19,6 +19,7 @@ afterEach(() => {
 const props = {
   assignPublicIPv4Address: false,
   autoassignIPv4WithinVPC: true,
+  from: 'linodeCreate' as VPCPanelProps['from'],
   handleSelectVPC: jest.fn(),
   handleSubnetChange: jest.fn(),
   handleVPCIPv4Change: jest.fn(),
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
index 14cd14e9f27..26bacff7a69 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
@@ -1,4 +1,6 @@
 import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -23,20 +25,23 @@ import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 import { StyledCreateLink } from './LinodeCreate.styles';
 import { REGION_CAVEAT_HELPER_TEXT } from './constants';
 
-interface VPCPanelProps {
+export interface VPCPanelProps {
   assignPublicIPv4Address: boolean;
   autoassignIPv4WithinVPC: boolean;
+  from: 'linodeConfig' | 'linodeCreate';
   handleSelectVPC: (vpcId: number) => void;
   handleSubnetChange: (subnetId: number) => void;
   handleVPCIPv4Change: (IPv4: string) => void;
+  publicIPv4Error?: string;
   region: string | undefined;
-  selectedSubnetId: number | undefined;
-  selectedVPCId: number | undefined;
+  selectedSubnetId: null | number | undefined;
+  selectedVPCId: null | number | undefined;
   subnetError?: string;
   toggleAssignPublicIPv4Address: () => void;
   toggleAutoassignIPv4WithinVPCEnabled: () => void;
   vpcIPv4AddressOfLinode: string | undefined;
   vpcIPv4Error?: string;
+  vpcIdError?: string;
 }
 
 const ERROR_GROUP_STRING = 'vpc-errors';
@@ -45,9 +50,11 @@ export const VPCPanel = (props: VPCPanelProps) => {
   const {
     assignPublicIPv4Address,
     autoassignIPv4WithinVPC,
+    from,
     handleSelectVPC,
     handleSubnetChange,
     handleVPCIPv4Change,
+    publicIPv4Error,
     region,
     selectedSubnetId,
     selectedVPCId,
@@ -56,8 +63,12 @@ export const VPCPanel = (props: VPCPanelProps) => {
     toggleAutoassignIPv4WithinVPCEnabled,
     vpcIPv4AddressOfLinode,
     vpcIPv4Error,
+    vpcIdError,
   } = props;
 
+  const theme = useTheme();
+  const isSmallBp = useMediaQuery(theme.breakpoints.down('sm'));
+
   const flags = useFlags();
   const { account } = useAccountManagement();
 
@@ -104,10 +115,15 @@ export const VPCPanel = (props: VPCPanelProps) => {
       : accumulator;
   }, []);
 
-  vpcDropdownOptions.unshift({
-    label: 'None',
-    value: -1,
-  });
+  const fromLinodeCreate = from === 'linodeCreate';
+  const fromLinodeConfig = from === 'linodeConfig';
+
+  if (fromLinodeCreate) {
+    vpcDropdownOptions.unshift({
+      label: 'None',
+      value: -1,
+    });
+  }
 
   const subnetDropdownOptions: Item[] =
     vpcs
@@ -121,27 +137,46 @@ export const VPCPanel = (props: VPCPanelProps) => {
     ? getAPIErrorOrDefault(error, 'Unable to load VPCs')[0].reason
     : undefined;
 
-  const mainCopyVPC =
-    vpcDropdownOptions.length <= 1
-      ? 'Allow Linode to communicate in an isolated environment.'
-      : 'Assign this Linode to an existing VPC.';
+  const getMainCopyVPC = () => {
+    if (fromLinodeConfig) {
+      return null;
+    }
+
+    const copy =
+      vpcDropdownOptions.length <= 1
+        ? 'Allow Linode to communicate in an isolated environment.'
+        : 'Assign this Linode to an existing VPC.';
+
+    return (
+      <>
+        {/* @TODO VPC: Update link */}
+        {copy} <Link to="">Learn more</Link>.
+      </>
+    );
+  };
 
   return (
     <Paper
+      sx={(theme) => ({
+        ...(fromLinodeCreate && {
+          marginTop: theme.spacing(3),
+        }),
+        ...(fromLinodeConfig && {
+          padding: 0,
+        }),
+      })}
       data-testid="vpc-panel"
-      sx={(theme) => ({ marginTop: theme.spacing(3) })}
     >
-      <Typography
-        sx={(theme) => ({ marginBottom: theme.spacing(2) })}
-        variant="h2"
-      >
-        VPC
-      </Typography>
-      <Stack>
-        <Typography>
-          {/* @TODO VPC: Update link */}
-          {mainCopyVPC} <Link to="">Learn more</Link>.
+      {fromLinodeCreate && (
+        <Typography
+          sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+          variant="h2"
+        >
+          VPC
         </Typography>
+      )}
+      <Stack>
+        <Typography>{getMainCopyVPC()}</Typography>
         <Select
           onChange={(selectedVPC: Item<number, string>) => {
             handleSelectVPC(selectedVPC.value);
@@ -152,15 +187,15 @@ export const VPCPanel = (props: VPCPanelProps) => {
           value={vpcDropdownOptions.find(
             (option) => option.value === selectedVPCId
           )}
-          defaultValue={vpcDropdownOptions[0]}
+          defaultValue={fromLinodeConfig ? null : vpcDropdownOptions[0]} // If we're in the Config dialog, there is no "None" option at index 0
           disabled={!regionSupportsVPCs}
-          errorText={vpcError}
+          errorText={vpcIdError ?? vpcError}
           isClearable={false}
           isLoading={isLoading}
-          label="Assign VPC"
+          label={from === 'linodeCreate' ? 'Assign VPC' : 'VPC'}
           noOptionsMessage={() => 'Create a VPC to assign to this Linode.'}
           options={vpcDropdownOptions}
-          placeholder={''}
+          placeholder={'Select a VPC'}
         />
         {vpcDropdownOptions.length <= 1 && regionSupportsVPCs && (
           <Typography sx={(theme) => ({ paddingTop: theme.spacing(1.5) })}>
@@ -169,9 +204,11 @@ export const VPCPanel = (props: VPCPanelProps) => {
           </Typography>
         )}
 
-        <StyledCreateLink to={`${APP_ROOT}/vpcs/create`}>
-          Create VPC
-        </StyledCreateLink>
+        {from === 'linodeCreate' && (
+          <StyledCreateLink to={`${APP_ROOT}/vpcs/create`}>
+            Create VPC
+          </StyledCreateLink>
+        )}
 
         {selectedVPCId !== -1 && regionSupportsVPCs && (
           <Stack data-testid="subnet-and-additional-options-section">
@@ -214,7 +251,7 @@ export const VPCPanel = (props: VPCPanelProps) => {
                     flexDirection="row"
                     sx={{}}
                   >
-                    <Typography noWrap>
+                    <Typography noWrap={!isSmallBp && from === 'linodeConfig'}>
                       Auto-assign a VPC IPv4 address for this Linode in the VPC
                     </Typography>
                     <TooltipIcon
@@ -245,7 +282,6 @@ export const VPCPanel = (props: VPCPanelProps) => {
               })}
               alignItems="center"
               display="flex"
-              flexDirection="row"
             >
               <FormControlLabel
                 control={
@@ -268,6 +304,15 @@ export const VPCPanel = (props: VPCPanelProps) => {
                   </Box>
                 }
               />
+              {assignPublicIPv4Address && publicIPv4Error && (
+                <Typography
+                  sx={(theme) => ({
+                    color: theme.color.red,
+                  })}
+                >
+                  {publicIPv4Error}
+                </Typography>
+              )}
             </Box>
           </Stack>
         )}
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx
index bedb36727f5..66611751a80 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx
@@ -1,4 +1,4 @@
-import { Config, Interface } from '@linode/api-v4/lib/linodes';
+import { Config } from '@linode/api-v4/lib/linodes';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -9,6 +9,7 @@ import { useAllLinodeDisksQuery } from 'src/queries/linodes/disks';
 import { useLinodeKernelQuery } from 'src/queries/linodes/linodes';
 import { useLinodeVolumesQuery } from 'src/queries/volumes';
 
+import { InterfaceListItem } from './InterfaceListItem';
 import { ConfigActionMenu } from './LinodeConfigActionMenu';
 
 interface Props {
@@ -59,7 +60,7 @@ export const ConfigRow = React.memo((props: Props) => {
             return undefined;
           }
           return (
-            <li style={{ paddingBottom: 4 }} key={thisDevice}>
+            <li key={thisDevice} style={{ paddingBottom: 4 }}>
               /dev/{thisDevice} - {label}
             </li>
           );
@@ -76,17 +77,12 @@ export const ConfigRow = React.memo((props: Props) => {
   const InterfaceList = (
     <StyledUl>
       {interfaces.map((interfaceEntry, idx) => {
-        // The order of the config.interfaces array as returned by the API is significant.
-        // Index 0 is eth0, index 1 is eth1, index 2 is eth2.
-        const interfaceName = `eth${idx}`;
-
         return (
-          <li
-            style={{ paddingBottom: 4 }}
+          <InterfaceListItem
+            idx={idx}
+            interfaceEntry={interfaceEntry}
             key={interfaceEntry.label ?? 'public' + idx}
-          >
-            {interfaceName} – {getInterfaceLabel(interfaceEntry)}
-          </li>
+          />
         );
       })}
     </StyledUl>
@@ -132,15 +128,3 @@ const StyledTableCell = styled(TableCell, { label: 'StyledTableCell' })({
   },
   padding: '0 !important',
 });
-
-export const getInterfaceLabel = (configInterface: Interface): string => {
-  if (configInterface.purpose === 'public') {
-    return 'Public Internet';
-  }
-
-  const interfaceLabel = configInterface.label;
-  const ipamAddress = configInterface.ipam_address;
-  const hasIPAM = Boolean(ipamAddress);
-
-  return `VLAN: ${interfaceLabel} ${hasIPAM ? `(${ipamAddress})` : ''}`;
-};
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/InterfaceListItem.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/InterfaceListItem.test.tsx
new file mode 100644
index 00000000000..a3bbbc3db78
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/InterfaceListItem.test.tsx
@@ -0,0 +1,79 @@
+import { waitFor } from '@testing-library/react';
+import * as React from 'react';
+
+import {
+  LinodeConfigInterfaceFactory,
+  LinodeConfigInterfaceFactoryWithVPC,
+  vpcFactory,
+} from 'src/factories';
+import { rest, server } from 'src/mocks/testServer';
+import { queryClientFactory } from 'src/queries/base';
+import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
+import { InterfaceListItem } from './InterfaceListItem';
+
+const queryClient = queryClientFactory();
+
+beforeAll(() => mockMatchMedia());
+afterEach(() => {
+  queryClient.clear();
+});
+
+const interfaceListItemTestId = 'interface-list-item';
+
+describe('InterfaceListItem', () => {
+  it('should return the correct text for a public interface', () => {
+    const publicInterface = LinodeConfigInterfaceFactory.build({
+      ipam_address: null,
+      purpose: 'public',
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <InterfaceListItem idx={0} interfaceEntry={publicInterface} />
+    );
+
+    expect(getByTestId(interfaceListItemTestId).innerHTML).toEqual(
+      'eth0 – Public Internet'
+    );
+  });
+
+  it('should return the correct text for a VLAN interface', () => {
+    const vlanInterface = LinodeConfigInterfaceFactory.build();
+
+    const { getByTestId } = renderWithTheme(
+      <InterfaceListItem idx={1} interfaceEntry={vlanInterface} />
+    );
+
+    expect(getByTestId(interfaceListItemTestId).innerHTML).toEqual(
+      `eth1 – VLAN: ${vlanInterface.label} (${vlanInterface.ipam_address})`
+    );
+  });
+
+  it('should return the correct text for a VPC interface', async () => {
+    const vpc = vpcFactory.build({
+      id: 1,
+      label: 'first-vpc',
+    });
+
+    const vpcInterface = LinodeConfigInterfaceFactoryWithVPC.build({
+      vpc_id: 1,
+    });
+
+    server.use(
+      rest.get('*/vpcs/:vpcId', (req, res, ctx) => {
+        return res(ctx.json(vpc));
+      })
+    );
+
+    const { getByTestId } = renderWithTheme(
+      <InterfaceListItem idx={2} interfaceEntry={vpcInterface} />,
+      { queryClient }
+    );
+
+    await waitFor(() => {
+      expect(getByTestId(interfaceListItemTestId).innerHTML).toEqual(
+        `eth2 – VPC: ${vpc.label} (${vpcInterface.ipv4?.vpc})`
+      );
+    });
+  });
+});
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/InterfaceListItem.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/InterfaceListItem.tsx
new file mode 100644
index 00000000000..97bf7e74c23
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/InterfaceListItem.tsx
@@ -0,0 +1,44 @@
+import { Interface } from '@linode/api-v4/lib/linodes';
+import React from 'react';
+
+import { useVPCQuery } from 'src/queries/vpcs';
+
+interface Props {
+  idx: number;
+  interfaceEntry: Interface;
+}
+
+export const InterfaceListItem = (props: Props) => {
+  const { idx, interfaceEntry } = props;
+  const { data: vpc } = useVPCQuery(
+    interfaceEntry?.vpc_id ?? -1,
+    Boolean(interfaceEntry.vpc_id)
+  );
+
+  // The order of the config.interfaces array as returned by the API is significant.
+  // Index 0 is eth0, index 1 is eth1, index 2 is eth2.
+  const interfaceName = `eth${idx}`;
+
+  const getInterfaceLabel = (configInterface: Interface): string => {
+    if (configInterface.purpose === 'public') {
+      return 'Public Internet';
+    }
+
+    const interfaceLabel = configInterface.label;
+
+    if (configInterface.purpose === 'vlan') {
+      const ipamAddress = configInterface.ipam_address;
+      const hasIPAM = Boolean(ipamAddress);
+      return `VLAN: ${interfaceLabel} ${hasIPAM ? `(${ipamAddress})` : ''}`;
+    }
+
+    const vpcIpv4 = configInterface.ipv4?.vpc;
+    return `VPC: ${vpc?.label} ${Boolean(vpcIpv4) ? `(${vpcIpv4})` : ''}`;
+  };
+
+  return (
+    <li data-testid="interface-list-item" style={{ paddingBottom: 4 }}>
+      {interfaceName} – {getInterfaceLabel(interfaceEntry)}
+    </li>
+  );
+};
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx
index 1be60d134b3..13b27f5b448 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.test.tsx
@@ -1,4 +1,23 @@
+import { waitFor } from '@testing-library/react';
+import * as React from 'react';
+
+import { configFactory } from 'src/factories';
+import { accountFactory } from 'src/factories/account';
+import { rest, server } from 'src/mocks/testServer';
+import { queryClientFactory } from 'src/queries/base';
+import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
 import { padList } from './LinodeConfigDialog';
+import { LinodeConfigDialog } from './LinodeConfigDialog';
+
+const queryClient = queryClientFactory();
+
+beforeAll(() => mockMatchMedia());
+afterEach(() => {
+  queryClient.clear();
+});
+
+const primaryInterfaceDropdownTestId = 'primary-interface-dropdown';
 
 describe('LinodeConfigDialog', () => {
   describe('padInterface helper method', () => {
@@ -14,4 +33,39 @@ describe('LinodeConfigDialog', () => {
       expect(padList([1, 2, 3, 4, 5], 0, 2)).toEqual([1, 2, 3, 4, 5]);
     });
   });
+
+  describe('Primary Interface (Default Route) dropdown', () => {
+    it('should not display if the VPC feature flag is off and the account capabilities do not include VPC', async () => {
+      const account = accountFactory.build({
+        capabilities: [],
+      });
+
+      const config = configFactory.build();
+
+      server.use(
+        rest.get('*/account', (req, res, ctx) => {
+          return res(ctx.json(account));
+        })
+      );
+
+      const { queryByTestId } = renderWithTheme(
+        <LinodeConfigDialog
+          config={config}
+          isReadOnly={false}
+          linodeId={1}
+          onClose={jest.fn()}
+          open={true}
+        />,
+        {
+          flags: { vpc: false },
+        }
+      );
+
+      await waitFor(() => {
+        expect(
+          queryByTestId(primaryInterfaceDropdownTestId)
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
 });
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
index ef7e7b2d5ba..222b10f9cbc 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
@@ -35,6 +35,8 @@ import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { DeviceSelection } from 'src/features/Linodes/LinodesDetail/LinodeRescue/DeviceSelection';
 import { titlecase } from 'src/features/Linodes/presentation';
+import { useAccountManagement } from 'src/hooks/useAccountManagement';
+import { useFlags } from 'src/hooks/useFlags';
 import {
   useLinodeConfigCreateMutation,
   useLinodeConfigUpdateMutation,
@@ -47,6 +49,8 @@ import {
 import { useRegionsQuery } from 'src/queries/regions';
 import { queryKey as vlansQueryKey } from 'src/queries/vlans';
 import { useAllVolumesQuery } from 'src/queries/volumes';
+import { vpcQueryKey } from 'src/queries/vpcs';
+import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 import createDevicesFromStrings, {
   DevicesAsStrings,
 } from 'src/utilities/createDevicesFromStrings';
@@ -166,23 +170,51 @@ const interfacesToState = (interfaces?: Interface[]) => {
     return defaultInterfaceList;
   }
   const interfacesPayload = interfaces.map(
-    ({ ipam_address, label, purpose }) => ({ ipam_address, label, purpose })
+    ({
+      id,
+      ipam_address,
+      ipv4,
+      label,
+      primary,
+      purpose,
+      subnet_id,
+      vpc_id,
+    }) => ({
+      id,
+      ipam_address,
+      ipv4,
+      label,
+      primary,
+      purpose,
+      subnet_id,
+      vpc_id,
+    })
   );
   return padInterfaceList(interfacesPayload);
 };
 
-const interfacesToPayload = (interfaces?: ExtendedInterface[]) => {
+const interfacesToPayload = (
+  interfaces?: ExtendedInterface[],
+  primaryInterfaceIndex?: number
+) => {
   if (!interfaces || interfaces.length === 0) {
     return [];
   }
-  return equals(interfaces, defaultInterfaceList)
-    ? // In this case, where eth0 is set to public interface
-      // and no other interfaces are specified, the API prefers
-      // to receive an empty array.
-      []
-    : (interfaces.filter(
-        (thisInterface) => thisInterface.purpose !== 'none'
-      ) as Interface[]);
+
+  if (equals(interfaces, defaultInterfaceList)) {
+    // In this case, where eth0 is set to public interface
+    // and no other interfaces are specified, the API prefers
+    // to receive an empty array.
+    return [];
+  }
+
+  if (primaryInterfaceIndex !== undefined) {
+    interfaces[primaryInterfaceIndex].primary = true;
+  }
+
+  return interfaces.filter(
+    (thisInterface) => thisInterface.purpose !== 'none'
+  ) as Interface[];
 };
 
 const deviceSlots = ['sda', 'sdb', 'sdc', 'sdd', 'sde', 'sdf', 'sdg', 'sdh'];
@@ -219,6 +251,9 @@ export const LinodeConfigDialog = (props: Props) => {
   );
 
   const theme = useTheme();
+  const flags = useFlags();
+  const { account } = useAccountManagement();
+
   const regions = useRegionsQuery().data ?? [];
 
   const queryClient = useQueryClient();
@@ -229,14 +264,31 @@ export const LinodeConfigDialog = (props: Props) => {
 
   const [useCustomRoot, setUseCustomRoot] = React.useState(false);
 
+  const [
+    primaryInterfaceIndex,
+    setPrimaryInterfaceIndex,
+  ] = React.useState<number>();
+
   const regionHasVLANS = regions.some(
     (thisRegion) =>
       thisRegion.id === linode?.region &&
       thisRegion.capabilities.includes('Vlans')
   );
+  const regionHasVPCs = regions.some(
+    (thisRegion) =>
+      thisRegion.id === linode?.region &&
+      thisRegion.capabilities.includes('VPCs')
+  );
 
   const showVlans = regionHasVLANS;
 
+  // @TODO VPC: remove once VPC is fully rolled out
+  const vpcEnabled = isFeatureEnabled(
+    'VPCs',
+    Boolean(flags.vpc),
+    account?.capabilities ?? []
+  );
+
   const { resetForm, setFieldValue, values, ...formik } = useFormik({
     initialValues: defaultFieldsValues,
     onSubmit: (values) => onSubmit(values),
@@ -268,7 +320,7 @@ export const LinodeConfigDialog = (props: Props) => {
       devices: createDevicesFromStrings(devices),
       helpers,
       initrd: initrd !== '' ? initrd : null,
-      interfaces: interfacesToPayload(interfaces),
+      interfaces: interfacesToPayload(interfaces, primaryInterfaceIndex),
       kernel,
       label,
       /** if the user did not toggle the limit radio button, send a value of 0 */
@@ -316,7 +368,7 @@ export const LinodeConfigDialog = (props: Props) => {
       configData.initrd = finnixDiskID;
     }
 
-    if (!regionHasVLANS) {
+    if (!regionHasVLANS || !regionHasVPCs) {
       delete configData.interfaces;
     }
 
@@ -330,7 +382,16 @@ export const LinodeConfigDialog = (props: Props) => {
           (thisInterface) => thisInterface.purpose === 'vlan'
         )
       ) {
-        queryClient.invalidateQueries('vlans');
+        queryClient.invalidateQueries(vlansQueryKey);
+      }
+
+      // Ensure VPC query data is up-to-date
+      if (
+        configData.interfaces?.some(
+          (thisInterface) => thisInterface.purpose === 'vpc'
+        )
+      ) {
+        queryClient.invalidateQueries(vpcQueryKey);
       }
 
       enqueueSnackbar(
@@ -355,9 +416,20 @@ export const LinodeConfigDialog = (props: Props) => {
         });
       };
 
+      // @TODO VPC: Remove this override and surface the field errors appropriately
+      // once API fixes interface index bug for ipv4.vpc & ipv4.nat_1_1 errors
+      const overrideFieldForIPv4 = (error: APIError[]) => {
+        error.forEach((err) => {
+          if (err.field && ['ipv4.nat_1_1', 'ipv4.vpc'].includes(err.field)) {
+            err.field = 'interfaces';
+          }
+        });
+      };
+
       formik.setSubmitting(false);
 
       overrideFieldForDevices(error);
+      overrideFieldForIPv4(error);
 
       handleFieldErrors(formik.setErrors, error);
 
@@ -411,6 +483,14 @@ export const LinodeConfigDialog = (props: Props) => {
           )
         );
 
+        const indexOfExistingPrimaryInterface = config.interfaces.findIndex(
+          (_interface) => _interface.primary === true
+        );
+
+        if (vpcEnabled && indexOfExistingPrimaryInterface !== -1) {
+          setPrimaryInterfaceIndex(indexOfExistingPrimaryInterface);
+        }
+
         resetForm({
           values: {
             comments: config.comments,
@@ -434,9 +514,10 @@ export const LinodeConfigDialog = (props: Props) => {
         resetForm({ values: defaultFieldsValues });
         setUseCustomRoot(false);
         setDeviceCounter(deviceCounterDefault);
+        setPrimaryInterfaceIndex(0);
       }
     }
-  }, [open, config, initrdFromConfig, resetForm]);
+  }, [open, config, initrdFromConfig, resetForm, queryClient, vpcEnabled]);
 
   const generalError = formik.status?.generalError;
 
@@ -511,6 +592,21 @@ export const LinodeConfigDialog = (props: Props) => {
     value: '',
   });
 
+  const getPrimaryInterfaceOptions = (interfaces: ExtendedInterface[]) => {
+    return interfaces.map((_interface, idx) => {
+      return {
+        label: `eth${idx}`,
+        value: idx,
+      };
+    });
+  };
+
+  const primaryInterfaceOptions = getPrimaryInterfaceOptions(values.interfaces);
+
+  const handlePrimaryInterfaceChange = (selected: Item<number>) => {
+    setPrimaryInterfaceIndex(selected.value);
+  };
+
   /**
    * Form change handlers
    * (where formik.handleChange is insufficient)
@@ -563,6 +659,21 @@ export const LinodeConfigDialog = (props: Props) => {
     [setFieldValue]
   );
 
+  const networkInterfacesHelperText = (
+    <Typography>
+      Configure the network that a selected interface will connect to (
+      {vpcEnabled
+        ? '"Public Internet", VLAN, or VPC'
+        : 'either "Public Internet" or a VLAN'}
+      ) . Each Linode can have up to three Network Interfaces. For more
+      information, see our{' '}
+      <Link to="https://www.linode.com/docs/products/networking/vlans/guides/attach-to-compute-instance/#attaching-a-vlan-to-an-existing-compute-instance">
+        Network Interfaces guide
+      </Link>
+      .
+    </Typography>
+  );
+
   return (
     <Dialog
       fullHeight
@@ -835,52 +946,77 @@ export const LinodeConfigDialog = (props: Props) => {
             {showVlans ? (
               <Grid xs={12}>
                 <Box alignItems="center" display="flex">
-                  <Typography variant="h3">Network Interfaces</Typography>
+                  <Typography variant="h3">
+                    {vpcEnabled ? 'Networking' : 'Network Interfaces'}
+                  </Typography>
                   <TooltipIcon
                     sxTooltipIcon={{
                       paddingBottom: 0,
                       paddingTop: 0,
                     }}
-                    text={
-                      <Typography>
-                        Configure the network that a selected interface will
-                        connect to (either &quot;Public Internet&quot; or a
-                        VLAN). Each Linode can have up to three Network
-                        Interfaces. For more information, see our{' '}
-                        <Link to="https://www.linode.com/docs/products/networking/vlans/guides/attach-to-compute-instance/#attaching-a-vlan-to-an-existing-compute-instance">
-                          Network Interfaces guide
-                        </Link>
-                        .
-                      </Typography>
-                    }
                     interactive
                     status="help"
                     sx={{ tooltip: { maxWidth: 350 } }}
+                    text={networkInterfacesHelperText}
                   />
                 </Box>
-                {formik.errors.interfaces ? (
+                {formik.errors.interfaces && (
                   <Notice
                     text={formik.errors.interfaces as string}
                     variant="error"
                   />
-                ) : null}
+                )}
+                {vpcEnabled && (
+                  <>
+                    <Select
+                      defaultValue={
+                        primaryInterfaceOptions[primaryInterfaceIndex ?? 0]
+                      }
+                      data-testid="primary-interface-dropdown"
+                      disabled={isReadOnly}
+                      isClearable={false}
+                      label="Primary Interface (Default Route)"
+                      onChange={handlePrimaryInterfaceChange}
+                      options={getPrimaryInterfaceOptions(values.interfaces)}
+                    />
+                    <Divider
+                      sx={{
+                        margin: `${theme.spacing(
+                          4.5
+                        )} ${theme.spacing()} ${theme.spacing(1.5)} `,
+                        width: `calc(100% - ${theme.spacing(2)})`,
+                      }}
+                    />
+                  </>
+                )}
                 {values.interfaces.map((thisInterface, idx) => {
                   return (
                     <InterfaceSelect
+                      errors={{
+                        ipamError:
+                          formik.errors[`interfaces[${idx}].ipam_address`],
+                        labelError: formik.errors[`interfaces[${idx}].label`],
+                        publicIPv4Error:
+                          formik.errors[`interfaces[${idx}].ipv4.nat_1_1`],
+                        subnetError:
+                          formik.errors[`interfaces[${idx}].subnet_id`],
+                        vpcError: formik.errors[`interfaces[${idx}].vpc_id`],
+                        vpcIPv4Error:
+                          formik.errors[`interfaces[${idx}].ipv4.vpc`],
+                      }}
                       handleChange={(newInterface: Interface) =>
                         handleInterfaceChange(idx, newInterface)
                       }
-                      ipamError={
-                        formik.errors[`interfaces[${idx}].ipam_address`]
-                      }
                       ipamAddress={thisInterface.ipam_address}
                       key={`eth${idx}-interface`}
                       label={thisInterface.label}
-                      labelError={formik.errors[`interfaces[${idx}].label`]}
                       purpose={thisInterface.purpose}
                       readOnly={isReadOnly}
                       region={linode?.region}
                       slotNumber={idx}
+                      subnetId={thisInterface.subnet_id}
+                      vpcIPv4={thisInterface.ipv4?.vpc}
+                      vpcId={thisInterface.vpc_id}
                     />
                   );
                 })}
@@ -1023,7 +1159,7 @@ interface ConfigFormProps {
   loading: boolean;
 }
 
-const DialogContent: React.FC<ConfigFormProps> = (props) => {
+const DialogContent = (props: ConfigFormProps) => {
   const { errors, loading } = props;
 
   if (loading) {
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index 360c0e16d86..1e7bb13c0db 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -2,6 +2,7 @@ import {
   InterfacePayload,
   InterfacePurpose,
 } from '@linode/api-v4/lib/linodes/types';
+import Stack from '@mui/material/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -10,61 +11,80 @@ import * as React from 'react';
 import { Divider } from 'src/components/Divider';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { TextField } from 'src/components/TextField';
+import { VPCPanel } from 'src/features/Linodes/LinodesCreate/VPCPanel';
+import { useFlags } from 'src/hooks/useFlags';
+import { useAccount } from 'src/queries/account';
 import { useVlansQuery } from 'src/queries/vlans';
+import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 import { sendLinodeCreateDocsEvent } from 'src/utilities/analytics';
 
 export interface Props {
   fromAddonsPanel?: boolean;
   handleChange: (updatedInterface: ExtendedInterface) => void;
-  ipamAddress: null | string;
-  ipamError?: string;
-  label: null | string;
-  labelError?: string;
+  ipamAddress?: null | string;
+  label?: null | string;
   purpose: ExtendedPurpose;
   readOnly: boolean;
   region?: string;
   slotNumber: number;
 }
 
+interface VPCStateErrors {
+  ipamError?: string;
+  labelError?: string;
+  publicIPv4Error?: string;
+  subnetError?: string;
+  vpcError?: string;
+  vpcIPv4Error?: string;
+}
+
+interface VPCState {
+  errors: VPCStateErrors;
+  subnetId?: null | number;
+  vpcIPv4?: string;
+  vpcId?: null | number;
+}
+
 // To allow for empty slots, which the API doesn't account for
 export type ExtendedPurpose = 'none' | InterfacePurpose;
-export interface ExtendedInterface extends Omit<InterfacePayload, 'purpose'> {
+export interface ExtendedInterface
+  extends Partial<Omit<InterfacePayload, 'purpose'>> {
   purpose: ExtendedPurpose;
 }
 
-export const InterfaceSelect = (props: Props) => {
-  const theme = useTheme();
-  const isSmallBp = useMediaQuery(theme.breakpoints.down('sm'));
+type CombinedProps = Props & VPCState;
 
+export const InterfaceSelect = (props: CombinedProps) => {
   const {
+    errors,
     fromAddonsPanel,
     handleChange,
     ipamAddress,
-    ipamError,
     label,
-    labelError,
     purpose,
     readOnly,
     region,
     slotNumber,
+    subnetId,
+    vpcIPv4,
+    vpcId,
   } = props;
 
-  const [newVlan, setNewVlan] = React.useState('');
+  const theme = useTheme();
+  const isSmallBp = useMediaQuery(
+    theme.breakpoints.down(fromAddonsPanel ? 'sm' : 1015)
+  );
+  const flags = useFlags();
+  const { data: account } = useAccount();
 
-  const purposeOptions: Item<ExtendedPurpose>[] = [
-    {
-      label: 'Public Internet',
-      value: 'public',
-    },
-    {
-      label: 'VLAN',
-      value: 'vlan',
-    },
-    {
-      label: 'None',
-      value: 'none',
-    },
-  ];
+  const showVPCs = isFeatureEnabled(
+    'VPCs',
+    Boolean(flags.vpc),
+    account?.capabilities ?? []
+  );
+
+  const [newVlan, setNewVlan] = React.useState('');
+  const purposeOptions = getPurposeOptions(showVPCs);
 
   const { data: vlans, isLoading } = useVlansQuery();
   const vlanOptions =
@@ -82,6 +102,9 @@ export const InterfaceSelect = (props: Props) => {
     vlanOptions.push({ label: newVlan, value: newVlan });
   }
 
+  const [autoAssignVPCIPv4, setAutoAssignVPCIPv4] = React.useState(true);
+  const [autoAssignLinodeIPv4, setAutoAssignLinodeIPv4] = React.useState(false);
+
   const handlePurposeChange = (selected: Item<InterfacePurpose>) => {
     const purpose = selected.value;
     handleChange({
@@ -101,6 +124,109 @@ export const InterfaceSelect = (props: Props) => {
       purpose,
     });
 
+  const handleVPCLabelChange = (selectedVPCId: number) =>
+    handleChange({
+      ipam_address: null,
+      ipv4: {
+        vpc: autoAssignVPCIPv4 ? undefined : vpcIPv4,
+      },
+      label: null,
+      purpose,
+      subnet_id: undefined,
+      vpc_id: selectedVPCId,
+    });
+
+  const handleSubnetChange = (selectedSubnetId: number) =>
+    handleChange({
+      ipam_address: null,
+      ipv4: {
+        vpc: autoAssignVPCIPv4 ? undefined : vpcIPv4,
+      },
+      label: null,
+      purpose,
+      subnet_id: selectedSubnetId,
+      vpc_id: vpcId,
+    });
+
+  const handleVPCIPv4Input = (vpcIPv4Input: string) => {
+    const changeObj = {
+      ipam_address: null,
+      label: null,
+      purpose,
+      subnet_id: subnetId,
+      vpc_id: vpcId,
+    };
+    if (autoAssignLinodeIPv4) {
+      handleChange({
+        ...changeObj,
+        ipv4: {
+          nat_1_1: 'any',
+          vpc: vpcIPv4Input,
+        },
+      });
+    } else {
+      handleChange({
+        ...changeObj,
+        ipv4: {
+          vpc: vpcIPv4Input,
+        },
+      });
+    }
+  };
+
+  React.useEffect(() => {
+    if (purpose !== 'vpc') {
+      return handleChange({
+        ipam_address: ipamAddress,
+        label,
+        purpose,
+      });
+    }
+
+    const changeObj = {
+      ipam_address: null,
+      label: null,
+      purpose,
+      subnet_id: subnetId,
+      vpc_id: vpcId,
+    };
+
+    /**
+     * If a user checks the "Auto-assign a VPC IPv4 address" box, then we send the user inputted address, otherwise we send nothing/undefined.
+     * If a user checks the "Assign a public IPv4" address box, then we send nat_1_1: 'any' to the API for auto assignment.
+     */
+    if (!autoAssignVPCIPv4 && autoAssignLinodeIPv4) {
+      handleChange({
+        ...changeObj,
+        ipv4: {
+          nat_1_1: 'any',
+          vpc: vpcIPv4,
+        },
+      });
+    } else if (
+      (autoAssignVPCIPv4 && autoAssignLinodeIPv4) ||
+      autoAssignLinodeIPv4
+    ) {
+      handleChange({
+        ...changeObj,
+        ipv4: {
+          nat_1_1: 'any',
+        },
+      });
+    } else if (autoAssignVPCIPv4 && !autoAssignLinodeIPv4) {
+      handleChange({
+        ...changeObj,
+      });
+    } else if (!autoAssignLinodeIPv4 && !autoAssignVPCIPv4) {
+      handleChange({
+        ...changeObj,
+        ipv4: {
+          vpc: vpcIPv4,
+        },
+      });
+    }
+  }, [autoAssignVPCIPv4, autoAssignLinodeIPv4, purpose]);
+
   const handleCreateOption = (_newVlan: string) => {
     setNewVlan(_newVlan);
     handleChange({
@@ -110,10 +236,85 @@ export const InterfaceSelect = (props: Props) => {
     });
   };
 
+  const jsxSelectVLAN = (
+    <Select
+      noOptionsMessage={() =>
+        isLoading
+          ? 'Loading...'
+          : 'You have no VLANs in this region. Type to create one.'
+      }
+      creatable
+      createOptionPosition="first"
+      errorText={errors.labelError}
+      inputId={`vlan-label-${slotNumber}`}
+      isClearable
+      isDisabled={readOnly}
+      label="VLAN"
+      onChange={handleLabelChange}
+      onCreateOption={handleCreateOption}
+      options={vlanOptions}
+      placeholder="Create or select a VLAN"
+      value={vlanOptions.find((thisVlan) => thisVlan.value === label) ?? null}
+    />
+  );
+
+  const jsxIPAMForVLAN = (
+    <TextField
+      tooltipOnMouseEnter={() =>
+        sendLinodeCreateDocsEvent('IPAM Address Tooltip Hover')
+      }
+      tooltipText={
+        'IPAM address must use IP/netmask format, e.g. 192.0.2.0/24.'
+      }
+      disabled={readOnly}
+      errorText={errors.ipamError}
+      inputId={`ipam-input-${slotNumber}`}
+      label="IPAM Address"
+      onChange={handleAddressChange}
+      optional
+      placeholder="192.0.2.0/24"
+      value={ipamAddress}
+    />
+  );
+
+  const enclosingJSXForVLANFields = (
+    jsxSelectVLAN: JSX.Element,
+    jsxIPAMForVLAN: JSX.Element
+  ) => {
+    return fromAddonsPanel ? (
+      <Grid container>
+        <Grid
+          sx={{
+            flexDirection: 'row',
+            [theme.breakpoints.down('sm')]: {
+              flexDirection: 'column',
+            },
+          }}
+          container
+          spacing={isSmallBp ? 0 : 4}
+        >
+          <Grid sm={6} xs={12}>
+            {jsxSelectVLAN}
+          </Grid>
+          <Grid sm={6} xs={12}>
+            {jsxIPAMForVLAN}
+          </Grid>
+        </Grid>
+      </Grid>
+    ) : (
+      <Grid sm={6} xs={12}>
+        <Stack>
+          {jsxSelectVLAN}
+          {jsxIPAMForVLAN}
+        </Stack>
+      </Grid>
+    );
+  };
+
   return (
     <Grid container>
       {fromAddonsPanel ? null : (
-        <Grid xs={12}>
+        <Grid xs={isSmallBp ? 12 : 6}>
           <Select
             options={
               // Do not display "None" as an option for eth0 (must be either Public Internet or a VLAN).
@@ -133,63 +334,36 @@ export const InterfaceSelect = (props: Props) => {
           />
         </Grid>
       )}
-      {purpose === 'vlan' ? (
-        <Grid container>
-          <Grid
-            sx={{
-              flexDirection: 'row',
-              [theme.breakpoints.down('sm')]: {
-                flexDirection: 'column',
-              },
-            }}
-            container
-            spacing={isSmallBp ? 0 : 4}
-          >
-            <Grid sm={6} xs={12}>
-              <Select
-                noOptionsMessage={() =>
-                  isLoading
-                    ? 'Loading...'
-                    : 'You have no VLANs in this region. Type to create one.'
-                }
-                value={
-                  vlanOptions.find((thisVlan) => thisVlan.value === label) ??
-                  null
-                }
-                creatable
-                createOptionPosition="first"
-                errorText={labelError}
-                inputId={`vlan-label-${slotNumber}`}
-                isClearable
-                isDisabled={readOnly}
-                label="VLAN"
-                onChange={handleLabelChange}
-                onCreateOption={handleCreateOption}
-                options={vlanOptions}
-                placeholder="Create or select a VLAN"
-              />
-            </Grid>
-            <Grid sm={6} xs={12}>
-              <TextField
-                tooltipOnMouseEnter={() =>
-                  sendLinodeCreateDocsEvent('IPAM Address Tooltip Hover')
-                }
-                tooltipText={
-                  'IPAM address must use IP/netmask format, e.g. 192.0.2.0/24.'
-                }
-                disabled={readOnly}
-                errorText={ipamError}
-                inputId={`ipam-input-${slotNumber}`}
-                label="IPAM Address"
-                onChange={handleAddressChange}
-                optional
-                placeholder="192.0.2.0/24"
-                value={ipamAddress}
-              />
-            </Grid>
-          </Grid>
+      {purpose === 'vlan' &&
+        enclosingJSXForVLANFields(jsxSelectVLAN, jsxIPAMForVLAN)}
+      {purpose === 'vpc' && (
+        <Grid xs={isSmallBp ? 12 : 6}>
+          <VPCPanel
+            toggleAssignPublicIPv4Address={() =>
+              setAutoAssignLinodeIPv4(
+                (autoAssignLinodeIPv4) => !autoAssignLinodeIPv4
+              )
+            }
+            toggleAutoassignIPv4WithinVPCEnabled={() =>
+              setAutoAssignVPCIPv4((autoAssignVPCIPv4) => !autoAssignVPCIPv4)
+            }
+            assignPublicIPv4Address={autoAssignLinodeIPv4}
+            autoassignIPv4WithinVPC={autoAssignVPCIPv4}
+            from="linodeConfig"
+            handleSelectVPC={handleVPCLabelChange}
+            handleSubnetChange={handleSubnetChange}
+            handleVPCIPv4Change={handleVPCIPv4Input}
+            publicIPv4Error={errors.publicIPv4Error}
+            region={region}
+            selectedSubnetId={subnetId}
+            selectedVPCId={vpcId}
+            subnetError={errors.subnetError}
+            vpcIPv4AddressOfLinode={vpcIPv4}
+            vpcIPv4Error={errors.vpcIPv4Error}
+            vpcIdError={errors.vpcError}
+          />
         </Grid>
-      ) : null}
+      )}
 
       {!fromAddonsPanel && (
         <Divider
@@ -204,3 +378,29 @@ export const InterfaceSelect = (props: Props) => {
     </Grid>
   );
 };
+
+const getPurposeOptions = (showVPCs: boolean) => {
+  const purposeOptions: Item<ExtendedPurpose>[] = [
+    {
+      label: 'Public Internet',
+      value: 'public',
+    },
+    {
+      label: 'VLAN',
+      value: 'vlan',
+    },
+    {
+      label: 'None',
+      value: 'none',
+    },
+  ];
+
+  if (showVPCs) {
+    purposeOptions.splice(1, 0, {
+      label: 'VPC',
+      value: 'vpc',
+    });
+  }
+
+  return purposeOptions;
+};
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
index a576b00b3b2..5923bd50b78 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
@@ -144,6 +144,7 @@ export const SubnetAssignLinodesDrawer = (
       label: null,
       purpose: 'vpc',
       subnet_id: subnet?.id,
+      vpc_id: vpcId,
       ...(!autoAssignIPv4 && { ipv4: { vpc: chosenIP } }),
     };
 
diff --git a/packages/manager/src/queries/vpcs.ts b/packages/manager/src/queries/vpcs.ts
index 3a48324569f..bdd185c51f3 100644
--- a/packages/manager/src/queries/vpcs.ts
+++ b/packages/manager/src/queries/vpcs.ts
@@ -88,12 +88,13 @@ export const useDeleteVPCMutation = (id: number) => {
 export const useSubnetsQuery = (
   vpcID: number,
   params: Params,
-  filter: Filter
+  filter: Filter,
+  enabled: boolean = true
 ) => {
   return useQuery<ResourcePage<Subnet>, APIError[]>(
     [vpcQueryKey, 'vpc', vpcID, subnetQueryKey, 'paginated', params, filter],
     () => getSubnets(vpcID, params, filter),
-    { keepPreviousData: true }
+    { enabled, keepPreviousData: true }
   );
 };
 
diff --git a/packages/manager/src/utilities/formikErrorUtils.ts b/packages/manager/src/utilities/formikErrorUtils.ts
index b6a27d9e325..cf382be66a3 100644
--- a/packages/manager/src/utilities/formikErrorUtils.ts
+++ b/packages/manager/src/utilities/formikErrorUtils.ts
@@ -87,9 +87,9 @@ export const handleAPIErrors = (
 };
 
 export interface SubnetError {
-  label?: string;
   ipv4?: string;
   ipv6?: string;
+  label?: string;
 }
 
 /**
diff --git a/packages/validation/.changeset/pr-9709-changed-1697141933133.md b/packages/validation/.changeset/pr-9709-changed-1697141933133.md
new file mode 100644
index 00000000000..66d0d139604
--- /dev/null
+++ b/packages/validation/.changeset/pr-9709-changed-1697141933133.md
@@ -0,0 +1,5 @@
+---
+"@linode/validation": Changed
+---
+
+Require vpc_id when interface purpose is 'vpc' in LinodeInterfaceSchema ([#9709](https://github.com/linode/manager/pull/9709))
diff --git a/packages/validation/src/linodes.schema.ts b/packages/validation/src/linodes.schema.ts
index 01eed7ec414..40834ed8052 100644
--- a/packages/validation/src/linodes.schema.ts
+++ b/packages/validation/src/linodes.schema.ts
@@ -155,9 +155,9 @@ export const LinodeInterfaceSchema = object().shape({
   }),
   ipam_address: string().when('purpose', {
     is: 'vlan',
-    then: string().notRequired().test({
+    then: string().notRequired().nullable().test({
       name: 'validateIPAM',
-      message: 'Must be a valid IPv4 range, e.g. 192.0.2.0/24',
+      message: 'Must be a valid IPv4 range, e.g. 192.0.2.0/24.',
       test: validateIP,
     }),
     otherwise: string().when('ipam_address', {
@@ -180,6 +180,15 @@ export const LinodeInterfaceSchema = object().shape({
       test: (value) => typeof value === 'undefined',
     }),
   }),
+  vpc_id: number().when('purpose', {
+    is: 'vpc',
+    then: number().required('VPC is required.'),
+    otherwise: number().test({
+      name: testnameDisallowedBasedOnPurpose('VPC'),
+      message: testmessageDisallowedBasedOnPurpose('vpc', 'vpc_id'),
+      test: (value) => typeof value === 'undefined',
+    }),
+  }),
   ipv4: ipv4ConfigInterface,
   ipv6: ipv6ConfigInterface,
   ip_ranges: array()