diff --git a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx
index ceda24a063e..eaa34da34a6 100644
--- a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx
+++ b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx
@@ -1069,6 +1069,13 @@ const PerpsHomeView = ({
             setTitleSectionHeight(event.nativeEvent.layout.height)
           }
         >
+          {isServiceInterruptionBannerEnabled && (
+            <Box twClassName="px-4 mb-4">
+              <PerpsServiceInterruptionBanner
+                testID={PerpsHomeViewSelectorsIDs.SERVICE_INTERRUPTION_BANNER}
+              />
+            </Box>
+          )}
           <TitleHub
             testID={PerpsHomeViewSelectorsIDs.HOME_HEADING}
             title={hideHeader ? undefined : perpsScreenTitle}
@@ -1122,11 +1129,6 @@ const PerpsHomeView = ({
         </Box>
 
         <Box paddingBottom={3}>
-          {/* Service Interruption Banner */}
-          <PerpsServiceInterruptionBanner
-            testID={PerpsHomeViewSelectorsIDs.SERVICE_INTERRUPTION_BANNER}
-          />
-
           {/* Balance Actions Component */}
           <PerpsMarketBalanceActions
             showActionButtons={HOME_SCREEN_CONFIG.ShowHeaderActionButtons}
diff --git a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx
index 9759d8e5945..dc32650bb0e 100644
--- a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx
+++ b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx
@@ -63,7 +63,7 @@ describe('PerpsServiceInterruptionBanner', () => {
     expect(getByText('Contact support')).toBeOnTheScreen();
   });
 
-  it('navigates to support when support link pressed', () => {
+  it('navigates to support when contact support action button pressed', () => {
     useSelector.mockImplementation((selector: unknown) => {
       if (selector === selectPerpsServiceInterruptionBannerEnabledFlag) {
         return true;
@@ -71,11 +71,9 @@ describe('PerpsServiceInterruptionBanner', () => {
       return undefined;
     });
 
-    const { getByTestId } = render(<PerpsServiceInterruptionBanner />);
+    const { getByText } = render(<PerpsServiceInterruptionBanner />);
 
-    fireEvent.press(
-      getByTestId('perps-service-interruption-banner-support-link'),
-    );
+    fireEvent.press(getByText('Contact support'));
 
     expect(mockNavigate).toHaveBeenCalledTimes(1);
   });
diff --git a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx
index a9e19f954d3..2c3f01599c6 100644
--- a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx
+++ b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx
@@ -1,19 +1,9 @@
 import React, { useCallback } from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import {
-  Box,
-  Text,
-  Icon,
-  IconName,
-  IconSize,
-  TextVariant,
-  TextColor,
-  BoxFlexDirection,
-  BoxAlignItems,
-  BoxBackgroundColor,
-  IconColor,
+  BannerAlert,
+  BannerAlertSeverity,
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -21,32 +11,6 @@ import { selectPerpsServiceInterruptionBannerEnabledFlag } from '../../selectors
 import { SUPPORT_CONFIG } from '../../constants/perpsConfig';
 import type { PerpsServiceInterruptionBannerProps } from './PerpsServiceInterruptionBanner.types';
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 8,
-    marginBottom: 8,
-  },
-  banner: {
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    gap: 8,
-  },
-  titleRow: {
-    gap: 8,
-  },
-  iconContainer: {
-    width: 34,
-    height: 34,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  underline: {
-    textDecorationLine: 'underline',
-  },
-});
-
 const PerpsServiceInterruptionBanner: React.FC<
   PerpsServiceInterruptionBannerProps
 > = ({ testID = 'perps-service-interruption-banner' }) => {
@@ -70,51 +34,14 @@ const PerpsServiceInterruptionBanner: React.FC<
   }
 
   return (
-    <Box style={styles.container} testID={testID}>
-      <Box
-        style={styles.banner}
-        backgroundColor={BoxBackgroundColor.BackgroundMuted}
-      >
-        {/* Title row: icon + heading */}
-        <Box
-          flexDirection={BoxFlexDirection.Row}
-          alignItems={BoxAlignItems.Center}
-          style={styles.titleRow}
-        >
-          <Box
-            style={styles.iconContainer}
-            backgroundColor={BoxBackgroundColor.WarningMuted}
-          >
-            <Icon
-              name={IconName.FlashSlash}
-              size={IconSize.Md}
-              color={IconColor.WarningDefault}
-            />
-          </Box>
-          <Text
-            variant={TextVariant.HeadingSm}
-            color={TextColor.WarningDefault}
-          >
-            {strings('perps.service_interruption.title')}
-          </Text>
-        </Box>
-
-        {/* Description aligned to left */}
-        <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
-          {strings('perps.service_interruption.description')}{' '}
-          <Text
-            variant={TextVariant.BodySm}
-            color={TextColor.TextAlternative}
-            style={styles.underline}
-            onPress={handleSupportPress}
-            accessibilityRole="link"
-            testID={`${testID}-support-link`}
-          >
-            {strings('perps.service_interruption.contact_support')}
-          </Text>
-        </Text>
-      </Box>
-    </Box>
+    <BannerAlert
+      severity={BannerAlertSeverity.Warning}
+      title={strings('perps.service_interruption.title')}
+      description={strings('perps.service_interruption.description')}
+      actionButtonLabel={strings('perps.service_interruption.contact_support')}
+      actionButtonOnPress={handleSupportPress}
+      testID={testID}
+    />
   );
 };