diff --git a/examples/nextjs/src/app/bible-chapter/page.tsx b/examples/nextjs/src/app/bible-chapter/page.tsx
index 2ba98418..deb65107 100644
--- a/examples/nextjs/src/app/bible-chapter/page.tsx
+++ b/examples/nextjs/src/app/bible-chapter/page.tsx
@@ -4,8 +4,8 @@ import { BibleTextView } from '@youversion/platform-react-ui';
 
 export default function BibleChapter(): React.ReactElement {
   return (
-    <>
+    <main className="p-6">
       <BibleTextView reference="JHN.1" versionId={3034} />
-    </>
+    </main>
   );
 }
diff --git a/examples/nextjs/src/app/bible-reader/page.tsx b/examples/nextjs/src/app/bible-reader/page.tsx
index 84996436..9cf17df0 100644
--- a/examples/nextjs/src/app/bible-reader/page.tsx
+++ b/examples/nextjs/src/app/bible-reader/page.tsx
@@ -4,7 +4,7 @@ import { BibleReader } from '@youversion/platform-react-ui';
 
 export default function BibleReaderPage(): React.ReactElement {
   return (
-    <div className="h-screen">
+    <div className="h-svh">
       <BibleReader.Root defaultBook="JHN" defaultChapter="3" defaultVersionId={3034}>
         <BibleReader.Content />
         <BibleReader.Toolbar />
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
index 758f5093..3ebc9882 100644
--- a/examples/nextjs/src/app/layout.tsx
+++ b/examples/nextjs/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
 
   return (
     <html lang="en">
-      <body className="w-full p-6">
+      <body className="w-full">
         <Providers redirectUri={redirectUri}>{children}</Providers>
       </body>
     </html>
diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
index d18e6030..0e727832 100644
--- a/examples/nextjs/src/app/page.tsx
+++ b/examples/nextjs/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home(): JSX.Element {
 
   if (auth.isLoading) {
     return (
-      <main className="w-full flex flex-col items-center justify-center min-h-screen gap-4">
+      <main className="p-6 w-full flex flex-col items-center justify-center min-h-screen gap-4">
         <div className="text-center">
           <h2 className="text-2xl font-bold mb-4">Loading...</h2>
         </div>
@@ -19,7 +19,7 @@ export default function Home(): JSX.Element {
   }
 
   return (
-    <main className="w-full flex flex-col items-start justify-start min-h-screen gap-4">
+    <main className="p-6 w-full flex flex-col items-start justify-start min-h-screen gap-4">
       <h1 className="text-4xl font-bold">YouVersion SDK Demo</h1>
       {auth.isAuthenticated ? <AuthenticatedView /> : <UnauthenticatedView />}
     </main>
