diff --git a/docs/fern/docs/pages/components/credential-sign-in.mdx b/docs/fern/docs/pages/components/credential-sign-in.mdx
index f23ff94d1..6ebe53703 100644
--- a/docs/fern/docs/pages/components/credential-sign-in.mdx
+++ b/docs/fern/docs/pages/components/credential-sign-in.mdx
@@ -6,7 +6,7 @@ slug: components/credential-sign-in
 A component that renders a sign-in form with email and password fields.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" height={233} />
+  <img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" className="stack-250h" />
 </div>
 
 Note that if credential sign-in is disabled in the dashboard, this component will still render. However, attempting to use it will result in an error being thrown.
diff --git a/docs/fern/docs/pages/components/credential-sign-up.mdx b/docs/fern/docs/pages/components/credential-sign-up.mdx
index a9faf6d25..5601d1041 100644
--- a/docs/fern/docs/pages/components/credential-sign-up.mdx
+++ b/docs/fern/docs/pages/components/credential-sign-up.mdx
@@ -6,7 +6,7 @@ slug: components/credential-sign-up
 A component that renders a sign-up form with email and password fields.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" height={233} />
+  <img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" className="stack-250h" />
 </div>
 
 Note that if credential sign-up is disabled in the dashboard, this component will still render. However, attempting to use it will result in an error being thrown.
diff --git a/docs/fern/docs/pages/components/oauth-button-group.mdx b/docs/fern/docs/pages/components/oauth-button-group.mdx
index aab9b32ec..cd996fcb3 100644
--- a/docs/fern/docs/pages/components/oauth-button-group.mdx
+++ b/docs/fern/docs/pages/components/oauth-button-group.mdx
@@ -6,7 +6,7 @@ slug: components/oauth-button-group
 Renders all the OAuth buttons enabled on the project dashboard.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" height={240} />
+  <img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-250h" />
 </div>
 
 <Callout>
diff --git a/docs/fern/docs/pages/components/oauth-button.mdx b/docs/fern/docs/pages/components/oauth-button.mdx
index 3f24f1cb8..ac8bc2ccf 100644
--- a/docs/fern/docs/pages/components/oauth-button.mdx
+++ b/docs/fern/docs/pages/components/oauth-button.mdx
@@ -6,7 +6,7 @@ slug: components/oauth-button
 Renders a customized OAuth button for various providers to initiate sign-in or sign-up processes.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/oauth-button.png" alt="OAuthButton" height={60} />
+  <img src="../imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
 </div>
 
 Note that if the specific OAuth provider is disabled in the dashboard, this component will still render. However, attempting to use it will result in an error being thrown.
diff --git a/docs/fern/docs/pages/components/overview.mdx b/docs/fern/docs/pages/components/overview.mdx
index 1db3f1cd0..36b39c97c 100644
--- a/docs/fern/docs/pages/components/overview.mdx
+++ b/docs/fern/docs/pages/components/overview.mdx
@@ -47,7 +47,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     >
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/sign-in.png" alt="SignIn" height={200} />
+          <img src="../imgs/sign-in.png" alt="SignIn" className="stack-200h" />
         </div>
         &lt;SignIn /&gt;
       </div>
@@ -57,7 +57,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     >
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/sign-up.png" alt="SignUp" height={200} />
+          <img src="../imgs/sign-up.png" alt="SignUp" className="stack-200h" />
         </div>
         &lt;SignUp /&gt;
       </div>
@@ -67,7 +67,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     >
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" height={170} />
+          <img src="../imgs/credential-sign-in.png" alt="CredentialSignIn" className="stack-150h" />
         </div>
         &lt;CredentialSignIn /&gt;
       </div>
@@ -77,7 +77,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     >
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" height={200} />
+          <img src="../imgs/credential-sign-up.png" alt="CredentialSignUp" className="stack-200h" />
         </div>
         &lt;CredentialSignUp /&gt;
       </div>
@@ -87,7 +87,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     >
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/oauth-button.png" alt="OAuthButton" height={50} />
+          <img src="../imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
         </div>
         &lt;OAuthButton /&gt;
       </div>
@@ -97,7 +97,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     >
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" height={200} />
+          <img src="../imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-200h" />
         </div>
         &lt;OAuthButtonGroup /&gt;
       </div>
@@ -113,7 +113,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     >
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/user-button.png" alt="UserButton" height={200} />
+          <img src="../imgs/user-button.png" alt="UserButton" className="stack-200h" />
         </div>
         &lt;UserButton /&gt;
       </div>
@@ -121,7 +121,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     <Card href="/components/account-settings">
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/account-settings.png" alt="AccountSettings" height={100} />
+          <img src="../imgs/account-settings.png" alt="AccountSettings" className="stack-100h" />
         </div>
         &lt;AccountSettings /&gt;
       </div>
@@ -135,7 +135,7 @@ To get started with Stack Auth in your Next.js application, follow the [setup gu
     <Card href="/components/selected-team-switcher">
       <div className="components-card-content">
         <div className="img-wrapper">
-          <img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" height={200} />
+          <img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" className="stack-200h" />
         </div>
         &lt;SelectedTeamSwitcher /&gt;
       </div>
diff --git a/docs/fern/docs/pages/components/selected-team-switcher.mdx b/docs/fern/docs/pages/components/selected-team-switcher.mdx
index a61319278..344554131 100644
--- a/docs/fern/docs/pages/components/selected-team-switcher.mdx
+++ b/docs/fern/docs/pages/components/selected-team-switcher.mdx
@@ -6,7 +6,7 @@ slug: components/selected-team-switcher
 A React component for switching between teams. It displays a dropdown of teams and allows the user to select a team.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" height={285} />
+  <img src="../imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" className="stack-250h" />
 </div>
 
 For a comprehensive guide on using this component, refer to our [Team Selection documentation](../concepts/team-selection.mdx).
diff --git a/docs/fern/docs/pages/components/sign-in.mdx b/docs/fern/docs/pages/components/sign-in.mdx
index ffd125905..77623dc4c 100644
--- a/docs/fern/docs/pages/components/sign-in.mdx
+++ b/docs/fern/docs/pages/components/sign-in.mdx
@@ -6,7 +6,7 @@ slug: components/sign-in
 Renders a sign-in component with customizable options.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/sign-in.png" alt="SignIn" height={376} />
+  <img src="../imgs/sign-in.png" alt="SignIn" className="stack-350h" />
 </div>
 
 For more information, please refer to the [custom pages guide](../customization/custom-pages.mdx).
diff --git a/docs/fern/docs/pages/components/sign-up.mdx b/docs/fern/docs/pages/components/sign-up.mdx
index 89b105af3..619ca4bfa 100644
--- a/docs/fern/docs/pages/components/sign-up.mdx
+++ b/docs/fern/docs/pages/components/sign-up.mdx
@@ -6,7 +6,7 @@ slug: components/sign-up
 A component that renders a sign-up page with various customization options.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/sign-up.png" alt="SignUp" height={376} />
+  <img src="../imgs/sign-up.png" alt="SignUp" className="stack-350h" />
 </div>
 
 For more information, please refer to the [custom pages guide](../customization/custom-pages.mdx).
diff --git a/docs/fern/docs/pages/components/user-button.mdx b/docs/fern/docs/pages/components/user-button.mdx
index 724999967..c0b2a25cf 100644
--- a/docs/fern/docs/pages/components/user-button.mdx
+++ b/docs/fern/docs/pages/components/user-button.mdx
@@ -6,7 +6,7 @@ slug: components/user-button
 Renders a user button component with optional user information, color mode toggle, and extra menu items.
 
 <div className="stack-white-image-showcase">
-  <img src="../imgs/user-button.png" alt="UserButton" />
+  <img src="../imgs/user-button.png" alt="UserButton" className="stack-250h" />
 </div>
 
 ## Props
diff --git a/docs/fern/docs/pages/getting-started/setup.mdx b/docs/fern/docs/pages/getting-started/setup.mdx
index e93f26844..34e8e496c 100644
--- a/docs/fern/docs/pages/getting-started/setup.mdx
+++ b/docs/fern/docs/pages/getting-started/setup.mdx
@@ -137,7 +137,7 @@ We recommend using our **setup wizard**, which will automatically detect your pr
 
 ## Post-setup
 
-That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup), you will see the Stack sign-up page.
+That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup), you will see the sign-up page.
 
 ![Stack sign in page](../imgs/sign-in.png)
 
diff --git a/docs/fern/docs/pages/overview.mdx b/docs/fern/docs/pages/overview.mdx
index 3778886d3..1ee1450b3 100644
--- a/docs/fern/docs/pages/overview.mdx
+++ b/docs/fern/docs/pages/overview.mdx
@@ -73,7 +73,9 @@ The user data will update in both the frontend and backend automatically. The up
 
 You also get pages and components for the authentication flow out-of-the-box. This is the sign-in page you get without writing a single line of code:
 
-![Stack sign in page](./imgs/sign-in.png)
+<div className="stack-white-image-showcase">
+  <img src="./imgs/sign-in.png" alt="SignIn" className="stack-350h" />
+</div>
 
 Notice, there's no branding on our components. We believe we should grow by building the best product, not by forcing our brand onto your users. This means we **rely on you to spread the word about Stack**. If you like what you're reading, please take a moment to tell one or two of your friends about us.
 
diff --git a/docs/fern/style.css b/docs/fern/style.css
index 38a7a2d59..e3c95338d 100644
--- a/docs/fern/style.css
+++ b/docs/fern/style.css
@@ -3,7 +3,6 @@
   border-left: 1px solid var(--border);
 }
 
-
 .stack-white-image-showcase {
   display: flex;
   justify-content: center;
@@ -142,6 +141,30 @@ tr.stack-clickable-row-missing {
   display: none;
 }
 
-.stack-white-image-showcase > img {
-  object-fit: contain;
+.stack-50h {
+  height: 50px !important;
+}
+
+.stack-100h {
+  height: 100px !important;
+}
+
+.stack-150h {
+  height: 150px !important;
+}
+
+.stack-200h {
+  height: 200px !important;
+}
+
+.stack-250h {
+  height: 250px !important;
+}
+
+.stack-300h {
+  height: 300px !important;
+}
+
+.stack-350h {
+  height: 350px !important;
 }