diff --git a/packages/manager/.changeset/pr-9445-tech-stories-1690571677414.md b/packages/manager/.changeset/pr-9445-tech-stories-1690571677414.md
new file mode 100644
index 00000000000..7e09f36566f
--- /dev/null
+++ b/packages/manager/.changeset/pr-9445-tech-stories-1690571677414.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration > SRC > Features > Linodes Pt 1 ([#9445](https://github.com/linode/manager/pull/9445))
diff --git a/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx b/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx
index 1cc5e0db4f2..e6322243789 100644
--- a/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx
+++ b/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx
@@ -6,8 +6,7 @@ import {
 } from '@linode/api-v4/lib/linodes';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { castDraft } from 'immer';
 import { intersection, pathOr } from 'ramda';
 import * as React from 'react';
@@ -51,36 +50,12 @@ const LinodesDetailHeader = React.lazy(
   () => import('../LinodesDetail/LinodesDetailHeader/LinodeDetailHeader')
 );
 
-const useStyles = makeStyles((theme: Theme) => ({
-  appBar: {
-    '& > div': {
-      marginTop: 0,
-    },
-  },
-  diskContainer: {
-    marginTop: theme.spacing(4),
-  },
-  outerContainer: {
-    paddingBottom: theme.spacing(2),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-  },
-  paper: {
-    padding: `${theme.spacing(3)} ${theme.spacing(3)} 0`,
-  },
-  root: {
-    marginTop: theme.spacing(1),
-  },
-  title: {
-    marginBottom: theme.spacing(2),
-  },
-}));
-
 const CloneLanding = () => {
   const { linodeId: _linodeId } = useParams<{ linodeId: string }>();
   const history = useHistory();
   const match = useRouteMatch();
   const location = useLocation();
+  const theme = useTheme();
 
   const linodeId = Number(_linodeId);
 
@@ -89,8 +64,6 @@ const CloneLanding = () => {
   const { data: linodes } = useAllLinodesQuery();
   const { data: linode } = useLinodeQuery(linodeId);
 
-  const classes = useStyles();
-
   const configs = _configs ?? [];
   const disks = _disks ?? [];
 
@@ -287,12 +260,12 @@ const CloneLanding = () => {
       <MutationNotification linodeId={linodeId} />
       <Notifications />
       <LinodesDetailHeader />
-      <Grid className={classes.root} container>
+      <Grid sx={{ marginTop: theme.spacing(1) }} container>
         <Grid lg={9} md={8} xs={12}>
-          <Paper className={classes.paper}>
+          <Paper sx={{ padding: `${theme.spacing(3)} ${theme.spacing(3)} 0` }}>
             <Typography
               aria-level={2}
-              className={classes.title}
+              sx={{ marginBottom: theme.spacing(2) }}
               data-qa-title
               role="heading"
               variant="h2"
@@ -310,25 +283,25 @@ const CloneLanding = () => {
               <TabLinkList tabs={tabs} />
               <TabPanels>
                 <SafeTabPanel index={0}>
-                  <div className={classes.outerContainer}>
+                  <StyledOuterDiv>
                     <Configs
                       // Cast the results of the Immer state to a mutable data structure.
                       configSelection={castDraft(state.configSelection)}
                       configs={configsInState}
                       handleSelect={toggleConfig}
                     />
-                  </div>
+                  </StyledOuterDiv>
                 </SafeTabPanel>
 
                 <SafeTabPanel index={1}>
-                  <div className={classes.outerContainer}>
+                  <StyledOuterDiv>
                     <Typography>
                       You can make a copy of a disk to the same or different
                       Linode. We recommend you power off your Linode first, and
                       keep it powered off until the disk has finished being
                       cloned.
                     </Typography>
-                    <div className={classes.diskContainer}>
+                    <div style={{ marginTop: theme.spacing(4) }}>
                       <Disks
                         // Cast the results of the Immer state to a mutable data structure.
                         diskSelection={castDraft(state.diskSelection)}
@@ -337,7 +310,7 @@ const CloneLanding = () => {
                         selectedConfigIds={selectedConfigIds}
                       />
                     </div>
-                  </div>
+                  </StyledOuterDiv>
                 </SafeTabPanel>
               </TabPanels>
             </Tabs>
@@ -385,4 +358,12 @@ const CloneLanding = () => {
   );
 };
 
+const StyledOuterDiv = styled('div', { label: 'StyledOuterDiv' })(
+  ({ theme }) => ({
+    paddingBottom: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  })
+);
+
 export default CloneLanding;
diff --git a/packages/manager/src/features/Linodes/CloneLanding/Configs.tsx b/packages/manager/src/features/Linodes/CloneLanding/Configs.tsx
index 7c0e436b8f4..de28452e1b5 100644
--- a/packages/manager/src/features/Linodes/CloneLanding/Configs.tsx
+++ b/packages/manager/src/features/Linodes/CloneLanding/Configs.tsx
@@ -1,5 +1,4 @@
 import { Config } from '@linode/api-v4/lib/linodes';
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
 import { Checkbox } from 'src/components/Checkbox';
@@ -13,15 +12,6 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 
 import { ConfigSelection } from './utilities';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    '& td': {
-      borderBottom: 'none',
-      paddingBottom: 0,
-      paddingTop: 0,
-    },
-  },
-}));
 export interface Props {
   configSelection: ConfigSelection;
   configs: Config[];
@@ -31,8 +21,6 @@ export interface Props {
 export const Configs: React.FC<Props> = (props) => {
   const { configSelection, configs, handleSelect } = props;
 
-  const classes = useStyles();
-
   return (
     <Paginate data={configs}>
       {({
@@ -45,7 +33,16 @@ export const Configs: React.FC<Props> = (props) => {
       }) => {
         return (
           <div>
-            <Table aria-label="List of Configurations" className={classes.root}>
+            <Table
+              aria-label="List of Configurations"
+              sx={{
+                '& td': {
+                  borderBottom: 'none',
+                  paddingBottom: 0,
+                  paddingTop: 0,
+                },
+              }}
+            >
               <TableBody>
                 {paginatedData.length === 0 ? (
                   <TableRowEmpty colSpan={1} />
diff --git a/packages/manager/src/features/Linodes/CloneLanding/Details.tsx b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx
index 0b88848624d..e4c93cbb9af 100644
--- a/packages/manager/src/features/Linodes/CloneLanding/Details.tsx
+++ b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx
@@ -1,7 +1,6 @@
 import { Disk, Linode } from '@linode/api-v4/lib/linodes';
 import Close from '@mui/icons-material/Close';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Button } from 'src/components/Button/Button';
@@ -22,58 +21,6 @@ import {
 } from './utilities';
 import { Link } from 'src/components/Link';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  clearButton: {
-    top: `-${theme.spacing(0.5)}`,
-  },
-  closeIcon: {
-    '& path': {
-      fill: theme.palette.primary.main,
-    },
-    alignItems: 'center',
-    backgroundColor: theme.color.white,
-    border: 'none',
-    cursor: 'pointer',
-    display: 'flex',
-    paddingBottom: 0,
-    paddingTop: 0,
-  },
-  errorText: {
-    '& a': {
-      color: theme.color.red,
-      textDecoration: 'underline',
-    },
-    color: theme.color.red,
-    marginTop: theme.spacing(1),
-  },
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing(2),
-  },
-  labelOuter: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  list: {
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-  },
-  nestedList: {
-    flexBasis: '100%',
-    marginLeft: theme.spacing(2),
-  },
-  root: {
-    padding: theme.spacing(2),
-  },
-  submitButton: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 interface Props {
   clearAll: () => void;
   currentLinodeId: number;
@@ -111,7 +58,7 @@ export const Configs: React.FC<Props> = (props) => {
 
   const region = regions?.find((r) => r.id === thisLinodeRegion);
 
-  const classes = useStyles();
+  const theme = useTheme();
 
   const noneError = errorMap.none;
   // When duplicating a disk on the SAME Linode, if there's not a enough space,
@@ -170,18 +117,18 @@ export const Configs: React.FC<Props> = (props) => {
   const estimatedCloneTime = getEstimatedCloneTime(totalSize, mode);
 
   return (
-    <Paper className={classes.root}>
-      <header className={classes.header}>
+    <Paper sx={{ padding: theme.spacing(2) }}>
+      <StyledHeader>
         <Typography variant="h2">Selected</Typography>
         <Button
           buttonType="secondary"
-          className={classes.clearButton}
           compactX
           onClick={clearAll}
+          sx={{ top: `-${theme.spacing(0.5)}` }}
         >
           Clear
         </Button>
-      </header>
+      </StyledHeader>
 
       {noneError && !isNoneErrorActuallyALinodeError && (
         <Notice error text={noneError} />
@@ -191,22 +138,21 @@ export const Configs: React.FC<Props> = (props) => {
         {selectedConfigs.map((eachConfig) => {
           return (
             <ListItem
-              className={classes.list}
+              sx={{ flexWrap: 'wrap', justifyContent: 'space-between' }}
               dense
               disableGutters
               key={eachConfig.id}
             >
-              <div className={classes.labelOuter}>
+              <StyledDiv>
                 <Typography variant="h3">{eachConfig.label}</Typography>
-                <button
-                  className={classes.closeIcon}
+                <StyledButton
                   data-qa-inline-delete
                   onClick={() => handleToggleConfig(eachConfig.id)}
                 >
                   <Close />
-                </button>
-              </div>
-              <List className={classes.nestedList}>
+                </StyledButton>
+              </StyledDiv>
+              <List sx={{ flexBasis: '100%', marginLeft: theme.spacing(2) }}>
                 {eachConfig.associatedDisks.map((eachDisk) => {
                   return (
                     <ListItem dense disableGutters key={eachDisk.label}>
@@ -223,19 +169,18 @@ export const Configs: React.FC<Props> = (props) => {
         {selectedDisks.map((eachDisk) => {
           return (
             <ListItem
-              className={classes.list}
+              sx={{ flexWrap: 'wrap', justifyContent: 'space-between' }}
               dense
               disableGutters
               key={eachDisk.id}
             >
               <Typography variant="h3">{eachDisk.label}</Typography>
-              <button
-                className={classes.closeIcon}
+              <StyledButton
                 data-qa-inline-delete
                 onClick={() => handleToggleDisk(eachDisk.id)}
               >
                 <Close />
-              </button>
+              </StyledButton>
             </ListItem>
           );
         })}
@@ -272,19 +217,19 @@ export const Configs: React.FC<Props> = (props) => {
       />
 
       {linodeError && (
-        <Typography className={classes.errorText} variant="body1">
+        <StyledTypography variant="body1">
           {linodeError}{' '}
           <Link to={errorMessageLinks.shrink}>Shrink your existing disks</Link>{' '}
           or{' '}
           <Link to={errorMessageLinks.resize}>
             resize your Linode to a larger plan.
           </Link>
-        </Typography>
+        </StyledTypography>
       )}
 
       <Button
         buttonType="primary"
-        className={classes.submitButton}
+        sx={{ marginTop: theme.spacing(3) }}
         disabled={isCloneButtonDisabled}
         loading={isSubmitting}
         onClick={handleClone}
@@ -295,4 +240,46 @@ export const Configs: React.FC<Props> = (props) => {
   );
 };
 
+const StyledButton = styled('button', { label: 'StyledButton' })(
+  ({ theme }) => ({
+    '& path': {
+      fill: theme.palette.primary.main,
+    },
+    alignItems: 'center',
+    backgroundColor: theme.color.white,
+    border: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    paddingBottom: 0,
+    paddingTop: 0,
+  })
+);
+
+const StyledTypography = styled(Typography, { label: 'StyledTypography' })(
+  ({ theme }) => ({
+    '& a': {
+      color: theme.color.red,
+      textDecoration: 'underline',
+    },
+    color: theme.color.red,
+    marginTop: theme.spacing(1),
+  })
+);
+
+const StyledHeader = styled('header', { label: 'StyledHeader' })(
+  ({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing(2),
+  })
+);
+
+const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+}));
+
 export default Configs;
diff --git a/packages/manager/src/features/Linodes/CloneLanding/Disks.tsx b/packages/manager/src/features/Linodes/CloneLanding/Disks.tsx
index 13ba6799e97..e3df05fd264 100644
--- a/packages/manager/src/features/Linodes/CloneLanding/Disks.tsx
+++ b/packages/manager/src/features/Linodes/CloneLanding/Disks.tsx
@@ -1,6 +1,5 @@
 import { Disk } from '@linode/api-v4/lib/linodes';
 import Grid from '@mui/material/Unstable_Grid2';
-import { makeStyles } from '@mui/styles';
 import { intersection, pathOr } from 'ramda';
 import * as React from 'react';
 
@@ -16,15 +15,6 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 
 import { DiskSelection } from './utilities';
 
-const useStyles = makeStyles(() => ({
-  labelCol: {
-    width: '65%',
-  },
-  sizeCol: {
-    width: '35%',
-  },
-}));
-
 export interface Props {
   diskSelection: DiskSelection;
   disks: Disk[];
@@ -35,8 +25,6 @@ export interface Props {
 export const Disks: React.FC<Props> = (props) => {
   const { diskSelection, disks, handleSelect, selectedConfigIds } = props;
 
-  const classes = useStyles();
-
   return (
     <Paginate data={disks}>
       {({
@@ -54,8 +42,8 @@ export const Disks: React.FC<Props> = (props) => {
                 <Table aria-label="List of Disks">
                   <TableHead>
                     <TableRow>
-                      <TableCell className={classes.labelCol}>Label</TableCell>
-                      <TableCell className={classes.sizeCol}>Size</TableCell>
+                      <TableCell sx={{ width: '65%' }}>Label</TableCell>
+                      <TableCell sx={{ width: '35%' }}>Size</TableCell>
                     </TableRow>
                   </TableHead>
                   <TableBody>
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx
index 3ab4c6676d5..b1f7e8d18db 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx
@@ -1,6 +1,5 @@
 import { Interface, Linode } from '@linode/api-v4/lib/linodes';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -21,33 +20,6 @@ import { privateIPRegex } from 'src/utilities/ipUtils';
 import AttachVLAN from './AttachVLAN';
 import { VLANAccordion } from './VLANAccordion';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  addons: {
-    marginTop: theme.spacing(3),
-  },
-  caption: {
-    marginTop: -8,
-    paddingLeft: `calc(${theme.spacing(2)} + 18px)`, // 34,
-    [theme.breakpoints.up('md')]: {
-      paddingLeft: `calc(${theme.spacing(4)} + 18px)`, // 50
-    },
-  },
-  label: {
-    '& > span:last-child': {
-      color: theme.color.headline,
-      fontFamily: theme.font.bold,
-      fontSize: '1rem',
-      lineHeight: '1.2em',
-      [theme.breakpoints.up('md')]: {
-        marginLeft: theme.spacing(2),
-      },
-    },
-  },
-  title: {
-    marginBottom: theme.spacing(2),
-  },
-}));
-
 export interface AddonsPanelProps {
   accountBackups: boolean;
   backups: boolean;
@@ -89,7 +61,7 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
     vlanLabel,
   } = props;
 
-  const classes = useStyles();
+  const theme = useTheme();
   const flags = useFlags();
 
   const { data: image } = useImageQuery(
@@ -191,8 +163,8 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
           vlanLabel={vlanLabel}
         />
       )}
-      <Paper className={classes.addons} data-qa-add-ons>
-        <Typography className={classes.title} variant="h2">
+      <Paper sx={{ marginTop: theme.spacing(3) }} data-qa-add-ons>
+        <Typography sx={{ marginBottom: theme.spacing(2) }} variant="h2">
           Add-ons{' '}
           {backupsDisabledReason && (
             <TooltipIcon status="help" text={backupsDisabledReason} />
@@ -204,7 +176,7 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
             to use the backup service.
           </Notice>
         )}
-        <FormControlLabel
+        <StyledFormControlLabel
           control={
             <Checkbox
               data-qa-check-backups={
@@ -221,9 +193,8 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
               {renderBackupsPrice()}
             </Box>
           }
-          className={classes.label}
         />
-        <Typography className={classes.caption} variant="body1">
+        <StyledTypography variant="body1">
           {accountBackups ? (
             <React.Fragment>
               You have enabled automatic backups for your account. This Linode
@@ -237,9 +208,9 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
               are priced according to the Linode plan selected above.
             </React.Fragment>
           )}
-        </Typography>
+        </StyledTypography>
         <Divider />
-        <FormControlLabel
+        <StyledFormControlLabel
           control={
             <Checkbox
               checked={isPrivateIPChecked}
@@ -249,7 +220,6 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
               onChange={togglePrivateIP}
             />
           }
-          className={classes.label}
           label="Private IP"
         />
       </Paper>
@@ -257,6 +227,30 @@ export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
   );
 });
 
+const StyledTypography = styled(Typography, { label: 'StyledTypography' })(
+  ({ theme }) => ({
+    marginTop: -8,
+    paddingLeft: `calc(${theme.spacing(2)} + 18px)`, // 34,
+    [theme.breakpoints.up('md')]: {
+      paddingLeft: `calc(${theme.spacing(4)} + 18px)`, // 50
+    },
+  })
+);
+
+const StyledFormControlLabel = styled(FormControlLabel, {
+  label: 'StyledFormControlLabel',
+})(({ theme }) => ({
+  '& > span:last-child': {
+    color: theme.color.headline,
+    fontFamily: theme.font.bold,
+    fontSize: '1rem',
+    lineHeight: '1.2em',
+    [theme.breakpoints.up('md')]: {
+      marginLeft: theme.spacing(2),
+    },
+  },
+}));
+
 const getVlanDisabledReason = (
   isBareMetal: boolean,
   createType: CreateTypes,
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/index.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/index.tsx
index d5d1f6949b8..f2ed070d0ae 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/index.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/index.tsx
@@ -1,6 +1,5 @@
 import { CreateLinodeRequest } from '@linode/api-v4/lib/linodes';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import React, { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -20,38 +19,6 @@ import { generateCLICommand } from 'src/utilities/generate-cli';
 
 import CodeBlock from '../CodeBlock';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  actionPanelStyles: {
-    marginTop: '18px !important',
-    paddingBottom: 0,
-    paddingTop: 0,
-  },
-  guides: {
-    marginTop: 16,
-  },
-  modalContent: {
-    overflowX: 'hidden',
-    paddingBottom: '0px',
-  },
-  modalIntroTypoClass: {
-    paddingBottom: '6px',
-  },
-  otherTools: {
-    fontFamily: theme.font.bold,
-    fontSize: '14px !important',
-    fontWeight: 400,
-  },
-  tabDescription: {
-    marginTop: theme.spacing(2),
-  },
-  tabsContainer: {
-    paddingTop: theme.spacing(),
-  },
-  tabsStyles: {
-    marginTop: '14px',
-  },
-}));
-
 export interface Props {
   isOpen: boolean;
   onClose: () => void;
@@ -62,7 +29,7 @@ export interface Props {
 const ApiAwarenessModal = (props: Props) => {
   const { isOpen, onClose, payLoad, route } = props;
 
-  const classes = useStyles();
+  const theme = useTheme();
   const history = useHistory();
   const { events } = useEvents();
 
@@ -108,14 +75,17 @@ const ApiAwarenessModal = (props: Props) => {
 
   return (
     <Dialog
-      className={classes.modalContent}
+      sx={{
+        overflowX: 'hidden',
+        paddingBottom: '0px',
+      }}
       fullWidth
       maxWidth="sm"
       onClose={onClose}
       open={isOpen}
       title="Create Linode"
     >
-      <Typography className={classes.modalIntroTypoClass} variant="body1">
+      <Typography sx={{ paddingBottom: '6px' }} variant="body1">
         Create a Linode in the command line using either cURL or the Linode CLI
         — both of which are powered by the Linode API. Select one of the methods
         below and paste the corresponding command into your local terminal. The
@@ -123,14 +93,14 @@ const ApiAwarenessModal = (props: Props) => {
         the Cloud Manager create form.
       </Typography>
       <Tabs
-        className={classes.tabsContainer}
+        sx={{ paddingTop: theme.spacing() }}
         defaultIndex={0}
         onChange={handleTabChange}
       >
         <TabLinkList tabs={tabs} />
         <TabPanels>
           <SafeTabPanel index={0}>
-            <Typography className={classes.tabDescription} variant="body1">
+            <Typography sx={{ marginTop: theme.spacing(2) }} variant="body1">
               Most Linode API requests need to be authenticated with a valid{' '}
               <Link
                 onClick={() =>
@@ -207,7 +177,13 @@ const ApiAwarenessModal = (props: Props) => {
         </TabPanels>
       </Tabs>
       <Notice marketing spacingBottom={0} spacingTop={24}>
-        <Typography className={classes.otherTools}>
+        <Typography
+          sx={{
+            fontFamily: theme.font.bold,
+            fontSize: '14px !important',
+            fontWeight: 400,
+          }}
+        >
           Deploy and manage your infrastructure with the{' '}
           <Link
             onClick={() =>
@@ -237,13 +213,13 @@ const ApiAwarenessModal = (props: Props) => {
         </Typography>
       </Notice>
       <ActionsPanel
+        sx={{ marginTop: '18px !important', paddingBottom: 0, paddingTop: 0 }}
         secondaryButtonProps={{
           compactX: true,
           'data-testid': 'close-button',
           label: 'Close',
           onClick: onClose,
         }}
-        className={classes.actionPanelStyles}
       />
     </Dialog>
   );
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx
index ee6cae68e97..1a49a165f34 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx
@@ -9,12 +9,6 @@ import { Divider } from 'src/components/Divider';
 import { Typography } from 'src/components/Typography';
 import SelectionCardWrapper from 'src/features/Linodes/LinodesCreate/SelectionCardWrapper';
 
-const AppPanelGrid = styled(Grid)(({ theme }) => ({
-  marginBottom: theme.spacing(),
-  marginTop: theme.spacing(2),
-  padding: `${theme.spacing(1)} 0`,
-}));
-
 interface Props {
   apps: StackScript[];
   disabled: boolean;
@@ -96,4 +90,10 @@ export const AppPanelSection: React.FC<Props> = (props) => {
   );
 };
 
+const AppPanelGrid = styled(Grid)(({ theme }) => ({
+  marginBottom: theme.spacing(),
+  marginTop: theme.spacing(2),
+  padding: `${theme.spacing(1)} 0`,
+}));
+
 export default AppPanelSection;
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx
index 03037fdfa37..1dd7e98ff9e 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/AttachVLAN.tsx
@@ -1,7 +1,6 @@
 import { Interface } from '@linode/api-v4/lib/linodes';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useQueryClient } from 'react-query';
 
@@ -20,22 +19,6 @@ import {
 import InterfaceSelect from '../LinodesDetail/LinodeSettings/InterfaceSelect';
 
 // @TODO Delete this file when VPC is released
-const useStyles = makeStyles((theme: Theme) => ({
-  paragraphBreak: {
-    marginTop: theme.spacing(2),
-  },
-  title: {
-    '& button': {
-      paddingLeft: theme.spacing(),
-    },
-    alignItems: 'center',
-    display: 'flex',
-    marginBottom: theme.spacing(2),
-  },
-  vlan: {
-    marginTop: theme.spacing(3),
-  },
-}));
 
 interface Props {
   handleVLANChange: (updatedInterface: Interface) => void;
@@ -62,7 +45,7 @@ const AttachVLAN: React.FC<CombinedProps> = (props) => {
     vlanLabel,
   } = props;
 
-  const classes = useStyles();
+  const theme = useTheme();
 
   const queryClient = useQueryClient();
 
@@ -90,15 +73,25 @@ const AttachVLAN: React.FC<CombinedProps> = (props) => {
   )}.`;
 
   return (
-    <Paper className={classes.vlan} data-qa-add-ons>
-      <Typography className={classes.title} variant="h2">
+    <Paper sx={{ marginTop: theme.spacing(3) }} data-qa-add-ons>
+      <Typography
+        sx={{
+          '& button': {
+            paddingLeft: theme.spacing(),
+          },
+          alignItems: 'center',
+          display: 'flex',
+          marginBottom: theme.spacing(2),
+        }}
+        variant="h2"
+      >
         Attach a VLAN{' '}
         {helperText ? <TooltipIcon status="help" text={helperText} /> : null}
       </Typography>
       <Grid container>
         <Grid xs={12}>
           <Typography>{regionalAvailabilityMessage}</Typography>
-          <Typography className={classes.paragraphBreak} variant="body1">
+          <Typography sx={{ marginTop: theme.spacing(2) }} variant="body1">
             VLANs are used to create a private L2 Virtual Local Area Network
             between Linodes. A VLAN created or attached in this section will be
             assigned to the eth1 interface, with eth0 being used for connections
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/index.tsx b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/index.tsx
index bf7d81fa67b..adc2f1457bf 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/index.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/index.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
-import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics';
+import {
+  StyledCommandDiv,
+  StyledCopyTooltip,
+  StyledHighlightedMarkdown,
+} from './styles';
 
-import { useCodeBlockStyles } from './styles';
 export interface Props {
   command: string;
   commandType: string;
@@ -13,25 +15,19 @@ export interface Props {
 
 const CodeBlock = (props: Props) => {
   const { command, commandType, language } = props;
-  const classes = useCodeBlockStyles();
 
   const handleCopyIconClick = () => {
     sendApiAwarenessClickEvent('Copy Icon', commandType);
   };
 
   return (
-    <div className={classes.commandDisplay}>
-      <HighlightedMarkdown
-        className={classes.commandWrapper}
+    <StyledCommandDiv>
+      <StyledHighlightedMarkdown
         language={language}
         textOrMarkdown={'```\n' + command + '\n```'}
       />
-      <CopyTooltip
-        className={classes.copyIcon}
-        onClickCallback={handleCopyIconClick}
-        text={command}
-      />
-    </div>
+      <StyledCopyTooltip onClickCallback={handleCopyIconClick} text={command} />
+    </StyledCommandDiv>
   );
 };
 
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/styles.ts
index cfc50a387ad..a6c18b11e8d 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/styles.ts
+++ b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/styles.ts
@@ -1,43 +1,50 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
+import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 
-export const useCodeBlockStyles = makeStyles((theme: Theme) => ({
-  commandDisplay: {
+export const StyledCommandDiv = styled('div', { label: 'StyledCommandDiv' })(
+  ({ theme }) => ({
     '& pre': {
       marginBottom: 0,
-      marginTop: '24px',
+      marginTop: `${theme.spacing(3)}`,
     },
     position: 'relative',
-  },
-  commandWrapper: {
-    '& .hljs': {
-      '& .hljs-literal, .hljs-built_in': {
-        color: '#f8f8f2',
-      },
-      '& .hljs-string': {
-        color: '#e6db74',
-      },
-      '& .hljs-symbol': {
-        color: '#f8f8f2',
-      },
+  })
+);
 
-      '& .hljs-variable': {
-        color: 'teal',
-      },
-      backgroundColor: '#32363b',
+export const StyledHighlightedMarkdown = styled(HighlightedMarkdown, {
+  label: 'StyledHighlightedMarkdown',
+})(({ theme }) => ({
+  '& .hljs': {
+    '& .hljs-literal, .hljs-built_in': {
       color: '#f8f8f2',
-      padding: `${theme.spacing(4)}px ${theme.spacing(2)}px`,
     },
-  },
-  copyIcon: {
-    '& svg': {
-      color: '#17CF73',
+    '& .hljs-string': {
+      color: '#e6db74',
     },
-    '& svg:hover': {
-      color: '#00B159',
+    '& .hljs-symbol': {
+      color: '#f8f8f2',
+    },
+
+    '& .hljs-variable': {
+      color: 'teal',
     },
-    position: 'absolute',
-    right: '12px',
-    top: '8px',
+    backgroundColor: '#32363b',
+    color: '#f8f8f2',
+    padding: `${theme.spacing(4)} ${theme.spacing(2)}`,
+  },
+}));
+
+export const StyledCopyTooltip = styled(CopyTooltip, {
+  label: 'StyledCopyTooltip',
+})(({ theme }) => ({
+  '& svg': {
+    color: '#17CF73',
+  },
+  '& svg:hover': {
+    color: '#00B159',
   },
+  position: 'absolute',
+  right: `${theme.spacing(1.5)}`,
+  top: `${theme.spacing(1)}`,
 }));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.styles.ts
new file mode 100644
index 00000000000..dc3c949a13b
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.styles.ts
@@ -0,0 +1,71 @@
+import { styled } from '@mui/material/styles';
+import { isPropValid } from 'src/utilities/isPropValid';
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
+import { Paper } from 'src/components/Paper';
+import type { LinodeCreateProps } from './LinodeCreate';
+import TabPanels from 'src/components/core/ReachTabPanels';
+
+type StyledLinodeCreateProps = Pick<LinodeCreateProps, 'showAgreement'>;
+
+export const StyledButtonGroupBox = styled(Box, { label: 'StyledButtonGroup' })(
+  ({ theme }) => ({
+    marginTop: theme.spacing(3),
+    [theme.breakpoints.down('sm')]: {
+      justifyContent: 'flex-end',
+    },
+  })
+);
+
+export const StyledCreateButton = styled(Button, {
+  label: 'StyledCreateButton',
+})(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+  [theme.breakpoints.down('md')]: {
+    marginRight: theme.spacing(1),
+  },
+}));
+
+export const StyledForm = styled('form', { label: 'StyledForm' })({
+  width: '100%',
+});
+
+export const StyledMessageDiv = styled('div', {
+  label: 'StyledMessageDiv',
+  shouldForwardProp: (prop) => isPropValid(['showAgreement'], prop),
+})<StyledLinodeCreateProps>(({ theme, showAgreement }) => ({
+  display: 'flex',
+  flexDirection: 'column' as const,
+  flexGrow: 1,
+  gap: theme.spacing(2),
+  [(theme.breakpoints.down('sm'), theme.breakpoints.down('md'))]: {
+    margin: theme.spacing(1),
+  },
+
+  // conditional styling
+  ...(showAgreement
+    ? {
+        maxWidth: '70%',
+        [theme.breakpoints.down('sm')]: {
+          maxWidth: 'unset',
+        },
+      }
+    : {}),
+}));
+
+export const StyledPaper = styled(Paper, { label: 'StyledPaper' })(
+  ({ theme }) => ({
+    '& [role="tablist"]': {
+      marginBottom: theme.spacing(),
+      marginTop: theme.spacing(2),
+    },
+  })
+);
+
+export const StyledTabPanel = styled(TabPanels, { label: 'StyledTabPanel' })(
+  ({ theme }) => ({
+    '& .MuiPaper-root': {
+      padding: 0,
+    },
+  })
+);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
index 1b926413aa4..ca4e19ab2de 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -1,9 +1,6 @@
 import { InterfacePayload, restoreBackup } from '@linode/api-v4/lib/linodes';
 import { Tag } from '@linode/api-v4/lib/tags/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
-import classNames from 'classnames';
 import cloneDeep from 'lodash/cloneDeep';
 import * as React from 'react';
 import { MapDispatchToProps, connect } from 'react-redux';
@@ -13,7 +10,6 @@ import { v4 } from 'uuid';
 
 import AccessPanel from 'src/components/AccessPanel/AccessPanel';
 import { Box } from 'src/components/Box';
-import { Button } from 'src/components/Button/Button';
 import { CheckoutSummary } from 'src/components/CheckoutSummary/CheckoutSummary';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
@@ -24,7 +20,6 @@ import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel';
 import { SelectRegionPanel } from 'src/components/SelectRegionPanel/SelectRegionPanel';
 import { TabLinkList } from 'src/components/TabLinkList/TabLinkList';
 import { Typography } from 'src/components/Typography';
-import { Paper } from 'src/components/Paper';
 import TabPanels from 'src/components/core/ReachTabPanels';
 import Tabs from 'src/components/core/ReachTabs';
 import { DefaultProps as ImagesProps } from 'src/containers/images.container';
@@ -76,63 +71,18 @@ import {
   WithDisplayData,
   WithTypesRegionsAndImages,
 } from './types';
+import {
+  StyledButtonGroupBox,
+  StyledCreateButton,
+  StyledForm,
+  StyledMessageDiv,
+  StyledPaper,
+  StyledTabPanel,
+} from './LinodeCreate.styles';
 
 import type { Tab } from 'src/components/TabLinkList/TabLinkList';
 
-type ClassNames =
-  | 'buttonGroup'
-  | 'createButton'
-  | 'form'
-  | 'imageSelect'
-  | 'messageGroup'
-  | 'messageGroupMaxWidth'
-  | 'stackScriptWrapper';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    buttonGroup: {
-      marginTop: theme.spacing(3),
-      [theme.breakpoints.down('sm')]: {
-        justifyContent: 'flex-end',
-      },
-    },
-    createButton: {
-      marginLeft: theme.spacing(1),
-      [theme.breakpoints.down('md')]: {
-        marginRight: theme.spacing(1),
-      },
-    },
-    form: {
-      width: '100%',
-    },
-    imageSelect: {
-      '& .MuiPaper-root': {
-        padding: 0,
-      },
-    },
-    messageGroup: {
-      display: 'flex',
-      flexDirection: 'column',
-      flexGrow: 1,
-      gap: theme.spacing(2),
-      [(theme.breakpoints.down('sm'), theme.breakpoints.down('md'))]: {
-        margin: theme.spacing(1),
-      },
-    },
-    messageGroupMaxWidth: {
-      maxWidth: '70%',
-      [theme.breakpoints.down('sm')]: {
-        maxWidth: 'unset',
-      },
-    },
-    stackScriptWrapper: {
-      '& [role="tablist"]': {
-        marginBottom: theme.spacing(),
-        marginTop: theme.spacing(2),
-      },
-    },
-  });
-interface Props {
+export interface LinodeCreateProps {
   backupsMonthlyPrice?: null | number;
   checkValidation: LinodeCreateValidation;
   createType: CreateTypes;
@@ -181,10 +131,9 @@ const errorMap = [
 type InnerProps = WithTypesRegionsAndImages &
   ReduxStateProps &
   StackScriptFormStateHandlers &
-  Props;
+  LinodeCreateProps;
 
-type CombinedProps = Props &
-  InnerProps &
+type CombinedProps = InnerProps &
   AllFormStateAndHandlers &
   AppsData &
   ReduxStateProps &
@@ -192,7 +141,6 @@ type CombinedProps = Props &
   ImagesProps &
   WithLinodesProps &
   RegionsProps &
-  WithStyles<ClassNames> &
   WithTypesProps &
   RouteComponentProps<{}> &
   FeatureFlagConsumerProps;
@@ -265,7 +213,6 @@ export class LinodeCreate extends React.PureComponent<
     const {
       accountBackupsEnabled,
       backupsMonthlyPrice,
-      classes,
       errors,
       formIsSubmitting,
       handleAgreementChange,
@@ -405,7 +352,7 @@ export class LinodeCreate extends React.PureComponent<
       (imageIsCloudInitCompatible || linodeIsCloudInitCompatible);
 
     return (
-      <form className={classes.form}>
+      <StyledForm>
         <Grid className="py0">
           {hasErrorFor.none && !!showGeneralError && (
             <Notice error spacingTop={8} text={hasErrorFor.none} />
@@ -453,10 +400,10 @@ export class LinodeCreate extends React.PureComponent<
               </SafeTabPanel>
               <SafeTabPanel index={2}>
                 <Tabs defaultIndex={stackScriptSelectedTab}>
-                  <Paper className={classes.stackScriptWrapper}>
+                  <StyledPaper>
                     <Typography variant="h2">Create From:</Typography>
                     <TabLinkList tabs={this.stackScriptTabs} />
-                    <TabPanels className={classes.imageSelect}>
+                    <StyledTabPanel>
                       <SafeTabPanel index={0}>
                         <FromStackScriptContent
                           accountBackupsEnabled={accountBackupsEnabled}
@@ -485,8 +432,8 @@ export class LinodeCreate extends React.PureComponent<
                           {...rest}
                         />
                       </SafeTabPanel>
-                    </TabPanels>
-                  </Paper>
+                    </StyledTabPanel>
+                  </StyledPaper>
                 </Tabs>
               </SafeTabPanel>
               <SafeTabPanel index={3}>
@@ -635,12 +582,7 @@ export class LinodeCreate extends React.PureComponent<
             flexWrap="wrap"
             justifyContent={showAgreement ? 'space-between' : 'flex-end'}
           >
-            <div
-              className={classNames({
-                [classes.messageGroup]: true,
-                [classes.messageGroupMaxWidth]: !!showAgreement,
-              })}
-            >
+            <StyledMessageDiv showAgreement={!!showAgreement}>
               <SMTPRestrictionText>
                 {({ text }) => <Grid xs={12}>{text}</Grid>}
               </SMTPRestrictionText>
@@ -651,50 +593,47 @@ export class LinodeCreate extends React.PureComponent<
                   onChange={handleAgreementChange}
                 />
               ) : null}
-            </div>
+            </StyledMessageDiv>
           </Box>
-          <Box
+          <StyledButtonGroupBox
             alignItems="center"
-            className={classes.buttonGroup}
             display="flex"
             justifyContent="flex-end"
           >
-            <Button
+            <StyledCreateButton
               disabled={
                 formIsSubmitting ||
                 userCannotCreateLinode ||
                 (showAgreement && !signedAgreement)
               }
               buttonType="outlined"
-              className={classes.createButton}
               data-qa-api-cli-linode
               onClick={this.handleClickCreateUsingCommandLine}
             >
               Create using command line
-            </Button>
-            <Button
+            </StyledCreateButton>
+            <StyledCreateButton
               disabled={
                 formIsSubmitting ||
                 userCannotCreateLinode ||
                 (showAgreement && !signedAgreement)
               }
               buttonType="primary"
-              className={classes.createButton}
               data-qa-deploy-linode
               loading={formIsSubmitting}
               onClick={this.createLinode}
             >
               Create Linode
-            </Button>
+            </StyledCreateButton>
             <ApiAwarenessModal
               isOpen={showApiAwarenessModal}
               onClose={handleShowApiAwarenessModal}
               payLoad={this.getPayload()}
               route={this.props.match.url}
             />
-          </Box>
+          </StyledButtonGroupBox>
         </Grid>
-      </form>
+      </StyledForm>
     );
   }
 
@@ -876,10 +815,8 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, CombinedProps> = (
   setTab: (value) => dispatch(handleChangeCreateType(value)),
 });
 
-const styled = withStyles(styles);
-
 const connected = connect(undefined, mapDispatchToProps);
 
-const enhanced = recompose<CombinedProps, InnerProps>(connected, styled);
+const enhanced = recompose<CombinedProps, InnerProps>(connected);
 
 export default enhanced(LinodeCreate);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
index aa5c2d053ed..f587c1918c8 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
@@ -1,6 +1,5 @@
 import { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { styled, Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { compose } from 'recompose';
 
@@ -14,23 +13,6 @@ import { getQueryParamFromQueryString } from 'src/utilities/queryParams';
 import Panel from './Panel';
 import { AppsData } from './types';
 
-type ClassNames = 'loading' | 'panel';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    loading: {
-      '& >div:first-of-type': {
-        height: 450,
-      },
-    },
-    panel: {
-      boxShadow: `${theme.color.boxShadow} 0px -15px 10px -10px inset`,
-      height: 450,
-      marginBottom: theme.spacing(3),
-      overflowY: 'auto',
-    },
-  });
-
 interface Props extends AppsData {
   disabled: boolean;
   error?: string;
@@ -48,14 +30,12 @@ interface Props extends AppsData {
   selectedStackScriptID?: number;
 }
 
-type CombinedProps = Props & WithStyles<ClassNames>;
-
-class SelectAppPanel extends React.PureComponent<CombinedProps> {
+class SelectAppPanel extends React.PureComponent<Props> {
   componentDidMount() {
     this.clickAppIfQueryParamExists();
   }
 
-  componentDidUpdate(prevProps: CombinedProps) {
+  componentDidUpdate(prevProps: Props) {
     if (
       typeof prevProps.appInstances === 'undefined' &&
       typeof this.props.appInstances !== 'undefined'
@@ -69,7 +49,6 @@ class SelectAppPanel extends React.PureComponent<CombinedProps> {
       appInstances,
       appInstancesError,
       appInstancesLoading,
-      classes,
       disabled,
       error,
       handleClick,
@@ -82,19 +61,19 @@ class SelectAppPanel extends React.PureComponent<CombinedProps> {
 
     if (appInstancesError) {
       return (
-        <Panel className={classes.panel} error={error} title="Select App">
+        <StyledPanel error={error} title="Select App">
           <ErrorState errorText={appInstancesError} />
-        </Panel>
+        </StyledPanel>
       );
     }
 
     if (appInstancesLoading || !appInstances) {
       return (
-        <Panel className={classes.panel} error={error} title="Select App">
-          <span className={classes.loading}>
+        <StyledPanel error={error} title="Select App">
+          <StyledLoadingSpan>
             <LandingLoading />
-          </span>
-        </Panel>
+          </StyledLoadingSpan>
+        </StyledPanel>
       );
     }
 
@@ -118,7 +97,7 @@ class SelectAppPanel extends React.PureComponent<CombinedProps> {
     const isFilteringOrSearching = isFiltering || isSearching;
 
     return (
-      <Paper className={classes.panel} data-qa-tp="Select Image">
+      <StyledPaper data-qa-tp="Select Image">
         {error && <Notice error text={error} />}
         {!isFilteringOrSearching ? (
           <AppPanelSection
@@ -149,7 +128,7 @@ class SelectAppPanel extends React.PureComponent<CombinedProps> {
           searchValue={searchValue}
           selectedStackScriptID={selectedStackScriptID}
         />
-      </Paper>
+      </StyledPaper>
     );
   }
 
@@ -196,9 +175,25 @@ class SelectAppPanel extends React.PureComponent<CombinedProps> {
   };
 }
 
-const styled = withStyles(styles);
+const commonStyling = (theme: Theme) => ({
+  boxShadow: `${theme.color.boxShadow} 0px -15px 10px -10px inset`,
+  height: 450,
+  marginBottom: theme.spacing(3),
+  overflowY: 'auto' as const,
+});
+
+const StyledPanel = styled(Panel, { label: 'StyledPanel' })(({ theme }) => ({
+  ...commonStyling(theme),
+}));
+
+const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({
+  ...commonStyling(theme),
+}));
+
+const StyledLoadingSpan = styled('span', { label: 'StyledLoadingSpan' })({
+  '& >div:first-of-type': {
+    height: 450,
+  },
+});
 
-export default compose<CombinedProps, Props>(
-  styled,
-  React.memo
-)(SelectAppPanel);
+export default compose<Props, Props>(React.memo)(SelectAppPanel);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
index fac29e6c914..782db32b3b3 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
@@ -4,8 +4,7 @@ import {
   LinodeBackupsResponse,
 } from '@linode/api-v4/lib/linodes';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { compose } from 'recompose';
 
@@ -21,6 +20,9 @@ import {
 } from 'src/containers/profile.container';
 import { formatDate } from 'src/utilities/formatDate';
 
+import type { StyledTypographyProps } from './SelectLinodePanel';
+import { isPropValid } from 'src/utilities/isPropValid';
+
 export const aggregateBackups = (
   backups: LinodeBackupsResponse
 ): LinodeBackup[] => {
@@ -38,26 +40,6 @@ export interface LinodeWithBackups extends Linode {
   currentBackups: LinodeBackupsResponse;
 }
 
-type ClassNames = 'panelBody' | 'root' | 'wrapper';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    panelBody: {
-      padding: `${theme.spacing(2)} 0 0`,
-      width: '100%',
-    },
-    root: {
-      backgroundColor: theme.color.white,
-      flexGrow: 1,
-      marginTop: theme.spacing(3),
-      width: '100%',
-    },
-    wrapper: {
-      minHeight: 120,
-      padding: theme.spacing(1),
-    },
-  });
-
 interface BackupInfo {
   details: string;
   title: string;
@@ -77,9 +59,7 @@ interface State {
   backups?: LinodeBackup[];
 }
 
-type StyledProps = Props & WithStyles<ClassNames>;
-
-type CombinedProps = StyledProps & WithProfileProps;
+type CombinedProps = Props & WithProfileProps;
 
 class SelectBackupPanel extends React.Component<CombinedProps, State> {
   getBackupInfo(backup: LinodeBackup) {
@@ -104,7 +84,6 @@ class SelectBackupPanel extends React.Component<CombinedProps, State> {
 
   render() {
     const {
-      classes,
       error,
       loading,
       selectedLinodeID,
@@ -116,28 +95,23 @@ class SelectBackupPanel extends React.Component<CombinedProps, State> {
       : [];
 
     return (
-      <Paper className={classes.root}>
+      <StyledRootPaper>
         {error && <Notice error text={error} />}
         <Typography variant="h2">Select Backup</Typography>
-        <Grid
-          alignItems="center"
-          className={classes.wrapper}
-          container
-          spacing={2}
-        >
+        <StyledWrapperGrid alignItems="center" container spacing={2}>
           {loading ? (
             <CircleProgress />
           ) : selectedLinodeID ? (
             // eslint-disable-next-line react/jsx-no-useless-fragment
             <React.Fragment>
               {aggregatedBackups.length !== 0 ? (
-                <Typography className={classes.panelBody} component="div">
+                <StyledTypography component="div">
                   <Grid container>
                     {aggregatedBackups.map((backup) => {
                       return this.renderCard(backup);
                     })}
                   </Grid>
-                </Typography>
+                </StyledTypography>
               ) : (
                 <Typography variant="body1">No backup available</Typography>
               )}
@@ -145,8 +119,8 @@ class SelectBackupPanel extends React.Component<CombinedProps, State> {
           ) : (
             <Typography variant="body1">First, select a Linode</Typography>
           )}
-        </Grid>
-      </Paper>
+        </StyledWrapperGrid>
+      </StyledRootPaper>
     );
   }
 
@@ -176,10 +150,31 @@ class SelectBackupPanel extends React.Component<CombinedProps, State> {
   };
 }
 
-const styled = withStyles(styles);
+const StyledTypography = styled(Typography, {
+  label: 'StyledTypography',
+  shouldForwardProp: (prop) => isPropValid(['component'], prop),
+})<StyledTypographyProps>(({ theme }) => ({
+  padding: `${theme.spacing(2)} 0 0`,
+  width: '100%',
+}));
+
+const StyledRootPaper = styled(Paper, { label: 'StyledRootPaper' })(
+  ({ theme }) => ({
+    backgroundColor: theme.color.white,
+    flexGrow: 1,
+    width: '100%',
+    marginTop: theme.spacing(3),
+  })
+);
+
+const StyledWrapperGrid = styled(Grid, { label: 'StyledWrapperGrid' })(
+  ({ theme }) => ({
+    minHeight: 120,
+    padding: theme.spacing(1),
+  })
+);
 
 export default compose<CombinedProps, Props & RenderGuardProps>(
   RenderGuard,
-  styled,
   withProfile
 )(SelectBackupPanel);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
index e031a1f8879..9c228f7e88f 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
@@ -1,7 +1,6 @@
 import { Linode } from '@linode/api-v4/lib/linodes';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { compose } from 'recompose';
 
@@ -12,26 +11,13 @@ import RenderGuard, { RenderGuardProps } from 'src/components/RenderGuard';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { Typography } from 'src/components/Typography';
 import { Paper } from 'src/components/Paper';
+import { isPropValid } from 'src/utilities/isPropValid';
 
 export interface ExtendedLinode extends Linode {
   heading: string;
   subHeadings: string[];
 }
 
-type ClassNames = 'panelBody' | 'root';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    panelBody: {
-      padding: `${theme.spacing(2)} 0 0`,
-    },
-    root: {
-      backgroundColor: theme.color.white,
-      flexGrow: 1,
-      width: '100%',
-    },
-  });
-
 interface Notice {
   level: 'error' | 'warning'; // most likely only going to need these two 'warning'; 'warning';
   text: string;
@@ -47,13 +33,9 @@ interface Props {
   selectedLinodeID?: number;
 }
 
-type StyledProps = Props & WithStyles<ClassNames>;
-
-type CombinedProps = StyledProps;
-
-class SelectLinodePanel extends React.Component<CombinedProps> {
+class SelectLinodePanel extends React.Component<Props> {
   render() {
-    const { classes, disabled, error, header, linodes, notice } = this.props;
+    const { disabled, error, header, linodes, notice } = this.props;
 
     return (
       <Paginate data={linodes}>
@@ -67,7 +49,7 @@ class SelectLinodePanel extends React.Component<CombinedProps> {
         }) => {
           return (
             <>
-              <Paper className={classes.root} data-qa-select-linode-panel>
+              <StyledPaper data-qa-select-linode-panel>
                 {error && <Notice error text={error} />}
                 {notice && !disabled && (
                   <Notice
@@ -79,14 +61,14 @@ class SelectLinodePanel extends React.Component<CombinedProps> {
                 <Typography data-qa-select-linode-header variant="h2">
                   {!!header ? header : 'Select Linode'}
                 </Typography>
-                <Typography className={classes.panelBody} component="div">
+                <StyledTypography component="div">
                   <Grid container spacing={2}>
                     {linodesData.map((linode) => {
                       return this.renderCard(linode);
                     })}
                   </Grid>
-                </Typography>
-              </Paper>
+                </StyledTypography>
+              </StyledPaper>
               <PaginationFooter
                 count={count}
                 eventCategory={'Clone from existing panel'}
@@ -119,9 +101,21 @@ class SelectLinodePanel extends React.Component<CombinedProps> {
   }
 }
 
-const styled = withStyles(styles);
+export type StyledTypographyProps = { component: string };
+
+const StyledTypography = styled(Typography, {
+  label: 'StyledTypography',
+  shouldForwardProp: (prop) => isPropValid(['component'], prop),
+})<StyledTypographyProps>(({ theme }) => ({
+  padding: `${theme.spacing(2)} 0 0`,
+}));
+
+const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({
+  backgroundColor: theme.color.white,
+  flexGrow: 1,
+  width: '100%',
+}));
 
-export default compose<CombinedProps, Props & RenderGuardProps>(
-  RenderGuard,
-  styled
-)(SelectLinodePanel);
+export default compose<Props, Props & RenderGuardProps>(RenderGuard)(
+  SelectLinodePanel
+);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanContainer.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanContainer.styles.ts
index 62f1ca3b2e8..39527a4e3d4 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanContainer.styles.ts
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanContainer.styles.ts
@@ -7,6 +7,7 @@ import { isPropValid } from 'src/utilities/isPropValid';
 type StyledTableCellPropsProps = TableCellProps & {
   isPlanCell?: boolean;
 };
+
 export const StyledTable = styled(Table, {
   label: 'StyledTable',
   shouldForwardProp: (prop) => isPropValid(['isDisabled'], prop),
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx
index 98917a309b6..c94d43ff9e8 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx
@@ -27,21 +27,6 @@ interface Props {
   userDefinedFields: UserDefinedField[];
 }
 
-const InfoGrid = styled(Grid, {
-  label: 'InfoGrid',
-})(({ theme }) => ({
-  '& svg': {
-    height: '19px',
-    width: '19px',
-  },
-  color: theme.palette.primary.main,
-  display: 'flex',
-  justifyContent: 'flex-end',
-  maxWidth: 40,
-  padding: theme.spacing(1),
-  paddingLeft: 0,
-}));
-
 export const SelectionCardWrapper: React.FC<Props> = (props) => {
   const theme = useTheme();
   const {
@@ -125,4 +110,19 @@ export const SelectionCardWrapper: React.FC<Props> = (props) => {
   );
 };
 
+const InfoGrid = styled(Grid, {
+  label: 'InfoGrid',
+})(({ theme }) => ({
+  '& svg': {
+    height: '19px',
+    width: '19px',
+  },
+  color: theme.palette.primary.main,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  maxWidth: 40,
+  padding: theme.spacing(1),
+  paddingLeft: 0,
+}));
+
 export default SelectionCardWrapper;
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts
new file mode 100644
index 00000000000..ce9ee727724
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts
@@ -0,0 +1,14 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material/styles';
+
+export const StyledGrid = styled(Grid, { label: 'StyledGrid' })(
+  ({ theme }) => ({
+    [theme.breakpoints.up('md')]: {
+      maxWidth: '100%',
+    },
+    width: '100%',
+    flexBasis: '100%',
+    paddingTop: 0,
+    paddingBottom: 0,
+  })
+);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
index ab3c7073727..48c8b645149 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
@@ -1,8 +1,6 @@
 import { Image } from '@linode/api-v4/lib/images';
 import { StackScript, UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import compact from 'lodash/compact';
 import curry from 'lodash/curry';
 import { assocPath } from 'ramda';
@@ -33,8 +31,7 @@ import {
   WithTypesRegionsAndImages,
 } from '../types';
 import { filterUDFErrors } from './formUtilities';
-
-type ClassNames = 'filter' | 'main' | 'search' | 'searchAndFilter' | 'sidebar';
+import { StyledGrid } from './CommonTabbedContent.styles';
 
 const appCategories = [
   'Control Panels',
@@ -57,38 +54,6 @@ const appCategoryOptions = appCategories.map((categoryName) => ({
 
 // type AppCategory = typeof appCategories;
 
-const styles = (theme: Theme) =>
-  createStyles({
-    filter: {
-      flexGrow: 1.5,
-    },
-    main: {
-      [theme.breakpoints.up('md')]: {
-        maxWidth: '100%',
-      },
-    },
-    search: {
-      '& .input': {
-        maxWidth: 'none',
-      },
-      flexGrow: 10,
-    },
-    searchAndFilter: {
-      '& > h2': {
-        width: '100%',
-      },
-      display: 'flex',
-      gap: theme.spacing(),
-      justifyContent: 'space-between',
-      marginTop: theme.spacing(),
-    },
-    sidebar: {
-      [theme.breakpoints.up('md')]: {
-        marginTop: '-130px !important',
-      },
-    },
-  });
-
 const errorResources = {
   image: 'Image',
   label: 'A label',
@@ -103,14 +68,12 @@ interface Props {
   setNumberOfNodesForAppCluster: (num: number) => void;
 }
 
-type InnerProps = Props &
+type CombinedProps = Props &
   AppsData &
   ReduxStateProps &
   StackScriptFormStateHandlers &
   WithTypesRegionsAndImages;
 
-type CombinedProps = WithStyles<ClassNames> & InnerProps;
-
 interface State {
   categoryFilter: Item<AppCategory> | null;
   detailDrawerOpen: boolean;
@@ -180,7 +143,6 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
       appInstancesLoading,
       availableStackScriptImages: compatibleImages,
       availableUserDefinedFields: userDefinedFields,
-      classes,
       errors,
       selectedImageID,
       selectedStackScriptID,
@@ -224,11 +186,11 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
 
     return (
       <React.Fragment>
-        <Grid className={`${classes.main} mlMain py0`}>
+        <StyledGrid>
           <Paper>
             <Typography variant="h2">Select an App</Typography>
-            <Box className={classes.searchAndFilter}>
-              <Box className={classes.search}>
+            <StyledSearchFilterBox>
+              <StyledSearchBox>
                 <DebouncedSearchTextField
                   placeholder={
                     appInstancesLoading ? 'Loading...' : 'Search for app name'
@@ -253,8 +215,8 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
                   onSearch={this.onSearch}
                   value={query}
                 />
-              </Box>
-              <Box className={classes.filter}>
+              </StyledSearchBox>
+              <StyledFilterBox>
                 <Select
                   placeholder={
                     appInstancesLoading ? 'Loading...' : 'Select category'
@@ -266,8 +228,8 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
                   options={appCategoryOptions}
                   value={categoryFilter}
                 />
-              </Box>
-            </Box>
+              </StyledFilterBox>
+            </StyledSearchFilterBox>
           </Paper>
           <SelectAppPanel
             appInstances={
@@ -317,7 +279,7 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
           ) : (
             <ImageEmptyState errorText={hasErrorFor('image')} />
           )}
-        </Grid>
+        </StyledGrid>
 
         <AppDetailDrawer
           onClose={this.closeDrawer}
@@ -428,6 +390,27 @@ class FromAppsContent extends React.Component<CombinedProps, State> {
   };
 }
 
-const styled = withStyles(styles);
-
-export default styled(FromAppsContent);
+const StyledSearchFilterBox = styled(Box, { label: 'StyledSearchFilterBox' })(
+  ({ theme }) => ({
+    '& > h2': {
+      width: '100%',
+    },
+    display: 'flex',
+    gap: theme.spacing(),
+    justifyContent: 'space-between',
+    marginTop: theme.spacing(),
+  })
+);
+
+const StyledFilterBox = styled(Box, { label: 'StyledFilterBox' })({
+  flexGrow: 1.5,
+});
+
+const StyledSearchBox = styled(Box, { label: 'StyledSearchBox' })({
+  '& .input': {
+    maxWidth: 'none',
+  },
+  flexGrow: 10,
+});
+
+export default FromAppsContent;
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx
index 0298fbdc9e5..7f6628d3932 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx
@@ -7,9 +7,6 @@ import { CombinedProps, FromBackupsContent } from './FromBackupsContent';
 
 const mockProps: CombinedProps = {
   accountBackupsEnabled: false,
-  classes: {
-    main: '',
-  },
   imagesData: {},
   linodesData: [],
   regionsData: [],
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
index 167f37293c2..d76076a54f4 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
@@ -3,9 +3,7 @@ import {
   LinodeBackupsResponse,
   getLinodeBackups,
 } from '@linode/api-v4/lib/linodes';
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { StyledGrid } from './CommonTabbedContent.styles';
 import { compose as ramdaCompose } from 'ramda';
 import * as React from 'react';
 
@@ -30,17 +28,6 @@ export interface LinodeWithBackups extends Linode {
   currentBackups: LinodeBackupsResponse;
 }
 
-type ClassNames = 'main';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    main: {
-      [theme.breakpoints.up('md')]: {
-        maxWidth: '100%',
-      },
-    },
-  });
-
 interface Props {
   disabled?: boolean;
 }
@@ -55,8 +42,7 @@ interface State {
 export type CombinedProps = Props &
   BackupFormStateHandlers &
   ReduxStateProps &
-  WithLinodesTypesRegionsAndImages &
-  WithStyles<ClassNames>;
+  WithLinodesTypesRegionsAndImages;
 
 const errorResources = {
   backup_id: 'Backup ID',
@@ -88,7 +74,6 @@ export class FromBackupsContent extends React.Component<CombinedProps, State> {
   render() {
     const { isGettingBackups, selectedLinodeWithBackups } = this.state;
     const {
-      classes,
       disabled,
       errors,
       imagesData,
@@ -109,7 +94,7 @@ export class FromBackupsContent extends React.Component<CombinedProps, State> {
     );
 
     return (
-      <Grid className={`${classes.main} mlMain py0`}>
+      <StyledGrid>
         {!userHasBackups ? (
           <Paper>
             <Placeholder
@@ -166,7 +151,7 @@ export class FromBackupsContent extends React.Component<CombinedProps, State> {
             />
           </React.Fragment>
         )}
-      </Grid>
+      </StyledGrid>
     );
   }
 
@@ -250,6 +235,4 @@ export class FromBackupsContent extends React.Component<CombinedProps, State> {
   };
 }
 
-const styled = withStyles(styles);
-
-export default styled(FromBackupsContent);
+export default FromBackupsContent;
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
index d3fd3fb2480..78a4e17f164 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
@@ -1,6 +1,3 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -10,6 +7,7 @@ import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { Typography } from 'src/components/Typography';
 import { Paper } from 'src/components/Paper';
 import { filterImagesByType } from 'src/store/image/image.helpers';
+import { StyledGrid } from './CommonTabbedContent.styles';
 
 import {
   BasicFromContentProps,
@@ -17,14 +15,6 @@ import {
   WithTypesRegionsAndImages,
 } from '../types';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  main: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '100%',
-    },
-  },
-}));
-
 interface Props extends BasicFromContentProps {
   error?: string;
   imagePanelTitle?: string;
@@ -37,8 +27,6 @@ export type CombinedProps = Props &
   WithTypesRegionsAndImages;
 
 export const FromImageContent: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
-
   const {
     error,
     imagePanelTitle,
@@ -51,7 +39,7 @@ export const FromImageContent: React.FC<CombinedProps> = (props) => {
 
   if (variant === 'private' && Object.keys(privateImages).length === 0) {
     return (
-      <Grid className={`${classes.main} mlMain py0`}>
+      <StyledGrid>
         <Paper>
           <Placeholder icon={ImageIcon} isEntity title="My Images">
             <Typography variant="subtitle1">
@@ -61,12 +49,12 @@ export const FromImageContent: React.FC<CombinedProps> = (props) => {
             </Typography>
           </Placeholder>
         </Paper>
-      </Grid>
+      </StyledGrid>
     );
   }
 
   return (
-    <Grid className={`${classes.main} mlMain py0`}>
+    <StyledGrid>
       <ImageSelect
         data-qa-select-image-panel
         disabled={userCannotCreateLinode}
@@ -77,7 +65,7 @@ export const FromImageContent: React.FC<CombinedProps> = (props) => {
         title={imagePanelTitle || 'Choose an Image'}
         variant={variant}
       />
-    </Grid>
+    </StyledGrid>
   );
 };
 
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
index d42d913141b..ac8688d3416 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
@@ -1,6 +1,3 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -10,6 +7,7 @@ import { Paper } from 'src/components/Paper';
 import { buildQueryStringForLinodeClone } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu';
 import { extendType } from 'src/utilities/extendType';
 import getAPIErrorsFor from 'src/utilities/getAPIErrorFor';
+import { StyledGrid } from './CommonTabbedContent.styles';
 
 import SelectLinodePanel from '../SelectLinodePanel';
 import {
@@ -19,14 +17,6 @@ import {
 } from '../types';
 import { extendLinodes } from '../utilities';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  main: {
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '100%',
-    },
-  },
-}));
-
 const errorResources = {
   label: 'A label',
   region: 'region',
@@ -39,8 +29,6 @@ export type CombinedProps = CloneFormStateHandlers &
   WithLinodesTypesRegionsAndImages;
 
 export const FromLinodeContent: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
-
   const {
     errors,
     imagesData,
@@ -88,7 +76,7 @@ export const FromLinodeContent: React.FC<CombinedProps> = (props) => {
     // eslint-disable-next-line
     <React.Fragment>
       {linodesData && linodesData.length === 0 ? (
-        <Grid className={`${classes.main} mlMain py0`}>
+        <StyledGrid>
           <Paper>
             <Placeholder
               data-qa-placeholder
@@ -101,9 +89,9 @@ export const FromLinodeContent: React.FC<CombinedProps> = (props) => {
               create a Linode from either an Image or StackScript.
             </Placeholder>
           </Paper>
-        </Grid>
+        </StyledGrid>
       ) : (
-        <Grid className={`${classes.main} mlMain py0`}>
+        <StyledGrid>
           <SelectLinodePanel
             linodes={extendLinodes(
               linodesData,
@@ -123,7 +111,7 @@ export const FromLinodeContent: React.FC<CombinedProps> = (props) => {
             selectedLinodeID={selectedLinodeID}
             updateFor={[selectedLinodeID, errors]}
           />
-        </Grid>
+        </StyledGrid>
       )}
     </React.Fragment>
   );
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx
index bb12e3eaa2c..802cdbbddf1 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx
@@ -20,11 +20,6 @@ const mockImages = imageFactory.buildList(10);
 const mockProps: CombinedProps = {
   accountBackupsEnabled: false,
   category: 'community',
-  classes: {
-    emptyImagePanel: '',
-    emptyImagePanelText: '',
-    main: '',
-  },
   handleSelectUDFs: jest.fn(),
   header: '',
   imagesData: {},
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
index fceb1b2b138..8346e1a777c 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
@@ -1,11 +1,9 @@
 import { Image } from '@linode/api-v4/lib/images';
 import { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
+import { StyledGrid } from './CommonTabbedContent.styles';
 import { assocPath, equals } from 'ramda';
 import * as React from 'react';
-import { compose } from 'recompose';
 
 import ImageSelect from 'src/components/ImageSelect';
 import ImageEmptyState from 'src/features/Linodes/LinodesCreate/TabbedContent/ImageEmptyState';
@@ -23,24 +21,6 @@ import {
 } from '../types';
 import { filterUDFErrors } from './formUtilities';
 
-type ClassNames = 'emptyImagePanel' | 'emptyImagePanelText' | 'main';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    emptyImagePanel: {
-      padding: theme.spacing(3),
-    },
-    emptyImagePanelText: {
-      marginTop: theme.spacing(1),
-      padding: `${theme.spacing(1)} 0`,
-    },
-    main: {
-      [theme.breakpoints.up('md')]: {
-        maxWidth: '100%',
-      },
-    },
-  });
-
 interface Props {
   category: 'account' | 'community';
   header: string;
@@ -57,19 +37,16 @@ const errorResources = {
   type: 'A plan selection',
 };
 
-type InnerProps = Props &
+export type CombinedProps = Props &
   ReduxStateProps &
   StackScriptFormStateHandlers &
   WithTypesRegionsAndImages;
 
-export type CombinedProps = InnerProps & WithStyles<ClassNames>;
-
 export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
   render() {
     const {
       availableStackScriptImages: compatibleImages,
       availableUserDefinedFields: userDefinedFields,
-      classes,
       errors,
       header,
       imagesData,
@@ -91,7 +68,7 @@ export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
 
     return (
       <React.Fragment>
-        <Grid className={`${classes.main} mlMain py0`} data-qa-panel={header}>
+        <StyledGrid data-qa-panel={header}>
           <SelectStackScriptPanel
             category={this.props.category}
             data-qa-select-stackscript
@@ -134,12 +111,9 @@ export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
               variant={showAllImages ? 'all' : 'public'}
             />
           ) : (
-            <ImageEmptyState
-              className={classes.emptyImagePanel}
-              errorText={hasErrorFor('image')}
-            />
+            <StyledImageEmptyState errorText={hasErrorFor('image')} />
           )}
-        </Grid>
+        </StyledGrid>
 
         <StackScriptDialog />
       </React.Fragment>
@@ -201,8 +175,10 @@ export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
   };
 }
 
-const styled = withStyles(styles);
+const StyledImageEmptyState = styled(ImageEmptyState, {
+  label: 'StyledImageEmptyState',
+})(({ theme }) => ({
+  padding: theme.spacing(3),
+}));
 
-export default compose<CombinedProps, InnerProps>(styled)(
-  FromStackScriptContent
-);
+export default FromStackScriptContent;
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/ImageEmptyState.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/ImageEmptyState.tsx
index 9203f075cda..c15b4d04718 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/ImageEmptyState.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/ImageEmptyState.tsx
@@ -1,35 +1,31 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { SxProps, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { Paper } from 'src/components/Paper';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  emptyImagePanelText: {
-    marginTop: theme.spacing(1),
-    padding: `${theme.spacing(1)} 0`,
-  },
-}));
-
 interface Props {
+  sx?: SxProps;
   className?: string;
   errorText: string | undefined;
 }
 
 export const ImageEmptyState: React.FC<Props> = (props) => {
-  const { className, errorText } = props;
-  const classes = useStyles();
+  const { className, errorText, sx } = props;
+  const theme = useTheme();
 
   return (
-    <Paper className={className}>
+    <Paper sx={sx} className={className}>
       {errorText ? <Notice error text={errorText} /> : null}
       <Typography data-qa-tp="Select Image" variant="h2">
         Select Image
       </Typography>
       <Typography
-        className={classes.emptyImagePanelText}
+        sx={{
+          marginTop: theme.spacing(1),
+          padding: `${theme.spacing(1)} 0`,
+        }}
         data-qa-no-compatible-images
         variant="body1"
       >
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts
index 24910d6110f..5e87270c21e 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts
+++ b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useExpandIconStyles = makeStyles(() => ({
+export const useExpandIconStyles = makeStyles()(() => ({
   expandIconStyles: {
     marginTop: '8px',
   },
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx
index aed4ac7b34b..fa326e4fa1d 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const UserDataAccordion = (props: Props) => {
-  const { expandIconStyles } = useExpandIconStyles();
+  const { classes, cx } = useExpandIconStyles();
   const {
     createType,
     disabled,
@@ -78,7 +78,9 @@ export const UserDataAccordion = (props: Props) => {
         },
       }}
       detailProps={{ sx: sxDetails }}
-      expandIconClassNames={fromBackupOrFromLinode ? expandIconStyles : ''}
+      expandIconClassNames={cx({
+        [classes.expandIconStyles]: !!fromBackupOrFromLinode,
+      })}
       heading={<UserDataAccordionHeading createType={createType} />}
     >
       {renderNotice ? (
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx
index 5c09a7c3388..5b995bcb4dc 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
+import { styled } from '@mui/material/styles';
 
 import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
 import { Currency } from 'src/components/Currency';
@@ -15,17 +15,7 @@ interface Props {
   linodeId: number;
 }
 
-const useStyles = makeStyles()(() => ({
-  empty: {
-    '& svg': {
-      transform: 'scale(0.75)',
-    },
-  },
-}));
-
 export const BackupsPlaceholder = (props: Props) => {
-  const { classes } = useStyles();
-
   const { backupsMonthlyPrice, disabled, linodeId } = props;
 
   const [dialogOpen, setDialogOpen] = React.useState(false);
@@ -51,7 +41,7 @@ export const BackupsPlaceholder = (props: Props) => {
   return (
     <>
       {disabled && <LinodePermissionsError />}
-      <Placeholder
+      <StyledPlaceholder
         buttonProps={[
           {
             children: 'Enable Backups',
@@ -59,14 +49,13 @@ export const BackupsPlaceholder = (props: Props) => {
             onClick: () => setDialogOpen(true),
           },
         ]}
-        className={classes.empty}
         icon={VolumeIcon}
         isEntity
         renderAsSecondary
         title="Backups"
       >
         {backupPlaceholderText}
-      </Placeholder>
+      </StyledPlaceholder>
       <EnableBackupsDialog
         linodeId={linodeId}
         onClose={() => setDialogOpen(false)}
@@ -76,4 +65,10 @@ export const BackupsPlaceholder = (props: Props) => {
   );
 };
 
+const StyledPlaceholder = styled(Placeholder, { label: 'StyledPlaceholder' })({
+  '& svg': {
+    transform: 'scale(0.75)',
+  },
+});
+
 export default React.memo(BackupsPlaceholder);
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx
index e2e7db52287..0b4c1256029 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx
@@ -1,8 +1,7 @@
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
@@ -22,27 +21,7 @@ interface Props {
   linodeId: number;
 }
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  snapshotFormControl: {
-    '& > div': {
-      marginRight: theme.spacing(2),
-      width: 'auto',
-    },
-    '& button': {
-      marginTop: theme.spacing(4),
-    },
-    alignItems: 'flex-end',
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  snapshotNameField: {
-    minWidth: 275,
-  },
-}));
-
 export const CaptureSnapshot = ({ isReadOnly, linodeId }: Props) => {
-  const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
 
   const {
@@ -88,9 +67,9 @@ export const CaptureSnapshot = ({ isReadOnly, linodeId }: Props) => {
             {hasErrorFor.none}
           </Notice>
         )}
-        <Box className={classes.snapshotFormControl}>
+        <StyledBox>
           <TextField
-            className={classes.snapshotNameField}
+            sx={{ minWidth: 275 }}
             data-qa-manual-name
             errorText={hasErrorFor.label}
             label="Name Snapshot"
@@ -106,7 +85,7 @@ export const CaptureSnapshot = ({ isReadOnly, linodeId }: Props) => {
           >
             Take Snapshot
           </Button>
-        </Box>
+        </StyledBox>
       </FormControl>
       <CaptureSnapshotConfirmationDialog
         loading={isSnapshotLoading}
@@ -117,3 +96,17 @@ export const CaptureSnapshot = ({ isReadOnly, linodeId }: Props) => {
     </Paper>
   );
 };
+
+const StyledBox = styled(Box, { label: 'StyledBox' })(({ theme }) => ({
+  '& > div': {
+    marginRight: theme.spacing(2),
+    width: 'auto',
+  },
+  '& button': {
+    marginTop: theme.spacing(4),
+  },
+  alignItems: 'flex-end',
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx
index 68dc2c1b139..bb35744c80a 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx
@@ -1,9 +1,8 @@
 import { LinodeBackup } from '@linode/api-v4/lib/linodes';
 import { Box, Stack } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -29,28 +28,11 @@ import { CaptureSnapshot } from './CaptureSnapshot';
 import { RestoreToLinodeDrawer } from './RestoreToLinodeDrawer';
 import { ScheduleSettings } from './ScheduleSettings';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  cancelButton: {
-    marginBottom: theme.spacing(1),
-    [theme.breakpoints.down('md')]: {
-      marginLeft: theme.spacing(),
-      marginRight: theme.spacing(),
-    },
-  },
-  cancelCopy: {
-    [theme.breakpoints.down('md')]: {
-      marginLeft: theme.spacing(),
-      marginRight: theme.spacing(),
-    },
-  },
-}));
-
 export const LinodeBackups = () => {
   const { linodeId } = useParams<{ linodeId: string }>();
   const id = Number(linodeId);
 
   const history = useHistory();
-  const { classes } = useStyles();
 
   const { data: profile } = useProfile();
   const { data: grants } = useGrants();
@@ -184,23 +166,18 @@ export const LinodeBackups = () => {
       <CaptureSnapshot isReadOnly={doesNotHavePermission} linodeId={id} />
       <ScheduleSettings isReadOnly={doesNotHavePermission} linodeId={id} />
       <Box>
-        <Button
+        <StyledCancelButton
           buttonType="outlined"
-          className={classes.cancelButton}
           data-qa-cancel
           disabled={doesNotHavePermission}
           onClick={() => setIsCancelBackupsDialogOpen(true)}
         >
           Cancel Backups
-        </Button>
-        <Typography
-          className={classes.cancelCopy}
-          data-qa-cancel-desc
-          variant="body1"
-        >
+        </StyledCancelButton>
+        <StyledCancelTypography data-qa-cancel-desc variant="body1">
           Please note that when you cancel backups associated with this Linode,
           this will remove all existing backups.
-        </Typography>
+        </StyledCancelTypography>
       </Box>
       <RestoreToLinodeDrawer
         backup={selectedBackup}
@@ -217,4 +194,23 @@ export const LinodeBackups = () => {
   );
 };
 
+const StyledCancelButton = styled(Button, { label: 'StyledCancelButton' })(
+  ({ theme }) => ({
+    marginBottom: theme.spacing(1),
+    [theme.breakpoints.down('md')]: {
+      marginLeft: theme.spacing(),
+      marginRight: theme.spacing(),
+    },
+  })
+);
+
+const StyledCancelTypography = styled(Typography, {
+  label: 'StyledCancelTypography',
+})(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    marginLeft: theme.spacing(),
+    marginRight: theme.spacing(),
+  },
+}));
+
 export default LinodeBackups;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx
index 5febe11c45a..df6cad74358 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx
@@ -1,8 +1,7 @@
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import Select from 'src/components/EnhancedSelect/Select';
@@ -19,32 +18,12 @@ import { useProfile } from 'src/queries/profile';
 import getUserTimezone from 'src/utilities/getUserTimezone';
 import { initWindows } from 'src/utilities/initWindows';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  chooseDay: {
-    '& .react-select__menu-list': {
-      maxHeight: 'none',
-    },
-    marginRight: theme.spacing(2),
-    minWidth: 150,
-  },
-  scheduleAction: {
-    '& button': {
-      marginLeft: 0,
-      marginTop: theme.spacing(2),
-    },
-    justifyContent: 'flex-start',
-    margin: 0,
-    padding: 0,
-  },
-}));
-
 interface Props {
   isReadOnly: boolean;
   linodeId: number;
 }
 
 export const ScheduleSettings = ({ isReadOnly, linodeId }: Props) => {
-  const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
 
   const { data: profile } = useProfile();
@@ -113,7 +92,7 @@ export const ScheduleSettings = ({ isReadOnly, linodeId }: Props) => {
             {updateLinodeError?.[0].reason}
           </Notice>
         )}
-        <FormControl className={classes.chooseDay}>
+        <StyledFormControl>
           <Select
             textFieldProps={{
               dataAttrs: {
@@ -132,7 +111,7 @@ export const ScheduleSettings = ({ isReadOnly, linodeId }: Props) => {
             options={dayOptions}
             placeholder="Choose a day"
           />
-        </FormControl>
+        </StyledFormControl>
         <FormControl>
           <Select
             onChange={(item) =>
@@ -159,7 +138,7 @@ export const ScheduleSettings = ({ isReadOnly, linodeId }: Props) => {
             {getUserTimezone(profile?.timezone).replace('_', ' ')}
           </FormHelperText>
         </FormControl>
-        <ActionsPanel
+        <StyledActionsPanel
           primaryButtonProps={{
             'data-testid': 'schedule',
             disabled: isReadOnly || !settingsForm.dirty,
@@ -167,9 +146,30 @@ export const ScheduleSettings = ({ isReadOnly, linodeId }: Props) => {
             loading: isUpdating,
             type: 'submit',
           }}
-          className={classes.scheduleAction}
         />
       </form>
     </Paper>
   );
 };
+
+const StyledFormControl = styled(FormControl, { label: 'StyledFormControl' })(
+  ({ theme }) => ({
+    '& .react-select__menu-list': {
+      maxHeight: 'none',
+    },
+    marginRight: theme.spacing(2),
+    minWidth: 150,
+  })
+);
+
+const StyledActionsPanel = styled(ActionsPanel, {
+  label: 'StyledActionsPanel',
+})(({ theme }) => ({
+  '& button': {
+    marginLeft: 0,
+    marginTop: theme.spacing(2),
+  },
+  justifyContent: 'flex-start',
+  margin: 0,
+  padding: 0,
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx
index d64b03df8ec..bedb36727f5 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/ConfigRow.tsx
@@ -1,7 +1,6 @@
 import { Config, Interface } from '@linode/api-v4/lib/linodes';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
@@ -12,25 +11,6 @@ import { useLinodeVolumesQuery } from 'src/queries/volumes';
 
 import { ConfigActionMenu } from './LinodeConfigActionMenu';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  actionInner: {
-    '&.MuiTableCell-root': {
-      paddingRight: 0,
-    },
-    padding: '0 !important',
-  },
-  interfaceList: {
-    listStyleType: 'none',
-    margin: 0,
-    paddingBottom: theme.spacing(),
-    paddingLeft: 0,
-    paddingTop: theme.spacing(),
-  },
-  interfaceListItem: {
-    paddingBottom: 4,
-  },
-}));
-
 interface Props {
   config: Config;
   linodeId: number;
@@ -53,7 +33,6 @@ export const ConfigRow = React.memo((props: Props) => {
     page_size: API_MAX_PAGE_SIZE,
   });
 
-  const { classes } = useStyles();
   const interfaces = config?.interfaces ?? [];
 
   const validDevices = React.useMemo(
@@ -80,22 +59,22 @@ export const ConfigRow = React.memo((props: Props) => {
             return undefined;
           }
           return (
-            <li className={classes.interfaceListItem} key={thisDevice}>
+            <li style={{ paddingBottom: 4 }} key={thisDevice}>
               /dev/{thisDevice} - {label}
             </li>
           );
         })
         .filter(Boolean),
-    [volumes, disks, classes.interfaceListItem, config.devices]
+    [volumes, disks, config.devices]
   );
 
   const deviceLabels = React.useMemo(
-    () => <ul className={classes.interfaceList}>{validDevices}</ul>,
-    [classes.interfaceList, validDevices]
+    () => <StyledUl>{validDevices}</StyledUl>,
+    [validDevices]
   );
 
   const InterfaceList = (
-    <ul className={classes.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.
@@ -103,14 +82,14 @@ export const ConfigRow = React.memo((props: Props) => {
 
         return (
           <li
-            className={classes.interfaceListItem}
+            style={{ paddingBottom: 4 }}
             key={interfaceEntry.label ?? 'public' + idx}
           >
             {interfaceName} – {getInterfaceLabel(interfaceEntry)}
           </li>
         );
       })}
-    </ul>
+    </StyledUl>
   );
 
   const defaultInterfaceLabel = 'eth0 – Public Internet';
@@ -124,7 +103,7 @@ export const ConfigRow = React.memo((props: Props) => {
       <TableCell>
         {interfaces.length > 0 ? InterfaceList : defaultInterfaceLabel}
       </TableCell>
-      <TableCell className={classes.actionInner}>
+      <StyledTableCell>
         <ConfigActionMenu
           config={config}
           label={config.label}
@@ -134,11 +113,26 @@ export const ConfigRow = React.memo((props: Props) => {
           onEdit={onEdit}
           readOnly={readOnly}
         />
-      </TableCell>
+      </StyledTableCell>
     </TableRow>
   );
 });
 
+const StyledUl = styled('ul', { label: 'StyledUl' })(({ theme }) => ({
+  listStyleType: 'none',
+  margin: 0,
+  paddingBottom: theme.spacing(),
+  paddingLeft: 0,
+  paddingTop: theme.spacing(),
+}));
+
+const StyledTableCell = styled(TableCell, { label: 'StyledTableCell' })({
+  '&.MuiTableCell-root': {
+    paddingRight: 0,
+  },
+  padding: '0 !important',
+});
+
 export const getInterfaceLabel = (configInterface: Interface): string => {
   if (configInterface.purpose === 'public') {
     return 'Public Internet';
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
index 30fe96a92a6..d670529f6ef 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
@@ -5,12 +5,11 @@ import {
 } from '@linode/api-v4/lib/linodes';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { equals, pathOr, repeat } from 'ramda';
 import * as React from 'react';
 import { useQueryClient } from 'react-query';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Box } from 'src/components/Box';
@@ -63,32 +62,6 @@ import InterfaceSelect, {
 } from '../LinodeSettings/InterfaceSelect';
 import KernelSelect from '../LinodeSettings/KernelSelect';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  button: {
-    marginLeft: 1,
-    marginTop: theme.spacing(),
-  },
-  divider: {
-    margin: '36px 8px 12px',
-    width: `calc(100% - ${theme.spacing(2)})`,
-  },
-  formControlToggle: {
-    '& button': {
-      color: theme.textColors.tableHeader,
-      order: 3,
-    },
-  },
-  formGroup: {
-    '&.MuiFormGroup-root[role="radiogroup"]': {
-      marginBottom: 0,
-    },
-    alignItems: 'flex-start',
-  },
-  tooltip: {
-    maxWidth: 350,
-  },
-}));
-
 interface Helpers {
   devtmpfs_automount: boolean;
   distro: boolean;
@@ -241,7 +214,7 @@ export const LinodeConfigDialog = (props: Props) => {
     config?.id ?? -1
   );
 
-  const { classes } = useStyles();
+  const theme = useTheme();
   const regions = useRegionsQuery().data ?? [];
 
   const queryClient = useQueryClient();
@@ -624,7 +597,7 @@ export const LinodeConfigDialog = (props: Props) => {
               />
             </Grid>
 
-            <Divider className={classes.divider} />
+            <StyledDivider />
 
             <Grid xs={12}>
               <Typography variant="h3">Virtual Machine</Typography>
@@ -637,9 +610,8 @@ export const LinodeConfigDialog = (props: Props) => {
                 >
                   VM Mode
                 </FormLabel>
-                <RadioGroup
+                <StyledRadioGroup
                   aria-label="virt_mode"
-                  className={classes.formGroup}
                   name="virt_mode"
                   onChange={formik.handleChange}
                   value={values.virt_mode}
@@ -661,11 +633,11 @@ export const LinodeConfigDialog = (props: Props) => {
                     paravirtualized or fully virtualized. Paravirt is what you
                     want, unless you&rsquo;re doing weird things.
                   </FormHelperText>
-                </RadioGroup>
+                </StyledRadioGroup>
               </FormControl>
             </Grid>
 
-            <Divider className={classes.divider} />
+            <StyledDivider />
 
             <Grid xs={12}>
               <Typography variant="h3">Boot Settings</Typography>
@@ -682,14 +654,13 @@ export const LinodeConfigDialog = (props: Props) => {
               <FormControl
                 disabled={isReadOnly}
                 fullWidth
-                updateFor={[values.run_level, classes]}
+                updateFor={[values.run_level]}
               >
                 <FormLabel component="label" htmlFor="run_level">
                   Run Level
                 </FormLabel>
-                <RadioGroup
+                <StyledRadioGroup
                   aria-label="run_level"
-                  className={classes.formGroup}
                   name="run_level"
                   onChange={formik.handleChange}
                   value={values.run_level}
@@ -712,7 +683,7 @@ export const LinodeConfigDialog = (props: Props) => {
                     label="init=/bin/bash"
                     value="binbash"
                   />
-                </RadioGroup>
+                </StyledRadioGroup>
               </FormControl>
 
               {/*
@@ -726,7 +697,7 @@ export const LinodeConfigDialog = (props: Props) => {
                 user explicity selects the option to change the
                 memory limit.
               */}
-              <FormControl updateFor={[values.setMemoryLimit, classes]}>
+              <FormControl updateFor={[values.setMemoryLimit]}>
                 <FormLabel
                   component="label"
                   disabled={isReadOnly}
@@ -734,9 +705,8 @@ export const LinodeConfigDialog = (props: Props) => {
                 >
                   Memory Limit
                 </FormLabel>
-                <RadioGroup
+                <StyledRadioGroup
                   aria-label="memory_limit"
-                  className={classes.formGroup}
                   name="setMemoryLimit"
                   onChange={formik.handleChange}
                   value={values.setMemoryLimit}
@@ -753,7 +723,7 @@ export const LinodeConfigDialog = (props: Props) => {
                     label="Limit the amount of RAM this config uses"
                     value="set_limit"
                   />
-                </RadioGroup>
+                </StyledRadioGroup>
               </FormControl>
 
               {values.setMemoryLimit === 'set_limit' && (
@@ -772,7 +742,7 @@ export const LinodeConfigDialog = (props: Props) => {
               )}
             </Grid>
 
-            <Divider className={classes.divider} />
+            <StyledDivider />
 
             <Grid xs={12}>
               <Typography variant="h3">Block Device Assignment</Typography>
@@ -805,15 +775,18 @@ export const LinodeConfigDialog = (props: Props) => {
               </FormControl>
               <Button
                 buttonType="secondary"
-                className={classes.button}
                 compactX
                 disabled={isReadOnly || deviceCounter >= deviceSlots.length - 1}
                 onClick={() => setDeviceCounter((counter) => counter + 1)}
+                sx={{
+                  marginLeft: `1px`,
+                  marginTop: theme.spacing(),
+                }}
               >
                 Add a Device
               </Button>
 
-              <FormControl className={classes.formGroup} fullWidth>
+              <StyledFormControl fullWidth>
                 <FormControlLabel
                   control={
                     <Toggle
@@ -853,10 +826,10 @@ export const LinodeConfigDialog = (props: Props) => {
                     value={values.root_device}
                   />
                 )}
-              </FormControl>
+              </StyledFormControl>
             </Grid>
 
-            <Divider className={classes.divider} />
+            <StyledDivider />
 
             {showVlans ? (
               <Grid xs={12}>
@@ -879,7 +852,7 @@ export const LinodeConfigDialog = (props: Props) => {
                         .
                       </Typography>
                     }
-                    classes={{ tooltip: classes.tooltip }}
+                    sx={{ tooltip: { maxWidth: 350 } }}
                     interactive
                     status="help"
                   />
@@ -919,12 +892,11 @@ export const LinodeConfigDialog = (props: Props) => {
                   values.helpers.modules_dep,
                   values.helpers.devtmpfs_automount,
                   values.helpers.network,
-                  classes,
                 ]}
                 fullWidth
               >
-                <FormGroup className={classes.formGroup}>
-                  <FormControlLabel
+                <StyledFormGroup>
+                  <StyledFormControlLabel
                     control={
                       <Toggle
                         checked={values.helpers.distro}
@@ -933,12 +905,11 @@ export const LinodeConfigDialog = (props: Props) => {
                         tooltipText="Helps maintain correct inittab/upstart console device"
                       />
                     }
-                    className={classes.formControlToggle}
                     label="Enable distro helper"
                     name="helpers.distro"
                   />
 
-                  <FormControlLabel
+                  <StyledFormControlLabel
                     control={
                       <Toggle
                         checked={values.helpers.updatedb_disabled}
@@ -947,12 +918,11 @@ export const LinodeConfigDialog = (props: Props) => {
                         tooltipText="Disables updatedb cron job to avoid disk thrashing"
                       />
                     }
-                    className={classes.formControlToggle}
                     label="Disable updatedb"
                     name="helpers.updatedb_disabled"
                   />
 
-                  <FormControlLabel
+                  <StyledFormControlLabel
                     control={
                       <Toggle
                         checked={values.helpers.modules_dep}
@@ -961,12 +931,11 @@ export const LinodeConfigDialog = (props: Props) => {
                         tooltipText="Creates a modules dependency file for the kernel you run"
                       />
                     }
-                    className={classes.formControlToggle}
                     label="Enable modules.dep helper"
                     name="helpers.modules_dep"
                   />
 
-                  <FormControlLabel
+                  <StyledFormControlLabel
                     control={
                       <Toggle
                         checked={values.helpers.devtmpfs_automount}
@@ -975,12 +944,11 @@ export const LinodeConfigDialog = (props: Props) => {
                         tooltipText="Controls if pv_ops kernels automount devtmpfs at boot"
                       />
                     }
-                    className={classes.formControlToggle}
                     label="Auto-mount devtmpfs"
                     name="helpers.devtmpfs_automount"
                   />
 
-                  <FormControlLabel
+                  <StyledFormControlLabel
                     control={
                       <Toggle
                         tooltipText={
@@ -997,11 +965,10 @@ export const LinodeConfigDialog = (props: Props) => {
                         onChange={formik.handleChange}
                       />
                     }
-                    className={classes.formControlToggle}
                     label="Auto-configure networking"
                     name="helpers.network"
                   />
-                </FormGroup>
+                </StyledFormGroup>
               </FormControl>
             </Grid>
           </React.Fragment>
@@ -1020,6 +987,41 @@ export const LinodeConfigDialog = (props: Props) => {
   );
 };
 
+const formGroupStyling = () => ({
+  '&.MuiFormGroup-root[role="radiogroup"]': {
+    marginBottom: 0,
+  },
+  alignItems: 'flex-start',
+});
+
+const StyledRadioGroup = styled(RadioGroup, { label: 'StyledRadioGroup' })({
+  ...formGroupStyling(),
+});
+
+const StyledFormControl = styled(FormControl, { label: 'StyledFormControl' })({
+  ...formGroupStyling(),
+});
+
+const StyledFormGroup = styled(FormGroup, { label: 'StyledFormGroup' })({
+  ...formGroupStyling(),
+});
+
+const StyledDivider = styled(Divider, { label: 'StyledDivider' })(
+  ({ theme }) => ({
+    margin: '36px 8px 12px',
+    width: `calc(100% - ${theme.spacing(2)})`,
+  })
+);
+
+const StyledFormControlLabel = styled(FormControlLabel, {
+  label: 'StyledFormControlLabel',
+})(({ theme }) => ({
+  '& button': {
+    color: theme.textColors.tableHeader,
+    order: 3,
+  },
+}));
+
 interface ConfigFormProps {
   children: JSX.Element;
   errors: APIError[] | null;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
index e5a2e4923e8..bdac30ad855 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
@@ -1,8 +1,7 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 
 import AddNewLink from 'src/components/AddNewLink';
 import OrderBy from 'src/components/OrderBy';
@@ -23,28 +22,8 @@ import { ConfigRow } from './ConfigRow';
 import { DeleteConfigDialog } from './DeleteConfigDialog';
 import { LinodeConfigDialog } from './LinodeConfigDialog';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  actionsColumn: {
-    width: '10%',
-  },
-  deviceColumn: {
-    width: '25%',
-  },
-  interfacesColumn: {
-    width: '30%',
-  },
-  labelColumn: {
-    ...theme.applyTableHeaderStyles,
-    width: '35%',
-  },
-  tableCell: {
-    borderRight: `1px solid ${theme.palette.divider}`,
-    fontWeight: 'bold',
-  },
-}));
-
 const LinodeConfigs = () => {
-  const { classes } = useStyles();
+  const theme = useTheme();
 
   const { linodeId } = useParams<{ linodeId: string }>();
 
@@ -135,24 +114,35 @@ const LinodeConfigs = () => {
                       <TableRow>
                         <TableSortCell
                           active={orderBy === 'label'}
-                          className={classes.labelColumn}
                           direction={order}
                           handleClick={handleOrderChange}
                           label={'label'}
+                          sx={{
+                            ...theme.applyTableHeaderStyles,
+                            width: '35%',
+                          }}
                         >
                           <strong>Config</strong>
                         </TableSortCell>
                         <TableCell
-                          className={`${classes.tableCell} ${classes.deviceColumn}`}
+                          sx={{
+                            width: '25%',
+                            borderRight: `1px solid ${theme.palette.divider}`,
+                            fontWeight: 'bold',
+                          }}
                         >
                           Disks
                         </TableCell>
                         <TableCell
-                          className={`${classes.tableCell} ${classes.interfacesColumn}`}
+                          sx={{
+                            width: '30%',
+                            borderRight: `1px solid ${theme.palette.divider}`,
+                            fontWeight: 'bold',
+                          }}
                         >
                           Network Interfaces
                         </TableCell>
-                        <TableCell className={classes.actionsColumn} />
+                        <TableCell sx={{ width: '10%' }} />
                       </TableRow>
                     </TableHead>
                     <TableBody>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx
index 3f0e034e981..058d6fd8c4e 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx
@@ -1,7 +1,6 @@
 import { IPv6Prefix } from '@linode/api-v4/lib/networking';
-import { Theme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
@@ -19,21 +18,6 @@ import {
   useLinodeIPsQuery,
 } from 'src/queries/linodes/networking';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  copy: {
-    marginTop: theme.spacing(2),
-  },
-  ipSubheader: {
-    marginTop: '1rem',
-  },
-  ipv6: {
-    marginTop: theme.spacing(4),
-  },
-  radioButtons: {
-    marginTop: '0 !important',
-  },
-}));
-
 type IPType = 'v4Private' | 'v4Public';
 
 const ipOptions: Item<IPType>[] = [
@@ -96,7 +80,7 @@ interface Props {
 
 const AddIPDrawer = (props: Props) => {
   const { linodeId, onClose, open, readOnly } = props;
-  const { classes } = useStyles();
+  const theme = useTheme();
 
   const {
     error: ipv4Error,
@@ -184,15 +168,15 @@ const AddIPDrawer = (props: Props) => {
         {Boolean(ipv4Error) && (
           <Notice error spacingTop={8} text={ipv4Error?.[0].reason} />
         )}
-        <Typography className={classes.ipSubheader} variant="h3">
+        <Typography sx={{ marginTop: '1rem' }} variant="h3">
           Select type
         </Typography>
         <RadioGroup
           aria-label="ip-option"
-          className={classes.radioButtons}
           data-qa-ip-options-radio-group
           name="Select IPv4 type"
           onChange={handleIPv4Change}
+          sx={{ marginTop: '0 !important' }}
           value={selectedIPv4}
         >
           {ipOptions.map((option, idx) => (
@@ -206,7 +190,7 @@ const AddIPDrawer = (props: Props) => {
           ))}
         </RadioGroup>
         {selectedIPv4 && (
-          <Typography className={classes.copy} variant="body1">
+          <Typography sx={{ marginTop: theme.spacing(2) }} variant="body1">
             {explainerCopy[selectedIPv4]}
           </Typography>
         )}
@@ -236,21 +220,21 @@ const AddIPDrawer = (props: Props) => {
             }}
           />
         )}
-        <Typography className={classes.ipv6} variant="h2">
+        <Typography sx={{ marginTop: theme.spacing(4) }} variant="h2">
           IPv6
         </Typography>
         {Boolean(ipv6Error) && (
           <Notice error spacingTop={8} text={ipv6Error?.[0].reason} />
         )}
-        <Typography className={classes.ipSubheader} variant="h3">
+        <Typography sx={{ marginTop: '1rem' }} variant="h3">
           Select prefix
         </Typography>
         <RadioGroup
           aria-label="prefix-option"
-          className={classes.radioButtons}
           data-qa-ip-options-radio-group
           name="Select prefix"
           onChange={handleIPv6Change}
+          sx={{ marginTop: '0 !important' }}
           value={selectedIPv6Prefix}
         >
           {prefixOptions.map((option, idx) => (
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx
index c007d5354b8..0c4517922b3 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx
@@ -1,9 +1,8 @@
 import { IPRange } from '@linode/api-v4/lib/networking';
-import { Theme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
@@ -19,22 +18,6 @@ import { getErrorMap } from 'src/utilities/errorUtils';
 
 import { listIPv6InRange } from './LinodeNetworking';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  header: {
-    marginTop: theme.spacing(2),
-  },
-  ipv6Input: {
-    marginBottom: theme.spacing(2),
-  },
-  rdnsRecord: {
-    marginTop: theme.spacing(2),
-  },
-  section: {
-    borderTop: `1px solid ${theme.palette.divider}`,
-    marginTop: theme.spacing(2),
-  },
-}));
-
 interface Props {
   linodeId: number;
   onClose: () => void;
@@ -86,7 +69,7 @@ export const EditRangeRDNSDrawer = (props: Props) => {
     },
   });
 
-  const { classes } = useStyles();
+  const theme = useTheme();
 
   React.useEffect(() => {
     if (open) {
@@ -141,12 +124,17 @@ export const EditRangeRDNSDrawer = (props: Props) => {
         />
       </form>
       {range && ips && ips.length > 0 && (
-        <div className={classes.section}>
-          <Typography className={classes.header} variant="h3">
+        <div
+          style={{
+            borderTop: `1px solid ${theme.palette.divider}`,
+            marginTop: theme.spacing(2),
+          }}
+        >
+          <Typography sx={{ marginTop: theme.spacing(2) }} variant="h3">
             Existing Records
           </Typography>
           {ips.map((ip) => (
-            <div className={classes.rdnsRecord} key={ip.address}>
+            <div style={{ marginTop: theme.spacing(2) }} key={ip.address}>
               <Typography>{ip.address}</Typography>
               <Typography>{ip.rdns || ''}</Typography>
             </div>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx
index 52eb727361c..f1b4fde2e82 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx
@@ -2,10 +2,9 @@ import { Linode } from '@linode/api-v4/lib/linodes';
 import { IPRangeInformation } from '@linode/api-v4/lib/networking';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { remove, uniq, update } from 'ramda';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
@@ -31,40 +30,6 @@ import {
 import { areArraysEqual } from 'src/utilities/areArraysEqual';
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  addNewButton: {
-    marginBottom: `-${theme.spacing(2)}`,
-    marginTop: theme.spacing(3),
-  },
-  ipField: {
-    marginTop: 0,
-    width: '100%',
-  },
-  ipFieldLabel: {
-    [theme.breakpoints.up('sm')]: {
-      width: `calc(175px + ${theme.spacing(2)})`,
-    },
-    width: '100%',
-  },
-  networkActionText: {
-    marginBottom: theme.spacing(2),
-  },
-  noIPsMessage: {
-    color: theme.color.grey1,
-    marginTop: theme.spacing(2),
-  },
-  remove: {
-    [theme.breakpoints.down('sm')]: {
-      margin: '-16px 0 0 -26px',
-    },
-  },
-  removeCont: {
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
-  },
-}));
-
 interface Props {
   linodeId: number;
   onClose: () => void;
@@ -75,7 +40,7 @@ interface Props {
 type AvailableRangesMap = { [linode_id: number]: string[] };
 
 const IPSharingPanel = (props: Props) => {
-  const { classes } = useStyles();
+  const theme = useTheme();
   const flags = useFlags();
   const { linodeId, onClose, open, readOnly } = props;
   const { data: linode } = useLinodeQuery(linodeId);
@@ -353,7 +318,7 @@ const IPSharingPanel = (props: Props) => {
                   </Typography>
                 </Notice>
               ) : null}
-              <Typography className={classes.networkActionText}>
+              <Typography sx={{ marginBottom: theme.spacing(2) }}>
                 IP Sharing allows a Linode to share an IP address assignment
                 (one or more additional IP addresses). This can be used to allow
                 one Linode to begin serving requests should another become
@@ -363,14 +328,26 @@ const IPSharingPanel = (props: Props) => {
             </Grid>
             <Grid xs={12}>
               <Grid container>
-                <Grid className={classes.ipFieldLabel}>
+                <Grid
+                  sx={{
+                    [theme.breakpoints.up('sm')]: {
+                      width: `calc(175px + ${theme.spacing(2)})`,
+                    },
+                    width: '100%',
+                  }}
+                >
                   <Typography style={{ fontWeight: 'bold' }}>
                     IP Addresses
                   </Typography>
                 </Grid>
               </Grid>
               {noChoices ? (
-                <Typography className={classes.noIPsMessage}>
+                <Typography
+                  sx={{
+                    color: theme.color.grey1,
+                    marginTop: theme.spacing(2),
+                  }}
+                >
                   You have no other Linodes in this Linode&rsquo;s datacenter
                   with which to share IPs.
                 </Typography>
@@ -461,7 +438,6 @@ interface RowProps {
 
 export const IPRow: React.FC<RowProps> = React.memo((props) => {
   const { ip } = props;
-  const { classes } = useStyles();
   return (
     <Grid container key={ip} spacing={2}>
       <Grid xs={12}>
@@ -469,7 +445,7 @@ export const IPRow: React.FC<RowProps> = React.memo((props) => {
       </Grid>
       <Grid xs={12}>
         <TextField
-          className={classes.ipField}
+          sx={{ marginTop: 0, width: '100%' }}
           disabled
           hideLabel
           label="IP Address"
@@ -500,7 +476,7 @@ export const IPSharingRow: React.FC<SharingRowProps> = React.memo((props) => {
     labels,
     readOnly,
   } = props;
-  const { classes } = useStyles();
+  const theme = useTheme();
 
   const ipList = getRemainingChoices(ip).map((ipChoice: string) => {
     const label = `${ipChoice} ${
@@ -519,13 +495,12 @@ export const IPSharingRow: React.FC<SharingRowProps> = React.memo((props) => {
         <Divider spacingBottom={0} />
       </Grid>
       <Grid sm={10} xs={12}>
-        <Select
+        <StyledSelect
           textFieldProps={{
             dataAttrs: {
               'data-qa-share-ip': true,
             },
           }}
-          className={classes.ipField}
           disabled={readOnly}
           hideLabel
           inputId={`ip-select-${idx}`}
@@ -539,13 +514,24 @@ export const IPSharingRow: React.FC<SharingRowProps> = React.memo((props) => {
         />
       </Grid>
       {handleDelete ? (
-        <Grid className={classes.removeCont} sm={2}>
+        <Grid
+          sm={2}
+          sx={{
+            [theme.breakpoints.down('sm')]: {
+              width: '100%',
+            },
+          }}
+        >
           <Button
             buttonType="outlined"
-            className={classes.remove}
             data-qa-remove-shared-ip
             disabled={readOnly}
             onClick={() => handleDelete(idx)}
+            sx={{
+              [theme.breakpoints.down('sm')]: {
+                margin: '-16px 0 0 -26px',
+              },
+            }}
           >
             Remove
           </Button>
@@ -555,4 +541,9 @@ export const IPSharingRow: React.FC<SharingRowProps> = React.memo((props) => {
   );
 });
 
+const StyledSelect = styled(Select, { label: 'StyledSelect' })({
+  marginTop: 0,
+  width: '100%',
+});
+
 export default IPSharingPanel;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx
index 1184da68dfa..3f3ae0d5d49 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx
@@ -1,7 +1,7 @@
 import { IPRange } from '@linode/api-v4/lib/networking';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import {
   both,
   compose,
@@ -16,7 +16,6 @@ import {
 } from 'ramda';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -37,52 +36,6 @@ import {
 } from 'src/queries/linodes/networking';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  actionsLabel: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none',
-    },
-  },
-  autoGridsm: {
-    minWidth: 175,
-    [theme.breakpoints.up('sm')]: {
-      flexBasis: 'auto',
-      maxWidth: 'auto',
-    },
-  },
-  emptyStateText: {
-    color: theme.color.grey1,
-    marginTop: theme.spacing(2),
-  },
-  ipField: {
-    marginTop: 0,
-    [theme.breakpoints.up('sm')]: {
-      width: 175,
-    },
-    width: '100%',
-  },
-  ipFieldLabel: {
-    [theme.breakpoints.up('sm')]: {
-      width: `calc(175px + ${theme.spacing(2)})`,
-    },
-    width: '100%',
-  },
-  loading: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  networkActionText: {
-    marginBottom: theme.spacing(2),
-  },
-  sourceIPWrapper: {
-    alignItems: 'center',
-    display: 'flex',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
-  },
-}));
-
 interface Props {
   linodeId: number;
   onClose: () => void;
@@ -140,7 +93,7 @@ export const getLinodeIPv6Ranges = (
 
 const LinodeNetworkingIPTransferPanel = (props: Props) => {
   const { linodeId, onClose, open, readOnly } = props;
-  const { classes } = useStyles();
+  const theme = useTheme();
   const { mutateAsync: assignAddresses } = useAssignAdressesMutation();
 
   const { data: linode } = useLinodeQuery(linodeId, open);
@@ -300,12 +253,29 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
 
     return (
       <Grid container key={state.sourceIP} spacing={2} sx={{ width: '100%' }}>
-        <Grid className={classes.sourceIPWrapper}>
-          <Typography className={classes.ipField} variant="body1">
+        <Grid
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            [theme.breakpoints.down('sm')]: {
+              width: '100%',
+            },
+          }}
+        >
+          <Typography
+            sx={{
+              marginTop: 0,
+              [theme.breakpoints.up('sm')]: {
+                width: 175,
+              },
+              width: '100%',
+            }}
+            variant="body1"
+          >
             {state.sourceIP}
           </Typography>
         </Grid>
-        <Grid className={classes.autoGridsm}>
+        <StyledAudoGrid>
           <Select
             textFieldProps={{
               dataAttrs: {
@@ -329,7 +299,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
             overflowPortal
             placeholder="Select Action"
           />
-        </Grid>
+        </StyledAudoGrid>
         {renderLinodeSelect && renderLinodeSelect(state as Move)}
         {renderIPSelect && renderIPSelect(state as Swap)}
       </Grid>
@@ -346,7 +316,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
     });
 
     return (
-      <Grid className={classes.autoGridsm} xs={12}>
+      <StyledAudoGrid xs={12}>
         <Select
           textFieldProps={{
             dataAttrs: {
@@ -366,7 +336,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
           overflowPortal
           value={defaultLinode}
         />
-      </Grid>
+      </StyledAudoGrid>
     );
   };
 
@@ -380,7 +350,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
     });
 
     return (
-      <Grid className={classes.autoGridsm} xs={12}>
+      <StyledAudoGrid xs={12}>
         <Select
           textFieldProps={{
             dataAttrs: {
@@ -397,7 +367,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
           overflowPortal
           value={defaultIP}
         />
-      </Grid>
+      </StyledAudoGrid>
     );
   };
 
@@ -496,7 +466,7 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
         </Grid>
       )}
       <Grid lg={8} sm={12} xl={6}>
-        <Typography className={classes.networkActionText}>
+        <Typography sx={{ marginBottom: theme.spacing(2) }}>
           If you have two Linodes in the same data center, you can use the IP
           transfer feature to switch their IP addresses. This could be useful in
           several situations. For example, if you&rsquo;ve built a new server to
@@ -509,16 +479,30 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
           <Notice error text={'There was an error loading IPv6 Ranges'} />
         ) : null}
         {(isLoading || ipv6RangesLoading) && searchText === '' ? (
-          <div className={classes.loading}>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
             <CircleProgress mini />
           </div>
         ) : (
           <>
             <Grid container spacing={2} sx={{ width: '100%' }}>
-              <Grid className={classes.ipFieldLabel} data-qa-transfer-ip-label>
+              <Grid
+                sx={{
+                  [theme.breakpoints.up('sm')]: {
+                    width: `calc(175px + ${theme.spacing(2)})`,
+                  },
+                  width: '100%',
+                }}
+                data-qa-transfer-ip-label
+              >
                 <Typography>IP Address</Typography>
               </Grid>
-              <Grid className={classes.actionsLabel}>
+              <Grid
+                sx={{
+                  [theme.breakpoints.down('sm')]: {
+                    display: 'none',
+                  },
+                }}
+              >
                 <Typography>Actions</Typography>
               </Grid>
             </Grid>
@@ -526,7 +510,12 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
               <Divider spacingBottom={0} />
             </Grid>
             {linodes.length === 0 && searchText === '' ? (
-              <Typography className={classes.emptyStateText}>
+              <Typography
+                sx={{
+                  color: theme.color.grey1,
+                  marginTop: theme.spacing(2),
+                }}
+              >
                 You have no other linodes in this Linode&rsquo;s datacenter with
                 which to transfer IPs.
               </Typography>
@@ -557,6 +546,16 @@ const LinodeNetworkingIPTransferPanel = (props: Props) => {
   );
 };
 
+const StyledAudoGrid = styled(Grid, { label: 'StyledAutoGrid' })(
+  ({ theme }) => ({
+    minWidth: 175,
+    [theme.breakpoints.up('sm')]: {
+      flexBasis: 'auto',
+      maxWidth: 'auto',
+    },
+  })
+);
+
 const L = {
   ip: (ip: string) => lensPath([ip]),
   mode: (ip: string) => lensPath([ip, 'mode']),
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.styles.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.styles.ts
new file mode 100644
index 00000000000..57299e2b8ba
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.styles.ts
@@ -0,0 +1,68 @@
+import { styled } from '@mui/material/styles';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { TableCell } from 'src/components/TableCell';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Typography } from 'src/components/Typography';
+import { isPropValid } from 'src/utilities/isPropValid';
+
+type StyledCopyTooltipProps = { isHovered: boolean };
+
+export const StyledCopyTooltip = styled(CopyTooltip, {
+  label: 'StyledCopyTooltip ',
+  shouldForwardProp: (prop) => isPropValid(['isHovered'], prop),
+})<StyledCopyTooltipProps>(({ isHovered }) => ({
+  '& svg': {
+    height: `12px`,
+    //opacity: 0,
+    width: `12px`,
+  },
+  marginLeft: 4,
+  top: 1,
+  ':focus': {
+    opacity: 1,
+  },
+  opacity: isHovered ? 1 : 0,
+}));
+
+export const StyledActionTableCell = styled(TableCell, {
+  label: 'StyledActionTableCell',
+})(({ theme }) => ({
+  '& a': {
+    marginRight: theme.spacing(1),
+  },
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: 0,
+  paddingRight: `0px !important`,
+}));
+
+export const StyledWrapperGrid = styled(Grid, { label: 'StyledWrapperGrid' })(
+  ({ theme }) => ({
+    '&.MuiGrid-item': {
+      padding: 5,
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: `-${theme.spacing(1.5)}`,
+      marginTop: `-${theme.spacing(1)}`,
+    },
+  })
+);
+
+export const StyledTypography = styled(Typography, {
+  label: 'StyledTypography',
+})({
+  lineHeight: '1.5rem',
+  marginBottom: 8,
+  marginLeft: 15,
+  marginTop: 8,
+});
+
+export const StyledRootGrid = styled(Grid, { label: 'StyledRootGrid' })(
+  ({ theme }) => ({
+    backgroundColor: theme.color.white,
+    margin: 0,
+    width: '100%',
+  })
+);
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx
index 2552e14202e..7a3c9a71a80 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx
@@ -1,7 +1,7 @@
 import { LinodeIPsResponse } from '@linode/api-v4/lib/linodes';
 import { IPAddress, IPRange } from '@linode/api-v4/lib/networking';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme, useTheme } from '@mui/material/styles';
+import { useTheme, Theme } from '@mui/material/styles';
 import { IPv6, parse as parseIP } from 'ipaddr.js';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
@@ -43,28 +43,15 @@ import { ViewIPDrawer } from './ViewIPDrawer';
 import ViewRDNSDrawer from './ViewRDNSDrawer';
 import { ViewRangeDrawer } from './ViewRangeDrawer';
 import { IPTypes } from './types';
+import {
+  StyledActionTableCell,
+  StyledWrapperGrid,
+  StyledTypography,
+  StyledRootGrid,
+} from './LinodeNetworking.styles';
 
 const useStyles = makeStyles<void, 'copy'>()(
   (theme: Theme, _params, classes) => ({
-    action: {
-      '& a': {
-        marginRight: theme.spacing(1),
-      },
-      alignItems: 'center',
-      display: 'flex',
-      justifyContent: 'flex-end',
-      padding: 0,
-      paddingRight: `0px !important`,
-    },
-    addNewWrapper: {
-      '&.MuiGrid-item': {
-        padding: 5,
-      },
-      [theme.breakpoints.down('sm')]: {
-        marginLeft: `-${theme.spacing(1.5)}`,
-        marginTop: `-${theme.spacing(1)}`,
-      },
-    },
     copy: {
       '& svg': {
         height: `12px`,
@@ -74,24 +61,6 @@ const useStyles = makeStyles<void, 'copy'>()(
       marginLeft: 4,
       top: 1,
     },
-    headline: {
-      lineHeight: '1.5rem',
-      marginBottom: 8,
-      marginLeft: 15,
-      marginTop: 8,
-    },
-    ipAddress: {
-      whiteSpace: 'nowrap',
-    },
-    multipleRDNSButton: {
-      ...theme.applyLinkStyles,
-    },
-    multipleRDNSText: {},
-    root: {
-      backgroundColor: theme.color.white,
-      margin: 0,
-      width: '100%',
-    },
     row: {
       [`&:hover .${classes.copy} > svg, & .${classes.copy}:focus > svg`]: {
         opacity: 1,
@@ -158,6 +127,8 @@ const LinodeNetworking = () => {
   };
 
   const renderIPRow = (ipDisplay: IPDisplay) => {
+    // TODO: in order to fully get rid of makeStyles for this file, may need to convert this to a functional component
+    // rather than function inside this component >> will look into during part 2 of this ticket
     const { _ip, _range, address, gateway, rdns, subnetMask, type } = ipDisplay;
     const isOnlyPublicIP =
       ips?.ipv4.public.length === 1 && type === 'IPv4 – Public';
@@ -169,7 +140,7 @@ const LinodeNetworking = () => {
         key={`${address}-${type}`}
       >
         <TableCell
-          className={classes.ipAddress}
+          sx={{ whiteSpace: 'nowrap' }}
           data-qa-ip-address
           parentColumn="Address"
         >
@@ -193,7 +164,7 @@ const LinodeNetworking = () => {
             rdns
           )}
         </TableCell>
-        <TableCell className={classes.action} data-qa-action>
+        <StyledActionTableCell data-qa-action>
           {_ip ? (
             <LinodeNetworkingActionMenu
               ipAddress={_ip}
@@ -213,7 +184,7 @@ const LinodeNetworking = () => {
               readOnly={readOnly}
             />
           ) : null}
-        </TableCell>
+        </StyledActionTableCell>
       </TableRow>
     );
   };
@@ -235,19 +206,16 @@ const LinodeNetworking = () => {
 
     return (
       <div style={{ marginTop: 20 }}>
-        <Grid
+        <StyledRootGrid
           alignItems="flex-end"
-          className={classes.root}
           container
           justifyContent="space-between"
           spacing={1}
         >
           <Grid className="p0">
-            <Typography className={classes.headline} variant="h3">
-              IP Addresses
-            </Typography>
+            <StyledTypography variant="h3">IP Addresses</StyledTypography>
           </Grid>
-          <Grid className={classes.addNewWrapper}>
+          <StyledWrapperGrid>
             <Hidden smDown>
               <Button
                 buttonType="secondary"
@@ -267,8 +235,8 @@ const LinodeNetworking = () => {
               label="Add an IP Address"
               onClick={() => setIsAddDrawerOpen(true)}
             />
-          </Grid>
-        </Grid>
+          </StyledWrapperGrid>
+        </StyledRootGrid>
         <Paper style={{ padding: 0 }}>
           {/* @todo: It'd be nice if we could always sort by public -> private. */}
           <OrderBy data={ipDisplay} order="asc" orderBy="type">
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx
index 939b9794528..0dfd865a882 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkTransfer.tsx
@@ -1,8 +1,7 @@
 import { getLinodeTransfer } from '@linode/api-v4/lib/linodes';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import BarPercent from 'src/components/BarPercent';
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -12,38 +11,6 @@ import { useAPIRequest } from 'src/hooks/useAPIRequest';
 import { useAccountTransfer } from 'src/queries/accountTransfer';
 import { readableBytes } from 'src/utilities/unitConversions';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  darkGreen: {
-    '&:before': {
-      backgroundColor: '#5ad865',
-    },
-  },
-  grey: {
-    '&:before': {
-      backgroundColor: theme.color.grey2,
-    },
-  },
-  header: {
-    paddingBottom: 10,
-  },
-  legendItem: {
-    '&:before': {
-      borderRadius: 5,
-      content: '""',
-      height: 20,
-      marginRight: 10,
-
-      width: 20,
-    },
-    alignItems: 'center',
-    display: 'flex',
-    marginTop: 10,
-  },
-  poolUsageProgress: {
-    marginBottom: theme.spacing(0.5),
-  },
-}));
-
 interface Props {
   linodeID: number;
   linodeLabel: string;
@@ -51,7 +18,6 @@ interface Props {
 
 export const NetworkTransfer: React.FC<Props> = (props) => {
   const { linodeID, linodeLabel } = props;
-  const { classes } = useStyles();
 
   const linodeTransfer = useAPIRequest(
     () => getLinodeTransfer(linodeID),
@@ -76,7 +42,7 @@ export const NetworkTransfer: React.FC<Props> = (props) => {
 
   return (
     <div>
-      <Typography className={classes.header}>
+      <Typography sx={{ paddingBottom: `10px` }}>
         <strong>Monthly Network Transfer</strong>{' '}
       </Typography>
       <TransferContent
@@ -115,7 +81,7 @@ const TransferContent: React.FC<ContentProps> = (props) => {
     totalUsedInGB,
     // accountBillableInGB
   } = props;
-  const { classes } = useStyles();
+  const theme = useTheme();
 
   /**
    * In this component we display three pieces of information:
@@ -163,23 +129,57 @@ const TransferContent: React.FC<ContentProps> = (props) => {
   return (
     <div>
       <BarPercent
-        className={classes.poolUsageProgress}
+        sx={{ marginBottom: `${theme.spacing(0.5)}px` }}
         max={100}
         rounded
         value={Math.ceil(linodeUsagePercent)}
         valueBuffer={Math.ceil(totalUsagePercent)}
       />
-      <Typography className={`${classes.legendItem} ${classes.darkGreen}`}>
+      <StyledGreenTypography>
         {linodeLabel} ({linodeUsedInGB} GB)
-      </Typography>
-      <Typography className={`${classes.legendItem} ${classes.grey}`}>
+      </StyledGreenTypography>
+      <StyledGreyTypography>
         Remaining ({remainingInGB} GB)
-      </Typography>
+      </StyledGreyTypography>
       {/* @todo: display overages  */}
     </div>
   );
 };
 
+const sxLegendItemBefore = {
+  borderRadius: 5,
+  content: '""',
+  height: 20,
+  marginRight: 10,
+  width: 20,
+};
+
+const sxLegendItem = {
+  alignItems: 'center',
+  display: 'flex',
+  marginTop: 10,
+};
+
+const StyledGreyTypography = styled(Typography, {
+  label: 'StyledGreyTypography',
+})(({ theme }) => ({
+  ...sxLegendItem,
+  '&:before': {
+    ...sxLegendItemBefore,
+    backgroundColor: theme.color.grey2,
+  },
+}));
+
+const StyledGreenTypography = styled(Typography, {
+  label: 'StyledGreenTypography ',
+})({
+  ...sxLegendItem,
+  '&:before': {
+    ...sxLegendItemBefore,
+    backgroundColor: '#5ad865',
+  },
+});
+
 export default React.memo(NetworkTransfer);
 
 // =============================================================================
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx
index 656c3ff62ae..e1ab596a8ec 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/NetworkingSummaryPanel.tsx
@@ -1,7 +1,6 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { Paper } from 'src/components/Paper';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
@@ -10,33 +9,6 @@ import DNSResolvers from './DNSResolvers';
 import NetworkTransfer from './NetworkTransfer';
 import TransferHistory from './TransferHistory';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  dnsResolverContainer: {
-    display: 'flex',
-    [theme.breakpoints.down('md')]: {
-      order: 2,
-    },
-    [theme.breakpoints.down('sm')]: {
-      justifyContent: 'flex-start',
-    },
-  },
-  root: {
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    justifyContent: 'space-between',
-    padding: theme.spacing(3),
-    paddingBottom: theme.spacing(2.5),
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-    },
-  },
-  transferHistoryContainer: {
-    [theme.breakpoints.down('md')]: {
-      order: 3,
-    },
-  },
-}));
-
 interface Props {
   linodeID: number;
 }
@@ -44,38 +16,69 @@ interface Props {
 const LinodeNetworkingSummaryPanel = (props: Props) => {
   // @todo maybe move this query closer to the consuming component
   const { data: linode } = useLinodeQuery(props.linodeID);
-  const { classes } = useStyles();
+  const theme = useTheme();
 
   if (!linode) {
     return null;
   }
 
   return (
-    <Paper className={classes.root}>
+    <StyledPaper>
       <Grid container spacing={4} sx={{ flexGrow: 1 }}>
         <Grid md={2.5} sm={6} xs={12}>
           <NetworkTransfer linodeID={linode.id} linodeLabel={linode.label} />
         </Grid>
-        <Grid className={classes.transferHistoryContainer} md sm xs={12}>
+        <Grid
+          sx={{
+            [theme.breakpoints.down('md')]: {
+              order: 3,
+            },
+          }}
+          md
+          sm
+          xs={12}
+        >
           <TransferHistory
             linodeCreated={linode.created}
             linodeID={linode.id}
           />
         </Grid>
-        <Grid
+        <StyledDnsResolverGrid
           sx={{
             paddingBottom: 0,
           }}
-          className={classes.dnsResolverContainer}
           md={3.5}
           sm={6}
           xs={12}
         >
           <DNSResolvers region={linode.region} />
-        </Grid>
+        </StyledDnsResolverGrid>
       </Grid>
-    </Paper>
+    </StyledPaper>
   );
 };
 
+const StyledDnsResolverGrid = styled(Grid, { label: 'StyledDnsResolverGrid' })(
+  ({ theme }) => ({
+    display: 'flex',
+    [theme.breakpoints.down('md')]: {
+      order: 2,
+    },
+    [theme.breakpoints.down('sm')]: {
+      justifyContent: 'flex-start',
+    },
+  })
+);
+
+const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({
+  display: 'flex',
+  flexFlow: 'row nowrap',
+  justifyContent: 'space-between',
+  padding: theme.spacing(3),
+  paddingBottom: theme.spacing(2.5),
+  [theme.breakpoints.down('sm')]: {
+    flexDirection: 'column',
+  },
+}));
+
 export default React.memo(LinodeNetworkingSummaryPanel);
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx
index ff9fd5c0583..f6a504f1177 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx
@@ -1,9 +1,8 @@
 import { Stats } from '@linode/api-v4/lib/linodes';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import { Theme } from '@mui/material/styles';
+import { styled, useTheme, Theme } from '@mui/material/styles';
 import { DateTime, Interval } from 'luxon';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import PendingIcon from 'src/assets/icons/pending.svg';
 import { Box } from 'src/components/Box';
@@ -25,32 +24,7 @@ import {
 import { useProfile } from 'src/queries/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { readableBytes } from 'src/utilities/unitConversions';
-
-const useStyles = makeStyles()((theme: Theme) => ({
-  arrowIconDisabled: {
-    cursor: 'not-allowed',
-    fill: theme.color.grey1,
-  },
-  arrowIconForward: {
-    transform: 'rotate(180deg)',
-  },
-  arrowIconInner: {
-    fontSize: '1rem',
-  },
-  arrowIconOuter: {
-    ...theme.applyLinkStyles,
-    display: 'flex',
-  },
-  graphHeaderContainer: {
-    borderBottom: `1px solid ${theme.color.grey6}`,
-  },
-  loading: {
-    alignItems: 'center',
-    display: 'flex',
-    height: 100,
-    justifyContent: 'center',
-  },
-}));
+import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 
 interface Props {
   linodeCreated: string;
@@ -60,7 +34,7 @@ interface Props {
 export const TransferHistory: React.FC<Props> = (props) => {
   const { linodeCreated, linodeID } = props;
 
-  const { classes, cx } = useStyles();
+  const theme = useTheme();
 
   // Needed to see the user's timezone.
   const { data: profile } = useProfile();
@@ -153,9 +127,9 @@ export const TransferHistory: React.FC<Props> = (props) => {
   const renderStatsGraph = () => {
     if (statsLoading) {
       return (
-        <div className={classes.loading}>
+        <StyledDiv>
           <CircleProgress mini />
-        </div>
+        </StyledDiv>
       );
     }
 
@@ -205,12 +179,12 @@ export const TransferHistory: React.FC<Props> = (props) => {
     <div aria-label={graphAriaLabel} role="graphics-document" tabIndex={0}>
       <Box
         alignItems="center"
-        className={classes.graphHeaderContainer}
         display="flex"
         flexDirection="row"
         justifyContent="space-between"
         marginBottom="8px"
         paddingBottom="6px"
+        borderBottom={`1px solid ${theme.color.grey6}`}
       >
         <Typography>
           <strong>Network Transfer History ({unit}/s)</strong>
@@ -226,38 +200,40 @@ export const TransferHistory: React.FC<Props> = (props) => {
           flexDirection="row"
           justifyContent="space-between"
         >
-          <button
+          <StyledButton
             aria-label={`Show Network Transfer History for ${decrementLabel}`}
-            className={classes.arrowIconOuter}
             disabled={monthOffset === maxMonthOffset}
             onClick={decrementOffset}
           >
             <ArrowBackIosIcon
-              className={cx({
-                [classes.arrowIconDisabled]: monthOffset === maxMonthOffset,
-                [classes.arrowIconInner]: true,
-              })}
+              sx={{
+                ...(monthOffset === minMonthOffset
+                  ? sxArrowIconDisabled(theme)
+                  : {}),
+                fontSize: '1rem',
+              }}
             />
-          </button>
+          </StyledButton>
           {/* Give this a min-width so it doesn't change widths between displaying
           the month and "Last 30 Days" */}
           <span style={{ minWidth: 80, textAlign: 'center' }}>
             <Typography>{humanizedDate}</Typography>
           </span>
-          <button
+          <StyledButton
             aria-label={`Show Network Transfer History for ${incrementLabel}`}
-            className={classes.arrowIconOuter}
             disabled={monthOffset === minMonthOffset}
             onClick={incrementOffset}
           >
             <ArrowBackIosIcon
-              className={cx({
-                [classes.arrowIconDisabled]: monthOffset === minMonthOffset,
-                [classes.arrowIconForward]: true,
-                [classes.arrowIconInner]: true,
-              })}
+              sx={{
+                ...(monthOffset === minMonthOffset
+                  ? sxArrowIconDisabled(theme)
+                  : {}),
+                transform: 'rotate(180deg)',
+                fontSize: '1rem',
+              }}
             />
-          </button>
+          </StyledButton>
         </Box>
       </Box>
       {renderStatsGraph()}
@@ -265,6 +241,22 @@ export const TransferHistory: React.FC<Props> = (props) => {
   );
 };
 
+const sxArrowIconDisabled = (theme: Theme) => ({
+  cursor: 'not-allowed',
+  fill: theme.color.grey1,
+});
+
+const StyledDiv = styled('div', { label: 'StyledDiv' })({
+  alignItems: 'center',
+  display: 'flex',
+  height: 100,
+  justifyContent: 'center',
+});
+
+const StyledButton = styled(StyledLinkButton, { label: 'StyledButton' })({
+  display: 'flex',
+});
+
 export default React.memo(TransferHistory);
 
 // =============================================================================
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx
index 243f9206394..83dfe0daea3 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewIPDrawer.tsx
@@ -1,21 +1,12 @@
 import { IPAddress } from '@linode/api-v4/lib/networking';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { Typography } from 'src/components/Typography';
 import { useRegionsQuery } from 'src/queries/regions';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  section: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    marginBottom: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
-  },
-}));
-
 interface Props {
   ip?: IPAddress;
   onClose: () => void;
@@ -23,7 +14,6 @@ interface Props {
 }
 
 export const ViewIPDrawer = (props: Props) => {
-  const { classes } = useStyles();
   const { ip } = props;
 
   const { data: regions } = useRegionsQuery();
@@ -34,52 +24,51 @@ export const ViewIPDrawer = (props: Props) => {
     <Drawer onClose={props.onClose} open={props.open} title={`Details for IP`}>
       {ip && (
         <React.Fragment>
-          <div className={classes.section} data-qa-ip-address-heading>
+          <StyledSectionDiv data-qa-ip-address-heading>
             <Typography variant="h3">Address</Typography>
             <Typography data-qa-ip-address variant="body1">
               {ip.address}
             </Typography>
-          </div>
+          </StyledSectionDiv>
 
-          <div className={classes.section} data-qa-gateway-heading>
+          <StyledSectionDiv data-qa-gateway-heading>
             <Typography variant="h3">Gateway</Typography>
             <Typography data-qa-gateway variant="body1">
               {ip.gateway}
             </Typography>
-          </div>
+          </StyledSectionDiv>
 
-          <div className={classes.section} data-qa-subnet-heading>
+          <StyledSectionDiv data-qa-subnet-heading>
             <Typography variant="h3">Subnet Mask</Typography>
             <Typography data-qa-subnet variant="body1">
               {ip.subnet_mask}
             </Typography>
-          </div>
+          </StyledSectionDiv>
 
-          <div className={classes.section} data-qa-type-heading>
+          <StyledSectionDiv data-qa-type-heading>
             <Typography variant="h3">Type</Typography>
             <Typography data-qa-type variant="body1">
               {ip.type}
             </Typography>
-          </div>
+          </StyledSectionDiv>
 
-          <div className={classes.section} data-qa-public-heading>
+          <StyledSectionDiv data-qa-public-heading>
             <Typography variant="h3">Public</Typography>
             <Typography data-qa-public variant="body1">
               {ip.public ? 'Yes' : 'No'}
             </Typography>
-          </div>
+          </StyledSectionDiv>
 
           {ip.rdns && (
-            <div className={classes.section} data-qa-rdns-heading>
+            <StyledSectionDiv data-qa-rdns-heading>
               <Typography variant="h3">RDNS</Typography>
               <Typography data-qa-rdns variant="body1">
                 {ip.rdns}
               </Typography>
-            </div>
+            </StyledSectionDiv>
           )}
 
-          <div
-            className={classes.section}
+          <StyledSectionDiv
             data-qa-region-heading
             style={{ border: 0, paddingBottom: 0 }}
           >
@@ -87,7 +76,7 @@ export const ViewIPDrawer = (props: Props) => {
             <Typography data-qa-region variant="body1">
               {actualRegion?.label ?? ip.region}
             </Typography>
-          </div>
+          </StyledSectionDiv>
 
           <ActionsPanel
             secondaryButtonProps={{
@@ -101,3 +90,11 @@ export const ViewIPDrawer = (props: Props) => {
     </Drawer>
   );
 };
+
+const StyledSectionDiv = styled('div', { label: 'StyledSectionDiv' })(
+  ({ theme }) => ({
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    marginBottom: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+  })
+);
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRDNSDrawer.tsx
index bb1286fc5f3..f6cc468ffd8 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRDNSDrawer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRDNSDrawer.tsx
@@ -1,7 +1,6 @@
 import { IPRange } from '@linode/api-v4/lib/networking';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { Drawer } from 'src/components/Drawer';
 import { Typography } from 'src/components/Typography';
@@ -10,12 +9,6 @@ import { useAllIPsQuery } from 'src/queries/linodes/networking';
 
 import { listIPv6InRange } from './LinodeNetworking';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  rdnsListItem: {
-    marginBottom: theme.spacing(2),
-  },
-}));
-
 interface Props {
   linodeId: number;
   onClose: () => void;
@@ -25,7 +18,6 @@ interface Props {
 
 const ViewRDNSDrawer = (props: Props) => {
   const { linodeId, onClose, open, selectedRange } = props;
-  const { classes } = useStyles();
 
   const { data: linode } = useLinodeQuery(linodeId, open);
 
@@ -47,10 +39,10 @@ const ViewRDNSDrawer = (props: Props) => {
       <div>
         {ips.map((ip) => {
           return (
-            <div className={classes.rdnsListItem} key={ip.address}>
+            <StyledDiv key={ip.address}>
               <Typography>{ip.address}</Typography>
               <Typography>{ip.rdns || ''}</Typography>
-            </div>
+            </StyledDiv>
           );
         })}
       </div>
@@ -58,4 +50,8 @@ const ViewRDNSDrawer = (props: Props) => {
   );
 };
 
+const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
 export default ViewRDNSDrawer;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx
index 113ed44969d..096db5f0074 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/ViewRangeDrawer.tsx
@@ -1,21 +1,12 @@
 import { IPRange } from '@linode/api-v4/lib/networking';
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { Typography } from 'src/components/Typography';
 import { useRegionsQuery } from 'src/queries/regions';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  section: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    marginBottom: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
-  },
-}));
-
 interface Props {
   onClose: () => void;
   open: boolean;
@@ -23,7 +14,6 @@ interface Props {
 }
 
 export const ViewRangeDrawer = (props: Props) => {
-  const { classes } = useStyles();
   const { range } = props;
   const region = (range && range.region) || '';
 
@@ -39,23 +29,20 @@ export const ViewRangeDrawer = (props: Props) => {
     >
       {props.range && (
         <React.Fragment>
-          <div className={classes.section}>
+          <StyledDiv>
             <Typography variant="h3">IP Range</Typography>
             <Typography variant="body1">
               {props.range.range} / {props.range.prefix} routed to{' '}
               {props.range.route_target}
             </Typography>
-          </div>
+          </StyledDiv>
 
-          <div
-            className={classes.section}
-            style={{ border: 0, paddingBottom: 0 }}
-          >
+          <StyledDiv style={{ border: 0, paddingBottom: 0 }}>
             <Typography variant="h3">Region</Typography>
             <Typography variant="body1">
               {actualRegion?.label ?? region}
             </Typography>
-          </div>
+          </StyledDiv>
 
           <ActionsPanel
             secondaryButtonProps={{
@@ -69,3 +56,9 @@ export const ViewRangeDrawer = (props: Props) => {
     </Drawer>
   );
 };
+
+const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  marginBottom: theme.spacing(2),
+  paddingBottom: theme.spacing(2),
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx
index c2d30a75c13..8fbb791de5d 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx
@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Dialog } from 'src/components/Dialog/Dialog';
@@ -14,33 +13,6 @@ import { LinodePermissionsError } from '../LinodePermissionsError';
 import RebuildFromImage from './RebuildFromImage';
 import RebuildFromStackScript from './RebuildFromStackScript';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  helperText: {
-    paddingBottom: theme.spacing(2),
-  },
-  root: {
-    '& + div': {
-      '& .MuiPaper-root': {
-        '& .MuiTableCell-head': {
-          top: theme.spacing(11),
-        },
-        '& > div': {
-          padding: 0,
-        },
-        padding: 0,
-      },
-      '& .notice': {
-        padding: theme.spacing(2),
-      },
-      padding: 0,
-    },
-    paddingBottom: theme.spacing(2),
-  },
-  title: {
-    marginBottom: theme.spacing(2),
-  },
-}));
-
 interface Props {
   linodeId: number | undefined;
   onClose: () => void;
@@ -79,7 +51,7 @@ export const LinodeRebuildDialog = (props: Props) => {
   const unauthorized = isReadOnly;
   const disabled = hostMaintenance || unauthorized;
 
-  const classes = useStyles();
+  const theme = useTheme();
 
   const [mode, setMode] = React.useState<MODES>('fromImage');
   const [rebuildError, setRebuildError] = React.useState<string>('');
@@ -103,11 +75,14 @@ export const LinodeRebuildDialog = (props: Props) => {
       open={open}
       title={`Rebuild Linode ${linode?.label ?? ''}`}
     >
-      <div className={classes.root}>
+      <StyledDiv>
         {unauthorized && <LinodePermissionsError />}
         {hostMaintenance && <HostMaintenanceError />}
         {rebuildError && <Notice error>{rebuildError}</Notice>}
-        <Typography className={classes.helperText} data-qa-rebuild-desc>
+        <Typography
+          sx={{ paddingBottom: theme.spacing(2) }}
+          data-qa-rebuild-desc
+        >
           If you can&rsquo;t rescue an existing disk, it&rsquo;s time to rebuild
           your Linode. There are a couple of different ways you can do this:
           either restore from a backup or start over with a fresh Linux
@@ -129,7 +104,7 @@ export const LinodeRebuildDialog = (props: Props) => {
           label="From Image"
           options={options}
         />
-      </div>
+      </StyledDiv>
       {mode === 'fromImage' && (
         <RebuildFromImage
           disabled={disabled}
@@ -165,3 +140,22 @@ export const LinodeRebuildDialog = (props: Props) => {
     </Dialog>
   );
 };
+
+const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
+  '& + div': {
+    '& .MuiPaper-root': {
+      '& .MuiTableCell-head': {
+        top: theme.spacing(11),
+      },
+      '& > div': {
+        padding: 0,
+      },
+      padding: 0,
+    },
+    '& .notice': {
+      padding: theme.spacing(2),
+    },
+    padding: 0,
+  },
+  paddingBottom: theme.spacing(2),
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts
index bcc924b5d14..29129e132f8 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts
@@ -1,9 +1,28 @@
 import { styled } from '@mui/material/styles';
 
 import { Notice } from 'src/components/Notice/Notice';
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import Grid from '@mui/material/Unstable_Grid2';
 
-export const StyledNotice = styled(Notice)({
+export const StyledNotice = styled(Notice, { label: 'StyledNotice' })({
   marginBottom: '0px !important',
   // @TODO: Remove the !important's once Notice.tsx has been refactored to use MUI's styled()
   padding: '8px !important',
 });
+
+export const StyledActionsPanel = styled(ActionsPanel, {
+  label: 'StyledActionPanel',
+})({
+  '& button': {
+    alignSelf: 'flex-end',
+  },
+  justifyContent: 'flex-start',
+  marginTop: 0,
+  paddingTop: 0,
+});
+
+export const StyledGrid = styled(Grid, { label: 'StyledGrid' })(
+  ({ theme }) => ({
+    paddingTop: theme.spacing(3),
+  })
+);
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx
index 29c27a1acbc..8d616e6aeca 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx
@@ -4,16 +4,13 @@ import {
   rebuildLinode,
 } from '@linode/api-v4/lib/linodes';
 import { RebuildLinodeSchema } from '@linode/validation/lib/linodes.schema';
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import { Formik, FormikProps } from 'formik';
 import { useSnackbar } from 'notistack';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 
 import AccessPanel from 'src/components/AccessPanel/AccessPanel';
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import Grid from '@mui/material/Unstable_Grid2';
 import { Box } from 'src/components/Box';
 import { Checkbox } from 'src/components/Checkbox';
 import { Divider } from 'src/components/Divider';
@@ -32,24 +29,11 @@ import {
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 import { extendValidationSchema } from 'src/utilities/validatePassword';
 
-import { StyledNotice } from './RebuildFromImage.styles';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  actionPanel: {
-    '& button': {
-      alignSelf: 'flex-end',
-    },
-    justifyContent: 'flex-start',
-    marginTop: 0,
-    paddingTop: 0,
-  },
-  error: {
-    marginTop: theme.spacing(2),
-  },
-  root: {
-    paddingTop: theme.spacing(3),
-  },
-}));
+import {
+  StyledActionsPanel,
+  StyledGrid,
+  StyledNotice,
+} from './RebuildFromImage.styles';
 
 interface Props {
   disabled: boolean;
@@ -88,7 +72,6 @@ export const RebuildFromImage = (props: Props) => {
 
   const { data: preferences } = usePreferences();
 
-  const classes = useStyles();
   const { enqueueSnackbar } = useSnackbar();
   const flags = useFlags();
 
@@ -225,7 +208,7 @@ export const RebuildFromImage = (props: Props) => {
           );
 
         return (
-          <Grid className={classes.root}>
+          <StyledGrid>
             <form>
               <ImageSelect
                 handleSelectImage={(selected) =>
@@ -296,18 +279,17 @@ export const RebuildFromImage = (props: Props) => {
                   value={confirmationText}
                   visible={preferences?.type_to_confirm}
                 />
-                <ActionsPanel
+                <StyledActionsPanel
                   primaryButtonProps={{
                     'data-testid': 'rebuild-button',
                     disabled: submitButtonDisabled || disabled,
                     label: 'Rebuild Linode',
                     onClick: handleRebuildButtonClick,
                   }}
-                  className={classes.actionPanel}
                 />
               </Grid>
             </form>
-          </Grid>
+          </StyledGrid>
         );
       }}
     </Formik>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx
index dea2ed8cc11..a3d03a2c407 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx
@@ -3,8 +3,7 @@ import { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
 import { APIError } from '@linode/api-v4/lib/types';
 import { RebuildLinodeFromStackScriptSchema } from '@linode/validation/lib/linodes.schema';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import { Formik, FormikProps } from 'formik';
 import { useSnackbar } from 'notistack';
 import { isEmpty } from 'ramda';
@@ -36,28 +35,6 @@ import {
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 import { extendValidationSchema } from 'src/utilities/validatePassword';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  actionPanel: {
-    '& button': {
-      alignSelf: 'flex-end',
-    },
-    flexDirection: 'column',
-  },
-  emptyImagePanel: {
-    padding: theme.spacing(3),
-  },
-  emptyImagePanelText: {
-    marginTop: theme.spacing(1),
-    padding: `${theme.spacing(1)} 0`,
-  },
-  error: {
-    marginTop: theme.spacing(2),
-  },
-  root: {
-    paddingTop: theme.spacing(3),
-  },
-}));
-
 interface Props {
   disabled: boolean;
   handleRebuildError: (status: string) => void;
@@ -93,7 +70,7 @@ export const RebuildFromStackScript = (props: Props) => {
 
   const { data: preferences } = usePreferences();
 
-  const classes = useStyles();
+  const theme = useTheme();
   const { enqueueSnackbar } = useSnackbar();
 
   const { data: imagesData } = useAllImagesQuery();
@@ -270,7 +247,7 @@ export const RebuildFromStackScript = (props: Props) => {
         }
 
         return (
-          <Grid className={classes.root}>
+          <Grid sx={{ paddingTop: theme.spacing(3) }}>
             <form>
               <SelectStackScriptPanel
                 request={
@@ -287,16 +264,11 @@ export const RebuildFromStackScript = (props: Props) => {
                 resetSelectedStackScript={resetStackScript}
                 selectedId={ss.id}
                 selectedUsername={ss.username}
-                updateFor={[classes, ss.id, errors]}
+                updateFor={[ss.id, errors]}
               />
               {ss.user_defined_fields && ss.user_defined_fields.length > 0 && (
                 <UserDefinedFieldsPanel
-                  updateFor={[
-                    classes,
-                    ss.user_defined_fields,
-                    ss.udf_data,
-                    udfErrors,
-                  ]}
+                  updateFor={[ss.user_defined_fields, ss.udf_data, udfErrors]}
                   errors={udfErrors}
                   handleChange={handleChangeUDF}
                   selectedLabel={ss.label}
@@ -319,7 +291,7 @@ export const RebuildFromStackScript = (props: Props) => {
                 />
               ) : (
                 <ImageEmptyState
-                  className={classes.emptyImagePanel}
+                  sx={{ padding: theme.spacing(3) }}
                   errorText={errors.image}
                 />
               )}
@@ -359,7 +331,10 @@ export const RebuildFromStackScript = (props: Props) => {
                   label: 'Rebuild Linode',
                   onClick: handleRebuildButtonClick,
                 }}
-                className={classes.actionPanel}
+                sx={{
+                  '& button': { alignSelf: 'flex-end' },
+                  flexDirection: 'column',
+                }}
               />
             </form>
             <StackScriptDialog />
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx
index 590ab6968c2..e5bfe24bf5f 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx
@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
@@ -7,6 +6,7 @@ import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { lishLaunch } from 'src/features/Lish/lishUtils';
 import { useLinodeFirewallsQuery } from 'src/queries/linodes/firewalls';
+import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 
 const rescueDescription = {
   firewallWarning:
@@ -20,19 +20,9 @@ interface Props {
   linodeId: number;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  copy: {
-    marginTop: theme.spacing(1),
-  },
-  lishLink: theme.applyLinkStyles,
-  notice: {
-    marginTop: theme.spacing(2),
-  },
-}));
-
 const RescueDescription: React.FC<Props> = (props) => {
   const { isBareMetal, linodeId } = props;
-  const classes = useStyles();
+  const theme = useTheme();
 
   const { data: linodeFirewallsData } = useLinodeFirewallsQuery(linodeId);
   const firewallsLinodeAssignedTo = linodeFirewallsData?.data ?? [];
@@ -53,14 +43,11 @@ const RescueDescription: React.FC<Props> = (props) => {
         <Link to={rescueDescription.link}>Learn more.</Link>
       </Typography>
       {linodeId && isBareMetal ? (
-        <Typography className={classes.copy}>
+        <Typography sx={{ marginTop: theme.spacing(1) }}>
           {`When your Linode has successfully rebooted into Rescue Mode, use the `}
-          <button
-            className={classes.lishLink}
-            onClick={() => lishLaunch(linodeId)}
-          >
+          <StyledLinkButton onClick={() => lishLaunch(linodeId)}>
             LISH Console
-          </button>
+          </StyledLinkButton>
           {` to access it.`}
         </Typography>
       ) : null}
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx
index 56410a527b4..a86ba03d6b4 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx
@@ -1,6 +1,5 @@
 import { APIError } from '@linode/api-v4/lib/types';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import { assoc, clamp, equals, pathOr } from 'ramda';
 import * as React from 'react';
@@ -28,19 +27,6 @@ import { LinodePermissionsError } from '../LinodePermissionsError';
 import DeviceSelection, { ExtendedDisk } from './DeviceSelection';
 import RescueDescription from './RescueDescription';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  button: {
-    marginTop: theme.spacing(),
-  },
-  root: {
-    '& .iconTextLink': {
-      display: 'inline-flex',
-      margin: `${theme.spacing(3)} 0 0 0`,
-    },
-    padding: `${theme.spacing(3)} 0 ${theme.spacing(1)}`,
-  },
-}));
-
 interface Props {
   linodeId: number | undefined;
   onClose: () => void;
@@ -90,7 +76,7 @@ export const getDefaultDeviceMapAndCounter = (
 export const StandardRescueDialog = (props: Props) => {
   const { linodeId, onClose, open } = props;
 
-  const classes = useStyles();
+  const theme = useTheme();
 
   const { data: linode } = useLinodeQuery(
     linodeId ?? -1,
@@ -224,7 +210,7 @@ export const StandardRescueDialog = (props: Props) => {
         </div>
       ) : (
         <div>
-          <Paper className={classes.root}>
+          <StyledPaper>
             {isReadOnly && <LinodePermissionsError />}
             {linodeId ? <RescueDescription linodeId={linodeId} /> : null}
             <DeviceSelection
@@ -237,8 +223,8 @@ export const StandardRescueDialog = (props: Props) => {
               slots={['sda', 'sdb', 'sdc', 'sdd', 'sde', 'sdf', 'sdg']}
             />
             <Button
+              sx={{ marginTop: theme.spacing() }}
               buttonType="secondary"
-              className={classes.button}
               compactX
               disabled={disabled || counter >= 6}
               onClick={incrementCounter}
@@ -253,9 +239,17 @@ export const StandardRescueDialog = (props: Props) => {
                 onClick: onSubmit,
               }}
             />
-          </Paper>
+          </StyledPaper>
         </div>
       )}
     </Dialog>
   );
 };
+
+const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({
+  '& .iconTextLink': {
+    display: 'inline-flex',
+    margin: `${theme.spacing(3)} 0 0 0`,
+  },
+  padding: `${theme.spacing(3)} 0 ${theme.spacing(1)}`,
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx
index aba4c343ee4..e6a0053b213 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx
@@ -1,7 +1,6 @@
 import { Disk, LinodeType } from '@linode/api-v4/lib/linodes';
 import { APIError } from '@linode/api-v4/lib/types';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -34,21 +33,6 @@ import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 import { HostMaintenanceError } from '../HostMaintenanceError';
 import { LinodePermissionsError } from '../LinodePermissionsError';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  resizeTitle: {
-    alignItems: 'center',
-    display: 'flex',
-    minHeight: '44px',
-  },
-  selectPlanPanel: {
-    '& > div': {
-      padding: 0,
-    },
-    marginBottom: theme.spacing(3),
-    marginTop: theme.spacing(5),
-  },
-}));
-
 interface Props {
   linodeId?: number;
   linodeLabel?: string;
@@ -57,7 +41,6 @@ interface Props {
 }
 
 export const LinodeResize = (props: Props) => {
-  const classes = useStyles();
   const { linodeId, onClose, open } = props;
 
   const { data: linode } = useLinodeQuery(
@@ -195,7 +178,7 @@ export const LinodeResize = (props: Props) => {
           </Link>
         </Typography>
 
-        <div className={classes.selectPlanPanel}>
+        <StyledDiv>
           <PlansPanel
             currentPlanHeading={type ? extendType(type).heading : undefined} // lol, why make us pass the heading and not the plan id?
             disabled={tableDisabled}
@@ -205,8 +188,11 @@ export const LinodeResize = (props: Props) => {
             selectedRegionID={linode?.region}
             types={currentTypes.map(extendType)}
           />
-        </div>
-        <Typography className={classes.resizeTitle} variant="h2">
+        </StyledDiv>
+        <Typography
+          sx={{ alignItems: 'center', display: 'flex', minHeight: '44px' }}
+          variant="h2"
+        >
           Auto Resize Disk
           {disksError ? (
             <TooltipIcon
@@ -300,6 +286,14 @@ export const LinodeResize = (props: Props) => {
   );
 };
 
+const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
+  '& > div': {
+    padding: 0,
+  },
+  marginBottom: theme.spacing(3),
+  marginTop: theme.spacing(5),
+}));
+
 const getError = (error: APIError[] | null) => {
   if (!error) {
     return null;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/ImageAndPassword.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/ImageAndPassword.tsx
index 4f902eedcbd..e49dd8f94b5 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/ImageAndPassword.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/ImageAndPassword.tsx
@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import AccessPanel from 'src/components/AccessPanel/AccessPanel';
@@ -11,13 +10,6 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { LinodePermissionsError } from '../LinodePermissionsError';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    margin: `${theme.spacing(3)} 0 ${theme.spacing(3)} 0`,
-    padding: 0,
-  },
-}));
-
 interface Props {
   authorizedUsers: string[];
   imageFieldError?: string;
@@ -43,8 +35,6 @@ export const ImageAndPassword = (props: Props) => {
 
   const { data: grants } = useGrants();
 
-  const classes = useStyles();
-
   const { data: imagesData, error: imagesError } = useAllImagesQuery();
   const _imagesError = imagesError
     ? getAPIErrorOrDefault(imagesError, 'Unable to load Images')[0].reason
@@ -64,14 +54,13 @@ export const ImageAndPassword = (props: Props) => {
         images={imagesData ?? []}
         onSelect={onImageChange}
       />
-      <AccessPanel
+      <StyledAccessPanel
         disabledReason={
           disabled
             ? "You don't have permissions to modify this Linode"
             : undefined
         }
         authorizedUsers={authorizedUsers}
-        className={classes.root}
         disabled={disabled}
         error={passwordError}
         handleChange={onPasswordChange}
@@ -81,3 +70,10 @@ export const ImageAndPassword = (props: Props) => {
     </React.Fragment>
   );
 };
+
+const StyledAccessPanel = styled(AccessPanel, { label: 'StyledAccessPanel' })(
+  ({ theme }) => ({
+    margin: `${theme.spacing(3)} 0 ${theme.spacing(3)} 0`,
+    padding: 0,
+  })
+);
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index 005f3c29587..ba4f2716b93 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -3,9 +3,8 @@ import {
   InterfacePurpose,
 } from '@linode/api-v4/lib/linodes/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
 import { Divider } from 'src/components/Divider';
@@ -14,13 +13,6 @@ import { TextField } from 'src/components/TextField';
 import { useVlansQuery } from 'src/queries/vlans';
 import { sendLinodeCreateDocsEvent } from 'src/utilities/analytics';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  divider: {
-    margin: `${theme.spacing(4.5)} ${theme.spacing()} ${theme.spacing(1.5)} `,
-    width: `calc(100% - ${theme.spacing(2)})`,
-  },
-}));
-
 export interface Props {
   fromAddonsPanel?: boolean;
   handleChange: (updatedInterface: ExtendedInterface) => void;
@@ -41,7 +33,6 @@ export interface ExtendedInterface extends Omit<InterfacePayload, 'purpose'> {
 }
 
 export const InterfaceSelect: React.FC<Props> = (props) => {
-  const classes = useStyles();
   const theme = useTheme();
   const isSmallBp = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -200,7 +191,16 @@ export const InterfaceSelect: React.FC<Props> = (props) => {
         </Grid>
       ) : null}
 
-      {!fromAddonsPanel && <Divider className={classes.divider} />}
+      {!fromAddonsPanel && (
+        <Divider
+          sx={{
+            margin: `${theme.spacing(4.5)} ${theme.spacing()} ${theme.spacing(
+              1.5
+            )} `,
+            width: `calc(100% - ${theme.spacing(2)})`,
+          }}
+        />
+      )}
     </Grid>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CommonLinodeStorage.styles.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CommonLinodeStorage.styles.ts
new file mode 100644
index 00000000000..56598e1baad
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/CommonLinodeStorage.styles.ts
@@ -0,0 +1,31 @@
+import { styled } from '@mui/material/styles';
+import { Typography } from 'src/components/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+
+export const StyledWrapperGrid = styled(Grid, { label: 'StyledWrapperGrid' })(
+  ({ theme }) => ({
+    '&.MuiGrid-item': {
+      padding: 5,
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: `-${theme.spacing(1.5)}`,
+    },
+  })
+);
+
+export const StyledRootGrid = styled(Grid, { label: 'StyledRootGrid' })(
+  ({ theme }) => ({
+    backgroundColor: theme.color.white,
+    margin: 0,
+    width: '100%',
+  })
+);
+
+export const StyledTypography = styled(Typography, {
+  label: 'StyledTypography',
+})({
+  lineHeight: '1.5rem',
+  marginBottom: 8,
+  marginLeft: 15,
+  marginTop: 8,
+});
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskRow.tsx
index 555a3dc9c60..6a44bfa3584 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskRow.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskRow.tsx
@@ -1,6 +1,5 @@
 import { Disk } from '@linode/api-v4/lib/linodes';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import BarPercent from 'src/components/BarPercent';
@@ -12,30 +11,6 @@ import { useEvents } from 'src/hooks/useEvents';
 
 import { LinodeDiskActionMenu } from './LinodeDiskActionMenu';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  bar: {
-    paddingLeft: theme.spacing(),
-    width: 250,
-  },
-  diskCreated: {
-    width: '20%',
-  },
-  diskLabel: {
-    width: '20%',
-  },
-  diskSize: {
-    width: '15%',
-  },
-  diskType: {
-    width: '10%',
-  },
-  progressBar: {
-    alignItems: 'center',
-    display: 'flex',
-    flexFlow: 'row nowrap',
-  },
-}));
-
 interface Props {
   disk: Disk;
   linodeId?: number;
@@ -48,8 +23,8 @@ interface Props {
 }
 
 export const LinodeDiskRow = React.memo((props: Props) => {
-  const classes = useStyles();
   const { inProgressEvents } = useEvents();
+  const theme = useTheme();
   const {
     disk,
     linodeId,
@@ -77,14 +52,23 @@ export const LinodeDiskRow = React.memo((props: Props) => {
 
   return (
     <TableRow data-qa-disk={disk.label}>
-      <TableCell className={classes.diskLabel}>{disk.label}</TableCell>
-      <TableCell className={classes.diskType}>{disk.filesystem}</TableCell>
-      <TableCell className={classes.diskSize}>
+      <TableCell sx={{ width: '20%' }}>{disk.label}</TableCell>
+      <TableCell sx={{ width: '10%' }}>{disk.filesystem}</TableCell>
+      <TableCell sx={{ width: '15%' }}>
         {event ? (
-          <div className={classes.progressBar}>
+          <div
+            style={{
+              alignItems: 'center',
+              display: 'flex',
+              flexFlow: 'row nowrap',
+            }}
+          >
             {diskEventLabelMap[event.action]} ({event.percent_complete}%)
             <BarPercent
-              className={classes.bar}
+              sx={{
+                paddingLeft: theme.spacing(),
+                width: 250,
+              }}
               max={100}
               narrow
               rounded
@@ -96,7 +80,7 @@ export const LinodeDiskRow = React.memo((props: Props) => {
         )}
       </TableCell>
       <Hidden mdDown>
-        <TableCell className={classes.diskCreated}>
+        <TableCell sx={{ width: '20%' }}>
           <DateTimeDisplay value={disk.created} />
         </TableCell>
       </Hidden>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx
index 7e57d89e2b0..6c5fde604f8 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx
@@ -1,7 +1,5 @@
 import { Disk } from '@linode/api-v4/lib/linodes';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -20,7 +18,6 @@ import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { TooltipIcon } from 'src/components/TooltipIcon';
-import { Typography } from 'src/components/Typography';
 import { useAllLinodeDisksQuery } from 'src/queries/linodes/disks';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 import { useGrants } from 'src/queries/profile';
@@ -32,35 +29,13 @@ import { DeleteDiskDialog } from './DeleteDiskDialog';
 import { LinodeDiskRow } from './LinodeDiskRow';
 import { RenameDiskDrawer } from './RenameDiskDrawer';
 import { ResizeDiskDrawer } from './ResizeDiskDrawer';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  addNewWrapper: {
-    '&.MuiGrid-item': {
-      padding: 5,
-    },
-    [theme.breakpoints.down('sm')]: {
-      marginLeft: `-${theme.spacing(1.5)}`,
-    },
-  },
-  addNewWrapperContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-  },
-  headline: {
-    lineHeight: '1.5rem',
-    marginBottom: 8,
-    marginLeft: 15,
-    marginTop: 8,
-  },
-  root: {
-    backgroundColor: theme.color.white,
-    margin: 0,
-    width: '100%',
-  },
-}));
+import {
+  StyledTypography,
+  StyledRootGrid,
+  StyledWrapperGrid,
+} from './CommonLinodeStorage.styles';
 
 export const LinodeDisks = () => {
-  const classes = useStyles();
   const disksHeaderRef = React.useRef(null);
   const { linodeId } = useParams<{ linodeId: string }>();
   const id = Number(linodeId);
@@ -141,19 +116,16 @@ export const LinodeDisks = () => {
 
   return (
     <React.Fragment>
-      <Grid
+      <StyledRootGrid
         alignItems="flex-end"
-        className={classes.root}
         container
         justifyContent="space-between"
         spacing={1}
       >
         <Grid className="p0" ref={disksHeaderRef}>
-          <Typography className={classes.headline} variant="h3">
-            Disks
-          </Typography>
+          <StyledTypography variant="h3">Disks</StyledTypography>
         </Grid>
-        <span className={classes.addNewWrapperContainer}>
+        <span style={{ display: 'flex', flexDirection: 'row' }}>
           {!freeDiskSpace ? (
             <TooltipIcon
               tooltipAnalyticsEvent={() =>
@@ -167,15 +139,15 @@ export const LinodeDisks = () => {
               text={noFreeDiskSpaceWarning}
             />
           ) : undefined}
-          <Grid className={classes.addNewWrapper}>
+          <StyledWrapperGrid>
             <AddNewLink
               disabled={readOnly || !freeDiskSpace}
               label="Add a Disk"
               onClick={() => setIsCreateDrawerOpen(true)}
             />
-          </Grid>
+          </StyledWrapperGrid>
         </span>
-      </Grid>
+      </StyledRootGrid>
       <OrderBy
         data={disks ?? []}
         order={'asc'}
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx
index 4212ba66ff7..67c3bd2a6fc 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeVolumes.tsx
@@ -1,6 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { useParams } from 'react-router-dom';
@@ -18,7 +17,6 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { TableSortCell } from 'src/components/TableSortCell';
-import { Typography } from 'src/components/Typography';
 import { DestructiveVolumeDialog } from 'src/features/Volumes/DestructiveVolumeDialog';
 import { VolumeAttachmentDrawer } from 'src/features/Volumes/VolumeAttachmentDrawer';
 import { VolumeTableRow } from 'src/features/Volumes/VolumeTableRow';
@@ -37,32 +35,7 @@ import {
   openForEdit,
   openForResize,
 } from 'src/store/volumeForm';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  addNewWrapper: {
-    '&.MuiGrid-item': {
-      padding: 5,
-    },
-    [theme.breakpoints.down('sm')]: {
-      marginLeft: `-${theme.spacing(1.5)}`,
-      marginTop: `-${theme.spacing(1)}`,
-    },
-  },
-  headline: {
-    lineHeight: '1.5rem',
-    marginBottom: 8,
-    marginLeft: 15,
-    marginTop: 8,
-  },
-  root: {
-    backgroundColor: theme.color.white,
-    margin: 0,
-    width: '100%',
-  },
-  volumesPanel: {
-    marginTop: '20px',
-  },
-}));
+import { StyledTypography, StyledRootGrid } from './CommonLinodeStorage.styles';
 
 interface DispatchProps {
   openForClone: (
@@ -135,8 +108,6 @@ export const LinodeVolumes = connected((props: Props) => {
 
   const pagination = usePagination(1, preferenceKey);
 
-  const classes = useStyles();
-
   const regions = useRegionsQuery().data ?? [];
 
   const { data, error, isLoading } = useLinodeVolumesQuery(
@@ -281,27 +252,24 @@ export const LinodeVolumes = connected((props: Props) => {
   };
 
   return (
-    <div className={classes.volumesPanel}>
-      <Grid
+    <div style={{ marginTop: '20px' }}>
+      <StyledRootGrid
         alignItems="flex-end"
-        className={classes.root}
         container
         justifyContent="space-between"
         spacing={1}
       >
         <Grid className="p0">
-          <Typography className={classes.headline} variant="h3">
-            Volumes
-          </Typography>
+          <StyledTypography variant="h3">Volumes</StyledTypography>
         </Grid>
-        <Grid className={classes.addNewWrapper}>
+        <StyledNewWrapperGrid>
           <AddNewLink
             disabled={false}
             label="Create Volume"
             onClick={openCreateVolumeDrawer}
           />
-        </Grid>
-      </Grid>
+        </StyledNewWrapperGrid>
+      </StyledRootGrid>
       <Table>
         <TableHead>
           <TableRow>
@@ -364,3 +332,15 @@ export const LinodeVolumes = connected((props: Props) => {
     </div>
   );
 });
+
+const StyledNewWrapperGrid = styled(Grid, { label: 'StyledNewWrapperGrid' })(
+  ({ theme }) => ({
+    '&.MuiGrid-item': {
+      padding: 5,
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: `-${theme.spacing(1.5)}`,
+      marginTop: `-${theme.spacing(1)}`,
+    },
+  })
+);
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx
index d43eb68f9c4..32532724a44 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx
@@ -1,7 +1,6 @@
 import { Disk } from '@linode/api-v4/lib/linodes';
 import { ResizeLinodeDiskSchema } from '@linode/validation';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -26,13 +25,6 @@ import { handleAPIErrors } from 'src/utilities/formikErrorUtils';
 
 import { calculateDiskFree } from './CreateDiskDrawer';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  formHelperTextLink: {
-    display: 'block',
-    marginTop: theme.spacing(1),
-  },
-}));
-
 export interface Props {
   disk: Disk | undefined;
   linodeId: number;
@@ -51,8 +43,6 @@ const handleLinkClick = (label: string) => {
 export const ResizeDiskDrawer = (props: Props) => {
   const { disk, linodeId, onClose, open } = props;
 
-  const classes = useStyles();
-
   const { enqueueSnackbar } = useSnackbar();
 
   const { mutateAsync: resizeDisk, reset } = useLinodeDiskResizeMutation(
@@ -106,17 +96,16 @@ export const ResizeDiskDrawer = (props: Props) => {
         <FormHelperText>
           The size of a Linode Compute Instance&rsquo;s disk can be increased or
           decreased as needed.
-          <Link
+          <StyledLink
             onClick={() => {
               handleLinkClick('Learn more about restrictions to keep in mind.');
             }}
             to={
               'https://www.linode.com/docs/products/compute/compute-instances/guides/disks-and-storage/'
             }
-            className={classes.formHelperTextLink}
           >
             Learn more about restrictions to keep in mind.
-          </Link>
+          </StyledLink>
         </FormHelperText>
         <TextField
           InputProps={{
@@ -182,3 +171,8 @@ const MaxSizeTooltipText = (
     ).
   </>
 );
+
+const StyledLink = styled(Link, { label: 'StyledLink' })(({ theme }) => ({
+  display: 'block',
+  marginTop: theme.spacing(1),
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/ActivityRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/ActivityRow.tsx
index 9c3913e5cad..8480c53ef1c 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/ActivityRow.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/ActivityRow.tsx
@@ -1,7 +1,6 @@
 import { Event } from '@linode/api-v4/lib/account';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
@@ -9,26 +8,12 @@ import { Typography } from 'src/components/Typography';
 import eventMessageGenerator from 'src/eventMessageGenerator';
 import { formatEventSeconds } from 'src/utilities/minute-conversion/minute-conversion';
 
-type ClassNames = 'root';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      margin: 0,
-      padding: theme.spacing(1),
-      width: '100%',
-    },
-  });
-
 interface Props {
   event: Event;
 }
 
-type CombinedProps = Props & WithStyles<ClassNames>;
-
-export const ActivityRow: React.FC<CombinedProps> = (props) => {
-  const { classes, event } = props;
+export const ActivityRow = (props: Props) => {
+  const { event } = props;
 
   const message = eventMessageGenerator(event);
 
@@ -43,9 +28,8 @@ export const ActivityRow: React.FC<CombinedProps> = (props) => {
   }
 
   return (
-    <Grid
+    <StyledGrid
       alignItems={'center'}
-      className={classes.root}
       container
       data-qa-activity-row
       direction={'row'}
@@ -59,10 +43,15 @@ export const ActivityRow: React.FC<CombinedProps> = (props) => {
       <Grid>
         <DateTimeDisplay value={event.created} />
       </Grid>
-    </Grid>
+    </StyledGrid>
   );
 };
 
-const styled = withStyles(styles);
+const StyledGrid = styled(Grid, { label: 'StyledGrid' })(({ theme }) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  margin: 0,
+  padding: theme.spacing(1),
+  width: '100%',
+}));
 
-export default styled(ActivityRow);
+export default ActivityRow;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx
index 190822c759f..0a8ec7787d8 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx
@@ -1,6 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { createStyles, makeStyles, useTheme } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
@@ -34,53 +33,6 @@ import { getDateOptions } from './helpers';
 
 setUpCharts();
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    chartSelect: {
-      maxWidth: 150,
-    },
-    emptyText: {
-      marginTop: theme.spacing(),
-      textAlign: 'center',
-    },
-    graphControls: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      marginBottom: theme.spacing(),
-    },
-    graphGrids: {
-      flexWrap: 'nowrap',
-      margin: 0,
-      [theme.breakpoints.down(1100)]: {
-        flexWrap: 'wrap',
-      },
-    },
-    grid: {
-      '& h2': {
-        fontSize: '1rem',
-      },
-      '&.MuiGrid-item': {
-        padding: theme.spacing(2),
-      },
-      backgroundColor: theme.bg.offWhite,
-      border: `solid 1px ${theme.borderColors.divider}`,
-      marginBottom: theme.spacing(2),
-      [theme.breakpoints.up(1100)]: {
-        '&:first-of-type': {
-          marginRight: theme.spacing(2),
-        },
-      },
-    },
-    labelRangeSelect: {
-      fontSize: '1rem',
-      paddingRight: theme.spacing(2),
-    },
-    root: {
-      width: '100%',
-    },
-  })
-);
-
 interface Props {
   isBareMetalInstance: boolean;
   linodeCreated: string;
@@ -92,8 +44,7 @@ const LinodeSummary: React.FC<Props> = (props) => {
   const { isBareMetalInstance, linodeCreated } = props;
   const { linodeId } = useParams<{ linodeId: string }>();
   const id = Number(linodeId);
-  const theme = useTheme<Theme>();
-  const classes = useStyles();
+  const theme = useTheme();
 
   const { data: profile } = useProfile();
   const timezone = profile?.timezone || DateTime.local().zoneName;
@@ -236,14 +187,14 @@ const LinodeSummary: React.FC<Props> = (props) => {
           errorText={
             <>
               <div>
-                <Typography className={classes.emptyText} variant="h2">
+                <StyledTypography variant="h2">
                   {STATS_NOT_READY_MESSAGE}
-                </Typography>
+                </StyledTypography>
               </div>
               <div>
-                <Typography className={classes.emptyText} variant="body1">
+                <StyledTypography variant="body1">
                   CPU, Network, and Disk stats will be available shortly
-                </Typography>
+                </StyledTypography>
               </div>
             </>
           }
@@ -274,10 +225,17 @@ const LinodeSummary: React.FC<Props> = (props) => {
 
   return (
     <Paper>
-      <Grid className={`${classes.root} m0`} container>
-        <Grid className={`${classes.graphControls} p0`} xs={12}>
-          <Select
-            className={classes.chartSelect}
+      <Grid sx={{ width: '100%', margin: 0 }} container>
+        <Grid
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            marginBottom: theme.spacing(),
+            padding: 0,
+          }}
+          xs={12}
+        >
+          <StyledSelect
             defaultValue={options[0]}
             hideLabel
             id="chartRange"
@@ -291,25 +249,31 @@ const LinodeSummary: React.FC<Props> = (props) => {
         </Grid>
         {!isBareMetalInstance ? (
           <Grid
-            className={`${classes.graphGrids}`}
+            sx={{
+              flexWrap: 'nowrap',
+              margin: 0,
+              [theme.breakpoints.down(1100)]: {
+                flexWrap: 'wrap',
+              },
+            }}
             container
             spacing={4}
             xs={12}
           >
-            <Grid className={classes.grid} xs={12}>
+            <StyledGrid xs={12}>
               <StatsPanel
                 renderBody={renderCPUChart}
                 title="CPU (%)"
                 {...chartProps}
               />
-            </Grid>
-            <Grid className={classes.grid} xs={12}>
+            </StyledGrid>
+            <StyledGrid xs={12}>
               <StatsPanel
                 renderBody={renderDiskIOChart}
                 title="Disk I/O (blocks/s)"
                 {...chartProps}
               />
-            </Grid>
+            </StyledGrid>
           </Grid>
         ) : null}
         <NetworkGraph stats={stats} {...chartProps} />
@@ -318,4 +282,32 @@ const LinodeSummary: React.FC<Props> = (props) => {
   );
 };
 
+const StyledSelect = styled(Select, { label: 'StyledSelect' })({
+  maxWidth: 150,
+});
+
+const StyledGrid = styled(Grid, { label: 'StyledGrid' })(({ theme }) => ({
+  '& h2': {
+    fontSize: '1rem',
+  },
+  '&.MuiGrid-item': {
+    padding: theme.spacing(2),
+  },
+  backgroundColor: theme.bg.offWhite,
+  border: `solid 1px ${theme.borderColors.divider}`,
+  marginBottom: theme.spacing(2),
+  [theme.breakpoints.up(1100)]: {
+    '&:first-of-type': {
+      marginRight: theme.spacing(2),
+    },
+  },
+}));
+
+const StyledTypography = styled(Typography, { label: 'StyledTypography' })(
+  ({ theme }) => ({
+    marginTop: theme.spacing(),
+    textAlign: 'center',
+  })
+);
+
 export default LinodeSummary;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/NetworkGraphs.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/NetworkGraphs.tsx
index 9c4f8de0a7d..b84b26b168d 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/NetworkGraphs.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/NetworkGraphs.tsx
@@ -1,7 +1,6 @@
 import { Stats } from '@linode/api-v4/lib/linodes';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme, useTheme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme, Theme } from '@mui/material/styles';
 import { map, pathOr } from 'ramda';
 import * as React from 'react';
 
@@ -18,7 +17,6 @@ import {
   getTotalTraffic,
 } from 'src/utilities/statMetrics';
 import { readableBytes } from 'src/utilities/unitConversions';
-
 import { StatsPanel } from './StatsPanel';
 
 export interface TotalTrafficProps {
@@ -30,39 +28,6 @@ export interface TotalTrafficProps {
 const formatTotalTraffic = (value: number) =>
   readableBytes(value, { base10: true }).formatted;
 
-const useStyles = makeStyles((theme: Theme) => ({
-  graphGrids: {
-    flexWrap: 'nowrap',
-    margin: 0,
-    padding: theme.spacing(),
-    [theme.breakpoints.down(1100)]: {
-      flexWrap: 'wrap',
-      marginTop: `-${theme.spacing(2)}`,
-    },
-  },
-  grid: {
-    '& h2': {
-      fontSize: '1rem',
-    },
-    '&.MuiGrid-item': {
-      padding: theme.spacing(2),
-    },
-    backgroundColor: theme.bg.offWhite,
-    border: `solid 1px ${theme.borderColors.divider}`,
-    [theme.breakpoints.down(1100)]: {
-      '&:first-of-type': {
-        marginBottom: theme.spacing(2),
-        marginTop: theme.spacing(2),
-      },
-    },
-    [theme.breakpoints.up(1100)]: {
-      '&:first-of-type': {
-        marginRight: theme.spacing(2),
-      },
-    },
-  },
-}));
-
 export interface ChartProps {
   height: number;
   loading: boolean;
@@ -102,8 +67,7 @@ const _getMetrics = (data: NetworkStats) => {
 export const NetworkGraphs: React.FC<Props> = (props) => {
   const { rangeSelection, stats, ...rest } = props;
 
-  const theme = useTheme<Theme>();
-  const classes = useStyles();
+  const theme = useTheme();
 
   const v4Data: NetworkStats = {
     privateIn: pathOr([], ['data', 'netv4', 'private_in'], stats),
@@ -170,8 +134,8 @@ export const NetworkGraphs: React.FC<Props> = (props) => {
   };
 
   return (
-    <Grid className={`${classes.graphGrids} p0`} container spacing={4} xs={12}>
-      <Grid className={classes.grid} xs={12}>
+    <StyledGraphGrid container spacing={4} xs={12}>
+      <StyledGrid xs={12}>
         <StatsPanel
           renderBody={() => (
             <Graph
@@ -186,8 +150,8 @@ export const NetworkGraphs: React.FC<Props> = (props) => {
           title={`Network — IPv4 (${v4Unit}/s)`}
           {...rest}
         />
-      </Grid>
-      <Grid className={classes.grid} xs={12}>
+      </StyledGrid>
+      <StyledGrid xs={12}>
         <StatsPanel
           renderBody={() => (
             <Graph
@@ -202,8 +166,8 @@ export const NetworkGraphs: React.FC<Props> = (props) => {
           title={`Network — IPv6 (${v6Unit}/s)`}
           {...rest}
         />
-      </Grid>
-    </Grid>
+      </StyledGrid>
+    </StyledGraphGrid>
   );
 };
 
@@ -311,4 +275,38 @@ const Graph: React.FC<GraphProps> = (props) => {
   );
 };
 
+const StyledGrid = styled(Grid, { label: 'StyledGrid' })(({ theme }) => ({
+  '& h2': {
+    fontSize: '1rem',
+  },
+  '&.MuiGrid-item': {
+    padding: theme.spacing(2),
+  },
+  backgroundColor: theme.bg.offWhite,
+  border: `solid 1px ${theme.borderColors.divider}`,
+  [theme.breakpoints.down(1100)]: {
+    '&:first-of-type': {
+      marginBottom: theme.spacing(2),
+      marginTop: theme.spacing(2),
+    },
+  },
+  [theme.breakpoints.up(1100)]: {
+    '&:first-of-type': {
+      marginRight: theme.spacing(2),
+    },
+  },
+}));
+
+const StyledGraphGrid = styled(Grid, { label: 'StyledGraphGrid' })(
+  ({ theme }) => ({
+    flexWrap: 'nowrap',
+    margin: 0,
+    padding: 0,
+    [theme.breakpoints.down(1100)]: {
+      flexWrap: 'wrap',
+      marginTop: `-${theme.spacing(2)}`,
+    },
+  })
+);
+
 export default NetworkGraphs;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx
index 86ba881998d..ae80fefcece 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx
@@ -1,26 +1,8 @@
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Typography } from 'src/components/Typography';
 
-const useStyles = makeStyles(() => ({
-  graphsUnavailable: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    padding: 16,
-    paddingTop: 0,
-    width: '100%',
-  },
-  spinner: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    width: '100%',
-  },
-}));
-
 interface Props {
   height: number;
   loading: boolean;
@@ -29,8 +11,6 @@ interface Props {
 }
 
 export const StatsPanel: React.FC<Props> = (props) => {
-  const classes = useStyles();
-
   const { height, loading, renderBody, title } = props;
 
   return (
@@ -39,7 +19,15 @@ export const StatsPanel: React.FC<Props> = (props) => {
         {title}
       </Typography>
       {loading ? (
-        <div className={classes.spinner} style={{ minHeight: height }}>
+        <div
+          style={{
+            minHeight: height,
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+          }}
+        >
           <CircleProgress mini />
         </div>
       ) : (
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MigrationNotification.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MigrationNotification.tsx
index 9c7b1b36015..e372f8450b8 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MigrationNotification.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MigrationNotification.tsx
@@ -1,7 +1,5 @@
 import { NotificationType } from '@linode/api-v4/lib/account';
 import { scheduleOrQueueMigration } from '@linode/api-v4/lib/linodes';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -16,12 +14,7 @@ import { capitalize } from 'src/utilities/capitalize';
 import { parseAPIDate } from 'src/utilities/date';
 import { formatDate } from 'src/utilities/formatDate';
 import { pluralize } from 'src/utilities/pluralize';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  migrationLink: {
-    ...theme.applyLinkStyles,
-  },
-}));
+import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 
 interface Props {
   linodeID: number;
@@ -32,7 +25,6 @@ interface Props {
 }
 
 const MigrationNotification: React.FC<Props> = (props) => {
-  const classes = useStyles();
   const { enqueueSnackbar } = useSnackbar();
 
   const {
@@ -124,12 +116,9 @@ const MigrationNotification: React.FC<Props> = (props) => {
             ? migrationScheduledText()
             : notificationMessage}
           {` `}
-          <button
-            className={classes.migrationLink}
-            onClick={() => openDialog(linodeID)}
-          >
+          <StyledLinkButton onClick={() => openDialog(linodeID)}>
             {capitalize(migrationActionDescription)}
-          </button>
+          </StyledLinkButton>
           .
         </Typography>
       </Notice>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx
index 3478719c19c..b05bcd9f3e3 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/MutationNotification.tsx
@@ -1,7 +1,6 @@
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
@@ -15,18 +14,11 @@ import { useTypeQuery } from 'src/queries/types';
 import { addUsedDiskSpace } from '../LinodeStorage/LinodeDisks';
 import MutateDrawer from '../MutateDrawer';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  pendingMutationLink: {
-    ...theme.applyLinkStyles,
-  },
-}));
-
 interface Props {
   linodeId: number;
 }
 
 export const MutationNotification = (props: Props) => {
-  const { classes } = useStyles();
   const { linodeId } = props;
   const { enqueueSnackbar } = useSnackbar();
 
@@ -89,19 +81,18 @@ export const MutationNotification = (props: Props) => {
               : estimatedTimeToUpgradeInMins)}
           {estimatedTimeToUpgradeInMins < 1 ? ` minute` : ` minutes`}. To learn
           more,&nbsp;
-          <span
+          <StyledSpan
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 setIsMutationDrawerOpen(true);
               }
             }}
-            className={classes.pendingMutationLink}
             onClick={() => setIsMutationDrawerOpen(true)}
             role="button"
             tabIndex={0}
           >
             click here
-          </span>
+          </StyledSpan>
           .
         </Typography>
       </Notice>
@@ -146,6 +137,10 @@ export const MutationNotification = (props: Props) => {
   );
 };
 
+const StyledSpan = styled('span', { label: 'StyledSpan' })(({ theme }) => ({
+  ...theme.applyLinkStyles,
+}));
+
 // Hack solution to determine if a type is moving from shared CPU cores to dedicated.
 const isMovingFromSharedToDedicated = (typeA: string, typeB: string) => {
   return typeA.startsWith('g6-highmem') && typeB.startsWith('g7-highmem');
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx b/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx
index a30e1536800..b76e066cf6e 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx
@@ -1,62 +1,10 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import PointerIcon from 'src/assets/icons/pointer.svg';
 import { Link } from 'src/components/Link';
 import { getLinkOnClick } from 'src/utilities/emptyStateLandingUtils';
 
-const useStyles = makeStyles((theme: Theme) => {
-  const isDarkTheme = theme.name === 'dark';
-  const backgroundColor = isDarkTheme
-    ? theme.bg.primaryNavPaper
-    : theme.bg.offWhite;
-  const borderColor = isDarkTheme ? '#3a3f46' : theme.color.border3;
-  const iconColor = isDarkTheme
-    ? theme.textColors.linkActiveLight
-    : theme.palette.primary.main;
-  return {
-    appLink: {
-      '&:focus': {
-        textDecoration: 'none',
-      },
-      '&:hover': {
-        textDecoration: 'none',
-      },
-      alignItems: 'center',
-      backgroundColor,
-      border: `1px solid ${borderColor}`,
-      color: theme.palette.text.primary,
-      display: 'flex',
-      fontSize: '0.875rem',
-      fontWeight: 700,
-      gridColumn: 'span 1',
-      height: theme.spacing(4.75),
-      justifyContent: 'space-between',
-      maxWidth: theme.spacing(20),
-      paddingLeft: theme.spacing(),
-    },
-    appLinkIcon: {
-      alignItems: 'center',
-      aspectRatio: '1 / 1',
-      borderLeft: `1px solid ${borderColor}`,
-      color: iconColor,
-      display: 'flex',
-      height: '100%',
-      justifyContent: 'center',
-    },
-    appSection: {
-      columnGap: theme.spacing(3),
-      display: 'grid',
-      gridAutoFlow: 'row',
-      gridTemplateColumns: `repeat(2, ${theme.spacing(20)})`,
-      marginBottom: theme.spacing(2),
-      marginTop: theme.spacing(2),
-      rowGap: theme.spacing(),
-    },
-  };
-});
-
 const gaCategory = 'Linodes landing page empty';
 const linkGAEventTemplate = {
   action: 'Click:link',
@@ -103,18 +51,13 @@ interface AppLinkProps {
 
 const AppLink = (props: AppLinkProps) => {
   const { text, to } = props;
-  const classes = useStyles();
   return (
-    <Link
-      className={classes.appLink}
-      onClick={getLinkOnClick(linkGAEventTemplate, text)}
-      to={to}
-    >
+    <StyledLink onClick={getLinkOnClick(linkGAEventTemplate, text)} to={to}>
       {text}
-      <div className={classes.appLinkIcon}>
+      <StyledAppLinkDiv>
         <PointerIcon />
-      </div>
-    </Link>
+      </StyledAppLinkDiv>
+    </StyledLink>
   );
 };
 
@@ -123,9 +66,60 @@ const appLinks = appsLinkData.map((linkData) => (
 ));
 
 const AppsSection = () => {
-  const classes = useStyles();
-
-  return <div className={classes.appSection}>{appLinks}</div>;
+  return <StyledAppSectionDiv>{appLinks}</StyledAppSectionDiv>;
 };
 
+const StyledLink = styled(Link, { label: 'StyledLink' })(({ theme }) => ({
+  alignItems: 'center',
+  aspectRatio: '1 / 1',
+  borderLeft: `1px solid ${
+    theme.name === 'dark' ? '#3a3f46' : theme.color.border3
+  }`,
+  color:
+    theme.name === 'dark'
+      ? theme.textColors.linkActiveLight
+      : theme.palette.primary.main,
+  display: 'flex',
+  height: '100%',
+  justifyContent: 'center',
+}));
+
+const StyledAppLinkDiv = styled('div', { label: 'StyledAppLinkDiv' })(
+  ({ theme }) => ({
+    '&:focus': {
+      textDecoration: 'none',
+    },
+    '&:hover': {
+      textDecoration: 'none',
+    },
+    alignItems: 'center',
+    backgroundColor:
+      theme.name === 'dark' ? theme.bg.primaryNavPaper : theme.bg.offWhite,
+    border: `1px solid ${
+      theme.name === 'dark' ? '#3a3f46' : theme.color.border3
+    }`,
+    color: theme.palette.text.primary,
+    display: 'flex',
+    fontSize: '0.875rem',
+    fontWeight: 700,
+    gridColumn: 'span 1',
+    height: theme.spacing(4.75),
+    justifyContent: 'space-between',
+    maxWidth: theme.spacing(20),
+    paddingLeft: theme.spacing(),
+  })
+);
+
+const StyledAppSectionDiv = styled('div', { label: 'StyledAppSectionDiv' })(
+  ({ theme }) => ({
+    columnGap: theme.spacing(3),
+    display: 'grid',
+    gridAutoFlow: 'row',
+    gridTemplateColumns: `repeat(2, ${theme.spacing(20)})`,
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(2),
+    rowGap: theme.spacing(),
+  })
+);
+
 export default AppsSection;
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/CardView.tsx b/packages/manager/src/features/Linodes/LinodesLanding/CardView.tsx
index da7eb2575bb..da4be3d1d33 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/CardView.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/CardView.tsx
@@ -1,6 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { keyframes, styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { TagDrawer, TagDrawerProps } from 'src/components/TagCell/TagDrawer';
@@ -11,27 +10,7 @@ import { useProfile } from 'src/queries/profile';
 
 import { RenderLinodesProps } from './DisplayLinodes';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  '@keyframes pulse': {
-    to: {
-      backgroundColor: `hsla(40, 100%, 55%, 0)`,
-    },
-  },
-  summaryOuter: {
-    '& .statusOther:before': {
-      animation: '$pulse 1.5s ease-in-out infinite',
-    },
-    '&.MuiGrid-item': {
-      padding: 0,
-    },
-    backgroundColor: theme.bg.bgPaper,
-    marginBottom: 20,
-  },
-}));
-
 const CardView = (props: RenderLinodesProps) => {
-  const classes = useStyles();
-
   const { data: profile } = useProfile();
 
   const [tagDrawer, setTagDrawer] = React.useState<
@@ -89,7 +68,7 @@ const CardView = (props: RenderLinodesProps) => {
       <Grid className="m0" container style={{ width: '100%' }}>
         {data.map((linode, idx: number) => (
           <React.Fragment key={`linode-card-${idx}`}>
-            <Grid className={`${classes.summaryOuter} py0`} xs={12}>
+            <StyledSummaryGrid xs={12}>
               <LinodeEntityDetail
                 handlers={{
                   onOpenDeleteDialog: () =>
@@ -112,7 +91,7 @@ const CardView = (props: RenderLinodesProps) => {
                 isSummaryView
                 linode={linode}
               />
-            </Grid>
+            </StyledSummaryGrid>
           </React.Fragment>
         ))}
       </Grid>
@@ -128,4 +107,25 @@ const CardView = (props: RenderLinodesProps) => {
   );
 };
 
+const pulseAnimation = keyframes({
+  to: {
+    backgroundColor: `hsla(40, 100%, 55%, 0)`,
+  },
+});
+
+const StyledSummaryGrid = styled(Grid, { label: 'StyledSummaryGrid' })(
+  ({ theme }) => ({
+    [`& .statusOther:before`]: {
+      animation: `${pulseAnimation} 1.5s ease-in-out infinite`,
+    },
+    [`&.MuiGrid-item`]: {
+      padding: 0,
+    },
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: 20,
+    paddingTop: 0, // from .py0 css class
+    paddingBottom: 0,
+  })
+);
+
 export default CardView;
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.styles.ts b/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.styles.ts
new file mode 100644
index 00000000000..f95cad166a5
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.styles.ts
@@ -0,0 +1,82 @@
+import { styled } from '@mui/material/styles';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { isPropValid } from 'src/utilities/isPropValid';
+
+import { IPAddressProps } from './IPAddress';
+
+interface StyledIpAddressProps extends Partial<IPAddressProps> {
+  isIpHovered?: boolean;
+}
+
+export const StyledIpLinkDiv = styled('div', { label: 'StyledIpLinkDiv' })(
+  ({ theme }) => ({
+    color: theme.palette.primary.main,
+    display: 'inline-block',
+    position: 'relative' as const,
+    top: -1,
+    transition: theme.transitions.create(['color']),
+  })
+);
+
+export const StyledRootDiv = styled('div', {
+  label: 'StyledRootDiv',
+  shouldForwardProp: (prop) => isPropValid(['showAll'], prop),
+})<StyledIpAddressProps>(({ showAll, theme }) => ({
+  '&:last-child': {
+    marginBottom: 0,
+  },
+  marginBottom: theme.spacing(0.5),
+  maxWidth: '100%',
+  width: '100%',
+
+  ...(!showAll
+    ? {
+        alignItems: 'center',
+        display: 'inline-flex',
+      }
+    : {}),
+}));
+
+export const StyledCopyTooltip = styled(CopyTooltip, {
+  label: 'StyledCopyTooltip ',
+  shouldForwardProp: (prop) =>
+    isPropValid(['isHovered', 'isIpHovered', 'showTooltipOnIpHover'], prop),
+})<StyledIpAddressProps>(
+  ({ isHovered, isIpHovered, showTooltipOnIpHover, theme }) => ({
+    '& svg': {
+      height: 12,
+      top: 1,
+      width: 12,
+    },
+    '&:focus': {
+      opacity: 1,
+    },
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    marginLeft: theme.spacing(0.5),
+    opacity: isHovered ? 1 : 0,
+    transition: theme.transitions.create(['opacity']),
+    ...(showTooltipOnIpHover && {
+      opacity: isIpHovered ? 1 : 0,
+    }),
+  })
+);
+
+export const StyledRenderIPDiv = styled('div', {
+  label: 'StyledRenderIPDiv',
+  shouldForwardProp: (prop) =>
+    isPropValid(['showAll', 'showTooltipOnIpHover'], prop),
+})<StyledIpAddressProps>(({ showAll, theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  width: '100%',
+  ...(showAll
+    ? {
+        '&:not(:last-child)': {
+          marginBottom: theme.spacing(0.5),
+        },
+      }
+    : {}),
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.test.tsx b/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.test.tsx
index 14c5aa3ac57..5619a50f945 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.test.tsx
@@ -8,19 +8,7 @@ const publicIP2 = '45.45.45.45';
 const privateIP = '192.168.220.103';
 const privateIP2 = '192.168.220.102';
 
-const classes = {
-  hide: 'hide',
-  icon: '',
-  ipLink: '',
-  multipleAddresses: '',
-  right: '',
-  root: '',
-  row: '',
-};
-
-const component = shallow(
-  <IPAddress classes={classes} ips={['8.8.8.8', '8.8.4.4']} />
-);
+const component = shallow(<IPAddress ips={['8.8.8.8', '8.8.4.4']} />);
 
 describe('IPAddress', () => {
   it('should render without error and display one IP address if showAll is false', () => {
@@ -43,12 +31,18 @@ describe('IPAddress', () => {
     expect(showmore.prop('items')).toEqual(['8.8.4.4']);
   });
 
-  it('should render the copy icon, but not show it if showCopyOnHover is true', () => {
-    expect(component.find('.hide')).toHaveLength(0);
-    component.setProps({ showCopyOnHover: true });
+  // TODO figure out this test !!!!!!!
+  it('should render the copy icon, but not show it if showTooltipOnIpHover is false', () => {
+    const icon = component.find('[data-testid]');
+    expect(icon).toHaveLength(1);
+    expect(icon.get(0).props.isIpHovered).toBe(false);
+    expect(icon.get(0).props.showTooltipOnIpHover).toBe(false);
+
+    component.setProps({ showTooltipOnIpHover: true });
     const copy = component.find('[data-qa-copy-ip]');
     expect(copy).toHaveLength(1);
-    expect(component.find('.hide')).toHaveLength(1);
+    const icon2 = component.find('[data-testid]');
+    expect(icon2.get(0).props.showTooltipOnIpHover).toBe(true);
   });
 
   describe('IP address sorting', () => {
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.tsx b/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.tsx
index 028fb8ece84..171bbd1ee58 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/IPAddress.tsx
@@ -1,5 +1,3 @@
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
 import copy from 'copy-to-clipboard';
 import { tail } from 'ramda';
 import * as React from 'react';
@@ -8,84 +6,53 @@ import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { ShowMore } from 'src/components/ShowMore/ShowMore';
 import { privateIPRegex } from 'src/utilities/ipUtils';
 
-type CSSClasses =
-  | 'hide'
-  | 'icon'
-  | 'ipLink'
-  | 'multipleAddresses'
-  | 'right'
-  | 'root'
-  | 'row';
-
-const styles = (theme: Theme) =>
-  createStyles({
-    hide: {
-      '&:focus': {
-        opacity: 1,
-      },
-      [theme.breakpoints.up('md')]: {
-        // Hide until the component is hovered,
-        // when props.showCopyOnHover is true (only on desktop)
-        opacity: 0,
-      },
-      transition: theme.transitions.create(['opacity']),
-    },
-    icon: {
-      '& svg': {
-        height: 12,
-        top: 1,
-        width: 12,
-      },
-    },
-    ipLink: {
-      color: theme.palette.primary.main,
-      display: 'inline-block',
-      position: 'relative',
-      top: -1,
-      transition: theme.transitions.create(['color']),
-    },
-    multipleAddresses: {
-      '&:not(:last-child)': {
-        marginBottom: theme.spacing(0.5),
-      },
-    },
-    right: {
-      alignItems: 'center',
-      display: 'flex',
-      justifyContent: 'center',
-      marginLeft: theme.spacing(0.5),
-    },
-    root: {
-      '&:hover': {
-        '& $hide': {
-          opacity: 1,
-        },
-      },
-      '&:last-child': {
-        marginBottom: 0,
-      },
-      marginBottom: theme.spacing(0.5),
-      maxWidth: '100%',
-      width: '100%',
-    },
-    row: {
-      alignItems: 'flex-start',
-      display: 'flex',
-      width: '100%',
-    },
-  });
-
-interface Props {
+import {
+  StyledCopyTooltip,
+  StyledIpLinkDiv,
+  StyledRenderIPDiv,
+  StyledRootDiv,
+} from './IPAddress.styles';
+
+export interface IPAddressProps {
+  /**
+   * Conditional handlers to be applied to the IP wrapper div when `showTooltipOnIpHover` is true.
+   * @default undefined
+   */
+  handlers?: {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+  };
+  /**
+   * The IP addresses to be displayed.
+   * default []
+   */
   ips: string[];
+  /**
+   * If true, the IP address copy icon will be displayed when the row is hovered.
+   * @default false
+   */
+  isHovered?: boolean;
+  /**
+   * If true, all IP addresses will be displayed.
+   * @default false
+   */
   showAll?: boolean;
-  showCopyOnHover?: boolean;
+  /**
+   * If true, additional IP addresses will be displayed via a ShowMore component within a tooltip.
+   * @default false
+   */
   showMore?: boolean;
+  /**
+   * If true, the IP address copy icon will only be displayed when hovering over the IP address.
+   * @default false
+   */
+  showTooltipOnIpHover?: boolean;
 }
 
 export const sortIPAddress = (ip1: string, ip2: string) =>
   (privateIPRegex.test(ip1) ? 1 : -1) - (privateIPRegex.test(ip2) ? 1 : -1);
 
-export class IPAddress extends React.Component<Props & WithStyles<CSSClasses>> {
+export class IPAddress extends React.Component<IPAddressProps> {
   componentWillUnmount() {
     if (this.copiedTimeout !== null) {
       window.clearTimeout(this.copiedTimeout);
@@ -93,14 +60,14 @@ export class IPAddress extends React.Component<Props & WithStyles<CSSClasses>> {
   }
 
   render() {
-    const { classes, ips, showAll, showMore } = this.props;
+    const { ips, showAll, showMore } = this.props;
 
     const formattedIPS = ips
       .map((ip) => ip.replace('/64', ''))
       .sort(sortIPAddress);
 
     return (
-      <div className={`${!showAll && 'dif'} ${classes.root}`}>
+      <StyledRootDiv showAll={showAll}>
         {!showAll
           ? this.renderIP(formattedIPS[0])
           : formattedIPS.map((a, i) => {
@@ -119,7 +86,7 @@ export class IPAddress extends React.Component<Props & WithStyles<CSSClasses>> {
             items={tail(formattedIPS)}
           />
         )}
-      </div>
+      </StyledRootDiv>
     );
   }
 
@@ -133,36 +100,61 @@ export class IPAddress extends React.Component<Props & WithStyles<CSSClasses>> {
 
   copiedTimeout: null | number = null;
 
+  handleMouseEnter = () => {
+    this.setState({
+      isIpTooltipHovered: true,
+    });
+  };
+
+  handleMouseLeave = () => {
+    this.setState({
+      isIpTooltipHovered: false,
+    });
+  };
+
   renderCopyIcon = (ip: string) => {
-    const { classes, showCopyOnHover } = this.props;
+    const { isHovered = false, showTooltipOnIpHover = false } = this.props;
+    const { isIpTooltipHovered } = this.state;
 
     return (
-      <div className={`${classes.ipLink}`} data-qa-copy-ip>
-        <CopyTooltip
-          className={`${classes.icon} ${showCopyOnHover ? classes.hide : ''}
-            ${classes.right} copy`}
+      <StyledIpLinkDiv data-qa-copy-ip>
+        <StyledCopyTooltip
+          data-testid={`styled-copytooltip`}
+          isHovered={isHovered}
+          isIpHovered={isIpTooltipHovered}
+          showTooltipOnIpHover={showTooltipOnIpHover}
           text={ip}
         />
-      </div>
+      </StyledIpLinkDiv>
     );
   };
 
   renderIP = (ip: string, key?: number) => {
-    const { classes, showAll } = this.props;
+    const { showTooltipOnIpHover = false } = this.props;
+
+    const handlers = showTooltipOnIpHover
+      ? {
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+        }
+      : undefined;
+
     return (
-      <div
-        className={`${classes.row} ${showAll && classes.multipleAddresses}`}
-        key={key}
+      <StyledRenderIPDiv
+        {...handlers}
+        key={`${key}-${ip}`}
+        showTooltipOnIpHover={showTooltipOnIpHover}
       >
         <CopyTooltip copyableText data-qa-copy-ip-text text={ip} />
         {this.renderCopyIcon(ip)}
-      </div>
+      </StyledRenderIPDiv>
     );
   };
 
   state = {
     copied: false,
+    isIpTooltipHovered: false,
   };
 }
 
-export default withStyles(styles)(IPAddress);
+export default IPAddress;
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.style.ts b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.style.ts
index 6747bd85f14..5c0958584f7 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.style.ts
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.style.ts
@@ -1,75 +1,71 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, Theme } from '@mui/material/styles';
 
-export const useStyles = makeStyles((theme: Theme) => ({
-  bodyRow: {
-    '& [data-qa-copy-ip] button:focus > svg': {
-      opacity: 1,
-    },
-    '&:hover': {
-      '& [data-qa-copy-ip] button > svg': {
-        opacity: 1,
-      },
-    },
-    height: 'auto',
-  },
-  ipCellWrapper: {
-    '& *': {
-      fontSize: '.875rem',
-      paddingBottom: 0,
-      paddingTop: 0,
-    },
-    '& [data-qa-copy-ip] button > svg': {
-      opacity: 0,
-    },
-    '& button:hover': {
-      backgroundColor: 'transparent',
-    },
-    '& svg': {
-      '&:hover': {
-        color: theme.palette.primary.main,
-      },
-      marginTop: 2,
-    },
-  },
-  maintenanceOuter: {
-    alignItems: 'center',
-    display: 'flex',
-  },
-  maintenanceTooltip: {
-    maxWidth: 300,
-  },
-  progressDisplay: {
-    display: 'inline-block',
+import { TableCell } from 'src/components/TableCell';
+import { Link } from 'react-router-dom';
+import { isPropValid } from 'src/utilities/isPropValid';
+
+type StyledMaintenanceCellProps = { maintenance: boolean };
+
+const statusLinkStyles = (theme: Theme) => ({
+  '& p': {
+    color: theme.textColors.linkActiveLight,
+    fontFamily: theme.font.bold,
   },
-  statusCellMaintenance: {
-    '& .data': {
-      alignItems: 'center',
-      display: 'flex',
-      lineHeight: 1.2,
-      marginRight: -12,
-      [theme.breakpoints.up('md')]: {
-        minWidth: 200,
-      },
-    },
-    '& button': {
-      color: theme.textColors.linkActiveLight,
-      padding: '0 6px',
-      position: 'relative',
-    },
-    [theme.breakpoints.up('md')]: {
-      width: '20%',
-    },
+  backgroundColor: 'transparent',
+  border: 'none',
+  color: theme.textColors.linkActiveLight,
+  cursor: 'pointer',
+  padding: 0,
+});
+
+export const StyledLink = styled(Link, { label: 'StyledLink' })(
+  ({ theme }) => ({
+    ...statusLinkStyles(theme),
+  })
+);
+
+export const StyledButton = styled('button', { label: 'StyledButton' })(
+  ({ theme }) => ({
+    ...statusLinkStyles(theme),
+  })
+);
+
+export const StyledIpTableCell = styled(TableCell, {
+  label: 'StyledIpTableCell',
+})({
+  '& *': {
+    fontSize: '.875rem',
+    paddingBottom: 0,
+    paddingTop: 0,
   },
-  statusLink: {
-    '& p': {
-      color: theme.textColors.linkActiveLight,
-      fontFamily: theme.font.bold,
-    },
+  '& button:hover': {
     backgroundColor: 'transparent',
-    border: 'none',
-    color: theme.textColors.linkActiveLight,
-    cursor: 'pointer',
-    padding: 0,
   },
+});
+
+export const StyledMaintenanceTableCell = styled(TableCell, {
+  label: 'StyledMaintenanceTableCell',
+  shouldForwardProp: (prop) => isPropValid(['maintenance'], prop),
+})<StyledMaintenanceCellProps>(({ theme, maintenance }) => ({
+  ...(maintenance
+    ? {
+        '& .data': {
+          alignItems: 'center',
+          display: 'flex',
+          lineHeight: 1.2,
+          marginRight: -12,
+          [theme.breakpoints.up('md')]: {
+            minWidth: 200,
+          },
+        },
+        '& button': {
+          color: theme.textColors.linkActiveLight,
+          padding: '0 6px',
+          position: 'relative',
+        },
+        [theme.breakpoints.up('md')]: {
+          width: '20%',
+        },
+      }
+    : {}),
 }));
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.test.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.test.tsx
index 122683ceba0..de03192cdde 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.test.tsx
@@ -10,7 +10,6 @@ describe('LinodeRow', () => {
     it('should render a Flag', () => {
       const wrapper = shallow(
         <RenderFlag
-          classes={{ flag: '' }}
           linodeNotifications={[mockNotification]}
           mutationAvailable={false}
         />
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx
index a74a26ff96c..97881c7819d 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx
@@ -1,7 +1,6 @@
 import { Notification } from '@linode/api-v4/lib/account';
 import { Linode } from '@linode/api-v4/lib/linodes';
 import { SxProps } from '@mui/system';
-import classNames from 'classnames';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -32,12 +31,16 @@ import { LinodeActionMenu } from '../LinodeActionMenu';
 import { LinodeHandlers } from '../LinodesLanding';
 import RegionIndicator from '../RegionIndicator';
 import { parseMaintenanceStartTime } from '../utils';
-import { useStyles } from './LinodeRow.style';
+import {
+  StyledButton,
+  StyledLink,
+  StyledIpTableCell,
+  StyledMaintenanceTableCell,
+} from './LinodeRow.style';
 
 type Props = Linode & { handlers: LinodeHandlers };
 
 export const LinodeRow = (props: Props) => {
-  const classes = useStyles();
   const { backups, handlers, id, ipv4, label, region, status, type } = props;
 
   const notificationContext = React.useContext(_notificationContext);
@@ -76,9 +79,9 @@ export const LinodeRow = (props: Props) => {
       <>
         This Linode&rsquo;s maintenance window opens at{' '}
         {parsedMaintenanceStartTime}. For more information, see your{' '}
-        <Link className={classes.statusLink} to="/support/tickets?type=open">
+        <StyledLink to="/support/tickets?type=open">
           open support tickets.
-        </Link>
+        </StyledLink>
       </>
     );
   };
@@ -90,23 +93,33 @@ export const LinodeRow = (props: Props) => {
       ? 'inactive'
       : 'other';
 
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const handleMouseEnter = React.useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = React.useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
   return (
     <TableRow
       ariaLabel={label}
-      className={classes.bodyRow}
       data-qa-linode={label}
       data-qa-loading
       key={id}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      sx={{ height: 'auto' }}
     >
       <TableCell noWrap>
         <Link tabIndex={0} to={`/linodes/${id}`}>
           {label}
         </Link>
       </TableCell>
-      <TableCell
-        className={classNames({
-          [classes.statusCellMaintenance]: Boolean(maintenance),
-        })}
+      <StyledMaintenanceTableCell
+        maintenance={Boolean(maintenance)}
         data-qa-status
         statusCell
       >
@@ -114,16 +127,13 @@ export const LinodeRow = (props: Props) => {
           loading ? (
             <>
               <StatusIcon status={iconStatus} />
-              <button
-                className={classes.statusLink}
-                onClick={notificationContext.openMenu}
-              >
+              <StyledButton onClick={notificationContext.openMenu}>
                 <ProgressDisplay
-                  className={classes.progressDisplay}
                   progress={getProgressOrDefault(recentEvent)}
+                  sx={{ display: 'inline-block' }}
                   text={transitionText(status, id, recentEvent)}
                 />
-              </button>
+              </StyledButton>
             </>
           ) : (
             <>
@@ -132,10 +142,10 @@ export const LinodeRow = (props: Props) => {
             </>
           )
         ) : (
-          <div className={classes.maintenanceOuter}>
+          <div style={{ alignItems: 'center', display: 'flex' }}>
             <strong>Maintenance Scheduled</strong>
             <TooltipIcon
-              classes={{ tooltip: classes.maintenanceTooltip }}
+              sx={{ tooltip: { maxWidth: 300 } }}
               interactive
               status="help"
               text={<MaintenanceText />}
@@ -143,14 +153,14 @@ export const LinodeRow = (props: Props) => {
             />
           </div>
         )}
-      </TableCell>
+      </StyledMaintenanceTableCell>
       <Hidden smDown>
         <TableCell noWrap>
           {linodeType ? formatStorageUnits(linodeType.label) : type}
         </TableCell>
-        <TableCell className={classes.ipCellWrapper} data-qa-ips>
-          <IPAddress ips={ipv4} />
-        </TableCell>
+        <StyledIpTableCell data-qa-ips>
+          <IPAddress ips={ipv4} isHovered={isHovered} />
+        </StyledIpTableCell>
         <Hidden lgDown>
           <TableCell data-qa-region>
             <RegionIndicator region={region} />
@@ -172,7 +182,6 @@ export const LinodeRow = (props: Props) => {
           mutationAvailable={
             linodeType !== undefined && linodeType?.successor !== null
           }
-          classes={classes}
           linodeNotifications={linodeNotifications}
         />
         <LinodeActionMenu
@@ -191,7 +200,6 @@ export const LinodeRow = (props: Props) => {
 };
 
 export const RenderFlag: React.FC<{
-  classes: any;
   linodeNotifications: Notification[];
   mutationAvailable: boolean;
 }> = (props) => {
@@ -200,12 +208,12 @@ export const RenderFlag: React.FC<{
    * or if it has a pending mutation available. Mutations take
    * precedent over notifications
    */
-  const { classes, linodeNotifications, mutationAvailable } = props;
+  const { linodeNotifications, mutationAvailable } = props;
 
   if (mutationAvailable) {
     return (
       <Tooltip title="There is a free upgrade available for this Linode">
-        <Flag className={classes.flag} />
+        <Flag />
       </Tooltip>
     );
   }
@@ -215,7 +223,7 @@ export const RenderFlag: React.FC<{
       <>
         {linodeNotifications.map((notification, idx) => (
           <Tooltip key={idx} title={notification.message}>
-            <Flag className={classes.flag} />
+            <Flag />
           </Tooltip>
         ))}
       </>
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.styles.ts b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.styles.ts
index e842db67c3b..e026e432786 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.styles.ts
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.styles.ts
@@ -1,41 +1,17 @@
-import { Theme } from '@mui/material/styles';
-import { WithStyles, createStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 
-type ClassNames = 'CSVlink' | 'CSVlinkContainer' | 'CSVwrapper' | 'root';
+export const StyledWrapperGrid = styled(Grid, { label: 'StyledWrapperGrid' })({
+  marginLeft: 0,
+  marginRight: 0,
+  width: '100%',
+});
 
-const styles = (theme: Theme) =>
-  createStyles({
-    CSVlink: {
-      '&:hover': {
-        textDecoration: 'underline',
-      },
-      color: theme.textColors.tableHeader,
-      fontSize: '.9rem',
-      [theme.breakpoints.down('md')]: {
-        marginRight: theme.spacing(),
-      },
-    },
-    CSVlinkContainer: {
-      '&.MuiGrid-item': {
-        paddingRight: 0,
-      },
-      marginTop: theme.spacing(0.5),
-    },
-    CSVwrapper: {
-      marginLeft: 0,
-      marginRight: 0,
-      width: '100%',
-    },
-    root: {
-      '& > .MuiGrid-item': {
-        paddingLeft: 0,
-        paddingRight: 0,
-      },
-      margin: 0,
-      width: '100%',
-    },
-  });
-
-export type StyleProps = WithStyles<ClassNames>;
-
-export default withStyles(styles);
+export const StyledLinkContainerGrid = styled(Grid, {
+  label: 'StyledLinkContainerGrid',
+})(({ theme }) => ({
+  '&.MuiGrid-item': {
+    paddingRight: 0,
+  },
+  marginTop: theme.spacing(0.5),
+}));
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
index b1e009f4f35..c59d2931a09 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
@@ -1,4 +1,3 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
@@ -36,7 +35,10 @@ import CardView from './CardView';
 import { DeleteLinodeDialog } from './DeleteLinodeDialog';
 import DisplayGroupedLinodes from './DisplayGroupedLinodes';
 import { DisplayLinodes } from './DisplayLinodes';
-import styled, { StyleProps } from './LinodesLanding.styles';
+import {
+  StyledLinkContainerGrid,
+  StyledWrapperGrid,
+} from './LinodesLanding.styles';
 import { LinodesLandingCSVDownload } from './LinodesLandingCSVDownload';
 import { LinodesLandingEmptyState } from './LinodesLandingEmptyState';
 import ListView from './ListView';
@@ -89,13 +91,11 @@ export interface LinodesLandingProps {
 type CombinedProps = LinodesLandingProps &
   StateProps &
   RouteProps &
-  StyleProps &
   WithProfileProps;
 
 class ListLinodes extends React.Component<CombinedProps, State> {
   render() {
     const {
-      classes,
       linodesData,
       linodesInTransition,
       linodesRequestError,
@@ -298,15 +298,11 @@ class ListLinodes extends React.Component<CombinedProps, State> {
                           );
                         }}
                       </OrderBy>
-                      <Grid
-                        className={classes.CSVwrapper}
-                        container
-                        justifyContent="flex-end"
-                      >
-                        <Grid className={classes.CSVlinkContainer}>
+                      <StyledWrapperGrid container justifyContent="flex-end">
+                        <StyledLinkContainerGrid>
                           <LinodesLandingCSVDownload />
-                        </Grid>
-                      </Grid>
+                        </StyledLinkContainerGrid>
+                      </StyledWrapperGrid>
                     </React.Fragment>
                   );
                 }}
@@ -458,7 +454,6 @@ const connected = connect(mapStateToProps, undefined);
 export const enhanced = compose<CombinedProps, LinodesLandingProps>(
   withRouter,
   connected,
-  styled,
   withFeatureFlagConsumer,
   withProfile
 );
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx b/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx
index 943faf551fa..9895b5210db 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/RegionIndicator.tsx
@@ -1,28 +1,19 @@
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
 import { useRegionsQuery } from 'src/queries/regions';
 
-const useStyles = makeStyles({
-  regionIndicator: {
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
-  },
-});
-
 interface Props {
   region: string;
 }
 
 const RegionIndicator = (props: Props) => {
   const { region } = props;
-  const classes = useStyles();
   const { data: regions } = useRegionsQuery();
 
   const actualRegion = regions?.find((r) => r.id === region);
 
   return (
-    <div className={classes.regionIndicator}>
+    <div style={{ alignItems: 'center', whiteSpace: 'nowrap' }}>
       {actualRegion?.label ?? region}
     </div>
   );
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx b/packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx
index a46ec4c3437..1c03afe8079 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/SortableTableHead.tsx
@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import GridView from 'src/assets/icons/grid-view.svg';
@@ -14,53 +13,8 @@ import { Tooltip } from 'src/components/Tooltip';
 
 import { StyledToggleButton } from './DisplayLinodes.styles';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  controlHeader: {
-    backgroundColor: theme.bg.tableHeader,
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-  // There's nothing very scientific about the widths across the breakpoints
-  // here, just a lot of trial and error based on maximum expected column sizes.
-  labelCell: {
-    ...theme.applyTableHeaderStyles,
-    [theme.breakpoints.down('lg')]: {
-      width: '20%',
-    },
-    width: '24%',
-  },
-  lastBackupCell: {
-    ...theme.applyTableHeaderStyles,
-    [theme.breakpoints.down('sm')]: {
-      width: '18%',
-    },
-    width: '14%',
-  },
-  planCell: {
-    ...theme.applyTableHeaderStyles,
-    [theme.breakpoints.only('sm')]: {
-      width: '15%',
-    },
-    width: '14%',
-  },
-  regionCell: {
-    ...theme.applyTableHeaderStyles,
-    [theme.breakpoints.down('sm')]: {
-      width: '18%',
-    },
-    width: '14%',
-  },
-  statusCell: {
-    ...theme.applyTableHeaderStyles,
-    [theme.breakpoints.down('md')]: {
-      width: '25%',
-    },
-    [theme.breakpoints.only('md')]: {
-      width: '27%',
-    },
-    width: '20%',
-  },
-}));
+// There's nothing very scientific about the widths across the breakpoints
+// here, just a lot of trial and error based on maximum expected column sizes.
 
 interface Props {
   isVLAN?: boolean;
@@ -73,7 +27,7 @@ interface Props {
 type CombinedProps<T> = Props & Omit<OrderByProps<T>, 'data'>;
 
 const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
-  const classes = useStyles();
+  const theme = useTheme();
 
   const {
     handleOrderChange,
@@ -94,21 +48,36 @@ const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
       <TableRow>
         <TableSortCell
           active={isActive('label')}
-          className={classes.labelCell}
           data-qa-sort-label={order}
           direction={order}
           handleClick={handleOrderChange}
           label="label"
+          sx={{
+            ...theme.applyTableHeaderStyles,
+            [theme.breakpoints.down('lg')]: {
+              width: '20%',
+            },
+            width: '24%',
+          }}
         >
           Label
         </TableSortCell>
         <TableSortCell
           active={isActive('_statusPriority')}
-          className={classes.statusCell}
           direction={order}
           handleClick={handleOrderChange}
           label="_statusPriority"
           noWrap
+          sx={{
+            ...theme.applyTableHeaderStyles,
+            [theme.breakpoints.down('md')]: {
+              width: '25%',
+            },
+            [theme.breakpoints.only('md')]: {
+              width: '27%',
+            },
+            width: '20%',
+          }}
         >
           Status
         </TableSortCell>
@@ -127,10 +96,16 @@ const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
             <Hidden smDown>
               <TableSortCell
                 active={isActive('type')}
-                className={classes.planCell}
                 direction={order}
                 handleClick={handleOrderChange}
                 label="type"
+                sx={{
+                  ...theme.applyTableHeaderStyles,
+                  [theme.breakpoints.only('sm')]: {
+                    width: '15%',
+                  },
+                  width: '14%',
+                }}
               >
                 Plan
               </TableSortCell>
@@ -145,11 +120,17 @@ const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
               <Hidden lgDown>
                 <TableSortCell
                   active={isActive('region')}
-                  className={classes.regionCell}
                   data-qa-sort-region={order}
                   direction={order}
                   handleClick={handleOrderChange}
                   label="region"
+                  sx={{
+                    ...theme.applyTableHeaderStyles,
+                    [theme.breakpoints.down('sm')]: {
+                      width: '18%',
+                    },
+                    width: '14%',
+                  }}
                 >
                   Region
                 </TableSortCell>
@@ -158,11 +139,17 @@ const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
             <Hidden lgDown>
               <TableSortCell
                 active={isActive('backups:last_successful')}
-                className={classes.lastBackupCell}
                 direction={order}
                 handleClick={handleOrderChange}
                 label="backups:last_successful"
                 noWrap
+                sx={{
+                  ...theme.applyTableHeaderStyles,
+                  [theme.breakpoints.down('sm')]: {
+                    width: '18%',
+                  },
+                  width: '14%',
+                }}
               >
                 Last Backup
               </TableSortCell>
@@ -170,7 +157,13 @@ const SortableTableHead = <T extends unknown>(props: CombinedProps<T>) => {
           </>
         )}
         <TableCell sx={{ padding: '0 !important' }}>
-          <div className={classes.controlHeader}>
+          <div
+            style={{
+              backgroundColor: theme.bg.tableHeader,
+              display: 'flex',
+              justifyContent: 'flex-end',
+            }}
+          >
             <div className="visually-hidden" id="displayViewDescription">
               Currently in {linodeViewPreference} view
             </div>
diff --git a/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx b/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx
index 72cfc344d8e..a2aae81b5d4 100644
--- a/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx
+++ b/packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx
@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 
@@ -10,36 +9,6 @@ import { Typography } from 'src/components/Typography';
 import { API_MAX_PAGE_SIZE } from 'src/constants';
 import { useLinodeVolumesQuery } from 'src/queries/volumes';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  checkbox: {
-    marginLeft: theme.spacing(2),
-  },
-  header: {
-    marginLeft: theme.spacing(2),
-    marginTop: theme.spacing(2),
-  },
-  root: {
-    '& ul:first-of-type': {
-      '& li': {
-        fontSize: '0.875rem',
-        marginBottom: theme.spacing(),
-      },
-      fontFamily: theme.font.normal,
-    },
-    backgroundColor: theme.bg.bgPaper,
-    borderLeft: `5px solid ${theme.palette.warning.dark}`,
-    marginBottom: theme.spacing(2),
-    marginTop: 24,
-    padding: '4px 16px',
-  },
-  volumes: {
-    '& li': {
-      fontFamily: theme.font.bold,
-    },
-    marginTop: theme.spacing(),
-  },
-}));
-
 interface Props {
   error?: string;
   hasConfirmed: boolean;
@@ -50,7 +19,7 @@ interface Props {
 }
 
 const CautionNotice = (props: Props) => {
-  const classes = useStyles();
+  const theme = useTheme();
 
   // This is not great, but lets us get all of the volumes for a Linode while keeping
   // the React Query store in a paginated shape. We want to keep data in a paginated shape
@@ -68,8 +37,13 @@ const CautionNotice = (props: Props) => {
   const amountOfAttachedVolumes = volumesData?.results ?? 0;
 
   return (
-    <div className={classes.root}>
-      <Typography className={classes.header}>
+    <StyledRootDiv>
+      <Typography
+        sx={{
+          marginLeft: theme.spacing(2),
+          marginTop: theme.spacing(2),
+        }}
+      >
         <strong>Caution:</strong>
       </Typography>
       <ul>
@@ -104,11 +78,11 @@ const CautionNotice = (props: Props) => {
               The following
               {amountOfAttachedVolumes > 1 ? ' volumes' : ' volume'} will be
               detached from this Linode:
-              <ul className={classes.volumes}>
+              <StyledVolumeUl>
                 {volumesData?.data.map((eachVolume) => {
                   return <li key={eachVolume.id}>{eachVolume.label}</li>;
                 })}
-              </ul>
+              </StyledVolumeUl>
             </React.Fragment>
           )}
         </li>
@@ -125,12 +99,40 @@ const CautionNotice = (props: Props) => {
       {props.error && <Notice error text={props.error} />}
       <Checkbox
         checked={props.hasConfirmed}
-        className={classes.checkbox}
         onChange={() => props.setConfirmed(!props.hasConfirmed)}
         text="Accept"
+        sx={{
+          marginLeft: theme.spacing(2),
+        }}
       />
-    </div>
+    </StyledRootDiv>
   );
 };
 
+const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(
+  ({ theme }) => ({
+    '& ul:first-of-type': {
+      '& li': {
+        fontSize: '0.875rem',
+        marginBottom: theme.spacing(),
+      },
+      fontFamily: theme.font.normal,
+    },
+    backgroundColor: theme.bg.bgPaper,
+    borderLeft: `5px solid ${theme.palette.warning.dark}`,
+    marginBottom: theme.spacing(2),
+    marginTop: 24,
+    padding: `${theme.spacing(0.5)} ${theme.spacing(2)}`,
+  })
+);
+
+const StyledVolumeUl = styled('div', { label: 'StyledVolumeUl' })(
+  ({ theme }) => ({
+    '& li': {
+      fontFamily: theme.font.bold,
+    },
+    marginTop: theme.spacing(),
+  })
+);
+
 export default React.memo(CautionNotice);
diff --git a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx
index fc3ecf1b5e5..a237edbb666 100644
--- a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx
+++ b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx
@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
@@ -10,26 +9,6 @@ import { Paper } from 'src/components/Paper';
 import { useRegionsQuery } from 'src/queries/regions';
 import { getRegionCountryGroup } from 'src/utilities/formatRegion';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  currentRegion: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(),
-    marginBottom: theme.spacing(4),
-  },
-  root: {
-    '& > p:first-of-type': {
-      color: theme.color.label,
-      fontFamily: theme.font.bold,
-      marginBottom: theme.spacing(),
-      marginTop: theme.spacing(2),
-    },
-    marginTop: theme.spacing(4),
-    padding: 0,
-  },
-}));
-
 interface Props {
   currentRegion: string;
   errorText?: string;
@@ -39,7 +18,6 @@ interface Props {
 }
 
 const ConfigureForm = (props: Props) => {
-  const classes = useStyles();
   const { currentRegion } = props;
 
   const { data: regions } = useRegionsQuery();
@@ -51,15 +29,15 @@ const ConfigureForm = (props: Props) => {
     'us';
 
   return (
-    <Paper className={classes.root}>
+    <StyledPaper>
       <Typography variant="h3">Configure Migration</Typography>
       <Typography>Current Region</Typography>
-      <div className={classes.currentRegion}>
+      <StyledDiv>
         <Flag country={country as Lowercase<Country>} />
         <Typography>{`${getRegionCountryGroup(currentActualRegion)}: ${
           currentActualRegion?.label ?? currentRegion
         }`}</Typography>
-      </div>
+      </StyledDiv>
       <RegionSelect
         regions={
           regions?.filter(
@@ -77,8 +55,27 @@ const ConfigureForm = (props: Props) => {
         menuPlacement="top"
         selectedID={props.selectedRegion}
       />
-    </Paper>
+    </StyledPaper>
   );
 };
 
+const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({
+  '& > p:first-of-type': {
+    color: theme.color.label,
+    fontFamily: theme.font.bold,
+    marginBottom: theme.spacing(),
+    marginTop: theme.spacing(2),
+  },
+  marginTop: theme.spacing(4),
+  padding: 0,
+}));
+
+const StyledDiv = styled('div', { label: 'StyledDiv' })(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: theme.spacing(),
+  marginBottom: theme.spacing(4),
+}));
+
 export default React.memo(ConfigureForm);
diff --git a/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx b/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx
index 3269cc63c91..45ff4e12ab2 100644
--- a/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx
+++ b/packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx
@@ -1,6 +1,5 @@
 import { Event } from '@linode/api-v4/lib/account';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -41,39 +40,6 @@ import { addUsedDiskSpace } from '../LinodesDetail/LinodeStorage/LinodeDisks';
 import CautionNotice from './CautionNotice';
 import ConfigureForm from './ConfigureForm';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  actionWrapper: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    marginBottom: theme.spacing(2),
-    marginTop: theme.spacing(2),
-  },
-  agreement: {
-    maxWidth: '70%',
-    [theme.breakpoints.down('md')]: {
-      maxWidth: 'unset',
-    },
-  },
-  button: {
-    [theme.breakpoints.down('md')]: {
-      marginTop: theme.spacing(2),
-    },
-  },
-  buttonGroup: {
-    marginTop: theme.spacing(3),
-    [theme.breakpoints.down('md')]: {
-      flexWrap: 'wrap',
-      justifyContent: 'flex-end',
-    },
-  },
-  details: {
-    marginTop: theme.spacing(2),
-  },
-  vlanHelperText: {
-    marginTop: theme.spacing(0.5),
-  },
-}));
-
 interface Props {
   linodeId: number | undefined;
   onClose: () => void;
@@ -82,7 +48,7 @@ interface Props {
 
 export const MigrateLinode = React.memo((props: Props) => {
   const { linodeId, onClose, open } = props;
-  const classes = useStyles();
+  const theme = useTheme();
   const { enqueueSnackbar } = useSnackbar();
 
   const { data: linode } = useLinodeQuery(
@@ -241,7 +207,7 @@ export const MigrateLinode = React.memo((props: Props) => {
       title={`Migrate Linode ${linode.label ?? ''} to another region`}
     >
       {error && <Notice error text={error?.[0].reason} />}
-      <Typography className={classes.details} variant="h2">
+      <Typography sx={{ marginTop: theme.spacing(2) }} variant="h2">
         {newLabel}
       </Typography>
       {/*
@@ -266,15 +232,20 @@ export const MigrateLinode = React.memo((props: Props) => {
       />
       <Box
         alignItems="center"
-        className={classes.buttonGroup}
         display="flex"
         justifyContent={showAgreement ? 'space-between' : 'flex-end'}
+        sx={{
+          marginTop: theme.spacing(3),
+          [theme.breakpoints.down('md')]: {
+            flexWrap: 'wrap',
+            justifyContent: 'flex-end',
+          },
+        }}
       >
         {showAgreement ? (
-          <EUAgreementCheckbox
+          <StyledAgreementCheckbox
             centerCheckbox
             checked={hasSignedAgreement}
-            className={classes.agreement}
             onChange={(e) => setHasSignedAgreement(e.target.checked)}
           />
         ) : null}
@@ -286,9 +257,13 @@ export const MigrateLinode = React.memo((props: Props) => {
             (showAgreement && !hasSignedAgreement)
           }
           buttonType="primary"
-          className={classes.button}
           loading={isLoading}
           onClick={handleMigrate}
+          sx={{
+            [theme.breakpoints.down('md')]: {
+              marginTop: theme.spacing(2),
+            },
+          }}
         >
           Enter Migration Queue
         </Button>
@@ -298,6 +273,15 @@ export const MigrateLinode = React.memo((props: Props) => {
   );
 });
 
+const StyledAgreementCheckbox = styled(EUAgreementCheckbox, {
+  label: 'StyledAgreementCheckbox',
+})(({ theme }) => ({
+  maxWidth: '70%',
+  [theme.breakpoints.down('md')]: {
+    maxWidth: 'unset',
+  },
+}));
+
 const getDisabledReason = (
   events: Event[],
   linodeStatus: string,
diff --git a/packages/manager/src/features/Linodes/PowerActionsDialogOrDrawer.tsx b/packages/manager/src/features/Linodes/PowerActionsDialogOrDrawer.tsx
index de1a876f2c6..a8037978918 100644
--- a/packages/manager/src/features/Linodes/PowerActionsDialogOrDrawer.tsx
+++ b/packages/manager/src/features/Linodes/PowerActionsDialogOrDrawer.tsx
@@ -1,6 +1,5 @@
 import { Config } from '@linode/api-v4/lib/linodes';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
@@ -20,26 +19,6 @@ import {
 
 export type Action = 'Power Off' | 'Power On' | 'Reboot';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  dialog: {
-    '& .dialog-content': {
-      paddingBottom: 0,
-      paddingTop: 0,
-    },
-  },
-  notice: {
-    '& .noticeText': {
-      fontSize: '0.875rem !important',
-    },
-  },
-  root: {
-    alignItems: 'center',
-    fontSize: '0.875rem',
-    lineHeight: '1.25rem',
-    marginBottom: theme.spacing(1.25),
-  },
-}));
-
 interface Props {
   action: Action;
   isOpen: boolean;
@@ -60,7 +39,7 @@ export const selectDefaultConfig = (configs?: Config[]) =>
 
 export const PowerActionsDialog = (props: Props) => {
   const { action, isOpen, linodeId, onClose } = props;
-  const classes = useStyles();
+  const theme = useTheme();
 
   const { data: linode } = useLinodeQuery(
     linodeId ?? -1,
@@ -156,14 +135,26 @@ export const PowerActionsDialog = (props: Props) => {
           secondaryButtonProps={{ label: 'Cancel', onClick: props.onClose }}
         />
       }
-      className={classes.dialog}
       error={error?.[0].reason}
       onClose={onClose}
       open={isOpen}
+      sx={{
+        '& .dialog-content': {
+          paddingBottom: 0,
+          paddingTop: 0,
+        },
+      }}
       title={`${action} Linode ${linode?.label ?? ''}?`}
     >
       {props.action === 'Power On' ? (
-        <Typography className={classes.root}>
+        <Typography
+          sx={{
+            alignItems: 'center',
+            fontSize: '0.875rem',
+            lineHeight: '1.25rem',
+            marginBottom: theme.spacing(1.25),
+          }}
+        >
           See the&nbsp;
           <Link to="https://www.linode.com/docs/products/compute/compute-instances/guides/set-up-and-secure/">
             guide for setting up and securing a compute instance
@@ -184,7 +175,14 @@ export const PowerActionsDialog = (props: Props) => {
       )}
       {props.action === 'Power Off' && (
         <span>
-          <Notice className={classes.notice} warning>
+          <Notice
+            sx={{
+              '& .noticeText': {
+                fontSize: '0.875rem !important',
+              },
+            }}
+            warning
+          >
             <strong>Note: </strong>
             Powered down Linodes will still accrue charges.
             <br />