diff --git a/.changeset/thirty-mugs-impress.md b/.changeset/thirty-mugs-impress.md
new file mode 100644
index 000000000..3e7398cdd
--- /dev/null
+++ b/.changeset/thirty-mugs-impress.md
@@ -0,0 +1,5 @@
+---
+"studio-next": patch
+---
+
+Fix ~4 seconds cold start and client side lazy loading
diff --git a/apps/studio-next/src/app/page.tsx b/apps/studio-next/src/app/page.tsx
index 05bde7e06..e61bc475b 100644
--- a/apps/studio-next/src/app/page.tsx
+++ b/apps/studio-next/src/app/page.tsx
@@ -1,7 +1,6 @@
-import dynamic from 'next/dynamic';
-const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})
 import { Metadata } from 'next';
 import ogImage from '@/img/meta-studio-og-image.jpeg';
+import StudioEditor from '@/components/StudioEditor';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://studio-next.netlify.app'),
@@ -25,6 +24,6 @@ export const metadata: Metadata = {
 }
 export default async function Home() {
   return (
-    <StudioWrapper />
+    <StudioEditor />
   )
 }
diff --git a/apps/studio-next/src/components/StudioEditor.tsx b/apps/studio-next/src/components/StudioEditor.tsx
new file mode 100644
index 000000000..cc2d9c815
--- /dev/null
+++ b/apps/studio-next/src/components/StudioEditor.tsx
@@ -0,0 +1,16 @@
+'use client'
+import dynamic from 'next/dynamic'
+const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})
+
+/*
+Calling StudioWrapper as Code Splitting in Server Components will also make them be included in server-side rendering,
+that's why we added another layer and told them as client components to make the code splitting work in client-side only
+
+Related Issue: https://github.com/asyncapi/studio/issues/1118
+Reference: https://github.com/vercel/next.js/issues/49454#issuecomment-1830053413
+*/
+export default async function StudioEditor() {
+  return (
+    <StudioWrapper />
+  )
+}