diff --git a/.yarnrc.yml b/.yarnrc.yml
index 252333917781..1522080c0561 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -43,6 +43,16 @@ npmAuditIgnoreAdvisories:
   # not appear to be used.
   - 1092461
 
+  # Issue: path-to-regexp outputs backtracking regular expressions
+  # URL: https://github.com/advisories/GHSA-9wv6-86v2-598j
+  # path-to-regexp is used in react-router v5.1.2, which we use. However, the
+  # vulnerability in path-to-regexp could only be exploited within react-router
+  # if malicious properties were passed to react-router components or methods
+  # explicitly from our code. As such, this vulneratibility cannot be exploited
+  # by an external / malicious actor. Meanwhile, once we update to v6+,
+  # path-to-regexp will no longer be used.
+  - 1099499
+
   # Temp fix for https://github.com/MetaMask/metamask-extension/pull/16920 for the sake of 11.7.1 hotfix
   # This will be removed in this ticket https://github.com/MetaMask/metamask-extension/issues/22299
   - 'ts-custom-error (deprecation)'
diff --git a/test/integration/confirmations/transactions/alerts.test.tsx b/test/integration/confirmations/transactions/alerts.test.tsx
index e2897976128b..1e07ddcdd68d 100644
--- a/test/integration/confirmations/transactions/alerts.test.tsx
+++ b/test/integration/confirmations/transactions/alerts.test.tsx
@@ -347,4 +347,52 @@ describe('Contract Interaction Confirmation', () => {
       'This transaction won’t go through until a previous transaction is complete. Learn how to cancel or speed up a transaction.',
     );
   });
+
+  it('displays the alert for gas fees too', async () => {
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
+
+    const transaction = mockedMetaMaskState.transactions[0];
+    transaction.defaultGasEstimates.estimateType = 'low';
+    transaction.userFeeLevel = 'low';
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: {
+          ...mockedMetaMaskState,
+          transactions: [transaction],
+        },
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('inline-alert'));
+    });
+
+    expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('alert-modal__selected-alert'),
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('alert-modal__selected-alert'),
+    ).toHaveTextContent(
+      'When choosing a low fee, expect slower transactions and longer wait times. For faster transactions, choose Market or Aggressive fee options.',
+    );
+
+    expect(
+      await screen.findByTestId('alert-modal-action-showGasFeeModal'),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId('alert-modal-action-showGasFeeModal'),
+    ).toHaveTextContent('Update gas options');
+  });
 });
diff --git a/ui/components/app/connected-sites-list/connected-snaps.js b/ui/components/app/connected-sites-list/connected-snaps.js
index 9d723cf1a43e..83de2cc2fc96 100644
--- a/ui/components/app/connected-sites-list/connected-snaps.js
+++ b/ui/components/app/connected-sites-list/connected-snaps.js
@@ -5,7 +5,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Box, IconName, IconSize, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MenuItem } from '../../ui/menu';
-import SnapAvatar from '../snaps/snap-avatar';
 import {
   AlignItems,
   BlockSize,
@@ -18,6 +17,7 @@ import ConnectedAccountsListOptions from '../connected-accounts-list/connected-a
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { disconnectOriginFromSnap } from '../../../store/actions';
 import { getSnapRoute } from '../../../helpers/utils/util';
+import { SnapIcon } from '../snaps/snap-icon';
 
 export default function ConnectedSnaps({ connectedSubjects }) {
   const [showOptions, setShowOptions] = useState();
@@ -74,11 +74,7 @@ export default function ConnectedSnaps({ connectedSubjects }) {
             display={Display.Flex}
             alignItems={AlignItems.center}
           >
-            <SnapAvatar
-              snapId={subject.origin}
-              badgeSize={IconSize.Xs}
-              avatarSize={IconSize.Md}
-            />
+            <SnapIcon snapId={subject.origin} avatarSize={IconSize.Md} />
             <Text
               variant={TextVariant.bodyLgMedium}
               className="connected-accounts-list__account-name"
diff --git a/ui/components/app/snaps/copyable/copyable.js b/ui/components/app/snaps/copyable/copyable.js
index d4f74def3ffe..398ea3057fe3 100644
--- a/ui/components/app/snaps/copyable/copyable.js
+++ b/ui/components/app/snaps/copyable/copyable.js
@@ -57,7 +57,7 @@ export const Copyable = ({
       backgroundColor={
         isVisible && sensitive
           ? BackgroundColor.errorMuted
-          : BackgroundColor.backgroundAlternative
+          : BackgroundColor.primaryMuted
       }
       borderRadius={BorderRadius.LG}
       padding={2}
diff --git a/ui/components/app/snaps/copyable/index.scss b/ui/components/app/snaps/copyable/index.scss
index 663b36482816..7cfed455aade 100644
--- a/ui/components/app/snaps/copyable/index.scss
+++ b/ui/components/app/snaps/copyable/index.scss
@@ -3,29 +3,42 @@
   transition: background-color background 0.2s;
 
   & .show-more__button {
-    background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative) 33%);
+    background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
   }
 
   &:hover {
-    background-color: var(--color-background-alternative-hover);
+    background-color: var(--color-primary-muted);
+    color: var(--color-primary-default) !important;
 
     & .show-more__button {
-      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-hover) 33%);
+      background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
+    }
+
+    p,
+    .copyable__icon {
+      color: var(--color-primary-default);
+    }
+
+    .copyable__tooltip {
+      .mm-icon {
+        color: var(--color-primary-default);
+      }
     }
   }
 
   &.clicked {
-    background-color: var(--color-background-alternative-pressed);
+    background-color: var(--color-primary-muted);
+    opacity: 0.75;
 
     & .show-more__button {
-      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
+      background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
     }
 
     &:hover {
-      background-color: var(--color-background-alternative-pressed);
+      background-color: var(--color-primary-muted);
 
       & .show-more__button {
-        background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
+        background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
       }
     }
   }
@@ -45,9 +58,21 @@
         & .show-more__button {
           background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-hover) 33%);
         }
+
+        p,
+        .copyable__icon {
+          color: var(--color-error-default);
+        }
+
+        .copyable__tooltip {
+          .mm-icon {
+            color: var(--color-error-default);
+          }
+        }
       }
 
       &.clicked {
+        opacity: 0.75;
         background-color: var(--color-error-muted-pressed);
 
         & .show-more__button {
diff --git a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
index 05984c564e4e..a2561d92e48d 100644
--- a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
+++ b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { useSelector } from 'react-redux';
 import {
   BackgroundColor,
   TextColor,
-  FlexDirection,
   TextVariant,
   AlignItems,
   Display,
@@ -25,9 +23,9 @@ import {
   ButtonIconSize,
   ButtonIcon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
 import { SnapMetadataModal } from '../snap-metadata-modal';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { SnapIcon } from '../snap-icon';
 
 const SnapAuthorshipHeader = ({
   snapId,
@@ -40,11 +38,6 @@ const SnapAuthorshipHeader = ({
 }) => {
   const t = useI18nContext();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // We're using optional chaining with snapId, because with the current implementation
-  // of snap update in the snap controller, we do not have reference to snapId when an
-  // update request is rejected because the reference comes from the request itself and not subject metadata
-  // like it is done with snap install
-  const packageName = snapId && stripSnapPrefix(snapId);
 
   const { name: snapName } = useSelector((state) =>
     getSnapMetadata(state, snapId),
@@ -57,13 +50,15 @@ const SnapAuthorshipHeader = ({
   return (
     <Box
       className={classnames('snaps-authorship-header', className)}
-      backgroundColor={BackgroundColor.backgroundAlternative}
+      backgroundColor={BackgroundColor.backgroundDefault}
       width={BlockSize.Full}
       alignItems={AlignItems.center}
       display={Display.Flex}
       padding={4}
       style={{
         boxShadow,
+        minHeight: '64px',
+        zIndex: 1,
       }}
     >
       {snapId && (
@@ -87,7 +82,8 @@ const SnapAuthorshipHeader = ({
         marginLeft={4}
         marginRight={4}
         display={Display.Flex}
-        flexDirection={FlexDirection.Column}
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
         style={{ overflow: 'hidden' }}
         width={BlockSize.Full}
       >
@@ -96,11 +92,7 @@ const SnapAuthorshipHeader = ({
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
         >
-          <SnapAvatar
-            snapId={snapId}
-            avatarSize={IconSize.Sm}
-            badgeSize={IconSize.Xs}
-          />
+          <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} />
           <Text
             color={TextColor.textDefault}
             variant={TextVariant.bodyMdMedium}
@@ -110,20 +102,6 @@ const SnapAuthorshipHeader = ({
             {snapName}
           </Text>
         </Box>
-        <Box
-          display={Display.Flex}
-          justifyContent={JustifyContent.center}
-          alignItems={AlignItems.center}
-          paddingTop={1}
-        >
-          <Text
-            ellipsis
-            variant={TextVariant.bodySm}
-            color={TextColor.textAlternative}
-          >
-            {packageName}
-          </Text>
-        </Box>
       </Box>
       {showInfo && (
         <Box marginLeft="auto">
diff --git a/ui/components/app/snaps/snap-avatar/index.js b/ui/components/app/snaps/snap-avatar/index.js
deleted file mode 100644
index 2c17e12d55b7..000000000000
--- a/ui/components/app/snaps/snap-avatar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './snap-avatar';
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.js b/ui/components/app/snaps/snap-avatar/snap-avatar.js
deleted file mode 100644
index 97b6fa90de5b..000000000000
--- a/ui/components/app/snaps/snap-avatar/snap-avatar.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import {
-  IconColor,
-  BackgroundColor,
-} from '../../../../helpers/constants/design-system';
-import {
-  BadgeWrapper,
-  BadgeWrapperPosition,
-  AvatarIcon,
-  IconName,
-  IconSize,
-} from '../../../component-library';
-
-import { SnapIcon } from '../snap-icon';
-
-const SnapAvatar = ({
-  snapId,
-  badgeSize = IconSize.Sm,
-  avatarSize = IconSize.Lg,
-  borderWidth = 2,
-  className,
-  badgeBackgroundColor = BackgroundColor.backgroundAlternative,
-}) => {
-  return (
-    <BadgeWrapper
-      className={classnames('snap-avatar', className)}
-      badge={
-        <AvatarIcon
-          iconName={IconName.Snaps}
-          size={badgeSize}
-          backgroundColor={IconColor.infoDefault}
-          borderColor={badgeBackgroundColor}
-          borderWidth={borderWidth}
-          iconProps={{
-            color: IconColor.infoInverse,
-          }}
-        />
-      }
-      position={BadgeWrapperPosition.bottomRight}
-    >
-      <SnapIcon snapId={snapId} avatarSize={avatarSize} />
-    </BadgeWrapper>
-  );
-};
-
-SnapAvatar.propTypes = {
-  /**
-   * The id of the snap
-   */
-  snapId: PropTypes.string,
-  badgeSize: PropTypes.string,
-  avatarSize: PropTypes.string,
-  borderWidth: PropTypes.number,
-  /**
-   * The color of the badge background
-   */
-  badgeBackgroundColor: PropTypes.string,
-  /**
-   * The className of the SnapAvatar
-   */
-  className: PropTypes.string,
-};
-
-export default SnapAvatar;
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js b/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js
deleted file mode 100644
index 4f1e88b99640..000000000000
--- a/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import SnapAvatar from '.';
-
-export default {
-  title: 'Components/App/Snaps/SnapAvatar',
-
-  component: SnapAvatar,
-  argTypes: {
-    snapId: {
-      control: 'text',
-    },
-  },
-};
-
-export const DefaultStory = (args) => <SnapAvatar {...args} />;
-
-DefaultStory.storyName = 'Default';
-
-DefaultStory.args = {
-  snapId: 'npm:@metamask/test-snap-bip44',
-};
diff --git a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
index ede8bc796a46..a587e422719c 100644
--- a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
+++ b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
@@ -17,8 +17,8 @@ import {
 } from '../../../component-library';
 import Tooltip from '../../../ui/tooltip/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import SnapAvatar from '../snap-avatar/snap-avatar';
 import { getSnapMetadata } from '../../../../selectors';
+import { SnapIcon } from '../snap-icon';
 
 export default function SnapConnectCell({ origin, snapId }) {
   const t = useI18nContext();
@@ -33,7 +33,7 @@ export default function SnapConnectCell({ origin, snapId }) {
       paddingTop={2}
       paddingBottom={2}
     >
-      <SnapAvatar snapId={snapId} />
+      <SnapIcon snapId={snapId} />
       <Box width="full" paddingLeft={4} paddingRight={4}>
         <Text>
           {t('connectSnap', [
diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
index 305dd28ae2ff..d0acd2060f9b 100644
--- a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
+++ b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
@@ -12,6 +12,7 @@ import {
 import { SnapDelineator } from '../snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
 import {
+  BackgroundColor,
   BlockSize,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
@@ -64,7 +65,14 @@ export const SnapHomeRenderer = ({ snapId }) => {
   }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, history]);
 
   return (
-    <Box height={BlockSize.Full}>
+    <Box
+      height={BlockSize.Full}
+      width={BlockSize.Full}
+      backgroundColor={BackgroundColor.backgroundAlternative}
+      style={{
+        overflowY: 'auto',
+      }}
+    >
       {error && (
         <Box height={BlockSize.Full} padding={4}>
           <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
@@ -82,6 +90,7 @@ export const SnapHomeRenderer = ({ snapId }) => {
           isLoading={loading}
           useDelineator={false}
           useFooter
+          contentBackgroundColor={BackgroundColor.backgroundAlternative}
         />
       )}
     </Box>
diff --git a/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js b/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
index 346bcd3dcf2b..3b514e2c19ea 100644
--- a/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
+++ b/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
@@ -18,7 +18,7 @@ import {
 
 import { Box, Text } from '../../../component-library';
 import { getSnapMetadata } from '../../../../selectors';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapLegacyAuthorshipHeader = ({
   snapId,
@@ -45,7 +45,7 @@ const SnapLegacyAuthorshipHeader = ({
       marginRight={marginRight}
     >
       <Box>
-        <SnapAvatar snapId={snapId} />
+        <SnapIcon snapId={snapId} />
       </Box>
       <Box
         marginLeft={4}
diff --git a/ui/components/app/snaps/snap-list-item/snap-list-item.js b/ui/components/app/snaps/snap-list-item/snap-list-item.js
index e8fa6af5db1e..437a6e485d78 100644
--- a/ui/components/app/snaps/snap-list-item/snap-list-item.js
+++ b/ui/components/app/snaps/snap-list-item/snap-list-item.js
@@ -17,7 +17,7 @@ import {
   IconSize,
   Icon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapListItem = ({
   name,
@@ -45,7 +45,7 @@ const SnapListItem = ({
         width={BlockSize.Full}
       >
         <Box>
-          <SnapAvatar snapId={snapId} />
+          <SnapIcon snapId={snapId} />
         </Box>
         <Box
           paddingLeft={4}
diff --git a/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js b/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
index 61d398916326..93a57309e89a 100644
--- a/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
+++ b/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
@@ -32,7 +32,6 @@ import {
   TextAlign,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import SnapAvatar from '../snap-avatar';
 import { formatDate } from '../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
@@ -41,6 +40,7 @@ import SnapExternalPill from '../snap-version/snap-external-pill';
 import { useSafeWebsite } from '../../../../hooks/snaps/useSafeWebsite';
 import Tooltip from '../../../ui/tooltip';
 import { isSnapId } from '../../../../helpers/utils/snaps';
+import { SnapIcon } from '../snap-icon';
 
 export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
   const t = useI18nContext();
@@ -101,7 +101,7 @@ export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
           }}
         >
           <Box>
-            <SnapAvatar snapId={snapId} />
+            <SnapIcon snapId={snapId} />
           </Box>
           <Text variant={TextVariant.bodyMdMedium} textAlign={TextAlign.Center}>
             {snapName}
diff --git a/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx b/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
index a5f769bbef80..0d85f8ef60dc 100644
--- a/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
+++ b/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import {
+  BorderColor,
   Display,
   FlexDirection,
 } from '../../../../helpers/constants/design-system';
@@ -68,6 +69,9 @@ export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
           onChange={handleChange}
           isChecked={value}
           label={label}
+          inputProps={{
+            borderColor: BorderColor.borderMuted,
+          }}
           {...props}
         />
       )}
diff --git a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
index 46a5d6e35ef6..c9000c13839b 100644
--- a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
+++ b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
@@ -55,6 +55,9 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
         data-testid="snaps-dropdown"
         selectedOption={value}
         onChange={handleChange}
+        style={{
+          border: '1px solid var(--color-border-muted)',
+        }}
         {...props}
       />
       {error && (
diff --git a/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx b/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
index 9508dae3e0d3..1d254ccaa2e3 100644
--- a/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
+++ b/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
@@ -187,8 +187,8 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
         style={{
           cursor: 'pointer',
           backgroundColor: active
-            ? 'var(--color-background-alternative-hover)'
-            : undefined,
+            ? 'var(--color-background-default-hover)'
+            : 'var(--color-background-default)',
         }}
         onClick={handleClick}
         onDragOver={handleDragOver}
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
index 152a01eb652d..07557c6d7a01 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/container.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -80,6 +80,10 @@ export const container: UIComponentFactory<BoxElement> = ({
       flexDirection: FlexDirection.Column,
       height: BlockSize.Full,
       className: 'snap-ui-renderer__container',
+      style: {
+        overflowY: 'auto',
+        paddingBottom: useFooter ? '74px' : 'initial',
+      },
     },
   };
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
index 3d400c4fa918..4fc3b2108f2b 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -21,7 +21,10 @@ export const DEFAULT_FOOTER = {
     className: 'snap-ui-renderer__footer',
     backgroundColor: BackgroundColor.backgroundDefault,
     style: {
-      boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+      boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+      height: '74px',
+      position: 'fixed',
+      bottom: 0,
     },
   },
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
index 9df749ce1019..63109f4f7ba9 100644
--- a/ui/components/app/snaps/snap-ui-renderer/index.scss
+++ b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -22,6 +22,10 @@
     height: 1px;
   }
 
+  &__input > .mm-text-field {
+    border-color: var(--color-border-muted);
+  }
+
   &__panel {
     gap: 8px;
   }
diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
index 5bde7fba7aa8..332fab99308d 100644
--- a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
+++ b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -39,6 +39,7 @@ const SnapUIRendererComponent = ({
   useDelineator = true,
   useFooter = false,
   onCancel,
+  contentBackgroundColor,
 }) => {
   const t = useI18nContext();
 
@@ -126,7 +127,11 @@ const SnapUIRendererComponent = ({
       initialState={initialState}
       context={context}
     >
-      <Box className="snap-ui-renderer__content" height={BlockSize.Full}>
+      <Box
+        className="snap-ui-renderer__content"
+        height={BlockSize.Full}
+        backgroundColor={contentBackgroundColor}
+      >
         <MetaMaskTemplateRenderer sections={sections} />
       </Box>
     </SnapInterfaceContextProvider>
@@ -155,4 +160,5 @@ SnapUIRendererComponent.propTypes = {
   useDelineator: PropTypes.bool,
   useFooter: PropTypes.bool,
   onCancel: PropTypes.func,
+  contentBackgroundColor: PropTypes.string,
 };
diff --git a/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx b/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
index fbe021861b91..ea290e8478d4 100644
--- a/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
+++ b/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
@@ -18,7 +18,7 @@ import type { NotificationListItemTextProps } from '../notification-list-item-te
 import { NotificationListItemText } from '../notification-list-item-text';
 import { formatMenuItemDate } from '../../../helpers/utils/notification.util';
 import { SnapUIMarkdown } from '../../app/snaps/snap-ui-markdown';
-import SnapAvatar from '../../app/snaps/snap-avatar';
+import { SnapIcon } from '../../app/snaps/snap-icon';
 
 export type NotificationListItemSnapProps = {
   id: string;
@@ -107,11 +107,7 @@ export const NotificationListItemSnap = ({
         )}
 
         <Box height={BlockSize.Full} className="notification-list-item__icon">
-          <SnapAvatar
-            snapId={snapId}
-            badgeBackgroundColor={BackgroundColor.backgroundDefault}
-            avatarSize={IconSize.Md}
-          />
+          <SnapIcon snapId={snapId} avatarSize={IconSize.Md} />
         </Box>
 
         <Box
diff --git a/ui/components/multichain/pages/permissions-page/connection-list-item.js b/ui/components/multichain/pages/permissions-page/connection-list-item.js
index 8d06e7b2b59c..bf720da5b3bb 100644
--- a/ui/components/multichain/pages/permissions-page/connection-list-item.js
+++ b/ui/components/multichain/pages/permissions-page/connection-list-item.js
@@ -26,8 +26,8 @@ import {
   Text,
 } from '../../../component-library';
 import { getURLHost } from '../../../../helpers/utils/util';
-import SnapAvatar from '../../../app/snaps/snap-avatar/snap-avatar';
 import { getAvatarNetworkColor } from '../../../../helpers/utils/accounts';
+import { SnapIcon } from '../../../app/snaps/snap-icon';
 import { ConnectionListTooltip } from './connection-list-tooltip/connection-list-tooltip';
 
 export const ConnectionListItem = ({ connection, onClick }) => {
@@ -54,12 +54,10 @@ export const ConnectionListItem = ({ connection, onClick }) => {
         style={{ alignSelf: 'center' }}
       >
         {isSnap ? (
-          <SnapAvatar
+          <SnapIcon
             className="connection-list-item__snap-avatar"
             snapId={connection.id}
-            badgeSize={IconSize.Xs}
             avatarSize={IconSize.Md}
-            borderWidth={0}
           />
         ) : (
           <BadgeWrapper
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
index 609ee9224182..12e984bc207a 100644
--- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`SnapsSection renders section for typed sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
+            style="overflow-y: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
@@ -100,6 +101,7 @@ exports[`SnapsSection renders section personal sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
+            style="overflow-y: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
diff --git a/ui/pages/confirmations/confirmation/confirmation.js b/ui/pages/confirmations/confirmation/confirmation.js
index 627b20ad720a..e5fc49588dad 100644
--- a/ui/pages/confirmations/confirmation/confirmation.js
+++ b/ui/pages/confirmations/confirmation/confirmation.js
@@ -42,7 +42,11 @@ import { SnapUIRenderer } from '../../../components/app/snaps/snap-ui-renderer';
 import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../shared/constants/app';
 ///: END:ONLY_INCLUDE_IF
 import { DAY } from '../../../../shared/constants/time';
-import { BlockSize, Display } from '../../../helpers/constants/design-system';
+import {
+  BlockSize,
+  Display,
+  BackgroundColor,
+} from '../../../helpers/constants/design-system';
 import ConfirmationFooter from './components/confirmation-footer';
 import {
   getTemplateValues,
@@ -466,12 +470,15 @@ export default function ConfirmationPage({
       ? handleSubmit
       : null);
 
+  const NAVIGATION_CONTROLS_HEIGHT = 32;
+  const SNAP_DIALOG_HEADER_HEIGHT = 64;
+
   let contentMargin = 0;
   if (pendingConfirmations.length > 1) {
-    contentMargin += 32;
+    contentMargin += NAVIGATION_CONTROLS_HEIGHT;
   }
   if (isSnapCustomUIDialog) {
-    contentMargin += 80;
+    contentMargin += SNAP_DIALOG_HEADER_HEIGHT;
   }
 
   return (
@@ -552,6 +559,7 @@ export default function ConfirmationPage({
             useDelineator={false}
             onCancel={handleSnapDialogCancel}
             useFooter={isSnapDefaultDialog}
+            contentBackgroundColor={BackgroundColor.backgroundAlternative}
           />
         ) : (
           <MetaMaskTemplateRenderer sections={templatedValues.content} />
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
index f87429326b6e..d85bbe7bb4ed 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
@@ -13,8 +13,8 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
         class="mm-box create-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <button
             aria-label="Close"
@@ -26,33 +26,17 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
             />
           </button>
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  T
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                T
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -60,15 +44,6 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
                 Test Snap
               </p>
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              >
-                @metamask/snap-test
-              </p>
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
index c3ae01786635..7b1a8e3d2a0e 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
@@ -13,8 +13,8 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
         class="mm-box remove-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <button
             aria-label="Close"
@@ -26,33 +26,17 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
             />
           </button>
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  T
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                T
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -60,15 +44,6 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
                 Test Snap
               </p>
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              >
-                @metamask/snap-test
-              </p>
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
index afdb66d573ca..11ac26234265 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
@@ -13,49 +13,26 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
         class="mm-box create-snap-account-page mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  ?
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                ?
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
               />
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              />
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
index d18c4f25d08e..aef63dee4b02 100644
--- a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
+++ b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
@@ -21,9 +21,9 @@ import { getDedupedSnaps } from '../../../../helpers/utils/util';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
 import SnapPrivacyWarning from '../../../../components/app/snaps/snap-privacy-warning/snap-privacy-warning';
 import { getPermissions, getSnapMetadata } from '../../../../selectors';
-import SnapAvatar from '../../../../components/app/snaps/snap-avatar/snap-avatar';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 import { isSnapId } from '../../../../helpers/utils/snaps';
+import { SnapIcon } from '../../../../components/app/snaps/snap-icon';
 
 export default function SnapsConnect({
   request,
@@ -158,12 +158,7 @@ export default function SnapsConnect({
           backgroundColor={BackgroundColor.backgroundAlternative}
         >
           <Box paddingBottom={2}>
-            <SnapAvatar
-              snapId={snaps[0]}
-              badgeSize={IconSize.Md}
-              avatarSize={IconSize.Xl}
-              borderWidth={3}
-            />
+            <SnapIcon snapId={snaps[0]} avatarSize={IconSize.Xl} />
           </Box>
           <Text paddingBottom={2} variant={TextVariant.headingMd}>
             {t('connectionRequest')}
diff --git a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
index 440f05d43033..a971dd30faba 100644
--- a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
+++ b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
@@ -6,37 +6,21 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
     class="mm-box create-snap-account-page mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
   >
     <div
-      class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-      style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+      class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+      style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
     >
       <div
-        class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+        class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
         style="overflow: hidden;"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+            style="border-width: 0px;"
           >
-            <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-              style="border-width: 0px;"
-            >
-              m
-            </div>
-            <div
-              class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-            >
-              <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-              >
-                <span
-                  class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                  style="mask-image: url('./images/icons/snaps.svg');"
-                />
-              </div>
-            </div>
+            m
           </div>
           <p
             class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -44,15 +28,6 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
             @metamask/snap-simple-keyring
           </p>
         </div>
-        <div
-          class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-        >
-          <p
-            class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-          >
-            @metamask/snap-simple-keyring
-          </p>
-        </div>
       </div>
       <div
         class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/snaps/snap-view/snap-home.js b/ui/pages/snaps/snap-view/snap-home.js
index dd464f878733..08b327b036d2 100644
--- a/ui/pages/snaps/snap-view/snap-home.js
+++ b/ui/pages/snaps/snap-view/snap-home.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 
 import { SnapHomeRenderer } from '../../../components/app/snaps/snap-home-page/snap-home-renderer';
 import { Box } from '../../../components/component-library';
-import { BlockSize } from '../../../helpers/constants/design-system';
+import { BlockSize, Display } from '../../../helpers/constants/design-system';
 
 function SnapHome({ snapId }) {
   return (
-    <Box height={BlockSize.Full}>
+    <Box display={Display.Flex} height={BlockSize.Full}>
       <SnapHomeRenderer snapId={snapId} />
     </Box>
   );
diff --git a/ui/pages/snaps/snap-view/snap-view.js b/ui/pages/snaps/snap-view/snap-view.js
index a913a1387527..5ef406fe9123 100644
--- a/ui/pages/snaps/snap-view/snap-view.js
+++ b/ui/pages/snaps/snap-view/snap-view.js
@@ -92,7 +92,12 @@ function SnapView() {
   };
 
   return (
-    <div className="snap-view">
+    <div
+      className="snap-view"
+      style={{
+        boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+      }}
+    >
       <Page backgroundColor={BackgroundColor.backgroundDefault}>
         <SnapAuthorshipHeader
           snapId={snapId}