diff --git a/packages/manager/.changeset/pr-9359-tech-stories-1688401214973.md b/packages/manager/.changeset/pr-9359-tech-stories-1688401214973.md
new file mode 100644
index 00000000000..15450f9ebd0
--- /dev/null
+++ b/packages/manager/.changeset/pr-9359-tech-stories-1688401214973.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 - `Components > Snackbar` ([#9359](https://github.com/linode/manager/pull/9359))
diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx
index 6a29c6f7ef5..640b56e884e 100644
--- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx
+++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.mdx
@@ -40,7 +40,7 @@ export const DismissibleBannerTemplate = (args) => {
 
 export const CallToActionBanner = () => {
   return (
-    <DismissibleBanner preferenceKey="cluster-v1" success>
+    <DismissibleBanner preferenceKey="cluster-v1" info>
       <Grid
         container
         direction="row"
@@ -67,7 +67,7 @@ export const StatusBannersTemplate = (args) => {
 
 export const BetaBanner = () => {
   return (
-    <DismissibleBanner preferenceKey="beta-banner" success>
+    <DismissibleBanner preferenceKey="beta-banner" info>
       <Typography>
         Managed Database for MySQL is available in a free, open beta period
         until May 2nd, 2022. This is a beta environment and should not be used
diff --git a/packages/manager/src/components/Notice/Notice.stories.mdx b/packages/manager/src/components/Notice/Notice.stories.mdx
index f60de9e2047..a837d85b83b 100644
--- a/packages/manager/src/components/Notice/Notice.stories.mdx
+++ b/packages/manager/src/components/Notice/Notice.stories.mdx
@@ -15,7 +15,8 @@ import { Notice } from './Notice';
 
 Types of Notices:
 
-- Success/Marketing (blue line)
+- Success/Marketing (green line)
+- Info (blue line)
 - Error/critical (red line)
 - Warning (yellow line)
 
@@ -25,6 +26,12 @@ Types of Notices:
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name="Info">
+    <Notice info text="This is a informational notice" />
+  </Story>
+</Canvas>
+
 <Canvas>
   <Story name="Error">
     <Notice error text="This is an error notice" />
@@ -43,6 +50,12 @@ Types of Notices:
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name="Important Info">
+    <Notice info important text="This is an important informational notice" />
+  </Story>
+</Canvas>
+
 <Canvas>
   <Story name="Important Error">
     <Notice error important text="This is an important error notice" />
diff --git a/packages/manager/src/components/Notice/Notice.tsx b/packages/manager/src/components/Notice/Notice.tsx
index b4c45b9b672..a64c6daa9bd 100644
--- a/packages/manager/src/components/Notice/Notice.tsx
+++ b/packages/manager/src/components/Notice/Notice.tsx
@@ -100,6 +100,16 @@ export const useStyles = makeStyles<
   successList: {
     borderLeft: `5px solid ${theme.palette.success.dark}`,
   },
+  info: {
+    animation: '$fadeIn 225ms linear forwards',
+    borderLeft: `5px solid ${theme.palette.info.dark}`,
+    [`&.${classes.important}`]: {
+      borderLeftWidth: 32,
+    },
+  },
+  infoList: {
+    borderLeft: `5px solid ${theme.palette.info.dark}`,
+  },
   marketing: {
     borderLeft: `5px solid ${theme.color.green}`,
   },
@@ -115,6 +125,7 @@ export interface NoticeProps extends Grid2Props {
   important?: boolean;
   warning?: boolean;
   success?: boolean;
+  info?: boolean;
   marketing?: boolean;
   typeProps?: TypographyProps;
   className?: string;
@@ -131,25 +142,26 @@ export interface NoticeProps extends Grid2Props {
 
 export const Notice = (props: NoticeProps) => {
   const {
+    breakWords,
+    children,
     className,
-    important,
-    text,
+    dataTestId,
     error,
-    breakWords,
     errorGroup,
-    warning,
-    success,
-    marketing,
-    typeProps,
-    children,
     flag,
+    important,
+    info,
+    marketing,
     notificationList,
     onClick,
-    spacingTop,
     spacingBottom,
     spacingLeft,
-    dataTestId,
+    spacingTop,
+    success,
     sx,
+    text,
+    typeProps,
+    warning,
   } = props;
 
   const { classes, cx } = useStyles();
@@ -206,6 +218,8 @@ export const Notice = (props: NoticeProps) => {
         [classes.errorList]: error && notificationList,
         [classes.success]: success && !notificationList,
         [classes.successList]: success && notificationList,
+        [classes.info]: info && !notificationList,
+        [classes.infoList]: info && notificationList,
         [classes.warning]: warning && !notificationList,
         [classes.marketing]: marketing,
         [classes.warningList]: warning && notificationList,
@@ -228,7 +242,7 @@ export const Notice = (props: NoticeProps) => {
       )}
       {important &&
         ((success && <Check className={classes.icon} data-qa-success-img />) ||
-          (warning && (
+          ((warning || info) && (
             <Warning className={classes.icon} data-qa-warning-img />
           )) ||
           (error && <Error className={classes.icon} data-qa-error-img />))}
diff --git a/packages/manager/src/components/SnackBar/index.ts b/packages/manager/src/components/SnackBar/index.ts
deleted file mode 100644
index 9df7163ee1e..00000000000
--- a/packages/manager/src/components/SnackBar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import SnackBar from './SnackBar';
-export default SnackBar;
diff --git a/packages/manager/src/components/SnackBar/CloseSnackbar.tsx b/packages/manager/src/components/Snackbar/CloseSnackbar.tsx
similarity index 100%
rename from packages/manager/src/components/SnackBar/CloseSnackbar.tsx
rename to packages/manager/src/components/Snackbar/CloseSnackbar.tsx
diff --git a/packages/manager/src/components/SnackBar/SnackBar.tsx b/packages/manager/src/components/Snackbar/Snackbar.tsx
similarity index 85%
rename from packages/manager/src/components/SnackBar/SnackBar.tsx
rename to packages/manager/src/components/Snackbar/Snackbar.tsx
index 07ab94a5d10..03cfcc7984d 100644
--- a/packages/manager/src/components/SnackBar/SnackBar.tsx
+++ b/packages/manager/src/components/Snackbar/Snackbar.tsx
@@ -1,10 +1,10 @@
 import { SnackbarProvider, SnackbarProviderProps } from 'notistack';
 import * as React from 'react';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import CloseSnackbar from './CloseSnackbar';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     '& div': {
       backgroundColor: `${theme.bg.white} !important`,
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderLeft: `6px solid ${theme.palette.primary.main}`,
   },
   success: {
-    borderLeft: `6px solid ${theme.palette.primary.main}`,
+    borderLeft: `6px solid ${theme.color.green}`,
   },
   error: {
     borderLeft: `6px solid ${theme.palette.error.dark}`,
@@ -39,10 +39,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-type CombinedProps = SnackbarProviderProps;
-
-const SnackBar: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
+export const Snackbar = (props: SnackbarProviderProps) => {
+  const { classes } = useStyles();
   /**
    * This pattern is taken from the Notistack docs:
    * https://iamhosseindhv.com/notistack/demos#action-for-all-snackbars
@@ -78,5 +76,3 @@ const SnackBar: React.FC<CombinedProps> = (props) => {
     </SnackbarProvider>
   );
 };
-
-export default SnackBar;
diff --git a/packages/manager/src/features/Account/AutoBackups.tsx b/packages/manager/src/features/Account/AutoBackups.tsx
index 7fccbc77040..d6c4c28b647 100644
--- a/packages/manager/src/features/Account/AutoBackups.tsx
+++ b/packages/manager/src/features/Account/AutoBackups.tsx
@@ -49,7 +49,7 @@ const AutoBackups = (props: Props) => {
       <Grid container direction="column" spacing={2}>
         <Grid>
           {!!isManagedCustomer ? (
-            <Notice success spacingBottom={20}>
+            <Notice info spacingBottom={20}>
               You&rsquo;re a Managed customer, which means your Linodes are
               already automatically backed up - no need to toggle this setting.
             </Notice>
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index ae4d4cb9ae2..dea35630607 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -562,7 +562,7 @@ const DatabaseCreate = () => {
           </FormControl>
           <Grid xs={12} md={8}>
             {flags.databaseBeta ? (
-              <Notice success className={classes.notice}>
+              <Notice info className={classes.notice}>
                 <strong>
                   Notice: There is no charge for database clusters during beta.
                 </strong>{' '}
diff --git a/packages/manager/src/features/Events/EventsLanding.tsx b/packages/manager/src/features/Events/EventsLanding.tsx
index 68b7c0dee43..528743e2a99 100644
--- a/packages/manager/src/features/Events/EventsLanding.tsx
+++ b/packages/manager/src/features/Events/EventsLanding.tsx
@@ -1,6 +1,6 @@
 import { Event, getEvents } from '@linode/api-v4/lib/account';
 import { ResourcePage } from '@linode/api-v4/lib/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
+import { useSnackbar } from 'notistack';
 import { compose as rCompose, concat, uniq } from 'ramda';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -61,7 +61,7 @@ interface Props {
   emptyMessage?: string; // Custom message for the empty state (i.e. no events).
 }
 
-type CombinedProps = Props & StateProps & WithSnackbarProps;
+type CombinedProps = Props & StateProps;
 
 const appendToEvents = (oldEvents: Event[], newEvents: Event[]) =>
   rCompose<Event[], Event[], Event[], Event[]>(
@@ -173,6 +173,7 @@ export const reducer: EventsReducer = (state, action) => {
 
 export const EventsLanding: React.FC<CombinedProps> = (props) => {
   const classes = useStyles();
+  const { enqueueSnackbar } = useSnackbar();
 
   const [loading, setLoading] = React.useState<boolean>(false);
   const [loadMoreEvents, setLoadMoreEvents] = React.useState<boolean>(false);
@@ -199,7 +200,7 @@ export const EventsLanding: React.FC<CombinedProps> = (props) => {
     getEventsRequest({ page: currentPage })
       .then(handleEventsRequestSuccess)
       .catch(() => {
-        props.enqueueSnackbar('There was an error loading more events', {
+        enqueueSnackbar('There was an error loading more events', {
           variant: 'error',
         });
         setLoading(false);
@@ -403,6 +404,6 @@ const mapStateToProps = (state: ApplicationState) => ({
 
 const connected = connect(mapStateToProps);
 
-const enhanced = compose<CombinedProps, Props>(connected, withSnackbar);
+const enhanced = compose<CombinedProps, Props>(connected);
 
 export default enhanced(EventsLanding);
diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
index fdd262e59c1..2d169c6e0ff 100644
--- a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
+++ b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
@@ -246,7 +246,7 @@ export const CreateImageTab: React.FC<Props> = (props) => {
       {generalError ? (
         <Notice error text={generalError} data-qa-notice />
       ) : null}
-      {notice ? <Notice success text={notice} data-qa-notice /> : null}
+      {notice ? <Notice info text={notice} data-qa-notice /> : null}
 
       <LinodeSelectV2
         value={selectedLinode?.id || null}
diff --git a/packages/manager/src/features/Images/ImagesDrawer.tsx b/packages/manager/src/features/Images/ImagesDrawer.tsx
index 6f3de4fdcfa..8a2023b7a9c 100644
--- a/packages/manager/src/features/Images/ImagesDrawer.tsx
+++ b/packages/manager/src/features/Images/ImagesDrawer.tsx
@@ -316,7 +316,7 @@ export const ImageDrawer: React.FC<CombinedProps> = (props) => {
       ) : null}
       {generalError && <Notice error text={generalError} data-qa-notice />}
 
-      {notice && <Notice success text={notice} data-qa-notice />}
+      {notice && <Notice info text={notice} data-qa-notice />}
 
       {['create', 'restore'].includes(mode) && (
         <LinodeSelect
diff --git a/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx b/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx
index d84c3ac152e..d88fc1ef2e2 100644
--- a/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx
+++ b/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx
@@ -1,8 +1,6 @@
 import { getKubeConfig } from '@linode/api-v4/lib/kubernetes';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
+import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { compose } from 'recompose';
 import ActionMenu, { Action } from 'src/components/ActionMenu';
 import { Hidden } from 'src/components/Hidden';
 import { useTheme } from '@mui/styles';
@@ -19,15 +17,12 @@ interface Props {
   openDialog: () => void;
 }
 
-type CombinedProps = Props & RouteComponentProps<{}> & WithSnackbarProps;
-
-export const ClusterActionMenu: React.FunctionComponent<CombinedProps> = (
-  props
-) => {
+export const ClusterActionMenu = (props: Props) => {
   const theme = useTheme<Theme>();
+  const { enqueueSnackbar } = useSnackbar();
   const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
 
-  const { clusterId, clusterLabel, enqueueSnackbar, openDialog } = props;
+  const { clusterId, clusterLabel, openDialog } = props;
 
   const actions: Action[] = [
     {
@@ -91,7 +86,3 @@ export const ClusterActionMenu: React.FunctionComponent<CombinedProps> = (
     </>
   );
 };
-
-const enhanced = compose<CombinedProps, Props>(withSnackbar, withRouter);
-
-export default enhanced(ClusterActionMenu);
diff --git a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx b/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx
index 4b907469c1a..0a7415d676b 100644
--- a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx
+++ b/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx
@@ -5,7 +5,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
-import ActionMenu from './ClusterActionMenu';
+import { ClusterActionMenu } from './ClusterActionMenu';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
@@ -149,7 +149,7 @@ export const KubernetesClusterRow = (props: Props) => {
         </TableCell>
       </Hidden>
       <TableCell actionCell>
-        <ActionMenu
+        <ClusterActionMenu
           clusterId={cluster.id}
           clusterLabel={cluster.label}
           openDialog={() =>
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx
index 86a54e97072..0a7797ea6db 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx
@@ -30,7 +30,7 @@ export const UpgradeKubernetesVersionBanner = (props: Props) => {
       {nextVersion ? (
         <DismissibleBanner
           preferenceKey={`${clusterID}-${currentVersion}`}
-          success
+          info
           actionButton={actionButton}
         >
           <Grid
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
index 8a5583c7245..501560fbb04 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
@@ -1,6 +1,5 @@
 import { Config } from '@linode/api-v4/lib/linodes/types';
 import { APIError } from '@linode/api-v4/lib/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
 import * as React from 'react';
 import { QueryClient } from 'react-query';
 import { connect, MapDispatchToProps } from 'react-redux';
@@ -94,7 +93,6 @@ type CombinedProps = Props &
   DispatchProps &
   RouteProps &
   StyleProps &
-  WithSnackbarProps &
   WithProfileProps;
 
 export class ListLinodes extends React.Component<CombinedProps, State> {
@@ -480,7 +478,6 @@ const connected = connect(mapStateToProps, mapDispatchToProps);
 
 export const enhanced = compose<CombinedProps, Props>(
   withRouter,
-  withSnackbar,
   connected,
   styled,
   withFeatureFlagConsumer,
diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx
index 06995a00c21..5fbeb5bea70 100644
--- a/packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx
+++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx
@@ -3,7 +3,6 @@ import {
   LongviewClient,
   LongviewSubscription,
 } from '@linode/api-v4/lib/longview/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
 import { isEmpty, pathOr } from 'ramda';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -79,7 +78,6 @@ interface Props {
 export type CombinedProps = Props &
   RouteComponentProps &
   LongviewProps &
-  WithSnackbarProps &
   StateProps;
 
 type SortKey = 'name' | 'cpu' | 'ram' | 'swap' | 'load' | 'network' | 'storage';
@@ -334,8 +332,7 @@ const connected = connect(mapStateToProps);
 export default compose<CombinedProps, Props & RouteComponentProps>(
   React.memo,
   connected,
-  withLongviewClients(),
-  withSnackbar
+  withLongviewClients()
 )(LongviewClients);
 
 /**
diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.test.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.test.tsx
index 65877e0679e..39540a05626 100644
--- a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.test.tsx
+++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.test.tsx
@@ -39,8 +39,6 @@ const props: CombinedProps = {
   deleteLongviewClient: jest.fn(),
   getLongviewClients: jest.fn().mockResolvedValue([]),
   updateLongviewClient: jest.fn(),
-  enqueueSnackbar: jest.fn(),
-  closeSnackbar: jest.fn(),
   activeSubscription: longviewSubscriptionFactory.build(),
   lvClientData: {},
   handleAddClient: jest.fn(),
diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
index 915392dacb3..eb6cd79c779 100644
--- a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
+++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
@@ -6,7 +6,7 @@ import {
   ActiveLongviewPlan,
   LongviewSubscription,
 } from '@linode/api-v4/lib/longview/types';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
+import { useSnackbar } from 'notistack';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 import { matchPath, RouteComponentProps } from 'react-router-dom';
@@ -28,13 +28,12 @@ import SubscriptionDialog from './SubscriptionDialog';
 const LongviewClients = React.lazy(() => import('./LongviewClients'));
 const LongviewPlans = React.lazy(() => import('./LongviewPlans'));
 
-type CombinedProps = LongviewProps &
-  RouteComponentProps<{}> &
-  WithSnackbarProps;
+type CombinedProps = LongviewProps & RouteComponentProps<{}>;
 
 export const LongviewLanding: React.FunctionComponent<CombinedProps> = (
   props
 ) => {
+  const { enqueueSnackbar } = useSnackbar();
   const activeSubscriptionRequestHook = useAPIRequest<ActiveLongviewPlan>(
     () => getActiveLongviewPlan().then((response) => response),
     {}
@@ -93,7 +92,7 @@ export const LongviewLanding: React.FunctionComponent<CombinedProps> = (
           setSubscriptionDialogOpen(true);
         } else {
           // Any network or other errors handled with a toast
-          props.enqueueSnackbar(
+          enqueueSnackbar(
             getAPIErrorOrDefault(
               errorResponse,
               'Error creating Longview client.'
@@ -180,6 +179,5 @@ export const LongviewLanding: React.FunctionComponent<CombinedProps> = (
 };
 
 export default compose<CombinedProps, {} & RouteComponentProps>(
-  withLongviewClients(),
-  withSnackbar
+  withLongviewClients()
 )(LongviewLanding);
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx
index b773d378c3f..a79c5bac6ff 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx
@@ -351,7 +351,7 @@ export const NodeBalancerConfigPanel = (
         <Grid xs={12}>
           {nodeMessage && (
             <Grid xs={12}>
-              <Notice text={nodeMessage} success />
+              <Notice text={nodeMessage} info />
             </Grid>
           )}
           <Typography variant="h2" data-qa-backend-ip-header>
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx
index ff3f4b48af4..1373c8eb037 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx
@@ -187,7 +187,7 @@ const RemoveCertForm = (props: Props) => {
 
   return (
     <>
-      <Notice success spacingTop={8}>
+      <Notice info spacingTop={8}>
         A TLS certificate has already been uploaded for this Bucket. To upload a
         new certificate, remove the current certificate.{` `}
       </Notice>
diff --git a/packages/manager/src/features/ToastNotifications/ToastNotifications.stories.mdx b/packages/manager/src/features/ToastNotifications/ToastNotifications.stories.mdx
deleted file mode 100644
index 238ed615954..00000000000
--- a/packages/manager/src/features/ToastNotifications/ToastNotifications.stories.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { withSnackbar, useSnackbar } from 'notistack';
-import { Button } from 'src/components/Button/Button';
-import Snackbar from 'src/components/SnackBar';
-
-<Meta title="Components/Notifications/Toasts" />
-
-# Toasts
-
-### Timing
-
-- Default timing for toast notifications is 5 seconds.
-- If the message is longer, more complex, or very important, consider increasing the display time accordingly.
-- If the message is critical (e.g., an Image failed to upload), consider making it persistent until dismissed by the user.
-
-export const MyButton = (args) => {
-  const { variant, onClick } = args;
-  const handleClick = () => {
-    // just call the onClick with the provided variant
-    onClick(variant);
-  };
-  return <Button onClick={handleClick}>{variant}</Button>;
-};
-
-export const Example = () => {
-  const { enqueueSnackbar } = useSnackbar();
-  const variants = ['default', 'success', 'warning', 'error', 'info'];
-  const showToast = (variant) =>
-    enqueueSnackbar(
-      'Toast message. This will auto destruct after five seconds.',
-      {
-        variant,
-      }
-    );
-  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>
-      {variants.map((eachVariant) => {
-        // map over each variant and show a button for each
-        return (
-          <MyButton
-            key={eachVariant}
-            variant={eachVariant}
-            onClick={showToast}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-export const Template = (args) => {
-  const Enhanced = withSnackbar(Example);
-  return (
-    <Snackbar {...args}>
-      <Enhanced />
-    </Snackbar>
-  );
-};
-
-<Canvas>
-  <Story
-    name="Toasts"
-    args={{
-      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-      maxSnack: 3,
-      hideIconVariant: true,
-    }}
-    argTypes={{
-      anchorOrigin: {
-        description:
-          'Determine where the toast initially appears vertically and horizontally.',
-      },
-      maxSnack: {
-        description:
-          'Set the maximum number of toasts that can appear simultaneously.',
-      },
-      hideIconVariant: {
-        description:
-          'Determine whether variant icons appear to the left of the text in the toast.',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable
-  story="Toasts"
-  include={['anchorOrigin', 'maxSnack', 'hideIconVariant']}
-  sort="requiredFirst"
-/>
diff --git a/packages/manager/src/features/ToastNotifications/ToastNotifications.stories.tsx b/packages/manager/src/features/ToastNotifications/ToastNotifications.stories.tsx
new file mode 100644
index 00000000000..b4a2e958677
--- /dev/null
+++ b/packages/manager/src/features/ToastNotifications/ToastNotifications.stories.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useSnackbar } from 'notistack';
+import { Snackbar } from 'src/components/Snackbar/Snackbar';
+import { Button } from 'src/components/Button/Button';
+
+/**
+ * #### Timing
+ * - Default timing for toast notifications is 5 seconds.
+ * - If the message is longer, more complex, or very important, consider increasing the display time accordingly.
+ * - If the message is critical (e.g., an Image failed to upload), consider making it persistent until dismissed by the user.
+ */
+
+const meta: Meta<typeof Snackbar> = {
+  title: 'Components/Notifications/Snackbar - Toast',
+  component: Snackbar,
+  argTypes: {
+    anchorOrigin: {
+      description:
+        'Determine where the toast initially appears vertically and horizontally.',
+    },
+    maxSnack: {
+      description:
+        'Set the maximum number of toasts that can appear simultaneously.',
+    },
+    hideIconVariant: {
+      description:
+        'Determine whether variant icons appear to the left of the text in the toast.',
+    },
+  },
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Snackbar>;
+
+export const Default: Story = {
+  args: {
+    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+    maxSnack: 5,
+    hideIconVariant: true,
+  },
+  render: (args) => <Template {...args} />,
+};
+
+function Template(args: any) {
+  return (
+    <Snackbar {...args}>
+      <Example />
+    </Snackbar>
+  );
+}
+
+function MyButton(args: any) {
+  const { variant, onClick, sx } = args;
+  const handleClick = () => {
+    // just call the onClick with the provided variant
+    onClick(variant);
+  };
+  return (
+    <Button buttonType="primary" onClick={handleClick} sx={sx}>
+      {variant}
+    </Button>
+  );
+}
+
+function Example() {
+  const { enqueueSnackbar } = useSnackbar();
+  const variants = ['default', 'success', 'warning', 'error', 'info'];
+  const showToast = (variant: any) =>
+    enqueueSnackbar(
+      'Toast message. This will auto destruct after five seconds.',
+      {
+        variant,
+      }
+    );
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {variants.map((eachVariant) => {
+        // map over each variant and show a button for each
+        return (
+          <MyButton
+            key={eachVariant}
+            variant={eachVariant}
+            onClick={showToast}
+            sx={{
+              margin: '0 5px',
+            }}
+          />
+        );
+      })}
+    </>
+  );
+}
diff --git a/packages/manager/src/foundations/themes/light.ts b/packages/manager/src/foundations/themes/light.ts
index cd9ec80eb8c..0b26fcc6d54 100644
--- a/packages/manager/src/foundations/themes/light.ts
+++ b/packages/manager/src/foundations/themes/light.ts
@@ -292,6 +292,11 @@ export const lightTheme: ThemeOptions = {
       primary: primaryColors.text,
     },
     success: {
+      light: '#00b159',
+      main: '#00b159',
+      dark: '#00b159',
+    },
+    info: {
       light: '#d7e3ef',
       main: '#d7e3ef',
       dark: '#3682dd',
diff --git a/packages/manager/src/index.tsx b/packages/manager/src/index.tsx
index 47d08978355..f3f02e7fcec 100644
--- a/packages/manager/src/index.tsx
+++ b/packages/manager/src/index.tsx
@@ -5,7 +5,7 @@ import { Provider as ReduxStoreProvider } from 'react-redux';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import AuthenticationWrapper from 'src/components/AuthenticationWrapper';
 import CookieWarning from 'src/components/CookieWarning';
-import SnackBar from 'src/components/SnackBar';
+import { Snackbar } from 'src/components/Snackbar/Snackbar';
 import SplashScreen from 'src/components/SplashScreen';
 import 'src/exceptionReporting';
 import Logout from 'src/layouts/Logout';
@@ -40,7 +40,7 @@ const Null = () => <span>null route</span>;
 const AppWrapper = () => (
   <>
     <SplashScreen />
-    <SnackBar
+    <Snackbar
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       maxSnack={3}
       autoHideDuration={4000}
@@ -48,7 +48,7 @@ const AppWrapper = () => (
       hideIconVariant={true}
     >
       <App />
-    </SnackBar>
+    </Snackbar>
   </>
 );