MetaMask · lionellbriones · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
diff --git a/app/_locales/ga/messages.json b/app/_locales/ga/messages.json
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
diff --git a/app/images/shield-entry-modal-banner.png b/app/images/shield-entry-modal-banner.png
diff --git a/app/images/shield-entry-modal.png b/app/images/shield-entry-modal.png
diff --git a/ui/components/app/shield-entry-modal/index.scss b/ui/components/app/shield-entry-modal/index.scss
@@ -1,8 +1,34 @@
+@use "design-system";
+
 .shield-entry-modal {
-  &__header {
-    background: url('/images/shield-entry-modal-banner.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+  .shield-entry-modal__title {
+    line-height: 1em;
+    font-size: 2.25rem;
+  }
+
+  .shield-entry-modal__content {
+    .shield-entry-modal__dialog {
+      background-color: var(--color-accent03-dark);
+      max-width: 400px;
+    }
+  }
+
+  @include design-system.screen-sm-max {
+    .shield-entry-modal__content {
+      padding: 0;
+      height: 100%;
+      width: 100%;
+
+      .shield-entry-modal__dialog {
+        height: 100%;
+        width: 100%;
+        max-width: unset;
+        border-radius: 0;
+      }
+
+      .shield-entry-modal__footer {
+        margin-top: auto;
+      }
+    }
   }
 }
diff --git a/ui/components/app/shield-entry-modal/shield-entry-modal.test.tsx b/ui/components/app/shield-entry-modal/shield-entry-modal.test.tsx
@@ -53,11 +53,11 @@ describe('Shield Entry Modal', () => {
     expect(shieldEntryModal).toBeInTheDocument();
   });
 
-  it('should call onClose when the skip button is clicked', () => {
+  it('should call onClose when the close button is clicked', () => {
     const { getByTestId } = renderWithProvider(<ShieldEntryModal />, mockStore);
 
-    const skipButton = getByTestId('shield-entry-modal-skip-button');
-    fireEvent.click(skipButton);
+    const closeButton = getByTestId('shield-entry-modal-close-button');
+    fireEvent.click(closeButton);
     expect(setShowShieldEntryModalOnceSpy).toHaveBeenCalledWith(false);
   });
 
@@ -91,7 +91,7 @@ describe('Shield Entry Modal', () => {
       customStore,
     );
 
-    const skipButton = getByTestId('shield-entry-modal-skip-button');
+    const skipButton = getByTestId('shield-entry-modal-close-button');
     fireEvent.click(skipButton);
     await waitFor(() => {
       expect(submitSubscriptionUserEventsSpy).toHaveBeenCalledWith({