diff --git a/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md b/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md
new file mode 100644
index 00000000000..e4311cecf31
--- /dev/null
+++ b/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Replace 'react-select' with Autocomplete in Profile ([#10780](https://github.com/linode/manager/pull/10780))
diff --git a/packages/manager/cypress/e2e/core/account/security-questions.spec.ts b/packages/manager/cypress/e2e/core/account/security-questions.spec.ts
index aab84a220d3..bc280f36e5a 100644
--- a/packages/manager/cypress/e2e/core/account/security-questions.spec.ts
+++ b/packages/manager/cypress/e2e/core/account/security-questions.spec.ts
@@ -93,14 +93,14 @@ const setSecurityQuestionAnswer = (
   answer: string
 ) => {
   getSecurityQuestion(questionNumber).within(() => {
-    cy.get('[data-qa-enhanced-select]')
+    cy.findByLabelText(`Question ${questionNumber}`)
       .should('be.visible')
       .click()
       .type(`${question}{enter}`);
   });
 
   getSecurityQuestionAnswer(questionNumber).within(() => {
-    cy.get('[data-testid="textfield-input"]')
+    cy.findByLabelText(`Answer ${questionNumber}`)
       .should('be.visible')
       .should('be.enabled')
       .click()
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index 9172bf218c4..faf51f6d9c5 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/packages/manager/src/MainContent.tsx
@@ -141,7 +141,11 @@ const Kubernetes = React.lazy(() =>
   }))
 );
 const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
-const Profile = React.lazy(() => import('src/features/Profile/Profile'));
+const Profile = React.lazy(() =>
+  import('src/features/Profile/Profile').then((module) => ({
+    default: module.Profile,
+  }))
+);
 const NodeBalancers = React.lazy(
   () => import('src/features/NodeBalancers/NodeBalancers')
 );
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx
index d87e298ea51..9f31b39af99 100644
--- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx
+++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx
@@ -1,10 +1,12 @@
 import DoneIcon from '@mui/icons-material/Done';
-import Popper, { PopperProps } from '@mui/material/Popper';
+import Popper from '@mui/material/Popper';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import { omittedProps } from 'src/utilities/omittedProps';
 
+import type { PopperProps } from '@mui/material/Popper';
+
 export const StyledListItem = styled('li', {
   label: 'StyledListItem',
   shouldForwardProp: omittedProps(['selectAllOption']),
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
index de989e277c0..e6fbc02dd21 100644
--- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
@@ -15,6 +15,7 @@ import {
 } from './Autocomplete.styles';
 
 import type { AutocompleteProps } from '@mui/material/Autocomplete';
+import type { SxProps } from '@mui/system';
 import type { TextFieldProps } from 'src/components/TextField';
 
 export interface EnhancedAutocompleteProps<
@@ -26,7 +27,7 @@ export interface EnhancedAutocompleteProps<
     AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
     'renderInput'
   > {
-  /** Removes "select all" option for multiselect */
+  /** Removes "select all" option for mutliselect */
   disableSelectAll?: boolean;
   /** Provides a hint with error styling to assist users. */
   errorText?: string;
@@ -41,6 +42,10 @@ export interface EnhancedAutocompleteProps<
   placeholder?: string;
   /** Label for the "select all" option. */
   selectAllLabel?: string;
+  /**
+   * The prop that allows defining CSS style overrides for the PopperComponent.
+   */
+  sxPopperComponent?: SxProps;
   textFieldProps?: Partial<TextFieldProps>;
 }
 
@@ -88,6 +93,7 @@ export const Autocomplete = <
     placeholder,
     renderOption,
     selectAllLabel = '',
+    sxPopperComponent,
     textFieldProps,
     value,
     ...rest
@@ -104,6 +110,9 @@ export const Autocomplete = <
 
   return (
     <MuiAutocomplete
+      PopperComponent={(props) => {
+        return <CustomPopper {...props} sx={sxPopperComponent} />;
+      }}
       options={
         multiple && !disableSelectAll && options.length > 0
           ? optionsWithSelectAll
@@ -163,7 +172,6 @@ export const Autocomplete = <
         );
       }}
       ChipProps={{ deleteIcon: <CloseIcon /> }}
-      PopperComponent={CustomPopper}
       clearOnBlur={clearOnBlur}
       data-qa-autocomplete
       defaultValue={defaultValue}
diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
index 124ffd92732..96de8bb2306 100644
--- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
+++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
@@ -32,16 +32,16 @@ const props = {
 
 describe('Create API Token Drawer', () => {
   it('checks API Token Drawer rendering', () => {
-    const { getByTestId, getByText } = renderWithTheme(
+    const { getAllByTestId, getByTestId, getByText } = renderWithTheme(
       <CreateAPITokenDrawer {...props} />
     );
     const drawerTitle = getByText('Add Personal Access Token');
     expect(drawerTitle).toBeVisible();
 
     const labelTitle = getByText(/Label/);
-    const labelField = getByTestId('textfield-input');
+    const labelField = getAllByTestId('textfield-input');
     expect(labelTitle).toBeVisible();
-    expect(labelField).toBeEnabled();
+    expect(labelField[0]).toBeEnabled();
 
     const expiry = getByText(/Expiry/);
     expect(expiry).toBeVisible();
@@ -67,12 +67,12 @@ describe('Create API Token Drawer', () => {
         })
       );
 
-      const { getByLabelText, getByTestId, getByText } = renderWithTheme(
+      const { getAllByTestId, getByLabelText, getByText } = renderWithTheme(
         <CreateAPITokenDrawer {...props} />
       );
 
-      const labelField = getByTestId('textfield-input');
-      await userEvent.type(labelField, 'my-test-token');
+      const labelField = getAllByTestId('textfield-input');
+      await userEvent.type(labelField[0], 'my-test-token');
 
       const selectAllNoAccessPermRadioButton = getByLabelText(
         'Select no access for all'
@@ -110,8 +110,10 @@ describe('Create API Token Drawer', () => {
   });
 
   it('Should default to 6 months for expiration', () => {
-    const { getByText } = renderWithTheme(<CreateAPITokenDrawer {...props} />);
-    getByText('In 6 months');
+    const { getAllByRole } = renderWithTheme(
+      <CreateAPITokenDrawer {...props} />
+    );
+    expect(getAllByRole('combobox')[0]).toHaveDisplayValue('In 6 months');
   });
 
   it('Should show the Child Account Access scope for a parent user account with the parent/child feature flag on', () => {
diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
index bf6eab61363..b5df3b5d57c 100644
--- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
+++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
@@ -3,8 +3,8 @@ import { DateTime } from 'luxon';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Drawer } from 'src/components/Drawer';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { FormControl } from 'src/components/FormControl';
 import { FormHelperText } from 'src/components/FormHelperText';
 import { Notice } from 'src/components/Notice/Notice';
@@ -30,7 +30,6 @@ import {
   StyledSelectCell,
 } from './APITokenDrawer.styles';
 import {
-  Permission,
   allScopesAreTheSame,
   basePermNameMap,
   hasAccessBeenSelectedForAllScopes,
@@ -38,6 +37,8 @@ import {
   scopeStringToPermTuples,
 } from './utils';
 
+import type { Permission } from './utils';
+
 type Expiry = [string, string];
 
 export const genExpiryTups = (): Expiry[] => {
@@ -172,10 +173,6 @@ export const CreateAPITokenDrawer = (props: Props) => {
     form.setFieldValue('scopes', newScopes);
   };
 
-  const handleExpiryChange = (e: Item<string>) => {
-    form.setFieldValue('expiry', e.value);
-  };
-
   // Permission scopes with a different default when Selecting All for the specified access level.
   const excludedScopesFromSelectAll: ExcludedScope[] = [
     {
@@ -214,11 +211,26 @@ export const CreateAPITokenDrawer = (props: Props) => {
         value={form.values.label}
       />
       <FormControl data-testid="expiry-select">
-        <Select
-          isClearable={false}
+        <Autocomplete
+          onChange={(_, selected) =>
+            form.setFieldValue('expiry', selected.value)
+          }
+          sx={{
+            '&& .MuiAutocomplete-inputRoot': {
+              paddingLeft: 1,
+              paddingRight: 0,
+            },
+            '&& .MuiInput-input': {
+              padding: '0px 2px',
+            },
+          }}
+          sxPopperComponent={{
+            '&& .MuiAutocomplete-listbox': {
+              padding: 0,
+            },
+          }}
+          disableClearable
           label="Expiry"
-          name="expiry"
-          onChange={handleExpiryChange}
           options={expiryList}
           value={expiryList.find((item) => item.value === form.values.expiry)}
         />
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index 4a05ca75936..d6caaa14b50 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -1,10 +1,11 @@
 import { styled } from '@mui/material/styles';
 
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
-import Select from 'src/components/EnhancedSelect/Select';
+import { FormHelperText } from 'src/components/FormHelperText';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
-import { FormHelperText } from 'src/components/FormHelperText';
+import { omittedProps } from 'src/utilities/omittedProps';
 
 export const StyledCodeSentMessageBox = styled(Box, {
   label: 'StyledCodeSentMessageBox',
@@ -19,18 +20,22 @@ export const StyledPhoneNumberTitle = styled(Typography, {
   marginTop: theme.spacing(1.5),
 }));
 
-export const StyledButtonContainer = styled(Box, {
-  label: 'StyledButtonContainer',
+export const StyledLabel = styled(Typography, {
+  label: 'StyledLabel',
 })(({ theme }) => ({
-  gap: theme.spacing(),
-  [theme.breakpoints.down('md')]: {
-    marginTop: theme.spacing(2),
-  },
+  color: theme.name === 'light' ? '#555' : '#c9cacb',
+  fontSize: '.875rem',
+  lineHeight: '1',
+  marginBottom: '8px',
+  marginTop: theme.spacing(2),
+  padding: 0,
 }));
 
 export const StyledInputContainer = styled(Box, {
   label: 'StyledInputContainer',
+  shouldForwardProp: omittedProps(['isPhoneInputFocused']),
 })<{ isPhoneInputFocused: boolean }>(({ isPhoneInputFocused, theme }) => ({
+  backgroundColor: theme.name === 'dark' ? '#343438' : undefined,
   border: theme.name === 'light' ? '1px solid #ccc' : '1px solid #222',
   transition: 'border-color 225ms ease-in-out',
   width: 'fit-content',
@@ -46,28 +51,31 @@ export const StyledInputContainer = styled(Box, {
         })),
 }));
 
-export const StyledPhoneNumberInput = styled(TextField, {
-  label: 'StyledPhoneNumberInput',
-})(() => ({
-  '&.Mui-focused': {
+export const StyledISOCodeSelect = styled(Autocomplete, {
+  label: 'StyledISOCodeSelect',
+})(({ theme }) => ({
+  '& div.Mui-focused': {
     borderColor: 'unset',
     boxShadow: 'none',
   },
+  '& div.MuiAutocomplete-inputRoot': {
+    border: 'unset',
+  },
+  '&& .MuiInputBase-root svg': {
+    color: `${theme.palette.primary.main}`,
+    opacity: '1',
+  },
   '&:focus': {
     borderColor: 'unset',
     boxShadow: 'unset',
   },
-  border: 'unset',
-  minWidth: '300px',
+  height: '34px',
+  width: '70px !important',
 }));
 
-export const StyledSelect = styled(Select, {
-  label: 'StyledSelect',
-})(({ theme }) => ({
-  '& .MuiInputBase-input .react-select__indicators svg': {
-    color: `${theme.palette.primary.main} !important`,
-    opacity: '1 !important',
-  },
+export const StyledPhoneNumberInput = styled(TextField, {
+  label: 'StyledPhoneNumberInput',
+})(() => ({
   '&.Mui-focused': {
     borderColor: 'unset',
     boxShadow: 'none',
@@ -77,19 +85,7 @@ export const StyledSelect = styled(Select, {
     boxShadow: 'unset',
   },
   border: 'unset',
-  height: '34px',
-  width: '70px !important',
-}));
-
-export const StyledLabel = styled(Typography, {
-  label: 'StyledLabel',
-})(({ theme }) => ({
-  color: theme.name === 'light' ? '#555' : '#c9cacb',
-  fontSize: '.875rem',
-  lineHeight: '1',
-  marginBottom: '8px',
-  marginTop: theme.spacing(2),
-  padding: 0,
+  minWidth: '300px',
 }));
 
 export const StyledFormHelperText = styled(FormHelperText, {
@@ -102,3 +98,12 @@ export const StyledFormHelperText = styled(FormHelperText, {
   top: 42,
   width: '100%',
 }));
+
+export const StyledButtonContainer = styled(Box, {
+  label: 'StyledButtonContainer',
+})(({ theme }) => ({
+  gap: theme.spacing(),
+  [theme.breakpoints.down('md')]: {
+    marginTop: theme.spacing(2),
+  },
+}));
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
index c22efc95617..d6aa0d7bc31 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
@@ -1,9 +1,8 @@
-import { APIError } from '@linode/api-v4/lib/types';
+import { useQueryClient } from '@tanstack/react-query';
 import { useFormik } from 'formik';
-import { CountryCode, parsePhoneNumber } from 'libphonenumber-js';
+import { parsePhoneNumber } from 'libphonenumber-js';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from '@tanstack/react-query';
 
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
@@ -19,24 +18,30 @@ import {
   useVerifyPhoneVerificationCodeMutation,
 } from 'src/queries/profile/profile';
 
+import { countries } from './countries';
+import { getCountryFlag, getCountryName, getFormattedNumber } from './helpers';
 import {
   StyledButtonContainer,
   StyledCodeSentMessageBox,
   StyledFormHelperText,
+  StyledISOCodeSelect,
   StyledInputContainer,
   StyledLabel,
   StyledPhoneNumberInput,
   StyledPhoneNumberTitle,
-  StyledSelect,
 } from './PhoneVerification.styles';
-import { countries } from './countries';
-import { getCountryFlag, getCountryName, getFormattedNumber } from './helpers';
 
 import type {
   SendPhoneVerificationCodePayload,
   VerifyVerificationCodePayload,
 } from '@linode/api-v4/lib/profile/types';
-import type { Item } from 'src/components/EnhancedSelect/Select';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { CountryCode } from 'libphonenumber-js';
+
+export interface SelectPhoneVerificationOption {
+  label: string;
+  value: string;
+}
 
 export const PhoneVerification = ({
   phoneNumberRef,
@@ -67,18 +72,22 @@ export const PhoneVerification = ({
     mutateAsync: sendPhoneVerificationCode,
     reset: resetSendCodeMutation,
   } = useSendPhoneVerificationCodeMutation();
+
   const {
     error: verifyError,
     mutateAsync: sendVerificationCode,
     reset: resetCodeMutation,
   } = useVerifyPhoneVerificationCodeMutation();
+
   const isCodeSent = data !== undefined;
+
   const onSubmitPhoneNumber = async (
     values: SendPhoneVerificationCodePayload
   ) => {
     resetCodeMutation();
     return await sendPhoneVerificationCode(values);
   };
+
   const onSubmitVerificationCode = async (
     values: VerifyVerificationCodePayload
   ) => {
@@ -166,22 +175,10 @@ export const PhoneVerification = ({
       );
   };
 
-  const customStyles = {
-    menu: () => ({
-      marginLeft: '-1px !important',
-      marginTop: '0px !important',
-      width: '500px',
-    }),
-    singleValue: (provided: React.CSSProperties) =>
-      ({
-        ...provided,
-        fontSize: '20px',
-        textAlign: 'center',
-      } as const),
-  };
   const selectedCountry = countries.find(
     (country) => country.code === sendCodeForm.values.iso_code
   );
+
   const isFormSubmitting = isCodeSent
     ? verifyCodeForm.isSubmitting
     : sendCodeForm.isSubmitting;
@@ -204,6 +201,7 @@ export const PhoneVerification = ({
           </Typography>
         </StyledCodeSentMessageBox>
       ) : null}
+
       <Box>
         <form
           onSubmit={
@@ -259,33 +257,46 @@ export const PhoneVerification = ({
                 display="flex"
                 isPhoneInputFocused={isPhoneInputFocused}
               >
-                <StyledSelect
-                  isOptionSelected={(option) =>
-                    sendCodeForm.values.iso_code === option.value
-                  }
-                  onChange={(item: Item) =>
-                    sendCodeForm.setFieldValue('iso_code', item.value)
+                <StyledISOCodeSelect
+                  isOptionEqualToValue={(option, value) =>
+                    option.label === value.label
                   }
-                  options={countries.map((counrty) => ({
-                    label: `${getCountryName(counrty.name)} ${
-                      counrty.dialingCode
-                    } ${getCountryFlag(counrty.code)}`,
-                    value: counrty.code,
+                  onChange={(_, item: SelectPhoneVerificationOption) => {
+                    sendCodeForm.setFieldValue('iso_code', item.value);
+                  }}
+                  options={countries.map((country) => ({
+                    label: `${getCountryName(country.name)} ${
+                      country.dialingCode
+                    } ${getCountryFlag(country.code)}`,
+                    value: country.code,
                   }))}
+                  sxPopperComponent={{
+                    '& .MuiPaper-root.MuiAutocomplete-paper': {
+                      border: '1px solid #3683dc',
+                      maxHeight: '285px',
+                      overflow: 'hidden',
+                      textWrap: 'nowrap',
+                      width: 'fit-content',
+                    },
+                  }}
+                  textFieldProps={{
+                    hideLabel: true,
+                    style: {
+                      border: 'none',
+                      minWidth: '72px',
+                    },
+                  }}
                   value={{
                     label: getCountryFlag(sendCodeForm.values.iso_code),
-                    value: sendCodeForm.values.iso_code,
                   }}
-                  hideLabel
+                  autoHighlight
+                  disableClearable
+                  disablePortal={true}
                   id="iso_code"
-                  isClearable={false}
                   label="ISO Code"
-                  menuPlacement="bottom"
-                  name="iso_code"
-                  noMarginTop
                   onBlur={() => setIsPhoneInputFocused(false)}
                   onFocus={() => setIsPhoneInputFocused(true)}
-                  styles={customStyles}
+                  placeholder=""
                 />
                 <StyledPhoneNumberInput
                   InputProps={{
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
index 32e575e3cf7..a77e0e8b22d 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
@@ -1,16 +1,22 @@
-import { SecurityQuestion } from '@linode/api-v4/lib/profile';
 import * as React from 'react';
 
-import Select, { Item } from 'src/components/EnhancedSelect';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { InputLabel } from 'src/components/InputLabel';
 import { LinkButton } from 'src/components/LinkButton';
 import { Typography } from 'src/components/Typography';
 
+import type { SecurityQuestion } from '@linode/api-v4/lib/profile';
+
+export interface SelectQuestionOption {
+  label: string;
+  value: number;
+}
+
 interface Props {
   index: number;
   isReadOnly?: boolean;
   onClickEdit: () => void;
-  options: Item<number>[];
+  options: SelectQuestionOption[];
   questionResponse: SecurityQuestion | undefined;
   setFieldValue: (field: string, value: SecurityQuestion) => void;
 }
@@ -32,15 +38,8 @@ export const Question = (props: Props) => {
       }
     : undefined;
 
-  const name = `security_questions[${index}].id`;
   const label = `Question ${index + 1}`;
-  const onChange = (item: Item<number>) => {
-    setFieldValue(`security_questions[${index}]`, {
-      id: item.value,
-      question: item.label,
-      response: '',
-    });
-  };
+
   if (isReadOnly) {
     return (
       <>
@@ -55,14 +54,21 @@ export const Question = (props: Props) => {
     );
   }
   return (
-    <Select
+    <Autocomplete
+      onChange={(_, item) => {
+        setFieldValue(`security_questions[${index}]`, {
+          id: item.value,
+          question: item.label,
+          response: '',
+        });
+      }}
+      autoHighlight
       defaultValue={currentOption}
-      isClearable={false}
+      disableClearable
       label={label}
-      name={name}
-      onChange={onChange}
       options={options}
       placeholder="Select a question"
+      value={options.find((option) => option.value === questionResponse?.id)}
     />
   );
 };
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx
index 42ed09b940f..cab647664d9 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx
@@ -1,19 +1,20 @@
-import { SecurityQuestion } from '@linode/api-v4/lib/profile';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
-import { Item } from 'src/components/EnhancedSelect';
 
 import { Answer } from './Answer';
 import { Question } from './Question';
 
+import type { SelectQuestionOption } from './Question';
+import type { SecurityQuestion } from '@linode/api-v4/lib/profile';
+
 interface Props {
   edit: boolean;
   handleChange: any;
   index: number;
   onEdit: () => void;
-  options: Item<number>[];
+  options: SelectQuestionOption[];
   questionResponse: SecurityQuestion | undefined;
   securityQuestionRef?: React.RefObject<HTMLInputElement>;
   setFieldValue: (field: string, value: SecurityQuestion | number) => void;
diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx
index e3e94fe5e58..d011a5ce24d 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx
@@ -53,13 +53,11 @@ describe('Timezone change form', () => {
   });
 
   it("should include text with the user's current time zone", async () => {
-    const { getByText } = renderWithTheme(
+    const { queryByTestId } = renderWithTheme(
       <TimezoneForm loggedInAsCustomer={true} />,
       { queryClient }
     );
-
-    expect(getByText('New York', { exact: false })).toBeInTheDocument();
-    expect(getByText('Eastern Time', { exact: false })).toBeInTheDocument();
+    expect(queryByTestId('admin-notice')).toHaveTextContent('America/New_York');
   });
 });
 
diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
index 3e871764f68..884fea18900 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
@@ -5,14 +5,12 @@ import * as React from 'react';
 
 import timezones from 'src/assets/timezones/timezones';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Box } from 'src/components/Box';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { CircleProgress } from 'src/components/CircleProgress';
-import Select from 'src/components/EnhancedSelect/Select';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
 
-import type { Item } from 'src/components/EnhancedSelect/Select';
-
 interface Props {
   loggedInAsCustomer: boolean;
 }
@@ -23,6 +21,11 @@ interface Timezone {
   offset: number;
 }
 
+export interface TimezoneOption<T = string, L = string> {
+  label: L;
+  value: T;
+}
+
 export const formatOffset = ({ label, offset }: Timezone) => {
   const minutes = (Math.abs(offset) % 60).toLocaleString(undefined, {
     minimumIntegerDigits: 2,
@@ -34,7 +37,7 @@ export const formatOffset = ({ label, offset }: Timezone) => {
   return `\(GMT ${isPositive}${hours}:${minutes}\) ${label}`;
 };
 
-const renderTimeZonesList = (): Item<string>[] => {
+const renderTimezonesList = (): TimezoneOption<string>[] => {
   return timezones
     .map((tz) => ({ ...tz, offset: DateTime.now().setZone(tz.name).offset }))
     .sort((a, b) => a.offset - b.offset)
@@ -44,35 +47,38 @@ const renderTimeZonesList = (): Item<string>[] => {
     });
 };
 
-const timezoneList = renderTimeZonesList();
+const timezoneList = renderTimezonesList();
 
 export const TimezoneForm = (props: Props) => {
   const { loggedInAsCustomer } = props;
   const { enqueueSnackbar } = useSnackbar();
   const { data: profile } = useProfile();
+  const [timezoneValue, setTimezoneValue] = React.useState<
+    TimezoneOption<string> | string
+  >('');
   const { error, isPending, mutateAsync: updateProfile } = useMutateProfile();
-  const [value, setValue] = React.useState<Item<string> | null>(null);
   const timezone = profile?.timezone ?? '';
 
-  const handleTimezoneChange = (timezone: Item<string>) => {
-    setValue(timezone);
+  const handleTimezoneChange = (timezone: TimezoneOption<string>) => {
+    setTimezoneValue(timezone);
   };
 
   const onSubmit = () => {
-    if (value === null) {
+    if (timezoneValue === '') {
       return;
     }
 
-    updateProfile({ timezone: String(value.value) }).then(() => {
+    updateProfile({ timezone: String(timezoneValue) }).then(() => {
       enqueueSnackbar('Successfully updated timezone', { variant: 'success' });
     });
   };
 
-  const defaultTimeZone = timezoneList.find((eachZone) => {
+  const defaultTimezone = timezoneList.find((eachZone) => {
     return eachZone.value === timezone;
   });
 
-  const disabled = value === null || defaultTimeZone?.value === value?.value;
+  const disabled =
+    timezoneValue === '' || defaultTimezone?.value === timezoneValue;
 
   if (!profile) {
     return <CircleProgress />;
@@ -88,27 +94,28 @@ export const TimezoneForm = (props: Props) => {
           </Typography>
         </StyledLoggedInAsCustomerNotice>
       ) : null}
-      <StyledRootContainer
-        sx={(theme) => ({
-          [theme.breakpoints.down('md')]: {
-            alignItems: 'flex-start',
-            flexDirection: 'column',
-          },
-        })}
-        alignItems="flex-end"
-        display="flex"
-        justifyContent="space-between"
-      >
-        <Select
-          data-qa-tz-select
-          defaultValue={defaultTimeZone}
-          errorText={error?.[0].reason}
-          isClearable={false}
-          label="Timezone"
-          onChange={handleTimezoneChange}
-          options={timezoneList}
-          placeholder={'Choose a Timezone'}
-        />
+      <StyledRootContainer>
+        <Stack>
+          <Autocomplete
+            sxPopperComponent={{
+              maxHeight: '285px',
+              overflow: 'hidden',
+            }}
+            value={timezoneList.find(
+              (option) => option.value === timezoneValue
+            )}
+            autoHighlight
+            data-qa-tz-select
+            defaultValue={defaultTimezone}
+            disableClearable
+            errorText={error?.[0].reason}
+            label="Timezone"
+            onChange={(_, option) => handleTimezoneChange(option)}
+            options={timezoneList}
+            placeholder="Choose a Timezone"
+            sx={{ width: '416px' }}
+          />
+        </Stack>
         <ActionsPanel
           primaryButtonProps={{
             disabled,
@@ -129,10 +136,14 @@ export const TimezoneForm = (props: Props) => {
   );
 };
 
-const StyledRootContainer = styled(Box, {
+const StyledRootContainer = styled('div', {
   label: 'StyledRootContainer',
 })(({ theme }) => ({
+  alignItems: 'flex-end',
+  display: 'flex',
+  justifyContent: 'space-between',
   [theme.breakpoints.down('md')]: {
+    alignItems: 'flex-start',
     flexDirection: 'column',
   },
 }));
diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
index 1aa5aaa06d5..6cfcc2c5e13 100644
--- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
+++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
@@ -1,44 +1,55 @@
-import { Profile } from '@linode/api-v4/lib/profile';
-import { APIError } from '@linode/api-v4/lib/types';
 import { useTheme } from '@mui/material/styles';
 import { equals, lensPath, remove, set } from 'ramda';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import { FormControl } from 'src/components/FormControl';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
-import { FormControl } from 'src/components/FormControl';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
+import type { Profile } from '@linode/api-v4/lib/profile';
+import type { APIError } from '@linode/api-v4/lib/types';
+
+export interface LishAuthOption<T = string, L = string> {
+  label: L;
+  value: T;
+}
+
 export const LishSettings = () => {
   const theme = useTheme();
   const { data: profile, isLoading } = useProfile();
   const { mutateAsync: updateProfile } = useMutateProfile();
   const [submitting, setSubmitting] = React.useState<boolean>(false);
+  const [errors, setErrors] = React.useState<APIError[]>([]);
+  const [success, setSuccess] = React.useState<string>();
+  const thirdPartyEnabled = profile?.authentication_type !== 'password';
+
   const [lishAuthMethod, setLishAuthMethod] = React.useState<
     Profile['lish_auth_method'] | undefined
   >(profile?.lish_auth_method || 'password_keys');
+
   const [authorizedKeys, setAuthorizedKeys] = React.useState<string[]>(
     profile?.authorized_keys || []
   );
+
   const [authorizedKeysCount, setAuthorizedKeysCount] = React.useState<number>(
     profile?.authorized_keys ? profile!.authorized_keys.length : 1
   );
-  const [errors, setErrors] = React.useState<APIError[]>([]);
-  const [success, setSuccess] = React.useState<string>();
-  const thirdPartyEnabled = profile?.authentication_type !== 'password';
+
   const tooltipText = thirdPartyEnabled
     ? 'Password is disabled because Third-Party Authentication has been enabled.'
     : '';
+
   const hasErrorFor = getAPIErrorFor(
     {
       authorized_keys: 'ssh public keys',
@@ -46,13 +57,14 @@ export const LishSettings = () => {
     },
     errors
   );
+
   const generalError = hasErrorFor('none');
   const authMethodError = hasErrorFor('lish_auth_method');
   const authorizedKeysError = hasErrorFor('authorized_keys');
 
   const modeOptions = [
     {
-      isDisabled: profile?.authentication_type !== 'password',
+      disabled: profile?.authentication_type !== 'password',
       label: 'Allow both password and key authentication',
       value: 'password_keys',
     },
@@ -68,9 +80,9 @@ export const LishSettings = () => {
 
   const defaultMode = modeOptions.find((eachMode) => {
     if (profile?.authentication_type !== 'password') {
-      return (eachMode.value as any) === 'keys_only';
+      return (eachMode.value as Profile['lish_auth_method']) === 'keys_only';
     } else {
-      return (eachMode.value as any) === lishAuthMethod;
+      return (eachMode.value as Profile['lish_auth_method']) === lishAuthMethod;
     }
   });
 
@@ -85,7 +97,7 @@ export const LishSettings = () => {
 
     updateProfile({
       authorized_keys: keys,
-      lish_auth_method: lishAuthMethod as any,
+      lish_auth_method: lishAuthMethod as Profile['lish_auth_method'],
     })
       .then((profileData) => {
         setSubmitting(false);
@@ -103,9 +115,6 @@ export const LishSettings = () => {
       });
   };
 
-  const onListAuthMethodChange = (e: Item<Profile['lish_auth_method']>) =>
-    setLishAuthMethod(e.value);
-
   const onPublicKeyChange = (idx: number) => (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -133,20 +142,26 @@ export const LishSettings = () => {
         {isLoading ? null : (
           <>
             <FormControl sx={{ display: 'flex' }}>
-              <Select
+              <Autocomplete
+                onChange={(
+                  _,
+                  item: LishAuthOption<Profile['lish_auth_method']>
+                ) => setLishAuthMethod(item.value)}
                 textFieldProps={{
                   dataAttrs: {
                     'data-qa-mode-select': true,
                   },
                   tooltipText,
                 }}
+                value={modeOptions.find(
+                  (option) => option.value === lishAuthMethod
+                )}
                 defaultValue={defaultMode}
+                disableClearable
                 errorText={authMethodError}
+                getOptionDisabled={(option) => option.disabled === true}
                 id="mode-select"
-                isClearable={false}
                 label="Authentication Mode"
-                name="mode-select"
-                onChange={onListAuthMethodChange as any}
                 options={modeOptions}
               />
             </FormControl>
diff --git a/packages/manager/src/features/Profile/Profile.tsx b/packages/manager/src/features/Profile/Profile.tsx
index 39351969629..3e618aae6d3 100644
--- a/packages/manager/src/features/Profile/Profile.tsx
+++ b/packages/manager/src/features/Profile/Profile.tsx
@@ -3,7 +3,9 @@ import { useRouteMatch } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { NavTab, NavTabs } from 'src/components/NavTabs/NavTabs';
+import { NavTabs } from 'src/components/NavTabs/NavTabs';
+
+import type { NavTab } from 'src/components/NavTabs/NavTabs';
 
 const SSHKeys = React.lazy(() =>
   import('./SSHKeys/SSHKeys').then((module) => ({
@@ -42,7 +44,7 @@ const APITokens = React.lazy(() =>
   }))
 );
 
-const Profile = () => {
+export const Profile = () => {
   const { url } = useRouteMatch();
 
   const tabs: NavTab[] = [
@@ -96,5 +98,3 @@ const Profile = () => {
     </React.Fragment>
   );
 };
-
-export default Profile;