diff --git a/.changeset/pretty-bibles-sit.md b/.changeset/pretty-bibles-sit.md
new file mode 100644
index 00000000..0fec41c6
--- /dev/null
+++ b/.changeset/pretty-bibles-sit.md
@@ -0,0 +1,5 @@
+---
+"@youversion/platform-react-ui": minor
+---
+
+Center card content within full-width BibleCard and VerseOfTheDay layouts.
diff --git a/packages/core/src/styles/bible-reader.css b/packages/core/src/styles/bible-reader.css
index 870a662d..cc0c289b 100644
--- a/packages/core/src/styles/bible-reader.css
+++ b/packages/core/src/styles/bible-reader.css
@@ -5,8 +5,7 @@
   display: block;
 
   width: 100%;
-  /* This helps readability and is a standard max width for text */
-  max-width: 65ch;
+  max-width: var(--yv-reader-max-width, 65ch);
 
   --yv-reader-font-size: 20px;
   --yv-reader-line-height: 1.625;
diff --git a/packages/ui/src/components/bible-card.stories.tsx b/packages/ui/src/components/bible-card.stories.tsx
index cef2605e..5e5ea9b0 100644
--- a/packages/ui/src/components/bible-card.stories.tsx
+++ b/packages/ui/src/components/bible-card.stories.tsx
@@ -7,10 +7,10 @@ const meta = {
   title: 'Components/BibleCard',
   component: BibleCard,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
   render: (args) => (
-    <div className="yv:h-screen yv:w-screen yv:flex yv:justify-center yv:items-center">
+    <div className="yv:w-full">
       <BibleCard {...args} />
     </div>
   ),
@@ -44,6 +44,50 @@ export const Default: Story = {
     versionId: 111,
   },
 };
+
+export const WideContainer: Story = {
+  args: {
+    reference: 'LUK.1.39-45',
+    versionId: 111,
+  },
+  tags: ['integration'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => (
+    <div className="yv:p-8" style={{ width: 900 }}>
+      <BibleCard {...args} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      await expect(canvas.getByText(/at that time mary got ready/i)).toBeInTheDocument();
+    });
+
+    const card = canvasElement.querySelector('section[data-yv-sdk][data-yv-theme]');
+    const contentGroup = canvasElement.querySelector('section[data-yv-sdk][data-yv-theme] > div');
+    const bibleText = canvasElement.querySelector('[data-slot="yv-bible-renderer"]');
+
+    await expect(card).not.toBeNull();
+    await expect(contentGroup).not.toBeNull();
+    await expect(bibleText).not.toBeNull();
+
+    const cardWidth = card?.getBoundingClientRect().width ?? 0;
+    const contentGroupRect = contentGroup?.getBoundingClientRect();
+    const cardRect = card?.getBoundingClientRect();
+    const leftWhitespace = (contentGroupRect?.left ?? 0) - (cardRect?.left ?? 0);
+    const rightWhitespace = (cardRect?.right ?? 0) - (contentGroupRect?.right ?? 0);
+    const bibleTextWidth = bibleText?.getBoundingClientRect().width ?? 0;
+
+    await expect(cardWidth).toBeGreaterThan(800);
+    await expect(contentGroupRect?.width ?? 0).toBeLessThanOrEqual(600);
+    await expect(bibleTextWidth).toBeLessThanOrEqual(600);
+    await expect(Math.abs(leftWhitespace - rightWhitespace)).toBeLessThanOrEqual(1);
+  },
+};
+
 export const DarkMode: Story = {
   args: {
     reference: 'LUK.1.39-45',
diff --git a/packages/ui/src/components/bible-card.test.tsx b/packages/ui/src/components/bible-card.test.tsx
index abc86d42..247cbd32 100644
--- a/packages/ui/src/components/bible-card.test.tsx
+++ b/packages/ui/src/components/bible-card.test.tsx
@@ -118,4 +118,24 @@ describe('BibleCard - Delayed spinner', () => {
       0,
     );
   });
+
+  it('should let the card fill its container while centering the content group', () => {
+    vi.mocked(usePassage).mockReturnValue({
+      passage: mockPassage,
+      loading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    const { container } = render(<BibleCard reference="JHN.3.16" versionId={3034} />);
+    const card = container.querySelector('section');
+    const contentGroup = container.querySelector('section > div');
+    const bibleTextView = container.querySelector('[data-slot="yv-bible-renderer"]')?.parentElement;
+
+    expect(card).toHaveClass('yv:w-full');
+    expect(card).not.toHaveClass('yv:max-w-md');
+    expect(card).toHaveClass('yv:box-border');
+    expect(contentGroup).toHaveClass('yv:card-content');
+    expect(bibleTextView).not.toHaveClass('yv:max-w-[600px]');
+  });
 });
diff --git a/packages/ui/src/components/bible-card.tsx b/packages/ui/src/components/bible-card.tsx
index 9d5dde6c..58768e40 100644
--- a/packages/ui/src/components/bible-card.tsx
+++ b/packages/ui/src/components/bible-card.tsx
@@ -160,48 +160,50 @@ export function BibleCard({
     <section
       data-yv-sdk
       data-yv-theme={theme}
-      className="yv:w-full yv:flex yv:flex-col yv:grow yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl"
+      className="yv:w-full yv:flex yv:flex-col yv:grow yv:bg-card yv:p-6 yv:rounded-2xl yv:box-border"
     >
-      <div className="yv:flex yv:w-full yv:justify-between yv:items-center yv:mb-4">
-        {passage && !passageError ? (
-          <div className="yv:grow yv:flex yv:items-center yv:gap-1.5">
-            <BibleCardHeaderReference passage={passage} version={version} />
-            {showSpinner ? (
-              <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
-            ) : null}
-          </div>
-        ) : passageError ? (
-          <BibleCardHeaderError />
-        ) : (
-          <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
-        )}
-
-        {showVersionPicker && !passageError ? (
-          <BibleCardVersionPicker
-            versionId={versionNum}
-            onVersionChange={setVersionNum}
+      <div className="yv:card-content">
+        <div className="yv:flex yv:w-full yv:justify-between yv:items-center yv:mb-4">
+          {passage && !passageError ? (
+            <div className="yv:grow yv:flex yv:items-center yv:gap-1.5">
+              <BibleCardHeaderReference passage={passage} version={version} />
+              {showSpinner ? (
+                <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
+              ) : null}
+            </div>
+          ) : passageError ? (
+            <BibleCardHeaderError />
+          ) : (
+            <LoaderIcon className="yv:size-3 yv:animate-spin yv:text-muted-foreground" />
+          )}
+
+          {showVersionPicker && !passageError ? (
+            <BibleCardVersionPicker
+              versionId={versionNum}
+              onVersionChange={setVersionNum}
+              theme={theme}
+              onVersionPickerPress={onVersionPickerPress}
+            />
+          ) : null}
+        </div>
+
+        <AnimatedHeight>
+          <BibleTextView
             theme={theme}
-            onVersionPickerPress={onVersionPickerPress}
+            fontSize={16}
+            fontFamily={SOURCE_SERIF_FONT}
+            reference={reference}
+            versionId={versionNum}
+            passageState={{
+              passage,
+              loading: passageLoading,
+              error: passageError,
+            }}
           />
-        ) : null}
-      </div>
+        </AnimatedHeight>
 
-      <AnimatedHeight>
-        <BibleTextView
-          theme={theme}
-          fontSize={16}
-          fontFamily={SOURCE_SERIF_FONT}
-          reference={reference}
-          versionId={versionNum}
-          passageState={{
-            passage,
-            loading: passageLoading,
-            error: passageError,
-          }}
-        />
-      </AnimatedHeight>
-
-      <BibleCardFooter copyright={!passageError ? version?.copyright : null} />
+        <BibleCardFooter copyright={!passageError ? version?.copyright : null} />
+      </div>
     </section>
   );
 }
diff --git a/packages/ui/src/components/verse-of-the-day.stories.tsx b/packages/ui/src/components/verse-of-the-day.stories.tsx
index a7ed075e..2ee55a71 100644
--- a/packages/ui/src/components/verse-of-the-day.stories.tsx
+++ b/packages/ui/src/components/verse-of-the-day.stories.tsx
@@ -7,8 +7,13 @@ const meta = {
   title: 'Components/VerseOfTheDay',
   component: VerseOfTheDay,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
+  render: (args) => (
+    <div className="yv:w-full">
+      <VerseOfTheDay {...args} />
+    </div>
+  ),
   tags: ['autodocs'],
   argTypes: {
     background: {
@@ -85,6 +90,50 @@ export const Default: Story = {
   },
 };
 
+export const WideContainer: Story = {
+  args: {
+    versionId: 111,
+    showSunIcon: true,
+    showBibleAppAttribution: true,
+    showShareButton: true,
+    size: 'default',
+  },
+  tags: ['integration'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => (
+    <div className="yv:p-8" style={{ width: 900 }}>
+      <VerseOfTheDay {...args} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(
+      await canvas.findByText(/for I am about to do something new/i),
+    ).toBeInTheDocument();
+
+    const card = canvasElement.querySelector('section[data-yv-sdk][data-yv-theme]');
+    const contentGroup = canvasElement.querySelector('section[data-yv-sdk][data-yv-theme] > div');
+    const bibleText = canvasElement.querySelector('[data-slot="yv-bible-renderer"]');
+
+    await expect(card).not.toBeNull();
+    await expect(contentGroup).not.toBeNull();
+    await expect(bibleText).not.toBeNull();
+
+    const cardRect = card?.getBoundingClientRect();
+    const contentGroupRect = contentGroup?.getBoundingClientRect();
+    const leftWhitespace = (contentGroupRect?.left ?? 0) - (cardRect?.left ?? 0);
+    const rightWhitespace = (cardRect?.right ?? 0) - (contentGroupRect?.right ?? 0);
+
+    await expect(cardRect?.width ?? 0).toBeGreaterThan(800);
+    await expect(contentGroupRect?.width ?? 0).toBeLessThanOrEqual(600);
+    await expect(bibleText?.getBoundingClientRect().width ?? 0).toBeLessThanOrEqual(600);
+    await expect(Math.abs(leftWhitespace - rightWhitespace)).toBeLessThanOrEqual(1);
+  },
+};
+
 export const Large: Story = {
   args: {
     size: 'lg',
diff --git a/packages/ui/src/components/verse-of-the-day.test.tsx b/packages/ui/src/components/verse-of-the-day.test.tsx
index 8471cbc8..9af55b83 100644
--- a/packages/ui/src/components/verse-of-the-day.test.tsx
+++ b/packages/ui/src/components/verse-of-the-day.test.tsx
@@ -70,4 +70,15 @@ describe('VerseOfTheDay i18n integration', () => {
     render(<VerseOfTheDay />);
     expect(screen.getByText(en.verseOfTheDay)).toBeInTheDocument();
   });
+
+  it('lets the card fill its container while centering the content group', () => {
+    const { container } = render(<VerseOfTheDay />);
+    const card = container.querySelector('section');
+    const contentGroup = container.querySelector('section > div');
+
+    expect(card).toHaveClass('yv:w-full');
+    expect(card).not.toHaveClass('yv:max-w-md');
+    expect(card).toHaveClass('yv:box-border');
+    expect(contentGroup).toHaveClass('yv:card-content');
+  });
 });
diff --git a/packages/ui/src/components/verse-of-the-day.tsx b/packages/ui/src/components/verse-of-the-day.tsx
index cdbf8e8e..0744531f 100644
--- a/packages/ui/src/components/verse-of-the-day.tsx
+++ b/packages/ui/src/components/verse-of-the-day.tsx
@@ -132,92 +132,94 @@ export function VerseOfTheDay({
       data-yv-theme={theme}
       data-size={size}
       className={
-        'yv:data-[size=lg]:p-8 yv:data-[size=default]:p-4 yv:*:shrink-0 yv:font-sans yv:flex yv:flex-col yv:gap-3 yv:w-full yv:grow yv:max-w-md yv:p-4 yv:rounded-2xl yv:bg-card'
+        'yv:data-[size=lg]:p-8 yv:data-[size=default]:p-4 yv:*:shrink-0 yv:font-sans yv:flex yv:flex-col yv:w-full yv:grow yv:p-4 yv:rounded-2xl yv:bg-card yv:box-border'
       }
     >
-      <div className="yv:flex yv:items-center yv:gap-2 yv:text-black yv:dark:text-white">
-        {showSunIcon ? (
-          <div
-            data-slot="card-icon"
-            className="yv:col-start-1 yv:row-start-1 yv:self-start yv:justify-self-start"
-          >
-            <Votd className="yv:shrink-0 yv:h-10 yv:w-10" />
+      <div className="yv:card-content yv:flex yv:flex-col yv:gap-3">
+        <div className="yv:flex yv:items-center yv:gap-2 yv:text-black yv:dark:text-white">
+          {showSunIcon ? (
+            <div
+              data-slot="card-icon"
+              className="yv:col-start-1 yv:row-start-1 yv:self-start yv:justify-self-start"
+            >
+              <Votd className="yv:shrink-0 yv:h-10 yv:w-10" />
+            </div>
+          ) : null}
+          <div className="yv:grow yv:grid">
+            <p
+              className={
+                'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
+              }
+            >
+              {t('verseOfTheDay')}
+            </p>
           </div>
-        ) : null}
-        <div className="yv:grow yv:grid">
-          <p
-            className={
-              'trim-both yv:line-clamp-1 yv:text-muted-foreground yv:uppercase yv:text-xs yv:font-medium yv:select-none'
-            }
-          >
-            {t('verseOfTheDay')}
-          </p>
+          {showShareButton ? (
+            <div
+              data-slot="card-action"
+              className="yv:col-start-2 yv:row-span-2 yv:row-start-1 yv:self-start yv:justify-self-end"
+            >
+              <Button
+                aria-label="Share"
+                className={cn(size === 'lg' ? 'yv:translate-x-3' : 'yv:translate-x-2')}
+                onClick={() => void handleShareVerse()}
+                disabled={!!(errorPassage || errorVerseOfTheDay)}
+                size="icon"
+                variant="ghost"
+              >
+                <Share className="yv:h-6! yv:w-6!" />
+              </Button>
+            </div>
+          ) : null}
         </div>
-        {showShareButton ? (
-          <div
-            data-slot="card-action"
-            className="yv:col-start-2 yv:row-span-2 yv:row-start-1 yv:self-start yv:justify-self-end"
-          >
-            <Button
-              aria-label="Share"
-              className={cn(size === 'lg' ? 'yv:translate-x-3' : 'yv:translate-x-2')}
-              onClick={() => void handleShareVerse()}
-              disabled={!!(errorPassage || errorVerseOfTheDay)}
-              size="icon"
-              variant="ghost"
+
+        <AnimatedHeight>
+          {isLoading ? (
+            <div
+              className="yv:flex yv:justify-center yv:py-2"
+              role="status"
+              aria-label="Loading verse"
             >
-              <Share className="yv:h-6! yv:w-6!" />
-            </Button>
-          </div>
-        ) : null}
-      </div>
+              <LoaderIcon
+                className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
+                aria-hidden="true"
+              />
+            </div>
+          ) : (
+            <div className="yv:flex yv:flex-col yv:gap-2">
+              <BibleTextView
+                ref={verseRef}
+                theme={theme}
+                reference={data?.passage_id || ''}
+                versionId={versionId}
+                fontSize={size === 'default' ? 16 : 20}
+                fontFamily={size === 'default' ? 'var(--yv-font-sans)' : 'var(--yv-font-serif)'}
+                passageState={{
+                  passage,
+                  loading: isLoading,
+                  error: errorPassage || errorVerseOfTheDay || null,
+                }}
+              />
 
-      <AnimatedHeight>
-        {isLoading ? (
+              {errorPassage || errorVerseOfTheDay ? null : (
+                <p className="yv:text-muted-foreground yv:font-medium yv:text-sm yv:mt-3">
+                  {referenceText}
+                </p>
+              )}
+            </div>
+          )}
+        </AnimatedHeight>
+
+        {showBibleAppAttribution ? (
           <div
-            className="yv:flex yv:justify-center yv:py-2"
-            role="status"
-            aria-label="Loading verse"
+            className={
+              'yv:grid yv:grid-cols-1 yv:mt-4 yv:justify-between yv:items-center yv:gap-2 yv:w-full'
+            }
           >
-            <LoaderIcon
-              className="yv:size-4 yv:animate-spin yv:text-muted-foreground"
-              aria-hidden="true"
-            />
+            <BibleAppLogoLockup data-slot="attribution" className="yv:justify-self-end" />
           </div>
-        ) : (
-          <div className="yv:flex yv:flex-col yv:gap-2">
-            <BibleTextView
-              ref={verseRef}
-              theme={theme}
-              reference={data?.passage_id || ''}
-              versionId={versionId}
-              fontSize={size === 'default' ? 16 : 20}
-              fontFamily={size === 'default' ? 'var(--yv-font-sans)' : 'var(--yv-font-serif)'}
-              passageState={{
-                passage,
-                loading: isLoading,
-                error: errorPassage || errorVerseOfTheDay || null,
-              }}
-            />
-
-            {errorPassage || errorVerseOfTheDay ? null : (
-              <p className="yv:text-muted-foreground yv:font-medium yv:text-sm yv:mt-3">
-                {referenceText}
-              </p>
-            )}
-          </div>
-        )}
-      </AnimatedHeight>
-
-      {showBibleAppAttribution ? (
-        <div
-          className={
-            'yv:grid yv:grid-cols-1 yv:mt-4 yv:justify-between yv:items-center yv:gap-2 yv:w-full'
-          }
-        >
-          <BibleAppLogoLockup data-slot="attribution" className="yv:justify-self-end" />
-        </div>
-      ) : null}
+        ) : null}
+      </div>
     </section>
   );
 }
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index a3e99a06..f0be6934 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -117,3 +117,9 @@ layer(yv-sdk-fonts);
     z-index: 9999;
   }
 }
+
+@utility card-content {
+  width: 100%;
+  max-width: 600px;
+  margin-inline: auto;
+}