diff --git a/src/routes/integration/+page.svelte b/src/routes/integration/+page.svelte
index 9d6981a4c5..c8a8c30d88 100644
--- a/src/routes/integration/+page.svelte
+++ b/src/routes/integration/+page.svelte
@@ -29,14 +29,16 @@
 </svelte:head>
 
 <Main>
-	<header class="web-u-sep-block-end">
+	<header class="web-u-sep-block-end u-padding-block-end-0">
 		<div class="web-container">
-			<div class="l-integrations-hero u-flex-vertical u-main-center u-gap-20 web-u-max-width-680">
-				<div class="web-eyebrow web-u-color-text-primary">
-					INTEGRATIONS<span class="web-u-color-text-accent">_</span>
+			<div class="web-integrations-top-section">
+				<div class="l-integrations-hero u-flex-vertical u-main-center u-gap-20 web-u-max-width-680">
+					<div class="web-eyebrow web-u-color-text-primary">
+						INTEGRATIONS<span class="web-u-color-text-accent">_</span>
+					</div>
+					<h1 class="web-headline web-u-color-text-primary">Discover infinite possibilities</h1>
+					<p class="web-description">Unlock the full potential of Appwrite by seamlessly integrating your favorite apps with your projects.</p>
 				</div>
-				<h1 class="web-headline web-u-color-text-primary">Discover infinite possibilities</h1>
-				<p class="web-description">Unlock the full potential of Appwrite by seamlessly integrating your favorite apps with your projects.</p>
 			</div>
 		</div>
 	</header>
@@ -44,414 +46,414 @@
 		<div class="web-big-padding-section-level-2">
 			<div class="web-container">
 				<div class="l-integrations-grid">
-					<aside class="u-flex-vertical u-gap-32">
-						<section>
-							<label class="web-input-button web-u-flex-basis-400">
-								<span class="web-icon-search" aria-hidden="true"></span>
-								<input class="text" placeholder="Search" />
-							</label>
-						</section>
-						<section class="u-flex-vertical">
-							<section class="u-flex-vertical u-gap-16">
-								<h2 class="web-side-nav-header web-eyebrow u-un-break-text">Platform</h2>
-								<ul class="u-flex u-flex-wrap u-gap-8">
-									<li>
-										<button class="tag is-selected">Cloud</button>
-									</li>
-									<li>
-										<button class="tag">Self-hosted</button>
-									</li>
-								</ul>
-							</section>
-							<div class="web-u-sep-block-start u-margin-block-24"></div>
-							<section class="u-flex-vertical u-gap-16">
-								<h2 class="web-side-nav-header web-eyebrow u-un-break-text">Categories</h2>
-								<ul class="u-flex-vertical u-gap-16">
-									<li>
-										<a class="web-link is-pink" href="#ai">AI</a>
-									</li>
-									<li>
-										<a class="web-link" href="#auth">Auth</a>
-									</li>
-									<li>
-										<a class="web-link" href="#databases">Databases</a>
-									</li>
-								</ul>
-							</section>
-						</section>
-					</aside>
-					<section>
-						<div class="u-flex-vertical u-gap-80">
-							<section class="u-flex-vertical u-gap-32">
-								<header class="u-flex-vertical u-gap-4">
-									<h2 class="web-label web-u-color-text-primary">Featured</h2>
-									<p class="web-description">Top recommended integrations</p>
-								</header>
-								<div>
-									<ul class="web-feature-grid">
-										<li class="web-feature-grid-item is-two-columns-desktop-only">
-											<a class="web-overlay-item" href="/">
-												<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
-												<div class="web-user-box u-column-gap-8 u-row-gap-0">
-													<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
-													<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
-														<span class="web-u-color-text-primary">Souvik Sarkar</span>
-														<span class="web-inline-tag is-pink">New</span>
-													</div>
-													<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
-												</div>
-											</a>
-										</li>
-										<li class="web-feature-grid-item">
-											<a class="web-overlay-item" href="/">
-												<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
-												<div class="web-user-box u-column-gap-8 u-row-gap-0">
-													<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
-													<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
-														<span class="web-u-color-text-primary">Souvik Sarkar</span>
-														<span class="web-inline-tag is-pink">New</span>
-													</div>
-													<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
-												</div>
-											</a>
-										</li>
-										<li class="web-feature-grid-item">
-											<a class="web-overlay-item" href="/">
-												<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
-												<div class="web-user-box u-column-gap-8 u-row-gap-0">
-													<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
-													<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
-														<span class="web-u-color-text-primary">Souvik Sarkar</span>
-														<span class="web-inline-tag is-pink">New</span>
-													</div>
-													<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
-												</div>
-											</a>
-										</li>
-										<li class="web-feature-grid-item">
-											<a class="web-overlay-item" href="/">
-												<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
-												<div class="web-user-box u-column-gap-8 u-row-gap-0">
-													<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
-													<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
-														<span class="web-u-color-text-primary">Souvik Sarkar</span>
-														<span class="web-inline-tag is-pink">New</span>
-													</div>
-													<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
-												</div>
-											</a>
-										</li>
-										<li class="web-feature-grid-item">
-											<a class="web-overlay-item" href="/">
-												<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
-												<div class="web-user-box u-column-gap-8 u-row-gap-0">
-													<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
-													<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
-														<span class="web-u-color-text-primary">Souvik Sarkar</span>
-														<span class="web-inline-tag is-pink">New</span>
-													</div>
-													<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
-												</div>
-											</a>
-										</li>
-									</ul>
-								</div>
+						<aside class="u-flex-vertical u-gap-32">
+							<section>
+								<label class="web-input-button web-u-flex-basis-400">
+									<span class="web-icon-search" aria-hidden="true"></span>
+									<input class="text" placeholder="Search" />
+								</label>
 							</section>
-
-							<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="ai">
-								<header class="u-flex-vertical u-gap-4">
-									<h2 class="web-label web-u-color-text-primary">AI</h2>
-									<p class="web-description">Artificial intelligence tools</p>
-								</header>
-								<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
-									<ul class="l-grid-1">
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
+							<section class="u-flex-vertical">
+								<section class="u-flex-vertical u-gap-16">
+									<h2 class="web-side-nav-header web-eyebrow u-un-break-text">Platform</h2>
+									<ul class="u-flex u-flex-wrap u-gap-8">
 										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
+											<button class="tag is-selected">Cloud</button>
 										</li>
 										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
+											<button class="tag">Self-hosted</button>
 										</li>
 									</ul>
-									<a href="#ai" class="l-float-button web-button is-text">
-										<span>Show more</span>
-									</a>
-								</div>
-							</section>
-
-							<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="auto">
-								<header class="u-flex-vertical u-gap-4">
-									<h2 class="web-label web-u-color-text-primary">Auth</h2>
-									<p class="web-description">Authentication and security</p>
-								</header>
-								<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
-									<ul class="l-grid-1">
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
+								</section>
+								<div class="web-u-sep-block-start u-margin-block-24"></div>
+								<section class="u-flex-vertical u-gap-16">
+									<h2 class="web-side-nav-header web-eyebrow u-un-break-text">Categories</h2>
+									<ul class="u-flex-vertical u-gap-16">
 										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
+											<a class="web-link is-pink" href="#ai">AI</a>
 										</li>
 										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
+											<a class="web-link" href="#auth">Auth</a>
 										</li>
 										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
+											<a class="web-link" href="#databases">Databases</a>
 										</li>
 									</ul>
-									<a href="#auto" class="l-float-button web-button is-text">
-										<span>Show more</span>
-									</a>
-								</div>
+								</section>
 							</section>
+						</aside>
+						<section>
+							<div class="u-flex-vertical u-gap-80">
+								<section class="u-flex-vertical u-gap-32">
+									<header class="u-flex-vertical u-gap-4">
+										<h2 class="web-label web-u-color-text-primary">Featured</h2>
+										<p class="web-description">Top recommended integrations</p>
+									</header>
+									<div>
+										<ul class="web-feature-grid">
+											<li class="web-feature-grid-item is-two-columns-desktop-only">
+												<a class="web-overlay-item" href="/">
+													<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
+													<div class="web-user-box u-column-gap-8 u-row-gap-0">
+														<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
+														<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
+															<span class="web-u-color-text-primary">Souvik Sarkar</span>
+															<span class="web-inline-tag is-pink">New</span>
+														</div>
+														<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
+													</div>
+												</a>
+											</li>
+											<li class="web-feature-grid-item">
+												<a class="web-overlay-item" href="/">
+													<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
+													<div class="web-user-box u-column-gap-8 u-row-gap-0">
+														<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
+														<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
+															<span class="web-u-color-text-primary">Souvik Sarkar</span>
+															<span class="web-inline-tag is-pink">New</span>
+														</div>
+														<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
+													</div>
+												</a>
+											</li>
+											<li class="web-feature-grid-item">
+												<a class="web-overlay-item" href="/">
+													<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
+													<div class="web-user-box u-column-gap-8 u-row-gap-0">
+														<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
+														<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
+															<span class="web-u-color-text-primary">Souvik Sarkar</span>
+															<span class="web-inline-tag is-pink">New</span>
+														</div>
+														<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
+													</div>
+												</a>
+											</li>
+											<li class="web-feature-grid-item">
+												<a class="web-overlay-item" href="/">
+													<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
+													<div class="web-user-box u-column-gap-8 u-row-gap-0">
+														<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
+														<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
+															<span class="web-u-color-text-primary">Souvik Sarkar</span>
+															<span class="web-inline-tag is-pink">New</span>
+														</div>
+														<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
+													</div>
+												</a>
+											</li>
+											<li class="web-feature-grid-item">
+												<a class="web-overlay-item" href="/">
+													<img src="/images/blog/ai-announcement.png" alt="" class="u-block web-u-media-ratio-16-9 web-u-media-cover">
+													<div class="web-user-box u-column-gap-8 u-row-gap-0">
+														<img class="web-user-box-image" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="40" height="40">
+														<div class="web-user-box-name web-main-body-500 u-flex u-gap-8">
+															<span class="web-u-color-text-primary">Souvik Sarkar</span>
+															<span class="web-inline-tag is-pink">New</span>
+														</div>
+														<div class="web-user-box-username web-caption-400 web-u-color-text-secondary">@Jeet_2003</div>
+													</div>
+												</a>
+											</li>
+										</ul>
+									</div>
+								</section>
 
-							<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="databases">
-								<header class="u-flex-vertical u-gap-4">
-									<h2 class="web-label web-u-color-text-primary">Databases</h2>
-									<p class="web-description">Data storage solutions</p>
-								</header>
-								<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
-									<ul class="l-grid-1">
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-										<li>
-											<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
-												<div class="u-flex u-cross-center u-gap-8">
-													<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
-													<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
-													<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
-												</div>
-												<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-											</a>
-										</li>
-									</ul>
-									<a href="#databases" class="l-float-button web-button is-text">
-										<span>Show more</span>
-									</a>
-								</div>
-							</section>
-						</div>
-					</section>
-				</div>
+								<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="ai">
+									<header class="u-flex-vertical u-gap-4">
+										<h2 class="web-label web-u-color-text-primary">AI</h2>
+										<p class="web-description">Artificial intelligence tools</p>
+									</header>
+									<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
+										<ul class="l-grid-1">
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+										</ul>
+										<a href="#ai" class="l-float-button web-button is-text">
+											<span>Show more</span>
+										</a>
+									</div>
+								</section>
+
+								<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="auto">
+									<header class="u-flex-vertical u-gap-4">
+										<h2 class="web-label web-u-color-text-primary">Auth</h2>
+										<p class="web-description">Authentication and security</p>
+									</header>
+									<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
+										<ul class="l-grid-1">
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+										</ul>
+										<a href="#auto" class="l-float-button web-button is-text">
+											<span>Show more</span>
+										</a>
+									</div>
+								</section>
+
+								<section class="l-max-size-list-cards-section u-flex-vertical u-gap-32" id="databases">
+									<header class="u-flex-vertical u-gap-4">
+										<h2 class="web-label web-u-color-text-primary">Databases</h2>
+										<p class="web-description">Data storage solutions</p>
+									</header>
+									<div class="l-max-size-list-cards u-flex-vertical u-gap-32">
+										<ul class="l-grid-1">
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+											<li>
+												<a href="/docs/products/auth" class="web-card is-normal u-height-100-percent" style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;">
+													<div class="u-flex u-cross-center u-gap-8">
+														<img class="web-user-box-image is-32px" src="/images/community/avatars/souvik.png" alt="Avatar of Souvik Sarkar" width="32" height="32">
+														<h4 class="web-main-body-400 web-u-color-text-primary">Lorem Ipsum</h4>
+														<span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"></span>
+													</div>
+													<p class="web-sub-body-400 u-margin-block-start-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+												</a>
+											</li>
+										</ul>
+										<a href="#databases" class="l-float-button web-button is-text">
+											<span>Show more</span>
+										</a>
+									</div>
+								</section>
+							</div>
+						</section>
+					</div>
 			</div>
 		</div>
 	</div>
@@ -530,20 +532,16 @@
 		gap: pxToRem(32);
 	}
 	.l-integrations-grid {
-		@media (max-width:767.9px) { min-block-size: pxToRem(370); }
-		@media (min-width:768px) and (max-width:1023.9px) { min-block-size: pxToRem(495); }
 		@media #{$break2open} {
 			display: grid;
 			gap: pxToRem(68);
 			grid-template-columns: pxToRem(240) 1fr;
-			min-block-size: pxToRem(548);
 			padding-block-start: pxToRem(60);
 		}
 	}
 	.l-integrations-hero {
 		@media #{$break1} {}
 		@media #{$break2open} {
-			min-block-size: pxToRem(628);
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/routes/integration/article/+page.svelte b/src/routes/integration/article/+page.svelte
index 99d02a8552..9bd30c9a5f 100644
--- a/src/routes/integration/article/+page.svelte
+++ b/src/routes/integration/article/+page.svelte
@@ -29,57 +29,63 @@
 </svelte:head>
 
 <Main>
-	<header class="web-u-sep-block-end" style="background-color:rgba(23, 23, 26, 1);">
+	<header class="web-u-sep-block-end u-padding-block-end-0" style="background-color:rgba(23, 23, 26, 1);">
 		<div class="web-container">
-			<div class="web-carousel-wrapper">
-				<div class="web-carousel">
-					<button class="web-carousel-button web-carousel-button-start">
-						<span class="web-icon-arrow-left" aria-hidden="true"></span>
-					</button>
-					<button class="web-carousel-button web-carousel-button-end">
-						<span class="web-icon-arrow-right" aria-hidden="true"></span>
-					</button>
-					<div class="web-carousel-overflow">
-						<ul class="web-carousel-list">
-							<li class="web-carousel-item is-empty">
-								<div>
-								</div>
-							</li>
-							<li class="web-carousel-item">
-								<div>
-									<img src="/images/blog/ai-announcement.png" class="web-u-media-ratio-16-9" alt="cover" width="472">
-								</div>
-							</li>
-							<li class="web-carousel-item is-main">
-								<div>
-									<img src="/images/blog/ai-announcement.png" class="web-u-media-ratio-16-9" alt="cover" width="584">
-								</div>
+			<div class="web-integrations-top-section">
+				<div class="web-carousel-wrapper">
+					<a href="/" class="web-button is-text u-margin-block-end-48">
+						<span class="icon-cheveron-left" aria-hidden="true"></span>
+						<span>Back to catalog</span>
+					</a>
+					<div class="web-carousel">
+						<button class="web-carousel-button web-carousel-button-start">
+							<span class="web-icon-arrow-left" aria-hidden="true"></span>
+						</button>
+						<button class="web-carousel-button web-carousel-button-end">
+							<span class="web-icon-arrow-right" aria-hidden="true"></span>
+						</button>
+						<div class="web-carousel-overflow">
+							<ul class="web-carousel-list">
+								<li class="web-carousel-item is-empty">
+									<div>
+									</div>
+								</li>
+								<li class="web-carousel-item">
+									<div>
+										<img src="/images/blog/ai-announcement.png" class="web-u-media-ratio-16-9" alt="cover" width="472">
+									</div>
+								</li>
+								<li class="web-carousel-item is-main">
+									<div>
+										<img src="/images/blog/ai-announcement.png" class="web-u-media-ratio-16-9" alt="cover" width="584">
+									</div>
+								</li>
+								<li class="web-carousel-item">
+									<div>
+										<img src="/images/blog/ai-announcement.png" class="web-u-media-ratio-16-9" alt="cover" width="472">
+									</div>
+								</li>
+								<li class="web-carousel-item is-empty">
+									<div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="web-carousel-bullets">
+						<ul class="web-carousel-bullets-list">
+							<li class="web-carousel-bullets-item">
+								<button class="web-carousel-bullets-button is-selected" aria-label="selected gallery first item"></button>
 							</li>
-							<li class="web-carousel-item">
-								<div>
-									<img src="/images/blog/ai-announcement.png" class="web-u-media-ratio-16-9" alt="cover" width="472">
-								</div>
+							<li class="web-carousel-bullets-item">
+								<button class="web-carousel-bullets-button" aria-label="gallery second item"></button>
 							</li>
-							<li class="web-carousel-item is-empty">
-								<div>
-								</div>
+							<li class="web-carousel-bullets-item">
+								<button class="web-carousel-bullets-button" aria-label="gallery third item"></button>
 							</li>
 						</ul>
 					</div>
 				</div>
-				<div class="web-carousel-bullets">
-					<ul class="web-carousel-bullets-list">
-						<li class="web-carousel-bullets-item">
-							<button class="web-carousel-bullets-button is-selected" aria-label="selected gallery first item"></button>
-						</li>
-						<li class="web-carousel-bullets-item">
-							<button class="web-carousel-bullets-button" aria-label="gallery second item"></button>
-						</li>
-						<li class="web-carousel-bullets-item">
-							<button class="web-carousel-bullets-button" aria-label="gallery third item"></button>
-						</li>
-					</ul>
-				</div>
 			</div>
 		</div>
 	</header>
@@ -119,14 +125,6 @@
 
 <style lang="scss">
 	@use '$scss/abstract' as *;
-	.web-carousel-wrapper {
-		display:flex; flex-direction:column; justify-content:center;
-		@media (max-width:767.9px) { min-block-size: pxToRem(370); }
-		@media (min-width:768px) and (max-width:1023.9px) { min-block-size: pxToRem(495); }
-		@media #{$break2open} {
-			min-block-size: pxToRem(548);
-		}
-	}
 	.web-pre-footer-bg {
 		position: absolute;
 		top: clamp(300px, 50vw, 50%);
diff --git a/src/scss/7-components/_carousel.scss b/src/scss/7-components/_carousel.scss
index b710c67bea..e69ca67940 100644
--- a/src/scss/7-components/_carousel.scss
+++ b/src/scss/7-components/_carousel.scss
@@ -20,7 +20,10 @@
   }
   &-item {
     scroll-snap-align:center;
-    img { display:block; inline-size:100%; border-radius:var(--border-radius-medium); transition:var(--transition); }
+    img {
+      display:block; inline-size:100%; border:solid pxToRem(2) hsl(var(--web-color-smooth));
+      border-radius:var(--border-radius-medium); transition:var(--transition);
+    }
   }
   &-button {
     display:flex; justify-content:center; align-items:center; inline-size:pxToRem(40); block-size:pxToRem(40);
@@ -30,7 +33,7 @@
     &-end   { position:absolute; z-index:2; inset-block-start:50%; inset-inline-end:calc( calc(100% - #{pxToRem(584)}) / 2 - #{pxToRem(100)} ); }
   }
   &-bullets {
-    margin-inline:auto;
+    inline-size:fit-content; margin-inline:auto;
     &-list { display:flex; margin-block-start:pxToRem(20); }
     &-item {}
     &-button {
@@ -67,3 +70,13 @@
     }
   }
 }
+
+
+.#{$p}-integrations-top-section {
+  display:flex; flex-direction:column; justify-content:center;
+  @media (max-width:767.9px) { min-block-size: pxToRem(370); padding-block:pxToRem(40); }
+  @media (min-width:768px) and (max-width:1023.9px) { min-block-size: pxToRem(495); padding-block:pxToRem(48); }
+  @media #{$break2open} {
+    min-block-size:pxToRem(548); padding-block:pxToRem(48);
+  }
+}
\ No newline at end of file