diff --git a/app/popup-init.html b/app/popup-init.html
index 2fb79fefcfde..2914fbd62af0 100644
--- a/app/popup-init.html
+++ b/app/popup-init.html
@@ -25,7 +25,7 @@
         * page may be a further UX improvement.
         */
       html {
-        width: 357px;
+        width: 400px;
         height: 600px;
         background: #f2f4f6;
       }
diff --git a/app/popup.html b/app/popup.html
index 760ec6683203..fff2c7923163 100644
--- a/app/popup.html
+++ b/app/popup.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html style="width:357px; height:600px;" dir="ltr">
+<html style="width:400px; height:600px;" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@@ -7,7 +7,7 @@
     <link rel="preload" href="/_locales/en/messages.json" as="fetch" crossorigin="anonymous" />
     <link rel="stylesheet" href="../ui/css/index.scss" />
   </head>
-  <body style="width:357px; height:600px;">
+  <body style="width:400px; height:600px;">
     <div id="app-content">
       <img class="loading-logo" src="./images/logo/metamask-fox.svg" alt="" loading="lazy" />
       <img class="loading-spinner" src="./images/spinner.gif" alt="" loading="lazy" />
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index 35f41832cbdd..309f709e41c4 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -86,7 +86,7 @@ const MODALS = {
     },
     laptopModalStyle: {
       width:
-        getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '357px' : '449px',
+        getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '400px' : '449px',
       top: 'calc(33% + 45px)',
       paddingLeft:
         getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? '16px' : null,
diff --git a/ui/components/ui/mascot/mascot.stories.js b/ui/components/ui/mascot/mascot.stories.js
index b73d5cb50585..d45291579298 100644
--- a/ui/components/ui/mascot/mascot.stories.js
+++ b/ui/components/ui/mascot/mascot.stories.js
@@ -8,7 +8,7 @@ const animationEventEmitter = new EventEmitter();
 
 const containerStyle = {
   height: '600px',
-  width: '357px',
+  width: '400px',
   border: '1px solid black',
   display: 'flex',
   flexFlow: 'column',
diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss
index 7d98b84f96a9..e8c8fcc80c06 100644
--- a/ui/pages/unlock-page/index.scss
+++ b/ui/pages/unlock-page/index.scss
@@ -6,7 +6,7 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  width: 357px;
+  width: 400px;
   padding: 30px;
   font-weight: 400;
 
