diff --git a/docs/_media/banner.png b/docs/_media/banner.png
new file mode 100644
index 000000000..b2074d34e
Binary files /dev/null and b/docs/_media/banner.png differ
diff --git a/docs/_media/og-image.png b/docs/_media/og-image.png
deleted file mode 100644
index 5c541ce85..000000000
Binary files a/docs/_media/og-image.png and /dev/null differ
diff --git a/docs/building-your-app.md b/docs/building-your-app.md
index ab3cf4950..e25d70ac6 100644
--- a/docs/building-your-app.md
+++ b/docs/building-your-app.md
@@ -38,16 +38,13 @@ Make sure the services are mounted at route `/api/zenstack/` with a catch all pa
 
 ## <small>_optional_</small> Integrating with NextAuth
 
-If you use NextAuth for authentication, ZenStack also generates an adapter which you can use to configure NextAuth for persistence of user, session, etc.
+If you use NextAuth for authentication, you can install the `@zenstackhq/next-auth` package for easier integration. This package provides an adapter and authorization helper that you can use to configure NextAuth.
 
 ```ts
 // pages/api/auth/[...nextauth].ts
 
 import service from '@zenstackhq/runtime';
-import {
-    authorize,
-    NextAuthAdapter as Adapter,
-} from '@zenstackhq/runtime/auth';
+import { authorize, Adapter } from '@zenstackhq/next-auth';
 import NextAuth, { type NextAuthOptions } from 'next-auth';
 
 export const authOptions: NextAuthOptions = {
@@ -68,6 +65,8 @@ export const authOptions: NextAuthOptions = {
 export default NextAuth(authOptions);
 ```
 
+Find more details [here](integrating-authentication.md) about integrating with different authentication schemes.
+
 ## Using React hooks
 
 React hooks are generated for CRUD'ing each data model you defined. They save your time writing explicit HTTP requests to call the generated services. Internally the hooks use [SWR](https://swr.vercel.app/) for data fetching, so you'll also enjoy its built-in features, like caching, revalidation on interval, etc.
diff --git a/docs/index.html b/docs/index.html
index ede4b4cc5..8c64d821b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,7 +18,10 @@
             content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
         />
 
-        <meta property="og:image" content="_media/og-image.png" />
+        <meta
+            property="og:image"
+            content="https://zenstack.dev/_media/banner.png"
+        />
 
         <meta
             property="og:title"
@@ -35,9 +38,12 @@
             content="https://zenstackhq.github.io/zenstack"
         />
 
-        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:card" content="summary_large_image" />
 
-        <meta property="twitter:image" content="_media/og-image.png" />
+        <meta
+            property="twitter:image:src"
+            content="https://zenstack.dev/_media/banner.png"
+        />
 
         <meta
             property="twitter:title"
diff --git a/docs/integrating-authentication.md b/docs/integrating-authentication.md
index 035d153c2..bff6a3154 100644
--- a/docs/integrating-authentication.md
+++ b/docs/integrating-authentication.md
@@ -6,15 +6,17 @@ This documentation explains how to integrate ZenStack with popular authenticatio
 
 [NextAuth](https://next-auth.js.org/) is a comprehensive framework for implementating authentication. It offers a pluggable mechanism for configuring how user data is persisted. You can find a full example using ZenStack with NextAuth [here](https://github.com/zenstackhq/zenstack/tree/main/samples/todo ':target=blank').
 
-### Using generated adapter
+ZenStack provides an extension package `@zenstackhq/next-auth` for integrating with NextAuth, which includes:
 
-When `zenstack generate` runs, it generates an adapter for NextAuth if it finds the `next-auth` npm package is installed. The generated adapter can be configured to NextAuth as follows:
+### Adapter
+
+Adapter is a NextAuth mechanism for hooking in custom persistence of auth related entities, like User, Account, etc. The ZenStack adapter can be configured to NextAuth as follows:
 
 ```ts
 // pages/api/auth/[...nextauth].ts
 
 import service from '@zenstackhq/runtime/server';
-import { NextAuthAdapter as Adapter } from '@zenstackhq/runtime/server/auth';
+import { Adapter } from '@zenstackhq/next-auth';
 import NextAuth, { type NextAuthOptions } from 'next-auth';
 
 export const authOptions: NextAuthOptions = {
@@ -26,15 +28,15 @@ export const authOptions: NextAuthOptions = {
 export default NextAuth(authOptions);
 ```
 
-### Using generated `authorize`
+### `authorize` helper
 
-If you use [`CredentialsProvider`](https://next-auth.js.org/providers/credentials ':target=blank'), i.e. username/password based auth, you can also use the generated `authorize` function to implement how username/password is verified against the database:
+If you use [`CredentialsProvider`](https://next-auth.js.org/providers/credentials ':target=blank'), i.e. email/password based auth, you can also use the `authorize` helper to implement how credentials are verified against the database:
 
 ```ts
 // pages/api/auth/[...nextauth].ts
 
 import service from '@zenstackhq/runtime/server';
-import { authorize } from '@zenstackhq/runtime/server/auth';
+import { authorize } from '@zenstackhq/next-auth';
 import NextAuth, { type NextAuthOptions } from 'next-auth';
 
 export const authOptions: NextAuthOptions = {
diff --git a/docs/zmodel-attribute.md b/docs/zmodel-attribute.md
index d93ad17b8..3a9c26be8 100644
--- a/docs/zmodel-attribute.md
+++ b/docs/zmodel-attribute.md
@@ -445,7 +445,7 @@ You can find a list of predefined attribute functions [here](#predefined-attribu
         function auth(): User {}
     ```
 
-    Gets thec current login user. The return type of the function is the `User` data model defined in the current ZModel.
+    Gets the current login user. The return type of the function is the `User` data model defined in the current ZModel.
 
 ## Examples