diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2009a22b..481e4ddf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import '@/styles/globals.css';
 
 import type { Metadata } from 'next';
 
+import { Suspense } from 'react';
+
 import { LayoutWrapper } from '@/components/layout';
 import { initMocks } from '@/mock';
 
@@ -28,11 +30,13 @@ export default async function RootLayout({
   return (
     <html lang='ko'>
       <body className={`${pretendard.className} ${pretendard.variable} antialiased`}>
-        <Providers hasRefreshToken={hasRefreshToken}>
-          <div id='root'>
-            <LayoutWrapper>{children}</LayoutWrapper>
-          </div>
-        </Providers>
+        <Suspense fallback={null}>
+          <Providers hasRefreshToken={hasRefreshToken}>
+            <div id='root'>
+              <LayoutWrapper>{children}</LayoutWrapper>
+            </div>
+          </Providers>
+        </Suspense>
       </body>
     </html>
   );
diff --git a/src/providers/provider-msw/index.tsx b/src/providers/provider-msw/index.tsx
index b0072e3a..eef9e840 100644
--- a/src/providers/provider-msw/index.tsx
+++ b/src/providers/provider-msw/index.tsx
@@ -2,7 +2,7 @@
 
 'use client';
 
-import { Suspense, use } from 'react';
+import { use } from 'react';
 
 import { initMocks } from '@/mock';
 
@@ -32,8 +32,8 @@ export const MSWProvider = ({
   children: React.ReactNode;
 }>) => {
   return (
-    <Suspense fallback={null}>
-      <MSWProviderWrapper>{children}</MSWProviderWrapper>
-    </Suspense>
+    // <Suspense fallback={null}>
+    <MSWProviderWrapper>{children}</MSWProviderWrapper>
+    // </Suspense>
   );
 };
