diff --git a/src/app/page.tsx b/src/app/page.tsx
index 15bf0109..41a5f1d5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,17 +1,15 @@
 import { groq } from "next-sanity";
-import dynamic from "next/dynamic";
-
-import RootLayout from "./RootLayout";
+import dynamic from 'next/dynamic';
+import RootLayout from "@/app/RootLayout";
 import { client } from "@/lib/sanity/client";
 
 const DynamicHero = dynamic(() => import("@/components/Index/Hero.component"), {
-  ssr: false,
+  loading: () => <div>Loading hero...</div>
 });
 
-const DynamicIndexContent = dynamic(
-  () => import("@/components/Index/IndexContent.component"),
-  { ssr: false },
-);
+const DynamicIndexContent = dynamic(() => import("@/components/Index/IndexContent.component"), {
+  loading: () => <div>Loading content...</div>
+});
 
 export default async function HomePage() {
   const pageContentQuery = groq`
@@ -29,7 +27,9 @@ export default async function HomePage() {
     <RootLayout>
       <main>
         <div className="mt-[4.5rem] md:mt-32 overflow-hidden">
-          {pageContent.hero && <DynamicHero content={pageContent.hero} />}
+          {pageContent.hero && (
+            <DynamicHero content={pageContent.hero} />
+          )}
         </div>
         {pageContent.content && (
           <DynamicIndexContent pageContent={pageContent.content} />