From 5199ce099849574c05e3176641c3b6005487901c Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Fri, 20 Feb 2026 18:01:28 -0700
Subject: [PATCH 1/5] fix issues with railway website-backend interaction and
 lint

---
 .github/workflows/lint.yml                    |  34 +-
 .prettierrc                                   |   2 +-
 app/[lang]/(core-products)/README.md          |  12 +-
 .../_components/DownloadButtons.tsx           |   4 +-
 .../_components/ProductFetcher.ts             |  44 +-
 .../_components/ProductFooterBanner.tsx       |   5 +-
 .../_components/ProductHero.tsx               |  17 +-
 .../_components/ProductStats.tsx              |   4 +-
 .../(core-products)/_components/README.md     |   2 +-
 .../(core-products)/_components/TradeHero.tsx |  10 +-
 .../(core-products)/defi-wallet/page.tsx      |   7 +-
 app/[lang]/(core-products)/earn/page.tsx      |   7 +-
 .../(core-products)/mobile-app/page.tsx       |   7 +-
 app/[lang]/(core-products)/trade/page.tsx     |   9 +-
 .../(resources)/_components/ChainList.tsx     |  10 +-
 .../_components/DiscoverFeature.tsx           |   7 +-
 .../(resources)/_components/FAQContent.tsx    |   4 +-
 .../(resources)/_components/FAQNavigation.tsx |  12 +-
 .../(resources)/_components/PostList.tsx      |  20 +-
 .../(resources)/_components/ProtocolAbout.tsx |   6 +-
 .../_components/ProtocolHeader.tsx            |  18 +-
 .../(resources)/_components/ProtocolList.tsx  |  10 +-
 app/[lang]/(resources)/_components/README.md  |  10 +-
 .../(resources)/_components/ResourceCard.tsx  |  25 +-
 .../(resources)/_components/ResourceGrid.tsx  |  12 +-
 .../_components/ResourceHeader.tsx            |  28 +-
 .../(resources)/_components/ResourceHero.tsx  |  20 +-
 .../_components/SupportArticleList.tsx        |  16 +-
 .../SupportArticleListSkeleton.tsx            |   4 +-
 .../_components/SupportedWalletHeader.tsx     |   8 +-
 .../(resources)/_components/WalletList.tsx    |  10 +-
 .../categories/[category]/page.tsx            |   2 +-
 .../blog/(withNavigation)/layout.tsx          |   4 +-
 app/[lang]/(resources)/blog/README.md         |  28 +-
 app/[lang]/(resources)/blog/[slug]/layout.tsx |   6 +-
 app/[lang]/(resources)/chains/README.md       |   4 +-
 app/[lang]/(resources)/chains/[slug]/page.tsx |   8 +-
 .../chains/_components/ChainSearchWrapper.tsx |   4 +-
 app/[lang]/(resources)/discover/README.md     |   4 +-
 .../(resources)/discover/[slug]/page.tsx      |   9 +-
 .../_components/DiscoverSearchWrapper.tsx     |   4 +-
 app/[lang]/(resources)/faq/README.md          |   8 +-
 .../categories/[category]/page.tsx            |   2 +-
 .../newsroom/(withNavigation)/layout.tsx      |   4 +-
 app/[lang]/(resources)/newsroom/README.md     |  26 +-
 .../(resources)/newsroom/[slug]/layout.tsx    |   6 +-
 app/[lang]/(resources)/protocols/README.md    |   4 +-
 .../(resources)/protocols/[slug]/page.tsx     |   8 +-
 .../_components/ProtocolSearchWrapper.tsx     |   4 +-
 app/[lang]/(resources)/wallets/README.md      |   4 +-
 .../(resources)/wallets/[slug]/page.tsx       |   8 +-
 .../_components/WalletSearchWrapper.tsx       |   4 +-
 app/[lang]/(terms)/README.md                  |  16 +-
 app/[lang]/(terms)/_components/README.md      |   2 +-
 app/[lang]/(terms)/_components/TermsPage.tsx  |   6 +-
 app/[lang]/(terms)/error.tsx                  |   6 +-
 app/[lang]/(terms)/layout.tsx                 |   4 +-
 app/[lang]/_components/AnimatedHeight.tsx     |   6 +-
 app/[lang]/_components/BlogPost.tsx           |   6 +-
 app/[lang]/_components/Button.tsx             |  16 +-
 app/[lang]/_components/Carousel.tsx           |  10 +-
 app/[lang]/_components/ChainsBanner.tsx       |  10 +-
 app/[lang]/_components/ChatwootWidget.tsx     |  22 +-
 app/[lang]/_components/Dropdown.tsx           |  12 +-
 app/[lang]/_components/ElementCard.tsx        |  23 +-
 app/[lang]/_components/FooterBanner.tsx       |  10 +-
 app/[lang]/_components/HeaderItem.tsx         |  18 +-
 app/[lang]/_components/LandingInfoCard.tsx    |   6 +-
 app/[lang]/_components/LocalizedLink.tsx      |   4 +-
 app/[lang]/_components/Modal.tsx              |  10 +-
 app/[lang]/_components/NewsPost.tsx           |   4 +-
 app/[lang]/_components/NotificationBar.tsx    |   6 +-
 app/[lang]/_components/Popup.tsx              |  10 +-
 app/[lang]/_components/RoundButton.tsx        |   6 +-
 app/[lang]/_components/SearchBar.tsx          |   6 +-
 app/[lang]/_components/TabItem.tsx            |  10 +-
 app/[lang]/_components/WalletRequestCard.tsx  |  12 +-
 .../_components/header/DesktopHeader.tsx      |   8 +-
 app/[lang]/_components/header/Header.tsx      |   4 +-
 .../_components/header/LanguageExpand.tsx     |   4 +-
 .../_components/header/MobileHeader.tsx       |   4 +-
 .../_components/strapi/cards-row/Card.tsx     |   5 +-
 .../_components/strapi/cards-row/CardsRow.tsx |   4 +-
 .../strapi/products/CarouselCard.tsx          |  15 +-
 .../strapi/products/ChainBubblesCard.tsx      |  23 +-
 .../_components/strapi/products/Grid.tsx      |   3 +-
 .../strapi/products/GridDisplaced.tsx         |   4 +-
 .../strapi/products/GridLadder.tsx            |   3 +-
 .../strapi/templates/ChainFeatures.tsx        |   3 +-
 app/[lang]/_components/strapi/types.ts        | 482 +++++++++---------
 .../_components/trading/ChainSelect.tsx       |  24 +-
 .../_components/trading/TokenSelect.tsx       |  28 +-
 .../_components/trading/TradingWidget.tsx     |   8 +-
 .../_contexts/CachedArticlesContext.tsx       |  28 +-
 app/[lang]/_contexts/CachedNewsContext.tsx    |  32 +-
 app/[lang]/_contexts/CachedPostsContext.tsx   |  32 +-
 app/[lang]/_contexts/LanguageContext.tsx      |  24 +-
 app/[lang]/_hooks/useFetchNewsroom.tsx        |  26 +-
 app/[lang]/_hooks/useFetchPosts.tsx           |  26 +-
 app/[lang]/_hooks/useFetchSupportArticles.ts  |  22 +-
 app/[lang]/_utils/README.md                   |   6 +-
 app/[lang]/_utils/i18nconfig.ts               |  10 +-
 app/[lang]/_utils/query.ts                    |  15 +
 app/[lang]/_utils/schema.ts                   |  13 +-
 app/[lang]/dao/fox-token/page.tsx             |  13 +-
 eslint.config.mjs                             | 151 +++---
 next.config.ts                                |   6 +-
 package.json                                  | 122 ++---
 postcss.config.mjs                            |   4 +-
 scripts/release.ts                            |  20 +-
 scripts/utils.ts                              |   4 +-
 tailwind.config.ts                            |   4 +-
 112 files changed, 999 insertions(+), 957 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index e7f3863..494b8fb 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -1,26 +1,26 @@
 name: Lint
 
 on:
-  pull_request:
-    branches: [main, develop]
-  push:
-    branches: [main, develop]
+    pull_request:
+        branches: [main, develop]
+    push:
+        branches: [main, develop]
 
 jobs:
-  lint:
-    runs-on: ubuntu-latest
+    lint:
+        runs-on: ubuntu-latest
 
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
 
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
+            - name: Setup Bun
+              uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: latest
 
-      - name: Install dependencies
-        run: bun install --frozen-lockfile
+            - name: Install dependencies
+              run: bun install --frozen-lockfile
 
-      - name: Run ESLint
-        run: bun run lint
+            - name: Run ESLint
+              run: bun run lint
diff --git a/.prettierrc b/.prettierrc
index 19a28d9..ca544ea 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -9,4 +9,4 @@
 	"bracketSameLine": true,
 	"singleAttributePerLine": true,
 	"printWidth": 120
-}
\ No newline at end of file
+}
diff --git a/app/[lang]/(core-products)/README.md b/app/[lang]/(core-products)/README.md
index df358e7..ccb7bae 100644
--- a/app/[lang]/(core-products)/README.md
+++ b/app/[lang]/(core-products)/README.md
@@ -4,17 +4,18 @@ This directory contains all product-related pages and components for ShapeShift'
 
 ## Directory Structure
 
-- **_components/**: Shared components used across all core product pages
-  - Product heroes, stats displays, background images, etc.
-  - Utility functions and constants for product data fetching
+- **\_components/**: Shared components used across all core product pages
+    - Product heroes, stats displays, background images, etc.
+    - Utility functions and constants for product data fetching
 - **defi-wallet/**: DeFi wallet product page
 - **earn/**: Yield-earning opportunities product page
-- **mobile-app/**: Mobile application product page 
+- **mobile-app/**: Mobile application product page
 - **trade/**: Trading platform product page
 
 ## Route Convention
 
 The parentheses in the directory name `(core-products)` indicate a route group in Next.js. This means:
+
 - The folder name itself doesn't affect URL paths
 - All pages inside share UI layouts and features
 - It keeps related features organized without affecting the URL structure
@@ -22,6 +23,7 @@ The parentheses in the directory name `(core-products)` indicate a route group i
 ## Component Integration
 
 The components in this directory are designed to:
+
 - Integrate with the main layout defined in the app root
 - Share consistent styling and branding
 - Leverage common utilities for product data fetching
@@ -32,4 +34,4 @@ The components in this directory are designed to:
 - Follow the design patterns established in the shared components
 - Maintain consistent UI/UX across all product pages
 - Use the ProductFetcher utility for data retrieval
-- Ensure responsive layouts for all device sizes
\ No newline at end of file
+- Ensure responsive layouts for all device sizes
diff --git a/app/[lang]/(core-products)/_components/DownloadButtons.tsx b/app/[lang]/(core-products)/_components/DownloadButtons.tsx
index 4e4c94e..46b7b80 100644
--- a/app/[lang]/(core-products)/_components/DownloadButtons.tsx
+++ b/app/[lang]/(core-products)/_components/DownloadButtons.tsx
@@ -23,8 +23,8 @@ import type {TDownloadButton} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TDownloadButtonsProps = {
-	buttons: TDownloadButton[];
-};
+	buttons: TDownloadButton[]
+}
 
 export function DownloadButtons({buttons}: TDownloadButtonsProps): ReactNode {
 	if (!buttons || buttons.length === 0) {
diff --git a/app/[lang]/(core-products)/_components/ProductFetcher.ts b/app/[lang]/(core-products)/_components/ProductFetcher.ts
index e7e46af..f3fbbe0 100644
--- a/app/[lang]/(core-products)/_components/ProductFetcher.ts
+++ b/app/[lang]/(core-products)/_components/ProductFetcher.ts
@@ -53,52 +53,52 @@ import type {
  * Base type containing properties common to all product pages
  ************************************************************************************************/
 type TBaseProductPage = {
-	title: string;
-	description: string;
-	featuredImg: TStrapiImage;
-	footer: TFooterSection;
-};
+	title: string
+	description: string
+	featuredImg: TStrapiImage
+	footer: TFooterSection
+}
 
 /************************************************************************************************
  * DeFi Wallet page data structure
  * Features card row layout highlighting wallet capabilities
  ************************************************************************************************/
 type TDeFiWalletPage = TBaseProductPage & {
-	buttonCta: TButton;
-	buttonDownload: TButton[];
-	cardsRow: TCardsRowSection;
-};
+	buttonCta: TButton
+	buttonDownload: TButton[]
+	cardsRow: TCardsRowSection
+}
 
 /************************************************************************************************
  * Earn page data structure
  * Features grid layout showcasing earning opportunities
  ************************************************************************************************/
 type TEarnPage = TBaseProductPage & {
-	buttonCta: TButton;
-	buttonDownload: TButton[];
-	grid: TGridSection;
-};
+	buttonCta: TButton
+	buttonDownload: TButton[]
+	grid: TGridSection
+}
 
 /************************************************************************************************
  * Mobile App page data structure
  * Features step-by-step ladder grid and download buttons
  ************************************************************************************************/
 type TMobileAppPage = TBaseProductPage & {
-	buttonCta: TButton;
-	buttonDownload: TDownloadButton[];
-	gridLadder: TGridLadderSection;
-};
+	buttonCta: TButton
+	buttonDownload: TDownloadButton[]
+	gridLadder: TGridLadderSection
+}
 
 /************************************************************************************************
  * Trade page data structure
  * Features statistics, card row, and displaced grid layout
  ************************************************************************************************/
 type TTradePage = TBaseProductPage & {
-	buttonCta: TButton;
-	stats: TStat[];
-	cardsRow: TCardsRowSection;
-	gridDisplaced: TGridDisplacedSection;
-};
+	buttonCta: TButton
+	stats: TStat[]
+	cardsRow: TCardsRowSection
+	gridDisplaced: TGridDisplacedSection
+}
 
 /************************************************************************************************
  * Fetches DeFi Wallet page data from Strapi API
diff --git a/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx b/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx
index 6ed0ff4..a1d837c 100644
--- a/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx
+++ b/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx
@@ -1,4 +1,3 @@
-
 /************************************************************************************************
  ** ProductFooterBanner Component:
  **
@@ -25,8 +24,8 @@ import {PRODUCT_FOOTER_CONFIGS} from './constants'
 import type {ReactNode} from 'react'
 
 type TProductFooterBannerProps = {
-	productName: keyof typeof PRODUCT_FOOTER_CONFIGS;
-};
+	productName: keyof typeof PRODUCT_FOOTER_CONFIGS
+}
 
 export function ProductFooterBanner({productName}: TProductFooterBannerProps): ReactNode {
 	// Get configuration for the specified product
diff --git a/app/[lang]/(core-products)/_components/ProductHero.tsx b/app/[lang]/(core-products)/_components/ProductHero.tsx
index e19592b..ca7c53c 100644
--- a/app/[lang]/(core-products)/_components/ProductHero.tsx
+++ b/app/[lang]/(core-products)/_components/ProductHero.tsx
@@ -20,18 +20,19 @@
 import Image from 'next/image'
 
 import {Button} from '@/app/[lang]/_components/Button'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {TButton, TStrapiImage} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TProductHeroProps = {
-	title: string;
-	description: string;
-	buttonCta?: TButton; // Optional because mobile-app doesn't use it
-	featuredImg: TStrapiImage;
-	children?: ReactNode; // Additional content like stats or download buttons
-	buttonClassName?: string;
-};
+	title: string
+	description: string
+	buttonCta?: TButton // Optional because mobile-app doesn't use it
+	featuredImg: TStrapiImage
+	children?: ReactNode // Additional content like stats or download buttons
+	buttonClassName?: string
+}
 
 export function ProductHero({
 	title,
@@ -63,7 +64,7 @@ export function ProductHero({
 
 				<div className={'mt-20 aspect-[1400/400] overflow-hidden rounded-2xl'}>
 					<Image
-						src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${featuredImg.url}`}
+						src={getStrapiImageUrl(featuredImg.url)}
 						className={'aspect-[1400/400] w-full'}
 						alt={title || 'Product feature image'}
 						quality={100}
diff --git a/app/[lang]/(core-products)/_components/ProductStats.tsx b/app/[lang]/(core-products)/_components/ProductStats.tsx
index 3fe71aa..7f8f3e7 100644
--- a/app/[lang]/(core-products)/_components/ProductStats.tsx
+++ b/app/[lang]/(core-products)/_components/ProductStats.tsx
@@ -20,8 +20,8 @@ import type {TStat} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TProductStatsProps = {
-	stats: TStat[];
-};
+	stats: TStat[]
+}
 
 export function ProductStats({stats = []}: TProductStatsProps): ReactNode {
 	// Handle case where stats is null, undefined, or empty
diff --git a/app/[lang]/(core-products)/_components/README.md b/app/[lang]/(core-products)/_components/README.md
index 9581873..c992c35 100644
--- a/app/[lang]/(core-products)/_components/README.md
+++ b/app/[lang]/(core-products)/_components/README.md
@@ -48,4 +48,4 @@ When using or adding to this directory:
 - **Product Data**: The ProductFetcher handles data retrieval for product information
 - **Hero Components**: Multiple hero variants exist for different product types
 - **Stats Display**: ProductStats presents metrics in a standardized format
-- **Image Handling**: BackgroundImage provides optimized image loading
\ No newline at end of file
+- **Image Handling**: BackgroundImage provides optimized image loading
diff --git a/app/[lang]/(core-products)/_components/TradeHero.tsx b/app/[lang]/(core-products)/_components/TradeHero.tsx
index cca8253..fe66b36 100644
--- a/app/[lang]/(core-products)/_components/TradeHero.tsx
+++ b/app/[lang]/(core-products)/_components/TradeHero.tsx
@@ -23,11 +23,11 @@ import type {TButton} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TTradeHeroProps = {
-	title: string;
-	description: string;
-	buttonCta: TButton;
-	imageUrl: string;
-};
+	title: string
+	description: string
+	buttonCta: TButton
+	imageUrl: string
+}
 
 export function TradeHero({title, description, buttonCta, imageUrl}: TTradeHeroProps): ReactNode {
 	// Handle button click to open URL in new tab with security precautions
diff --git a/app/[lang]/(core-products)/defi-wallet/page.tsx b/app/[lang]/(core-products)/defi-wallet/page.tsx
index 440b91d..1f257a3 100644
--- a/app/[lang]/(core-products)/defi-wallet/page.tsx
+++ b/app/[lang]/(core-products)/defi-wallet/page.tsx
@@ -20,6 +20,7 @@ import Script from 'next/script'
 
 import {Card} from '@/app/[lang]/_components/strapi/cards-row/Card'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 import {generateProductSchema} from '@/app/[lang]/_utils/schema'
 
 import {BackgroundImage} from '../_components/BackgroundImage'
@@ -48,7 +49,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			type: 'website',
 			images: [
 				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+					url: getStrapiImageUrl(page.featuredImg.url),
 					width: 1200,
 					height: 630,
 					alt: page.title
@@ -59,7 +60,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			card: 'summary_large_image',
 			title: page.title,
 			description: page.description,
-			images: [`${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`]
+			images: [getStrapiImageUrl(page.featuredImg.url)]
 		}
 	}
 }
@@ -88,7 +89,7 @@ export default async function DeFiWalletPage(): Promise<ReactNode> {
 	const productSchema = generateProductSchema({
 		title: page.title,
 		description: page.description,
-		featuredImage: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+		featuredImage: getStrapiImageUrl(page.featuredImg.url),
 		pageURL,
 		features
 	})
diff --git a/app/[lang]/(core-products)/earn/page.tsx b/app/[lang]/(core-products)/earn/page.tsx
index f2df6f2..49a3f0a 100644
--- a/app/[lang]/(core-products)/earn/page.tsx
+++ b/app/[lang]/(core-products)/earn/page.tsx
@@ -19,6 +19,7 @@ import {notFound} from 'next/navigation'
 import Script from 'next/script'
 
 import Grid from '@/app/[lang]/_components/strapi/products/Grid'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 import {generateProductSchema} from '@/app/[lang]/_utils/schema'
 
 import {BackgroundImage} from '../_components/BackgroundImage'
@@ -46,7 +47,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			type: 'website',
 			images: [
 				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+					url: getStrapiImageUrl(page.featuredImg.url),
 					width: 1200,
 					height: 630,
 					alt: page.title
@@ -57,7 +58,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			card: 'summary_large_image',
 			title: page.title,
 			description: page.description,
-			images: [`${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`]
+			images: [getStrapiImageUrl(page.featuredImg.url)]
 		}
 	}
 }
@@ -86,7 +87,7 @@ export default async function EarnPage(): Promise<ReactNode> {
 	const productSchema = generateProductSchema({
 		title: page.title,
 		description: page.description,
-		featuredImage: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+		featuredImage: getStrapiImageUrl(page.featuredImg.url),
 		pageURL,
 		features
 	})
diff --git a/app/[lang]/(core-products)/mobile-app/page.tsx b/app/[lang]/(core-products)/mobile-app/page.tsx
index 2625306..d8bd487 100644
--- a/app/[lang]/(core-products)/mobile-app/page.tsx
+++ b/app/[lang]/(core-products)/mobile-app/page.tsx
@@ -19,6 +19,7 @@ import {notFound} from 'next/navigation'
 import Script from 'next/script'
 
 import GridLadder from '@/app/[lang]/_components/strapi/products/GridLadder'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 import {generateProductSchema} from '@/app/[lang]/_utils/schema'
 
 import {BackgroundImage} from '../_components/BackgroundImage'
@@ -47,7 +48,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			type: 'website',
 			images: [
 				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+					url: getStrapiImageUrl(page.featuredImg.url),
 					width: 1200,
 					height: 630,
 					alt: page.title
@@ -58,7 +59,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			card: 'summary_large_image',
 			title: page.title,
 			description: page.description,
-			images: [`${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`]
+			images: [getStrapiImageUrl(page.featuredImg.url)]
 		}
 	}
 }
@@ -87,7 +88,7 @@ export default async function MobileAppPage(): Promise<ReactNode> {
 	const productSchema = generateProductSchema({
 		title: page.title,
 		description: page.description,
-		featuredImage: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+		featuredImage: getStrapiImageUrl(page.featuredImg.url),
 		pageURL,
 		features
 	})
diff --git a/app/[lang]/(core-products)/trade/page.tsx b/app/[lang]/(core-products)/trade/page.tsx
index 5d30ec6..37810ea 100644
--- a/app/[lang]/(core-products)/trade/page.tsx
+++ b/app/[lang]/(core-products)/trade/page.tsx
@@ -23,6 +23,7 @@ import Script from 'next/script'
 import {Card} from '@/app/[lang]/_components/strapi/cards-row/Card'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
 import GridDisplaced from '@/app/[lang]/_components/strapi/products/GridDisplaced'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 import {generateProductSchema} from '@/app/[lang]/_utils/schema'
 
 import {BackgroundImage} from '../_components/BackgroundImage'
@@ -52,7 +53,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			type: 'website',
 			images: [
 				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+					url: getStrapiImageUrl(page.featuredImg.url),
 					width: 1200,
 					height: 630,
 					alt: page.title
@@ -63,7 +64,7 @@ export async function generateMetadata(): Promise<Metadata> {
 			card: 'summary_large_image',
 			title: page.title,
 			description: page.description,
-			images: [`${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`]
+			images: [getStrapiImageUrl(page.featuredImg.url)]
 		}
 	}
 }
@@ -92,7 +93,7 @@ export default async function TradePage(): Promise<ReactNode> {
 	const productSchema = generateProductSchema({
 		title: page.title,
 		description: page.description,
-		featuredImage: `${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`,
+		featuredImage: getStrapiImageUrl(page.featuredImg.url),
 		pageURL,
 		features
 	})
@@ -115,7 +116,7 @@ export default async function TradePage(): Promise<ReactNode> {
 				title={page.title}
 				description={page.description}
 				buttonCta={page.buttonCta}
-				imageUrl={`${process.env.NEXT_PUBLIC_STRAPI_URL}${page.featuredImg.url}`}
+				imageUrl={getStrapiImageUrl(page.featuredImg.url)}
 			/>
 
 			{/* Feature cards section */}
diff --git a/app/[lang]/(resources)/_components/ChainList.tsx b/app/[lang]/(resources)/_components/ChainList.tsx
index f4a8904..a3fc486 100644
--- a/app/[lang]/(resources)/_components/ChainList.tsx
+++ b/app/[lang]/(resources)/_components/ChainList.tsx
@@ -21,11 +21,11 @@ import type {TSupportedChainData} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TChainListProps = {
-	chains: TSupportedChainData[] | null;
-	isLoading?: boolean;
-	className?: string;
-	isSearchQuery?: boolean;
-};
+	chains: TSupportedChainData[] | null
+	isLoading?: boolean
+	className?: string
+	isSearchQuery?: boolean
+}
 
 export function ChainList({chains, isLoading, className, isSearchQuery}: TChainListProps): ReactNode {
 	return (
diff --git a/app/[lang]/(resources)/_components/DiscoverFeature.tsx b/app/[lang]/(resources)/_components/DiscoverFeature.tsx
index a3a92a2..674b8ad 100644
--- a/app/[lang]/(resources)/_components/DiscoverFeature.tsx
+++ b/app/[lang]/(resources)/_components/DiscoverFeature.tsx
@@ -21,6 +21,7 @@ import Image from 'next/image'
 
 import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
 import {cl} from '@/app/[lang]/_utils/cl'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {ReactNode} from 'react'
 
@@ -92,11 +93,7 @@ export function DiscoverFeature({
 						{feature.image?.url && (
 							<div className={'mb-6'}>
 								<Image
-									src={
-										feature.image.url.startsWith('http')
-											? feature.image.url
-											: `${process.env.NEXT_PUBLIC_STRAPI_URL}${feature.image.url}`
-									}
+									src={getStrapiImageUrl(feature.image.url)}
 									alt={feature.image.alt || feature.title}
 									width={feature.image.width || 64}
 									height={feature.image.height || 64}
diff --git a/app/[lang]/(resources)/_components/FAQContent.tsx b/app/[lang]/(resources)/_components/FAQContent.tsx
index 86ddd05..4b7b306 100644
--- a/app/[lang]/(resources)/_components/FAQContent.tsx
+++ b/app/[lang]/(resources)/_components/FAQContent.tsx
@@ -31,8 +31,8 @@ import type {TFaqData, TFaqSection} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TFAQContentProps = {
-	faqData: TFaqData;
-};
+	faqData: TFaqData
+}
 
 export function FAQContent({faqData}: TFAQContentProps): ReactNode {
 	const [activeSection, setActiveSection] = useState<string>('')
diff --git a/app/[lang]/(resources)/_components/FAQNavigation.tsx b/app/[lang]/(resources)/_components/FAQNavigation.tsx
index de1352a..7e306e7 100644
--- a/app/[lang]/(resources)/_components/FAQNavigation.tsx
+++ b/app/[lang]/(resources)/_components/FAQNavigation.tsx
@@ -24,12 +24,12 @@ import type {ReactNode} from 'react'
 
 type TFAQNavigationProps = {
 	sections: {
-		id: number;
-		sectionTitle: string;
-	}[];
-	activeSection: string;
-	onSectionClick: (sectionTitle: string) => void;
-};
+		id: number
+		sectionTitle: string
+	}[]
+	activeSection: string
+	onSectionClick: (sectionTitle: string) => void
+}
 
 export function FAQNavigation({sections, activeSection, onSectionClick}: TFAQNavigationProps): ReactNode {
 	if (!sections || sections.length === 0) {
diff --git a/app/[lang]/(resources)/_components/PostList.tsx b/app/[lang]/(resources)/_components/PostList.tsx
index 8a88090..9b5c9d7 100644
--- a/app/[lang]/(resources)/_components/PostList.tsx
+++ b/app/[lang]/(resources)/_components/PostList.tsx
@@ -33,16 +33,16 @@ import type {TBlogPost} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TPostListProps = {
-	pageSize?: number;
-	sort?: 'asc' | 'desc';
-	initialPage?: number;
-	populateContent?: boolean;
-	cachePosts?: boolean;
-	emptyMessage?: string;
-	category?: string;
-	tag?: string;
-	gridClassName?: string;
-};
+	pageSize?: number
+	sort?: 'asc' | 'desc'
+	initialPage?: number
+	populateContent?: boolean
+	cachePosts?: boolean
+	emptyMessage?: string
+	category?: string
+	tag?: string
+	gridClassName?: string
+}
 
 export function PostList({
 	pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
diff --git a/app/[lang]/(resources)/_components/ProtocolAbout.tsx b/app/[lang]/(resources)/_components/ProtocolAbout.tsx
index 18bf94b..4ba2a07 100644
--- a/app/[lang]/(resources)/_components/ProtocolAbout.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolAbout.tsx
@@ -1,9 +1,9 @@
 import type {ReactNode} from 'react'
 
 type THeaderData = {
-	name: string;
-	description: string;
-};
+	name: string
+	description: string
+}
 export function ProtocolAbout(data: THeaderData): ReactNode {
 	return (
 		<div className={'mt-4'}>
diff --git a/app/[lang]/(resources)/_components/ProtocolHeader.tsx b/app/[lang]/(resources)/_components/ProtocolHeader.tsx
index 05c8fb8..1f0bbfa 100644
--- a/app/[lang]/(resources)/_components/ProtocolHeader.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolHeader.tsx
@@ -7,13 +7,13 @@ import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
 import type {ReactNode} from 'react'
 
 type THeaderData = {
-	description: string;
-	items: string[];
-	url: string;
-	width: number;
-	height: number;
-	name: string;
-};
+	description: string
+	items: string[]
+	url: string
+	width: number
+	height: number
+	name: string
+}
 export function ProtocolHeader(data: THeaderData): ReactNode {
 	return (
 		<Fragment>
@@ -33,9 +33,7 @@ export function ProtocolHeader(data: THeaderData): ReactNode {
 						{`Shift into ${data.name}`}
 					</h1>
 					<p className={'mx-auto max-w-screen-md text-center text-base text-gray-500 lg:text-xl'}>
-						{
-							'Say goodbye to multiple interfaces and hello to ShapeShift.'
-						}
+						{'Say goodbye to multiple interfaces and hello to ShapeShift.'}
 					</p>
 				</div>
 				<Button
diff --git a/app/[lang]/(resources)/_components/ProtocolList.tsx b/app/[lang]/(resources)/_components/ProtocolList.tsx
index c25f6a2..7bcd5e8 100644
--- a/app/[lang]/(resources)/_components/ProtocolList.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolList.tsx
@@ -23,11 +23,11 @@ import type {TSupportedProtocolData} from '@/app/[lang]/_components/strapi/types
 import type {ReactNode} from 'react'
 
 type TProtocolListProps = {
-	protocols: TSupportedProtocolData[] | null;
-	isLoading?: boolean;
-	className?: string;
-	isSearchQuery?: boolean;
-};
+	protocols: TSupportedProtocolData[] | null
+	isLoading?: boolean
+	className?: string
+	isSearchQuery?: boolean
+}
 
 export function ProtocolList({protocols, isLoading, className, isSearchQuery}: TProtocolListProps): ReactNode {
 	return (
diff --git a/app/[lang]/(resources)/_components/README.md b/app/[lang]/(resources)/_components/README.md
index 556ecef..e99767a 100644
--- a/app/[lang]/(resources)/_components/README.md
+++ b/app/[lang]/(resources)/_components/README.md
@@ -5,12 +5,14 @@ This directory contains shared components used across the resources section of t
 ## Component Files
 
 ### Resource Structure Components
+
 - **ResourceCard.tsx**: Card component for displaying resource items
 - **ResourceGrid.tsx**: Grid layout for arranging resource cards
 - **ResourceHeader.tsx**: Header component for resource pages
 - **ResourceHero.tsx**: Hero component for resource section landing pages
 
 ### Blog & Newsroom Components
+
 - **BlogBreadcrumb.tsx**: Breadcrumb navigation for blog pages
 - **NewsroomBreadcrumb.tsx**: Breadcrumb navigation for newsroom pages
 - **NewsroomNav.tsx**: Navigation component for newsroom
@@ -18,6 +20,7 @@ This directory contains shared components used across the resources section of t
 - **PostList.tsx**: Component for listing blog or news posts
 
 ### Chain & Protocol Components
+
 - **ChainList.tsx**: Component for displaying supported blockchain networks
 - **ProtocolAbout.tsx**: About section for protocol pages
 - **ProtocolEasier.tsx**: Component highlighting protocol ease of use
@@ -26,22 +29,26 @@ This directory contains shared components used across the resources section of t
 - **ProtocolList.tsx**: List component for displaying protocols
 
 ### Wallet Components
+
 - **SupportedWalletAccelerate.tsx**: Component for wallet acceleration features
 - **SupportedWalletHeader.tsx**: Header component for wallet pages
 - **SupportedWalletHero.tsx**: Hero component for wallet section
 - **WalletList.tsx**: Component for displaying supported wallets
 
 ### Feature & Discovery Components
+
 - **DiscoverFeature.tsx**: Component for highlighting discover features
 - **SupportedChainTable.tsx**: Table component for displaying chain support details
 
 ### FAQ Components
+
 - **FAQContent.tsx**: Component for rendering FAQ content
 - **FAQNavigation.tsx**: Navigation component for FAQ sections
 
 ## Purpose
 
 These components provide:
+
 - Consistent UI across all resource pages
 - Reusable layouts and design patterns
 - Standardized presentation of various content types
@@ -50,6 +57,7 @@ These components provide:
 ## Usage Guidelines
 
 When using or adding to this directory:
+
 - Group related components by resource type
 - Maintain consistent naming conventions
 - Ensure proper props typing and documentation
@@ -62,4 +70,4 @@ When using or adding to this directory:
 - Most components expect data from CMS or API sources
 - Component naming reflects its primary purpose and content type
 - Navigation components handle both desktop and mobile layouts
-- List and grid components handle both loading and error states
\ No newline at end of file
+- List and grid components handle both loading and error states
diff --git a/app/[lang]/(resources)/_components/ResourceCard.tsx b/app/[lang]/(resources)/_components/ResourceCard.tsx
index 8c66c67..9b670de 100644
--- a/app/[lang]/(resources)/_components/ResourceCard.tsx
+++ b/app/[lang]/(resources)/_components/ResourceCard.tsx
@@ -23,23 +23,24 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 import {cl} from '@/app/[lang]/_utils/cl'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {ReactNode} from 'react'
 
 const MotionLink = motion(Link)
 
 type TResourceCardProps = {
-	slug: string;
-	title: string;
-	description: string;
-	imageUrl: string;
-	imageWidth?: number;
-	imageHeight?: number;
-	baseURL: string;
-	imagePosition?: 'center' | 'bottom';
-	altText?: string;
-	className?: string;
-};
+	slug: string
+	title: string
+	description: string
+	imageUrl: string
+	imageWidth?: number
+	imageHeight?: number
+	baseURL: string
+	imagePosition?: 'center' | 'bottom'
+	altText?: string
+	className?: string
+}
 
 export function ResourceCard({
 	slug,
@@ -85,7 +86,7 @@ export function ResourceCard({
 						transition={{duration: 0.5}}
 						className={'relative z-10 size-full object-contain'}>
 						<Image
-							src={imageUrl.startsWith('http') ? imageUrl : `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`}
+							src={getStrapiImageUrl(imageUrl)}
 							alt={altText || title}
 							width={imageWidth || 100}
 							height={imageHeight || 100}
diff --git a/app/[lang]/(resources)/_components/ResourceGrid.tsx b/app/[lang]/(resources)/_components/ResourceGrid.tsx
index 5be8cb5..de4a100 100644
--- a/app/[lang]/(resources)/_components/ResourceGrid.tsx
+++ b/app/[lang]/(resources)/_components/ResourceGrid.tsx
@@ -19,12 +19,12 @@
 import type {ReactElement, ReactNode} from 'react'
 
 type TResourceGridProps<T> = {
-	items: T[] | null | undefined;
-	renderItem: (item: T, index: number) => ReactNode;
-	isLoading?: boolean;
-	emptyMessage?: string;
-	className?: string;
-};
+	items: T[] | null | undefined
+	renderItem: (item: T, index: number) => ReactNode
+	isLoading?: boolean
+	emptyMessage?: string
+	className?: string
+}
 
 export function ResourceGrid<T>({
 	items,
diff --git a/app/[lang]/(resources)/_components/ResourceHeader.tsx b/app/[lang]/(resources)/_components/ResourceHeader.tsx
index 70be717..3a9aaa7 100644
--- a/app/[lang]/(resources)/_components/ResourceHeader.tsx
+++ b/app/[lang]/(resources)/_components/ResourceHeader.tsx
@@ -25,21 +25,21 @@ import {cl} from '@/app/[lang]/_utils/cl'
 import type {ReactNode} from 'react'
 
 type TResourceHeaderProps = {
-	title: string;
-	description: string;
-	items: string[];
+	title: string
+	description: string
+	items: string[]
 	ctaButton?: {
-		text: string;
-		url: string;
-	};
-	className?: string;
-	titlePrefix?: string;
-	hasLogo?: boolean;
-	logoUrl?: string;
-	logoWidth?: number;
-	logoHeight?: number;
-	logoAlt?: string;
-};
+		text: string
+		url: string
+	}
+	className?: string
+	titlePrefix?: string
+	hasLogo?: boolean
+	logoUrl?: string
+	logoWidth?: number
+	logoHeight?: number
+	logoAlt?: string
+}
 
 export function ResourceHeader({
 	title,
diff --git a/app/[lang]/(resources)/_components/ResourceHero.tsx b/app/[lang]/(resources)/_components/ResourceHero.tsx
index bd45721..3ef0a8b 100644
--- a/app/[lang]/(resources)/_components/ResourceHero.tsx
+++ b/app/[lang]/(resources)/_components/ResourceHero.tsx
@@ -23,16 +23,16 @@ import {cl} from '@/app/[lang]/_utils/cl'
 import type {ReactNode} from 'react'
 
 type TResourceHeroProps = {
-	imageSrc: string;
-	imageAlt: string;
-	className?: string;
-	logoSrc?: string;
-	logoAlt?: string;
-	logoWidth?: number;
-	logoHeight?: number;
-	logoPosition?: 'left' | 'center' | 'right';
-	priority?: boolean;
-};
+	imageSrc: string
+	imageAlt: string
+	className?: string
+	logoSrc?: string
+	logoAlt?: string
+	logoWidth?: number
+	logoHeight?: number
+	logoPosition?: 'left' | 'center' | 'right'
+	priority?: boolean
+}
 
 export function ResourceHero({
 	imageSrc,
diff --git a/app/[lang]/(resources)/_components/SupportArticleList.tsx b/app/[lang]/(resources)/_components/SupportArticleList.tsx
index ce9a4c9..33496b5 100644
--- a/app/[lang]/(resources)/_components/SupportArticleList.tsx
+++ b/app/[lang]/(resources)/_components/SupportArticleList.tsx
@@ -36,14 +36,14 @@ import type {TSupportArticle} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TSupportArticleListProps = {
-	pageSize?: number;
-	sort?: 'asc' | 'desc';
-	initialPage?: number;
-	populateContent?: boolean;
-	cacheArticles?: boolean;
-	emptyMessage?: string;
-	gridClassName?: string;
-};
+	pageSize?: number
+	sort?: 'asc' | 'desc'
+	initialPage?: number
+	populateContent?: boolean
+	cacheArticles?: boolean
+	emptyMessage?: string
+	gridClassName?: string
+}
 
 export function SupportArticleList({
 	pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
diff --git a/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx b/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
index e8dbae5..37869b1 100644
--- a/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
+++ b/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
@@ -6,8 +6,8 @@ import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
 import type {ReactNode} from 'react'
 
 type TSupportArticleListSkeletonProps = {
-	pageSize?: number;
-};
+	pageSize?: number
+}
 
 export function SupportArticleListSkeleton({pageSize = 6}: TSupportArticleListSkeletonProps): ReactNode {
 	return (
diff --git a/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx b/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx
index 8120956..eb206fd 100644
--- a/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx
+++ b/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx
@@ -4,10 +4,10 @@ import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
 import type {ReactNode} from 'react'
 
 type THeaderData = {
-	title: string;
-	description: string;
-	items: string[];
-};
+	title: string
+	description: string
+	items: string[]
+}
 export function SupportedWalletHeader(data: THeaderData): ReactNode {
 	return (
 		<section className={'flex flex-col items-center'}>
diff --git a/app/[lang]/(resources)/_components/WalletList.tsx b/app/[lang]/(resources)/_components/WalletList.tsx
index 677fd32..681db32 100644
--- a/app/[lang]/(resources)/_components/WalletList.tsx
+++ b/app/[lang]/(resources)/_components/WalletList.tsx
@@ -22,11 +22,11 @@ import {ResourceGrid} from './ResourceGrid'
 import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
 
 type TWalletListProps = {
-	wallets: TSupportedWalletData[] | null;
-	isLoading?: boolean;
-	className?: string;
-	isSearchQuery?: boolean;
-};
+	wallets: TSupportedWalletData[] | null
+	isLoading?: boolean
+	className?: string
+	isSearchQuery?: boolean
+}
 
 export function WalletList({wallets, isLoading, className, isSearchQuery}: TWalletListProps): JSX.Element {
 	return (
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx
index 059006d..cf805d4 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx
@@ -3,7 +3,7 @@ import {notFound} from 'next/navigation'
 import {ListOfPosts} from '@/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts'
 
 export default async function BlogCategoriesPage(props: {
-	params: Promise<{category: string}>;
+	params: Promise<{category: string}>
 }): Promise<React.ReactNode> {
 	const {category} = await props.params
 	const data = await fetch(
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx b/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx
index 24bb280..4f2443f 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx
@@ -3,8 +3,8 @@ import {BlogNav} from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogNav'
 import {BlogTitle} from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle'
 
 export default async function BlogPageLayout(props: {
-	children: React.ReactNode;
-	params: Promise<{category: string}>;
+	children: React.ReactNode
+	params: Promise<{category: string}>
 }): Promise<React.ReactNode> {
 	await props.params
 
diff --git a/app/[lang]/(resources)/blog/README.md b/app/[lang]/(resources)/blog/README.md
index 3607abc..9eb9600 100644
--- a/app/[lang]/(resources)/blog/README.md
+++ b/app/[lang]/(resources)/blog/README.md
@@ -5,20 +5,20 @@ This directory contains the blog section of the ShapeShift website, featuring bl
 ## Directory Structure
 
 - **(withNavigation)/**: Blog pages that include navigation elements
-  - **BlogBreadcrumb.tsx**: Breadcrumb navigation for blog
-  - **BlogNav.tsx**: Main navigation for blog section
-  - **BlogTitle.tsx**: Title component for blog section
-  - **categories/**: Category-based blog post filtering
-    - **[category]/**: Dynamic routes for individual categories
-  - **tags/**: Tag-based blog post filtering
-    - **[tag]/**: Dynamic routes for individual tags
-  - **layout.tsx**: Layout for blog pages with navigation
-  - **page.tsx**: Main blog landing page
+    - **BlogBreadcrumb.tsx**: Breadcrumb navigation for blog
+    - **BlogNav.tsx**: Main navigation for blog section
+    - **BlogTitle.tsx**: Title component for blog section
+    - **categories/**: Category-based blog post filtering
+        - **[category]/**: Dynamic routes for individual categories
+    - **tags/**: Tag-based blog post filtering
+        - **[tag]/**: Dynamic routes for individual tags
+    - **layout.tsx**: Layout for blog pages with navigation
+    - **page.tsx**: Main blog landing page
 - **[slug]/**: Individual blog post pages
-  - **BlogContent.tsx**: Component for rendering blog post content
-  - **BlogSkeleton.tsx**: Loading skeleton for blog posts
-  - **layout.tsx**: Layout for individual blog posts
-  - **page.tsx**: Page component for individual blog posts
+    - **BlogContent.tsx**: Component for rendering blog post content
+    - **BlogSkeleton.tsx**: Loading skeleton for blog posts
+    - **layout.tsx**: Layout for individual blog posts
+    - **page.tsx**: Page component for individual blog posts
 
 ## Features
 
@@ -51,4 +51,4 @@ This directory contains the blog section of the ShapeShift website, featuring bl
 - Test loading states and error handling
 - Consider performance optimizations for image-heavy blog posts
 - Ensure responsive design works across all device sizes
-- Preserve consistent typography and styling
\ No newline at end of file
+- Preserve consistent typography and styling
diff --git a/app/[lang]/(resources)/blog/[slug]/layout.tsx b/app/[lang]/(resources)/blog/[slug]/layout.tsx
index 6cfdc20..967cf20 100644
--- a/app/[lang]/(resources)/blog/[slug]/layout.tsx
+++ b/app/[lang]/(resources)/blog/[slug]/layout.tsx
@@ -1,5 +1,7 @@
 import {notFound} from 'next/navigation'
 
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+
 import type {Metadata} from 'next'
 
 /************************************************************************************************
@@ -47,12 +49,12 @@ export async function generateMetadata({params}: {params: Promise<{slug: string}
 	if (imageUrl) {
 		metadata.openGraph!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 		metadata.twitter!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 	}
diff --git a/app/[lang]/(resources)/chains/README.md b/app/[lang]/(resources)/chains/README.md
index 66be42a..82bdb86 100644
--- a/app/[lang]/(resources)/chains/README.md
+++ b/app/[lang]/(resources)/chains/README.md
@@ -5,7 +5,7 @@ This directory contains pages that showcase and document the blockchain networks
 ## Directory Structure
 
 - **[slug]/**: Dynamic routes for individual chain pages
-  - **page.tsx**: Page component for individual chain details
+    - **page.tsx**: Page component for individual chain details
 - **layout.tsx**: Layout component for all supported chains pages
 - **loading.tsx**: Loading state component for supported chains pages
 - **page.tsx**: Main supported chains landing page
@@ -52,4 +52,4 @@ The chain pages utilize specialized components from the `_components` directory:
 - Optimize for both technical and non-technical audiences
 - Consider performance when loading chain-specific resources
 - Ensure all chain information is properly categorized and searchable
-- Update content when chain support details change
\ No newline at end of file
+- Update content when chain support details change
diff --git a/app/[lang]/(resources)/chains/[slug]/page.tsx b/app/[lang]/(resources)/chains/[slug]/page.tsx
index 5feb84d..f29bd0f 100644
--- a/app/[lang]/(resources)/chains/[slug]/page.tsx
+++ b/app/[lang]/(resources)/chains/[slug]/page.tsx
@@ -7,7 +7,7 @@ import {ChainDescription} from '@/app/[lang]/_components/strapi/templates/ChainD
 import {ChainFeatures} from '@/app/[lang]/_components/strapi/templates/ChainFeatures'
 import {ChainHeader} from '@/app/[lang]/_components/strapi/templates/ChainHeader'
 import {ChainHero} from '@/app/[lang]/_components/strapi/templates/ChainHero'
-import {getSupportedChain} from '@/app/[lang]/_utils/query'
+import {getStrapiImageUrl, getSupportedChain} from '@/app/[lang]/_utils/query'
 
 import type {TSupportedChainData} from '@/app/[lang]/_components/strapi/types'
 import type {Metadata} from 'next'
@@ -53,12 +53,12 @@ export async function generateMetadata({params}: {params: Promise<{slug: string}
 	if (imageUrl) {
 		metadata.openGraph!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 		metadata.twitter!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 	}
@@ -90,7 +90,7 @@ export default async function ChainPage({params}: {params: Promise<{slug: string
 
 				<div className={'mb-20 mt-16 lg:mb-60'}>
 					<ChainHero
-						url={`${process.env.NEXT_PUBLIC_STRAPI_URL}${chain?.featuredImg?.url}`}
+						url={getStrapiImageUrl(chain?.featuredImg?.url)}
 						name={chain?.name}
 						width={chain?.featuredImg?.width}
 						height={chain?.featuredImg?.height}
diff --git a/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx b/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx
index 592fc9a..2cee8fb 100644
--- a/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx
+++ b/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx
@@ -12,8 +12,8 @@ import type {TSupportedChainData, TSupportedChainTypes} from '@/app/[lang]/_comp
 import type {ReactNode} from 'react'
 
 type TChainSearchWrapperProps = {
-	chains: TSupportedChainData[];
-};
+	chains: TSupportedChainData[]
+}
 
 /**************************************************************************************************
  ** ChainSearchWrapper Component
diff --git a/app/[lang]/(resources)/discover/README.md b/app/[lang]/(resources)/discover/README.md
index b3ecf6c..1a19e57 100644
--- a/app/[lang]/(resources)/discover/README.md
+++ b/app/[lang]/(resources)/discover/README.md
@@ -5,7 +5,7 @@ This directory contains pages that showcase ShapeShift's features, products, and
 ## Directory Structure
 
 - **[slug]/**: Dynamic routes for individual discover feature pages
-  - **page.tsx**: Page component for individual feature details
+    - **page.tsx**: Page component for individual feature details
 - **layout.tsx**: Layout component shared across all discover pages
 - **loading.tsx**: Loading state component for discover pages
 - **page.tsx**: Main discover landing/index page
@@ -55,4 +55,4 @@ The discover pages utilize specialized components:
 - Provide clear calls-to-action for users to try featured functionality
 - Consider performance when implementing interactive features
 - Maintain a logical progression between related discover pages
-- Update content regularly to reflect new platform capabilities
\ No newline at end of file
+- Update content regularly to reflect new platform capabilities
diff --git a/app/[lang]/(resources)/discover/[slug]/page.tsx b/app/[lang]/(resources)/discover/[slug]/page.tsx
index 19e95b7..19dd679 100644
--- a/app/[lang]/(resources)/discover/[slug]/page.tsx
+++ b/app/[lang]/(resources)/discover/[slug]/page.tsx
@@ -24,6 +24,7 @@ import {ResourceHero} from '@/app/[lang]/(resources)/_components/ResourceHero'
 import {DEFAULT_FEATURES} from '@/app/[lang]/(resources)/_utils/constants'
 import {fetchDiscoverBySlug} from '@/app/[lang]/(resources)/_utils/fetchUtils'
 import {Banner} from '@/app/[lang]/_components/Banner'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {Metadata} from 'next'
 import type {ReactNode} from 'react'
@@ -67,12 +68,12 @@ export async function generateMetadata({params}: {params: Promise<{slug: string}
 	if (imageUrl) {
 		metadata.openGraph!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 		metadata.twitter!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 	}
@@ -100,7 +101,7 @@ export default async function DiscoverDetailPage({params}: {params: Promise<{slu
 		description: feature.description,
 		image: feature.image
 			? {
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${feature.image.url}`,
+					url: getStrapiImageUrl(feature.image.url),
 					width: feature.image.width,
 					height: feature.image.height,
 					alt: feature.title
@@ -132,7 +133,7 @@ export default async function DiscoverDetailPage({params}: {params: Promise<{slu
 				<ResourceHero
 					imageSrc={'/wallets/hero.jpg'}
 					imageAlt={`${discover.title} banner image`}
-					logoSrc={`${process.env.NEXT_PUBLIC_STRAPI_URL}${discover.featuredImg.url}`}
+					logoSrc={getStrapiImageUrl(discover.featuredImg.url)}
 					logoAlt={discover.title}
 					logoWidth={discover.featuredImg.width}
 					logoHeight={discover.featuredImg.height}
diff --git a/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx b/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx
index 7f09174..7a8cc2d 100644
--- a/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx
+++ b/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx
@@ -9,8 +9,8 @@ import type {TDiscoverData} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TDiscoverSearchWrapperProps = {
-	discover: TDiscoverData[] | null;
-};
+	discover: TDiscoverData[] | null
+}
 
 /**************************************************************************************************
  ** DiscoverSearchWrapper Component
diff --git a/app/[lang]/(resources)/faq/README.md b/app/[lang]/(resources)/faq/README.md
index 0da2fb9..faad493 100644
--- a/app/[lang]/(resources)/faq/README.md
+++ b/app/[lang]/(resources)/faq/README.md
@@ -29,9 +29,9 @@ The FAQ section likely organizes content into categories such as:
 
 ## Technical Implementation
 
-- Utilizes specialized components from the _components directory:
-  - **FAQContent.tsx**: For rendering the actual FAQ content
-  - **FAQNavigation.tsx**: For category navigation
+- Utilizes specialized components from the \_components directory:
+    - **FAQContent.tsx**: For rendering the actual FAQ content
+    - **FAQNavigation.tsx**: For category navigation
 - Likely implements collapsible/expandable question sections
 - May integrate with a CMS for content management
 - Implements responsive design for all device sizes
@@ -54,4 +54,4 @@ The FAQ section likely organizes content into categories such as:
 - Ensure responsive behavior for all device sizes
 - Optimize for readability and easy scanning
 - Provide links to more detailed resources where appropriate
-- Consider implementing user feedback mechanism for FAQ usefulness
\ No newline at end of file
+- Consider implementing user feedback mechanism for FAQ usefulness
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
index c5981b9..8153843 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
@@ -3,7 +3,7 @@ import {notFound} from 'next/navigation'
 import {ListOfPosts} from '@/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts'
 
 export default async function BlogCategoriesPage(props: {
-	params: Promise<{category: string}>;
+	params: Promise<{category: string}>
 }): Promise<React.ReactNode> {
 	const {category} = await props.params
 	const data = await fetch(
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
index 2491bbd..7cc4f1c 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
@@ -3,8 +3,8 @@ import {NewsroomNav} from '@/app/[lang]/(resources)/_components/NewsroomNav'
 import {NewsroomTitle} from '@/app/[lang]/(resources)/_components/NewsroomTitle'
 
 export default async function BlogPageLayout(props: {
-	children: React.ReactNode;
-	params: Promise<{category: string}>;
+	children: React.ReactNode
+	params: Promise<{category: string}>
 }): Promise<React.ReactNode> {
 	await props.params
 
diff --git a/app/[lang]/(resources)/newsroom/README.md b/app/[lang]/(resources)/newsroom/README.md
index 4e6220f..35b0228 100644
--- a/app/[lang]/(resources)/newsroom/README.md
+++ b/app/[lang]/(resources)/newsroom/README.md
@@ -5,15 +5,15 @@ This directory contains the newsroom section of the ShapeShift website, featurin
 ## Directory Structure
 
 - **(withNavigation)/**: Newsroom pages that include navigation elements
-  - **categories/**: Category-based news filtering
-    - **[category]/**: Dynamic routes for news categories
-  - **tags/**: Tag-based news filtering
-    - **[tag]/**: Dynamic routes for news tags
-  - **layout.tsx**: Layout for newsroom pages with navigation
-  - **page.tsx**: Main newsroom landing page
+    - **categories/**: Category-based news filtering
+        - **[category]/**: Dynamic routes for news categories
+    - **tags/**: Tag-based news filtering
+        - **[tag]/**: Dynamic routes for news tags
+    - **layout.tsx**: Layout for newsroom pages with navigation
+    - **page.tsx**: Main newsroom landing page
 - **[slug]/**: Individual news post pages
-  - **layout.tsx**: Layout for individual news posts
-  - **page.tsx**: Page component for individual news posts
+    - **layout.tsx**: Layout for individual news posts
+    - **page.tsx**: Page component for individual news posts
 
 ## Features
 
@@ -28,10 +28,10 @@ This directory contains the newsroom section of the ShapeShift website, featurin
 - Uses Next.js dynamic routing for categories, tags, and post slugs
 - Implements dedicated layout for consistent newsroom section UI
 - Shares structure similar to the blog section but with news-specific content
-- Utilizes components from the _components directory:
-  - **NewsroomBreadcrumb.tsx**: Breadcrumb navigation for newsroom
-  - **NewsroomNav.tsx**: Main navigation for newsroom section
-  - **NewsroomTitle.tsx**: Title component for newsroom content
+- Utilizes components from the \_components directory:
+    - **NewsroomBreadcrumb.tsx**: Breadcrumb navigation for newsroom
+    - **NewsroomNav.tsx**: Main navigation for newsroom section
+    - **NewsroomTitle.tsx**: Title component for newsroom content
 
 ## Content Types
 
@@ -61,4 +61,4 @@ The newsroom likely contains various types of content:
 - Implement proper loading states for content fetching
 - Optimize images for faster loading
 - Maintain mobile-responsive design
-- Keep navigation intuitive for browsing news archives
\ No newline at end of file
+- Keep navigation intuitive for browsing news archives
diff --git a/app/[lang]/(resources)/newsroom/[slug]/layout.tsx b/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
index 7ff220e..2813d0b 100644
--- a/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
+++ b/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
@@ -1,5 +1,7 @@
 import {notFound} from 'next/navigation'
 
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+
 import type {Metadata} from 'next'
 
 /************************************************************************************************
@@ -47,12 +49,12 @@ export async function generateMetadata({params}: {params: Promise<{slug: string}
 	if (imageUrl) {
 		metadata.openGraph!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 		metadata.twitter!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 	}
diff --git a/app/[lang]/(resources)/protocols/README.md b/app/[lang]/(resources)/protocols/README.md
index 9f98a10..005173f 100644
--- a/app/[lang]/(resources)/protocols/README.md
+++ b/app/[lang]/(resources)/protocols/README.md
@@ -5,7 +5,7 @@ This directory contains pages that showcase and document the DeFi protocols inte
 ## Directory Structure
 
 - **[slug]/**: Dynamic routes for individual protocol pages
-  - **page.tsx**: Page component for individual protocol details
+    - **page.tsx**: Page component for individual protocol details
 - **layout.tsx**: Layout component for all supported protocols pages
 - **loading.tsx**: Loading state component for supported protocols pages
 - **page.tsx**: Main supported protocols landing page
@@ -59,4 +59,4 @@ The protocol pages utilize specialized components from the `_components` directo
 - Ensure all protocol information is properly categorized and searchable
 - Update content when protocol integrations change or are enhanced
 - Coordinate with protocol teams for accurate representation
-- Include relevant risk disclosures where appropriate
\ No newline at end of file
+- Include relevant risk disclosures where appropriate
diff --git a/app/[lang]/(resources)/protocols/[slug]/page.tsx b/app/[lang]/(resources)/protocols/[slug]/page.tsx
index 9bfb712..d291b26 100644
--- a/app/[lang]/(resources)/protocols/[slug]/page.tsx
+++ b/app/[lang]/(resources)/protocols/[slug]/page.tsx
@@ -6,7 +6,7 @@ import {ProtocolEasier} from '@/app/[lang]/(resources)/_components/ProtocolEasie
 import {ProtocolFeatures} from '@/app/[lang]/(resources)/_components/ProtocolFeatures'
 import {ProtocolHeader} from '@/app/[lang]/(resources)/_components/ProtocolHeader'
 import {Banner} from '@/app/[lang]/_components/Banner'
-import {getSupportedProtocol} from '@/app/[lang]/_utils/query'
+import {getStrapiImageUrl, getSupportedProtocol} from '@/app/[lang]/_utils/query'
 
 import type {TSupportedProtocolData} from '@/app/[lang]/_components/strapi/types'
 import type {Metadata} from 'next'
@@ -53,12 +53,12 @@ export async function generateMetadata({params}: {params: Promise<{slug: string}
 	if (imageUrl) {
 		metadata.openGraph!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 		metadata.twitter!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 	}
@@ -90,7 +90,7 @@ export default async function ProtocolPage({params}: {params: Promise<{slug: str
 					name={protocol?.name}
 					description={protocol?.description}
 					items={['Self-custodial', 'Private', 'Multichain trading']}
-					url={`${process.env.NEXT_PUBLIC_STRAPI_URL}${protocol?.featuredImg?.url}`}
+					url={getStrapiImageUrl(protocol?.featuredImg?.url)}
 					width={protocol?.featuredImg?.width}
 					height={protocol?.featuredImg?.height}
 				/>
diff --git a/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx b/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx
index 804b105..e07184a 100644
--- a/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx
+++ b/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx
@@ -27,8 +27,8 @@ import type {ReactNode} from 'react'
  ** @property {TSupportedProtocolData[]} protocols - Array of protocol data to be displayed and filtered
  *************************************************************************************************/
 type TProtocolSearchWrapperProps = {
-	protocols: TSupportedProtocolData[];
-};
+	protocols: TSupportedProtocolData[]
+}
 
 /**************************************************************************************************
  ** ProtocolSearchWrapper Component
diff --git a/app/[lang]/(resources)/wallets/README.md b/app/[lang]/(resources)/wallets/README.md
index 31f3473..b7496ed 100644
--- a/app/[lang]/(resources)/wallets/README.md
+++ b/app/[lang]/(resources)/wallets/README.md
@@ -5,7 +5,7 @@ This directory contains pages that showcase and document the cryptocurrency wall
 ## Directory Structure
 
 - **[slug]/**: Dynamic routes for individual wallet pages
-  - **page.tsx**: Page component for individual wallet details
+    - **page.tsx**: Page component for individual wallet details
 - **layout.tsx**: Layout component for all supported wallets pages
 - **loading.tsx**: Loading state component for supported wallets pages
 - **page.tsx**: Main supported wallets landing page
@@ -59,4 +59,4 @@ The wallet pages utilize specialized components from the `_components` directory
 - Ensure all wallet information is properly categorized and searchable
 - Update content when wallet support changes or is enhanced
 - Coordinate with wallet development teams for accurate representation
-- Include troubleshooting tips for common connection issues
\ No newline at end of file
+- Include troubleshooting tips for common connection issues
diff --git a/app/[lang]/(resources)/wallets/[slug]/page.tsx b/app/[lang]/(resources)/wallets/[slug]/page.tsx
index 23e1d9f..0a45ee5 100644
--- a/app/[lang]/(resources)/wallets/[slug]/page.tsx
+++ b/app/[lang]/(resources)/wallets/[slug]/page.tsx
@@ -5,7 +5,7 @@ import {SupportedWalletHeader} from '@/app/[lang]/(resources)/_components/Suppor
 import {SupportedWalletHero} from '@/app/[lang]/(resources)/_components/SupportedWalletHero'
 import {Banner} from '@/app/[lang]/_components/Banner'
 import {StrapiFAQ} from '@/app/[lang]/_components/StrapiFAQ'
-import {getSupportedWallet} from '@/app/[lang]/_utils/query'
+import {getStrapiImageUrl, getSupportedWallet} from '@/app/[lang]/_utils/query'
 
 import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
 import type {Metadata} from 'next'
@@ -51,12 +51,12 @@ export async function generateMetadata({params}: {params: Promise<{slug: string}
 	if (imageUrl) {
 		metadata.openGraph!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 		metadata.twitter!.images = [
 			{
-				url: `${process.env.NEXT_PUBLIC_STRAPI_URL}${imageUrl}`
+				url: getStrapiImageUrl(imageUrl)
 			}
 		]
 	}
@@ -77,7 +77,7 @@ export default async function WalletPage({params}: {params: Promise<{slug: strin
 			<div className={'container mt-[60px] flex flex-col justify-center'}>
 				<div className={'mb-12'}>
 					<SupportedWalletHero
-						url={`${process.env.NEXT_PUBLIC_STRAPI_URL}${wallet?.featuredImg?.url}`}
+						url={getStrapiImageUrl(wallet?.featuredImg?.url)}
 						name={wallet?.name}
 						width={wallet?.featuredImg?.width}
 						height={wallet?.featuredImg?.height}
diff --git a/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx b/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx
index e55f7de..3b01e99 100644
--- a/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx
+++ b/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx
@@ -10,8 +10,8 @@ import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TWalletSearchWrapperProps = {
-	wallets: TSupportedWalletData[];
-};
+	wallets: TSupportedWalletData[]
+}
 
 export function WalletSearchWrapper({wallets}: TWalletSearchWrapperProps): ReactNode {
 	const [filteredWallets, setFilteredWallets] = useState(wallets)
diff --git a/app/[lang]/(terms)/README.md b/app/[lang]/(terms)/README.md
index 0bf5d02..319ae7f 100644
--- a/app/[lang]/(terms)/README.md
+++ b/app/[lang]/(terms)/README.md
@@ -4,12 +4,12 @@ This directory contains legal documents and terms-related pages for the ShapeShi
 
 ## Directory Structure
 
-- **_components/**: Shared components used for displaying legal content
-  - `TermsAccordion.tsx`: Collapsible sections for terms content
-  - `TermsMarkdown.tsx`: Component for rendering markdown legal content
-  - `TermsPage.tsx`: Layout template for all terms pages
-  - `terms.module.css`: Specific styling for terms content
-  - `utils.ts`: Helper functions for terms pages
+- **\_components/**: Shared components used for displaying legal content
+    - `TermsAccordion.tsx`: Collapsible sections for terms content
+    - `TermsMarkdown.tsx`: Component for rendering markdown legal content
+    - `TermsPage.tsx`: Layout template for all terms pages
+    - `terms.module.css`: Specific styling for terms content
+    - `utils.ts`: Helper functions for terms pages
 - **privacy-policy/**: Privacy policy page
 - **terms-of-service/**: Terms of service page
 - **error.tsx**: Error handling for terms pages
@@ -19,6 +19,7 @@ This directory contains legal documents and terms-related pages for the ShapeShi
 ## Route Convention
 
 The parentheses in the directory name `(terms)` indicate a route group in Next.js. This means:
+
 - The folder name itself doesn't affect URL paths
 - All pages inside share UI layouts and features
 - It keeps related legal content organized without affecting the URL structure
@@ -26,6 +27,7 @@ The parentheses in the directory name `(terms)` indicate a route group in Next.j
 ## Content Rendering
 
 The components in this directory are designed to:
+
 - Present legal content in a clean, readable format
 - Support markdown formatting for easy content updates
 - Provide consistent styling across all legal documents
@@ -44,4 +46,4 @@ The components in this directory are designed to:
 - Ensure all legal pages share consistent structure
 - Test thoroughly after any changes to legal document components
 - Coordinate with legal team before updating content
-- Preserve proper heading hierarchy for accessibility
\ No newline at end of file
+- Preserve proper heading hierarchy for accessibility
diff --git a/app/[lang]/(terms)/_components/README.md b/app/[lang]/(terms)/_components/README.md
index b628579..b355bc7 100644
--- a/app/[lang]/(terms)/_components/README.md
+++ b/app/[lang]/(terms)/_components/README.md
@@ -57,4 +57,4 @@ The `terms.module.css` file contains specialized styles that:
 - Provide proper spacing for dense content
 - Style the accordion components appropriately
 - Ensure responsive behavior
-- Maintain consistent typography throughout legal documents
\ No newline at end of file
+- Maintain consistent typography throughout legal documents
diff --git a/app/[lang]/(terms)/_components/TermsPage.tsx b/app/[lang]/(terms)/_components/TermsPage.tsx
index 6deab7a..7c4a1fb 100644
--- a/app/[lang]/(terms)/_components/TermsPage.tsx
+++ b/app/[lang]/(terms)/_components/TermsPage.tsx
@@ -18,9 +18,9 @@ import type {Metadata} from 'next'
 import type {ReactNode} from 'react'
 
 type TTermsPageProps = {
-	title: string;
-	items: TTermsItemData[];
-};
+	title: string
+	items: TTermsItemData[]
+}
 
 /**************************************************************************************************
  * Helper function to create dynamic metadata based on title
diff --git a/app/[lang]/(terms)/error.tsx b/app/[lang]/(terms)/error.tsx
index 682a734..1893075 100644
--- a/app/[lang]/(terms)/error.tsx
+++ b/app/[lang]/(terms)/error.tsx
@@ -14,9 +14,9 @@ import {Button} from '@/app/[lang]/_components/Button'
 import type {ReactNode} from 'react'
 
 type TErrorProps = {
-	error: Error & {digest?: string};
-	reset: () => void;
-};
+	error: Error & {digest?: string}
+	reset: () => void
+}
 
 export default function TermsError({error, reset}: TErrorProps): ReactNode {
 	useEffect(() => {
diff --git a/app/[lang]/(terms)/layout.tsx b/app/[lang]/(terms)/layout.tsx
index 1fe61e2..1a2b019 100644
--- a/app/[lang]/(terms)/layout.tsx
+++ b/app/[lang]/(terms)/layout.tsx
@@ -25,8 +25,8 @@ export const metadata: Metadata = {
 }
 
 type TTermsLayoutProps = {
-	children: ReactNode;
-};
+	children: ReactNode
+}
 
 export default function TermsLayout({children}: TTermsLayoutProps): ReactNode {
 	return (
diff --git a/app/[lang]/_components/AnimatedHeight.tsx b/app/[lang]/_components/AnimatedHeight.tsx
index 33fb18b..e7dd91d 100644
--- a/app/[lang]/_components/AnimatedHeight.tsx
+++ b/app/[lang]/_components/AnimatedHeight.tsx
@@ -6,9 +6,9 @@ import {cl} from '@/app/[lang]/_utils/cl'
 import type React from 'react'
 
 type TAnimateChangeInHeightProps = {
-	children: React.ReactNode;
-	className?: string;
-};
+	children: React.ReactNode
+	className?: string
+}
 
 /********************************************************************************************
  * Animated Height Component
diff --git a/app/[lang]/_components/BlogPost.tsx b/app/[lang]/_components/BlogPost.tsx
index 413f11e..1534f03 100644
--- a/app/[lang]/_components/BlogPost.tsx
+++ b/app/[lang]/_components/BlogPost.tsx
@@ -1,6 +1,8 @@
 import Image from 'next/image'
 import {useMemo} from 'react'
 
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+
 import {LocalizedLink} from './LocalizedLink'
 import {cl} from '../_utils/cl'
 
@@ -67,7 +69,7 @@ function FeaturedPost({post, className}: {post: TBlogPost; className?: string}):
 				className={'no-translate col-span-1 size-full max-h-[316px] max-w-[632px] overflow-hidden rounded-2xl'}>
 				{post?.featuredImg?.url ? (
 					<Image
-						src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${post?.featuredImg.url}`}
+						src={getStrapiImageUrl(post?.featuredImg.url)}
 						alt={post.slug}
 						width={post?.featuredImg.width ?? 0}
 						height={post?.featuredImg.height ?? 0}
@@ -120,7 +122,7 @@ function PostCard({post, className}: {post: TBlogPost; className?: string}): Rea
 			<div className={'h-[204px] max-w-[408px] overflow-hidden rounded-2xl'}>
 				{post?.featuredImg?.url ? (
 					<Image
-						src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${post?.featuredImg?.url}`}
+						src={getStrapiImageUrl(post?.featuredImg?.url)}
 						alt={post.slug}
 						width={post?.featuredImg?.width ?? 0}
 						height={post?.featuredImg?.height ?? 0}
diff --git a/app/[lang]/_components/Button.tsx b/app/[lang]/_components/Button.tsx
index e33e39d..2900cc0 100644
--- a/app/[lang]/_components/Button.tsx
+++ b/app/[lang]/_components/Button.tsx
@@ -4,16 +4,16 @@ import {cl} from '../_utils/cl'
 
 import type {ReactNode} from 'react'
 
-type TButtonVariant = 'blue' | 'white';
+type TButtonVariant = 'blue' | 'white'
 
 type TButtonProps = {
-	title?: string;
-	variant?: TButtonVariant;
-	className?: string;
-	onClick?: () => void;
-	href?: string;
-	hasArrow?: boolean;
-};
+	title?: string
+	variant?: TButtonVariant
+	className?: string
+	onClick?: () => void
+	href?: string
+	hasArrow?: boolean
+}
 
 export function Button(props: TButtonProps): ReactNode {
 	const {variant = 'blue', hasArrow = false, ...rest} = props
diff --git a/app/[lang]/_components/Carousel.tsx b/app/[lang]/_components/Carousel.tsx
index 8709ee5..67ca52f 100644
--- a/app/[lang]/_components/Carousel.tsx
+++ b/app/[lang]/_components/Carousel.tsx
@@ -33,14 +33,14 @@ import type {ReactNode} from 'react'
 
 type TCarouselProps = React.HTMLAttributes<HTMLDivElement> & {
 	/** The content to be displayed in the carousel */
-	children: React.ReactNode;
+	children: React.ReactNode
 	/** Whether to pause the animation when hovering over the carousel */
-	pauseOnHover?: boolean;
+	pauseOnHover?: boolean
 	/** The direction in which the carousel should scroll */
-	direction?: 'left' | 'right';
+	direction?: 'left' | 'right'
 	/** The speed of the carousel animation in seconds (lower = faster) */
-	speed?: number;
-};
+	speed?: number
+}
 
 export function Carousel({
 	children,
diff --git a/app/[lang]/_components/ChainsBanner.tsx b/app/[lang]/_components/ChainsBanner.tsx
index a4f3d30..bf17af3 100644
--- a/app/[lang]/_components/ChainsBanner.tsx
+++ b/app/[lang]/_components/ChainsBanner.tsx
@@ -7,11 +7,11 @@ import {cl} from '../_utils/cl'
 import type {ReactNode} from 'react'
 
 type TChainsBanner = {
-	tag: string;
-	title: string;
-	href: string;
-	buttonText: string;
-};
+	tag: string
+	title: string
+	href: string
+	buttonText: string
+}
 
 export function ChainsBanner(data: TChainsBanner): ReactNode {
 	return (
diff --git a/app/[lang]/_components/ChatwootWidget.tsx b/app/[lang]/_components/ChatwootWidget.tsx
index de27468..916a6c3 100644
--- a/app/[lang]/_components/ChatwootWidget.tsx
+++ b/app/[lang]/_components/ChatwootWidget.tsx
@@ -8,23 +8,23 @@ import type {ReactElement} from 'react'
 
 type SecureMessageEvent = {
 	data: {
-		type?: string;
-		eventName?: string;
-		config?: Record<string, string | number | boolean>;
-		payload?: Record<string, string | number | boolean>;
-	};
-} & MessageEvent;
+		type?: string
+		eventName?: string
+		config?: Record<string, string | number | boolean>
+		payload?: Record<string, string | number | boolean>
+	}
+} & MessageEvent
 
 declare global {
 	// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 	interface Window {
 		chatwootSDK?: {
-			run: (config: {websiteToken: string; baseUrl: string}) => void;
-			isLoaded?: boolean;
-		};
+			run: (config: {websiteToken: string; baseUrl: string}) => void
+			isLoaded?: boolean
+		}
 		$chatwoot?: {
-			reset?: () => void;
-		};
+			reset?: () => void
+		}
 	}
 }
 
diff --git a/app/[lang]/_components/Dropdown.tsx b/app/[lang]/_components/Dropdown.tsx
index 1fa3688..fcea10a 100644
--- a/app/[lang]/_components/Dropdown.tsx
+++ b/app/[lang]/_components/Dropdown.tsx
@@ -10,12 +10,12 @@ import {IconChevron} from '../_icons/IconChevron'
 import type {ReactNode} from 'react'
 
 type TDropdownProps = {
-	options: string[];
-	value: string;
-	onChangeAction: (value: string) => void;
-	className?: string;
-	allItemsLabel?: string;
-};
+	options: string[]
+	value: string
+	onChangeAction: (value: string) => void
+	className?: string
+	allItemsLabel?: string
+}
 
 /**************************************************************************************************
  ** Dropdown Component
diff --git a/app/[lang]/_components/ElementCard.tsx b/app/[lang]/_components/ElementCard.tsx
index 562b498..b98994d 100644
--- a/app/[lang]/_components/ElementCard.tsx
+++ b/app/[lang]/_components/ElementCard.tsx
@@ -5,23 +5,24 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 import {cl} from '@/app/[lang]/_utils/cl'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {ReactNode} from 'react'
 
 const MotionLink = motion(Link)
 
 type TElementCardProps = {
-	slug: string;
-	title: string;
-	description: string;
+	slug: string
+	title: string
+	description: string
 	featuredImg: {
-		url: string;
-		width: number;
-		height: number;
-	};
-	baseURL: string;
-	position: 'center' | 'bottom';
-};
+		url: string
+		width: number
+		height: number
+	}
+	baseURL: string
+	position: 'center' | 'bottom'
+}
 
 export function ElementCard(props: TElementCardProps): ReactNode {
 	const {slug, title, description, featuredImg, baseURL, position} = props
@@ -54,7 +55,7 @@ export function ElementCard(props: TElementCardProps): ReactNode {
 						transition={{duration: 0.5}}
 						className={'relative z-10 size-full object-contain'}>
 						<Image
-							src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${featuredImg?.url}`}
+							src={getStrapiImageUrl(featuredImg?.url)}
 							alt={slug}
 							width={featuredImg?.width ?? 0}
 							height={featuredImg?.height ?? 0}
diff --git a/app/[lang]/_components/FooterBanner.tsx b/app/[lang]/_components/FooterBanner.tsx
index 5787706..6a0083b 100644
--- a/app/[lang]/_components/FooterBanner.tsx
+++ b/app/[lang]/_components/FooterBanner.tsx
@@ -8,11 +8,11 @@ import {cl} from '../_utils/cl'
 import type {ReactNode} from 'react'
 
 type TFooterBanner = {
-	tag: string;
-	title: string;
-	href: string;
-	buttonText: string;
-};
+	tag: string
+	title: string
+	href: string
+	buttonText: string
+}
 
 export function FooterBanner(data: TFooterBanner): ReactNode | null {
 	return (
diff --git a/app/[lang]/_components/HeaderItem.tsx b/app/[lang]/_components/HeaderItem.tsx
index e9d1302..c200700 100644
--- a/app/[lang]/_components/HeaderItem.tsx
+++ b/app/[lang]/_components/HeaderItem.tsx
@@ -3,13 +3,13 @@ import {LocalizedLink} from './LocalizedLink'
 import type {ReactNode} from 'react'
 
 type THeaderItemProps = {
-	name: string;
-	href: string;
-	icon: ReactNode;
-	target?: string;
-	description?: string;
-	onClick?: () => void;
-};
+	name: string
+	href: string
+	icon: ReactNode
+	target?: string
+	description?: string
+	onClick?: () => void
+}
 
 export default function HeaderItem({name, href, target, description, onClick, icon}: THeaderItemProps): ReactNode {
 	return (
@@ -24,7 +24,9 @@ export default function HeaderItem({name, href, target, description, onClick, ic
 			<div className={'ml-4 flex max-h-[120px] max-w-[100px] flex-col gap-1'}>
 				<span className={'truncate whitespace-nowrap text-sm font-medium '}>{name}</span>
 				{description && (
-					<span className={'line-clamp-3 truncate whitespace-normal text-xs text-gray-500'}>{description}</span>
+					<span className={'line-clamp-3 truncate whitespace-normal text-xs text-gray-500'}>
+						{description}
+					</span>
 				)}
 			</div>
 		</LocalizedLink>
diff --git a/app/[lang]/_components/LandingInfoCard.tsx b/app/[lang]/_components/LandingInfoCard.tsx
index 9613c7e..a3b8c4b 100644
--- a/app/[lang]/_components/LandingInfoCard.tsx
+++ b/app/[lang]/_components/LandingInfoCard.tsx
@@ -1,9 +1,9 @@
 import type {ReactNode} from 'react'
 
 type TLandingInfoCard = {
-	title: string;
-	stat: string;
-};
+	title: string
+	stat: string
+}
 
 export function LandingInfoCard({title, stat}: TLandingInfoCard): ReactNode {
 	return (
diff --git a/app/[lang]/_components/LocalizedLink.tsx b/app/[lang]/_components/LocalizedLink.tsx
index c101e37..99957b9 100644
--- a/app/[lang]/_components/LocalizedLink.tsx
+++ b/app/[lang]/_components/LocalizedLink.tsx
@@ -12,8 +12,8 @@ import type {UrlObject} from 'url'
 
 type TLocalizedLinkProps = LinkProps &
 	AnchorHTMLAttributes<HTMLAnchorElement> & {
-		children: ReactNode;
-	};
+		children: ReactNode
+	}
 
 /**
  * A localized version of Next.js Link that automatically prepends the current language
diff --git a/app/[lang]/_components/Modal.tsx b/app/[lang]/_components/Modal.tsx
index 21711da..78447e6 100644
--- a/app/[lang]/_components/Modal.tsx
+++ b/app/[lang]/_components/Modal.tsx
@@ -11,11 +11,11 @@ import type {TStrapiNotification} from '@/app/[lang]/_components/strapi/types'
 import type {ReactElement} from 'react'
 
 type TModalProps = {
-	isOpen: boolean;
-	onClose: VoidFunction;
-	notification: TStrapiNotification | null;
-	className?: string;
-};
+	isOpen: boolean
+	onClose: VoidFunction
+	notification: TStrapiNotification | null
+	className?: string
+}
 
 export function Modal({isOpen, onClose, notification, className}: TModalProps): ReactElement {
 	return (
diff --git a/app/[lang]/_components/NewsPost.tsx b/app/[lang]/_components/NewsPost.tsx
index 11ed54d..d7b7125 100644
--- a/app/[lang]/_components/NewsPost.tsx
+++ b/app/[lang]/_components/NewsPost.tsx
@@ -17,6 +17,8 @@
 import Image from 'next/image'
 import {useMemo} from 'react'
 
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+
 import {LocalizedLink} from './LocalizedLink'
 import {cl} from '../_utils/cl'
 
@@ -54,7 +56,7 @@ export function NewsPost({post, className}: {post: TNewsroomPost; className?: st
 			<div className={'h-[204px] max-w-[408px] overflow-hidden rounded-2xl'}>
 				{post?.featuredImg?.url ? (
 					<Image
-						src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${post?.featuredImg?.url}`}
+						src={getStrapiImageUrl(post?.featuredImg?.url)}
 						alt={post.slug}
 						width={post?.featuredImg?.width ?? 0}
 						height={post?.featuredImg?.height ?? 0}
diff --git a/app/[lang]/_components/NotificationBar.tsx b/app/[lang]/_components/NotificationBar.tsx
index a5b737a..c1269a0 100644
--- a/app/[lang]/_components/NotificationBar.tsx
+++ b/app/[lang]/_components/NotificationBar.tsx
@@ -10,9 +10,9 @@ export function NotificationBar({
 	onClose,
 	isOpen
 }: {
-	notification: TStrapiNotification | null;
-	onClose: () => void;
-	isOpen: boolean;
+	notification: TStrapiNotification | null
+	onClose: () => void
+	isOpen: boolean
 }): ReactElement | null {
 	if (!notification) {
 		return null
diff --git a/app/[lang]/_components/Popup.tsx b/app/[lang]/_components/Popup.tsx
index da90605..d3eb716 100644
--- a/app/[lang]/_components/Popup.tsx
+++ b/app/[lang]/_components/Popup.tsx
@@ -1,6 +1,8 @@
 import {motion} from 'motion/react'
 import Link from 'next/link'
 
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+
 import {IconArrow} from '../_icons/IconArrow'
 import {IconClose} from '../_icons/IconClose'
 import {cl} from '../_utils/cl'
@@ -24,9 +26,9 @@ export function Popup({
 	onClose,
 	isOpen
 }: {
-	notification: TStrapiNotification | null;
-	onClose: () => void;
-	isOpen: boolean;
+	notification: TStrapiNotification | null
+	onClose: () => void
+	isOpen: boolean
 }): ReactElement {
 	return (
 		<>
@@ -54,7 +56,7 @@ export function Popup({
 						style={{
 							...(notification?.bgImage?.url
 								? {
-										background: `url(${`${process.env.NEXT_PUBLIC_STRAPI_URL}${notification.bgImage.url}`}) no-repeat center center`,
+										background: `url(${getStrapiImageUrl(notification.bgImage.url)}) no-repeat center center`,
 										backgroundSize: 'cover'
 									}
 								: null)
diff --git a/app/[lang]/_components/RoundButton.tsx b/app/[lang]/_components/RoundButton.tsx
index 48a72fc..3f481e5 100644
--- a/app/[lang]/_components/RoundButton.tsx
+++ b/app/[lang]/_components/RoundButton.tsx
@@ -14,9 +14,9 @@ const icons = {
 }
 
 export function RoundButton(props: {
-	className?: string;
-	iconName: 'arrow' | 'plus' | 'minus' | 'cross';
-	onClick?: () => void;
+	className?: string
+	iconName: 'arrow' | 'plus' | 'minus' | 'cross'
+	onClick?: () => void
 }): ReactNode {
 	const {className, iconName, onClick} = props
 
diff --git a/app/[lang]/_components/SearchBar.tsx b/app/[lang]/_components/SearchBar.tsx
index 8dc0a4f..1344f87 100644
--- a/app/[lang]/_components/SearchBar.tsx
+++ b/app/[lang]/_components/SearchBar.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 type TSearchProps = {
-	searchQuery: string;
-	setSearchQueryAction: (query: string) => void;
-};
+	searchQuery: string
+	setSearchQueryAction: (query: string) => void
+}
 
 export function SearchBar({searchQuery, setSearchQueryAction}: TSearchProps): JSX.Element {
 	return (
diff --git a/app/[lang]/_components/TabItem.tsx b/app/[lang]/_components/TabItem.tsx
index 79e514b..170bf49 100644
--- a/app/[lang]/_components/TabItem.tsx
+++ b/app/[lang]/_components/TabItem.tsx
@@ -4,11 +4,11 @@ import {cl} from '../_utils/cl'
 import type {ReactNode} from 'react'
 
 export function TabItem(props: {
-	title?: string;
-	className?: string;
-	selected?: boolean;
-	onClick?: () => void;
-	href?: string;
+	title?: string
+	className?: string
+	selected?: boolean
+	onClick?: () => void
+	href?: string
 }): ReactNode {
 	const {title, className, selected: isSelected, onClick, href} = props
 	if (href) {
diff --git a/app/[lang]/_components/WalletRequestCard.tsx b/app/[lang]/_components/WalletRequestCard.tsx
index bd8f012..20dfeb6 100644
--- a/app/[lang]/_components/WalletRequestCard.tsx
+++ b/app/[lang]/_components/WalletRequestCard.tsx
@@ -3,12 +3,12 @@ import Image from 'next/image'
 import {Button} from '@/app/[lang]/_components/Button'
 
 type TRequestCardProps = {
-	title: string;
-	buttonTitle: string;
-	buttonHref: string;
-	bgImage: string;
-	buttonVariant?: 'white' | 'blue';
-};
+	title: string
+	buttonTitle: string
+	buttonHref: string
+	bgImage: string
+	buttonVariant?: 'white' | 'blue'
+}
 
 export function WalletRequestCard({
 	title,
diff --git a/app/[lang]/_components/header/DesktopHeader.tsx b/app/[lang]/_components/header/DesktopHeader.tsx
index f837a1f..0744f3d 100644
--- a/app/[lang]/_components/header/DesktopHeader.tsx
+++ b/app/[lang]/_components/header/DesktopHeader.tsx
@@ -22,10 +22,10 @@ import {ResourcesExpand} from './ResourcesExpand'
 import type {ReactNode} from 'react'
 
 type TDesktopHeaderProps = {
-	className?: string;
-	switchLanguageAction: (symbol: string) => void;
-	currentLanguage: string;
-};
+	className?: string
+	switchLanguageAction: (symbol: string) => void
+	currentLanguage: string
+}
 
 /**
  * Desktop header component with hover menu expansions
diff --git a/app/[lang]/_components/header/Header.tsx b/app/[lang]/_components/header/Header.tsx
index fa68cd5..4a9becc 100644
--- a/app/[lang]/_components/header/Header.tsx
+++ b/app/[lang]/_components/header/Header.tsx
@@ -8,8 +8,8 @@ import {MobileHeader} from './MobileHeader'
 import type {ReactNode} from 'react'
 
 type THeaderProps = {
-	className?: string;
-};
+	className?: string
+}
 
 /**
  * Responsive header component
diff --git a/app/[lang]/_components/header/LanguageExpand.tsx b/app/[lang]/_components/header/LanguageExpand.tsx
index c2c7d85..3f7b9c7 100644
--- a/app/[lang]/_components/header/LanguageExpand.tsx
+++ b/app/[lang]/_components/header/LanguageExpand.tsx
@@ -12,8 +12,8 @@ export function LanguageExpand({
 	switchLanguageAction,
 	currentLanguage
 }: {
-	switchLanguageAction: (symbol: string) => void;
-	currentLanguage: string;
+	switchLanguageAction: (symbol: string) => void
+	currentLanguage: string
 }): ReactNode {
 	return (
 		<div
diff --git a/app/[lang]/_components/header/MobileHeader.tsx b/app/[lang]/_components/header/MobileHeader.tsx
index a420592..a787353 100644
--- a/app/[lang]/_components/header/MobileHeader.tsx
+++ b/app/[lang]/_components/header/MobileHeader.tsx
@@ -56,8 +56,8 @@ export function MobileHeader({
 	switchLanguage,
 	currentLanguage
 }: {
-	switchLanguage: (symbol: string) => void;
-	currentLanguage: string;
+	switchLanguage: (symbol: string) => void
+	currentLanguage: string
 }): ReactNode {
 	const pathname = usePathname()
 
diff --git a/app/[lang]/_components/strapi/cards-row/Card.tsx b/app/[lang]/_components/strapi/cards-row/Card.tsx
index 9e5882b..b831e05 100644
--- a/app/[lang]/_components/strapi/cards-row/Card.tsx
+++ b/app/[lang]/_components/strapi/cards-row/Card.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
 
 import {Button} from '@/app/[lang]/_components/Button'
 import {cl} from '@/app/[lang]/_utils/cl'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {TCard} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
@@ -32,7 +33,7 @@ export function Card({data, smaller}: {data: TCard; smaller?: boolean}): ReactNo
 						backgroundPosition: 'center'
 					}}>
 					<Image
-						src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${data?.image.url}`}
+						src={getStrapiImageUrl(data?.image.url)}
 						alt={data?.title}
 						width={461}
 						height={219}
@@ -62,7 +63,7 @@ export function Card({data, smaller}: {data: TCard; smaller?: boolean}): ReactNo
 					backgroundPosition: 'center'
 				}}>
 				<Image
-					src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${data?.image.url}`}
+					src={getStrapiImageUrl(data?.image.url)}
 					alt={data?.title}
 					width={461}
 					height={219}
diff --git a/app/[lang]/_components/strapi/cards-row/CardsRow.tsx b/app/[lang]/_components/strapi/cards-row/CardsRow.tsx
index 8ec0cda..da86d61 100644
--- a/app/[lang]/_components/strapi/cards-row/CardsRow.tsx
+++ b/app/[lang]/_components/strapi/cards-row/CardsRow.tsx
@@ -7,8 +7,8 @@ import type {TCard, TCardsRowSection} from '@/app/[lang]/_components/strapi/type
 import type {ReactNode} from 'react'
 
 export default function CardsRow(props: {
-	data: TCardsRowSection;
-	children: (card: TCard) => ReactNode;
+	data: TCardsRowSection
+	children: (card: TCard) => ReactNode
 }): ReactNode | null {
 	const {data, children} = props
 	if (!data) {
diff --git a/app/[lang]/_components/strapi/products/CarouselCard.tsx b/app/[lang]/_components/strapi/products/CarouselCard.tsx
index 9ee4c98..56e78ed 100644
--- a/app/[lang]/_components/strapi/products/CarouselCard.tsx
+++ b/app/[lang]/_components/strapi/products/CarouselCard.tsx
@@ -4,16 +4,17 @@ import Image from 'next/image'
 
 import {Carousel} from '@/app/[lang]/_components/Carousel'
 import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {TStrapiImage} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
 
 type TCarouselCardProps = {
-	title: string;
-	description: string;
-	items?: {image?: TStrapiImage; url?: string}[];
-	image?: TStrapiImage;
-};
+	title: string
+	description: string
+	items?: {image?: TStrapiImage; url?: string}[]
+	image?: TStrapiImage
+}
 
 export function CarouselCard({title, description, items, image}: TCarouselCardProps): ReactNode {
 	return (
@@ -34,7 +35,7 @@ export function CarouselCard({title, description, items, image}: TCarouselCardPr
 									className={'mx-6'}>
 									<div className={'relative flex max-h-10 w-max items-center justify-start'}>
 										<Image
-											src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${image?.url ?? ''}`}
+											src={getStrapiImageUrl(image?.url ?? '')}
 											alt={image?.url || ''}
 											width={696}
 											height={168}
@@ -47,7 +48,7 @@ export function CarouselCard({title, description, items, image}: TCarouselCardPr
 					) : (
 						<div className={'mt-auto overflow-hidden'}>
 							<Image
-								src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${image?.url ?? ''}`}
+								src={getStrapiImageUrl(image?.url ?? '')}
 								alt={title}
 								width={696}
 								height={168}
diff --git a/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx b/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx
index 5cf1664..1162eb9 100644
--- a/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx
+++ b/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 import {PRODUCTS_DICT} from '@/app/[lang]/_utils/dictionary/products'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {TStrapiImage} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
@@ -12,11 +13,11 @@ import type {ReactNode} from 'react'
 const MotionLink = motion(Link)
 
 type TChainBubblesCardProps = {
-	title: string;
-	description: string;
-	items?: {url?: string; image?: TStrapiImage}[];
-	randomDelays: number[];
-};
+	title: string
+	description: string
+	items?: {url?: string; image?: TStrapiImage}[]
+	randomDelays: number[]
+}
 
 export function ChainBubblesCard({title, description, items, randomDelays}: TChainBubblesCardProps): ReactNode {
 	const hasChainItemsFromStrapi = items && items.length > 0
@@ -57,7 +58,11 @@ export function ChainBubblesCard({title, description, items, randomDelays}: TCha
 										'absolute left-1/2 top-1/2 size-[62px] -translate-x-1/2 -translate-y-1/2'
 									}>
 									<Image
-										src={`${hasChainItemsFromStrapi ? process.env.NEXT_PUBLIC_STRAPI_URL : ''}${item.image?.url ?? ''}`}
+										src={
+											hasChainItemsFromStrapi
+												? getStrapiImageUrl(item.image?.url ?? '')
+												: (item.image?.url ?? '')
+										}
 										alt={item.image?.url || ''}
 										width={62}
 										height={62}
@@ -96,7 +101,11 @@ export function ChainBubblesCard({title, description, items, randomDelays}: TCha
 										'absolute left-1/2 top-1/2 size-[32px] -translate-x-1/2 -translate-y-1/2'
 									}>
 									<Image
-										src={`${hasChainItemsFromStrapi ? process.env.NEXT_PUBLIC_STRAPI_URL : ''}${item.image?.url ?? ''}`}
+										src={
+											hasChainItemsFromStrapi
+												? getStrapiImageUrl(item.image?.url ?? '')
+												: (item.image?.url ?? '')
+										}
 										alt={item.image?.url || ''}
 										width={62}
 										height={62}
diff --git a/app/[lang]/_components/strapi/products/Grid.tsx b/app/[lang]/_components/strapi/products/Grid.tsx
index 815480f..12488d7 100644
--- a/app/[lang]/_components/strapi/products/Grid.tsx
+++ b/app/[lang]/_components/strapi/products/Grid.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image'
 
 import {Button} from '@/app/[lang]/_components/Button'
 import {cl} from '@/app/[lang]/_utils/cl'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {TCard, TGridSection} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
@@ -62,7 +63,7 @@ function Card({data, className}: {data: TCard; className: string}): ReactNode {
 				<div className={'text-gray-500'}>{data?.description}</div>
 			</div>
 			<Image
-				src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${data?.image.url}`}
+				src={getStrapiImageUrl(data?.image.url)}
 				alt={data?.title}
 				width={data?.image.width}
 				height={data?.image.height}
diff --git a/app/[lang]/_components/strapi/products/GridDisplaced.tsx b/app/[lang]/_components/strapi/products/GridDisplaced.tsx
index 03daeef..3d72f0c 100644
--- a/app/[lang]/_components/strapi/products/GridDisplaced.tsx
+++ b/app/[lang]/_components/strapi/products/GridDisplaced.tsx
@@ -3,6 +3,8 @@
 import Image from 'next/image'
 import {useMemo} from 'react'
 
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+
 import {BuyCryptoCard} from './BuyCryptoCard'
 import {CarouselCard} from './CarouselCard'
 import {ChainBubblesCard} from './ChainBubblesCard'
@@ -51,7 +53,7 @@ export default function GridDisplaced({data}: {data: TGridDisplacedSection}): Re
 							</div>
 							<div className={'mt-auto overflow-hidden'}>
 								<Image
-									src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${data?.cards[2]?.image?.url}`}
+									src={getStrapiImageUrl(data?.cards[2]?.image?.url)}
 									alt={data?.cards[2]?.title}
 									width={696}
 									height={168}
diff --git a/app/[lang]/_components/strapi/products/GridLadder.tsx b/app/[lang]/_components/strapi/products/GridLadder.tsx
index e0518e5..fa4d780 100644
--- a/app/[lang]/_components/strapi/products/GridLadder.tsx
+++ b/app/[lang]/_components/strapi/products/GridLadder.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 import {Button} from '@/app/[lang]/_components/Button'
 import {cl} from '@/app/[lang]/_utils/cl'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {TGridLadderSection, TGridLadderStep} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
@@ -33,7 +34,7 @@ export default function GridLadder({data}: {data: TGridLadderSection}): ReactNod
 							<LadderItem data={step} />
 							<div className={'h-[400px] w-[640px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
 								<Image
-									src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${step.image?.url}`}
+									src={getStrapiImageUrl(step.image?.url)}
 									alt={step.id.toString()}
 									width={step.image?.width}
 									height={step.image?.height}
diff --git a/app/[lang]/_components/strapi/templates/ChainFeatures.tsx b/app/[lang]/_components/strapi/templates/ChainFeatures.tsx
index 377ee57..ae108f8 100644
--- a/app/[lang]/_components/strapi/templates/ChainFeatures.tsx
+++ b/app/[lang]/_components/strapi/templates/ChainFeatures.tsx
@@ -4,6 +4,7 @@ import {useMemo} from 'react'
 import {Button} from '@/app/[lang]/_components/Button'
 import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
 import {cl} from '@/app/[lang]/_utils/cl'
+import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
 
 import type {TStrapiImage} from '@/app/[lang]/_components/strapi/types'
 import type {ReactNode} from 'react'
@@ -200,7 +201,7 @@ function CustodialFeature({chainName, foxImg}: {chainName: string; foxImg: TStra
 			</div>
 			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
 				<Image
-					src={`${process.env.NEXT_PUBLIC_STRAPI_URL}${foxImg.url}`}
+					src={getStrapiImageUrl(foxImg.url)}
 					alt={''}
 					className={'h-auto w-full object-contain object-bottom'}
 					width={foxImg.width}
diff --git a/app/[lang]/_components/strapi/types.ts b/app/[lang]/_components/strapi/types.ts
index ffdc94a..24b2aa0 100644
--- a/app/[lang]/_components/strapi/types.ts
+++ b/app/[lang]/_components/strapi/types.ts
@@ -3,319 +3,319 @@
  * Each component type corresponds to a section that can be included in a page
  ********************************************************************************************/
 export type TStrapiImage = {
-	url: string;
-	width: number;
-	height: number;
+	url: string
+	width: number
+	height: number
 	formats: {
-		thumbnail: {url: string; width: number; height: number};
-		small?: {url: string; width: number; height: number};
-		medium?: {url: string; width: number; height: number};
-		large?: {url: string; width: number; height: number};
-	};
-};
+		thumbnail: {url: string; width: number; height: number}
+		small?: {url: string; width: number; height: number}
+		medium?: {url: string; width: number; height: number}
+		large?: {url: string; width: number; height: number}
+	}
+}
 
 export type TDownloadButton = {
-	id: number;
-	variant: 'appstore' | 'googleplay';
-	url: string;
-};
+	id: number
+	variant: 'appstore' | 'googleplay'
+	url: string
+}
 
 export type TButton = {
-	id: number;
-	title: string;
-	url: string;
-	target?: string;
-};
+	id: number
+	title: string
+	url: string
+	target?: string
+}
 
 export type TStat = {
-	id: number;
-	title: string;
-	value: string;
-};
+	id: number
+	title: string
+	value: string
+}
 
 export type TCard = {
-	id: number;
-	title: string;
-	description: string;
-	isTextFirst: boolean;
-	image: TStrapiImage;
-	href?: string;
-	buttonCta?: TButton;
-	target?: string;
+	id: number
+	title: string
+	description: string
+	isTextFirst: boolean
+	image: TStrapiImage
+	href?: string
+	buttonCta?: TButton
+	target?: string
 	items?: {
-		url?: string;
-		image?: TStrapiImage;
-	}[];
-};
+		url?: string
+		image?: TStrapiImage
+	}[]
+}
 
 export type TGridLadderStep = {
-	id: number;
-	title: string;
-	description: string;
-	image?: TStrapiImage;
-	buttonCta: TButton;
-};
+	id: number
+	title: string
+	description: string
+	image?: TStrapiImage
+	buttonCta: TButton
+}
 
 export type TCardsRowSection = {
-	id: number;
-	title: string;
-	ctaBlock: TButton | null;
-	cards: TCard[];
-};
+	id: number
+	title: string
+	ctaBlock: TButton | null
+	cards: TCard[]
+}
 
 export type TGridSection = {
-	id: number;
-	card: TCard[];
+	id: number
+	card: TCard[]
 	cardCta: {
-		id: number;
-		title: string;
-		description: string;
-		imageBg?: TStrapiImage;
-		buttonCta: TButton;
-	}[];
-};
+		id: number
+		title: string
+		description: string
+		imageBg?: TStrapiImage
+		buttonCta: TButton
+	}[]
+}
 
 export type TGridDisplacedSection = {
-	id: number;
-	title: string;
-	description: string;
-	cta: TButton;
-	cards: TCard[];
+	id: number
+	title: string
+	description: string
+	cta: TButton
+	cards: TCard[]
 	features: {
-		title: string;
-		description: string;
-		image?: TStrapiImage;
-	}[];
-};
+		title: string
+		description: string
+		image?: TStrapiImage
+	}[]
+}
 
 export type TGridLadderSection = {
-	id: number;
-	steps: TGridLadderStep[];
-};
+	id: number
+	steps: TGridLadderStep[]
+}
 
 export type TFooterSection = {
-	id: number;
-	title: string;
-	cta: string;
-	imageBg: TStrapiImage;
-	buttonDownload: TButton[];
-	buttonCta: TButton;
-};
+	id: number
+	title: string
+	cta: string
+	imageBg: TStrapiImage
+	buttonDownload: TButton[]
+	buttonCta: TButton
+}
 
 /********************************************************************************************
  * Types for Strapi Blog API responses
  * Includes both list and single post interfaces
  ********************************************************************************************/
 export type TBlogPost = {
-	id: number;
-	documentId: string;
-	slug: string;
-	title: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-	featuredImg: TStrapiImage;
-	tags: string[];
-	type: string[];
-	summary: string;
-	isFeatured: boolean;
-};
+	id: number
+	documentId: string
+	slug: string
+	title: string
+	content: string
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+	featuredImg: TStrapiImage
+	tags: string[]
+	type: string[]
+	summary: string
+	isFeatured: boolean
+}
 
 export type TPagination = {
-	page: number;
-	pageSize: number;
-	pageCount: number;
-	total: number;
-};
+	page: number
+	pageSize: number
+	pageCount: number
+	total: number
+}
 
 export type TBlogListResponse = {
-	data: TBlogPost[];
+	data: TBlogPost[]
 	meta: {
-		pagination: TPagination;
-	};
-};
+		pagination: TPagination
+	}
+}
 
 export type TFaqData = {
-	id: number;
-	documentId: string;
-	title: string;
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-	faqSection: TFaqSection[];
-};
+	id: number
+	documentId: string
+	title: string
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+	faqSection: TFaqSection[]
+}
 
 export type TFaqSection = {
-	id: number;
-	sectionTitle: string;
-	faqSectionItem: TFaqSectionItem[];
-};
+	id: number
+	sectionTitle: string
+	faqSectionItem: TFaqSectionItem[]
+}
 
 export type TFaqSectionItem = {
-	id: number;
-	question: string;
-	answer: string;
-};
+	id: number
+	question: string
+	answer: string
+}
 
 export type TSupportData = {
-	id: number;
+	id: number
 	supportItems: {
-		id: number;
-		title: string;
-		description?: string;
-		href: string;
-	}[];
-};
+		id: number
+		title: string
+		description?: string
+		href: string
+	}[]
+}
 export type TSupportedWalletData = {
-	id: number;
-	documentId: string;
-	name: string;
-	description: string;
-	slug: string;
-	featuredImg: TStrapiImage;
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-	isFeatured: boolean;
-};
+	id: number
+	documentId: string
+	name: string
+	description: string
+	slug: string
+	featuredImg: TStrapiImage
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+	isFeatured: boolean
+}
 
 export type TSupportedChainData = {
-	id: number;
-	documentId: string;
-	name: string;
-	description: string;
-	slug: string;
-	featuredImg: TStrapiImage;
-	foxImg: TStrapiImage;
-	actions: string[];
-	features: string[];
-	typeOfChain: TSupportedChainTypes;
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-};
+	id: number
+	documentId: string
+	name: string
+	description: string
+	slug: string
+	featuredImg: TStrapiImage
+	foxImg: TStrapiImage
+	actions: string[]
+	features: string[]
+	typeOfChain: TSupportedChainTypes
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+}
 
 export type TSupportedProtocolData = {
-	id: number;
-	documentId: string;
-	name: string;
-	description: string;
-	collabDescription: string;
-	slug: string;
-	featuredImg: TStrapiImage;
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-	isFeatured: boolean;
-	features: string[];
+	id: number
+	documentId: string
+	name: string
+	description: string
+	collabDescription: string
+	slug: string
+	featuredImg: TStrapiImage
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+	isFeatured: boolean
+	features: string[]
 	cards: {
-		title: string;
-		description?: string;
-	}[];
-};
+		title: string
+		description?: string
+	}[]
+}
 
 export type TDiscoverData = {
-	id: number;
-	documentId: string;
-	title: string;
-	description: string;
-	slug: string;
-	tag: string;
-	type: string;
-	featuredImg: TStrapiImage;
-	features: TCard[];
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-};
+	id: number
+	documentId: string
+	title: string
+	description: string
+	slug: string
+	tag: string
+	type: string
+	featuredImg: TStrapiImage
+	features: TCard[]
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+}
 
 export type TNewsroomPost = {
-	id: number;
-	documentId: string;
-	slug: string;
-	title: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-	publishedOn: string;
-	featuredImg: TStrapiImage;
-	tags: string[];
-	category: string[];
-	author: string;
-	postSummary: string;
-	externalURL: string;
-};
+	id: number
+	documentId: string
+	slug: string
+	title: string
+	content: string
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+	publishedOn: string
+	featuredImg: TStrapiImage
+	tags: string[]
+	category: string[]
+	author: string
+	postSummary: string
+	externalURL: string
+}
 
 export type TPrivacyPolicyData = {
-	id: number;
-	documentId: string;
+	id: number
+	documentId: string
 	policy: {
-		id: number;
-		title: string;
-		createdAt: string;
-		updatedAt: string;
-		publishedAt: string;
-		policy: string;
-		date: string;
-	}[];
-};
+		id: number
+		title: string
+		createdAt: string
+		updatedAt: string
+		publishedAt: string
+		policy: string
+		date: string
+	}[]
+}
 
 export type TTermsOfServiceData = {
-	id: number;
-	documentId: string;
+	id: number
+	documentId: string
 	terms: {
-		id: number;
-		title: string;
-		createdAt: string;
-		updatedAt: string;
-		publishedAt: string;
-		policy: string;
-		date: string;
-	}[];
-};
+		id: number
+		title: string
+		createdAt: string
+		updatedAt: string
+		publishedAt: string
+		policy: string
+		date: string
+	}[]
+}
 
 export type TNewsroomListResponse = {
-	data: TNewsroomPost[];
+	data: TNewsroomPost[]
 	meta: {
-		pagination: TPagination;
-	};
-};
+		pagination: TPagination
+	}
+}
 
 export type TStrapiNotification = {
-	id: number;
-	title: string;
-	description: string;
-	href?: string;
-	tag?: string;
-	type: 'popup' | 'modal' | 'bar';
-	enabled: boolean;
-	bgImage?: TStrapiImage;
-};
+	id: number
+	title: string
+	description: string
+	href?: string
+	tag?: string
+	type: 'popup' | 'modal' | 'bar'
+	enabled: boolean
+	bgImage?: TStrapiImage
+}
 
-export type TSupportedChainTypes = 'EVM' | 'Solana' | 'Bitcoin' | 'Cosmos' | string;
+export type TSupportedChainTypes = 'EVM' | 'Solana' | 'Bitcoin' | 'Cosmos' | string
 
 /********************************************************************************************
  * Types for Strapi Article API responses
  * Includes both list and single article interfaces
  ********************************************************************************************/
 export type TSupportArticle = {
-	id: number;
-	documentId: string;
-	slug: string;
-	title: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	publishedAt: string;
-	featuredImg: TStrapiImage;
-	summary: string;
-};
+	id: number
+	documentId: string
+	slug: string
+	title: string
+	content: string
+	createdAt: string
+	updatedAt: string
+	publishedAt: string
+	featuredImg: TStrapiImage
+	summary: string
+}
 
 export type TArticleListResponse = {
-	data: TSupportArticle[];
+	data: TSupportArticle[]
 	meta: {
-		pagination: TPagination;
-	};
-};
+		pagination: TPagination
+	}
+}
diff --git a/app/[lang]/_components/trading/ChainSelect.tsx b/app/[lang]/_components/trading/ChainSelect.tsx
index 0d3af5f..7903eb3 100644
--- a/app/[lang]/_components/trading/ChainSelect.tsx
+++ b/app/[lang]/_components/trading/ChainSelect.tsx
@@ -9,12 +9,12 @@ import {cl} from '@/app/[lang]/_utils/cl'
 import type {ReactNode} from 'react'
 
 export type TChain = {
-	id: string;
-	name: string;
-	icon: string;
-	requestKey: string;
-	chainId?: string;
-};
+	id: string
+	name: string
+	icon: string
+	requestKey: string
+	chainId?: string
+}
 
 export function ChainSelect({
 	chains,
@@ -24,12 +24,12 @@ export function ChainSelect({
 	isOpen,
 	setIsOpenAction
 }: {
-	chains: TChain[];
-	selectedChain: TChain;
-	onSelectAction: (chain: TChain) => void;
-	disabled?: boolean;
-	isOpen: boolean;
-	setIsOpenAction: (isOpen: boolean) => void;
+	chains: TChain[]
+	selectedChain: TChain
+	onSelectAction: (chain: TChain) => void
+	disabled?: boolean
+	isOpen: boolean
+	setIsOpenAction: (isOpen: boolean) => void
 }): ReactNode {
 	return (
 		<div className={'group relative'}>
diff --git a/app/[lang]/_components/trading/TokenSelect.tsx b/app/[lang]/_components/trading/TokenSelect.tsx
index db67d2c..b2b3f02 100644
--- a/app/[lang]/_components/trading/TokenSelect.tsx
+++ b/app/[lang]/_components/trading/TokenSelect.tsx
@@ -9,15 +9,15 @@ import {cl} from '@/app/[lang]/_utils/cl'
 import type {ReactNode} from 'react'
 
 export type TToken = {
-	symbol: string;
-	name: string;
-	icon: string;
-	sublogo?: string;
-	slug: string;
-	decimals: Record<string, number>;
-	requestKey?: string;
-	tokenAddress?: string;
-};
+	symbol: string
+	name: string
+	icon: string
+	sublogo?: string
+	slug: string
+	decimals: Record<string, number>
+	requestKey?: string
+	tokenAddress?: string
+}
 
 export function TokenSelect({
 	tokens,
@@ -26,11 +26,11 @@ export function TokenSelect({
 	isOpen,
 	setIsOpenAction
 }: {
-	tokens: TToken[];
-	selectedToken: TToken;
-	onSelectAction: (token: TToken) => void;
-	isOpen: boolean;
-	setIsOpenAction: (isOpen: boolean) => void;
+	tokens: TToken[]
+	selectedToken: TToken
+	onSelectAction: (token: TToken) => void
+	isOpen: boolean
+	setIsOpenAction: (isOpen: boolean) => void
 }): ReactNode {
 	return (
 		<div className={'relative'}>
diff --git a/app/[lang]/_components/trading/TradingWidget.tsx b/app/[lang]/_components/trading/TradingWidget.tsx
index f2d0556..169b4ad 100644
--- a/app/[lang]/_components/trading/TradingWidget.tsx
+++ b/app/[lang]/_components/trading/TradingWidget.tsx
@@ -131,13 +131,7 @@ export function TradingWidget(): ReactNode {
 			setError('No rate available')
 			setIsLoading(false)
 		}
-	}, [
-		debouncedAmount,
-		fromChain,
-		fromToken,
-		toChain,
-		toToken
-	])
+	}, [debouncedAmount, fromChain, fromToken, toChain, toToken])
 
 	useEffect(() => {
 		if (debouncedAmount === '0' || debouncedAmount === '') {
diff --git a/app/[lang]/_contexts/CachedArticlesContext.tsx b/app/[lang]/_contexts/CachedArticlesContext.tsx
index a72ccd8..7cd203b 100644
--- a/app/[lang]/_contexts/CachedArticlesContext.tsx
+++ b/app/[lang]/_contexts/CachedArticlesContext.tsx
@@ -19,22 +19,22 @@ import type {ReactNode} from 'react'
  * Type definition for cached query parameters
  ********************************************************************************************/
 type TCachedParams = {
-	page: number | undefined;
-	pageSize: number | undefined;
-	sort: 'asc' | 'desc' | undefined;
-	slug: string | undefined;
-	populateContent: boolean | undefined;
-};
+	page: number | undefined
+	pageSize: number | undefined
+	sort: 'asc' | 'desc' | undefined
+	slug: string | undefined
+	populateContent: boolean | undefined
+}
 
 /********************************************************************************************
  * Context for storing cached support articles data and parameters
  * Provides default values for initial state
  ********************************************************************************************/
 const ArticlesContext = createContext<{
-	cachedResponse: TArticleListResponse;
-	setCachedResponse: (responses: TArticleListResponse) => void;
-	cachedParams: TCachedParams;
-	setCachedParams: (params: TCachedParams) => void;
+	cachedResponse: TArticleListResponse
+	setCachedResponse: (responses: TArticleListResponse) => void
+	cachedParams: TCachedParams
+	setCachedParams: (params: TCachedParams) => void
 }>({
 	cachedResponse: {
 		data: [],
@@ -102,10 +102,10 @@ export function CachedArticlesProvider({children}: {children: ReactNode}): React
  * @throws Error if used outside of CachedArticlesProvider
  */
 export function useCachedArticles(): {
-	cachedResponse: TArticleListResponse;
-	setCachedResponse: (responses: TArticleListResponse) => void;
-	cachedParams: TCachedParams;
-	setCachedParams: (params: TCachedParams) => void;
+	cachedResponse: TArticleListResponse
+	setCachedResponse: (responses: TArticleListResponse) => void
+	cachedParams: TCachedParams
+	setCachedParams: (params: TCachedParams) => void
 } {
 	return useContext(ArticlesContext)
 }
diff --git a/app/[lang]/_contexts/CachedNewsContext.tsx b/app/[lang]/_contexts/CachedNewsContext.tsx
index d6b3b23..db7734f 100644
--- a/app/[lang]/_contexts/CachedNewsContext.tsx
+++ b/app/[lang]/_contexts/CachedNewsContext.tsx
@@ -19,24 +19,24 @@ import type {ReactNode} from 'react'
  * Type definition for cached query parameters
  ********************************************************************************************/
 type TCachedParams = {
-	page: number | undefined;
-	pageSize: number | undefined;
-	sort: 'asc' | 'desc' | undefined;
-	slug: string | undefined;
-	populateContent: boolean | undefined;
-	category: string | undefined;
-	tag: string | undefined;
-};
+	page: number | undefined
+	pageSize: number | undefined
+	sort: 'asc' | 'desc' | undefined
+	slug: string | undefined
+	populateContent: boolean | undefined
+	category: string | undefined
+	tag: string | undefined
+}
 
 /********************************************************************************************
  * Context for storing cached news data and parameters
  * Provides default values for initial state
  */
 const NewsContext = createContext<{
-	cachedResponse: TNewsroomListResponse;
-	setCachedResponse: (responses: TNewsroomListResponse) => void;
-	cachedParams: TCachedParams;
-	setCachedParams: (params: TCachedParams) => void;
+	cachedResponse: TNewsroomListResponse
+	setCachedResponse: (responses: TNewsroomListResponse) => void
+	cachedParams: TCachedParams
+	setCachedParams: (params: TCachedParams) => void
 }>({
 	cachedResponse: {
 		data: [],
@@ -108,10 +108,10 @@ export function CachedNewsProvider({children}: {children: ReactNode}): ReactNode
  * @throws Error if used outside of CachedNewsProvider
  */
 export function useCachedNews(): {
-	cachedResponse: TNewsroomListResponse;
-	setCachedResponse: (responses: TNewsroomListResponse) => void;
-	cachedParams: TCachedParams;
-	setCachedParams: (params: TCachedParams) => void;
+	cachedResponse: TNewsroomListResponse
+	setCachedResponse: (responses: TNewsroomListResponse) => void
+	cachedParams: TCachedParams
+	setCachedParams: (params: TCachedParams) => void
 } {
 	return useContext(NewsContext)
 }
diff --git a/app/[lang]/_contexts/CachedPostsContext.tsx b/app/[lang]/_contexts/CachedPostsContext.tsx
index 46efe76..aff45de 100644
--- a/app/[lang]/_contexts/CachedPostsContext.tsx
+++ b/app/[lang]/_contexts/CachedPostsContext.tsx
@@ -19,24 +19,24 @@ import type {ReactNode} from 'react'
  * Type definition for cached query parameters
  ********************************************************************************************/
 type TCachedParams = {
-	page: number | undefined;
-	pageSize: number | undefined;
-	sort: 'asc' | 'desc' | undefined;
-	slug: string | undefined;
-	populateContent: boolean | undefined;
-	type: string | undefined;
-	tag: string | undefined;
-};
+	page: number | undefined
+	pageSize: number | undefined
+	sort: 'asc' | 'desc' | undefined
+	slug: string | undefined
+	populateContent: boolean | undefined
+	type: string | undefined
+	tag: string | undefined
+}
 
 /********************************************************************************************
  * Context for storing cached blog posts data and parameters
  * Provides default values for initial state
  ********************************************************************************************/
 const PostsContext = createContext<{
-	cachedResponse: TBlogListResponse;
-	setCachedResponse: (responses: TBlogListResponse) => void;
-	cachedParams: TCachedParams;
-	setCachedParams: (params: TCachedParams) => void;
+	cachedResponse: TBlogListResponse
+	setCachedResponse: (responses: TBlogListResponse) => void
+	cachedParams: TCachedParams
+	setCachedParams: (params: TCachedParams) => void
 }>({
 	cachedResponse: {
 		data: [],
@@ -108,10 +108,10 @@ export function CachedPostsProvider({children}: {children: ReactNode}): ReactNod
  * @throws Error if used outside of CachedPostsProvider
  */
 export function useCachedPosts(): {
-	cachedResponse: TBlogListResponse;
-	setCachedResponse: (responses: TBlogListResponse) => void;
-	cachedParams: TCachedParams;
-	setCachedParams: (params: TCachedParams) => void;
+	cachedResponse: TBlogListResponse
+	setCachedResponse: (responses: TBlogListResponse) => void
+	cachedParams: TCachedParams
+	setCachedParams: (params: TCachedParams) => void
 } {
 	return useContext(PostsContext)
 }
diff --git a/app/[lang]/_contexts/LanguageContext.tsx b/app/[lang]/_contexts/LanguageContext.tsx
index 228d5b4..53e37b9 100644
--- a/app/[lang]/_contexts/LanguageContext.tsx
+++ b/app/[lang]/_contexts/LanguageContext.tsx
@@ -15,25 +15,25 @@ import {
 import type {TLanguage} from '@/app/[lang]/_utils/i18nconfig'
 
 type WeglotInstance = {
-	initialized: boolean;
-	switchTo(languageCode: string): void;
-	on(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void;
-	on(event: 'initialized', handler: () => void): void;
-	off(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void;
-	off(event: 'initialized', handler: () => void): void;
-};
+	initialized: boolean
+	switchTo(languageCode: string): void
+	on(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void
+	on(event: 'initialized', handler: () => void): void
+	off(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void
+	off(event: 'initialized', handler: () => void): void
+}
 
 declare global {
 	interface Window {
-		Weglot?: WeglotInstance;
+		Weglot?: WeglotInstance
 	}
 }
 
 type TLanguageContext = {
-	currentLanguage: string;
-	supportedLanguages: TLanguage[];
-	switchLanguage: (languageCode: string) => void;
-};
+	currentLanguage: string
+	supportedLanguages: TLanguage[]
+	switchLanguage: (languageCode: string) => void
+}
 
 const LanguageContext = createContext<TLanguageContext | undefined>(undefined)
 
diff --git a/app/[lang]/_hooks/useFetchNewsroom.tsx b/app/[lang]/_hooks/useFetchNewsroom.tsx
index 9891f7a..7abf148 100644
--- a/app/[lang]/_hooks/useFetchNewsroom.tsx
+++ b/app/[lang]/_hooks/useFetchNewsroom.tsx
@@ -25,20 +25,20 @@ export function useFetchNewsroom({
 	cachePosts = false,
 	skip = false
 }: {
-	page: number;
-	pageSize: number;
-	sort: 'asc' | 'desc';
-	slug?: string;
-	category?: string;
-	tag?: string;
-	populateContent?: boolean;
-	cachePosts?: boolean;
-	skip?: boolean;
+	page: number
+	pageSize: number
+	sort: 'asc' | 'desc'
+	slug?: string
+	category?: string
+	tag?: string
+	populateContent?: boolean
+	cachePosts?: boolean
+	skip?: boolean
 }): {
-	posts: TNewsroomPost[];
-	pagination: TPagination | undefined;
-	isLoading: boolean;
-	error: Error | null;
+	posts: TNewsroomPost[]
+	pagination: TPagination | undefined
+	isLoading: boolean
+	error: Error | null
 } {
 	const [posts, setPosts] = useState<TNewsroomPost[]>([])
 	const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
diff --git a/app/[lang]/_hooks/useFetchPosts.tsx b/app/[lang]/_hooks/useFetchPosts.tsx
index bfe65f4..8a739fb 100644
--- a/app/[lang]/_hooks/useFetchPosts.tsx
+++ b/app/[lang]/_hooks/useFetchPosts.tsx
@@ -39,20 +39,20 @@ export function useFetchPosts({
 	cachePosts = false,
 	skip = false
 }: {
-	page: number;
-	pageSize: number;
-	sort: 'asc' | 'desc';
-	slug?: string;
-	type?: string;
-	tag?: string;
-	populateContent?: boolean;
-	cachePosts?: boolean;
-	skip?: boolean;
+	page: number
+	pageSize: number
+	sort: 'asc' | 'desc'
+	slug?: string
+	type?: string
+	tag?: string
+	populateContent?: boolean
+	cachePosts?: boolean
+	skip?: boolean
 }): {
-	posts: TBlogPost[];
-	pagination: TPagination | undefined;
-	isLoading: boolean;
-	error: Error | null;
+	posts: TBlogPost[]
+	pagination: TPagination | undefined
+	isLoading: boolean
+	error: Error | null
 } {
 	const [posts, setPosts] = useState<TBlogPost[]>([])
 	const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
diff --git a/app/[lang]/_hooks/useFetchSupportArticles.ts b/app/[lang]/_hooks/useFetchSupportArticles.ts
index aa47e5f..bc3461f 100644
--- a/app/[lang]/_hooks/useFetchSupportArticles.ts
+++ b/app/[lang]/_hooks/useFetchSupportArticles.ts
@@ -35,18 +35,18 @@ export function useFetchSupportArticles({
 	cacheArticles = false,
 	skip = false
 }: {
-	page: number;
-	pageSize: number;
-	sort: 'asc' | 'desc';
-	slug?: string;
-	populateContent?: boolean;
-	cacheArticles?: boolean;
-	skip?: boolean;
+	page: number
+	pageSize: number
+	sort: 'asc' | 'desc'
+	slug?: string
+	populateContent?: boolean
+	cacheArticles?: boolean
+	skip?: boolean
 }): {
-	articles: TSupportArticle[];
-	pagination: TPagination | undefined;
-	isLoading: boolean;
-	error: Error | null;
+	articles: TSupportArticle[]
+	pagination: TPagination | undefined
+	isLoading: boolean
+	error: Error | null
 } {
 	const [articles, setArticles] = useState<TSupportArticle[]>([])
 	const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
diff --git a/app/[lang]/_utils/README.md b/app/[lang]/_utils/README.md
index 855685d..2989be8 100644
--- a/app/[lang]/_utils/README.md
+++ b/app/[lang]/_utils/README.md
@@ -1,4 +1,4 @@
-# _utils Directory
+# \_utils Directory
 
 This directory contains shared utility functions, types, and helpers used across the ShapeShift web application.
 
@@ -38,7 +38,7 @@ When using or adding to this directory:
 ## When to Use vs. Other Locations
 
 - Use this directory for truly app-wide utilities
-- For section-specific utilities, create a _utils directory within that section
+- For section-specific utilities, create a \_utils directory within that section
 - Component-specific utilities should be placed near the component itself
 
 ## Schema Utilities
@@ -48,4 +48,4 @@ The schema.ts file appears to handle data schemas that are important across the
 - TypeScript interface definitions
 - Validation schemas (possibly using Zod or similar)
 - Data transformation utilities
-- Type guards and type assertion functions
\ No newline at end of file
+- Type guards and type assertion functions
diff --git a/app/[lang]/_utils/i18nconfig.ts b/app/[lang]/_utils/i18nconfig.ts
index efbf495..0779a44 100644
--- a/app/[lang]/_utils/i18nconfig.ts
+++ b/app/[lang]/_utils/i18nconfig.ts
@@ -4,11 +4,11 @@
  ************************************************************************************************/
 
 export type TLanguage = {
-	code: string;
-	name: string;
-	nativeName: string;
-	weglotCode: string;
-};
+	code: string
+	name: string
+	nativeName: string
+	weglotCode: string
+}
 
 export const SUPPORTED_LANGUAGES: TLanguage[] = [
 	{
diff --git a/app/[lang]/_utils/query.ts b/app/[lang]/_utils/query.ts
index 5372462..34cebb6 100644
--- a/app/[lang]/_utils/query.ts
+++ b/app/[lang]/_utils/query.ts
@@ -15,6 +15,21 @@ import type {
  * All API calls include authentication via STRAPI_API_TOKEN environment variable.
  */
 
+/**
+ * Builds a full image URL from a Strapi image url field.
+ * Strapi may return either a relative path (/uploads/...) or an absolute CDN URL.
+ * Prepend NEXT_PUBLIC_STRAPI_URL only when the url is relative.
+ */
+export function getStrapiImageUrl(url: string | null | undefined): string {
+	if (!url) {
+		return ''
+	}
+	if (url.startsWith('http')) {
+		return url
+	}
+	return `${process.env.NEXT_PUBLIC_STRAPI_URL}${url}`
+}
+
 /**
  * Common headers used for all Strapi API requests
  */
diff --git a/app/[lang]/_utils/schema.ts b/app/[lang]/_utils/schema.ts
index 3d97a1e..96d32b3 100644
--- a/app/[lang]/_utils/schema.ts
+++ b/app/[lang]/_utils/schema.ts
@@ -65,11 +65,11 @@ export function generateProductSchema({
 	pageURL,
 	features = []
 }: {
-	title: string;
-	description: string;
-	featuredImage?: string;
-	pageURL: string;
-	features?: {title: string; description: string}[];
+	title: string
+	description: string
+	featuredImage?: string
+	pageURL: string
+	features?: {title: string; description: string}[]
 }): Record<string, unknown> {
 	// Ensure we have required fields
 	if (!title || !pageURL) {
@@ -77,8 +77,7 @@ export function generateProductSchema({
 	}
 
 	const productID = pageURL.split('/').pop() || 'shapeshift-product'
-	const image =
-		featuredImage || `${process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'}/opengraph-image.png`
+	const image = featuredImage || `${process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'}/opengraph-image.png`
 
 	return {
 		'@context': 'https://schema.org',
diff --git a/app/[lang]/dao/fox-token/page.tsx b/app/[lang]/dao/fox-token/page.tsx
index 3122f2b..8e173e7 100644
--- a/app/[lang]/dao/fox-token/page.tsx
+++ b/app/[lang]/dao/fox-token/page.tsx
@@ -112,8 +112,12 @@ export default function FoxTokenPage(): ReactNode {
 							<p className={'mt-4'}>{'You can find FOX token contracts at:'}</p>
 							<ul className={'list-disc pl-6 break-all'}>
 								{FOX_CONTRACTS.map(({chain, address}) => (
-									<li key={chain} className={'font-mono'}>
-										{chain}{': '}{address}
+									<li
+										key={chain}
+										className={'font-mono'}>
+										{chain}
+										{': '}
+										{address}
 									</li>
 								))}
 							</ul>
@@ -159,7 +163,10 @@ export default function FoxTokenPage(): ReactNode {
 
 				<h1 className={'mb-14 text-[40px] leading-10 lg:text-7xl'}>{resourcesTitle}</h1>
 
-				<LatestBlogPosts limit={3} isWithTitle={false} />
+				<LatestBlogPosts
+					limit={3}
+					isWithTitle={false}
+				/>
 				<h1 className={'mb-14 mt-[120px] text-[40px] leading-10 lg:text-7xl'}>{communityTitle}</h1>
 
 				<Banner />
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 99dd35c..a1f021d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,11 +1,11 @@
-import js from '@eslint/js';
+import js from '@eslint/js'
 
-import importPlugin from 'eslint-plugin-import';
-import reactPlugin from 'eslint-plugin-react';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
-import tailwindcssPlugin from 'eslint-plugin-tailwindcss';
-import unusedImportsPlugin from 'eslint-plugin-unused-imports';
-import tseslint from 'typescript-eslint';
+import importPlugin from 'eslint-plugin-import'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import tailwindcssPlugin from 'eslint-plugin-tailwindcss'
+import unusedImportsPlugin from 'eslint-plugin-unused-imports'
+import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
 	{
@@ -23,8 +23,8 @@ export default tseslint.config(
 			'*.config.js',
 			'*.config.ts',
 			'*.config.mjs',
-			'*.config.cjs',
-		],
+			'*.config.cjs'
+		]
 	},
 	js.configs.recommended,
 	...tseslint.configs.recommended,
@@ -37,24 +37,23 @@ export default tseslint.config(
 			'react-hooks': reactHooksPlugin,
 			tailwindcss: tailwindcssPlugin,
 			'unused-imports': unusedImportsPlugin,
-			import: importPlugin,
-
+			import: importPlugin
 		},
 		languageOptions: {
 			parser: tseslint.parser,
 			parserOptions: {
-				ecmaFeatures: { jsx: true },
+				ecmaFeatures: {jsx: true},
 				ecmaVersion: 2022,
 				sourceType: 'module',
-				project: './tsconfig.json',
-			},
+				project: './tsconfig.json'
+			}
 		},
 		settings: {
-			react: { version: 'detect' },
-			next: { rootDir: './' },
+			react: {version: 'detect'},
+			next: {rootDir: './'},
 			'import/resolver': {
-				typescript: { project: './tsconfig.json' },
-			},
+				typescript: {project: './tsconfig.json'}
+			}
 		},
 		rules: {
 			// Import rules
@@ -68,60 +67,49 @@ export default tseslint.config(
 			'import/order': [
 				'error',
 				{
-					groups: [
-						'builtin',
-						'external',
-						'internal',
-						['sibling', 'parent'],
-						'index',
-						'unknown',
-						'type',
-					],
-					pathGroups: [{ pattern: '@/**', group: 'internal' }],
+					groups: ['builtin', 'external', 'internal', ['sibling', 'parent'], 'index', 'unknown', 'type'],
+					pathGroups: [{pattern: '@/**', group: 'internal'}],
 					'newlines-between': 'always',
-					alphabetize: { order: 'asc', caseInsensitive: true },
+					alphabetize: {order: 'asc', caseInsensitive: true},
 					warnOnUnassignedImports: true,
-					pathGroupsExcludedImportTypes: ['type'],
-				},
+					pathGroupsExcludedImportTypes: ['type']
+				}
 			],
 
 			// React rules
 			'react/prop-types': 0,
-			'react/jsx-curly-brace-presence': ['error', { props: 'always', children: 'always' }],
+			'react/jsx-curly-brace-presence': ['error', {props: 'always', children: 'always'}],
 			'react/jsx-first-prop-new-line': ['error', 'multiline'],
 			'react/jsx-closing-tag-location': 2,
 			'react/jsx-max-props-per-line': 'off',
 
 			// React Hooks rules
-			'react-hooks/exhaustive-deps': [
-				'warn',
-				{ additionalHooks: '(^useAsyncTrigger$|^useDeepCompareMemo$)' },
-			],
+			'react-hooks/exhaustive-deps': ['warn', {additionalHooks: '(^useAsyncTrigger$|^useDeepCompareMemo$)'}],
 
-		// General rules
-		'no-async-promise-executor': 0,
-		semi: [2, 'never'],
-		quotes: [2, 'single', { avoidEscape: true }],
-		'object-curly-spacing': [2, 'never'],
-		'array-bracket-spacing': [2, 'never'],
-		'comma-dangle': ['error', 'never'],
-		'arrow-parens': ['error', 'as-needed'],
-			'no-else-return': ['error', { allowElseIf: false }],
+			// General rules
+			'no-async-promise-executor': 0,
+			semi: [2, 'never'],
+			quotes: [2, 'single', {avoidEscape: true}],
+			'object-curly-spacing': [2, 'never'],
+			'array-bracket-spacing': [2, 'never'],
+			'comma-dangle': ['error', 'never'],
+			'arrow-parens': ['error', 'as-needed'],
+			'no-else-return': ['error', {allowElseIf: false}],
 			'eol-last': ['error', 'always'],
-			'array-bracket-newline': ['error', { multiline: true }],
+			'array-bracket-newline': ['error', {multiline: true}],
 			'no-unused-vars': 'off', // Turned off in favor of @typescript-eslint version
 			curly: ['error', 'all'],
 			'object-curly-newline': [
 				'error',
 				{
-					ObjectExpression: { multiline: true, consistent: true },
-					ObjectPattern: { multiline: true, consistent: true },
-					ImportDeclaration: { multiline: true, consistent: true },
-					ExportDeclaration: { multiline: true, minProperties: 3 },
-				},
+					ObjectExpression: {multiline: true, consistent: true},
+					ObjectPattern: {multiline: true, consistent: true},
+					ImportDeclaration: {multiline: true, consistent: true},
+					ExportDeclaration: {multiline: true, minProperties: 3}
+				}
 			],
-			'object-property-newline': ['error', { allowAllPropertiesOnSameLine: true }],
-			'no-multi-spaces': ['error', { ignoreEOLComments: false }],
+			'object-property-newline': ['error', {allowAllPropertiesOnSameLine: true}],
+			'no-multi-spaces': ['error', {ignoreEOLComments: false}],
 			'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
 			'sort-imports': [
 				'error',
@@ -130,12 +118,12 @@ export default tseslint.config(
 					ignoreDeclarationSort: true,
 					ignoreMemberSort: false,
 					memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
-					allowSeparatedGroups: true,
-				},
+					allowSeparatedGroups: true
+				}
 			],
 
 			'object-shorthand': 'error',
-			'eqeqeq': 'error',
+			eqeqeq: 'error',
 			'default-case': 'error',
 
 			// TypeScript rules
@@ -144,15 +132,15 @@ export default tseslint.config(
 				{
 					prefer: 'type-imports',
 					disallowTypeAnnotations: true,
-					fixStyle: 'separate-type-imports',
-				},
+					fixStyle: 'separate-type-imports'
+				}
 			],
 			'@typescript-eslint/no-var-requires': 0,
-			'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+			'@typescript-eslint/no-unused-vars': ['error', {argsIgnorePattern: '^_'}],
 			'@typescript-eslint/no-explicit-any': [1],
 
 			'@typescript-eslint/no-unsafe-function-type': 'error',
-			'@typescript-eslint/array-type': ['error', { default: 'array' }],
+			'@typescript-eslint/array-type': ['error', {default: 'array'}],
 			'@typescript-eslint/consistent-type-assertions': 0,
 			'@typescript-eslint/consistent-type-definitions': ['error', 'type'],
 			'@typescript-eslint/consistent-indexed-object-style': ['error', 'record'],
@@ -163,33 +151,30 @@ export default tseslint.config(
 					format: ['camelCase', 'PascalCase'],
 					filter: {
 						regex: '^(@typescript-eslint/|react/|react-hooks/|no-|import/|object-|array-|eol-|tailwindcss/|unused-imports/|sort-|newlines-between|brace-style|comma-dangle).*$',
-						match: false,
-					},
+						match: false
+					}
 				},
-				{ selector: 'function', format: ['camelCase', 'PascalCase'] },
+				{selector: 'function', format: ['camelCase', 'PascalCase']},
 				{
 					selector: 'variableLike',
 					format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
-					leadingUnderscore: 'allow',
+					leadingUnderscore: 'allow'
 				},
 				{
 					selector: 'variable',
 					types: ['boolean'],
 					format: ['PascalCase'],
-					prefix: ['is', 'are', 'should', 'has', 'can', 'did', 'will', 'with', 'was', 'only'],
+					prefix: ['is', 'are', 'should', 'has', 'can', 'did', 'will', 'with', 'was', 'only']
 				},
 				{
 					selector: 'variableLike',
 					format: ['PascalCase'],
-					filter: { regex: '(Context)$|(ContextApp)$|^Component$', match: true },
+					filter: {regex: '(Context)$|(ContextApp)$|^Component$', match: true}
 				},
-				{ selector: ['typeParameter', 'typeAlias'], format: ['PascalCase'], prefix: ['T'] },
-				{ selector: 'interface', format: ['PascalCase'], prefix: ['I'] },
-			],
-			'@typescript-eslint/no-misused-promises': [
-				'error',
-				{ checksConditionals: true, checksVoidReturn: false },
+				{selector: ['typeParameter', 'typeAlias'], format: ['PascalCase'], prefix: ['T']},
+				{selector: 'interface', format: ['PascalCase'], prefix: ['I']}
 			],
+			'@typescript-eslint/no-misused-promises': ['error', {checksConditionals: true, checksVoidReturn: false}],
 			'@typescript-eslint/no-non-null-asserted-nullish-coalescing': 'error',
 			'@typescript-eslint/no-unnecessary-qualifier': 'error',
 			'@typescript-eslint/no-unnecessary-type-arguments': 'error',
@@ -197,16 +182,16 @@ export default tseslint.config(
 				'error',
 				{
 					allowComparingNullableBooleansToTrue: false,
-					allowComparingNullableBooleansToFalse: false,
-				},
+					allowComparingNullableBooleansToFalse: false
+				}
 			],
 			'@typescript-eslint/prefer-for-of': 'error',
 			'@typescript-eslint/prefer-function-type': 'error',
 			'@typescript-eslint/prefer-includes': 'error',
 			'@typescript-eslint/promise-function-async': 'error',
-		'@typescript-eslint/require-array-sort-compare': 'error',
-		'brace-style': 'off',
-		'@typescript-eslint/prefer-optional-chain': 'error',
+			'@typescript-eslint/require-array-sort-compare': 'error',
+			'brace-style': 'off',
+			'@typescript-eslint/prefer-optional-chain': 'error',
 			indent: 'off',
 			'@typescript-eslint/indent': 0,
 
@@ -218,14 +203,14 @@ export default tseslint.config(
 					vars: 'all',
 					varsIgnorePattern: '^_',
 					args: 'after-used',
-					argsIgnorePattern: '^_',
-				},
+					argsIgnorePattern: '^_'
+				}
 			],
 
 			// Tailwind rules
-			'tailwindcss/no-custom-classname': 0,
+			'tailwindcss/no-custom-classname': 0
 
 			// Next.js rules - using Next.js built-in ESLint config instead
-		},
-	},
-);
+		}
+	}
+)
diff --git a/next.config.ts b/next.config.ts
index 693383f..47fc358 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
+
+const strapiHostname = process.env.NEXT_PUBLIC_STRAPI_URL ? new URL(process.env.NEXT_PUBLIC_STRAPI_URL).hostname : null
+
 const nextConfig = {
 	crossOrigin: 'anonymous',
 	/* config options here */
@@ -6,7 +9,8 @@ const nextConfig = {
 	images: {
 		remotePatterns: [
 			{protocol: 'https', hostname: 'strapi.shapeshift.com'},
-			{protocol: 'https', hostname: 'strapi.shapeshift.com'},
+			{protocol: 'https', hostname: 'website-backend-assets.shapeshift.com'},
+			...(strapiHostname ? [{protocol: 'https', hostname: strapiHostname}] : []),
 			{protocol: 'http', hostname: '172.233.242.224'}
 		]
 	},
diff --git a/package.json b/package.json
index b6a79e4..19f9669 100644
--- a/package.json
+++ b/package.json
@@ -1,63 +1,63 @@
 {
-  "name": "shapeshift",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "deadcode": "ts-prune | grep -v 'page\\.tsx\\|loading\\.tsx\\|layout\\.tsx'",
-    "release": "bun scripts/release.ts"
-  },
-  "dependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@types/semver": "^7.7.0",
-    "framer-motion": "^12.0.6",
-    "highlight.js": "^11.11.1",
-    "katex": "^0.16.21",
-    "motion": "^12.4.7",
-    "next": "^15.1.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-markdown": "^9.0.3",
-    "react-paginate": "^8.3.0",
-    "react-weglot": "^1.0.4",
-    "rehype-highlight": "^7.0.2",
-    "rehype-katex": "^7.0.1",
-    "remark-emoji": "^5.0.1",
-    "remark-footnotes": "^5.0.0",
-    "remark-gfm": "^4.0.1",
-    "remark-math": "^6.0.0",
-    "semver": "^7.7.2",
-    "typescript-eslint": "^8.19.1",
-    "usehooks-ts": "^3.1.1"
-  },
-  "devDependencies": {
-    "@types/inquirer": "8.2.10",
-    "@types/node": "^20",
-    "@types/pify": "^5.0.4",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "chalk": "^4.1.2",
-    "eslint": "^9.17.0",
-    "eslint-config-next": "^14.2.3",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-brackets": "^0.1.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-tailwindcss": "^3.17.5",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "inquirer": "^8.2.6",
-    "pify": "^5.0.0",
-    "postcss": "^8",
-    "postcss-nesting": "^13.0.1",
-    "prettier": "^3.3.2",
-    "simple-git": "^3.27.0",
-    "tailwindcss": "^3.4.1",
-    "ts-prune": "^0.10.3",
-    "typescript": "^5"
-  }
+	"name": "shapeshift",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev --turbopack",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint",
+		"deadcode": "ts-prune | grep -v 'page\\.tsx\\|loading\\.tsx\\|layout\\.tsx'",
+		"release": "bun scripts/release.ts"
+	},
+	"dependencies": {
+		"@headlessui/react": "^2.2.0",
+		"@types/semver": "^7.7.0",
+		"framer-motion": "^12.0.6",
+		"highlight.js": "^11.11.1",
+		"katex": "^0.16.21",
+		"motion": "^12.4.7",
+		"next": "^15.1.9",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-markdown": "^9.0.3",
+		"react-paginate": "^8.3.0",
+		"react-weglot": "^1.0.4",
+		"rehype-highlight": "^7.0.2",
+		"rehype-katex": "^7.0.1",
+		"remark-emoji": "^5.0.1",
+		"remark-footnotes": "^5.0.0",
+		"remark-gfm": "^4.0.1",
+		"remark-math": "^6.0.0",
+		"semver": "^7.7.2",
+		"typescript-eslint": "^8.19.1",
+		"usehooks-ts": "^3.1.1"
+	},
+	"devDependencies": {
+		"@types/inquirer": "8.2.10",
+		"@types/node": "^20",
+		"@types/pify": "^5.0.4",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"chalk": "^4.1.2",
+		"eslint": "^9.17.0",
+		"eslint-config-next": "^14.2.3",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^3.7.0",
+		"eslint-plugin-brackets": "^0.1.3",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-react": "^7.34.1",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"eslint-plugin-tailwindcss": "^3.17.5",
+		"eslint-plugin-unused-imports": "^4.1.4",
+		"inquirer": "^8.2.6",
+		"pify": "^5.0.0",
+		"postcss": "^8",
+		"postcss-nesting": "^13.0.1",
+		"prettier": "^3.3.2",
+		"simple-git": "^3.27.0",
+		"tailwindcss": "^3.4.1",
+		"ts-prune": "^0.10.3",
+		"typescript": "^5"
+	}
 }
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 9ff442d..c0f93ff 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -3,6 +3,6 @@ const config = {
 	plugins: {
 		tailwindcss: {}
 	}
-};
+}
 
-export default config;
+export default config
diff --git a/scripts/release.ts b/scripts/release.ts
index 5367bd0..9c379c4 100755
--- a/scripts/release.ts
+++ b/scripts/release.ts
@@ -65,7 +65,7 @@ const inquireProceedWithCommits = async (commits: string[], action: 'create' | '
 			default: 'y',
 			name: 'shouldProceed',
 			message,
-			choices: ['y', 'n'],
+			choices: ['y', 'n']
 		}
 	]
 	const {shouldProceed} = await inquirer.prompt(questions)
@@ -75,8 +75,8 @@ const inquireProceedWithCommits = async (commits: string[], action: 'create' | '
 }
 
 const releaseType = ['Regular', 'Hotfix'] as const
-type TReleaseType = (typeof releaseType)[number];
-type TWebReleaseType = Extract<semver.ReleaseType, 'minor' | 'patch'>;
+type TReleaseType = (typeof releaseType)[number]
+type TWebReleaseType = Extract<semver.ReleaseType, 'minor' | 'patch'>
 
 const getNextReleaseVersion = async (versionBump: TWebReleaseType): Promise<string> => {
 	const latestTag = await getLatestSemverTag()
@@ -94,7 +94,7 @@ const inquireCleanBranchOffMain = async (): Promise<boolean> => {
 			type: 'confirm',
 			name: 'isCleanlyBranched',
 			message: 'Is your branch cleanly branched off origin/main?',
-			default: false, // Defaulting to false to encourage verification
+			default: false // Defaulting to false to encourage verification
 		}
 	]
 	const {isCleanlyBranched} = await inquirer.prompt(questions)
@@ -107,7 +107,7 @@ const inquireTReleaseType = async (): Promise<TReleaseType> => {
 			type: 'list',
 			name: 'releaseType',
 			message: 'What type of release is this?',
-			choices: releaseType,
+			choices: releaseType
 		}
 	]
 	return (await inquirer.prompt(questions)).releaseType
@@ -151,8 +151,8 @@ const createRelease = async (): Promise<void> => {
 		if (currentBranch === 'main') {
 			console.log(
 				chalk.red(
-					'Cannot open hotfix PRs directly off local main branch for security reasons. Please branch out to another branch first.',
-				),
+					'Cannot open hotfix PRs directly off local main branch for security reasons. Please branch out to another branch first.'
+				)
 			)
 			exit()
 		}
@@ -161,11 +161,7 @@ const createRelease = async (): Promise<void> => {
 		// target it in the hotfix PR
 		const isCleanOffMain = await inquireCleanBranchOffMain()
 		if (!isCleanOffMain) {
-			exit(
-				chalk.yellow(
-					'Please ensure your branch is cleanly branched off origin/main before proceeding.',
-				),
-			)
+			exit(chalk.yellow('Please ensure your branch is cleanly branched off origin/main before proceeding.'))
 		}
 
 		// Dev has confirmed they're clean off main, here goes nothing
diff --git a/scripts/utils.ts b/scripts/utils.ts
index 00decae..5c5fa19 100644
--- a/scripts/utils.ts
+++ b/scripts/utils.ts
@@ -8,12 +8,12 @@ export const getLatestSemverTag = async (): Promise<string> => {
 	try {
 		const tags = await git().tag(['-l', '--sort=-version:refname'])
 		const semverTags = tags.split('\n').filter(tag => semver.valid(tag.replace(/^v/, '')))
-		
+
 		if (semverTags.length === 0) {
 			console.log(chalk.yellow('No semver tags found. Starting from v1.0.0'))
 			return 'v1.0.0'
 		}
-		
+
 		return semverTags[0]
 	} catch {
 		console.log(chalk.yellow('Could not get latest semver tag. Starting from v1.0.0'))
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fbc35ec..fb5566d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type {Config} from 'tailwindcss';
+import type {Config} from 'tailwindcss'
 
 export default {
 	content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
@@ -51,4 +51,4 @@ export default {
 		}
 	},
 	plugins: []
-} satisfies Config;
+} satisfies Config

From 37ddfa289384169a4b1ca73d0f2db90f0b7f8604 Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Mon, 23 Feb 2026 10:44:30 -0700
Subject: [PATCH 2/5] lint and railway config

---
 .gitignore                                    |    1 +
 .prettierrc                                   |   12 -
 .../_components/BackgroundImage.tsx           |   19 +-
 .../_components/DownloadButtons.tsx           |   48 +-
 .../_components/ProductFetcher.ts             |   78 +-
 .../_components/ProductFooterBanner.tsx       |   58 +-
 .../_components/ProductHero.tsx               |   96 +-
 .../_components/ProductStats.tsx              |   54 +-
 .../(core-products)/_components/TradeHero.tsx |  114 +-
 .../(core-products)/_components/constants.ts  |   48 +-
 .../(core-products)/_components/fetchUtils.ts |   44 +-
 .../(core-products)/defi-wallet/page.tsx      |  195 +-
 app/[lang]/(core-products)/earn/page.tsx      |  188 +-
 .../(core-products)/mobile-app/page.tsx       |  187 +-
 app/[lang]/(core-products)/trade/page.tsx     |  209 +-
 .../(resources)/_components/ChainList.tsx     |   68 +-
 .../_components/DiscoverFeature.tsx           |  198 +-
 .../(resources)/_components/FAQContent.tsx    |  310 ++-
 .../(resources)/_components/FAQNavigation.tsx |   65 +-
 .../_components/NewsroomBreadcrumb.tsx        |   33 +-
 .../(resources)/_components/NewsroomNav.tsx   |   66 +-
 .../(resources)/_components/NewsroomTitle.tsx |   76 +-
 .../(resources)/_components/PostList.tsx      |  206 +-
 .../(resources)/_components/ProtocolAbout.tsx |   35 +-
 .../_components/ProtocolEasier.tsx            |   77 +-
 .../_components/ProtocolFeatures.tsx          |  449 ++---
 .../_components/ProtocolHeader.tsx            |  105 +-
 .../(resources)/_components/ProtocolList.tsx  |   64 +-
 .../(resources)/_components/ResourceCard.tsx  |  161 +-
 .../(resources)/_components/ResourceGrid.tsx  |   76 +-
 .../_components/ResourceHeader.tsx            |  149 +-
 .../(resources)/_components/ResourceHero.tsx  |  104 +-
 .../_components/SupportArticleList.tsx        |  209 +-
 .../SupportArticleListSkeleton.tsx            |   80 +-
 .../_components/SupportedWalletAccelerate.tsx |  127 +-
 .../_components/SupportedWalletHeader.tsx     |   65 +-
 .../_components/SupportedWalletHero.tsx       |   39 +-
 .../(resources)/_components/WalletList.tsx    |   62 +-
 app/[lang]/(resources)/_utils/constants.ts    |    6 +-
 app/[lang]/(resources)/_utils/fetchUtils.ts   |  198 +-
 .../blog/(withNavigation)/BlogBreadcrumb.tsx  |   33 +-
 .../blog/(withNavigation)/BlogNav.tsx         |   66 +-
 .../blog/(withNavigation)/BlogTitle.tsx       |   76 +-
 .../categories/[category]/ListOfPosts.tsx     |   28 +-
 .../categories/[category]/page.tsx            |   34 +-
 .../blog/(withNavigation)/layout.tsx          |   28 +-
 .../blog/(withNavigation)/page.tsx            |    6 +-
 .../tags/[tag]/ListOfPosts.tsx                |  140 +-
 .../blog/(withNavigation)/tags/[tag]/page.tsx |   34 +-
 .../blog/(withNavigation)/tags/page.tsx       |  132 +-
 .../(resources)/blog/[slug]/BlogContent.tsx   |  374 ++--
 .../(resources)/blog/[slug]/BlogSkeleton.tsx  |   62 +-
 app/[lang]/(resources)/blog/[slug]/layout.tsx |  102 +-
 app/[lang]/(resources)/blog/[slug]/page.tsx   |  146 +-
 app/[lang]/(resources)/chains/[slug]/page.tsx |  200 +-
 .../chains/_components/ChainSearchWrapper.tsx |  112 +-
 app/[lang]/(resources)/chains/layout.tsx      |   58 +-
 app/[lang]/(resources)/chains/page.tsx        |  155 +-
 .../(resources)/discover/[slug]/page.tsx      |  262 +--
 .../_components/DiscoverSearchWrapper.tsx     |   97 +-
 app/[lang]/(resources)/discover/layout.tsx    |   58 +-
 app/[lang]/(resources)/discover/page.tsx      |   50 +-
 app/[lang]/(resources)/faq/page.tsx           |   44 +-
 .../categories/[category]/ListOfPosts.tsx     |  140 +-
 .../categories/[category]/page.tsx            |   34 +-
 .../(withNavigation)/categories/page.tsx      |  132 +-
 .../newsroom/(withNavigation)/layout.tsx      |   28 +-
 .../newsroom/(withNavigation)/page.tsx        |  132 +-
 .../tags/[tag]/ListOfPosts.tsx                |  138 +-
 .../(withNavigation)/tags/[tag]/page.tsx      |   34 +-
 .../newsroom/(withNavigation)/tags/page.tsx   |  132 +-
 .../(resources)/newsroom/[slug]/layout.tsx    |  102 +-
 .../(resources)/newsroom/[slug]/page.tsx      |  498 +++--
 .../(resources)/protocols/[slug]/page.tsx     |  184 +-
 .../_components/ProtocolSearchWrapper.tsx     |  103 +-
 app/[lang]/(resources)/protocols/layout.tsx   |   58 +-
 app/[lang]/(resources)/protocols/page.tsx     |   82 +-
 .../support/(withNavigation)/page.tsx         |   14 +-
 .../support/[slug]/SupportArticleContent.tsx  |  365 ++--
 .../(resources)/support/[slug]/page.tsx       |  141 +-
 .../(resources)/wallets/[slug]/page.tsx       |  174 +-
 .../_components/WalletSearchWrapper.tsx       |   87 +-
 app/[lang]/(resources)/wallets/layout.tsx     |   58 +-
 app/[lang]/(resources)/wallets/page.tsx       |  122 +-
 .../(terms)/_components/TermsAccordion.tsx    |  145 +-
 .../(terms)/_components/TermsMarkdown.tsx     |  256 +--
 app/[lang]/(terms)/_components/TermsPage.tsx  |  107 +-
 app/[lang]/(terms)/_components/utils.ts       |   52 +-
 app/[lang]/(terms)/error.tsx                  |   52 +-
 app/[lang]/(terms)/layout.tsx                 |   46 +-
 app/[lang]/(terms)/privacy-policy/page.tsx    |   27 +-
 app/[lang]/(terms)/terms-of-service/page.tsx  |   27 +-
 app/[lang]/_components/AnimatedHeight.tsx     |   79 +-
 app/[lang]/_components/Banner.tsx             |  122 +-
 app/[lang]/_components/BlogList.tsx           |   50 +-
 app/[lang]/_components/BlogPost.tsx           |  234 ++-
 app/[lang]/_components/Button.tsx             |   90 +-
 app/[lang]/_components/Carousel.tsx           |   71 +-
 app/[lang]/_components/ChainsBanner.tsx       |   75 +-
 app/[lang]/_components/ChatwootWidget.tsx     |  484 +++--
 .../_components/ChatwootWidgetWrapper.tsx     |   12 +-
 app/[lang]/_components/Dropdown.tsx           |  107 +-
 app/[lang]/_components/ElementCard.tsx        |  135 +-
 app/[lang]/_components/Footer.tsx             |  127 +-
 app/[lang]/_components/FooterBanner.tsx       |  156 +-
 app/[lang]/_components/HeaderItem.tsx         |   55 +-
 app/[lang]/_components/LandingCard.tsx        |  101 +-
 app/[lang]/_components/LandingInfoCard.tsx    |   25 +-
 app/[lang]/_components/LocalizedLink.tsx      |  102 +-
 app/[lang]/_components/Modal.tsx              |  174 +-
 app/[lang]/_components/NewsPost.tsx           |  116 +-
 app/[lang]/_components/Notification.tsx       |  264 ++-
 app/[lang]/_components/NotificationBar.tsx    |   81 +-
 app/[lang]/_components/Popup.tsx              |  178 +-
 app/[lang]/_components/QuestionSection.tsx    |  118 +-
 app/[lang]/_components/RoundButton.tsx        |   55 +-
 app/[lang]/_components/SearchBar.tsx          |   36 +-
 app/[lang]/_components/StrapiDiscover.tsx     |   72 +-
 app/[lang]/_components/StrapiFAQ.tsx          |   70 +-
 app/[lang]/_components/TabItem.tsx            |  108 +-
 app/[lang]/_components/WalletRequestCard.tsx  |   68 +-
 app/[lang]/_components/WithFonts.tsx          |   47 +-
 app/[lang]/_components/header/DaoExpand.tsx   |   79 +-
 .../_components/header/DesktopHeader.tsx      |  246 ++-
 app/[lang]/_components/header/Header.tsx      |   33 +-
 .../_components/header/LanguageExpand.tsx     |   73 +-
 .../_components/header/MobileHeader.tsx       |  405 ++--
 .../_components/header/ProductsExpand.tsx     |   80 +-
 .../_components/header/ResourcesExpand.tsx    |   66 +-
 app/[lang]/_components/header/animations.ts   |   30 +-
 .../_components/strapi/cards-row/Card.tsx     |  180 +-
 .../_components/strapi/cards-row/CardsRow.tsx |   71 +-
 .../strapi/products/BuyCryptoCard.tsx         |   64 +-
 .../strapi/products/CarouselCard.tsx          |  100 +-
 .../strapi/products/ChainBubblesCard.tsx      |  196 +-
 .../_components/strapi/products/Grid.tsx      |  125 +-
 .../strapi/products/GridDisplaced.tsx         |  116 +-
 .../strapi/products/GridLadder.tsx            |  144 +-
 .../strapi/templates/ChainActions.tsx         |  180 +-
 .../strapi/templates/ChainDescription.tsx     |   29 +-
 .../strapi/templates/ChainFeatures.tsx        | 1463 +++++++-------
 .../strapi/templates/ChainHeader.tsx          |   56 +-
 .../strapi/templates/ChainHero.tsx            |   37 +-
 app/[lang]/_components/strapi/types.ts        |  444 ++---
 .../_components/trading/ChainSelect.tsx       |  151 +-
 .../_components/trading/TokenSelect.tsx       |  172 +-
 .../_components/trading/TradingWidget.tsx     |  716 ++++---
 .../_contexts/CachedArticlesContext.tsx       |  135 +-
 app/[lang]/_contexts/CachedNewsContext.tsx    |  147 +-
 app/[lang]/_contexts/CachedPostsContext.tsx   |  147 +-
 app/[lang]/_contexts/LanguageContext.tsx      |  339 ++--
 app/[lang]/_hooks/useDebounce.ts              |   30 +-
 app/[lang]/_hooks/useFetchNewsroom.tsx        |  240 +--
 app/[lang]/_hooks/useFetchPosts.tsx           |  252 +--
 app/[lang]/_hooks/useFetchSupportArticles.ts  |  190 +-
 app/[lang]/_hooks/useIsMobile.ts              |   16 +-
 app/[lang]/_icons/IconActivityRings.tsx       |   92 +-
 app/[lang]/_icons/IconArrow.tsx               |   44 +-
 app/[lang]/_icons/IconBack.tsx                |   30 +-
 app/[lang]/_icons/IconBlog.tsx                |   60 +-
 app/[lang]/_icons/IconBorrow.tsx              |  112 +-
 app/[lang]/_icons/IconBulb.tsx                |   56 +-
 app/[lang]/_icons/IconBuySell.tsx             |   88 +-
 app/[lang]/_icons/IconChains.tsx              |   76 +-
 app/[lang]/_icons/IconCheck.tsx               |   30 +-
 app/[lang]/_icons/IconCheckCircle.tsx         |   70 +-
 app/[lang]/_icons/IconChevron.tsx             |   24 +-
 app/[lang]/_icons/IconClassic.tsx             |   78 +-
 app/[lang]/_icons/IconClose.tsx               |   44 +-
 app/[lang]/_icons/IconDapp.tsx                |   56 +-
 app/[lang]/_icons/IconDiscord.tsx             |   28 +-
 app/[lang]/_icons/IconDiscover.tsx            |   74 +-
 app/[lang]/_icons/IconDocs.tsx                |   92 +-
 app/[lang]/_icons/IconDollar.tsx              |  102 +-
 app/[lang]/_icons/IconEarn.tsx                |   74 +-
 app/[lang]/_icons/IconFox.tsx                 |   28 +-
 app/[lang]/_icons/IconGlobe.tsx               |   34 +-
 app/[lang]/_icons/IconGovern.tsx              |   92 +-
 app/[lang]/_icons/IconHeart.tsx               |   52 +-
 app/[lang]/_icons/IconHold.tsx                |  126 +-
 app/[lang]/_icons/IconKey.tsx                 |   44 +-
 app/[lang]/_icons/IconMedium.tsx              |   71 +-
 app/[lang]/_icons/IconMenu.tsx                |  100 +-
 app/[lang]/_icons/IconMinus.tsx               |   23 +-
 app/[lang]/_icons/IconMobile.tsx              |   60 +-
 app/[lang]/_icons/IconNext.tsx                |   37 +-
 app/[lang]/_icons/IconPercent.tsx             |   84 +-
 app/[lang]/_icons/IconPlanet.tsx              |   34 +-
 app/[lang]/_icons/IconPlus.tsx                |   30 +-
 app/[lang]/_icons/IconQuestion.tsx            |   28 +-
 app/[lang]/_icons/IconResource.tsx            |  110 +-
 app/[lang]/_icons/IconScanDevice.tsx          |  108 +-
 app/[lang]/_icons/IconSendReceive.tsx         |   54 +-
 app/[lang]/_icons/IconShapeshift.tsx          |   28 +-
 app/[lang]/_icons/IconShield.tsx              |   32 +-
 app/[lang]/_icons/IconStar.tsx                |   56 +-
 app/[lang]/_icons/IconSupport.tsx             |  134 +-
 app/[lang]/_icons/IconTelegram.tsx            |   32 +-
 app/[lang]/_icons/IconTrade.tsx               |  116 +-
 app/[lang]/_icons/IconTriLink.tsx             |   80 +-
 app/[lang]/_icons/IconTwitter.tsx             |   28 +-
 app/[lang]/_icons/IconWallet.tsx              |   52 +-
 app/[lang]/_icons/IconWarpcast.tsx            |   66 +-
 app/[lang]/_icons/ShapeshiftLogo.tsx          |  160 +-
 app/[lang]/_utils/cl.ts                       |    2 +-
 app/[lang]/_utils/constants.tsx               | 1690 ++++++++---------
 app/[lang]/_utils/dictionary/dao.ts           |   16 +-
 app/[lang]/_utils/dictionary/products.ts      |   40 +-
 app/[lang]/_utils/dictionary/resources.ts     |   51 +-
 app/[lang]/_utils/formatNumber.ts             |   16 +-
 app/[lang]/_utils/i18nconfig.ts               |   98 +-
 app/[lang]/_utils/isHtml.ts                   |    2 +-
 app/[lang]/_utils/query.ts                    |  150 +-
 app/[lang]/_utils/schema.ts                   |  214 +--
 app/[lang]/dao/docs/page.tsx                  |    4 +-
 app/[lang]/dao/forum/page.tsx                 |    4 +-
 app/[lang]/dao/fox-token/page.tsx             |  298 ++-
 app/[lang]/dao/governance/page.tsx            |    4 +-
 app/[lang]/dao/page.tsx                       |    4 +-
 app/[lang]/page.tsx                           |  584 +++---
 app/api/chatwoot/[...path]/route.ts           |  244 +--
 app/layout.tsx                                |  193 +-
 app/manifest.ts                               |   42 +-
 app/metadata.ts                               |   96 +-
 app/not-found.tsx                             |   62 +-
 app/page.tsx                                  |  550 +++---
 bun.lockb                                     |  Bin 275255 -> 277266 bytes
 eslint.config.mjs                             |   42 +-
 middleware.ts                                 |  262 +--
 package.json                                  |    6 +-
 railway.json                                  |   23 +
 scripts/release.ts                            |  440 ++---
 scripts/utils.ts                              |   26 +-
 233 files changed, 13581 insertions(+), 15021 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 railway.json

diff --git a/.gitignore b/.gitignore
index 588db45..303815c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@
 
 # misc
 .DS_Store
+.eslintcache
 *.pem
 
 # debug
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index ca544ea..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-	"singleQuote": true,
-	"semi": false,
-	"useTabs": true,
-	"tabWidth": 4,
-	"trailingComma": "none",
-	"bracketSpacing": false,
-	"arrowParens": "avoid",
-	"bracketSameLine": true,
-	"singleAttributePerLine": true,
-	"printWidth": 120
-}
diff --git a/app/[lang]/(core-products)/_components/BackgroundImage.tsx b/app/[lang]/(core-products)/_components/BackgroundImage.tsx
index 30032d1..ae5c281 100644
--- a/app/[lang]/(core-products)/_components/BackgroundImage.tsx
+++ b/app/[lang]/(core-products)/_components/BackgroundImage.tsx
@@ -18,19 +18,12 @@
 
 import Image from 'next/image'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export function BackgroundImage(): ReactNode {
-	return (
-		<div className={'absolute inset-0 hidden lg:block'}>
-			<Image
-				src={'/heroBg.png'}
-				alt={''}
-				aria-hidden={'true'}
-				height={2256}
-				width={3840}
-				priority
-			/>
-		</div>
-	)
+  return (
+    <div className={'absolute inset-0 hidden lg:block'}>
+      <Image src={'/heroBg.png'} alt={''} aria-hidden={'true'} height={2256} width={3840} priority />
+    </div>
+  )
 }
diff --git a/app/[lang]/(core-products)/_components/DownloadButtons.tsx b/app/[lang]/(core-products)/_components/DownloadButtons.tsx
index 46b7b80..689c73a 100644
--- a/app/[lang]/(core-products)/_components/DownloadButtons.tsx
+++ b/app/[lang]/(core-products)/_components/DownloadButtons.tsx
@@ -17,36 +17,32 @@
 
 import Image from 'next/image'
 
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
 
-import type {TDownloadButton} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TDownloadButton } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TDownloadButtonsProps = {
-	buttons: TDownloadButton[]
+  buttons: TDownloadButton[]
 }
 
-export function DownloadButtons({buttons}: TDownloadButtonsProps): ReactNode {
-	if (!buttons || buttons.length === 0) {
-		return null
-	}
+export function DownloadButtons({ buttons }: TDownloadButtonsProps): ReactNode {
+  if (!buttons || buttons.length === 0) {
+    return null
+  }
 
-	return (
-		<div className={'flex gap-4'}>
-			{buttons.map(button => (
-				<LocalizedLink
-					href={button.url ?? ''}
-					target={'_blank'}
-					className={'h-[40px] w-[130px]'}
-					key={button.id}>
-					<Image
-						src={`/${button.variant}.png`}
-						alt={button.variant === 'appstore' ? 'Download on App Store' : 'Get it on Google Play'}
-						width={390}
-						height={120}
-					/>
-				</LocalizedLink>
-			))}
-		</div>
-	)
+  return (
+    <div className={'flex gap-4'}>
+      {buttons.map((button) => (
+        <LocalizedLink href={button.url ?? ''} target={'_blank'} className={'h-[40px] w-[130px]'} key={button.id}>
+          <Image
+            src={`/${button.variant}.png`}
+            alt={button.variant === 'appstore' ? 'Download on App Store' : 'Get it on Google Play'}
+            width={390}
+            height={120}
+          />
+        </LocalizedLink>
+      ))}
+    </div>
+  )
 }
diff --git a/app/[lang]/(core-products)/_components/ProductFetcher.ts b/app/[lang]/(core-products)/_components/ProductFetcher.ts
index f3fbbe0..8381484 100644
--- a/app/[lang]/(core-products)/_components/ProductFetcher.ts
+++ b/app/[lang]/(core-products)/_components/ProductFetcher.ts
@@ -27,18 +27,18 @@
  **   // Use typed page data safely in your component
  ************************************************************************************************/
 
-import {fetchWithErrorHandling} from './fetchUtils'
+import { fetchWithErrorHandling } from './fetchUtils'
 
 import type {
-	TButton,
-	TCardsRowSection,
-	TDownloadButton,
-	TFooterSection,
-	TGridDisplacedSection,
-	TGridLadderSection,
-	TGridSection,
-	TStat,
-	TStrapiImage
+  TButton,
+  TCardsRowSection,
+  TDownloadButton,
+  TFooterSection,
+  TGridDisplacedSection,
+  TGridLadderSection,
+  TGridSection,
+  TStat,
+  TStrapiImage,
 } from '@/app/[lang]/_components/strapi/types'
 
 /************************************************************************************************
@@ -53,10 +53,10 @@ import type {
  * Base type containing properties common to all product pages
  ************************************************************************************************/
 type TBaseProductPage = {
-	title: string
-	description: string
-	featuredImg: TStrapiImage
-	footer: TFooterSection
+  title: string
+  description: string
+  featuredImg: TStrapiImage
+  footer: TFooterSection
 }
 
 /************************************************************************************************
@@ -64,9 +64,9 @@ type TBaseProductPage = {
  * Features card row layout highlighting wallet capabilities
  ************************************************************************************************/
 type TDeFiWalletPage = TBaseProductPage & {
-	buttonCta: TButton
-	buttonDownload: TButton[]
-	cardsRow: TCardsRowSection
+  buttonCta: TButton
+  buttonDownload: TButton[]
+  cardsRow: TCardsRowSection
 }
 
 /************************************************************************************************
@@ -74,9 +74,9 @@ type TDeFiWalletPage = TBaseProductPage & {
  * Features grid layout showcasing earning opportunities
  ************************************************************************************************/
 type TEarnPage = TBaseProductPage & {
-	buttonCta: TButton
-	buttonDownload: TButton[]
-	grid: TGridSection
+  buttonCta: TButton
+  buttonDownload: TButton[]
+  grid: TGridSection
 }
 
 /************************************************************************************************
@@ -84,9 +84,9 @@ type TEarnPage = TBaseProductPage & {
  * Features step-by-step ladder grid and download buttons
  ************************************************************************************************/
 type TMobileAppPage = TBaseProductPage & {
-	buttonCta: TButton
-	buttonDownload: TDownloadButton[]
-	gridLadder: TGridLadderSection
+  buttonCta: TButton
+  buttonDownload: TDownloadButton[]
+  gridLadder: TGridLadderSection
 }
 
 /************************************************************************************************
@@ -94,10 +94,10 @@ type TMobileAppPage = TBaseProductPage & {
  * Features statistics, card row, and displaced grid layout
  ************************************************************************************************/
 type TTradePage = TBaseProductPage & {
-	buttonCta: TButton
-	stats: TStat[]
-	cardsRow: TCardsRowSection
-	gridDisplaced: TGridDisplacedSection
+  buttonCta: TButton
+  stats: TStat[]
+  cardsRow: TCardsRowSection
+  gridDisplaced: TGridDisplacedSection
 }
 
 /************************************************************************************************
@@ -112,10 +112,10 @@ type TTradePage = TBaseProductPage & {
  * @returns Promise resolving to page data or null if not found/error
  ************************************************************************************************/
 export async function fetchDeFiWalletPage(): Promise<TDeFiWalletPage | null> {
-	const queryParams =
-		'fields[0]=title&populate[1]=buttonCta&fields[2]=description&populate[3]=featuredImg&populate[4]=cardsRow&populate[5]=cardsRow.cards&populate[6]=cardsRow.cards.image&populate[7]=cardsRow.ctaBlock&populate[8]=cardsRow.ctaBlock.icon&pagination[pageSize]=1&pagination[page]=1&status=published'
+  const queryParams =
+    'fields[0]=title&populate[1]=buttonCta&fields[2]=description&populate[3]=featuredImg&populate[4]=cardsRow&populate[5]=cardsRow.cards&populate[6]=cardsRow.cards.image&populate[7]=cardsRow.ctaBlock&populate[8]=cardsRow.ctaBlock.icon&pagination[pageSize]=1&pagination[page]=1&status=published'
 
-	return fetchWithErrorHandling<TDeFiWalletPage>('defi-wallet', queryParams, 'DeFi Wallet page')
+  return fetchWithErrorHandling<TDeFiWalletPage>('defi-wallet', queryParams, 'DeFi Wallet page')
 }
 
 /************************************************************************************************
@@ -130,10 +130,10 @@ export async function fetchDeFiWalletPage(): Promise<TDeFiWalletPage | null> {
  * @returns Promise resolving to page data or null if not found/error
  ************************************************************************************************/
 export async function fetchEarnPage(): Promise<TEarnPage | null> {
-	const queryParams =
-		'fields[0]=title&populate[1]=buttonCta&populate[3]=featuredImg&fields[4]=description&populate[10]=grid&populate[11]=grid.cardCta&populate[12]=grid.cardCta.buttonCta&populate[13]=grid.cardCta.imageBg&populate[14]=grid.card&populate[15]=grid.card.image&pagination[pageSize]=10&pagination[page]=1&status=published&locale=en'
+  const queryParams =
+    'fields[0]=title&populate[1]=buttonCta&populate[3]=featuredImg&fields[4]=description&populate[10]=grid&populate[11]=grid.cardCta&populate[12]=grid.cardCta.buttonCta&populate[13]=grid.cardCta.imageBg&populate[14]=grid.card&populate[15]=grid.card.image&pagination[pageSize]=10&pagination[page]=1&status=published&locale=en'
 
-	return fetchWithErrorHandling<TEarnPage>('earn', queryParams, 'Earn page')
+  return fetchWithErrorHandling<TEarnPage>('earn', queryParams, 'Earn page')
 }
 
 /************************************************************************************************
@@ -148,10 +148,10 @@ export async function fetchEarnPage(): Promise<TEarnPage | null> {
  * @returns Promise resolving to page data or null if not found/error
  ************************************************************************************************/
 export async function fetchMobileAppPage(): Promise<TMobileAppPage | null> {
-	const queryParams =
-		'fields[0]=title&populate[1]=buttonDownload&fields[2]=description&populate[3]=featuredImg&populate[4]=gridLadder&populate[5]=gridLadder.steps&populate[6]=gridLadder.steps.buttonCta&populate[7]=gridLadder.steps.image&pagination[pageSize]=1&pagination[page]=1&status=published'
+  const queryParams =
+    'fields[0]=title&populate[1]=buttonDownload&fields[2]=description&populate[3]=featuredImg&populate[4]=gridLadder&populate[5]=gridLadder.steps&populate[6]=gridLadder.steps.buttonCta&populate[7]=gridLadder.steps.image&pagination[pageSize]=1&pagination[page]=1&status=published'
 
-	return fetchWithErrorHandling<TMobileAppPage>('mobile-app', queryParams, 'Mobile App page')
+  return fetchWithErrorHandling<TMobileAppPage>('mobile-app', queryParams, 'Mobile App page')
 }
 
 /************************************************************************************************
@@ -168,8 +168,8 @@ export async function fetchMobileAppPage(): Promise<TMobileAppPage | null> {
  * @returns Promise resolving to page data or null if not found/error
  ************************************************************************************************/
 export async function fetchTradePage(): Promise<TTradePage | null> {
-	const queryParams =
-		'fields[0]=title&populate[1]=buttonCta&fields[2]=description&populate[3]=featuredImg&populate[4]=stats&populate[5]=cardsRow&populate[6]=cardsRow.cards&populate[7]=cardsRow.cards.image&populate[8]=cardsRow.ctaBlock&populate[9]=cardsRow.ctaBlock.icon&populate[20]=gridDisplaced&populate[21]=gridDisplaced.cards&populate[22]=gridDisplaced.cards.image&pagination[pageSize]=10&populate[23]=gridDisplaced.cards.items&populate[24]=gridDisplaced.cards.items.image&pagination[page]=1&status=published&locale=en'
+  const queryParams =
+    'fields[0]=title&populate[1]=buttonCta&fields[2]=description&populate[3]=featuredImg&populate[4]=stats&populate[5]=cardsRow&populate[6]=cardsRow.cards&populate[7]=cardsRow.cards.image&populate[8]=cardsRow.ctaBlock&populate[9]=cardsRow.ctaBlock.icon&populate[20]=gridDisplaced&populate[21]=gridDisplaced.cards&populate[22]=gridDisplaced.cards.image&pagination[pageSize]=10&populate[23]=gridDisplaced.cards.items&populate[24]=gridDisplaced.cards.items.image&pagination[page]=1&status=published&locale=en'
 
-	return fetchWithErrorHandling<TTradePage>('trade', queryParams, 'Trade page')
+  return fetchWithErrorHandling<TTradePage>('trade', queryParams, 'Trade page')
 }
diff --git a/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx b/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx
index a1d837c..ba44fbd 100644
--- a/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx
+++ b/app/[lang]/(core-products)/_components/ProductFooterBanner.tsx
@@ -17,45 +17,33 @@
  ** - Maintains consistent branding and messaging
  ************************************************************************************************/
 
-import {FooterBanner, FooterBannerMobileApp} from '@/app/[lang]/_components/FooterBanner'
+import { FooterBanner, FooterBannerMobileApp } from '@/app/[lang]/_components/FooterBanner'
 
-import {PRODUCT_FOOTER_CONFIGS} from './constants'
+import { PRODUCT_FOOTER_CONFIGS } from './constants'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TProductFooterBannerProps = {
-	productName: keyof typeof PRODUCT_FOOTER_CONFIGS
+  productName: keyof typeof PRODUCT_FOOTER_CONFIGS
 }
 
-export function ProductFooterBanner({productName}: TProductFooterBannerProps): ReactNode {
-	// Get configuration for the specified product
-	const config = PRODUCT_FOOTER_CONFIGS[productName]
-
-	// Verify config exists to prevent runtime errors
-	if (!config) {
-		console.error(`No footer configuration found for product: ${productName}`)
-		return null
-	}
-
-	// Use mobile-app specific banner for the mobile app product
-	if (productName === 'mobile-app') {
-		return (
-			<FooterBannerMobileApp
-				tag={config.tag}
-				title={config.title}
-				href={config.href}
-				buttonText={config.buttonText}
-			/>
-		)
-	}
-
-	// Standard footer banner for other products
-	return (
-		<FooterBanner
-			tag={config.tag}
-			title={config.title}
-			href={config.href}
-			buttonText={config.buttonText}
-		/>
-	)
+export function ProductFooterBanner({ productName }: TProductFooterBannerProps): ReactNode {
+  // Get configuration for the specified product
+  const config = PRODUCT_FOOTER_CONFIGS[productName]
+
+  // Verify config exists to prevent runtime errors
+  if (!config) {
+    console.error(`No footer configuration found for product: ${productName}`)
+    return null
+  }
+
+  // Use mobile-app specific banner for the mobile app product
+  if (productName === 'mobile-app') {
+    return (
+      <FooterBannerMobileApp tag={config.tag} title={config.title} href={config.href} buttonText={config.buttonText} />
+    )
+  }
+
+  // Standard footer banner for other products
+  return <FooterBanner tag={config.tag} title={config.title} href={config.href} buttonText={config.buttonText} />
 }
diff --git a/app/[lang]/(core-products)/_components/ProductHero.tsx b/app/[lang]/(core-products)/_components/ProductHero.tsx
index ca7c53c..9270a0f 100644
--- a/app/[lang]/(core-products)/_components/ProductHero.tsx
+++ b/app/[lang]/(core-products)/_components/ProductHero.tsx
@@ -19,60 +19,60 @@
 
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { Button } from '@/app/[lang]/_components/Button'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {TButton, TStrapiImage} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TButton, TStrapiImage } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TProductHeroProps = {
-	title: string
-	description: string
-	buttonCta?: TButton // Optional because mobile-app doesn't use it
-	featuredImg: TStrapiImage
-	children?: ReactNode // Additional content like stats or download buttons
-	buttonClassName?: string
+  title: string
+  description: string
+  buttonCta?: TButton // Optional because mobile-app doesn't use it
+  featuredImg: TStrapiImage
+  children?: ReactNode // Additional content like stats or download buttons
+  buttonClassName?: string
 }
 
 export function ProductHero({
-	title,
-	description,
-	buttonCta,
-	featuredImg,
-	children,
-	buttonClassName = '!w-full lg:!w-[232px]'
+  title,
+  description,
+  buttonCta,
+  featuredImg,
+  children,
+  buttonClassName = '!w-full lg:!w-[232px]',
 }: TProductHeroProps): ReactNode {
-	return (
-		<section className={'relative mb-[120px] pt-10 md:px-4 lg:mb-60 lg:px-0 lg:pt-52'}>
-			<div className={'container mx-auto'}>
-				<div className={'grid gap-10 lg:grid-cols-2'}>
-					<h1 className={'mb-4 text-4xl font-normal leading-10 lg:text-7xl'}>{title}</h1>
-					<div className={'flex flex-col'}>
-						<p className={'mb-8 text-sm font-normal text-gray-500 lg:text-xl'}>{description}</p>
-						{buttonCta ? (
-							<Button
-								variant={'blue'}
-								title={buttonCta?.title ?? 'Title'}
-								href={buttonCta?.url ?? '/'}
-								hasArrow
-								className={buttonClassName}
-							/>
-						) : null}
-						{children}
-					</div>
-				</div>
+  return (
+    <section className={'relative mb-[120px] pt-10 md:px-4 lg:mb-60 lg:px-0 lg:pt-52'}>
+      <div className={'container mx-auto'}>
+        <div className={'grid gap-10 lg:grid-cols-2'}>
+          <h1 className={'mb-4 text-4xl font-normal leading-10 lg:text-7xl'}>{title}</h1>
+          <div className={'flex flex-col'}>
+            <p className={'mb-8 text-sm font-normal text-gray-500 lg:text-xl'}>{description}</p>
+            {buttonCta ? (
+              <Button
+                variant={'blue'}
+                title={buttonCta?.title ?? 'Title'}
+                href={buttonCta?.url ?? '/'}
+                hasArrow
+                className={buttonClassName}
+              />
+            ) : null}
+            {children}
+          </div>
+        </div>
 
-				<div className={'mt-20 aspect-[1400/400] overflow-hidden rounded-2xl'}>
-					<Image
-						src={getStrapiImageUrl(featuredImg.url)}
-						className={'aspect-[1400/400] w-full'}
-						alt={title || 'Product feature image'}
-						quality={100}
-						width={2800}
-						height={800}
-					/>
-				</div>
-			</div>
-		</section>
-	)
+        <div className={'mt-20 aspect-[1400/400] overflow-hidden rounded-2xl'}>
+          <Image
+            src={getStrapiImageUrl(featuredImg.url)}
+            className={'aspect-[1400/400] w-full'}
+            alt={title || 'Product feature image'}
+            quality={100}
+            width={2800}
+            height={800}
+          />
+        </div>
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/(core-products)/_components/ProductStats.tsx b/app/[lang]/(core-products)/_components/ProductStats.tsx
index 7f8f3e7..3584ddf 100644
--- a/app/[lang]/(core-products)/_components/ProductStats.tsx
+++ b/app/[lang]/(core-products)/_components/ProductStats.tsx
@@ -16,35 +16,37 @@
  ** - Stats will be arranged in a row (desktop) or column (mobile)
  ************************************************************************************************/
 
-import type {TStat} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TStat } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TProductStatsProps = {
-	stats: TStat[]
+  stats: TStat[]
 }
 
-export function ProductStats({stats = []}: TProductStatsProps): ReactNode {
-	// Handle case where stats is null, undefined, or empty
-	if (!stats || stats.length === 0) {
-		return <div className={'mb-10 mt-16 text-center text-gray-400'}>{'No statistics available'}</div>
-	}
+export function ProductStats({ stats = [] }: TProductStatsProps): ReactNode {
+  // Handle case where stats is null, undefined, or empty
+  if (!stats || stats.length === 0) {
+    return <div className={'mb-10 mt-16 text-center text-gray-400'}>{'No statistics available'}</div>
+  }
 
-	return (
-		<div
-			className={
-				'container mb-[120px] mt-2 grid w-full grid-cols-1 gap-6 rounded-2xl bg-secondBg p-6 lg:mb-60 lg:grid-cols-3'
-			}>
-			{stats.map(stat => (
-				<div
-					key={stat.id}
-					className={'flex min-w-[400px] flex-col items-center lg:min-w-[245px] lg:px-[50px]'}
-					aria-label={`${stat.title}: ${stat.value}`}>
-					<div className={'text-2xl font-normal leading-tight md:text-3xl lg:text-[40px] lg:leading-[48px]'}>
-						{stat.value}
-					</div>
-					<div className={'text-lg text-gray-500 lg:text-xl'}>{stat.title}</div>
-				</div>
-			))}
-		</div>
-	)
+  return (
+    <div
+      className={
+        'container mb-[120px] mt-2 grid w-full grid-cols-1 gap-6 rounded-2xl bg-secondBg p-6 lg:mb-60 lg:grid-cols-3'
+      }
+    >
+      {stats.map((stat) => (
+        <div
+          key={stat.id}
+          className={'flex min-w-[400px] flex-col items-center lg:min-w-[245px] lg:px-[50px]'}
+          aria-label={`${stat.title}: ${stat.value}`}
+        >
+          <div className={'text-2xl font-normal leading-tight md:text-3xl lg:text-[40px] lg:leading-[48px]'}>
+            {stat.value}
+          </div>
+          <div className={'text-lg text-gray-500 lg:text-xl'}>{stat.title}</div>
+        </div>
+      ))}
+    </div>
+  )
 }
diff --git a/app/[lang]/(core-products)/_components/TradeHero.tsx b/app/[lang]/(core-products)/_components/TradeHero.tsx
index fe66b36..78ad47b 100644
--- a/app/[lang]/(core-products)/_components/TradeHero.tsx
+++ b/app/[lang]/(core-products)/_components/TradeHero.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 /************************************************************************************************
  ** TradeHero Component:
  **
@@ -19,68 +19,64 @@ import {Button} from '@/app/[lang]/_components/Button'
  ** - Requires 'use client' directive for client-side interactivity
  ************************************************************************************************/
 
-import type {TButton} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TButton } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TTradeHeroProps = {
-	title: string
-	description: string
-	buttonCta: TButton
-	imageUrl: string
+  title: string
+  description: string
+  buttonCta: TButton
+  imageUrl: string
 }
 
-export function TradeHero({title, description, buttonCta, imageUrl}: TTradeHeroProps): ReactNode {
-	// Handle button click to open URL in new tab with security precautions
-	const handleButtonClick = (): void => {
-		if (buttonCta?.url) {
-			window.open(buttonCta.url, '_blank', 'noopener,noreferrer')
-		}
-	}
+export function TradeHero({ title, description, buttonCta, imageUrl }: TTradeHeroProps): ReactNode {
+  // Handle button click to open URL in new tab with security precautions
+  const handleButtonClick = (): void => {
+    if (buttonCta?.url) {
+      window.open(buttonCta.url, '_blank', 'noopener,noreferrer')
+    }
+  }
 
-	return (
-		<section
-			className={'relative mb-[120px] pt-10 md:px-4 lg:mb-60 lg:px-0 lg:pt-52'}
-			aria-labelledby={'trade-hero-title'}>
-			<div className={'container mx-auto'}>
-				{/* Title, description and CTA button */}
-				<div className={'grid gap-10 lg:grid-cols-2'}>
-					<h1
-						id={'trade-hero-title'}
-						className={'mb-4 text-4xl font-normal leading-10 lg:text-7xl'}>
-						{title}
-					</h1>
-					<div className={'flex flex-col'}>
-						<p className={'mb-8 text-sm font-normal text-gray-500 lg:text-xl'}>{description}</p>
-						{buttonCta && (
-							<Button
-								variant={'blue'}
-								onClick={handleButtonClick}
-								hasArrow
-								title={buttonCta?.title || 'Learn more'}
-								aria-label={`${buttonCta?.title || 'Learn more'} about trading`}
-							/>
-						)}
-					</div>
-				</div>
+  return (
+    <section
+      className={'relative mb-[120px] pt-10 md:px-4 lg:mb-60 lg:px-0 lg:pt-52'}
+      aria-labelledby={'trade-hero-title'}
+    >
+      <div className={'container mx-auto'}>
+        {/* Title, description and CTA button */}
+        <div className={'grid gap-10 lg:grid-cols-2'}>
+          <h1 id={'trade-hero-title'} className={'mb-4 text-4xl font-normal leading-10 lg:text-7xl'}>
+            {title}
+          </h1>
+          <div className={'flex flex-col'}>
+            <p className={'mb-8 text-sm font-normal text-gray-500 lg:text-xl'}>{description}</p>
+            {buttonCta && (
+              <Button
+                variant={'blue'}
+                onClick={handleButtonClick}
+                hasArrow
+                title={buttonCta?.title || 'Learn more'}
+                aria-label={`${buttonCta?.title || 'Learn more'} about trading`}
+              />
+            )}
+          </div>
+        </div>
 
-				{/* Featured image with responsive display */}
-				<div className={'mt-20 overflow-hidden rounded-2xl'}>
-					<picture>
-						<source
-							media={'(min-width: 1024px)'}
-							srcSet={imageUrl}
-						/>
-						<img
-							src={imageUrl}
-							alt={title || 'Trade feature image'}
-							className={'h-auto w-full'}
-							loading={'eager'} // Load with priority as it's above the fold
-							width={1400}
-							height={400}
-						/>
-					</picture>
-				</div>
-			</div>
-		</section>
-	)
+        {/* Featured image with responsive display */}
+        <div className={'mt-20 overflow-hidden rounded-2xl'}>
+          <picture>
+            <source media={'(min-width: 1024px)'} srcSet={imageUrl} />
+            <img
+              src={imageUrl}
+              alt={title || 'Trade feature image'}
+              className={'h-auto w-full'}
+              loading={'eager'} // Load with priority as it's above the fold
+              width={1400}
+              height={400}
+            />
+          </picture>
+        </div>
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/(core-products)/_components/constants.ts b/app/[lang]/(core-products)/_components/constants.ts
index 7850432..bca2029 100644
--- a/app/[lang]/(core-products)/_components/constants.ts
+++ b/app/[lang]/(core-products)/_components/constants.ts
@@ -19,28 +19,28 @@
  * Contains display text, button text, and target URLs
  */
 export const PRODUCT_FOOTER_CONFIGS = {
-	'defi-wallet': {
-		tag: 'ShapeShift DeFi wallet',
-		title: 'Everything you need in one place.',
-		buttonText: 'Get started',
-		href: 'https://app.shapeshift.com'
-	},
-	earn: {
-		tag: 'Earn with ShapeShift',
-		title: 'Everything you need in one place.',
-		buttonText: 'Start Earning',
-		href: 'https://app.shapeshift.com/#/earn'
-	},
-	trade: {
-		tag: 'Trade with ShapeShift',
-		title: 'Everything you need in one place.',
-		buttonText: 'Start Trading',
-		href: 'https://app.shapeshift.com/'
-	},
-	'mobile-app': {
-		tag: 'ShapeShift mobile app',
-		title: 'Everything you need in one place.',
-		buttonText: 'Start Earning',
-		href: 'https://app.shapeshift.com/#/earn'
-	}
+  'defi-wallet': {
+    tag: 'ShapeShift DeFi wallet',
+    title: 'Everything you need in one place.',
+    buttonText: 'Get started',
+    href: 'https://app.shapeshift.com',
+  },
+  earn: {
+    tag: 'Earn with ShapeShift',
+    title: 'Everything you need in one place.',
+    buttonText: 'Start Earning',
+    href: 'https://app.shapeshift.com/#/earn',
+  },
+  trade: {
+    tag: 'Trade with ShapeShift',
+    title: 'Everything you need in one place.',
+    buttonText: 'Start Trading',
+    href: 'https://app.shapeshift.com/',
+  },
+  'mobile-app': {
+    tag: 'ShapeShift mobile app',
+    title: 'Everything you need in one place.',
+    buttonText: 'Start Earning',
+    href: 'https://app.shapeshift.com/#/earn',
+  },
 }
diff --git a/app/[lang]/(core-products)/_components/fetchUtils.ts b/app/[lang]/(core-products)/_components/fetchUtils.ts
index 2381ea6..6f643dd 100644
--- a/app/[lang]/(core-products)/_components/fetchUtils.ts
+++ b/app/[lang]/(core-products)/_components/fetchUtils.ts
@@ -7,29 +7,29 @@
  * @returns Properly typed response data or null on error
  ************************************************************************************************/
 export async function fetchWithErrorHandling<T>(
-	endpoint: string,
-	queryParams: string,
-	error: string
+  endpoint: string,
+  queryParams: string,
+  error: string
 ): Promise<T | null> {
-	try {
-		const response = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/${endpoint}?${queryParams}`, {
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			},
-			next: {
-				revalidate: 3600 // Cache for 1 hour
-			}
-		})
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/${endpoint}?${queryParams}`, {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+      next: {
+        revalidate: 3600, // Cache for 1 hour
+      },
+    })
 
-		if (!response.ok) {
-			console.error(`Failed to fetch ${error}: Status ${response.status}`)
-			return null
-		}
+    if (!response.ok) {
+      console.error(`Failed to fetch ${error}: Status ${response.status}`)
+      return null
+    }
 
-		const data = await response.json()
-		return data.data
-	} catch (error) {
-		console.error(`Error fetching ${error}:`, error instanceof Error ? error.message : String(error))
-		return null
-	}
+    const data = await response.json()
+    return data.data
+  } catch (error) {
+    console.error(`Error fetching ${error}:`, error instanceof Error ? error.message : String(error))
+    return null
+  }
 }
diff --git a/app/[lang]/(core-products)/defi-wallet/page.tsx b/app/[lang]/(core-products)/defi-wallet/page.tsx
index 1f257a3..b1ec4bb 100644
--- a/app/[lang]/(core-products)/defi-wallet/page.tsx
+++ b/app/[lang]/(core-products)/defi-wallet/page.tsx
@@ -15,114 +15,111 @@
  ** - Includes text content, button configurations, and images
  ************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 import Script from 'next/script'
 
-import {Card} from '@/app/[lang]/_components/strapi/cards-row/Card'
+import { Card } from '@/app/[lang]/_components/strapi/cards-row/Card'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
-import {generateProductSchema} from '@/app/[lang]/_utils/schema'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
-import {BackgroundImage} from '../_components/BackgroundImage'
-import {fetchDeFiWalletPage} from '../_components/ProductFetcher'
-import {ProductFooterBanner} from '../_components/ProductFooterBanner'
-import {ProductHero} from '../_components/ProductHero'
+import { BackgroundImage } from '../_components/BackgroundImage'
+import { fetchDeFiWalletPage } from '../_components/ProductFetcher'
+import { ProductFooterBanner } from '../_components/ProductFooterBanner'
+import { ProductHero } from '../_components/ProductHero'
 
-import type {TCard} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TCard } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 // Generate metadata for SEO
 export async function generateMetadata(): Promise<Metadata> {
-	const page = await fetchDeFiWalletPage()
-
-	if (!page) {
-		return {}
-	}
-
-	return {
-		title: page.title,
-		description: page.description,
-		openGraph: {
-			title: page.title,
-			description: page.description,
-			type: 'website',
-			images: [
-				{
-					url: getStrapiImageUrl(page.featuredImg.url),
-					width: 1200,
-					height: 630,
-					alt: page.title
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: page.title,
-			description: page.description,
-			images: [getStrapiImageUrl(page.featuredImg.url)]
-		}
-	}
+  const page = await fetchDeFiWalletPage()
+
+  if (!page) {
+    return {}
+  }
+
+  return {
+    title: page.title,
+    description: page.description,
+    openGraph: {
+      title: page.title,
+      description: page.description,
+      type: 'website',
+      images: [
+        {
+          url: getStrapiImageUrl(page.featuredImg.url),
+          width: 1200,
+          height: 630,
+          alt: page.title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: page.title,
+      description: page.description,
+      images: [getStrapiImageUrl(page.featuredImg.url)],
+    },
+  }
 }
 
 export default async function DeFiWalletPage(): Promise<ReactNode> {
-	// Fetch page data from Strapi CMS
-	const page = await fetchDeFiWalletPage()
-
-	// Handle case where page data is not found
-	if (!page) {
-		console.error('DeFi Wallet page data not found')
-		return notFound()
-	}
-
-	// Generate structured data for product
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
-	const pageURL = `${baseUrl}/defi-wallet`
-
-	// Map card data to features format for schema
-	const features = page.cardsRow.cards.map(card => ({
-		title: card.title,
-		description: card.description
-	}))
-
-	// Generate product schema
-	const productSchema = generateProductSchema({
-		title: page.title,
-		description: page.description,
-		featuredImage: getStrapiImageUrl(page.featuredImg.url),
-		pageURL,
-		features
-	})
-
-	return (
-		<main className={'flex w-full flex-col items-center justify-center'}>
-			{/* Add structured data */}
-			<Script
-				id={'product-schema'}
-				type={'application/ld+json'}
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				dangerouslySetInnerHTML={{__html: JSON.stringify(productSchema)}}
-			/>
-
-			{/* Background image (desktop only) */}
-			<BackgroundImage />
-
-			{/* Hero section with title, description and CTA */}
-			<ProductHero
-				title={page.title}
-				description={page.description}
-				buttonCta={page.buttonCta}
-				featuredImg={page.featuredImg}
-			/>
-
-			{/* Feature cards section */}
-			<CardsRow
-				data={page.cardsRow}
-				children={(card: TCard) => <Card data={card} />}
-			/>
-
-			{/* Footer banner with CTA */}
-			<ProductFooterBanner productName={'defi-wallet'} />
-		</main>
-	)
+  // Fetch page data from Strapi CMS
+  const page = await fetchDeFiWalletPage()
+
+  // Handle case where page data is not found
+  if (!page) {
+    console.error('DeFi Wallet page data not found')
+    return notFound()
+  }
+
+  // Generate structured data for product
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+  const pageURL = `${baseUrl}/defi-wallet`
+
+  // Map card data to features format for schema
+  const features = page.cardsRow.cards.map((card) => ({
+    title: card.title,
+    description: card.description,
+  }))
+
+  // Generate product schema
+  const productSchema = generateProductSchema({
+    title: page.title,
+    description: page.description,
+    featuredImage: getStrapiImageUrl(page.featuredImg.url),
+    pageURL,
+    features,
+  })
+
+  return (
+    <main className={'flex w-full flex-col items-center justify-center'}>
+      {/* Add structured data */}
+      <Script
+        id={'product-schema'}
+        type={'application/ld+json'}
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
+      />
+
+      {/* Background image (desktop only) */}
+      <BackgroundImage />
+
+      {/* Hero section with title, description and CTA */}
+      <ProductHero
+        title={page.title}
+        description={page.description}
+        buttonCta={page.buttonCta}
+        featuredImg={page.featuredImg}
+      />
+
+      {/* Feature cards section */}
+      <CardsRow data={page.cardsRow} children={(card: TCard) => <Card data={card} />} />
+
+      {/* Footer banner with CTA */}
+      <ProductFooterBanner productName={'defi-wallet'} />
+    </main>
+  )
 }
diff --git a/app/[lang]/(core-products)/earn/page.tsx b/app/[lang]/(core-products)/earn/page.tsx
index 49a3f0a..eedc1dc 100644
--- a/app/[lang]/(core-products)/earn/page.tsx
+++ b/app/[lang]/(core-products)/earn/page.tsx
@@ -15,109 +15,109 @@
  ** - Includes text content, button configurations, and images
  ************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 import Script from 'next/script'
 
 import Grid from '@/app/[lang]/_components/strapi/products/Grid'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
-import {generateProductSchema} from '@/app/[lang]/_utils/schema'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
-import {BackgroundImage} from '../_components/BackgroundImage'
-import {fetchEarnPage} from '../_components/ProductFetcher'
-import {ProductFooterBanner} from '../_components/ProductFooterBanner'
-import {ProductHero} from '../_components/ProductHero'
+import { BackgroundImage } from '../_components/BackgroundImage'
+import { fetchEarnPage } from '../_components/ProductFetcher'
+import { ProductFooterBanner } from '../_components/ProductFooterBanner'
+import { ProductHero } from '../_components/ProductHero'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 // Generate metadata for SEO
 export async function generateMetadata(): Promise<Metadata> {
-	const page = await fetchEarnPage()
-
-	if (!page) {
-		return {}
-	}
-
-	return {
-		title: page.title,
-		description: page.description,
-		openGraph: {
-			title: page.title,
-			description: page.description,
-			type: 'website',
-			images: [
-				{
-					url: getStrapiImageUrl(page.featuredImg.url),
-					width: 1200,
-					height: 630,
-					alt: page.title
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: page.title,
-			description: page.description,
-			images: [getStrapiImageUrl(page.featuredImg.url)]
-		}
-	}
+  const page = await fetchEarnPage()
+
+  if (!page) {
+    return {}
+  }
+
+  return {
+    title: page.title,
+    description: page.description,
+    openGraph: {
+      title: page.title,
+      description: page.description,
+      type: 'website',
+      images: [
+        {
+          url: getStrapiImageUrl(page.featuredImg.url),
+          width: 1200,
+          height: 630,
+          alt: page.title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: page.title,
+      description: page.description,
+      images: [getStrapiImageUrl(page.featuredImg.url)],
+    },
+  }
 }
 
 export default async function EarnPage(): Promise<ReactNode> {
-	// Fetch page data from Strapi CMS
-	const page = await fetchEarnPage()
-
-	// Handle case where page data is not found
-	if (!page) {
-		console.error('Earn page data not found')
-		return notFound()
-	}
-
-	// Generate structured data for product
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
-	const pageURL = `${baseUrl}/earn`
-
-	// Map grid card data to features format for schema
-	const features = page.grid.card.map(card => ({
-		title: card.title,
-		description: card.description
-	}))
-
-	// Generate product schema
-	const productSchema = generateProductSchema({
-		title: page.title,
-		description: page.description,
-		featuredImage: getStrapiImageUrl(page.featuredImg.url),
-		pageURL,
-		features
-	})
-
-	return (
-		<main className={'flex w-full flex-col items-center justify-center'}>
-			{/* Add structured data */}
-			<Script
-				id={'product-schema'}
-				type={'application/ld+json'}
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				dangerouslySetInnerHTML={{__html: JSON.stringify(productSchema)}}
-			/>
-
-			{/* Background image (desktop only) */}
-			<BackgroundImage />
-
-			{/* Hero section with title, description and CTA */}
-			<ProductHero
-				title={page.title}
-				description={page.description}
-				buttonCta={page.buttonCta}
-				featuredImg={page.featuredImg}
-			/>
-
-			{/* Grid of earning opportunities */}
-			<Grid data={page.grid} />
-
-			{/* Footer banner with CTA */}
-			<ProductFooterBanner productName={'earn'} />
-		</main>
-	)
+  // Fetch page data from Strapi CMS
+  const page = await fetchEarnPage()
+
+  // Handle case where page data is not found
+  if (!page) {
+    console.error('Earn page data not found')
+    return notFound()
+  }
+
+  // Generate structured data for product
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+  const pageURL = `${baseUrl}/earn`
+
+  // Map grid card data to features format for schema
+  const features = page.grid.card.map((card) => ({
+    title: card.title,
+    description: card.description,
+  }))
+
+  // Generate product schema
+  const productSchema = generateProductSchema({
+    title: page.title,
+    description: page.description,
+    featuredImage: getStrapiImageUrl(page.featuredImg.url),
+    pageURL,
+    features,
+  })
+
+  return (
+    <main className={'flex w-full flex-col items-center justify-center'}>
+      {/* Add structured data */}
+      <Script
+        id={'product-schema'}
+        type={'application/ld+json'}
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
+      />
+
+      {/* Background image (desktop only) */}
+      <BackgroundImage />
+
+      {/* Hero section with title, description and CTA */}
+      <ProductHero
+        title={page.title}
+        description={page.description}
+        buttonCta={page.buttonCta}
+        featuredImg={page.featuredImg}
+      />
+
+      {/* Grid of earning opportunities */}
+      <Grid data={page.grid} />
+
+      {/* Footer banner with CTA */}
+      <ProductFooterBanner productName={'earn'} />
+    </main>
+  )
 }
diff --git a/app/[lang]/(core-products)/mobile-app/page.tsx b/app/[lang]/(core-products)/mobile-app/page.tsx
index d8bd487..c0268b6 100644
--- a/app/[lang]/(core-products)/mobile-app/page.tsx
+++ b/app/[lang]/(core-products)/mobile-app/page.tsx
@@ -15,110 +15,107 @@
  ** - Includes text content, download buttons, and images
  ************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 import Script from 'next/script'
 
 import GridLadder from '@/app/[lang]/_components/strapi/products/GridLadder'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
-import {generateProductSchema} from '@/app/[lang]/_utils/schema'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
-import {BackgroundImage} from '../_components/BackgroundImage'
-import {DownloadButtons} from '../_components/DownloadButtons'
-import {fetchMobileAppPage} from '../_components/ProductFetcher'
-import {ProductFooterBanner} from '../_components/ProductFooterBanner'
-import {ProductHero} from '../_components/ProductHero'
+import { BackgroundImage } from '../_components/BackgroundImage'
+import { DownloadButtons } from '../_components/DownloadButtons'
+import { fetchMobileAppPage } from '../_components/ProductFetcher'
+import { ProductFooterBanner } from '../_components/ProductFooterBanner'
+import { ProductHero } from '../_components/ProductHero'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 // Generate metadata for SEO
 export async function generateMetadata(): Promise<Metadata> {
-	const page = await fetchMobileAppPage()
-
-	if (!page) {
-		return {}
-	}
-
-	return {
-		title: page.title,
-		description: page.description,
-		openGraph: {
-			title: page.title,
-			description: page.description,
-			type: 'website',
-			images: [
-				{
-					url: getStrapiImageUrl(page.featuredImg.url),
-					width: 1200,
-					height: 630,
-					alt: page.title
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: page.title,
-			description: page.description,
-			images: [getStrapiImageUrl(page.featuredImg.url)]
-		}
-	}
+  const page = await fetchMobileAppPage()
+
+  if (!page) {
+    return {}
+  }
+
+  return {
+    title: page.title,
+    description: page.description,
+    openGraph: {
+      title: page.title,
+      description: page.description,
+      type: 'website',
+      images: [
+        {
+          url: getStrapiImageUrl(page.featuredImg.url),
+          width: 1200,
+          height: 630,
+          alt: page.title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: page.title,
+      description: page.description,
+      images: [getStrapiImageUrl(page.featuredImg.url)],
+    },
+  }
 }
 
 export default async function MobileAppPage(): Promise<ReactNode> {
-	// Fetch page data from Strapi CMS
-	const page = await fetchMobileAppPage()
-
-	// Handle case where page data is not found
-	if (!page) {
-		console.error('Mobile App page data not found')
-		return notFound()
-	}
-
-	// Generate structured data for product
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
-	const pageURL = `${baseUrl}/mobile-app`
-
-	// Map ladder step data to features format for schema
-	const features = page.gridLadder.steps.map(step => ({
-		title: step.title,
-		description: step.description
-	}))
-
-	// Generate product schema with app-specific properties
-	const productSchema = generateProductSchema({
-		title: page.title,
-		description: page.description,
-		featuredImage: getStrapiImageUrl(page.featuredImg.url),
-		pageURL,
-		features
-	})
-
-	return (
-		<main className={'flex w-full flex-col items-center justify-center'}>
-			{/* Add structured data */}
-			<Script
-				id={'product-schema'}
-				type={'application/ld+json'}
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				dangerouslySetInnerHTML={{__html: JSON.stringify(productSchema)}}
-			/>
-
-			{/* Background image (desktop only) */}
-			<BackgroundImage />
-
-			{/* Hero section with title, description and download buttons */}
-			<ProductHero
-				title={page.title}
-				description={page.description}
-				featuredImg={page.featuredImg}>
-				<DownloadButtons buttons={page.buttonDownload} />
-			</ProductHero>
-
-			{/* Step-by-step ladder grid */}
-			<GridLadder data={page.gridLadder} />
-
-			{/* Footer banner with app store links */}
-			<ProductFooterBanner productName={'mobile-app'} />
-		</main>
-	)
+  // Fetch page data from Strapi CMS
+  const page = await fetchMobileAppPage()
+
+  // Handle case where page data is not found
+  if (!page) {
+    console.error('Mobile App page data not found')
+    return notFound()
+  }
+
+  // Generate structured data for product
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+  const pageURL = `${baseUrl}/mobile-app`
+
+  // Map ladder step data to features format for schema
+  const features = page.gridLadder.steps.map((step) => ({
+    title: step.title,
+    description: step.description,
+  }))
+
+  // Generate product schema with app-specific properties
+  const productSchema = generateProductSchema({
+    title: page.title,
+    description: page.description,
+    featuredImage: getStrapiImageUrl(page.featuredImg.url),
+    pageURL,
+    features,
+  })
+
+  return (
+    <main className={'flex w-full flex-col items-center justify-center'}>
+      {/* Add structured data */}
+      <Script
+        id={'product-schema'}
+        type={'application/ld+json'}
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
+      />
+
+      {/* Background image (desktop only) */}
+      <BackgroundImage />
+
+      {/* Hero section with title, description and download buttons */}
+      <ProductHero title={page.title} description={page.description} featuredImg={page.featuredImg}>
+        <DownloadButtons buttons={page.buttonDownload} />
+      </ProductHero>
+
+      {/* Step-by-step ladder grid */}
+      <GridLadder data={page.gridLadder} />
+
+      {/* Footer banner with app store links */}
+      <ProductFooterBanner productName={'mobile-app'} />
+    </main>
+  )
 }
diff --git a/app/[lang]/(core-products)/trade/page.tsx b/app/[lang]/(core-products)/trade/page.tsx
index 37810ea..0d3df1d 100644
--- a/app/[lang]/(core-products)/trade/page.tsx
+++ b/app/[lang]/(core-products)/trade/page.tsx
@@ -17,122 +17,119 @@
  ** - Includes text content, button configurations, statistics, and images
  ************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 import Script from 'next/script'
 
-import {Card} from '@/app/[lang]/_components/strapi/cards-row/Card'
+import { Card } from '@/app/[lang]/_components/strapi/cards-row/Card'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
 import GridDisplaced from '@/app/[lang]/_components/strapi/products/GridDisplaced'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
-import {generateProductSchema} from '@/app/[lang]/_utils/schema'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
+import { generateProductSchema } from '@/app/[lang]/_utils/schema'
 
-import {BackgroundImage} from '../_components/BackgroundImage'
-import {fetchTradePage} from '../_components/ProductFetcher'
-import {ProductFooterBanner} from '../_components/ProductFooterBanner'
-import {ProductStats} from '../_components/ProductStats'
-import {TradeHero} from '../_components/TradeHero'
+import { BackgroundImage } from '../_components/BackgroundImage'
+import { fetchTradePage } from '../_components/ProductFetcher'
+import { ProductFooterBanner } from '../_components/ProductFooterBanner'
+import { ProductStats } from '../_components/ProductStats'
+import { TradeHero } from '../_components/TradeHero'
 
-import type {TCard} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TCard } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 // Generate metadata for SEO
 export async function generateMetadata(): Promise<Metadata> {
-	const page = await fetchTradePage()
-
-	if (!page) {
-		return {}
-	}
-
-	return {
-		title: page.title,
-		description: page.description,
-		openGraph: {
-			title: page.title,
-			description: page.description,
-			type: 'website',
-			images: [
-				{
-					url: getStrapiImageUrl(page.featuredImg.url),
-					width: 1200,
-					height: 630,
-					alt: page.title
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: page.title,
-			description: page.description,
-			images: [getStrapiImageUrl(page.featuredImg.url)]
-		}
-	}
+  const page = await fetchTradePage()
+
+  if (!page) {
+    return {}
+  }
+
+  return {
+    title: page.title,
+    description: page.description,
+    openGraph: {
+      title: page.title,
+      description: page.description,
+      type: 'website',
+      images: [
+        {
+          url: getStrapiImageUrl(page.featuredImg.url),
+          width: 1200,
+          height: 630,
+          alt: page.title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: page.title,
+      description: page.description,
+      images: [getStrapiImageUrl(page.featuredImg.url)],
+    },
+  }
 }
 
 export default async function TradePage(): Promise<ReactNode> {
-	// Fetch page data from Strapi CMS
-	const page = await fetchTradePage()
-
-	// Handle case where page data is not found
-	if (!page) {
-		console.error('Trade page data not found')
-		return notFound()
-	}
-
-	// Generate structured data for product
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
-	const pageURL = `${baseUrl}/trade`
-
-	// Map card data to features format for schema
-	const features = page.cardsRow.cards.map(card => ({
-		title: card.title,
-		description: card.description
-	}))
-
-	// Generate product schema
-	const productSchema = generateProductSchema({
-		title: page.title,
-		description: page.description,
-		featuredImage: getStrapiImageUrl(page.featuredImg.url),
-		pageURL,
-		features
-	})
-
-	return (
-		<main className={'flex w-full flex-col items-center justify-center'}>
-			{/* Add structured data */}
-			<Script
-				id={'product-schema'}
-				type={'application/ld+json'}
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				dangerouslySetInnerHTML={{__html: JSON.stringify(productSchema)}}
-			/>
-
-			{/* Background image (desktop only) */}
-			<BackgroundImage />
-
-			{/* Hero section with client-side interactivity for button */}
-			<TradeHero
-				title={page.title}
-				description={page.description}
-				buttonCta={page.buttonCta}
-				imageUrl={getStrapiImageUrl(page.featuredImg.url)}
-			/>
-
-			{/* Feature cards section */}
-			<CardsRow
-				data={page.cardsRow}
-				children={(card: TCard) => <Card data={card} />}
-			/>
-
-			{/* Displaced grid layout highlighting additional features */}
-			<GridDisplaced data={page.gridDisplaced} />
-
-			{/* Stats section */}
-			<ProductStats stats={page.stats} />
-
-			{/* Footer banner with CTA */}
-			<ProductFooterBanner productName={'trade'} />
-		</main>
-	)
+  // Fetch page data from Strapi CMS
+  const page = await fetchTradePage()
+
+  // Handle case where page data is not found
+  if (!page) {
+    console.error('Trade page data not found')
+    return notFound()
+  }
+
+  // Generate structured data for product
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+  const pageURL = `${baseUrl}/trade`
+
+  // Map card data to features format for schema
+  const features = page.cardsRow.cards.map((card) => ({
+    title: card.title,
+    description: card.description,
+  }))
+
+  // Generate product schema
+  const productSchema = generateProductSchema({
+    title: page.title,
+    description: page.description,
+    featuredImage: getStrapiImageUrl(page.featuredImg.url),
+    pageURL,
+    features,
+  })
+
+  return (
+    <main className={'flex w-full flex-col items-center justify-center'}>
+      {/* Add structured data */}
+      <Script
+        id={'product-schema'}
+        type={'application/ld+json'}
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
+      />
+
+      {/* Background image (desktop only) */}
+      <BackgroundImage />
+
+      {/* Hero section with client-side interactivity for button */}
+      <TradeHero
+        title={page.title}
+        description={page.description}
+        buttonCta={page.buttonCta}
+        imageUrl={getStrapiImageUrl(page.featuredImg.url)}
+      />
+
+      {/* Feature cards section */}
+      <CardsRow data={page.cardsRow} children={(card: TCard) => <Card data={card} />} />
+
+      {/* Displaced grid layout highlighting additional features */}
+      <GridDisplaced data={page.gridDisplaced} />
+
+      {/* Stats section */}
+      <ProductStats stats={page.stats} />
+
+      {/* Footer banner with CTA */}
+      <ProductFooterBanner productName={'trade'} />
+    </main>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ChainList.tsx b/app/[lang]/(resources)/_components/ChainList.tsx
index a3fc486..2b911d2 100644
--- a/app/[lang]/(resources)/_components/ChainList.tsx
+++ b/app/[lang]/(resources)/_components/ChainList.tsx
@@ -14,44 +14,42 @@
  ** - Pass chains data and optional loading state
  ************************************************************************************************/
 
-import {ResourceCard} from '@/app/[lang]/(resources)/_components/ResourceCard'
-import {ResourceGrid} from '@/app/[lang]/(resources)/_components/ResourceGrid'
+import { ResourceCard } from '@/app/[lang]/(resources)/_components/ResourceCard'
+import { ResourceGrid } from '@/app/[lang]/(resources)/_components/ResourceGrid'
 
-import type {TSupportedChainData} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportedChainData } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TChainListProps = {
-	chains: TSupportedChainData[] | null
-	isLoading?: boolean
-	className?: string
-	isSearchQuery?: boolean
+  chains: TSupportedChainData[] | null
+  isLoading?: boolean
+  className?: string
+  isSearchQuery?: boolean
 }
 
-export function ChainList({chains, isLoading, className, isSearchQuery}: TChainListProps): ReactNode {
-	return (
-		<ResourceGrid
-			items={chains}
-			isLoading={isLoading}
-			emptyMessage={
-				isSearchQuery
-					? "We couldn't find anything matching your search."
-					: 'No blockchain networks available yet.'
-			}
-			className={className}
-			renderItem={chain => (
-				<ResourceCard
-					key={chain.slug}
-					slug={chain.slug}
-					title={chain.name}
-					description={chain.description}
-					imageUrl={chain.featuredImg?.url}
-					imageWidth={chain.featuredImg?.width}
-					imageHeight={chain.featuredImg?.height}
-					baseURL={'/chains'}
-					imagePosition={'bottom'}
-					altText={`${chain.name} logo`}
-				/>
-			)}
-		/>
-	)
+export function ChainList({ chains, isLoading, className, isSearchQuery }: TChainListProps): ReactNode {
+  return (
+    <ResourceGrid
+      items={chains}
+      isLoading={isLoading}
+      emptyMessage={
+        isSearchQuery ? "We couldn't find anything matching your search." : 'No blockchain networks available yet.'
+      }
+      className={className}
+      renderItem={(chain) => (
+        <ResourceCard
+          key={chain.slug}
+          slug={chain.slug}
+          title={chain.name}
+          description={chain.description}
+          imageUrl={chain.featuredImg?.url}
+          imageWidth={chain.featuredImg?.width}
+          imageHeight={chain.featuredImg?.height}
+          baseURL={'/chains'}
+          imagePosition={'bottom'}
+          altText={`${chain.name} logo`}
+        />
+      )}
+    />
+  )
 }
diff --git a/app/[lang]/(resources)/_components/DiscoverFeature.tsx b/app/[lang]/(resources)/_components/DiscoverFeature.tsx
index 674b8ad..0b4a51a 100644
--- a/app/[lang]/(resources)/_components/DiscoverFeature.tsx
+++ b/app/[lang]/(resources)/_components/DiscoverFeature.tsx
@@ -19,119 +19,115 @@
 
 import Image from 'next/image'
 
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TFeatureItem = {
-	id?: number
-	title: string
-	description: string
-	image?: {
-		url: string
-		width: number
-		height: number
-		alt?: string
-	}
-	buttonCta?: {
-		title: string
-		url: string
-	}
+  id?: number
+  title: string
+  description: string
+  image?: {
+    url: string
+    width: number
+    height: number
+    alt?: string
+  }
+  buttonCta?: {
+    title: string
+    url: string
+  }
 }
 
 type TDiscoverFeatureProps = {
-	features: TFeatureItem[]
-	title?: string
-	description?: string
-	columns?: 2 | 3 | 4
-	className?: string
+  features: TFeatureItem[]
+  title?: string
+  description?: string
+  columns?: 2 | 3 | 4
+  className?: string
 }
 
 export function DiscoverFeature({
-	features,
-	title,
-	description,
-	columns = 3,
-	className
+  features,
+  title,
+  description,
+  columns = 3,
+  className,
 }: TDiscoverFeatureProps): ReactNode {
-	if (!features || features.length === 0) {
-		return null
-	}
+  if (!features || features.length === 0) {
+    return null
+  }
 
-	// Get the grid columns class based on the columns prop
-	const gridColumnsClass = {
-		2: 'md:grid-cols-2',
-		3: 'md:grid-cols-2 lg:grid-cols-3',
-		4: 'md:grid-cols-2 lg:grid-cols-4'
-	}[columns]
+  // Get the grid columns class based on the columns prop
+  const gridColumnsClass = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-2 lg:grid-cols-3',
+    4: 'md:grid-cols-2 lg:grid-cols-4',
+  }[columns]
 
-	return (
-		<section
-			className={cl('mb-20 mt-32', className)}
-			aria-labelledby={'features-title'}>
-			{/* Optional title and description */}
-			{title && (
-				<div className={'mb-16 text-center'}>
-					<h2
-						id={'features-title'}
-						className={'mb-4 text-4xl'}>
-						{title}
-					</h2>
-					{description && <p className={'mx-auto max-w-3xl text-lg text-gray-500'}>{description}</p>}
-				</div>
-			)}
+  return (
+    <section className={cl('mb-20 mt-32', className)} aria-labelledby={'features-title'}>
+      {/* Optional title and description */}
+      {title && (
+        <div className={'mb-16 text-center'}>
+          <h2 id={'features-title'} className={'mb-4 text-4xl'}>
+            {title}
+          </h2>
+          {description && <p className={'mx-auto max-w-3xl text-lg text-gray-500'}>{description}</p>}
+        </div>
+      )}
 
-			{/* Features grid */}
-			<div className={cl('grid gap-8', gridColumnsClass)}>
-				{features.map((feature, index) => (
-					<div
-						key={feature.id || index}
-						className={'flex flex-col items-start rounded-2xl bg-secondBg p-6'}>
-						{/* Feature image if provided */}
-						{feature.image?.url && (
-							<div className={'mb-6'}>
-								<Image
-									src={getStrapiImageUrl(feature.image.url)}
-									alt={feature.image.alt || feature.title}
-									width={feature.image.width || 64}
-									height={feature.image.height || 64}
-									className={'size-16 object-contain'}
-								/>
-							</div>
-						)}
+      {/* Features grid */}
+      <div className={cl('grid gap-8', gridColumnsClass)}>
+        {features.map((feature, index) => (
+          <div key={feature.id || index} className={'flex flex-col items-start rounded-2xl bg-secondBg p-6'}>
+            {/* Feature image if provided */}
+            {feature.image?.url && (
+              <div className={'mb-6'}>
+                <Image
+                  src={getStrapiImageUrl(feature.image.url)}
+                  alt={feature.image.alt || feature.title}
+                  width={feature.image.width || 64}
+                  height={feature.image.height || 64}
+                  className={'size-16 object-contain'}
+                />
+              </div>
+            )}
 
-						{/* Feature title and description */}
-						<h3 className={'mb-2 text-xl font-medium'}>{feature.title}</h3>
-						<p className={'whitespace-break-spaces break-keep text-gray-500'}>{feature.description}</p>
-						{/* CTA under description (only if provided) */}
-						{feature.buttonCta?.url && feature.buttonCta?.title ? (
-							<div className={'mt-4'}>
-								{feature.buttonCta.url.startsWith('/') ? (
-									<LocalizedLink
-										href={feature.buttonCta.url}
-										className={
-											'inline-flex items-center rounded-xl px-4 py-2 text-sm font-medium bg-primary text-white hover:opacity-90'
-										}>
-										{feature.buttonCta.title}
-									</LocalizedLink>
-								) : /^(https?:)\/\//i.test(feature.buttonCta.url) ? (
-									<a
-										href={feature.buttonCta.url}
-										target={'_blank'}
-										rel={'noopener noreferrer'}
-										className={
-											'inline-flex items-center rounded-xl px-4 py-2 text-sm font-medium bg-primary text-white hover:opacity-90'
-										}>
-										{feature.buttonCta.title}
-									</a>
-								) : null}
-							</div>
-						) : null}
-					</div>
-				))}
-			</div>
-		</section>
-	)
+            {/* Feature title and description */}
+            <h3 className={'mb-2 text-xl font-medium'}>{feature.title}</h3>
+            <p className={'whitespace-break-spaces break-keep text-gray-500'}>{feature.description}</p>
+            {/* CTA under description (only if provided) */}
+            {feature.buttonCta?.url && feature.buttonCta?.title ? (
+              <div className={'mt-4'}>
+                {feature.buttonCta.url.startsWith('/') ? (
+                  <LocalizedLink
+                    href={feature.buttonCta.url}
+                    className={
+                      'inline-flex items-center rounded-xl px-4 py-2 text-sm font-medium bg-primary text-white hover:opacity-90'
+                    }
+                  >
+                    {feature.buttonCta.title}
+                  </LocalizedLink>
+                ) : /^(https?:)\/\//i.test(feature.buttonCta.url) ? (
+                  <a
+                    href={feature.buttonCta.url}
+                    target={'_blank'}
+                    rel={'noopener noreferrer'}
+                    className={
+                      'inline-flex items-center rounded-xl px-4 py-2 text-sm font-medium bg-primary text-white hover:opacity-90'
+                    }
+                  >
+                    {feature.buttonCta.title}
+                  </a>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/FAQContent.tsx b/app/[lang]/(resources)/_components/FAQContent.tsx
index 4b7b306..5d814ec 100644
--- a/app/[lang]/(resources)/_components/FAQContent.tsx
+++ b/app/[lang]/(resources)/_components/FAQContent.tsx
@@ -19,170 +19,162 @@
 
 'use client'
 
-import {useEffect, useRef, useState} from 'react'
+import { useEffect, useRef, useState } from 'react'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {QuestionSection} from '@/app/[lang]/_components/QuestionSection'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { QuestionSection } from '@/app/[lang]/_components/QuestionSection'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
 
-import {FAQNavigation} from './FAQNavigation'
+import { FAQNavigation } from './FAQNavigation'
 
-import type {TFaqData, TFaqSection} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TFaqData, TFaqSection } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TFAQContentProps = {
-	faqData: TFaqData
+  faqData: TFaqData
 }
 
-export function FAQContent({faqData}: TFAQContentProps): ReactNode {
-	const [activeSection, setActiveSection] = useState<string>('')
-	const sectionRefs = useRef<Record<string, HTMLElement | null>>({})
-	const isManualScrolling = useRef(false)
-	const rafId = useRef<number>()
-
-	/************************************************************************************************
-	 ** Scroll Handling
-	 **
-	 ** Detects which section is currently in view during scrolling
-	 ** Uses requestAnimationFrame for performance and prevents interference during manual scrolling
-	 ************************************************************************************************/
-	useEffect(() => {
-		const handleScroll = (): void => {
-			// Skip scroll handling when user has manually clicked a section
-			if (isManualScrolling.current) {
-				return
-			}
-
-			// Cancel any pending animation frame to avoid rapid updates
-			if (rafId.current) {
-				cancelAnimationFrame(rafId.current)
-			}
-
-			// Use requestAnimationFrame for better performance
-			rafId.current = requestAnimationFrame(() => {
-				// Calculate positions of all sections
-				const sectionPositions = Object.entries(sectionRefs.current).map(([title, element]) => ({
-					title,
-					top: element?.getBoundingClientRect().top ?? 0
-				}))
-
-				// Find which section is closest to our target position (160px from top)
-				// This accounts for the header height and provides a good UX
-				const closestSection = sectionPositions.reduce(
-					(closest, current) => {
-						const currentDistance = Math.abs(current.top - 160)
-						const closestDistance = Math.abs(closest.top - 160)
-						return currentDistance < closestDistance ? current : closest
-					},
-					sectionPositions[0] || {title: '', top: 0}
-				)
-
-				// Update the active section
-				setActiveSection(closestSection.title)
-			})
-		}
-
-		// Add scroll event listener
-		window.addEventListener('scroll', handleScroll)
-
-		// Initialize by triggering the scroll handler
-		handleScroll()
-
-		// Clean up event listener and any pending animation frames
-		return () => {
-			window.removeEventListener('scroll', handleScroll)
-			if (rafId.current) {
-				cancelAnimationFrame(rafId.current)
-			}
-		}
-	}, [])
-
-	/************************************************************************************************
-	 ** Section Navigation
-	 **
-	 ** Handles user clicking on a section in the navigation
-	 ** Implements smooth scrolling and temporary disables scroll tracking
-	 ************************************************************************************************/
-	const scrollToSection = (sectionTitle: string): void => {
-		const element = sectionRefs.current[sectionTitle]
-		if (!element) {
-			return
-		}
-
-		// Flag that we're manually scrolling to prevent interference
-		isManualScrolling.current = true
-
-		// Update active section immediately for better UX
-		setActiveSection(sectionTitle)
-
-		// Calculate scroll position with offset for header height
-		const elementPosition = element.getBoundingClientRect().top
-		const offsetPosition = elementPosition + window.scrollY - 160
-
-		// Smooth scroll to the target position
-		window.scrollTo({
-			top: offsetPosition,
-			behavior: 'smooth'
-		})
-
-		// Reset the manual scrolling flag after animation completes
-		setTimeout(() => {
-			isManualScrolling.current = false
-		}, 500)
-	}
-
-	// Early return if data is missing
-	if (!faqData?.faqSection) {
-		return <div className={'mt-16 text-center text-gray-400'}>{RESOURCES_DICT.faq.noDataMessage}</div>
-	}
-
-	return (
-		<div className={'relative mt-[120px] flex w-full flex-col items-center justify-center lg:mt-60 lg:gap-20'}>
-			<div className={'container flex flex-col'}>
-				{/* FAQ Title */}
-				<h1 className={'text-center text-[40px] leading-10 lg:max-w-[600px] lg:text-left lg:text-7xl'}>
-					{faqData.title}
-				</h1>
-
-				<div className={'my-14 flex justify-center lg:justify-between'}>
-					{/* FAQ Sections */}
-					<div className={'flex flex-col gap-10 lg:w-3/4'}>
-						{faqData.faqSection.map((section: TFaqSection) => (
-							<section
-								key={section.id}
-								ref={el => {
-									sectionRefs.current[section.sectionTitle] = el
-								}}
-								aria-labelledby={`section-${section.id}`}>
-								<h2
-									id={`section-${section.id}`}
-									className={'mb-6 text-2xl text-gray-500'}>
-									{section.sectionTitle}
-								</h2>
-
-								<div className={'flex flex-col gap-2'}>
-									{section.faqSectionItem.map(item => (
-										<QuestionSection
-											key={item.id}
-											faqSectionItem={item}
-										/>
-									))}
-								</div>
-							</section>
-						))}
-					</div>
-
-					{/* FAQ Navigation Sidebar */}
-					<FAQNavigation
-						sections={faqData.faqSection}
-						activeSection={activeSection}
-						onSectionClick={scrollToSection}
-					/>
-				</div>
-
-				{/* Footer Banner */}
-				<Banner />
-			</div>
-		</div>
-	)
+export function FAQContent({ faqData }: TFAQContentProps): ReactNode {
+  const [activeSection, setActiveSection] = useState<string>('')
+  const sectionRefs = useRef<Record<string, HTMLElement | null>>({})
+  const isManualScrolling = useRef(false)
+  const rafId = useRef<number>()
+
+  /************************************************************************************************
+   ** Scroll Handling
+   **
+   ** Detects which section is currently in view during scrolling
+   ** Uses requestAnimationFrame for performance and prevents interference during manual scrolling
+   ************************************************************************************************/
+  useEffect(() => {
+    const handleScroll = (): void => {
+      // Skip scroll handling when user has manually clicked a section
+      if (isManualScrolling.current) {
+        return
+      }
+
+      // Cancel any pending animation frame to avoid rapid updates
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current)
+      }
+
+      // Use requestAnimationFrame for better performance
+      rafId.current = requestAnimationFrame(() => {
+        // Calculate positions of all sections
+        const sectionPositions = Object.entries(sectionRefs.current).map(([title, element]) => ({
+          title,
+          top: element?.getBoundingClientRect().top ?? 0,
+        }))
+
+        // Find which section is closest to our target position (160px from top)
+        // This accounts for the header height and provides a good UX
+        const closestSection = sectionPositions.reduce(
+          (closest, current) => {
+            const currentDistance = Math.abs(current.top - 160)
+            const closestDistance = Math.abs(closest.top - 160)
+            return currentDistance < closestDistance ? current : closest
+          },
+          sectionPositions[0] || { title: '', top: 0 }
+        )
+
+        // Update the active section
+        setActiveSection(closestSection.title)
+      })
+    }
+
+    // Add scroll event listener
+    window.addEventListener('scroll', handleScroll)
+
+    // Initialize by triggering the scroll handler
+    handleScroll()
+
+    // Clean up event listener and any pending animation frames
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current)
+      }
+    }
+  }, [])
+
+  /************************************************************************************************
+   ** Section Navigation
+   **
+   ** Handles user clicking on a section in the navigation
+   ** Implements smooth scrolling and temporary disables scroll tracking
+   ************************************************************************************************/
+  const scrollToSection = (sectionTitle: string): void => {
+    const element = sectionRefs.current[sectionTitle]
+    if (!element) {
+      return
+    }
+
+    // Flag that we're manually scrolling to prevent interference
+    isManualScrolling.current = true
+
+    // Update active section immediately for better UX
+    setActiveSection(sectionTitle)
+
+    // Calculate scroll position with offset for header height
+    const elementPosition = element.getBoundingClientRect().top
+    const offsetPosition = elementPosition + window.scrollY - 160
+
+    // Smooth scroll to the target position
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: 'smooth',
+    })
+
+    // Reset the manual scrolling flag after animation completes
+    setTimeout(() => {
+      isManualScrolling.current = false
+    }, 500)
+  }
+
+  // Early return if data is missing
+  if (!faqData?.faqSection) {
+    return <div className={'mt-16 text-center text-gray-400'}>{RESOURCES_DICT.faq.noDataMessage}</div>
+  }
+
+  return (
+    <div className={'relative mt-[120px] flex w-full flex-col items-center justify-center lg:mt-60 lg:gap-20'}>
+      <div className={'container flex flex-col'}>
+        {/* FAQ Title */}
+        <h1 className={'text-center text-[40px] leading-10 lg:max-w-[600px] lg:text-left lg:text-7xl'}>
+          {faqData.title}
+        </h1>
+
+        <div className={'my-14 flex justify-center lg:justify-between'}>
+          {/* FAQ Sections */}
+          <div className={'flex flex-col gap-10 lg:w-3/4'}>
+            {faqData.faqSection.map((section: TFaqSection) => (
+              <section
+                key={section.id}
+                ref={(el) => {
+                  sectionRefs.current[section.sectionTitle] = el
+                }}
+                aria-labelledby={`section-${section.id}`}
+              >
+                <h2 id={`section-${section.id}`} className={'mb-6 text-2xl text-gray-500'}>
+                  {section.sectionTitle}
+                </h2>
+
+                <div className={'flex flex-col gap-2'}>
+                  {section.faqSectionItem.map((item) => (
+                    <QuestionSection key={item.id} faqSectionItem={item} />
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+
+          {/* FAQ Navigation Sidebar */}
+          <FAQNavigation sections={faqData.faqSection} activeSection={activeSection} onSectionClick={scrollToSection} />
+        </div>
+
+        {/* Footer Banner */}
+        <Banner />
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/FAQNavigation.tsx b/app/[lang]/(resources)/_components/FAQNavigation.tsx
index 7e306e7..b0d14a5 100644
--- a/app/[lang]/(resources)/_components/FAQNavigation.tsx
+++ b/app/[lang]/(resources)/_components/FAQNavigation.tsx
@@ -18,43 +18,42 @@
 
 'use client'
 
-import {cl} from '@/app/[lang]/_utils/cl'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TFAQNavigationProps = {
-	sections: {
-		id: number
-		sectionTitle: string
-	}[]
-	activeSection: string
-	onSectionClick: (sectionTitle: string) => void
+  sections: {
+    id: number
+    sectionTitle: string
+  }[]
+  activeSection: string
+  onSectionClick: (sectionTitle: string) => void
 }
 
-export function FAQNavigation({sections, activeSection, onSectionClick}: TFAQNavigationProps): ReactNode {
-	if (!sections || sections.length === 0) {
-		return null
-	}
+export function FAQNavigation({ sections, activeSection, onSectionClick }: TFAQNavigationProps): ReactNode {
+  if (!sections || sections.length === 0) {
+    return null
+  }
 
-	return (
-		<nav
-			className={'sticky top-[360px] ml-20 hidden h-full lg:block'}
-			aria-label={'FAQ sections navigation'}>
-			<ul className={'flex flex-col gap-4'}>
-				{sections.map(section => (
-					<li key={section.id}>
-						<button
-							onClick={() => onSectionClick(section.sectionTitle)}
-							className={cl(
-								'text-left text-lg transition-all hover:text-blue',
-								activeSection === section.sectionTitle ? 'text-white' : 'text-gray-500'
-							)}
-							aria-current={activeSection === section.sectionTitle ? 'true' : 'false'}>
-							{section.sectionTitle}
-						</button>
-					</li>
-				))}
-			</ul>
-		</nav>
-	)
+  return (
+    <nav className={'sticky top-[360px] ml-20 hidden h-full lg:block'} aria-label={'FAQ sections navigation'}>
+      <ul className={'flex flex-col gap-4'}>
+        {sections.map((section) => (
+          <li key={section.id}>
+            <button
+              onClick={() => onSectionClick(section.sectionTitle)}
+              className={cl(
+                'text-left text-lg transition-all hover:text-blue',
+                activeSection === section.sectionTitle ? 'text-white' : 'text-gray-500'
+              )}
+              aria-current={activeSection === section.sectionTitle ? 'true' : 'false'}
+            >
+              {section.sectionTitle}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx b/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx
index 8f3375d..4f3d2d9 100644
--- a/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx
+++ b/app/[lang]/(resources)/_components/NewsroomBreadcrumb.tsx
@@ -1,23 +1,24 @@
 'use client'
 
-import {usePathname} from 'next/navigation'
+import { usePathname } from 'next/navigation'
 
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { cl } from '@/app/[lang]/_utils/cl'
 
 export function NewsroomBreadcrumb(): React.ReactNode {
-	const pathname = usePathname()
+  const pathname = usePathname()
 
-	return (
-		<LocalizedLink
-			className={cl(
-				'mb-6 flex items-center gap-1 px-4 py-2 text-gray-500',
-				pathname === '/newsroom' ? 'invisible pointer-events-none' : ''
-			)}
-			href={'/newsroom'}>
-			<IconBack />
-			<span>{'Back to Newsroom'}</span>
-		</LocalizedLink>
-	)
+  return (
+    <LocalizedLink
+      className={cl(
+        'mb-6 flex items-center gap-1 px-4 py-2 text-gray-500',
+        pathname === '/newsroom' ? 'invisible pointer-events-none' : ''
+      )}
+      href={'/newsroom'}
+    >
+      <IconBack />
+      <span>{'Back to Newsroom'}</span>
+    </LocalizedLink>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/NewsroomNav.tsx b/app/[lang]/(resources)/_components/NewsroomNav.tsx
index 9c76540..6895898 100644
--- a/app/[lang]/(resources)/_components/NewsroomNav.tsx
+++ b/app/[lang]/(resources)/_components/NewsroomNav.tsx
@@ -1,40 +1,40 @@
 'use client'
 
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
 
-import {TabItem} from '@/app/[lang]/_components/TabItem'
-import {newsroomCategories, newsroomTags} from '@/app/[lang]/_utils/constants'
+import { TabItem } from '@/app/[lang]/_components/TabItem'
+import { newsroomCategories, newsroomTags } from '@/app/[lang]/_utils/constants'
 
 export function NewsroomNav(): React.ReactNode {
-	const pathname = usePathname()
-	const params = useParams()
-	const category = (params.category as string) || ''
-	const tag = (params.tag as string) || ''
+  const pathname = usePathname()
+  const params = useParams()
+  const category = (params.category as string) || ''
+  const tag = (params.tag as string) || ''
 
-	if (tag || pathname.includes('/tags')) {
-		return (
-			<div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
-				{newsroomTags.map(tab => (
-					<TabItem
-						key={tab.slug}
-						title={tab.title}
-						selected={tag ? tag.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
-						href={tab.slug === 'all' ? '/newsroom/tags' : `/newsroom/tags/${tab.slug}`}
-					/>
-				))}
-			</div>
-		)
-	}
-	return (
-		<div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
-			{newsroomCategories.map(tab => (
-				<TabItem
-					key={tab.slug}
-					title={tab.title}
-					selected={category ? category.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
-					href={tab.slug === 'all' ? '/newsroom' : `/newsroom/categories/${tab.slug}`}
-				/>
-			))}
-		</div>
-	)
+  if (tag || pathname.includes('/tags')) {
+    return (
+      <div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
+        {newsroomTags.map((tab) => (
+          <TabItem
+            key={tab.slug}
+            title={tab.title}
+            selected={tag ? tag.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
+            href={tab.slug === 'all' ? '/newsroom/tags' : `/newsroom/tags/${tab.slug}`}
+          />
+        ))}
+      </div>
+    )
+  }
+  return (
+    <div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
+      {newsroomCategories.map((tab) => (
+        <TabItem
+          key={tab.slug}
+          title={tab.title}
+          selected={category ? category.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
+          href={tab.slug === 'all' ? '/newsroom' : `/newsroom/categories/${tab.slug}`}
+        />
+      ))}
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/NewsroomTitle.tsx b/app/[lang]/(resources)/_components/NewsroomTitle.tsx
index 9b373eb..4f9f838 100644
--- a/app/[lang]/(resources)/_components/NewsroomTitle.tsx
+++ b/app/[lang]/(resources)/_components/NewsroomTitle.tsx
@@ -1,46 +1,46 @@
 'use client'
 
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
 
-import {newsroomCategoriesSlugToCategory} from '@/app/[lang]/_utils/constants'
+import { newsroomCategoriesSlugToCategory } from '@/app/[lang]/_utils/constants'
 
 export function NewsroomTitle(): React.ReactNode {
-	const pathname = usePathname()
-	const params = useParams()
-	const category = (params.category as string) || ''
-	const tag = (params.tag as string) || ''
+  const pathname = usePathname()
+  const params = useParams()
+  const category = (params.category as string) || ''
+  const tag = (params.tag as string) || ''
 
-	if (tag || pathname.includes('/tags')) {
-		if (tag) {
-			return (
-				<div className={'mb-8 text-7xl'}>
-					<span className={'text-white'}>{'Tagged: '}</span>
-					<span className={'capitalize text-blue'}>{tag}</span>
-				</div>
-			)
-		}
-		return (
-			<div className={'mb-8 text-7xl'}>
-				<span className={'text-white'}>{'All '}</span>
-				<span className={'capitalize text-blue'}>{'tags'}</span>
-			</div>
-		)
-	}
+  if (tag || pathname.includes('/tags')) {
+    if (tag) {
+      return (
+        <div className={'mb-8 text-7xl'}>
+          <span className={'text-white'}>{'Tagged: '}</span>
+          <span className={'capitalize text-blue'}>{tag}</span>
+        </div>
+      )
+    }
+    return (
+      <div className={'mb-8 text-7xl'}>
+        <span className={'text-white'}>{'All '}</span>
+        <span className={'capitalize text-blue'}>{'tags'}</span>
+      </div>
+    )
+  }
 
-	if (category) {
-		return (
-			<div className={'mb-8 text-7xl'}>
-				<span className={'text-white'}>{'Category: '}</span>
-				<span className={'capitalize text-blue'}>{newsroomCategoriesSlugToCategory(category)}</span>
-			</div>
-		)
-	}
-	return (
-		<div className={'mb-8 text-[40px] leading-10 lg:text-7xl'}>
-			<span className={'text-white'}>{'ShapeShift'}</span>
-			&nbsp;
-			<span className={'text-blue'}>{'Newsroom'}</span>
-			<span className={'hidden text-blue lg:inline'}>{'.'}</span>
-		</div>
-	)
+  if (category) {
+    return (
+      <div className={'mb-8 text-7xl'}>
+        <span className={'text-white'}>{'Category: '}</span>
+        <span className={'capitalize text-blue'}>{newsroomCategoriesSlugToCategory(category)}</span>
+      </div>
+    )
+  }
+  return (
+    <div className={'mb-8 text-[40px] leading-10 lg:text-7xl'}>
+      <span className={'text-white'}>{'ShapeShift'}</span>
+      &nbsp;
+      <span className={'text-blue'}>{'Newsroom'}</span>
+      <span className={'hidden text-blue lg:inline'}>{'.'}</span>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/PostList.tsx b/app/[lang]/(resources)/_components/PostList.tsx
index 9b5c9d7..b3b9ef7 100644
--- a/app/[lang]/(resources)/_components/PostList.tsx
+++ b/app/[lang]/(resources)/_components/PostList.tsx
@@ -18,131 +18,111 @@
  ** - Add custom empty state message if needed
  ************************************************************************************************/
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {BlogPost} from '@/app/[lang]/_components/BlogPost'
-import {useFetchPosts} from '@/app/[lang]/_hooks/useFetchPosts'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { BlogPost } from '@/app/[lang]/_components/BlogPost'
+import { useFetchPosts } from '@/app/[lang]/_hooks/useFetchPosts'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import {DEFAULT_PAGINATION} from '../_utils/constants'
+import { DEFAULT_PAGINATION } from '../_utils/constants'
 
-import type {TBlogPost} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TBlogPost } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TPostListProps = {
-	pageSize?: number
-	sort?: 'asc' | 'desc'
-	initialPage?: number
-	populateContent?: boolean
-	cachePosts?: boolean
-	emptyMessage?: string
-	category?: string
-	tag?: string
-	gridClassName?: string
+  pageSize?: number
+  sort?: 'asc' | 'desc'
+  initialPage?: number
+  populateContent?: boolean
+  cachePosts?: boolean
+  emptyMessage?: string
+  category?: string
+  tag?: string
+  gridClassName?: string
 }
 
 export function PostList({
-	pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
-	sort = DEFAULT_PAGINATION.SORT,
-	initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
-	populateContent = true,
-	cachePosts = true,
-	emptyMessage = "We couldn't find any posts matching your criteria.",
-	category,
-	tag,
-	gridClassName
+  pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
+  sort = DEFAULT_PAGINATION.SORT,
+  initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
+  populateContent = true,
+  cachePosts = true,
+  emptyMessage = "We couldn't find any posts matching your criteria.",
+  category,
+  tag,
+  gridClassName,
 }: TPostListProps): ReactNode {
-	const [page, setPage] = useState(initialPage)
-	const {posts, pagination, isLoading} = useFetchPosts({
-		page,
-		pageSize,
-		sort,
-		populateContent,
-		cachePosts,
-		type: category,
-		tag
-	})
+  const [page, setPage] = useState(initialPage)
+  const { posts, pagination, isLoading } = useFetchPosts({
+    page,
+    pageSize,
+    sort,
+    populateContent,
+    cachePosts,
+    type: category,
+    tag,
+  })
 
-	// Loading skeleton
-	if (isLoading) {
-		return (
-			<div
-				className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}
-				aria-busy={'true'}>
-				{Array.from({length: pageSize}).map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-						aria-hidden={'true'}
-					/>
-				))}
-			</div>
-		)
-	}
+  // Loading skeleton
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'} aria-busy={'true'}>
+        {Array.from({ length: pageSize }).map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} aria-hidden={'true'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{/* Empty state */}
-			{!posts || posts.length === 0 ? (
-				<p
-					className={'my-20 text-center text-2xl text-gray-400'}
-					role={'status'}>
-					{emptyMessage}
-				</p>
-			) : (
-				/* Posts grid */
-				<div className={cl('mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3', gridClassName)}>
-					{posts.map((post: TBlogPost) => (
-						<BlogPost
-							key={post.slug}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
+  return (
+    <Fragment>
+      {/* Empty state */}
+      {!posts || posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'} role={'status'}>
+          {emptyMessage}
+        </p>
+      ) : (
+        /* Posts grid */
+        <div className={cl('mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3', gridClassName)}>
+          {posts.map((post: TBlogPost) => (
+            <BlogPost key={post.slug} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
 
-			{/* Pagination controls */}
-			{pagination && pagination.pageCount > 1 && (
-				<ReactPaginate
-					pageCount={pagination?.pageCount ?? 1}
-					pageRangeDisplayed={5}
-					marginPagesDisplayed={2}
-					onPageChange={({selected}) => setPage(selected + 1)}
-					containerClassName={'flex gap-2 items-center justify-center mb-12'}
-					pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-					pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-					activeClassName={'!opacity-100'}
-					previousClassName={cl(
-						'hover:opacity-100 transition-opacity',
-						page === 1 ? 'opacity-20' : 'opacity-100'
-					)}
-					previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-					nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-					nextClassName={cl(
-						'hover:opacity-100 transition-opacity',
-						page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-					)}
-					disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-					disabledLinkClassName={'cursor-not-allowed'}
-					previousLabel={<IconChevron aria-label={'Previous page'} />}
-					nextLabel={
-						<IconChevron
-							className={'rotate-180'}
-							aria-label={'Next page'}
-						/>
-					}
-					aria-label={'Pagination'}
-				/>
-			)}
+      {/* Pagination controls */}
+      {pagination && pagination.pageCount > 1 && (
+        <ReactPaginate
+          pageCount={pagination?.pageCount ?? 1}
+          pageRangeDisplayed={5}
+          marginPagesDisplayed={2}
+          onPageChange={({ selected }) => setPage(selected + 1)}
+          containerClassName={'flex gap-2 items-center justify-center mb-12'}
+          pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+          pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+          activeClassName={'!opacity-100'}
+          previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+          previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+          nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+          nextClassName={cl(
+            'hover:opacity-100 transition-opacity',
+            page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+          )}
+          disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+          disabledLinkClassName={'cursor-not-allowed'}
+          previousLabel={<IconChevron aria-label={'Previous page'} />}
+          nextLabel={<IconChevron className={'rotate-180'} aria-label={'Next page'} />}
+          aria-label={'Pagination'}
+        />
+      )}
 
-			{/* Banner */}
-			<div className={'my-16'}>
-				<Banner />
-			</div>
-		</Fragment>
-	)
+      {/* Banner */}
+      <div className={'my-16'}>
+        <Banner />
+      </div>
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ProtocolAbout.tsx b/app/[lang]/(resources)/_components/ProtocolAbout.tsx
index 4ba2a07..07ee5e7 100644
--- a/app/[lang]/(resources)/_components/ProtocolAbout.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolAbout.tsx
@@ -1,23 +1,22 @@
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type THeaderData = {
-	name: string
-	description: string
+  name: string
+  description: string
 }
 export function ProtocolAbout(data: THeaderData): ReactNode {
-	return (
-		<div className={'mt-4'}>
-			<section
-				className={
-					'grid grid-cols-1 items-center rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] p-6 lg:grid-cols-2 lg:p-20'
-				}>
-				<h2 className={'col-span-1 mb-6 text-[28px] leading-[32px] lg:mb-0 lg:text-7xl'}>
-					{`What is ${data.name}`}
-				</h2>
-				<div className={'col-span-1 flex max-w-[560px] flex-col gap-4'}>
-					<p className={'whitespace-break-spaces break-keep text-gray-500'}>{data.description}</p>
-				</div>
-			</section>
-		</div>
-	)
+  return (
+    <div className={'mt-4'}>
+      <section
+        className={
+          'grid grid-cols-1 items-center rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] p-6 lg:grid-cols-2 lg:p-20'
+        }
+      >
+        <h2 className={'col-span-1 mb-6 text-[28px] leading-[32px] lg:mb-0 lg:text-7xl'}>{`What is ${data.name}`}</h2>
+        <div className={'col-span-1 flex max-w-[560px] flex-col gap-4'}>
+          <p className={'whitespace-break-spaces break-keep text-gray-500'}>{data.description}</p>
+        </div>
+      </section>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ProtocolEasier.tsx b/app/[lang]/(resources)/_components/ProtocolEasier.tsx
index 69c848d..ec142eb 100644
--- a/app/[lang]/(resources)/_components/ProtocolEasier.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolEasier.tsx
@@ -1,41 +1,42 @@
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-export function ProtocolEasier({cards}: {cards: {title: string; description?: string}[]}): ReactNode {
-	if (cards.length === 0) {
-		return null
-	}
+export function ProtocolEasier({ cards }: { cards: { title: string; description?: string }[] }): ReactNode {
+  if (cards.length === 0) {
+    return null
+  }
 
-	return (
-		<div
-			className={
-				'container col-span-1 mt-2 grid grid-cols-1 gap-4 overflow-hidden rounded-2xl bg-secondBg p-6 lg:col-span-6 lg:aspect-[1400/476] lg:h-[476px] lg:grid-cols-3 lg:p-10'
-			}
-			style={{
-				backgroundImage: "url('/chains/grid-bg.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			{cards[0].title ? (
-				<div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
-					<div className={'text-left'}>
-						<p className={'pb-2 text-2xl text-white'}>{cards[0]?.title}</p>
-						<p className={'pb-4 text-base text-secondary/50'}>{cards[0]?.description}</p>
-					</div>
-				</div>
-			) : null}
-			{cards[1].title ? (
-				<div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
-					<div className={'text-left'}>
-						<p className={'pb-2 text-2xl text-white'}>{cards[1]?.title}</p>
-						<p className={'pb-4 text-base text-secondary/50'}>{cards[1]?.description}</p>
-					</div>
-				</div>
-			) : null}
-			{cards[2]?.title ? (
-				<div className={'flex w-full items-center justify-start px-20'}>
-					<p className={'text-[40px] leading-[48px] text-white'}>{cards[2]?.title}</p>
-				</div>
-			) : null}
-		</div>
-	)
+  return (
+    <div
+      className={
+        'container col-span-1 mt-2 grid grid-cols-1 gap-4 overflow-hidden rounded-2xl bg-secondBg p-6 lg:col-span-6 lg:aspect-[1400/476] lg:h-[476px] lg:grid-cols-3 lg:p-10'
+      }
+      style={{
+        backgroundImage: "url('/chains/grid-bg.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      {cards[0].title ? (
+        <div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
+          <div className={'text-left'}>
+            <p className={'pb-2 text-2xl text-white'}>{cards[0]?.title}</p>
+            <p className={'pb-4 text-base text-secondary/50'}>{cards[0]?.description}</p>
+          </div>
+        </div>
+      ) : null}
+      {cards[1].title ? (
+        <div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
+          <div className={'text-left'}>
+            <p className={'pb-2 text-2xl text-white'}>{cards[1]?.title}</p>
+            <p className={'pb-4 text-base text-secondary/50'}>{cards[1]?.description}</p>
+          </div>
+        </div>
+      ) : null}
+      {cards[2]?.title ? (
+        <div className={'flex w-full items-center justify-start px-20'}>
+          <p className={'text-[40px] leading-[48px] text-white'}>{cards[2]?.title}</p>
+        </div>
+      ) : null}
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ProtocolFeatures.tsx b/app/[lang]/(resources)/_components/ProtocolFeatures.tsx
index b106739..2f4bca0 100644
--- a/app/[lang]/(resources)/_components/ProtocolFeatures.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolFeatures.tsx
@@ -1,260 +1,215 @@
 'use client'
 
 import Image from 'next/image'
-import {useMemo} from 'react'
+import { useMemo } from 'react'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Button } from '@/app/[lang]/_components/Button'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-function OgPlatformFeature({description, index}: {description: string; index: number}): ReactNode {
-	return (
-		<div
-			className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
-			style={{
-				backgroundImage: "url('/chains/grid-bg.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			<div
-				className={cl(
-					'flex gap-x-[120px] justify-between flex-col',
-					index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
-				)}>
-				<div className={'flex max-w-screen-sm flex-col p-10'}>
-					<h2 className={'mb-4 text-[40px] leading-[48px]'}>{'OG DeFi Platforms'}</h2>
-					<p className={'mb-10 text-gray-500'}>{description}</p>
-					<Button
-						variant={'blue'}
-						title={'Learn More'}
-						href={'https://app.shapeshift.com'}
-						hasArrow
-						className={'hidden lg:flex'}
-					/>
-				</div>
-				<div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
-					<Image
-						src={'/protocols/collab.gif'}
-						alt={''}
-						className={'object-contain p-10'}
-						width={400}
-						height={400}
-					/>
-				</div>
-			</div>
-		</div>
-	)
+function OgPlatformFeature({ description, index }: { description: string; index: number }): ReactNode {
+  return (
+    <div
+      className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
+      style={{
+        backgroundImage: "url('/chains/grid-bg.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div
+        className={cl(
+          'flex gap-x-[120px] justify-between flex-col',
+          index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+        )}
+      >
+        <div className={'flex max-w-screen-sm flex-col p-10'}>
+          <h2 className={'mb-4 text-[40px] leading-[48px]'}>{'OG DeFi Platforms'}</h2>
+          <p className={'mb-10 text-gray-500'}>{description}</p>
+          <Button
+            variant={'blue'}
+            title={'Learn More'}
+            href={'https://app.shapeshift.com'}
+            hasArrow
+            className={'hidden lg:flex'}
+          />
+        </div>
+        <div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
+          <Image src={'/protocols/collab.gif'} alt={''} className={'object-contain p-10'} width={400} height={400} />
+        </div>
+      </div>
+    </div>
+  )
 }
-function MobileAppFeature({index}: {index: number}): ReactNode {
-	return (
-		<div
-			className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
-			style={{
-				backgroundImage: "url('/chains/grid-bg.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			<div
-				className={cl(
-					'flex gap-x-[120px] justify-between 	flex-col',
-					index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
-				)}>
-				<div className={'flex max-w-screen-sm flex-col p-10'}>
-					<h2 className={'mb-4 text-[40px] leading-[48px]'}>{'Shift to DeFi on the go'}</h2>
-					<p className={'whitespace-pre-line pb-4 text-base text-gray-500'}>
-						{'Permissionlessly track, trade, shift, and earn with your favorite chains such as '}
-						<LocalizedLink
-							className={'text-white underline'}
-							href={'/chains/bitcoin'}>
-							{'Bitcoin'}
-						</LocalizedLink>
-						{', '}
-						<LocalizedLink
-							className={'text-white underline'}
-							href={'/chains/dogecoin'}>
-							{'Dogecoin'}
-						</LocalizedLink>
-						{', '}
-						<LocalizedLink
-							className={'text-white underline'}
-							href={'/chains/ethereum'}>
-							{'Ethereum'}
-						</LocalizedLink>
-						{', '}
-						<LocalizedLink
-							className={'text-white underline'}
-							href={'/chains/arbitrum'}>
-							{'Arbitrum'}
-						</LocalizedLink>
-						{', '}
-						<LocalizedLink
-							className={'text-white underline'}
-							href={'/chains/avalanche'}>
-							{'AVAX'}
-						</LocalizedLink>
-						{' and more.'}
-					</p>
-					<p className={'mb-10 whitespace-pre-line text-base text-secondary/50'}>
-						{'Do more with your crypto when you ShapeShift.'}
-					</p>
-					<div className={'flex gap-3'}>
-						<LocalizedLink
-							href={'/apple-app-store'}
-							target={'_blank'}
-							className={'h-[40px] w-[130px]'}>
-							<Image
-								src={'/appstore.png'}
-								alt={'appstore'}
-								width={390}
-								height={120}
-							/>
-						</LocalizedLink>
+function MobileAppFeature({ index }: { index: number }): ReactNode {
+  return (
+    <div
+      className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
+      style={{
+        backgroundImage: "url('/chains/grid-bg.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div
+        className={cl(
+          'flex gap-x-[120px] justify-between 	flex-col',
+          index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+        )}
+      >
+        <div className={'flex max-w-screen-sm flex-col p-10'}>
+          <h2 className={'mb-4 text-[40px] leading-[48px]'}>{'Shift to DeFi on the go'}</h2>
+          <p className={'whitespace-pre-line pb-4 text-base text-gray-500'}>
+            {'Permissionlessly track, trade, shift, and earn with your favorite chains such as '}
+            <LocalizedLink className={'text-white underline'} href={'/chains/bitcoin'}>
+              {'Bitcoin'}
+            </LocalizedLink>
+            {', '}
+            <LocalizedLink className={'text-white underline'} href={'/chains/dogecoin'}>
+              {'Dogecoin'}
+            </LocalizedLink>
+            {', '}
+            <LocalizedLink className={'text-white underline'} href={'/chains/ethereum'}>
+              {'Ethereum'}
+            </LocalizedLink>
+            {', '}
+            <LocalizedLink className={'text-white underline'} href={'/chains/arbitrum'}>
+              {'Arbitrum'}
+            </LocalizedLink>
+            {', '}
+            <LocalizedLink className={'text-white underline'} href={'/chains/avalanche'}>
+              {'AVAX'}
+            </LocalizedLink>
+            {' and more.'}
+          </p>
+          <p className={'mb-10 whitespace-pre-line text-base text-secondary/50'}>
+            {'Do more with your crypto when you ShapeShift.'}
+          </p>
+          <div className={'flex gap-3'}>
+            <LocalizedLink href={'/apple-app-store'} target={'_blank'} className={'h-[40px] w-[130px]'}>
+              <Image src={'/appstore.png'} alt={'appstore'} width={390} height={120} />
+            </LocalizedLink>
 
-						<LocalizedLink
-							href={'/google-play-store'}
-							target={'_blank'}
-							className={'h-[40px] w-[130px]'}>
-							<Image
-								src={'/google_play.png'}
-								alt={'googleplay'}
-								width={390}
-								height={120}
-							/>
-						</LocalizedLink>
-					</div>
-				</div>
-				<div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
-					<Image
-						src={'/protocols/mobile-app.png'}
-						alt={''}
-						className={'object-contain p-10'}
-						width={400}
-						height={400}
-					/>
-				</div>
-			</div>
-		</div>
-	)
+            <LocalizedLink href={'/google-play-store'} target={'_blank'} className={'h-[40px] w-[130px]'}>
+              <Image src={'/google_play.png'} alt={'googleplay'} width={390} height={120} />
+            </LocalizedLink>
+          </div>
+        </div>
+        <div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
+          <Image
+            src={'/protocols/mobile-app.png'}
+            alt={''}
+            className={'object-contain p-10'}
+            width={400}
+            height={400}
+          />
+        </div>
+      </div>
+    </div>
+  )
 }
-function GetPaidToTradeFeature({index}: {index: number}): ReactNode {
-	return (
-		<div
-			className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
-			style={{
-				backgroundImage: "url('/chains/grid-bg.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			<div
-				className={cl(
-					'flex gap-x-[120px] justify-between flex-col',
-					index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
-				)}>
-				<div className={'flex max-w-screen-sm flex-col p-10'}>
-					<h2 className={'mb-4 text-[40px] leading-[48px]'}>{'Get Paid to Trade'}</h2>
-					<p className={'mb-4 text-gray-500'}>
-						{'Stake FOX into rFOX, get rewarded, and save when you trade.'}
-					</p>
-					<p className={'mb-10 text-gray-500'}>{'The more you trade, the more you earn.'}</p>
-					<Button
-						variant={'blue'}
-						title={'Start Earning'}
-						href={'https://app.shapeshift.com/pools#/rfox'}
-						hasArrow
-						className={'hidden lg:flex'}
-					/>
-				</div>
-				<div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
-					<Image
-						src={'/protocols/rFox.png'}
-						alt={''}
-						className={' object-contain p-10'}
-						width={603}
-						height={605}
-					/>
-				</div>
-			</div>
-		</div>
-	)
+function GetPaidToTradeFeature({ index }: { index: number }): ReactNode {
+  return (
+    <div
+      className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
+      style={{
+        backgroundImage: "url('/chains/grid-bg.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div
+        className={cl(
+          'flex gap-x-[120px] justify-between flex-col',
+          index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+        )}
+      >
+        <div className={'flex max-w-screen-sm flex-col p-10'}>
+          <h2 className={'mb-4 text-[40px] leading-[48px]'}>{'Get Paid to Trade'}</h2>
+          <p className={'mb-4 text-gray-500'}>{'Stake FOX into rFOX, get rewarded, and save when you trade.'}</p>
+          <p className={'mb-10 text-gray-500'}>{'The more you trade, the more you earn.'}</p>
+          <Button
+            variant={'blue'}
+            title={'Start Earning'}
+            href={'https://app.shapeshift.com/pools#/rfox'}
+            hasArrow
+            className={'hidden lg:flex'}
+          />
+        </div>
+        <div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
+          <Image src={'/protocols/rFox.png'} alt={''} className={' object-contain p-10'} width={603} height={605} />
+        </div>
+      </div>
+    </div>
+  )
 }
-function PortalsFeature({index}: {index: number}): ReactNode {
-	return (
-		<div
-			className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
-			style={{
-				backgroundImage: "url('/chains/grid-bg.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			<div
-				className={cl(
-					'flex gap-x-[120px] justify-between flex-col',
-					index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
-				)}>
-				<div className={'flex max-w-screen-sm flex-col p-10'}>
-					<h2 className={'mb-4 text-[40px] leading-[48px]'}>{'Powered by Portals'}</h2>
-					<p className={'mb-4 text-gray-500'}>{'Shifts are Powered by Portals!'}</p>
-					<p className={'mb-10 text-gray-500'}>
-						{
-							'When you Shift, you take advantage of Portals bespoke routing and optimizations to execute the best trades.'
-						}
-					</p>
-					<Button
-						variant={'blue'}
-						title={'Start Trading'}
-						href={'https://app.shapeshift.com/'}
-						hasArrow
-						className={'hidden lg:flex'}
-					/>
-				</div>
-				<div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
-					<Image
-						src={'/protocols/portals.gif'}
-						alt={''}
-						className={'object-contain p-10'}
-						width={603}
-						height={605}
-					/>
-				</div>
-			</div>
-		</div>
-	)
+function PortalsFeature({ index }: { index: number }): ReactNode {
+  return (
+    <div
+      className={'container relative w-full overflow-hidden rounded-2xl bg-secondBg'}
+      style={{
+        backgroundImage: "url('/chains/grid-bg.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div
+        className={cl(
+          'flex gap-x-[120px] justify-between flex-col',
+          index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+        )}
+      >
+        <div className={'flex max-w-screen-sm flex-col p-10'}>
+          <h2 className={'mb-4 text-[40px] leading-[48px]'}>{'Powered by Portals'}</h2>
+          <p className={'mb-4 text-gray-500'}>{'Shifts are Powered by Portals!'}</p>
+          <p className={'mb-10 text-gray-500'}>
+            {
+              'When you Shift, you take advantage of Portals bespoke routing and optimizations to execute the best trades.'
+            }
+          </p>
+          <Button
+            variant={'blue'}
+            title={'Start Trading'}
+            href={'https://app.shapeshift.com/'}
+            hasArrow
+            className={'hidden lg:flex'}
+          />
+        </div>
+        <div className={'aspect-square h-[400px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
+          <Image src={'/protocols/portals.gif'} alt={''} className={'object-contain p-10'} width={603} height={605} />
+        </div>
+      </div>
+    </div>
+  )
 }
 
-export function ProtocolFeatures({description, features}: {description: string; features: string[]}): ReactNode {
-	const featuresComponents = useMemo(() => {
-		const allFeatures = []
-		if (features?.includes('OG DeFi Platforms')) {
-			allFeatures.push(
-				<OgPlatformFeature
-					description={description}
-					index={allFeatures.length % 2}
-				/>
-			)
-		}
-		if (features?.includes('Shift to DeFi on the go')) {
-			allFeatures.push(<MobileAppFeature index={allFeatures.length % 2} />)
-		}
-		if (features?.includes('Get Paid to Trade')) {
-			allFeatures.push(<GetPaidToTradeFeature index={allFeatures.length % 2} />)
-		}
-		if (features?.includes('Powered by Portals')) {
-			allFeatures.push(<PortalsFeature index={allFeatures.length % 2} />)
-		}
-		if (allFeatures.length === 0) {
-			return null
-		}
-		return allFeatures
-	}, [description, features])
-	return (
-		<div
-			className={cl(
-				'mt-40 grid gap-x-[120px] gap-y-40 lg:grid-cols-1',
-				featuresComponents === null ? 'hidden' : ''
-			)}>
-			{featuresComponents}
-		</div>
-	)
+export function ProtocolFeatures({ description, features }: { description: string; features: string[] }): ReactNode {
+  const featuresComponents = useMemo(() => {
+    const allFeatures = []
+    if (features?.includes('OG DeFi Platforms')) {
+      allFeatures.push(<OgPlatformFeature description={description} index={allFeatures.length % 2} />)
+    }
+    if (features?.includes('Shift to DeFi on the go')) {
+      allFeatures.push(<MobileAppFeature index={allFeatures.length % 2} />)
+    }
+    if (features?.includes('Get Paid to Trade')) {
+      allFeatures.push(<GetPaidToTradeFeature index={allFeatures.length % 2} />)
+    }
+    if (features?.includes('Powered by Portals')) {
+      allFeatures.push(<PortalsFeature index={allFeatures.length % 2} />)
+    }
+    if (allFeatures.length === 0) {
+      return null
+    }
+    return allFeatures
+  }, [description, features])
+  return (
+    <div
+      className={cl('mt-40 grid gap-x-[120px] gap-y-40 lg:grid-cols-1', featuresComponents === null ? 'hidden' : '')}
+    >
+      {featuresComponents}
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ProtocolHeader.tsx b/app/[lang]/(resources)/_components/ProtocolHeader.tsx
index 1f0bbfa..53064ee 100644
--- a/app/[lang]/(resources)/_components/ProtocolHeader.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolHeader.tsx
@@ -1,68 +1,53 @@
 import Image from 'next/image'
-import {Fragment} from 'react'
+import { Fragment } from 'react'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
+import { Button } from '@/app/[lang]/_components/Button'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type THeaderData = {
-	description: string
-	items: string[]
-	url: string
-	width: number
-	height: number
-	name: string
+  description: string
+  items: string[]
+  url: string
+  width: number
+  height: number
+  name: string
 }
 export function ProtocolHeader(data: THeaderData): ReactNode {
-	return (
-		<Fragment>
-			<section className={'flex flex-col items-center'}>
-				<div className={'mb-10 hidden gap-2 lg:flex'}>
-					{data.items.map(item => (
-						<div
-							className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'}
-							key={item}>
-							<IconCheck className={'text-blue'} />
-							<span className={'text-blue'}>{item}</span>
-						</div>
-					))}
-				</div>
-				<div className={'mb-10 flex flex-col items-center gap-2'}>
-					<h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-7xl'}>
-						{`Shift into ${data.name}`}
-					</h1>
-					<p className={'mx-auto max-w-screen-md text-center text-base text-gray-500 lg:text-xl'}>
-						{'Say goodbye to multiple interfaces and hello to ShapeShift.'}
-					</p>
-				</div>
-				<Button
-					variant={'blue'}
-					href={'https://app.shapeshift.com/'}
-					title={'Trade with the Best Rates'}
-				/>
-			</section>
-			<section className={'relative mt-12 flex w-full overflow-hidden rounded-2xl'}>
-				<Image
-					src={'/wallets/hero.jpg'}
-					alt={''}
-					width={2800}
-					height={720}
-					loading={'eager'}
-					priority
-				/>
-				<div className={'absolute inset-0 flex items-center justify-end py-6 pr-16'}>
-					<Image
-						src={data.url}
-						alt={data.name}
-						width={data.width}
-						height={data.height}
-						loading={'eager'}
-						priority
-						className={'my-auto h-full max-h-[256px] w-auto max-w-[256px]'}
-					/>
-				</div>
-			</section>
-		</Fragment>
-	)
+  return (
+    <Fragment>
+      <section className={'flex flex-col items-center'}>
+        <div className={'mb-10 hidden gap-2 lg:flex'}>
+          {data.items.map((item) => (
+            <div className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'} key={item}>
+              <IconCheck className={'text-blue'} />
+              <span className={'text-blue'}>{item}</span>
+            </div>
+          ))}
+        </div>
+        <div className={'mb-10 flex flex-col items-center gap-2'}>
+          <h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-7xl'}>{`Shift into ${data.name}`}</h1>
+          <p className={'mx-auto max-w-screen-md text-center text-base text-gray-500 lg:text-xl'}>
+            {'Say goodbye to multiple interfaces and hello to ShapeShift.'}
+          </p>
+        </div>
+        <Button variant={'blue'} href={'https://app.shapeshift.com/'} title={'Trade with the Best Rates'} />
+      </section>
+      <section className={'relative mt-12 flex w-full overflow-hidden rounded-2xl'}>
+        <Image src={'/wallets/hero.jpg'} alt={''} width={2800} height={720} loading={'eager'} priority />
+        <div className={'absolute inset-0 flex items-center justify-end py-6 pr-16'}>
+          <Image
+            src={data.url}
+            alt={data.name}
+            width={data.width}
+            height={data.height}
+            loading={'eager'}
+            priority
+            className={'my-auto h-full max-h-[256px] w-auto max-w-[256px]'}
+          />
+        </div>
+      </section>
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ProtocolList.tsx b/app/[lang]/(resources)/_components/ProtocolList.tsx
index 7bcd5e8..21f4035 100644
--- a/app/[lang]/(resources)/_components/ProtocolList.tsx
+++ b/app/[lang]/(resources)/_components/ProtocolList.tsx
@@ -16,42 +16,40 @@
  ** - Pass protocols data and optional loading state
  ************************************************************************************************/
 
-import {ResourceCard} from '@/app/[lang]/(resources)/_components/ResourceCard'
-import {ResourceGrid} from '@/app/[lang]/(resources)/_components/ResourceGrid'
+import { ResourceCard } from '@/app/[lang]/(resources)/_components/ResourceCard'
+import { ResourceGrid } from '@/app/[lang]/(resources)/_components/ResourceGrid'
 
-import type {TSupportedProtocolData} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportedProtocolData } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TProtocolListProps = {
-	protocols: TSupportedProtocolData[] | null
-	isLoading?: boolean
-	className?: string
-	isSearchQuery?: boolean
+  protocols: TSupportedProtocolData[] | null
+  isLoading?: boolean
+  className?: string
+  isSearchQuery?: boolean
 }
 
-export function ProtocolList({protocols, isLoading, className, isSearchQuery}: TProtocolListProps): ReactNode {
-	return (
-		<ResourceGrid
-			items={protocols}
-			isLoading={isLoading}
-			emptyMessage={
-				isSearchQuery ? "We couldn't find anything matching your search." : 'No protocols available yet.'
-			}
-			className={className}
-			renderItem={protocol => (
-				<ResourceCard
-					key={protocol.slug}
-					slug={protocol.slug}
-					title={protocol.name}
-					description={protocol.description}
-					imageUrl={protocol.featuredImg?.url}
-					imageWidth={protocol.featuredImg?.width}
-					imageHeight={protocol.featuredImg?.height}
-					baseURL={'/protocols'}
-					imagePosition={'center'}
-					altText={`${protocol.name} logo`}
-				/>
-			)}
-		/>
-	)
+export function ProtocolList({ protocols, isLoading, className, isSearchQuery }: TProtocolListProps): ReactNode {
+  return (
+    <ResourceGrid
+      items={protocols}
+      isLoading={isLoading}
+      emptyMessage={isSearchQuery ? "We couldn't find anything matching your search." : 'No protocols available yet.'}
+      className={className}
+      renderItem={(protocol) => (
+        <ResourceCard
+          key={protocol.slug}
+          slug={protocol.slug}
+          title={protocol.name}
+          description={protocol.description}
+          imageUrl={protocol.featuredImg?.url}
+          imageWidth={protocol.featuredImg?.width}
+          imageHeight={protocol.featuredImg?.height}
+          baseURL={'/protocols'}
+          imagePosition={'center'}
+          altText={`${protocol.name} logo`}
+        />
+      )}
+    />
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ResourceCard.tsx b/app/[lang]/(resources)/_components/ResourceCard.tsx
index 9b670de..3a1e0ef 100644
--- a/app/[lang]/(resources)/_components/ResourceCard.tsx
+++ b/app/[lang]/(resources)/_components/ResourceCard.tsx
@@ -18,98 +18,99 @@
 
 'use client'
 
-import {motion} from 'framer-motion'
+import { motion } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
 
-import {cl} from '@/app/[lang]/_utils/cl'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 const MotionLink = motion(Link)
 
 type TResourceCardProps = {
-	slug: string
-	title: string
-	description: string
-	imageUrl: string
-	imageWidth?: number
-	imageHeight?: number
-	baseURL: string
-	imagePosition?: 'center' | 'bottom'
-	altText?: string
-	className?: string
+  slug: string
+  title: string
+  description: string
+  imageUrl: string
+  imageWidth?: number
+  imageHeight?: number
+  baseURL: string
+  imagePosition?: 'center' | 'bottom'
+  altText?: string
+  className?: string
 }
 
 export function ResourceCard({
-	slug,
-	title,
-	description,
-	imageUrl,
-	imageWidth = 0,
-	imageHeight = 0,
-	baseURL,
-	imagePosition = 'center',
-	altText,
-	className
+  slug,
+  title,
+  description,
+  imageUrl,
+  imageWidth = 0,
+  imageHeight = 0,
+  baseURL,
+  imagePosition = 'center',
+  altText,
+  className,
 }: TResourceCardProps): ReactNode {
-	return (
-		<MotionLink
-			key={slug}
-			initial={{opacity: 0, scale: 0.8}}
-			animate={{opacity: 1, scale: 1}}
-			transition={{duration: 0.3, ease: 'easeInOut'}}
-			href={`${baseURL}/${slug}`}
-			className={cl('group rounded-2xl bg-secondBg p-6 transition-colors hover:bg-secondHoverBg', className)}>
-			{/* Card Image */}
-			<div
-				className={cl(
-					'relative h-[204px] max-w-[408px] overflow-hidden rounded-2xl',
-					imagePosition === 'center' ? 'p-10' : 'px-10 pt-10'
-				)}>
-				{/* Background Image */}
-				<Image
-					src={'/wallets/cover.png'}
-					alt={'background'}
-					width={408}
-					height={204}
-					priority
-					className={'pointer-events-none absolute inset-0 z-0 aspect-video size-full object-cover'}
-				/>
+  return (
+    <MotionLink
+      key={slug}
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+      href={`${baseURL}/${slug}`}
+      className={cl('group rounded-2xl bg-secondBg p-6 transition-colors hover:bg-secondHoverBg', className)}
+    >
+      {/* Card Image */}
+      <div
+        className={cl(
+          'relative h-[204px] max-w-[408px] overflow-hidden rounded-2xl',
+          imagePosition === 'center' ? 'p-10' : 'px-10 pt-10'
+        )}
+      >
+        {/* Background Image */}
+        <Image
+          src={'/wallets/cover.png'}
+          alt={'background'}
+          width={408}
+          height={204}
+          priority
+          className={'pointer-events-none absolute inset-0 z-0 aspect-video size-full object-cover'}
+        />
 
-				{/* Resource Image */}
-				{imageUrl ? (
-					<motion.div
-						initial={{opacity: 0, scale: 0.9}}
-						animate={{opacity: 1, scale: 1}}
-						transition={{duration: 0.5}}
-						className={'relative z-10 size-full object-contain'}>
-						<Image
-							src={getStrapiImageUrl(imageUrl)}
-							alt={altText || title}
-							width={imageWidth || 100}
-							height={imageHeight || 100}
-							className={cl(
-								'size-full items-end object-contain transition-all group-hover:scale-105',
-								imagePosition === 'center' ? '' : 'object-bottom'
-							)}
-						/>
-					</motion.div>
-				) : (
-					<div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
-				)}
-			</div>
+        {/* Resource Image */}
+        {imageUrl ? (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5 }}
+            className={'relative z-10 size-full object-contain'}
+          >
+            <Image
+              src={getStrapiImageUrl(imageUrl)}
+              alt={altText || title}
+              width={imageWidth || 100}
+              height={imageHeight || 100}
+              className={cl(
+                'size-full items-end object-contain transition-all group-hover:scale-105',
+                imagePosition === 'center' ? '' : 'object-bottom'
+              )}
+            />
+          </motion.div>
+        ) : (
+          <div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
+        )}
+      </div>
 
-			{/* Card Content */}
-			<div className={'mt-6 flex flex-col gap-2'}>
-				<div>
-					<h3 className={'text-2xl text-white'}>{title}</h3>
-					<p className={'line-clamp-6 whitespace-break-spaces break-keep text-sm text-gray-500'}>
-						{description}
-					</p>
-				</div>
-			</div>
-		</MotionLink>
-	)
+      {/* Card Content */}
+      <div className={'mt-6 flex flex-col gap-2'}>
+        <div>
+          <h3 className={'text-2xl text-white'}>{title}</h3>
+          <p className={'line-clamp-6 whitespace-break-spaces break-keep text-sm text-gray-500'}>{description}</p>
+        </div>
+      </div>
+    </MotionLink>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ResourceGrid.tsx b/app/[lang]/(resources)/_components/ResourceGrid.tsx
index de4a100..3c64455 100644
--- a/app/[lang]/(resources)/_components/ResourceGrid.tsx
+++ b/app/[lang]/(resources)/_components/ResourceGrid.tsx
@@ -16,53 +16,47 @@
  ** - Pass items array and renderItem function to customize display
  ************************************************************************************************/
 
-import type {ReactElement, ReactNode} from 'react'
+import type { ReactElement, ReactNode } from 'react'
 
 type TResourceGridProps<T> = {
-	items: T[] | null | undefined
-	renderItem: (item: T, index: number) => ReactNode
-	isLoading?: boolean
-	emptyMessage?: string
-	className?: string
+  items: T[] | null | undefined
+  renderItem: (item: T, index: number) => ReactNode
+  isLoading?: boolean
+  emptyMessage?: string
+  className?: string
 }
 
 export function ResourceGrid<T>({
-	items,
-	renderItem,
-	isLoading = false,
-	emptyMessage = 'No items available yet.',
-	className = ''
+  items,
+  renderItem,
+  isLoading = false,
+  emptyMessage = 'No items available yet.',
+  className = '',
 }: TResourceGridProps<T>): ReactNode {
-	// Handle loading state
-	if (isLoading) {
-		return (
-			<div
-				className={'h-[50vh]'}
-				aria-busy={true}
-				aria-label={'Loading content'}
-			/>
-		)
-	}
+  // Handle loading state
+  if (isLoading) {
+    return <div className={'h-[50vh]'} aria-busy={true} aria-label={'Loading content'} />
+  }
 
-	// Handle empty state
-	if (!items || items.length === 0) {
-		return (
-			<div className={'flex w-full justify-center'}>
-				<div className={'container flex flex-col items-center justify-center py-16'}>
-					<p className={'text-xl text-gray-400'}>{emptyMessage}</p>
-				</div>
-			</div>
-		)
-	}
+  // Handle empty state
+  if (!items || items.length === 0) {
+    return (
+      <div className={'flex w-full justify-center'}>
+        <div className={'container flex flex-col items-center justify-center py-16'}>
+          <p className={'text-xl text-gray-400'}>{emptyMessage}</p>
+        </div>
+      </div>
+    )
+  }
 
-	// Render grid with items
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container flex flex-col justify-center'}>
-				<div className={`mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3 ${className}`}>
-					{items.map((item, index) => renderItem(item, index) as ReactElement)}
-				</div>
-			</div>
-		</div>
-	)
+  // Render grid with items
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container flex flex-col justify-center'}>
+        <div className={`mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3 ${className}`}>
+          {items.map((item, index) => renderItem(item, index) as ReactElement)}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ResourceHeader.tsx b/app/[lang]/(resources)/_components/ResourceHeader.tsx
index 3a9aaa7..8258568 100644
--- a/app/[lang]/(resources)/_components/ResourceHeader.tsx
+++ b/app/[lang]/(resources)/_components/ResourceHeader.tsx
@@ -18,89 +18,88 @@
 
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Button } from '@/app/[lang]/_components/Button'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TResourceHeaderProps = {
-	title: string
-	description: string
-	items: string[]
-	ctaButton?: {
-		text: string
-		url: string
-	}
-	className?: string
-	titlePrefix?: string
-	hasLogo?: boolean
-	logoUrl?: string
-	logoWidth?: number
-	logoHeight?: number
-	logoAlt?: string
+  title: string
+  description: string
+  items: string[]
+  ctaButton?: {
+    text: string
+    url: string
+  }
+  className?: string
+  titlePrefix?: string
+  hasLogo?: boolean
+  logoUrl?: string
+  logoWidth?: number
+  logoHeight?: number
+  logoAlt?: string
 }
 
 export function ResourceHeader({
-	title,
-	description,
-	items,
-	ctaButton,
-	className,
-	titlePrefix,
-	hasLogo = false,
-	logoUrl,
-	logoWidth,
-	logoHeight,
-	logoAlt
+  title,
+  description,
+  items,
+  ctaButton,
+  className,
+  titlePrefix,
+  hasLogo = false,
+  logoUrl,
+  logoWidth,
+  logoHeight,
+  logoAlt,
 }: TResourceHeaderProps): ReactNode {
-	return (
-		<section className={cl('flex flex-col items-center', className)}>
-			{/* Feature badges - desktop only */}
-			<div className={'mb-10 hidden gap-2 lg:flex'}>
-				{items.map(item => (
-					<div
-						className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'}
-						key={item}
-						aria-label={`Feature: ${item}`}>
-						<IconCheck className={'text-blue'} />
-						<span className={'text-blue'}>{item}</span>
-					</div>
-				))}
-			</div>
+  return (
+    <section className={cl('flex flex-col items-center', className)}>
+      {/* Feature badges - desktop only */}
+      <div className={'mb-10 hidden gap-2 lg:flex'}>
+        {items.map((item) => (
+          <div
+            className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'}
+            key={item}
+            aria-label={`Feature: ${item}`}
+          >
+            <IconCheck className={'text-blue'} />
+            <span className={'text-blue'}>{item}</span>
+          </div>
+        ))}
+      </div>
 
-			{/* Title and description */}
-			<div className={'mb-10 flex flex-col items-center gap-2'}>
-				<h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-7xl'}>
-					{titlePrefix ? `${titlePrefix} ${title}` : title}
-				</h1>
-				<p className={'mx-auto max-w-screen-md text-center text-base text-gray-500 lg:text-xl'}>
-					{description}
-				</p>
-			</div>
+      {/* Title and description */}
+      <div className={'mb-10 flex flex-col items-center gap-2'}>
+        <h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-7xl'}>
+          {titlePrefix ? `${titlePrefix} ${title}` : title}
+        </h1>
+        <p className={'mx-auto max-w-screen-md text-center text-base text-gray-500 lg:text-xl'}>{description}</p>
+      </div>
 
-			{/* Optional CTA Button */}
-			{ctaButton && (
-				<Button
-					variant={'blue'}
-					href={ctaButton.url}
-					title={ctaButton.text}
-					aria-label={`${ctaButton.text} for ${title}`}
-				/>
-			)}
+      {/* Optional CTA Button */}
+      {ctaButton && (
+        <Button
+          variant={'blue'}
+          href={ctaButton.url}
+          title={ctaButton.text}
+          aria-label={`${ctaButton.text} for ${title}`}
+        />
+      )}
 
-			{/* Optional Logo display */}
-			{hasLogo && logoUrl && (
-				<div className={'mt-8 flex justify-center'}>
-					<Image
-						src={logoUrl}
-						alt={logoAlt || title}
-						width={logoWidth || 120}
-						height={logoHeight || 120}
-						className={'size-auto max-w-[180px]'}
-					/>
-				</div>
-			)}
-		</section>
-	)
+      {/* Optional Logo display */}
+      {hasLogo && logoUrl && (
+        <div className={'mt-8 flex justify-center'}>
+          <Image
+            src={logoUrl}
+            alt={logoAlt || title}
+            width={logoWidth || 120}
+            height={logoHeight || 120}
+            className={'size-auto max-w-[180px]'}
+          />
+        </div>
+      )}
+    </section>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/ResourceHero.tsx b/app/[lang]/(resources)/_components/ResourceHero.tsx
index 3ef0a8b..af9829b 100644
--- a/app/[lang]/(resources)/_components/ResourceHero.tsx
+++ b/app/[lang]/(resources)/_components/ResourceHero.tsx
@@ -18,65 +18,65 @@
 
 import Image from 'next/image'
 
-import {cl} from '@/app/[lang]/_utils/cl'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TResourceHeroProps = {
-	imageSrc: string
-	imageAlt: string
-	className?: string
-	logoSrc?: string
-	logoAlt?: string
-	logoWidth?: number
-	logoHeight?: number
-	logoPosition?: 'left' | 'center' | 'right'
-	priority?: boolean
+  imageSrc: string
+  imageAlt: string
+  className?: string
+  logoSrc?: string
+  logoAlt?: string
+  logoWidth?: number
+  logoHeight?: number
+  logoPosition?: 'left' | 'center' | 'right'
+  priority?: boolean
 }
 
 export function ResourceHero({
-	imageSrc,
-	imageAlt,
-	className,
-	logoSrc,
-	logoAlt,
-	logoWidth = 256,
-	logoHeight = 256,
-	logoPosition = 'right',
-	priority = true
+  imageSrc,
+  imageAlt,
+  className,
+  logoSrc,
+  logoAlt,
+  logoWidth = 256,
+  logoHeight = 256,
+  logoPosition = 'right',
+  priority = true,
 }: TResourceHeroProps): ReactNode {
-	// Calculate position classes for logo
-	const logoPositionClasses = {
-		left: 'justify-start pl-16',
-		center: 'justify-center',
-		right: 'justify-end pr-16'
-	}
+  // Calculate position classes for logo
+  const logoPositionClasses = {
+    left: 'justify-start pl-16',
+    center: 'justify-center',
+    right: 'justify-end pr-16',
+  }
 
-	return (
-		<section className={cl('relative mt-12 flex w-full overflow-hidden rounded-2xl', className)}>
-			{/* Hero background image */}
-			<Image
-				src={imageSrc}
-				alt={imageAlt}
-				width={2800}
-				height={720}
-				priority={priority}
-				loading={'eager'}
-				quality={90}
-			/>
+  return (
+    <section className={cl('relative mt-12 flex w-full overflow-hidden rounded-2xl', className)}>
+      {/* Hero background image */}
+      <Image
+        src={imageSrc}
+        alt={imageAlt}
+        width={2800}
+        height={720}
+        priority={priority}
+        loading={'eager'}
+        quality={90}
+      />
 
-			{/* Optional logo overlay */}
-			{logoSrc && (
-				<div className={cl('absolute inset-0 flex items-center py-6', logoPositionClasses[logoPosition])}>
-					<Image
-						src={logoSrc}
-						alt={logoAlt || 'Logo'}
-						width={logoWidth}
-						height={logoHeight}
-						className={'my-auto size-auto max-h-[256px] max-w-[256px]'}
-					/>
-				</div>
-			)}
-		</section>
-	)
+      {/* Optional logo overlay */}
+      {logoSrc && (
+        <div className={cl('absolute inset-0 flex items-center py-6', logoPositionClasses[logoPosition])}>
+          <Image
+            src={logoSrc}
+            alt={logoAlt || 'Logo'}
+            width={logoWidth}
+            height={logoHeight}
+            className={'my-auto size-auto max-h-[256px] max-w-[256px]'}
+          />
+        </div>
+      )}
+    </section>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/SupportArticleList.tsx b/app/[lang]/(resources)/_components/SupportArticleList.tsx
index 33496b5..8ca0300 100644
--- a/app/[lang]/(resources)/_components/SupportArticleList.tsx
+++ b/app/[lang]/(resources)/_components/SupportArticleList.tsx
@@ -18,129 +18,118 @@
  ** - Add custom empty state message if needed
  ************************************************************************************************/
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {useFetchSupportArticles} from '@/app/[lang]/_hooks/useFetchSupportArticles'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {IconDocs} from '@/app/[lang]/_icons/IconDocs'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { useFetchSupportArticles } from '@/app/[lang]/_hooks/useFetchSupportArticles'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { IconDocs } from '@/app/[lang]/_icons/IconDocs'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
 
-import {SupportArticleListSkeleton} from './SupportArticleListSkeleton'
-import {DEFAULT_PAGINATION} from '../_utils/constants'
+import { SupportArticleListSkeleton } from './SupportArticleListSkeleton'
+import { DEFAULT_PAGINATION } from '../_utils/constants'
 
-import type {TSupportArticle} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportArticle } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TSupportArticleListProps = {
-	pageSize?: number
-	sort?: 'asc' | 'desc'
-	initialPage?: number
-	populateContent?: boolean
-	cacheArticles?: boolean
-	emptyMessage?: string
-	gridClassName?: string
+  pageSize?: number
+  sort?: 'asc' | 'desc'
+  initialPage?: number
+  populateContent?: boolean
+  cacheArticles?: boolean
+  emptyMessage?: string
+  gridClassName?: string
 }
 
 export function SupportArticleList({
-	pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
-	sort = DEFAULT_PAGINATION.SORT,
-	initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
-	populateContent = true,
-	cacheArticles = true,
-	emptyMessage = RESOURCES_DICT.support.emptyMessage,
-	gridClassName
+  pageSize = DEFAULT_PAGINATION.PAGE_SIZE,
+  sort = DEFAULT_PAGINATION.SORT,
+  initialPage = DEFAULT_PAGINATION.INITIAL_PAGE,
+  populateContent = true,
+  cacheArticles = true,
+  emptyMessage = RESOURCES_DICT.support.emptyMessage,
+  gridClassName,
 }: TSupportArticleListProps): ReactNode {
-	const [page, setPage] = useState(initialPage)
-	const {articles, pagination, isLoading} = useFetchSupportArticles({
-		page,
-		pageSize,
-		sort,
-		populateContent,
-		cacheArticles
-	})
+  const [page, setPage] = useState(initialPage)
+  const { articles, pagination, isLoading } = useFetchSupportArticles({
+    page,
+    pageSize,
+    sort,
+    populateContent,
+    cacheArticles,
+  })
 
-	// Loading skeleton
-	if (isLoading) {
-		return <SupportArticleListSkeleton pageSize={pageSize} />
-	}
+  // Loading skeleton
+  if (isLoading) {
+    return <SupportArticleListSkeleton pageSize={pageSize} />
+  }
 
-	return (
-		<Fragment>
-			<div className={'container mx-auto'}>
-				<div className={'my-[120px] flex flex-col gap-4'}>
-					<h1 className={'text-center text-4xl lg:text-7xl'}>{RESOURCES_DICT.support.title}</h1>
-					<p className={'text-center text-base text-gray-500 lg:text-xl    '}>
-						{RESOURCES_DICT.support.description}
-					</p>
-				</div>
+  return (
+    <Fragment>
+      <div className={'container mx-auto'}>
+        <div className={'my-[120px] flex flex-col gap-4'}>
+          <h1 className={'text-center text-4xl lg:text-7xl'}>{RESOURCES_DICT.support.title}</h1>
+          <p className={'text-center text-base text-gray-500 lg:text-xl    '}>{RESOURCES_DICT.support.description}</p>
+        </div>
 
-				{/* Empty state */}
-				{!articles || articles.length === 0 ? (
-					<p
-						className={'my-20 text-center text-2xl text-gray-400'}
-						role={'status'}>
-						{emptyMessage}
-					</p>
-				) : (
-					/* Articles grid */
-					<div className={cl('mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3', gridClassName)}>
-						{articles.map((article: TSupportArticle) => (
-							<LocalizedLink
-								className={'flex items-center gap-4 rounded-2xl bg-secondBg p-6 hover:bg-secondHoverBg'}
-								href={`/support/${article.slug}`}
-								key={article.slug}>
-								<div className={'rounded-2xl bg-white/5 p-5'}>
-									<IconDocs className={'size-6'} />
-								</div>
-								<h3 className={'text-2xl'}>{article.title}</h3>
-							</LocalizedLink>
-						))}
-					</div>
-				)}
+        {/* Empty state */}
+        {!articles || articles.length === 0 ? (
+          <p className={'my-20 text-center text-2xl text-gray-400'} role={'status'}>
+            {emptyMessage}
+          </p>
+        ) : (
+          /* Articles grid */
+          <div className={cl('mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3', gridClassName)}>
+            {articles.map((article: TSupportArticle) => (
+              <LocalizedLink
+                className={'flex items-center gap-4 rounded-2xl bg-secondBg p-6 hover:bg-secondHoverBg'}
+                href={`/support/${article.slug}`}
+                key={article.slug}
+              >
+                <div className={'rounded-2xl bg-white/5 p-5'}>
+                  <IconDocs className={'size-6'} />
+                </div>
+                <h3 className={'text-2xl'}>{article.title}</h3>
+              </LocalizedLink>
+            ))}
+          </div>
+        )}
 
-				{/* Pagination controls */}
-				{pagination && pagination.pageCount > 1 && (
-					<ReactPaginate
-						pageCount={pagination?.pageCount ?? 1}
-						pageRangeDisplayed={5}
-						marginPagesDisplayed={2}
-						onPageChange={({selected}) => setPage(selected + 1)}
-						containerClassName={'flex gap-2 items-center justify-center mb-12'}
-						pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-						pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-						activeClassName={'!opacity-100'}
-						previousClassName={cl(
-							'hover:opacity-100 transition-opacity',
-							page === 1 ? 'opacity-20' : 'opacity-100'
-						)}
-						previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-						nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-						nextClassName={cl(
-							'hover:opacity-100 transition-opacity',
-							page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-						)}
-						disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-						disabledLinkClassName={'cursor-not-allowed'}
-						previousLabel={<IconChevron aria-label={'Previous page'} />}
-						nextLabel={
-							<IconChevron
-								className={'rotate-180'}
-								aria-label={'Next page'}
-							/>
-						}
-						aria-label={'Pagination'}
-					/>
-				)}
+        {/* Pagination controls */}
+        {pagination && pagination.pageCount > 1 && (
+          <ReactPaginate
+            pageCount={pagination?.pageCount ?? 1}
+            pageRangeDisplayed={5}
+            marginPagesDisplayed={2}
+            onPageChange={({ selected }) => setPage(selected + 1)}
+            containerClassName={'flex gap-2 items-center justify-center mb-12'}
+            pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+            pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+            activeClassName={'!opacity-100'}
+            previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+            previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+            nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+            nextClassName={cl(
+              'hover:opacity-100 transition-opacity',
+              page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+            )}
+            disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+            disabledLinkClassName={'cursor-not-allowed'}
+            previousLabel={<IconChevron aria-label={'Previous page'} />}
+            nextLabel={<IconChevron className={'rotate-180'} aria-label={'Next page'} />}
+            aria-label={'Pagination'}
+          />
+        )}
 
-				{/* Banner */}
-				<div className={'my-16'}>
-					<Banner />
-				</div>
-			</div>
-		</Fragment>
-	)
+        {/* Banner */}
+        <div className={'my-16'}>
+          <Banner />
+        </div>
+      </div>
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx b/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
index 37869b1..650892a 100644
--- a/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
+++ b/app/[lang]/(resources)/_components/SupportArticleListSkeleton.tsx
@@ -1,51 +1,49 @@
-import {Fragment} from 'react'
+import { Fragment } from 'react'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TSupportArticleListSkeletonProps = {
-	pageSize?: number
+  pageSize?: number
 }
 
-export function SupportArticleListSkeleton({pageSize = 6}: TSupportArticleListSkeletonProps): ReactNode {
-	return (
-		<Fragment>
-			<div className={'container mx-auto'}>
-				{/* Header */}
-				<div className={'my-[120px] flex flex-col gap-4'}>
-					<h1 className={'text-2x l text-center lg:text-7xl'}>{RESOURCES_DICT.support.title}</h1>
-					<p className={'text-center text-xl text-gray-500'}>{RESOURCES_DICT.support.description}</p>
-				</div>
+export function SupportArticleListSkeleton({ pageSize = 6 }: TSupportArticleListSkeletonProps): ReactNode {
+  return (
+    <Fragment>
+      <div className={'container mx-auto'}>
+        {/* Header */}
+        <div className={'my-[120px] flex flex-col gap-4'}>
+          <h1 className={'text-2x l text-center lg:text-7xl'}>{RESOURCES_DICT.support.title}</h1>
+          <p className={'text-center text-xl text-gray-500'}>{RESOURCES_DICT.support.description}</p>
+        </div>
 
-				{/* Articles grid skeleton */}
-				<div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
-					{Array.from({length: pageSize}).map((_, i) => (
-						<div
-							key={i}
-							className={'flex items-center gap-4 rounded-2xl bg-secondBg p-6'}>
-							<div className={'size-16 animate-pulse rounded-2xl bg-gray-800'} />
-							<div className={'flex-1 space-y-2'}>
-								<div className={'h-6 w-3/4 animate-pulse rounded bg-gray-800'} />
-								<div className={'h-4 w-1/2 animate-pulse rounded bg-gray-800'} />
-							</div>
-						</div>
-					))}
-				</div>
+        {/* Articles grid skeleton */}
+        <div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
+          {Array.from({ length: pageSize }).map((_, i) => (
+            <div key={i} className={'flex items-center gap-4 rounded-2xl bg-secondBg p-6'}>
+              <div className={'size-16 animate-pulse rounded-2xl bg-gray-800'} />
+              <div className={'flex-1 space-y-2'}>
+                <div className={'h-6 w-3/4 animate-pulse rounded bg-gray-800'} />
+                <div className={'h-4 w-1/2 animate-pulse rounded bg-gray-800'} />
+              </div>
+            </div>
+          ))}
+        </div>
 
-				{/* Pagination skeleton */}
-				<div className={'mb-12 flex items-center justify-center gap-2'}>
-					<div className={'size-12 animate-pulse rounded bg-gray-800'} />
-					<div className={'size-12 animate-pulse rounded bg-gray-800'} />
-					<div className={'size-12 animate-pulse rounded bg-gray-800'} />
-				</div>
+        {/* Pagination skeleton */}
+        <div className={'mb-12 flex items-center justify-center gap-2'}>
+          <div className={'size-12 animate-pulse rounded bg-gray-800'} />
+          <div className={'size-12 animate-pulse rounded bg-gray-800'} />
+          <div className={'size-12 animate-pulse rounded bg-gray-800'} />
+        </div>
 
-				{/* Banner */}
-				<div className={'my-16'}>
-					<Banner />
-				</div>
-			</div>
-		</Fragment>
-	)
+        {/* Banner */}
+        <div className={'my-16'}>
+          <Banner />
+        </div>
+      </div>
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx b/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx
index 179b528..5f9f68e 100644
--- a/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx
+++ b/app/[lang]/(resources)/_components/SupportedWalletAccelerate.tsx
@@ -1,74 +1,69 @@
-import {IconBorrow} from '@/app/[lang]/_icons/IconBorrow'
-import {IconEarn} from '@/app/[lang]/_icons/IconEarn'
-import {IconGlobe} from '@/app/[lang]/_icons/IconGlobe'
-import {IconKey} from '@/app/[lang]/_icons/IconKey'
-import {IconShield} from '@/app/[lang]/_icons/IconShield'
-import {IconTrade} from '@/app/[lang]/_icons/IconTrade'
+import { IconBorrow } from '@/app/[lang]/_icons/IconBorrow'
+import { IconEarn } from '@/app/[lang]/_icons/IconEarn'
+import { IconGlobe } from '@/app/[lang]/_icons/IconGlobe'
+import { IconKey } from '@/app/[lang]/_icons/IconKey'
+import { IconShield } from '@/app/[lang]/_icons/IconShield'
+import { IconTrade } from '@/app/[lang]/_icons/IconTrade'
 
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 const ACCELERATE_WITH_SHAPESHIFT_DATA = [
-	{
-		title: 'Trade',
-		description:
-			'Swap 10,000+ EVM assets like ETH, stablecoins, and tokens on Arbitrum, Base, Polygon, and BNB Chain with the best rates through ShapeShift’s aggregator.',
-		icon: (props: SVGProps<SVGSVGElement>) => <IconTrade {...props} />
-	},
-	{
-		title: 'Save',
-		description: 'Compare top liquidity sources in real time and capture the most competitive swap routes.',
-		icon: (props: SVGProps<SVGSVGElement>) => <IconBorrow {...props} />
-	},
-	{
-		title: 'Earn',
-		description:
-			'Access DeFi in one click: stake, farm, or provide liquidity across supported EVM chains without leaving ShapeShift.',
-		icon: (props: SVGProps<SVGSVGElement>) => <IconEarn {...props} />
-	},
-	{
-		title: 'Control your crypto',
-		description:
-			'Stay non-custodial. Whether you connect Base App (Coinbase Wallet) or ShapeShift Wallet, you always hold your keys and stay in charge of your funds.',
-		icon: (props: SVGProps<SVGSVGElement>) => <IconKey {...props} />
-	},
-	{
-		title: 'Multichain',
-		description:
-			'Unlock seamless EVM trading with Base App, or import your seed into ShapeShift Wallet to access full multichain support including Bitcoin, Dogecoin, and more',
-		icon: (props: SVGProps<SVGSVGElement>) => <IconGlobe {...props} />
-	},
-	{
-		title: 'Privacy',
-		description: 'No KYC. No sign-ups. ShapeShift protects your privacy while you trade and explore DeFi.',
-		icon: (props: SVGProps<SVGSVGElement>) => <IconShield {...props} />
-	}
+  {
+    title: 'Trade',
+    description:
+      'Swap 10,000+ EVM assets like ETH, stablecoins, and tokens on Arbitrum, Base, Polygon, and BNB Chain with the best rates through ShapeShift’s aggregator.',
+    icon: (props: SVGProps<SVGSVGElement>) => <IconTrade {...props} />,
+  },
+  {
+    title: 'Save',
+    description: 'Compare top liquidity sources in real time and capture the most competitive swap routes.',
+    icon: (props: SVGProps<SVGSVGElement>) => <IconBorrow {...props} />,
+  },
+  {
+    title: 'Earn',
+    description:
+      'Access DeFi in one click: stake, farm, or provide liquidity across supported EVM chains without leaving ShapeShift.',
+    icon: (props: SVGProps<SVGSVGElement>) => <IconEarn {...props} />,
+  },
+  {
+    title: 'Control your crypto',
+    description:
+      'Stay non-custodial. Whether you connect Base App (Coinbase Wallet) or ShapeShift Wallet, you always hold your keys and stay in charge of your funds.',
+    icon: (props: SVGProps<SVGSVGElement>) => <IconKey {...props} />,
+  },
+  {
+    title: 'Multichain',
+    description:
+      'Unlock seamless EVM trading with Base App, or import your seed into ShapeShift Wallet to access full multichain support including Bitcoin, Dogecoin, and more',
+    icon: (props: SVGProps<SVGSVGElement>) => <IconGlobe {...props} />,
+  },
+  {
+    title: 'Privacy',
+    description: 'No KYC. No sign-ups. ShapeShift protects your privacy while you trade and explore DeFi.',
+    icon: (props: SVGProps<SVGSVGElement>) => <IconShield {...props} />,
+  },
 ]
 
 export function SupportedWalletAccelerate(): ReactNode {
-	return (
-		<div className={'mb-24 mt-[120px] lg:mb-48 lg:mt-60'}>
-			<section className={'container flex flex-col gap-14'}>
-				<h1 className={'text-[40px] leading-10 lg:text-7xl'}>{'Accelerate with ShapeShift'}</h1>
-				<div className={'grid grid-cols-1 gap-1 md:grid-cols-3'}>
-					{ACCELERATE_WITH_SHAPESHIFT_DATA.map(action => (
-						<div
-							className={'flex gap-6 rounded-2xl bg-secondBg px-6 py-8 lg:px-10 lg:py-[30px]'}
-							key={action.title}>
-							<div
-								className={
-									'flex size-12 items-center justify-center rounded-2xl bg-white/5 p-4 lg:size-16 lg:p-5'
-								}>
-								{action.icon({className: 'size-5'})}
-							</div>
+  return (
+    <div className={'mb-24 mt-[120px] lg:mb-48 lg:mt-60'}>
+      <section className={'container flex flex-col gap-14'}>
+        <h1 className={'text-[40px] leading-10 lg:text-7xl'}>{'Accelerate with ShapeShift'}</h1>
+        <div className={'grid grid-cols-1 gap-1 md:grid-cols-3'}>
+          {ACCELERATE_WITH_SHAPESHIFT_DATA.map((action) => (
+            <div className={'flex gap-6 rounded-2xl bg-secondBg px-6 py-8 lg:px-10 lg:py-[30px]'} key={action.title}>
+              <div className={'flex size-12 items-center justify-center rounded-2xl bg-white/5 p-4 lg:size-16 lg:p-5'}>
+                {action.icon({ className: 'size-5' })}
+              </div>
 
-							<div className={'flex flex-col gap-1'}>
-								<h2 className={'text-base lg:text-2xl'}>{action.title}</h2>
-								<p className={'text-sm text-gray-500 lg:text-base'}>{action.description}</p>
-							</div>
-						</div>
-					))}
-				</div>
-			</section>
-		</div>
-	)
+              <div className={'flex flex-col gap-1'}>
+                <h2 className={'text-base lg:text-2xl'}>{action.title}</h2>
+                <p className={'text-sm text-gray-500 lg:text-base'}>{action.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx b/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx
index eb206fd..c4e614f 100644
--- a/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx
+++ b/app/[lang]/(resources)/_components/SupportedWalletHeader.tsx
@@ -1,42 +1,35 @@
-import {Button} from '@/app/[lang]/_components/Button'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
+import { Button } from '@/app/[lang]/_components/Button'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type THeaderData = {
-	title: string
-	description: string
-	items: string[]
+  title: string
+  description: string
+  items: string[]
 }
 export function SupportedWalletHeader(data: THeaderData): ReactNode {
-	return (
-		<section className={'flex flex-col items-center'}>
-			<div className={'mb-10 hidden gap-2 lg:flex'}>
-				{data.items.map(item => (
-					<div
-						className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'}
-						key={item}>
-						<IconCheck className={'text-blue'} />
-						<span className={'text-blue'}>{item}</span>
-					</div>
-				))}
-			</div>
-			<div className={'mb-10 flex flex-col items-center gap-2'}>
-				<h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-7xl'}>
-					{`ShapeShift supports ${data.title}`}
-				</h1>
-				<p
-					className={
-						'mx-auto max-w-screen-lg whitespace-break-spaces break-keep text-center text-base text-gray-500 lg:text-xl'
-					}>
-					{data.description}
-				</p>
-			</div>
-			<Button
-				variant={'blue'}
-				href={'https://app.shapeshift.com/'}
-				title={'Get Started'}
-			/>
-		</section>
-	)
+  return (
+    <section className={'flex flex-col items-center'}>
+      <div className={'mb-10 hidden gap-2 lg:flex'}>
+        {data.items.map((item) => (
+          <div className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'} key={item}>
+            <IconCheck className={'text-blue'} />
+            <span className={'text-blue'}>{item}</span>
+          </div>
+        ))}
+      </div>
+      <div className={'mb-10 flex flex-col items-center gap-2'}>
+        <h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-7xl'}>{`ShapeShift supports ${data.title}`}</h1>
+        <p
+          className={
+            'mx-auto max-w-screen-lg whitespace-break-spaces break-keep text-center text-base text-gray-500 lg:text-xl'
+          }
+        >
+          {data.description}
+        </p>
+      </div>
+      <Button variant={'blue'} href={'https://app.shapeshift.com/'} title={'Get Started'} />
+    </section>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/SupportedWalletHero.tsx b/app/[lang]/(resources)/_components/SupportedWalletHero.tsx
index 247a90e..994a0f7 100644
--- a/app/[lang]/(resources)/_components/SupportedWalletHero.tsx
+++ b/app/[lang]/(resources)/_components/SupportedWalletHero.tsx
@@ -1,27 +1,20 @@
 import Image from 'next/image'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-export function SupportedWalletHero(props: {url: string; width: number; height: number; name: string}): ReactNode {
-	return (
-		<section className={'relative flex w-full overflow-hidden rounded-2xl'}>
-			<Image
-				src={'/wallets/hero.jpg'}
-				alt={''}
-				loading={'eager'}
-				priority
-				width={2800}
-				height={720}
-			/>
-			<div className={'absolute inset-0 flex items-center justify-end py-6 pr-16'}>
-				<Image
-					src={props.url}
-					alt={props.name}
-					width={props.width}
-					height={props.height}
-					className={'my-auto h-full w-auto'}
-				/>
-			</div>
-		</section>
-	)
+export function SupportedWalletHero(props: { url: string; width: number; height: number; name: string }): ReactNode {
+  return (
+    <section className={'relative flex w-full overflow-hidden rounded-2xl'}>
+      <Image src={'/wallets/hero.jpg'} alt={''} loading={'eager'} priority width={2800} height={720} />
+      <div className={'absolute inset-0 flex items-center justify-end py-6 pr-16'}>
+        <Image
+          src={props.url}
+          alt={props.name}
+          width={props.width}
+          height={props.height}
+          className={'my-auto h-full w-auto'}
+        />
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/(resources)/_components/WalletList.tsx b/app/[lang]/(resources)/_components/WalletList.tsx
index 681db32..dad1fca 100644
--- a/app/[lang]/(resources)/_components/WalletList.tsx
+++ b/app/[lang]/(resources)/_components/WalletList.tsx
@@ -16,41 +16,39 @@
  ** - Pass wallets data and optional loading state
  ************************************************************************************************/
 
-import {ResourceCard} from './ResourceCard'
-import {ResourceGrid} from './ResourceGrid'
+import { ResourceCard } from './ResourceCard'
+import { ResourceGrid } from './ResourceGrid'
 
-import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
+import type { TSupportedWalletData } from '@/app/[lang]/_components/strapi/types'
 
 type TWalletListProps = {
-	wallets: TSupportedWalletData[] | null
-	isLoading?: boolean
-	className?: string
-	isSearchQuery?: boolean
+  wallets: TSupportedWalletData[] | null
+  isLoading?: boolean
+  className?: string
+  isSearchQuery?: boolean
 }
 
-export function WalletList({wallets, isLoading, className, isSearchQuery}: TWalletListProps): JSX.Element {
-	return (
-		<ResourceGrid
-			items={wallets}
-			isLoading={isLoading}
-			emptyMessage={
-				isSearchQuery ? "We couldn't find anything matching your search." : 'No wallets available yet.'
-			}
-			className={className}
-			renderItem={wallet => (
-				<ResourceCard
-					key={wallet.slug}
-					slug={wallet.slug}
-					title={wallet.name}
-					description={wallet.description}
-					imageUrl={wallet.featuredImg?.url}
-					imageWidth={wallet.featuredImg?.width}
-					imageHeight={wallet.featuredImg?.height}
-					baseURL={'/wallets'}
-					imagePosition={'center'}
-					altText={`${wallet.name} logo`}
-				/>
-			)}
-		/>
-	)
+export function WalletList({ wallets, isLoading, className, isSearchQuery }: TWalletListProps): JSX.Element {
+  return (
+    <ResourceGrid
+      items={wallets}
+      isLoading={isLoading}
+      emptyMessage={isSearchQuery ? "We couldn't find anything matching your search." : 'No wallets available yet.'}
+      className={className}
+      renderItem={(wallet) => (
+        <ResourceCard
+          key={wallet.slug}
+          slug={wallet.slug}
+          title={wallet.name}
+          description={wallet.description}
+          imageUrl={wallet.featuredImg?.url}
+          imageWidth={wallet.featuredImg?.width}
+          imageHeight={wallet.featuredImg?.height}
+          baseURL={'/wallets'}
+          imagePosition={'center'}
+          altText={`${wallet.name} logo`}
+        />
+      )}
+    />
+  )
 }
diff --git a/app/[lang]/(resources)/_utils/constants.ts b/app/[lang]/(resources)/_utils/constants.ts
index 1bd2207..58e79bf 100644
--- a/app/[lang]/(resources)/_utils/constants.ts
+++ b/app/[lang]/(resources)/_utils/constants.ts
@@ -20,9 +20,9 @@
  * Default pagination settings used across resource list pages
  ************************************************************************************************/
 export const DEFAULT_PAGINATION = {
-	PAGE_SIZE: 12,
-	SORT: 'desc' as const,
-	INITIAL_PAGE: 1
+  PAGE_SIZE: 12,
+  SORT: 'desc' as const,
+  INITIAL_PAGE: 1,
 }
 
 /************************************************************************************************
diff --git a/app/[lang]/(resources)/_utils/fetchUtils.ts b/app/[lang]/(resources)/_utils/fetchUtils.ts
index 76ac282..a49644a 100644
--- a/app/[lang]/(resources)/_utils/fetchUtils.ts
+++ b/app/[lang]/(resources)/_utils/fetchUtils.ts
@@ -16,21 +16,21 @@
  ************************************************************************************************/
 
 import type {
-	TDiscoverData,
-	TFaqData,
-	TSupportedChainData,
-	TSupportedProtocolData,
-	TSupportedWalletData
+  TDiscoverData,
+  TFaqData,
+  TSupportedChainData,
+  TSupportedProtocolData,
+  TSupportedWalletData,
 } from '@/app/[lang]/_components/strapi/types'
 
 // Common headers and cache configuration
 const apiConfig = {
-	headers: {
-		Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-	},
-	next: {
-		revalidate: 3600 // Cache for 1 hour
-	}
+  headers: {
+    Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+  },
+  next: {
+    revalidate: 3600, // Cache for 1 hour
+  },
 }
 
 /************************************************************************************************
@@ -39,23 +39,23 @@ const apiConfig = {
  * @returns Promise resolving to array of protocol data or null if error
  ************************************************************************************************/
 export async function fetchAllProtocols(): Promise<TSupportedProtocolData[] | null> {
-	try {
-		const response = await fetch(
-			`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?populate=*&pagination[page]=1&pagination[pageSize]=500`,
-			apiConfig
-		)
-
-		if (!response.ok) {
-			console.error(`Failed to fetch protocols: ${response.status}`)
-			return null
-		}
-
-		const data = await response.json()
-		return data.data || null
-	} catch (error) {
-		console.error('Error fetching protocols:', error instanceof Error ? error.message : String(error))
-		return null
-	}
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+      apiConfig
+    )
+
+    if (!response.ok) {
+      console.error(`Failed to fetch protocols: ${response.status}`)
+      return null
+    }
+
+    const data = await response.json()
+    return data.data || null
+  } catch (error) {
+    console.error('Error fetching protocols:', error instanceof Error ? error.message : String(error))
+    return null
+  }
 }
 
 /************************************************************************************************
@@ -64,23 +64,23 @@ export async function fetchAllProtocols(): Promise<TSupportedProtocolData[] | nu
  * @returns Promise resolving to array of chain data or null if error
  ************************************************************************************************/
 export async function fetchAllChains(): Promise<TSupportedChainData[] | null> {
-	try {
-		const response = await fetch(
-			`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?populate=*&pagination[page]=1&pagination[pageSize]=500`,
-			apiConfig
-		)
-
-		if (!response.ok) {
-			console.error(`Failed to fetch chains: ${response.status}`)
-			return null
-		}
-
-		const data = await response.json()
-		return data.data || null
-	} catch (error) {
-		console.error('Error fetching chains:', error instanceof Error ? error.message : String(error))
-		return null
-	}
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+      apiConfig
+    )
+
+    if (!response.ok) {
+      console.error(`Failed to fetch chains: ${response.status}`)
+      return null
+    }
+
+    const data = await response.json()
+    return data.data || null
+  } catch (error) {
+    console.error('Error fetching chains:', error instanceof Error ? error.message : String(error))
+    return null
+  }
 }
 
 /************************************************************************************************
@@ -89,23 +89,23 @@ export async function fetchAllChains(): Promise<TSupportedChainData[] | null> {
  * @returns Promise resolving to array of wallet data or null if error
  ************************************************************************************************/
 export async function fetchAllWallets(): Promise<TSupportedWalletData[] | null> {
-	try {
-		const response = await fetch(
-			`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?populate=*&pagination[page]=1&pagination[pageSize]=500`,
-			apiConfig
-		)
-
-		if (!response.ok) {
-			console.error(`Failed to fetch wallets: ${response.status}`)
-			return null
-		}
-
-		const data = await response.json()
-		return data.data || null
-	} catch (error) {
-		console.error('Error fetching wallets:', error instanceof Error ? error.message : String(error))
-		return null
-	}
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?populate=*&pagination[page]=1&pagination[pageSize]=500`,
+      apiConfig
+    )
+
+    if (!response.ok) {
+      console.error(`Failed to fetch wallets: ${response.status}`)
+      return null
+    }
+
+    const data = await response.json()
+    return data.data || null
+  } catch (error) {
+    console.error('Error fetching wallets:', error instanceof Error ? error.message : String(error))
+    return null
+  }
 }
 
 /************************************************************************************************
@@ -115,26 +115,26 @@ export async function fetchAllWallets(): Promise<TSupportedWalletData[] | null>
  * @returns Promise resolving to discover data or null if not found
  ************************************************************************************************/
 export async function fetchDiscoverBySlug(slug: string): Promise<TDiscoverData | null> {
-	try {
-		const response = await fetch(
-			`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/discovers?filters[slug][$eq]=${slug}&populate[0]=features&fields[1]=title&fields[2]=description&populate[3]=featuredImg&populate[4]=features.image&fields[5]=tag&populate[6]=features.buttonCta&pagination[page]=1&pagination[pageSize]=500`,
-			apiConfig
-		)
-
-		if (!response.ok) {
-			console.error(`Failed to fetch discover data for slug "${slug}": ${response.status}`)
-			return null
-		}
-
-		const data = await response.json()
-		return data.data?.[0] || null
-	} catch (error) {
-		console.error(
-			`Error fetching discover data for slug "${slug}":`,
-			error instanceof Error ? error.message : String(error)
-		)
-		return null
-	}
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/discovers?filters[slug][$eq]=${slug}&populate[0]=features&fields[1]=title&fields[2]=description&populate[3]=featuredImg&populate[4]=features.image&fields[5]=tag&populate[6]=features.buttonCta&pagination[page]=1&pagination[pageSize]=500`,
+      apiConfig
+    )
+
+    if (!response.ok) {
+      console.error(`Failed to fetch discover data for slug "${slug}": ${response.status}`)
+      return null
+    }
+
+    const data = await response.json()
+    return data.data?.[0] || null
+  } catch (error) {
+    console.error(
+      `Error fetching discover data for slug "${slug}":`,
+      error instanceof Error ? error.message : String(error)
+    )
+    return null
+  }
 }
 
 /************************************************************************************************
@@ -143,21 +143,21 @@ export async function fetchDiscoverBySlug(slug: string): Promise<TDiscoverData |
  * @returns Promise resolving to FAQ data or null if not found
  ************************************************************************************************/
 export async function fetchFaqData(): Promise<TFaqData | null> {
-	try {
-		const response = await fetch(
-			`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/faq?populate[faqSection][populate][faqSectionItem][populate]=*&pagination[page]=1&pagination[pageSize]=500`,
-			apiConfig
-		)
-
-		if (!response.ok) {
-			console.error(`Failed to fetch FAQ data: ${response.status}`)
-			return null
-		}
-
-		const data = await response.json()
-		return data.data || null
-	} catch (error) {
-		console.error('Error fetching FAQ data:', error instanceof Error ? error.message : String(error))
-		return null
-	}
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/faq?populate[faqSection][populate][faqSectionItem][populate]=*&pagination[page]=1&pagination[pageSize]=500`,
+      apiConfig
+    )
+
+    if (!response.ok) {
+      console.error(`Failed to fetch FAQ data: ${response.status}`)
+      return null
+    }
+
+    const data = await response.json()
+    return data.data || null
+  } catch (error) {
+    console.error('Error fetching FAQ data:', error instanceof Error ? error.message : String(error))
+    return null
+  }
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx b/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx
index bb072b7..d656ab8 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import {usePathname} from 'next/navigation'
+import { usePathname } from 'next/navigation'
 
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { cl } from '@/app/[lang]/_utils/cl'
 
 /********************************************************************************************
  * Blog Breadcrumb Navigation Component
@@ -13,17 +13,18 @@ import {cl} from '@/app/[lang]/_utils/cl'
  * Automatically hides when on the main blog page.
  ********************************************************************************************/
 export function BlogBreadcrumb(): React.ReactNode {
-	const pathname = usePathname()
+  const pathname = usePathname()
 
-	return (
-		<LocalizedLink
-			className={cl(
-				'mb-6 flex items-center gap-1 py-2 text-gray-500',
-				pathname === '/blog' ? 'invisible pointer-events-none' : ''
-			)}
-			href={'/blog'}>
-			<IconBack />
-			<span className={'ml-2'}>{'Back to blog'}</span>
-		</LocalizedLink>
-	)
+  return (
+    <LocalizedLink
+      className={cl(
+        'mb-6 flex items-center gap-1 py-2 text-gray-500',
+        pathname === '/blog' ? 'invisible pointer-events-none' : ''
+      )}
+      href={'/blog'}
+    >
+      <IconBack />
+      <span className={'ml-2'}>{'Back to blog'}</span>
+    </LocalizedLink>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx b/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx
index b3d695e..55c3d77 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/BlogNav.tsx
@@ -1,40 +1,40 @@
 'use client'
 
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
 
-import {TabItem} from '@/app/[lang]/_components/TabItem'
-import {blogTags, blogTypes} from '@/app/[lang]/_utils/constants'
+import { TabItem } from '@/app/[lang]/_components/TabItem'
+import { blogTags, blogTypes } from '@/app/[lang]/_utils/constants'
 
 export function BlogNav(): React.ReactNode {
-	const pathname = usePathname()
-	const params = useParams()
-	const category = (params.category as string) || ''
-	const tag = (params.tag as string) || ''
+  const pathname = usePathname()
+  const params = useParams()
+  const category = (params.category as string) || ''
+  const tag = (params.tag as string) || ''
 
-	if (tag || pathname.includes('/tags')) {
-		return (
-			<div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
-				{blogTags.map(tab => (
-					<TabItem
-						key={tab.slug}
-						title={tab.title}
-						selected={tag ? tag.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
-						href={tab.slug === 'all' ? '/blog/tags' : `/blog/tags/${tab.slug}`}
-					/>
-				))}
-			</div>
-		)
-	}
-	return (
-		<div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
-			{blogTypes.map(tab => (
-				<TabItem
-					key={tab.slug}
-					title={tab.title}
-					selected={category ? category.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
-					href={tab.slug === 'all' ? '/blog' : `/blog/categories/${tab.slug}`}
-				/>
-			))}
-		</div>
-	)
+  if (tag || pathname.includes('/tags')) {
+    return (
+      <div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
+        {blogTags.map((tab) => (
+          <TabItem
+            key={tab.slug}
+            title={tab.title}
+            selected={tag ? tag.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
+            href={tab.slug === 'all' ? '/blog/tags' : `/blog/tags/${tab.slug}`}
+          />
+        ))}
+      </div>
+    )
+  }
+  return (
+    <div className={'mb-6 flex w-full flex-wrap gap-4 rounded-full p-1'}>
+      {blogTypes.map((tab) => (
+        <TabItem
+          key={tab.slug}
+          title={tab.title}
+          selected={category ? category.toLowerCase() === tab.slug.toLowerCase() : 'all' === tab.slug}
+          href={tab.slug === 'all' ? '/blog' : `/blog/categories/${tab.slug}`}
+        />
+      ))}
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx b/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx
index 9b14707..3129225 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle.tsx
@@ -1,46 +1,46 @@
 'use client'
 
-import {useParams, usePathname} from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
 
-import {blogTypesSlugToCategory} from '@/app/[lang]/_utils/constants'
+import { blogTypesSlugToCategory } from '@/app/[lang]/_utils/constants'
 
 export function BlogTitle(): React.ReactNode {
-	const pathname = usePathname()
-	const params = useParams()
-	const category = (params.category as string) || ''
-	const tag = (params.tag as string) || ''
+  const pathname = usePathname()
+  const params = useParams()
+  const category = (params.category as string) || ''
+  const tag = (params.tag as string) || ''
 
-	if (tag || pathname.includes('/tags')) {
-		if (tag) {
-			return (
-				<div className={'mb-8 text-7xl'}>
-					<span className={'text-white'}>{'Tagged: '}</span>
-					<span className={'capitalize text-blue'}>{tag}</span>
-				</div>
-			)
-		}
-		return (
-			<div className={'mb-8 text-7xl'}>
-				<span className={'text-white'}>{'All '}</span>
-				<span className={'capitalize text-blue'}>{'tags'}</span>
-			</div>
-		)
-	}
+  if (tag || pathname.includes('/tags')) {
+    if (tag) {
+      return (
+        <div className={'mb-8 text-7xl'}>
+          <span className={'text-white'}>{'Tagged: '}</span>
+          <span className={'capitalize text-blue'}>{tag}</span>
+        </div>
+      )
+    }
+    return (
+      <div className={'mb-8 text-7xl'}>
+        <span className={'text-white'}>{'All '}</span>
+        <span className={'capitalize text-blue'}>{'tags'}</span>
+      </div>
+    )
+  }
 
-	if (category) {
-		return (
-			<div className={'mb-8 text-7xl'}>
-				<span className={'text-white'}>{'Category: '}</span>
-				<span className={'capitalize text-blue'}>{blogTypesSlugToCategory(category)}</span>
-			</div>
-		)
-	}
-	return (
-		<div className={'mb-8 text-[40px] leading-10 lg:text-7xl'}>
-			<span className={'text-white'}>{'ShapeShift'}</span>
-			&nbsp;
-			<span className={'text-blue'}>{'Blog'}</span>
-			<span className={'hidden text-blue lg:inline'}>{'.'}</span>
-		</div>
-	)
+  if (category) {
+    return (
+      <div className={'mb-8 text-7xl'}>
+        <span className={'text-white'}>{'Category: '}</span>
+        <span className={'capitalize text-blue'}>{blogTypesSlugToCategory(category)}</span>
+      </div>
+    )
+  }
+  return (
+    <div className={'mb-8 text-[40px] leading-10 lg:text-7xl'}>
+      <span className={'text-white'}>{'ShapeShift'}</span>
+      &nbsp;
+      <span className={'text-blue'}>{'Blog'}</span>
+      <span className={'hidden text-blue lg:inline'}>{'.'}</span>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
index 045d044..2928dcd 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
@@ -18,22 +18,22 @@
 
 'use client'
 
-import {PostList} from '@/app/[lang]/(resources)/_components/PostList'
-import {blogTypesSlugToCategory} from '@/app/[lang]/_utils/constants'
+import { PostList } from '@/app/[lang]/(resources)/_components/PostList'
+import { blogTypesSlugToCategory } from '@/app/[lang]/_utils/constants'
 
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
 
-export function ListOfPosts({category}: {category: string}): ReactElement {
-	// Convert URL slug to proper category type for the API
-	const categoryType = blogTypesSlugToCategory(category)
+export function ListOfPosts({ category }: { category: string }): ReactElement {
+  // Convert URL slug to proper category type for the API
+  const categoryType = blogTypesSlugToCategory(category)
 
-	// Format category name for display (capitalize first letter)
-	const formattedCategory = category.charAt(0).toUpperCase() + category.slice(1)
+  // Format category name for display (capitalize first letter)
+  const formattedCategory = category.charAt(0).toUpperCase() + category.slice(1)
 
-	return (
-		<PostList
-			category={categoryType}
-			emptyMessage={`We couldn't find any posts in the ${formattedCategory} category.`}
-		/>
-	)
+  return (
+    <PostList
+      category={categoryType}
+      emptyMessage={`We couldn't find any posts in the ${formattedCategory} category.`}
+    />
+  )
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx
index cf805d4..679fb5f 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/page.tsx
@@ -1,24 +1,24 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {ListOfPosts} from '@/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts'
+import { ListOfPosts } from '@/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts'
 
 export default async function BlogCategoriesPage(props: {
-	params: Promise<{category: string}>
+  params: Promise<{ category: string }>
 }): Promise<React.ReactNode> {
-	const {category} = await props.params
-	const data = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[type][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	)
-	const {data: posts} = await data.json()
+  const { category } = await props.params
 
-	if (!posts) {
-		return notFound()
-	}
+  const data = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[type][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  )
 
-	return <ListOfPosts category={category} />
+  const { data: posts } = await data.json()
+
+  if (!posts) return notFound()
+
+  return <ListOfPosts category={category} />
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx b/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx
index 4f2443f..8d374a4 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/layout.tsx
@@ -1,19 +1,19 @@
-import {BlogBreadcrumb} from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb'
-import {BlogNav} from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogNav'
-import {BlogTitle} from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle'
+import { BlogBreadcrumb } from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogBreadcrumb'
+import { BlogNav } from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogNav'
+import { BlogTitle } from '@/app/[lang]/(resources)/blog/(withNavigation)/BlogTitle'
 
 export default async function BlogPageLayout(props: {
-	children: React.ReactNode
-	params: Promise<{category: string}>
+  children: React.ReactNode
+  params: Promise<{ category: string }>
 }): Promise<React.ReactNode> {
-	await props.params
+  await props.params
 
-	return (
-		<main className={'container mx-auto mt-10 py-8 lg:mt-24'}>
-			<BlogBreadcrumb />
-			<BlogTitle />
-			<BlogNav />
-			{props.children}
-		</main>
-	)
+  return (
+    <main className={'container mx-auto mt-10 py-8 lg:mt-24'}>
+      <BlogBreadcrumb />
+      <BlogTitle />
+      <BlogNav />
+      {props.children}
+    </main>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/page.tsx b/app/[lang]/(resources)/blog/(withNavigation)/page.tsx
index 28891a3..dc62c87 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/page.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/page.tsx
@@ -18,10 +18,10 @@
 
 'use client'
 
-import {PostList} from '@/app/[lang]/(resources)/_components/PostList'
+import { PostList } from '@/app/[lang]/(resources)/_components/PostList'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function BlogListPage(): ReactNode {
-	return <PostList emptyMessage={"We couldn't find any blog posts matching your criteria."} />
+  return <PostList emptyMessage={"We couldn't find any blog posts matching your criteria."} />
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts.tsx b/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts.tsx
index 2107c7d..70898ed 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts.tsx
@@ -1,88 +1,78 @@
 'use client'
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {BlogPost} from '@/app/[lang]/_components/BlogPost'
-import {useFetchPosts} from '@/app/[lang]/_hooks/useFetchPosts'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { BlogPost } from '@/app/[lang]/_components/BlogPost'
+import { useFetchPosts } from '@/app/[lang]/_hooks/useFetchPosts'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {TBlogPost} from '@/app/[lang]/_components/strapi/types'
-import type {ReactElement} from 'react'
+import type { TBlogPost } from '@/app/[lang]/_components/strapi/types'
+import type { ReactElement } from 'react'
 
 const PAGE_SIZE = 12
 const SORT = 'desc'
-export function ListOfPosts(props: {tag: string}): ReactElement {
-	const {tag} = props
-	const [page, setPage] = useState(1)
-	const {posts, pagination, isLoading} = useFetchPosts({
-		page,
-		pageSize: PAGE_SIZE,
-		sort: SORT,
-		tag,
-		populateContent: true,
-		cachePosts: true
-	})
+export function ListOfPosts(props: { tag: string }): ReactElement {
+  const { tag } = props
+  const [page, setPage] = useState(1)
+  const { posts, pagination, isLoading } = useFetchPosts({
+    page,
+    pageSize: PAGE_SIZE,
+    sort: SORT,
+    tag,
+    populateContent: true,
+    cachePosts: true,
+  })
 
-	if (isLoading) {
-		return (
-			<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-				{[...Array(PAGE_SIZE)].map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-					/>
-				))}
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+        {[...Array(PAGE_SIZE)].map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{posts.length === 0 ? (
-				<p className={'my-20 text-center text-2xl text-gray-400'}>
-					{"We couldn't find any blog posts matching your criteria."}
-				</p>
-			) : (
-				<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-					{posts.map((post: TBlogPost) => (
-						<BlogPost
-							key={post.documentId}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
+  return (
+    <Fragment>
+      {posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'}>
+          {"We couldn't find any blog posts matching your criteria."}
+        </p>
+      ) : (
+        <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+          {posts.map((post: TBlogPost) => (
+            <BlogPost key={post.documentId} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
 
-			<ReactPaginate
-				pageCount={pagination?.pageCount ?? 1}
-				pageRangeDisplayed={5}
-				marginPagesDisplayed={2}
-				onPageChange={({selected}) => setPage(selected + 1)}
-				containerClassName={'flex gap-2 items-center justify-center mb-16'}
-				pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-				pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				activeClassName={'!opacity-100'}
-				previousClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === 1 ? 'opacity-20' : 'opacity-100'
-				)}
-				previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-				)}
-				disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-				disabledLinkClassName={'cursor-not-allowed'}
-				previousLabel={<IconChevron />}
-				nextLabel={<IconChevron className={'rotate-180'} />}
-			/>
+      <ReactPaginate
+        pageCount={pagination?.pageCount ?? 1}
+        pageRangeDisplayed={5}
+        marginPagesDisplayed={2}
+        onPageChange={({ selected }) => setPage(selected + 1)}
+        containerClassName={'flex gap-2 items-center justify-center mb-16'}
+        pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+        pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        activeClassName={'!opacity-100'}
+        previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+        previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextClassName={cl(
+          'hover:opacity-100 transition-opacity',
+          page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+        )}
+        disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+        disabledLinkClassName={'cursor-not-allowed'}
+        previousLabel={<IconChevron />}
+        nextLabel={<IconChevron className={'rotate-180'} />}
+      />
 
-			<Banner />
-		</Fragment>
-	)
+      <Banner />
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx b/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx
index 771a761..f6c3cc4 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/page.tsx
@@ -1,22 +1,22 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {ListOfPosts} from '@/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts'
+import { ListOfPosts } from '@/app/[lang]/(resources)/blog/(withNavigation)/tags/[tag]/ListOfPosts'
 
-export default async function BlogTagsPage(props: {params: Promise<{tag: string}>}): Promise<React.ReactNode> {
-	const {tag} = await props.params
-	const data = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	)
-	const {data: posts} = await data.json()
+export default async function BlogTagsPage(props: { params: Promise<{ tag: string }> }): Promise<React.ReactNode> {
+  const { tag } = await props.params
+  const data = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  )
+  const { data: posts } = await data.json()
 
-	if (!posts) {
-		return notFound()
-	}
+  if (!posts) {
+    return notFound()
+  }
 
-	return <ListOfPosts tag={tag} />
+  return <ListOfPosts tag={tag} />
 }
diff --git a/app/[lang]/(resources)/blog/(withNavigation)/tags/page.tsx b/app/[lang]/(resources)/blog/(withNavigation)/tags/page.tsx
index f639073..da0010c 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/tags/page.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/tags/page.tsx
@@ -1,84 +1,74 @@
 'use client'
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {BlogPost} from '@/app/[lang]/_components/BlogPost'
-import {useFetchPosts} from '@/app/[lang]/_hooks/useFetchPosts'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { BlogPost } from '@/app/[lang]/_components/BlogPost'
+import { useFetchPosts } from '@/app/[lang]/_hooks/useFetchPosts'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 const PAGE_SIZE = 12
 const SORT = 'desc'
 
 export default function BlogList(): ReactNode {
-	const [page, setPage] = useState(1)
-	const {posts, pagination, isLoading} = useFetchPosts({
-		page,
-		pageSize: PAGE_SIZE,
-		sort: SORT,
-		populateContent: true,
-		cachePosts: true
-	})
+  const [page, setPage] = useState(1)
+  const { posts, pagination, isLoading } = useFetchPosts({
+    page,
+    pageSize: PAGE_SIZE,
+    sort: SORT,
+    populateContent: true,
+    cachePosts: true,
+  })
 
-	if (isLoading) {
-		return (
-			<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-				{[...Array(PAGE_SIZE)].map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-					/>
-				))}
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+        {[...Array(PAGE_SIZE)].map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{posts.length === 0 ? (
-				<p className={'my-20 text-center text-2xl text-gray-400'}>
-					{"We couldn't find any blog posts matching your criteria."}
-				</p>
-			) : (
-				<div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
-					{posts.map(post => (
-						<BlogPost
-							key={post.slug}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
-			<ReactPaginate
-				pageCount={pagination?.pageCount ?? 1}
-				pageRangeDisplayed={5}
-				marginPagesDisplayed={2}
-				onPageChange={({selected}) => setPage(selected + 1)}
-				containerClassName={'flex gap-2 items-center justify-center'}
-				pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-				pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				activeClassName={'!opacity-100'}
-				previousClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === 1 ? 'opacity-20' : 'opacity-100'
-				)}
-				previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-				)}
-				disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-				disabledLinkClassName={'cursor-not-allowed'}
-				previousLabel={<IconChevron />}
-				nextLabel={<IconChevron className={'rotate-180'} />}
-			/>
-			<Banner />
-		</Fragment>
-	)
+  return (
+    <Fragment>
+      {posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'}>
+          {"We couldn't find any blog posts matching your criteria."}
+        </p>
+      ) : (
+        <div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
+          {posts.map((post) => (
+            <BlogPost key={post.slug} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
+      <ReactPaginate
+        pageCount={pagination?.pageCount ?? 1}
+        pageRangeDisplayed={5}
+        marginPagesDisplayed={2}
+        onPageChange={({ selected }) => setPage(selected + 1)}
+        containerClassName={'flex gap-2 items-center justify-center'}
+        pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+        pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        activeClassName={'!opacity-100'}
+        previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+        previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextClassName={cl(
+          'hover:opacity-100 transition-opacity',
+          page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+        )}
+        disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+        disabledLinkClassName={'cursor-not-allowed'}
+        previousLabel={<IconChevron />}
+        nextLabel={<IconChevron className={'rotate-180'} />}
+      />
+      <Banner />
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx b/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx
index 17d52a3..1dc6c7e 100644
--- a/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx
+++ b/app/[lang]/(resources)/blog/[slug]/BlogContent.tsx
@@ -5,215 +5,167 @@ import rehypeHighlight from 'rehype-highlight'
 import remarkEmoji from 'remark-emoji' // For emoji support
 import remarkGfm from 'remark-gfm'
 
-import {isHtml} from '@/app/[lang]/_utils/isHtml'
-
-import type {ReactNode} from 'react'
-
-export function BlogContent({content}: {content: string}): ReactNode {
-	return (
-		<div className={'blog-content prose prose-invert no-translate max-w-none'}>
-			{isHtml(content) ? (
-				<div
-					className={'no-translate'}
-					// eslint-disable-next-line @typescript-eslint/naming-convention
-					dangerouslySetInnerHTML={{__html: content}}
-				/>
-			) : (
-				<ReactMarkdown
-					remarkPlugins={[remarkGfm, remarkEmoji]}
-					rehypePlugins={[rehypeHighlight]}
-					components={{
-						// Headers
-						h1: ({...props}) => (
-							<h1
-								className={'no-translate mb-4 mt-8 text-4xl font-bold'}
-								{...props}
-							/>
-						),
-						h2: ({...props}) => (
-							<h2
-								className={'no-translate mb-3 mt-6 text-3xl font-bold'}
-								{...props}
-							/>
-						),
-						h3: ({...props}) => (
-							<h3
-								className={'no-translate mb-2 mt-4 text-2xl font-bold'}
-								{...props}
-							/>
-						),
-
-						// Code blocks
-						code: ({className, children, ...props}) => {
-							const match = /language-(\w+)/.exec(className || '')
-							return match ? (
-								<div className={'relative'}>
-									<div className={'absolute right-2 top-2 text-xs text-gray-400'}>{match[1]}</div>
-									<pre className={className}>
-										<code
-											className={`${className} no-translate`}
-											{...props}>
-											{children}
-										</code>
-									</pre>
-								</div>
-							) : (
-								<code
-									className={'no-translate rounded bg-gray-800 px-1.5 py-0.5'}
-									{...props}>
-									{children}
-								</code>
-							)
-						},
-
-						// Tables
-						table: ({...props}) => (
-							<div className={'my-8 overflow-x-auto'}>
-								<table
-									className={'no-translate min-w-full'}
-									{...props}
-								/>
-							</div>
-						),
-						th: ({...props}) => (
-							<th
-								className={'no-translate bg-gray-800 px-6 py-3 text-left'}
-								{...props}
-							/>
-						),
-						td: ({...props}) => (
-							<td
-								className={'no-translate border-t border-gray-700 px-6 py-4'}
-								{...props}
-							/>
-						),
-
-						// Images
-						img: ({...props}) => (
-							<Image
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								width={1200}
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								height={1200}
-								className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
-								loading={'lazy'}
-								{...props}
-							/>
-						),
-
-						// Blockquotes
-						blockquote: ({...props}) => (
-							<blockquote
-								className={'no-translate border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'}
-								{...props}
-							/>
-						),
-
-						// Lists
-						ul: ({...props}) => (
-							<ul
-								className={'no-translate my-4 list-inside list-disc'}
-								{...props}
-							/>
-						),
-						ol: ({...props}) => (
-							<ol
-								className={'no-translate my-4 list-inside list-decimal'}
-								{...props}
-							/>
-						),
-
-						// Links
-						a: ({...props}) => (
-							<a
-								className={'no-translate text-blue underline transition-colors hover:text-blueHover'}
-								target={'_blank'}
-								rel={'noopener noreferrer'}
-								{...props}
-							/>
-						),
-						p: ({...props}) => (
-							<p
-								className={'no-translate mb-4'}
-								{...props}
-							/>
-						)
-					}}>
-					{content}
-				</ReactMarkdown>
-			)}
-
-			<style
-				jsx
-				global>
-				{`
-					.blog-content {
-						/* Base styles */
-						font-size: 1.125rem;
-						line-height: 1.75;
-						color: #e5e7eb;
-					}
-
-					/* Code blocks */
-					.blog-content pre {
-						background-color: #1f2937;
-						padding: 1.5rem;
-						border-radius: 0.5rem;
-						overflow-x: auto;
-						margin: 1.5rem 0;
-						position: relative;
-					}
-
-					/* Footnotes */
-					.blog-content .footnotes {
-						border-top: 1px solid #374151;
-						margin-top: 2rem;
-						padding-top: 1rem;
-					}
-
-					.blog-content .footnotes ol {
-						font-size: 0.875rem;
-					}
-
-					/* Definition lists */
-					.blog-content dl {
-						margin: 1.5rem 0;
-					}
-
-					.blog-content dt {
-						font-weight: bold;
-						margin-top: 1rem;
-					}
-
-					.blog-content dd {
-						margin-left: 1.5rem;
-					}
-
-					/* Custom containers */
-					.blog-content .warning {
-						background-color: #fef3c7;
-						border-left: 4px solid #f59e0b;
-						padding: 1rem;
-						margin: 1.5rem 0;
-						color: #92400e;
-					}
-
-					.blog-content p {
-						margin-bottom: 16px;
-					}
-
-					.blog-content strong {
-						margin-top: 20px;
-						display: inline-block;
-					}
-					.blog-content img {
-						margin-top: 20px;
-						margin-bottom: 20px;
-					}
-				`}
-			</style>
-		</div>
-	)
+import { isHtml } from '@/app/[lang]/_utils/isHtml'
+
+import type { ReactNode } from 'react'
+
+export function BlogContent({ content }: { content: string }): ReactNode {
+  return (
+    <div className={'blog-content prose prose-invert no-translate max-w-none'}>
+      {isHtml(content) ? (
+        <div
+          className={'no-translate'}
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      ) : (
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkEmoji]}
+          rehypePlugins={[rehypeHighlight]}
+          components={{
+            // Headers
+            h1: ({ ...props }) => <h1 className={'no-translate mb-4 mt-8 text-4xl font-bold'} {...props} />,
+            h2: ({ ...props }) => <h2 className={'no-translate mb-3 mt-6 text-3xl font-bold'} {...props} />,
+            h3: ({ ...props }) => <h3 className={'no-translate mb-2 mt-4 text-2xl font-bold'} {...props} />,
+
+            // Code blocks
+            code: ({ className, children, ...props }) => {
+              const match = /language-(\w+)/.exec(className || '')
+              return match ? (
+                <div className={'relative'}>
+                  <div className={'absolute right-2 top-2 text-xs text-gray-400'}>{match[1]}</div>
+                  <pre className={className}>
+                    <code className={`${className} no-translate`} {...props}>
+                      {children}
+                    </code>
+                  </pre>
+                </div>
+              ) : (
+                <code className={'no-translate rounded bg-gray-800 px-1.5 py-0.5'} {...props}>
+                  {children}
+                </code>
+              )
+            },
+
+            // Tables
+            table: ({ ...props }) => (
+              <div className={'my-8 overflow-x-auto'}>
+                <table className={'no-translate min-w-full'} {...props} />
+              </div>
+            ),
+            th: ({ ...props }) => <th className={'no-translate bg-gray-800 px-6 py-3 text-left'} {...props} />,
+            td: ({ ...props }) => <td className={'no-translate border-t border-gray-700 px-6 py-4'} {...props} />,
+
+            // Images
+            img: ({ ...props }) => (
+              <Image
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                width={1200}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                height={1200}
+                className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
+                loading={'lazy'}
+                {...props}
+              />
+            ),
+
+            // Blockquotes
+            blockquote: ({ ...props }) => (
+              <blockquote
+                className={'no-translate border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'}
+                {...props}
+              />
+            ),
+
+            // Lists
+            ul: ({ ...props }) => <ul className={'no-translate my-4 list-inside list-disc'} {...props} />,
+            ol: ({ ...props }) => <ol className={'no-translate my-4 list-inside list-decimal'} {...props} />,
+
+            // Links
+            a: ({ ...props }) => (
+              <a
+                className={'no-translate text-blue underline transition-colors hover:text-blueHover'}
+                target={'_blank'}
+                rel={'noopener noreferrer'}
+                {...props}
+              />
+            ),
+            p: ({ ...props }) => <p className={'no-translate mb-4'} {...props} />,
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      )}
+
+      <style jsx global>
+        {`
+          .blog-content {
+            /* Base styles */
+            font-size: 1.125rem;
+            line-height: 1.75;
+            color: #e5e7eb;
+          }
+
+          /* Code blocks */
+          .blog-content pre {
+            background-color: #1f2937;
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            margin: 1.5rem 0;
+            position: relative;
+          }
+
+          /* Footnotes */
+          .blog-content .footnotes {
+            border-top: 1px solid #374151;
+            margin-top: 2rem;
+            padding-top: 1rem;
+          }
+
+          .blog-content .footnotes ol {
+            font-size: 0.875rem;
+          }
+
+          /* Definition lists */
+          .blog-content dl {
+            margin: 1.5rem 0;
+          }
+
+          .blog-content dt {
+            font-weight: bold;
+            margin-top: 1rem;
+          }
+
+          .blog-content dd {
+            margin-left: 1.5rem;
+          }
+
+          /* Custom containers */
+          .blog-content .warning {
+            background-color: #fef3c7;
+            border-left: 4px solid #f59e0b;
+            padding: 1rem;
+            margin: 1.5rem 0;
+            color: #92400e;
+          }
+
+          .blog-content p {
+            margin-bottom: 16px;
+          }
+
+          .blog-content strong {
+            margin-top: 20px;
+            display: inline-block;
+          }
+          .blog-content img {
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+        `}
+      </style>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/[slug]/BlogSkeleton.tsx b/app/[lang]/(resources)/blog/[slug]/BlogSkeleton.tsx
index 75d9fca..fec8755 100644
--- a/app/[lang]/(resources)/blog/[slug]/BlogSkeleton.tsx
+++ b/app/[lang]/(resources)/blog/[slug]/BlogSkeleton.tsx
@@ -1,34 +1,34 @@
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export function BlogSkeleton(): ReactNode {
-	return (
-		<div className={'container relative mx-auto mb-96 mt-40 max-w-4xl px-4'}>
-			<div className={'absolute -left-32 top-0 h-10 w-20 animate-pulse rounded-lg bg-gray-800'} />
-			<div className={'mb-8 h-6 w-32 animate-pulse rounded-lg bg-gray-800'} />
-			<div className={'mb-8 flex gap-2'}>
-				<div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
-			</div>
-			<div className={'mb-8 h-12 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-			<div className={'space-y-4'}>
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
-			</div>
-		</div>
-	)
+  return (
+    <div className={'container relative mx-auto mb-96 mt-40 max-w-4xl px-4'}>
+      <div className={'absolute -left-32 top-0 h-10 w-20 animate-pulse rounded-lg bg-gray-800'} />
+      <div className={'mb-8 h-6 w-32 animate-pulse rounded-lg bg-gray-800'} />
+      <div className={'mb-8 flex gap-2'}>
+        <div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
+      </div>
+      <div className={'mb-8 h-12 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+      <div className={'space-y-4'}>
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/blog/[slug]/layout.tsx b/app/[lang]/(resources)/blog/[slug]/layout.tsx
index 967cf20..d9f9601 100644
--- a/app/[lang]/(resources)/blog/[slug]/layout.tsx
+++ b/app/[lang]/(resources)/blog/[slug]/layout.tsx
@@ -1,67 +1,67 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {Metadata} from 'next'
+import type { Metadata } from 'next'
 
 /************************************************************************************************
  * Layout component for blog post pages
  * Handles metadata generation for SEO and social sharing
  * Uses Next.js 13+ Metadata API
  ************************************************************************************************/
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise<Metadata> {
-	const {slug} = await params
-	const data = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[slug][$eq]=${slug}&fields[0]=summary&fields[2]=tags&fields[3]=title&fields[4]=publishedAt&populate[0]=featuredImg`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	).then(async res => res.json())
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params
+  const data = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?filters[slug][$eq]=${slug}&fields[0]=summary&fields[2]=tags&fields[3]=title&fields[4]=publishedAt&populate[0]=featuredImg`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  ).then(async (res) => res.json())
 
-	const post = data.data[0]
+  const post = data.data[0]
 
-	if (!post) {
-		return notFound()
-	}
+  if (!post) {
+    return notFound()
+  }
 
-	const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
-	const metadata: Metadata = {
-		title: `${post.title} | ShapeShift Blog`,
-		description: post.summary || `Read ${post.title} on ShapeShift Blog`,
-		keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
-		openGraph: {
-			title: post.title,
-			description: post.summary,
-			type: 'article',
-			publishedTime: post.publishedAt,
-			authors: ['ShapeShift'],
-			tags: Array.isArray(post.tags) ? post.tags : [post.tags]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: post.title,
-			description: post.summary || `Read ${post.title} on ShapeShift Blog`
-		}
-	}
+  const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
+  const metadata: Metadata = {
+    title: `${post.title} | ShapeShift Blog`,
+    description: post.summary || `Read ${post.title} on ShapeShift Blog`,
+    keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
+    openGraph: {
+      title: post.title,
+      description: post.summary,
+      type: 'article',
+      publishedTime: post.publishedAt,
+      authors: ['ShapeShift'],
+      tags: Array.isArray(post.tags) ? post.tags : [post.tags],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.title,
+      description: post.summary || `Read ${post.title} on ShapeShift Blog`,
+    },
+  }
 
-	if (imageUrl) {
-		metadata.openGraph!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-		metadata.twitter!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-	}
+  if (imageUrl) {
+    metadata.openGraph!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+    metadata.twitter!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+  }
 
-	return metadata
+  return metadata
 }
 
-export default function BlogPostLayout({children}: {children: React.ReactNode}): React.ReactNode {
-	return children
+export default function BlogPostLayout({ children }: { children: React.ReactNode }): React.ReactNode {
+  return children
 }
diff --git a/app/[lang]/(resources)/blog/[slug]/page.tsx b/app/[lang]/(resources)/blog/[slug]/page.tsx
index 588a90d..c5ca821 100644
--- a/app/[lang]/(resources)/blog/[slug]/page.tsx
+++ b/app/[lang]/(resources)/blog/[slug]/page.tsx
@@ -1,92 +1,88 @@
 'use client'
 
 import 'highlight.js/styles/github-dark.css'
-import {notFound, useParams, useRouter} from 'next/navigation'
+import { notFound, useParams, useRouter } from 'next/navigation'
 import Script from 'next/script'
 
-import {BlogContent} from '@/app/[lang]/(resources)/blog/[slug]/BlogContent'
-import {BlogSkeleton} from '@/app/[lang]/(resources)/blog/[slug]/BlogSkeleton'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {useCachedPosts} from '@/app/[lang]/_contexts/CachedPostsContext'
-import {useFetchPosts} from '@/app/[lang]/_hooks/useFetchPosts'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {generateBlogPostSchema} from '@/app/[lang]/_utils/schema'
+import { BlogContent } from '@/app/[lang]/(resources)/blog/[slug]/BlogContent'
+import { BlogSkeleton } from '@/app/[lang]/(resources)/blog/[slug]/BlogSkeleton'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { useCachedPosts } from '@/app/[lang]/_contexts/CachedPostsContext'
+import { useFetchPosts } from '@/app/[lang]/_hooks/useFetchPosts'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { generateBlogPostSchema } from '@/app/[lang]/_utils/schema'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function BlogPost(): ReactNode {
-	const {slug} = useParams()
+  const { slug } = useParams()
 
-	const {
-		cachedResponse: {data: cachedPosts}
-	} = useCachedPosts()
-	const {posts, isLoading} = useFetchPosts({
-		page: 1,
-		pageSize: 1,
-		sort: 'desc',
-		populateContent: true,
-		cachePosts: true,
-		slug: slug as string,
-		skip: !!cachedPosts.find(p => p.slug === slug)
-	})
+  const {
+    cachedResponse: { data: cachedPosts },
+  } = useCachedPosts()
+  const { posts, isLoading } = useFetchPosts({
+    page: 1,
+    pageSize: 1,
+    sort: 'desc',
+    populateContent: true,
+    cachePosts: true,
+    slug: slug as string,
+    skip: !!cachedPosts.find((p) => p.slug === slug),
+  })
 
-	const post = [...cachedPosts, ...posts].find(p => p.slug === slug)
-	const router = useRouter()
+  const post = [...cachedPosts, ...posts].find((p) => p.slug === slug)
+  const router = useRouter()
 
-	if (isLoading) {
-		return <BlogSkeleton />
-	}
+  if (isLoading) {
+    return <BlogSkeleton />
+  }
 
-	if (!post) {
-		notFound()
-	}
+  if (!post) {
+    notFound()
+  }
 
-	// Generate structured data for the blog post
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
-	const blogPostSchema = generateBlogPostSchema(post, baseUrl)
+  // Generate structured data for the blog post
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+  const blogPostSchema = generateBlogPostSchema(post, baseUrl)
 
-	return (
-		<>
-			{/* Add structured data */}
-			<Script
-				id={'blog-post-schema'}
-				type={'application/ld+json'}
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				dangerouslySetInnerHTML={{__html: JSON.stringify(blogPostSchema)}}
-			/>
+  return (
+    <>
+      {/* Add structured data */}
+      <Script
+        id={'blog-post-schema'}
+        type={'application/ld+json'}
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(blogPostSchema) }}
+      />
 
-			<article className={'prose prose-invert container relative mx-auto mb-20 mt-40 max-w-4xl px-4'}>
-				<button
-					className={'absolute -left-32 top-0 flex items-center gap-1 p-3 pt-0 text-gray-500'}
-					onClick={() => router.back()}>
-					<IconBack />
-					<span>{'Back'}</span>
-				</button>
-				<div className={'no-translate mb-8 text-gray-400'}>
-					{new Date(post.publishedAt).toLocaleDateString()}
-				</div>
+      <article className={'prose prose-invert container relative mx-auto mb-20 mt-40 max-w-4xl px-4'}>
+        <button
+          className={'absolute -left-32 top-0 flex items-center gap-1 p-3 pt-0 text-gray-500'}
+          onClick={() => router.back()}
+        >
+          <IconBack />
+          <span>{'Back'}</span>
+        </button>
+        <div className={'no-translate mb-8 text-gray-400'}>{new Date(post.publishedAt).toLocaleDateString()}</div>
 
-				<div className={'mb-8 flex flex-wrap gap-2'}>
-					{post.tags.map((tag: string, index: number) => (
-						<LocalizedLink
-							href={`/blog/tags/${tag}`}
-							className={'no-translate text-blue'}
-							key={index}>
-							{`#${tag}`}
-						</LocalizedLink>
-					))}
-				</div>
-				<h1 className={'no-translate mb-4 text-4xl font-bold capitalize'}>
-					{post.title || post.slug.replace(/-/g, ' ')}
-				</h1>
-				<BlogContent content={post.content} />
-			</article>
-			{!isLoading && (
-				<div className={'container mx-auto'}>
-					<Banner />
-				</div>
-			)}
-		</>
-	)
+        <div className={'mb-8 flex flex-wrap gap-2'}>
+          {post.tags.map((tag: string, index: number) => (
+            <LocalizedLink href={`/blog/tags/${tag}`} className={'no-translate text-blue'} key={index}>
+              {`#${tag}`}
+            </LocalizedLink>
+          ))}
+        </div>
+        <h1 className={'no-translate mb-4 text-4xl font-bold capitalize'}>
+          {post.title || post.slug.replace(/-/g, ' ')}
+        </h1>
+        <BlogContent content={post.content} />
+      </article>
+      {!isLoading && (
+        <div className={'container mx-auto'}>
+          <Banner />
+        </div>
+      )}
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/chains/[slug]/page.tsx b/app/[lang]/(resources)/chains/[slug]/page.tsx
index f29bd0f..6b8cd18 100644
--- a/app/[lang]/(resources)/chains/[slug]/page.tsx
+++ b/app/[lang]/(resources)/chains/[slug]/page.tsx
@@ -1,125 +1,109 @@
 import Image from 'next/image'
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {ChainActions} from '@/app/[lang]/_components/strapi/templates/ChainActions'
-import {ChainDescription} from '@/app/[lang]/_components/strapi/templates/ChainDescription'
-import {ChainFeatures} from '@/app/[lang]/_components/strapi/templates/ChainFeatures'
-import {ChainHeader} from '@/app/[lang]/_components/strapi/templates/ChainHeader'
-import {ChainHero} from '@/app/[lang]/_components/strapi/templates/ChainHero'
-import {getStrapiImageUrl, getSupportedChain} from '@/app/[lang]/_utils/query'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { ChainActions } from '@/app/[lang]/_components/strapi/templates/ChainActions'
+import { ChainDescription } from '@/app/[lang]/_components/strapi/templates/ChainDescription'
+import { ChainFeatures } from '@/app/[lang]/_components/strapi/templates/ChainFeatures'
+import { ChainHeader } from '@/app/[lang]/_components/strapi/templates/ChainHeader'
+import { ChainHero } from '@/app/[lang]/_components/strapi/templates/ChainHero'
+import { getStrapiImageUrl, getSupportedChain } from '@/app/[lang]/_utils/query'
 
-import type {TSupportedChainData} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TSupportedChainData } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise<Metadata> {
-	const {slug} = await params
-	if (!slug) {
-		return notFound()
-	}
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params
+  if (!slug) {
+    return notFound()
+  }
 
-	const response = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?filters[slug][$eq]=${slug}&populate=*`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	)
-	const data = await response.json()
-	const chain = data.data[0] as TSupportedChainData
-	if (!chain) {
-		return notFound()
-	}
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?filters[slug][$eq]=${slug}&populate=*`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  )
+  const data = await response.json()
+  const chain = data.data[0] as TSupportedChainData
+  if (!chain) {
+    return notFound()
+  }
 
-	const imageUrl = chain.featuredImg?.formats?.thumbnail?.url || chain.featuredImg?.url
-	const metadata: Metadata = {
-		title: `${chain.name} | ShapeShift Chains`,
-		description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
-		keywords: `${chain.name}, ShapeShift`,
-		openGraph: {
-			title: chain.name,
-			description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
-			type: 'website'
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: chain.name,
-			description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`
-		}
-	}
+  const imageUrl = chain.featuredImg?.formats?.thumbnail?.url || chain.featuredImg?.url
+  const metadata: Metadata = {
+    title: `${chain.name} | ShapeShift Chains`,
+    description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
+    keywords: `${chain.name}, ShapeShift`,
+    openGraph: {
+      title: chain.name,
+      description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: chain.name,
+      description: `ShapeShift supports ${chain.name}! Use it now to buy, sell, and swap crypto.`,
+    },
+  }
 
-	if (imageUrl) {
-		metadata.openGraph!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-		metadata.twitter!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-	}
+  if (imageUrl) {
+    metadata.openGraph!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+    metadata.twitter!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+  }
 
-	return metadata
+  return metadata
 }
 
-export default async function ChainPage({params}: {params: Promise<{slug: string}>}): Promise<ReactNode> {
-	const {slug} = await params
-	const chain = await getSupportedChain(slug)
+export default async function ChainPage({ params }: { params: Promise<{ slug: string }> }): Promise<ReactNode> {
+  const { slug } = await params
+  const chain = await getSupportedChain(slug)
 
-	if (!chain) {
-		return notFound()
-	}
+  if (!chain) {
+    return notFound()
+  }
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'absolute inset-0 -z-10 hidden lg:block'}>
-				<Image
-					src={'/heroBg.png'}
-					alt={'hero-bg'}
-					height={'2256'}
-					width={'3840'}
-					className={'object-cover'}
-				/>
-			</div>
-			<div className={'container mt-[60px] flex flex-col justify-center'}>
-				<ChainHeader chainName={chain.name} />
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'absolute inset-0 -z-10 hidden lg:block'}>
+        <Image src={'/heroBg.png'} alt={'hero-bg'} height={'2256'} width={'3840'} className={'object-cover'} />
+      </div>
+      <div className={'container mt-[60px] flex flex-col justify-center'}>
+        <ChainHeader chainName={chain.name} />
 
-				<div className={'mb-20 mt-16 lg:mb-60'}>
-					<ChainHero
-						url={getStrapiImageUrl(chain?.featuredImg?.url)}
-						name={chain?.name}
-						width={chain?.featuredImg?.width}
-						height={chain?.featuredImg?.height}
-					/>
-				</div>
-				<ChainDescription
-					chainName={chain.name}
-					description={chain.description}
-				/>
+        <div className={'mb-20 mt-16 lg:mb-60'}>
+          <ChainHero
+            url={getStrapiImageUrl(chain?.featuredImg?.url)}
+            name={chain?.name}
+            width={chain?.featuredImg?.width}
+            height={chain?.featuredImg?.height}
+          />
+        </div>
+        <ChainDescription chainName={chain.name} description={chain.description} />
 
-				<div className={'mt-[120px] lg:mt-60'}>
-					<ChainActions
-						features={chain.actions}
-						chainName={chain.name}
-					/>
-				</div>
+        <div className={'mt-[120px] lg:mt-60'}>
+          <ChainActions features={chain.actions} chainName={chain.name} />
+        </div>
 
-				<div className={'mt-[120px] lg:mt-60'}>
-					<ChainFeatures
-						features={chain.features}
-						chainName={chain.name}
-						foxImg={chain.foxImg}
-					/>
-				</div>
+        <div className={'mt-[120px] lg:mt-60'}>
+          <ChainFeatures features={chain.features} chainName={chain.name} foxImg={chain.foxImg} />
+        </div>
 
-				<div className={'mt-[120px] lg:mt-60'}>
-					<Banner />
-				</div>
-			</div>
-		</div>
-	)
+        <div className={'mt-[120px] lg:mt-60'}>
+          <Banner />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx b/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx
index 2cee8fb..99aef49 100644
--- a/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx
+++ b/app/[lang]/(resources)/chains/_components/ChainSearchWrapper.tsx
@@ -1,18 +1,18 @@
 'use client'
 
-import {useState} from 'react'
+import { useState } from 'react'
 
-import {Dropdown} from '@/app/[lang]/_components/Dropdown'
-import {SearchBar} from '@/app/[lang]/_components/SearchBar'
-import {CHAIN_TYPES} from '@/app/[lang]/_utils/constants'
+import { Dropdown } from '@/app/[lang]/_components/Dropdown'
+import { SearchBar } from '@/app/[lang]/_components/SearchBar'
+import { CHAIN_TYPES } from '@/app/[lang]/_utils/constants'
 
-import {ChainList} from '../../_components/ChainList'
+import { ChainList } from '../../_components/ChainList'
 
-import type {TSupportedChainData, TSupportedChainTypes} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportedChainData, TSupportedChainTypes } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TChainSearchWrapperProps = {
-	chains: TSupportedChainData[]
+  chains: TSupportedChainData[]
 }
 
 /**************************************************************************************************
@@ -24,61 +24,53 @@ type TChainSearchWrapperProps = {
  ** @param {TChainSearchWrapperProps} props - Component props containing array of chain data
  ** @returns {ReactNode} Rendered component with search, filter, and chain list
  *************************************************************************************************/
-export function ChainSearchWrapper({chains}: TChainSearchWrapperProps): ReactNode {
-	/** State for search query and selected chain type filter **/
-	const [searchQuery, setSearchQuery] = useState('')
-	const [selectedType, setSelectedType] = useState<'All chains' | TSupportedChainTypes>('All chains')
+export function ChainSearchWrapper({ chains }: TChainSearchWrapperProps): ReactNode {
+  /** State for search query and selected chain type filter **/
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedType, setSelectedType] = useState<'All chains' | TSupportedChainTypes>('All chains')
 
-	/**********************************************************************************************
-	 ** Filter chains based on selected chain type
-	 ** Returns all chains if 'All chains' is selected, otherwise filters by typeOfChain
-	 *********************************************************************************************/
-	const chainsByType = chains.filter(chain => {
-		if (selectedType === 'All chains') {
-			return true
-		}
-		return chain.typeOfChain === selectedType
-	})
+  /**********************************************************************************************
+   ** Filter chains based on selected chain type
+   ** Returns all chains if 'All chains' is selected, otherwise filters by typeOfChain
+   *********************************************************************************************/
+  const chainsByType = chains.filter((chain) => {
+    if (selectedType === 'All chains') {
+      return true
+    }
+    return chain.typeOfChain === selectedType
+  })
 
-	/**********************************************************************************************
-	 ** Further filter chains by search query
-	 ** Filters the type-filtered chains by matching chain names with search query
-	 *********************************************************************************************/
-	const filteredChains = chainsByType.filter(chain => chain.name.toLowerCase().includes(searchQuery.toLowerCase()))
+  /**********************************************************************************************
+   ** Further filter chains by search query
+   ** Filters the type-filtered chains by matching chain names with search query
+   *********************************************************************************************/
+  const filteredChains = chainsByType.filter((chain) => chain.name.toLowerCase().includes(searchQuery.toLowerCase()))
 
-	/**********************************************************************************************
-	 ** Handle search input changes
-	 ** Updates search query state when user types in search bar
-	 *********************************************************************************************/
-	const handleSearch = (query: string): void => {
-		setSearchQuery(query)
-	}
+  /**********************************************************************************************
+   ** Handle search input changes
+   ** Updates search query state when user types in search bar
+   *********************************************************************************************/
+  const handleSearch = (query: string): void => {
+    setSearchQuery(query)
+  }
 
-	return (
-		<>
-			<SearchBar
-				searchQuery={searchQuery}
-				setSearchQueryAction={handleSearch}
-			/>
+  return (
+    <>
+      <SearchBar searchQuery={searchQuery} setSearchQueryAction={handleSearch} />
 
-			{/** Chains grid section **/}
-			<section
-				className={'mt-8'}
-				aria-label={'Supported Chains'}>
-				<div className={'mb-6 flex w-full justify-between'}>
-					<h2 className={'text-2xl font-medium'}>{'Chains'}</h2>
-					<Dropdown
-						options={CHAIN_TYPES}
-						value={selectedType}
-						onChangeAction={setSelectedType}
-						allItemsLabel={'All chains'}
-					/>
-				</div>
-				<ChainList
-					chains={filteredChains}
-					isSearchQuery={Boolean(searchQuery)}
-				/>
-			</section>
-		</>
-	)
+      {/** Chains grid section **/}
+      <section className={'mt-8'} aria-label={'Supported Chains'}>
+        <div className={'mb-6 flex w-full justify-between'}>
+          <h2 className={'text-2xl font-medium'}>{'Chains'}</h2>
+          <Dropdown
+            options={CHAIN_TYPES}
+            value={selectedType}
+            onChangeAction={setSelectedType}
+            allItemsLabel={'All chains'}
+          />
+        </div>
+        <ChainList chains={filteredChains} isSearchQuery={Boolean(searchQuery)} />
+      </section>
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/chains/layout.tsx b/app/[lang]/(resources)/chains/layout.tsx
index d2e5f9f..9ceaa03 100644
--- a/app/[lang]/(resources)/chains/layout.tsx
+++ b/app/[lang]/(resources)/chains/layout.tsx
@@ -1,34 +1,34 @@
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export async function generateMetadata(): Promise<Metadata> {
-	return {
-		title: 'Explore multiple chains with ShapeShift',
-		description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
-		keywords: 'ShapeShift, Supported Chains',
-		openGraph: {
-			title: 'Explore multiple chains with ShapeShift',
-			description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
-			type: 'website',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: 'Explore multiple chains with ShapeShift',
-			description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		}
-	}
+  return {
+    title: 'Explore multiple chains with ShapeShift',
+    description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
+    keywords: 'ShapeShift, Supported Chains',
+    openGraph: {
+      title: 'Explore multiple chains with ShapeShift',
+      description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
+      type: 'website',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'Explore multiple chains with ShapeShift',
+      description: 'Discover all the chains ShapeShift supports. Buy, sell, and swap crypto with ease.',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+  }
 }
 
-export default function Layout({children}: {children: ReactNode}): ReactNode {
-	return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+  return children
 }
diff --git a/app/[lang]/(resources)/chains/page.tsx b/app/[lang]/(resources)/chains/page.tsx
index bc3805c..41bc730 100644
--- a/app/[lang]/(resources)/chains/page.tsx
+++ b/app/[lang]/(resources)/chains/page.tsx
@@ -18,95 +18,92 @@
 
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {ChainsBanner} from '@/app/[lang]/_components/ChainsBanner'
-import {requestUrl} from '@/app/[lang]/_utils/constants'
+import { Button } from '@/app/[lang]/_components/Button'
+import { ChainsBanner } from '@/app/[lang]/_components/ChainsBanner'
+import { requestUrl } from '@/app/[lang]/_utils/constants'
 
-import {ResourceHeader} from '../_components/ResourceHeader'
-import {fetchAllChains} from '../_utils/fetchUtils'
-import {ChainSearchWrapper} from './_components/ChainSearchWrapper'
+import { ResourceHeader } from '../_components/ResourceHeader'
+import { fetchAllChains } from '../_utils/fetchUtils'
+import { ChainSearchWrapper } from './_components/ChainSearchWrapper'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 // Static content for the page
 const pageContent = {
-	title: 'Supported Chains',
-	description:
-		'Explore all the blockchain networks integrated into the ShapeShift platform for seamless multi-chain access.',
-	features: ['Multi-Chain Support', 'Self-Custody', 'Cross-Chain Trading'],
-	ctaButton: {
-		text: 'Get Started',
-		url: 'https://app.shapeshift.com/'
-	}
+  title: 'Supported Chains',
+  description:
+    'Explore all the blockchain networks integrated into the ShapeShift platform for seamless multi-chain access.',
+  features: ['Multi-Chain Support', 'Self-Custody', 'Cross-Chain Trading'],
+  ctaButton: {
+    text: 'Get Started',
+    url: 'https://app.shapeshift.com/',
+  },
 }
 
 export default async function SupportedChainsPage(): Promise<ReactNode> {
-	// Fetch chains data
-	const chains = await fetchAllChains()
+  // Fetch chains data
+  const chains = await fetchAllChains()
 
-	// Handle loading and error states
-	if (!chains) {
-		return (
-			<div className={'my-[120px] flex w-full justify-center text-center lg:my-60'}>
-				<p className={'text-red-400'}>{'Unable to load chain data. Please try again later.'}</p>
-			</div>
-		)
-	}
+  // Handle loading and error states
+  if (!chains) {
+    return (
+      <div className={'my-[120px] flex w-full justify-center text-center lg:my-60'}>
+        <p className={'text-red-400'}>{'Unable to load chain data. Please try again later.'}</p>
+      </div>
+    )
+  }
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container mt-[120px] flex flex-col justify-center lg:mt-60'}>
-				{/* Reusable header component */}
-				<ResourceHeader
-					title={pageContent.title}
-					description={pageContent.description}
-					items={pageContent.features}
-					ctaButton={pageContent.ctaButton}
-					className={'mb-12'}
-				/>
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container mt-[120px] flex flex-col justify-center lg:mt-60'}>
+        {/* Reusable header component */}
+        <ResourceHeader
+          title={pageContent.title}
+          description={pageContent.description}
+          items={pageContent.features}
+          ctaButton={pageContent.ctaButton}
+          className={'mb-12'}
+        />
 
-				<ChainSearchWrapper chains={chains} />
-				<div className={'flex w-full justify-center'}>
-					<div
-						className={
-							'relative my-16 grid h-[320px] w-full grid-cols-1 overflow-hidden rounded-2xl bg-secondBg px-10 py-12 lg:w-1/2 lg:grid-cols-2'
-						}>
-						<div className={'absolute left-0 top-0 max-h-[320px] w-full'}>
-							<Image
-								src={'/request-chain-bg.png'}
-								width={1600}
-								height={640}
-								alt={'Request chain'}
-								className={'h-[320px] w-full object-cover'}
-							/>
-						</div>
-						<div
-							className={
-								'z-10 flex max-w-[312px] items-start justify-start text-[32px] leading-10 	lg:text-[40px] lg:leading-10'
-							}>
-							{"Don't see your chain? Request it here"}
-						</div>
-						<div className={'flex items-end justify-end'}>
-							<Button
-								hasArrow
-								title={'Request chain'}
-								variant={'white'}
-								href={requestUrl}
-							/>
-						</div>
-					</div>
-				</div>
+        <ChainSearchWrapper chains={chains} />
+        <div className={'flex w-full justify-center'}>
+          <div
+            className={
+              'relative my-16 grid h-[320px] w-full grid-cols-1 overflow-hidden rounded-2xl bg-secondBg px-10 py-12 lg:w-1/2 lg:grid-cols-2'
+            }
+          >
+            <div className={'absolute left-0 top-0 max-h-[320px] w-full'}>
+              <Image
+                src={'/request-chain-bg.png'}
+                width={1600}
+                height={640}
+                alt={'Request chain'}
+                className={'h-[320px] w-full object-cover'}
+              />
+            </div>
+            <div
+              className={
+                'z-10 flex max-w-[312px] items-start justify-start text-[32px] leading-10 	lg:text-[40px] lg:leading-10'
+              }
+            >
+              {"Don't see your chain? Request it here"}
+            </div>
+            <div className={'flex items-end justify-end'}>
+              <Button hasArrow title={'Request chain'} variant={'white'} href={requestUrl} />
+            </div>
+          </div>
+        </div>
 
-				{/* Footer banner */}
-				<div className={'my-16'}>
-					<ChainsBanner
-						tag={'ShapeShift DeFi wallet'}
-						title={'Your favorite chains. One wallet to rule them all.'}
-						href={'/defi-wallet'}
-						buttonText={'Get Started'}
-					/>
-				</div>
-			</div>
-		</div>
-	)
+        {/* Footer banner */}
+        <div className={'my-16'}>
+          <ChainsBanner
+            tag={'ShapeShift DeFi wallet'}
+            title={'Your favorite chains. One wallet to rule them all.'}
+            href={'/defi-wallet'}
+            buttonText={'Get Started'}
+          />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/discover/[slug]/page.tsx b/app/[lang]/(resources)/discover/[slug]/page.tsx
index 19dd679..02ec8c5 100644
--- a/app/[lang]/(resources)/discover/[slug]/page.tsx
+++ b/app/[lang]/(resources)/discover/[slug]/page.tsx
@@ -16,143 +16,145 @@
  ** - Generates metadata for SEO and social sharing
  ************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {DiscoverFeature} from '@/app/[lang]/(resources)/_components/DiscoverFeature'
-import {ResourceHeader} from '@/app/[lang]/(resources)/_components/ResourceHeader'
-import {ResourceHero} from '@/app/[lang]/(resources)/_components/ResourceHero'
-import {DEFAULT_FEATURES} from '@/app/[lang]/(resources)/_utils/constants'
-import {fetchDiscoverBySlug} from '@/app/[lang]/(resources)/_utils/fetchUtils'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { DiscoverFeature } from '@/app/[lang]/(resources)/_components/DiscoverFeature'
+import { ResourceHeader } from '@/app/[lang]/(resources)/_components/ResourceHeader'
+import { ResourceHero } from '@/app/[lang]/(resources)/_components/ResourceHero'
+import { DEFAULT_FEATURES } from '@/app/[lang]/(resources)/_utils/constants'
+import { fetchDiscoverBySlug } from '@/app/[lang]/(resources)/_utils/fetchUtils'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 /************************************************************************************************
  * Generates metadata for the discover page
  * Provides SEO-optimized title, description, and social sharing tags
  ************************************************************************************************/
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise<Metadata> {
-	const {slug} = await params
-	if (!slug) {
-		return notFound()
-	}
-
-	// Fetch discover data
-	const discover = await fetchDiscoverBySlug(slug)
-	if (!discover) {
-		return notFound()
-	}
-
-	// Get image URL for metadata
-	const imageUrl = discover.featuredImg?.formats?.thumbnail?.url || discover.featuredImg?.url
-
-	// Metadata with SEO optimization
-	const metadata: Metadata = {
-		title: `${discover.title} | Discover with ShapeShift`,
-		description: `Discover ${discover.title} with ShapeShift!`,
-		keywords: `${discover.title}, ShapeShift, discover, cryptocurrency`,
-		openGraph: {
-			title: discover.title,
-			description: `Discover ${discover.title} with ShapeShift!`,
-			type: 'website'
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: discover.title,
-			description: `Discover ${discover.title} with ShapeShift!`
-		}
-	}
-
-	if (imageUrl) {
-		metadata.openGraph!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-		metadata.twitter!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-	}
-
-	return metadata
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params
+  if (!slug) {
+    return notFound()
+  }
+
+  // Fetch discover data
+  const discover = await fetchDiscoverBySlug(slug)
+  if (!discover) {
+    return notFound()
+  }
+
+  // Get image URL for metadata
+  const imageUrl = discover.featuredImg?.formats?.thumbnail?.url || discover.featuredImg?.url
+
+  // Metadata with SEO optimization
+  const metadata: Metadata = {
+    title: `${discover.title} | Discover with ShapeShift`,
+    description: `Discover ${discover.title} with ShapeShift!`,
+    keywords: `${discover.title}, ShapeShift, discover, cryptocurrency`,
+    openGraph: {
+      title: discover.title,
+      description: `Discover ${discover.title} with ShapeShift!`,
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: discover.title,
+      description: `Discover ${discover.title} with ShapeShift!`,
+    },
+  }
+
+  if (imageUrl) {
+    metadata.openGraph!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+    metadata.twitter!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+  }
+
+  return metadata
 }
 
-export default async function DiscoverDetailPage({params}: {params: Promise<{slug: string}>}): Promise<ReactNode> {
-	// Extract slug from params
-	const {slug} = await params
-
-	// Fetch discover data using utility function
-	const discover = await fetchDiscoverBySlug(slug)
-
-	// Handle case when discover data is not found
-	if (!discover) {
-		console.error(`Discover page not found for slug: ${slug}`)
-		return notFound()
-	}
-
-	// Map discover features to feature section format
-	const features = discover.features.map(feature => ({
-		id: feature.id,
-		title: feature.title,
-		description: feature.description,
-		image: feature.image
-			? {
-					url: getStrapiImageUrl(feature.image.url),
-					width: feature.image.width,
-					height: feature.image.height,
-					alt: feature.title
-				}
-			: undefined,
-		buttonCta:
-			feature.buttonCta &&
-			typeof feature.buttonCta.url === 'string' &&
-			/^(\/|https?:\/\/)/i.test(feature.buttonCta.url)
-				? {title: feature.buttonCta.title, url: feature.buttonCta.url}
-				: undefined
-	}))
-
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container mt-[60px] flex flex-col justify-center'}>
-				{/* Header section with feature badges */}
-				<ResourceHeader
-					title={discover.title}
-					description={discover.description}
-					items={DEFAULT_FEATURES}
-					ctaButton={{
-						text: 'Get Started',
-						url: 'https://app.shapeshift.com/'
-					}}
-				/>
-
-				{/* Hero banner with discover image */}
-				<ResourceHero
-					imageSrc={'/wallets/hero.jpg'}
-					imageAlt={`${discover.title} banner image`}
-					logoSrc={getStrapiImageUrl(discover.featuredImg.url)}
-					logoAlt={discover.title}
-					logoWidth={discover.featuredImg.width}
-					logoHeight={discover.featuredImg.height}
-					priority
-				/>
-
-				{/* Features section */}
-				<DiscoverFeature
-					features={features}
-					title={`Discover ${discover.title}`}
-					description={'Smarter swaps. Deeper liquidity. Total control.'}
-					columns={3}
-				/>
-
-				{/* Footer banner */}
-				<div className={'mb-16'}>
-					<Banner />
-				</div>
-			</div>
-		</div>
-	)
+export default async function DiscoverDetailPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}): Promise<ReactNode> {
+  // Extract slug from params
+  const { slug } = await params
+
+  // Fetch discover data using utility function
+  const discover = await fetchDiscoverBySlug(slug)
+
+  // Handle case when discover data is not found
+  if (!discover) {
+    console.error(`Discover page not found for slug: ${slug}`)
+    return notFound()
+  }
+
+  // Map discover features to feature section format
+  const features = discover.features.map((feature) => ({
+    id: feature.id,
+    title: feature.title,
+    description: feature.description,
+    image: feature.image
+      ? {
+          url: getStrapiImageUrl(feature.image.url),
+          width: feature.image.width,
+          height: feature.image.height,
+          alt: feature.title,
+        }
+      : undefined,
+    buttonCta:
+      feature.buttonCta && typeof feature.buttonCta.url === 'string' && /^(\/|https?:\/\/)/i.test(feature.buttonCta.url)
+        ? { title: feature.buttonCta.title, url: feature.buttonCta.url }
+        : undefined,
+  }))
+
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container mt-[60px] flex flex-col justify-center'}>
+        {/* Header section with feature badges */}
+        <ResourceHeader
+          title={discover.title}
+          description={discover.description}
+          items={DEFAULT_FEATURES}
+          ctaButton={{
+            text: 'Get Started',
+            url: 'https://app.shapeshift.com/',
+          }}
+        />
+
+        {/* Hero banner with discover image */}
+        <ResourceHero
+          imageSrc={'/wallets/hero.jpg'}
+          imageAlt={`${discover.title} banner image`}
+          logoSrc={getStrapiImageUrl(discover.featuredImg.url)}
+          logoAlt={discover.title}
+          logoWidth={discover.featuredImg.width}
+          logoHeight={discover.featuredImg.height}
+          priority
+        />
+
+        {/* Features section */}
+        <DiscoverFeature
+          features={features}
+          title={`Discover ${discover.title}`}
+          description={'Smarter swaps. Deeper liquidity. Total control.'}
+          columns={3}
+        />
+
+        {/* Footer banner */}
+        <div className={'mb-16'}>
+          <Banner />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx b/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx
index 7a8cc2d..dfee397 100644
--- a/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx
+++ b/app/[lang]/(resources)/discover/_components/DiscoverSearchWrapper.tsx
@@ -1,15 +1,15 @@
 'use client'
 
-import {useState} from 'react'
+import { useState } from 'react'
 
-import {SearchBar} from '@/app/[lang]/_components/SearchBar'
-import {StrapiDiscover} from '@/app/[lang]/_components/StrapiDiscover'
+import { SearchBar } from '@/app/[lang]/_components/SearchBar'
+import { StrapiDiscover } from '@/app/[lang]/_components/StrapiDiscover'
 
-import type {TDiscoverData} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TDiscoverData } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TDiscoverSearchWrapperProps = {
-	discover: TDiscoverData[] | null
+  discover: TDiscoverData[] | null
 }
 
 /**************************************************************************************************
@@ -21,53 +21,48 @@ type TDiscoverSearchWrapperProps = {
  ** @param {TDiscoverSearchWrapperProps} props - Component props containing array of discover data
  ** @returns {ReactNode} Rendered component with search and discover list
  *************************************************************************************************/
-export function DiscoverSearchWrapper({discover}: TDiscoverSearchWrapperProps): ReactNode {
-	const [searchQuery, setSearchQuery] = useState('')
+export function DiscoverSearchWrapper({ discover }: TDiscoverSearchWrapperProps): ReactNode {
+  const [searchQuery, setSearchQuery] = useState('')
 
-	/**********************************************************************************************
-	 ** Filter discover items by search query
-	 ** Filters items by matching names with search query
-	 *********************************************************************************************/
-	const filteredDiscover = discover?.filter(
-		item =>
-			item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-			item.tag.toLowerCase().includes(searchQuery.toLowerCase())
-	)
+  /**********************************************************************************************
+   ** Filter discover items by search query
+   ** Filters items by matching names with search query
+   *********************************************************************************************/
+  const filteredDiscover = discover?.filter(
+    (item) =>
+      item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      item.tag.toLowerCase().includes(searchQuery.toLowerCase())
+  )
 
-	/**********************************************************************************************
-	 ** Group discover items by type for organized display
-	 ** This reduces the array of discover items into an object where:
-	 ** - Keys are the different types (categories) of discover items
-	 ** - Values are arrays of items belonging to each type
-	 *********************************************************************************************/
-	const groupedDiscover = filteredDiscover?.reduce(
-		(acc, item) => {
-			const type = item.type
-			if (!acc[type]) {
-				acc[type] = []
-			}
-			acc[type].push(item)
-			return acc
-		},
-		{} as Record<string, TDiscoverData[]>
-	)
+  /**********************************************************************************************
+   ** Group discover items by type for organized display
+   ** This reduces the array of discover items into an object where:
+   ** - Keys are the different types (categories) of discover items
+   ** - Values are arrays of items belonging to each type
+   *********************************************************************************************/
+  const groupedDiscover = filteredDiscover?.reduce(
+    (acc, item) => {
+      const type = item.type
+      if (!acc[type]) {
+        acc[type] = []
+      }
+      acc[type].push(item)
+      return acc
+    },
+    {} as Record<string, TDiscoverData[]>
+  )
 
-	return (
-		<div className={'flex w-full flex-col gap-8'}>
-			<SearchBar
-				searchQuery={searchQuery}
-				setSearchQueryAction={setSearchQuery}
-			/>
+  return (
+    <div className={'flex w-full flex-col gap-8'}>
+      <SearchBar searchQuery={searchQuery} setSearchQueryAction={setSearchQuery} />
 
-			{groupedDiscover &&
-				Object.entries(groupedDiscover).map(([type, items]) => (
-					<section
-						key={type}
-						className={'mt-8'}>
-						<h2 className={'mb-6 text-2xl font-medium'}>{type}</h2>
-						<StrapiDiscover discover={items} />
-					</section>
-				))}
-		</div>
-	)
+      {groupedDiscover &&
+        Object.entries(groupedDiscover).map(([type, items]) => (
+          <section key={type} className={'mt-8'}>
+            <h2 className={'mb-6 text-2xl font-medium'}>{type}</h2>
+            <StrapiDiscover discover={items} />
+          </section>
+        ))}
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/discover/layout.tsx b/app/[lang]/(resources)/discover/layout.tsx
index f6b298e..55dd750 100644
--- a/app/[lang]/(resources)/discover/layout.tsx
+++ b/app/[lang]/(resources)/discover/layout.tsx
@@ -1,34 +1,34 @@
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export async function generateMetadata(): Promise<Metadata> {
-	return {
-		title: 'Explore Web3 with ShapeShift',
-		description: 'Discover the world of Web3 with ShapeShift.',
-		keywords: 'ShapeShift, Explore Web3',
-		openGraph: {
-			title: 'Explore Web3 with ShapeShift',
-			description: 'Discover the world of Web3 with ShapeShift.',
-			type: 'website',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: 'Explore Web3 with ShapeShift',
-			description: 'Discover the world of Web3 with ShapeShift.',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		}
-	}
+  return {
+    title: 'Explore Web3 with ShapeShift',
+    description: 'Discover the world of Web3 with ShapeShift.',
+    keywords: 'ShapeShift, Explore Web3',
+    openGraph: {
+      title: 'Explore Web3 with ShapeShift',
+      description: 'Discover the world of Web3 with ShapeShift.',
+      type: 'website',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'Explore Web3 with ShapeShift',
+      description: 'Discover the world of Web3 with ShapeShift.',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+  }
 }
 
-export default function Layout({children}: {children: ReactNode}): ReactNode {
-	return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+  return children
 }
diff --git a/app/[lang]/(resources)/discover/page.tsx b/app/[lang]/(resources)/discover/page.tsx
index c10214d..ce8f21b 100644
--- a/app/[lang]/(resources)/discover/page.tsx
+++ b/app/[lang]/(resources)/discover/page.tsx
@@ -1,35 +1,31 @@
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {Button} from '@/app/[lang]/_components/Button'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
-import {getDiscovers} from '@/app/[lang]/_utils/query'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { Button } from '@/app/[lang]/_components/Button'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
+import { getDiscovers } from '@/app/[lang]/_utils/query'
 
-import {DiscoverSearchWrapper} from './_components/DiscoverSearchWrapper'
+import { DiscoverSearchWrapper } from './_components/DiscoverSearchWrapper'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default async function DiscoverPage(): Promise<ReactNode> {
-	const discover = await getDiscovers()
+  const discover = await getDiscovers()
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container mt-[120px] flex flex-col justify-center lg:mt-48'}>
-				<section className={'mb-16 flex flex-col items-center'}>
-					<div className={'mb-6 flex flex-col items-center gap-2'}>
-						<h1 className={'text-[40px] leading-10 lg:text-7xl'}>{RESOURCES_DICT.discover.title}</h1>
-					</div>
-					<Button
-						variant={'blue'}
-						href={'https://app.shapeshift.com/'}
-						title={RESOURCES_DICT.discover.ctaButton}
-					/>
-				</section>
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container mt-[120px] flex flex-col justify-center lg:mt-48'}>
+        <section className={'mb-16 flex flex-col items-center'}>
+          <div className={'mb-6 flex flex-col items-center gap-2'}>
+            <h1 className={'text-[40px] leading-10 lg:text-7xl'}>{RESOURCES_DICT.discover.title}</h1>
+          </div>
+          <Button variant={'blue'} href={'https://app.shapeshift.com/'} title={RESOURCES_DICT.discover.ctaButton} />
+        </section>
 
-				<DiscoverSearchWrapper discover={discover} />
+        <DiscoverSearchWrapper discover={discover} />
 
-				<div className={'my-16'}>
-					<Banner />
-				</div>
-			</div>
-		</div>
-	)
+        <div className={'my-16'}>
+          <Banner />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/faq/page.tsx b/app/[lang]/(resources)/faq/page.tsx
index ccd6cae..803f870 100644
--- a/app/[lang]/(resources)/faq/page.tsx
+++ b/app/[lang]/(resources)/faq/page.tsx
@@ -16,35 +16,35 @@
  ** - Handles data loading errors gracefully
  ************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {FAQContent} from '@/app/[lang]/(resources)/_components/FAQContent'
-import {fetchFaqData} from '@/app/[lang]/(resources)/_utils/fetchUtils'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
+import { FAQContent } from '@/app/[lang]/(resources)/_components/FAQContent'
+import { fetchFaqData } from '@/app/[lang]/(resources)/_utils/fetchUtils'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export const metadata: Metadata = {
-	title: RESOURCES_DICT.faq.metadata.title,
-	description: RESOURCES_DICT.faq.metadata.description,
-	keywords: RESOURCES_DICT.faq.metadata.keywords
+  title: RESOURCES_DICT.faq.metadata.title,
+  description: RESOURCES_DICT.faq.metadata.description,
+  keywords: RESOURCES_DICT.faq.metadata.keywords,
 }
 
 export default async function FAQPage(): Promise<ReactNode> {
-	// Fetch FAQ data using centralized utility
-	const faqData = await fetchFaqData()
+  // Fetch FAQ data using centralized utility
+  const faqData = await fetchFaqData()
 
-	// Handle missing data case
-	if (!faqData) {
-		console.error('Failed to load FAQ data')
-		return notFound()
-	}
+  // Handle missing data case
+  if (!faqData) {
+    console.error('Failed to load FAQ data')
+    return notFound()
+  }
 
-	return (
-		<>
-			{/* FAQ content with navigation */}
-			<FAQContent faqData={faqData} />
-		</>
-	)
+  return (
+    <>
+      {/* FAQ content with navigation */}
+      <FAQContent faqData={faqData} />
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts.tsx
index 4790198..da1bd3c 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts.tsx
@@ -1,88 +1,78 @@
 'use client'
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {NewsPost} from '@/app/[lang]/_components/NewsPost'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {newsroomCategoriesSlugToCategory} from '@/app/[lang]/_utils/constants'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { NewsPost } from '@/app/[lang]/_components/NewsPost'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { newsroomCategoriesSlugToCategory } from '@/app/[lang]/_utils/constants'
 
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
 
 const PAGE_SIZE = 12
 const SORT = 'desc'
-export function ListOfPosts(props: {category: string}): ReactElement {
-	const {category} = props
-	const [page, setPage] = useState(1)
-	const {posts, pagination, isLoading} = useFetchNewsroom({
-		page,
-		pageSize: PAGE_SIZE,
-		sort: SORT,
-		category: newsroomCategoriesSlugToCategory(category),
-		populateContent: true,
-		cachePosts: true
-	})
+export function ListOfPosts(props: { category: string }): ReactElement {
+  const { category } = props
+  const [page, setPage] = useState(1)
+  const { posts, pagination, isLoading } = useFetchNewsroom({
+    page,
+    pageSize: PAGE_SIZE,
+    sort: SORT,
+    category: newsroomCategoriesSlugToCategory(category),
+    populateContent: true,
+    cachePosts: true,
+  })
 
-	if (isLoading) {
-		return (
-			<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-				{[...Array(PAGE_SIZE)].map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-					/>
-				))}
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+        {[...Array(PAGE_SIZE)].map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{posts.length === 0 ? (
-				<p className={'my-20 text-center text-2xl text-gray-400'}>
-					{"We couldn't find any blog posts matching your criteria."}
-				</p>
-			) : (
-				<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-					{posts.map(post => (
-						<NewsPost
-							key={post.documentId}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
+  return (
+    <Fragment>
+      {posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'}>
+          {"We couldn't find any blog posts matching your criteria."}
+        </p>
+      ) : (
+        <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+          {posts.map((post) => (
+            <NewsPost key={post.documentId} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
 
-			<ReactPaginate
-				pageCount={pagination?.pageCount ?? 1}
-				pageRangeDisplayed={5}
-				marginPagesDisplayed={2}
-				onPageChange={({selected}) => setPage(selected + 1)}
-				containerClassName={'flex gap-2 items-center justify-center mb-16'}
-				pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-				pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				activeClassName={'!opacity-100'}
-				previousClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === 1 ? 'opacity-20' : 'opacity-100'
-				)}
-				previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-				)}
-				disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-				disabledLinkClassName={'cursor-not-allowed'}
-				previousLabel={<IconChevron />}
-				nextLabel={<IconChevron className={'rotate-180'} />}
-			/>
+      <ReactPaginate
+        pageCount={pagination?.pageCount ?? 1}
+        pageRangeDisplayed={5}
+        marginPagesDisplayed={2}
+        onPageChange={({ selected }) => setPage(selected + 1)}
+        containerClassName={'flex gap-2 items-center justify-center mb-16'}
+        pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+        pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        activeClassName={'!opacity-100'}
+        previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+        previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextClassName={cl(
+          'hover:opacity-100 transition-opacity',
+          page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+        )}
+        disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+        disabledLinkClassName={'cursor-not-allowed'}
+        previousLabel={<IconChevron />}
+        nextLabel={<IconChevron className={'rotate-180'} />}
+      />
 
-			<Banner />
-		</Fragment>
-	)
+      <Banner />
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
index 8153843..6a43939 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/page.tsx
@@ -1,24 +1,24 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {ListOfPosts} from '@/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts'
+import { ListOfPosts } from '@/app/[lang]/(resources)/newsroom/(withNavigation)/categories/[category]/ListOfPosts'
 
 export default async function BlogCategoriesPage(props: {
-	params: Promise<{category: string}>
+  params: Promise<{ category: string }>
 }): Promise<React.ReactNode> {
-	const {category} = await props.params
-	const data = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[category][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	)
-	const {data: posts} = await data.json()
+  const { category } = await props.params
+  const data = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[category][$contains]=${category}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc&pagination[pageSize]=1`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  )
+  const { data: posts } = await data.json()
 
-	if (!posts) {
-		return notFound()
-	}
+  if (!posts) {
+    return notFound()
+  }
 
-	return <ListOfPosts category={category} />
+  return <ListOfPosts category={category} />
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/page.tsx
index fe86dd7..7d9e6e9 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/categories/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/categories/page.tsx
@@ -1,84 +1,74 @@
 'use client'
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {NewsPost} from '@/app/[lang]/_components/NewsPost'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { NewsPost } from '@/app/[lang]/_components/NewsPost'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 const PAGE_SIZE = 12
 const SORT = 'desc'
 
 export default function BlogList(): ReactNode {
-	const [page, setPage] = useState(1)
-	const {posts, pagination, isLoading} = useFetchNewsroom({
-		page,
-		pageSize: PAGE_SIZE,
-		sort: SORT,
-		populateContent: true,
-		cachePosts: true
-	})
+  const [page, setPage] = useState(1)
+  const { posts, pagination, isLoading } = useFetchNewsroom({
+    page,
+    pageSize: PAGE_SIZE,
+    sort: SORT,
+    populateContent: true,
+    cachePosts: true,
+  })
 
-	if (isLoading) {
-		return (
-			<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-				{[...Array(PAGE_SIZE)].map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-					/>
-				))}
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+        {[...Array(PAGE_SIZE)].map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{posts.length === 0 ? (
-				<p className={'my-20 text-center text-2xl text-gray-400'}>
-					{"We couldn't find any blog posts matching your criteria."}
-				</p>
-			) : (
-				<div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
-					{posts.map(post => (
-						<NewsPost
-							key={post.slug}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
-			<ReactPaginate
-				pageCount={pagination?.pageCount ?? 1}
-				pageRangeDisplayed={5}
-				marginPagesDisplayed={2}
-				onPageChange={({selected}) => setPage(selected + 1)}
-				containerClassName={'flex gap-2 items-center justify-center'}
-				pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-				pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				activeClassName={'!opacity-100'}
-				previousClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === 1 ? 'opacity-20' : 'opacity-100'
-				)}
-				previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-				)}
-				disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-				disabledLinkClassName={'cursor-not-allowed'}
-				previousLabel={<IconChevron />}
-				nextLabel={<IconChevron className={'rotate-180'} />}
-			/>
-			<Banner />
-		</Fragment>
-	)
+  return (
+    <Fragment>
+      {posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'}>
+          {"We couldn't find any blog posts matching your criteria."}
+        </p>
+      ) : (
+        <div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
+          {posts.map((post) => (
+            <NewsPost key={post.slug} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
+      <ReactPaginate
+        pageCount={pagination?.pageCount ?? 1}
+        pageRangeDisplayed={5}
+        marginPagesDisplayed={2}
+        onPageChange={({ selected }) => setPage(selected + 1)}
+        containerClassName={'flex gap-2 items-center justify-center'}
+        pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+        pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        activeClassName={'!opacity-100'}
+        previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+        previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextClassName={cl(
+          'hover:opacity-100 transition-opacity',
+          page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+        )}
+        disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+        disabledLinkClassName={'cursor-not-allowed'}
+        previousLabel={<IconChevron />}
+        nextLabel={<IconChevron className={'rotate-180'} />}
+      />
+      <Banner />
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
index 7cc4f1c..08e74c3 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/layout.tsx
@@ -1,19 +1,19 @@
-import {NewsroomBreadcrumb} from '@/app/[lang]/(resources)/_components/NewsroomBreadcrumb'
-import {NewsroomNav} from '@/app/[lang]/(resources)/_components/NewsroomNav'
-import {NewsroomTitle} from '@/app/[lang]/(resources)/_components/NewsroomTitle'
+import { NewsroomBreadcrumb } from '@/app/[lang]/(resources)/_components/NewsroomBreadcrumb'
+import { NewsroomNav } from '@/app/[lang]/(resources)/_components/NewsroomNav'
+import { NewsroomTitle } from '@/app/[lang]/(resources)/_components/NewsroomTitle'
 
 export default async function BlogPageLayout(props: {
-	children: React.ReactNode
-	params: Promise<{category: string}>
+  children: React.ReactNode
+  params: Promise<{ category: string }>
 }): Promise<React.ReactNode> {
-	await props.params
+  await props.params
 
-	return (
-		<main className={'container mx-auto mt-32 py-8'}>
-			<NewsroomBreadcrumb />
-			<NewsroomTitle />
-			<NewsroomNav />
-			{props.children}
-		</main>
-	)
+  return (
+    <main className={'container mx-auto mt-32 py-8'}>
+      <NewsroomBreadcrumb />
+      <NewsroomTitle />
+      <NewsroomNav />
+      {props.children}
+    </main>
+  )
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx
index fe86dd7..7d9e6e9 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/page.tsx
@@ -1,84 +1,74 @@
 'use client'
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {NewsPost} from '@/app/[lang]/_components/NewsPost'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { NewsPost } from '@/app/[lang]/_components/NewsPost'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 const PAGE_SIZE = 12
 const SORT = 'desc'
 
 export default function BlogList(): ReactNode {
-	const [page, setPage] = useState(1)
-	const {posts, pagination, isLoading} = useFetchNewsroom({
-		page,
-		pageSize: PAGE_SIZE,
-		sort: SORT,
-		populateContent: true,
-		cachePosts: true
-	})
+  const [page, setPage] = useState(1)
+  const { posts, pagination, isLoading } = useFetchNewsroom({
+    page,
+    pageSize: PAGE_SIZE,
+    sort: SORT,
+    populateContent: true,
+    cachePosts: true,
+  })
 
-	if (isLoading) {
-		return (
-			<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-				{[...Array(PAGE_SIZE)].map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-					/>
-				))}
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+        {[...Array(PAGE_SIZE)].map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{posts.length === 0 ? (
-				<p className={'my-20 text-center text-2xl text-gray-400'}>
-					{"We couldn't find any blog posts matching your criteria."}
-				</p>
-			) : (
-				<div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
-					{posts.map(post => (
-						<NewsPost
-							key={post.slug}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
-			<ReactPaginate
-				pageCount={pagination?.pageCount ?? 1}
-				pageRangeDisplayed={5}
-				marginPagesDisplayed={2}
-				onPageChange={({selected}) => setPage(selected + 1)}
-				containerClassName={'flex gap-2 items-center justify-center'}
-				pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-				pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				activeClassName={'!opacity-100'}
-				previousClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === 1 ? 'opacity-20' : 'opacity-100'
-				)}
-				previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-				)}
-				disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-				disabledLinkClassName={'cursor-not-allowed'}
-				previousLabel={<IconChevron />}
-				nextLabel={<IconChevron className={'rotate-180'} />}
-			/>
-			<Banner />
-		</Fragment>
-	)
+  return (
+    <Fragment>
+      {posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'}>
+          {"We couldn't find any blog posts matching your criteria."}
+        </p>
+      ) : (
+        <div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
+          {posts.map((post) => (
+            <NewsPost key={post.slug} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
+      <ReactPaginate
+        pageCount={pagination?.pageCount ?? 1}
+        pageRangeDisplayed={5}
+        marginPagesDisplayed={2}
+        onPageChange={({ selected }) => setPage(selected + 1)}
+        containerClassName={'flex gap-2 items-center justify-center'}
+        pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+        pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        activeClassName={'!opacity-100'}
+        previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+        previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextClassName={cl(
+          'hover:opacity-100 transition-opacity',
+          page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+        )}
+        disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+        disabledLinkClassName={'cursor-not-allowed'}
+        previousLabel={<IconChevron />}
+        nextLabel={<IconChevron className={'rotate-180'} />}
+      />
+      <Banner />
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx
index e383aea..5b6ac30 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts.tsx
@@ -1,87 +1,77 @@
 'use client'
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {NewsPost} from '@/app/[lang]/_components/NewsPost'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { NewsPost } from '@/app/[lang]/_components/NewsPost'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
 
 const PAGE_SIZE = 12
 const SORT = 'desc'
-export function ListOfPosts(props: {tag: string}): ReactElement {
-	const {tag} = props
-	const [page, setPage] = useState(1)
-	const {posts, pagination, isLoading} = useFetchNewsroom({
-		page,
-		pageSize: PAGE_SIZE,
-		sort: SORT,
-		tag,
-		populateContent: true,
-		cachePosts: true
-	})
+export function ListOfPosts(props: { tag: string }): ReactElement {
+  const { tag } = props
+  const [page, setPage] = useState(1)
+  const { posts, pagination, isLoading } = useFetchNewsroom({
+    page,
+    pageSize: PAGE_SIZE,
+    sort: SORT,
+    tag,
+    populateContent: true,
+    cachePosts: true,
+  })
 
-	if (isLoading) {
-		return (
-			<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-				{[...Array(PAGE_SIZE)].map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-					/>
-				))}
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+        {[...Array(PAGE_SIZE)].map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{posts.length === 0 ? (
-				<p className={'my-20 text-center text-2xl text-gray-400'}>
-					{"We couldn't find any blog posts matching your criteria."}
-				</p>
-			) : (
-				<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-					{posts.map(post => (
-						<NewsPost
-							key={post.documentId}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
+  return (
+    <Fragment>
+      {posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'}>
+          {"We couldn't find any blog posts matching your criteria."}
+        </p>
+      ) : (
+        <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+          {posts.map((post) => (
+            <NewsPost key={post.documentId} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
 
-			<ReactPaginate
-				pageCount={pagination?.pageCount ?? 1}
-				pageRangeDisplayed={5}
-				marginPagesDisplayed={2}
-				onPageChange={({selected}) => setPage(selected + 1)}
-				containerClassName={'flex gap-2 items-center justify-center mb-16'}
-				pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-				pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				activeClassName={'!opacity-100'}
-				previousClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === 1 ? 'opacity-20' : 'opacity-100'
-				)}
-				previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-				)}
-				disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-				disabledLinkClassName={'cursor-not-allowed'}
-				previousLabel={<IconChevron />}
-				nextLabel={<IconChevron className={'rotate-180'} />}
-			/>
+      <ReactPaginate
+        pageCount={pagination?.pageCount ?? 1}
+        pageRangeDisplayed={5}
+        marginPagesDisplayed={2}
+        onPageChange={({ selected }) => setPage(selected + 1)}
+        containerClassName={'flex gap-2 items-center justify-center mb-16'}
+        pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+        pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        activeClassName={'!opacity-100'}
+        previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+        previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextClassName={cl(
+          'hover:opacity-100 transition-opacity',
+          page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+        )}
+        disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+        disabledLinkClassName={'cursor-not-allowed'}
+        previousLabel={<IconChevron />}
+        nextLabel={<IconChevron className={'rotate-180'} />}
+      />
 
-			<Banner />
-		</Fragment>
-	)
+      <Banner />
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx
index 9166f48..a809d31 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/page.tsx
@@ -1,22 +1,22 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {ListOfPosts} from '@/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts'
+import { ListOfPosts } from '@/app/[lang]/(resources)/newsroom/(withNavigation)/tags/[tag]/ListOfPosts'
 
-export default async function NewsroomTagsPage(props: {params: Promise<{tag: string}>}): Promise<React.ReactNode> {
-	const {tag} = await props.params
-	const data = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	)
-	const {data: posts} = await data.json()
+export default async function NewsroomTagsPage(props: { params: Promise<{ tag: string }> }): Promise<React.ReactNode> {
+  const { tag } = await props.params
+  const data = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[tags][$contains]=${tag}&fields[0]=title&fields[1]=slug&fields[2]=publishedAt&populate[0]=featuredImg&sort[0]=publishedAt:desc`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  )
+  const { data: posts } = await data.json()
 
-	if (!posts) {
-		return notFound()
-	}
+  if (!posts) {
+    return notFound()
+  }
 
-	return <ListOfPosts tag={tag} />
+  return <ListOfPosts tag={tag} />
 }
diff --git a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/page.tsx b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/page.tsx
index fe86dd7..7d9e6e9 100644
--- a/app/[lang]/(resources)/newsroom/(withNavigation)/tags/page.tsx
+++ b/app/[lang]/(resources)/newsroom/(withNavigation)/tags/page.tsx
@@ -1,84 +1,74 @@
 'use client'
 
-import {Fragment, useState} from 'react'
+import { Fragment, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {NewsPost} from '@/app/[lang]/_components/NewsPost'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconChevron} from '@/app/[lang]/_icons/IconChevron'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { NewsPost } from '@/app/[lang]/_components/NewsPost'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconChevron } from '@/app/[lang]/_icons/IconChevron'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 const PAGE_SIZE = 12
 const SORT = 'desc'
 
 export default function BlogList(): ReactNode {
-	const [page, setPage] = useState(1)
-	const {posts, pagination, isLoading} = useFetchNewsroom({
-		page,
-		pageSize: PAGE_SIZE,
-		sort: SORT,
-		populateContent: true,
-		cachePosts: true
-	})
+  const [page, setPage] = useState(1)
+  const { posts, pagination, isLoading } = useFetchNewsroom({
+    page,
+    pageSize: PAGE_SIZE,
+    sort: SORT,
+    populateContent: true,
+    cachePosts: true,
+  })
 
-	if (isLoading) {
-		return (
-			<div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
-				{[...Array(PAGE_SIZE)].map((_, i) => (
-					<div
-						key={i}
-						className={'h-64 animate-pulse rounded-2xl bg-gray-800'}
-					/>
-				))}
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className={'mb-20 grid gap-6 lg:grid-cols-3'}>
+        {[...Array(PAGE_SIZE)].map((_, i) => (
+          <div key={i} className={'h-64 animate-pulse rounded-2xl bg-gray-800'} />
+        ))}
+      </div>
+    )
+  }
 
-	return (
-		<Fragment>
-			{posts.length === 0 ? (
-				<p className={'my-20 text-center text-2xl text-gray-400'}>
-					{"We couldn't find any blog posts matching your criteria."}
-				</p>
-			) : (
-				<div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
-					{posts.map(post => (
-						<NewsPost
-							key={post.slug}
-							post={post}
-							className={'!bg-stroke'}
-						/>
-					))}
-				</div>
-			)}
-			<ReactPaginate
-				pageCount={pagination?.pageCount ?? 1}
-				pageRangeDisplayed={5}
-				marginPagesDisplayed={2}
-				onPageChange={({selected}) => setPage(selected + 1)}
-				containerClassName={'flex gap-2 items-center justify-center'}
-				pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
-				pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				activeClassName={'!opacity-100'}
-				previousClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === 1 ? 'opacity-20' : 'opacity-100'
-				)}
-				previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
-				nextClassName={cl(
-					'hover:opacity-100 transition-opacity',
-					page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
-				)}
-				disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
-				disabledLinkClassName={'cursor-not-allowed'}
-				previousLabel={<IconChevron />}
-				nextLabel={<IconChevron className={'rotate-180'} />}
-			/>
-			<Banner />
-		</Fragment>
-	)
+  return (
+    <Fragment>
+      {posts.length === 0 ? (
+        <p className={'my-20 text-center text-2xl text-gray-400'}>
+          {"We couldn't find any blog posts matching your criteria."}
+        </p>
+      ) : (
+        <div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
+          {posts.map((post) => (
+            <NewsPost key={post.slug} post={post} className={'!bg-stroke'} />
+          ))}
+        </div>
+      )}
+      <ReactPaginate
+        pageCount={pagination?.pageCount ?? 1}
+        pageRangeDisplayed={5}
+        marginPagesDisplayed={2}
+        onPageChange={({ selected }) => setPage(selected + 1)}
+        containerClassName={'flex gap-2 items-center justify-center'}
+        pageClassName={'opacity-20 hover:opacity-100 transition-opacity'}
+        pageLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        activeClassName={'!opacity-100'}
+        previousClassName={cl('hover:opacity-100 transition-opacity', page === 1 ? 'opacity-20' : 'opacity-100')}
+        previousLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextLinkClassName={'px-6 py-4 flex items-center justify-center'}
+        nextClassName={cl(
+          'hover:opacity-100 transition-opacity',
+          page === pagination?.pageCount ? 'opacity-20' : 'opacity-100'
+        )}
+        disabledClassName={'hover:opacity-20 opacity-20 transition-opacity'}
+        disabledLinkClassName={'cursor-not-allowed'}
+        previousLabel={<IconChevron />}
+        nextLabel={<IconChevron className={'rotate-180'} />}
+      />
+      <Banner />
+    </Fragment>
+  )
 }
diff --git a/app/[lang]/(resources)/newsroom/[slug]/layout.tsx b/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
index 2813d0b..719ae4e 100644
--- a/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
+++ b/app/[lang]/(resources)/newsroom/[slug]/layout.tsx
@@ -1,67 +1,67 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {Metadata} from 'next'
+import type { Metadata } from 'next'
 
 /************************************************************************************************
  * Layout component for blog post pages
  * Handles metadata generation for SEO and social sharing
  * Uses Next.js 13+ Metadata API
  ************************************************************************************************/
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise<Metadata> {
-	const {slug} = await params
-	const data = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[slug][$eq]=${slug}&fields[0]=postSummary&fields[1]=tags&fields[2]=title&fields[3]=publishedAt&populate[0]=featuredImg`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	).then(async res => res.json())
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params
+  const data = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?filters[slug][$eq]=${slug}&fields[0]=postSummary&fields[1]=tags&fields[2]=title&fields[3]=publishedAt&populate[0]=featuredImg`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  ).then(async (res) => res.json())
 
-	const post = data.data[0]
+  const post = data.data[0]
 
-	if (!post) {
-		return notFound()
-	}
+  if (!post) {
+    return notFound()
+  }
 
-	const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
-	const metadata: Metadata = {
-		title: `${post.title} | ShapeShift Newsroom`,
-		description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`,
-		keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
-		openGraph: {
-			title: post.title,
-			description: post.postSummary,
-			type: 'article',
-			publishedTime: post.publishedAt,
-			authors: ['ShapeShift'],
-			tags: Array.isArray(post.tags) ? post.tags : [post.tags]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: post.title,
-			description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`
-		}
-	}
+  const imageUrl = post.featuredImg?.formats?.thumbnail?.url || post.featuredImg?.url
+  const metadata: Metadata = {
+    title: `${post.title} | ShapeShift Newsroom`,
+    description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`,
+    keywords: Array.isArray(post.tags) ? post.tags.join(', ') : post.tags,
+    openGraph: {
+      title: post.title,
+      description: post.postSummary,
+      type: 'article',
+      publishedTime: post.publishedAt,
+      authors: ['ShapeShift'],
+      tags: Array.isArray(post.tags) ? post.tags : [post.tags],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.title,
+      description: post.postSummary || `Read ${post.title} on ShapeShift Newsroom`,
+    },
+  }
 
-	if (imageUrl) {
-		metadata.openGraph!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-		metadata.twitter!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-	}
+  if (imageUrl) {
+    metadata.openGraph!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+    metadata.twitter!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+  }
 
-	return metadata
+  return metadata
 }
 
-export default function NewsroomPostLayout({children}: {children: React.ReactNode}): React.ReactNode {
-	return children
+export default function NewsroomPostLayout({ children }: { children: React.ReactNode }): React.ReactNode {
+  return children
 }
diff --git a/app/[lang]/(resources)/newsroom/[slug]/page.tsx b/app/[lang]/(resources)/newsroom/[slug]/page.tsx
index eda246d..8d7949d 100644
--- a/app/[lang]/(resources)/newsroom/[slug]/page.tsx
+++ b/app/[lang]/(resources)/newsroom/[slug]/page.tsx
@@ -2,314 +2,264 @@
 
 import 'highlight.js/styles/github-dark.css'
 import Image from 'next/image'
-import {notFound, useParams, useRouter} from 'next/navigation'
+import { notFound, useParams, useRouter } from 'next/navigation'
 import ReactMarkdown from 'react-markdown'
 import rehypeHighlight from 'rehype-highlight'
 import remarkEmoji from 'remark-emoji' // For emoji support
 import remarkGfm from 'remark-gfm'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {useCachedNews} from '@/app/[lang]/_contexts/CachedNewsContext'
-import {useFetchNewsroom} from '@/app/[lang]/_hooks/useFetchNewsroom'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { useCachedNews } from '@/app/[lang]/_contexts/CachedNewsContext'
+import { useFetchNewsroom } from '@/app/[lang]/_hooks/useFetchNewsroom'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 function LoadingSkeleton(): ReactNode {
-	return (
-		<div className={'container relative mx-auto mb-96 mt-40 max-w-4xl px-4'}>
-			<div className={'absolute -left-32 top-0 h-10 w-20 animate-pulse rounded-lg bg-gray-800'} />
-			<div className={'mb-8 h-6 w-32 animate-pulse rounded-lg bg-gray-800'} />
-			<div className={'mb-8 flex gap-2'}>
-				<div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
-			</div>
-			<div className={'mb-8 h-12 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-			<div className={'space-y-4'}>
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
-				<div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
-			</div>
-		</div>
-	)
+  return (
+    <div className={'container relative mx-auto mb-96 mt-40 max-w-4xl px-4'}>
+      <div className={'absolute -left-32 top-0 h-10 w-20 animate-pulse rounded-lg bg-gray-800'} />
+      <div className={'mb-8 h-6 w-32 animate-pulse rounded-lg bg-gray-800'} />
+      <div className={'mb-8 flex gap-2'}>
+        <div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-6 w-24 animate-pulse rounded-lg bg-gray-800'} />
+      </div>
+      <div className={'mb-8 h-12 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+      <div className={'space-y-4'}>
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-5/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-4/6 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-3/4 animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-full animate-pulse rounded-lg bg-gray-800'} />
+        <div className={'h-4 w-2/3 animate-pulse rounded-lg bg-gray-800'} />
+      </div>
+    </div>
+  )
 }
 
-function BlogContent({content}: {content: string}): ReactNode {
-	// Check if content looks like HTML (contains HTML tags)
-	const isHtml = /<\/?(?:div|span|p|a|img|h[1-6]|ul|ol|li|table|tr|td|th|br|hr|em|strong)[^>]*>/i.test(content)
+function BlogContent({ content }: { content: string }): ReactNode {
+  // Check if content looks like HTML (contains HTML tags)
+  const isHtml = /<\/?(?:div|span|p|a|img|h[1-6]|ul|ol|li|table|tr|td|th|br|hr|em|strong)[^>]*>/i.test(content)
 
-	return (
-		<div className={'blog-content prose prose-invert max-w-none'}>
-			{isHtml ? (
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				<div dangerouslySetInnerHTML={{__html: content}} />
-			) : (
-				<ReactMarkdown
-					remarkPlugins={[remarkGfm, remarkEmoji]}
-					rehypePlugins={[rehypeHighlight]}
-					components={{
-						// Headers
-						h1: ({...props}) => (
-							<h1
-								className={'mb-4 mt-8 text-4xl font-bold'}
-								{...props}
-							/>
-						),
-						h2: ({...props}) => (
-							<h2
-								className={'mb-3 mt-6 text-3xl font-bold'}
-								{...props}
-							/>
-						),
-						h3: ({...props}) => (
-							<h3
-								className={'mb-2 mt-4 text-2xl font-bold'}
-								{...props}
-							/>
-						),
+  return (
+    <div className={'blog-content prose prose-invert max-w-none'}>
+      {isHtml ? (
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+      ) : (
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkEmoji]}
+          rehypePlugins={[rehypeHighlight]}
+          components={{
+            // Headers
+            h1: ({ ...props }) => <h1 className={'mb-4 mt-8 text-4xl font-bold'} {...props} />,
+            h2: ({ ...props }) => <h2 className={'mb-3 mt-6 text-3xl font-bold'} {...props} />,
+            h3: ({ ...props }) => <h3 className={'mb-2 mt-4 text-2xl font-bold'} {...props} />,
 
-						// Code blocks
-						code: ({className, children, ...props}) => {
-							const match = /language-(\w+)/.exec(className || '')
-							return match ? (
-								<div className={'relative'}>
-									<div className={'absolute right-2 top-2 text-xs text-gray-400'}>{match[1]}</div>
-									<pre className={className}>
-										<code
-											className={className}
-											{...props}>
-											{children}
-										</code>
-									</pre>
-								</div>
-							) : (
-								<code
-									className={'rounded bg-gray-800 px-1.5 py-0.5'}
-									{...props}>
-									{children}
-								</code>
-							)
-						},
+            // Code blocks
+            code: ({ className, children, ...props }) => {
+              const match = /language-(\w+)/.exec(className || '')
+              return match ? (
+                <div className={'relative'}>
+                  <div className={'absolute right-2 top-2 text-xs text-gray-400'}>{match[1]}</div>
+                  <pre className={className}>
+                    <code className={className} {...props}>
+                      {children}
+                    </code>
+                  </pre>
+                </div>
+              ) : (
+                <code className={'rounded bg-gray-800 px-1.5 py-0.5'} {...props}>
+                  {children}
+                </code>
+              )
+            },
 
-						// Tables
-						table: ({...props}) => (
-							<div className={'my-8 overflow-x-auto'}>
-								<table
-									className={'min-w-full'}
-									{...props}
-								/>
-							</div>
-						),
-						th: ({...props}) => (
-							<th
-								className={'bg-gray-800 px-6 py-3 text-left'}
-								{...props}
-							/>
-						),
-						td: ({...props}) => (
-							<td
-								className={'border-t border-gray-700 px-6 py-4'}
-								{...props}
-							/>
-						),
+            // Tables
+            table: ({ ...props }) => (
+              <div className={'my-8 overflow-x-auto'}>
+                <table className={'min-w-full'} {...props} />
+              </div>
+            ),
+            th: ({ ...props }) => <th className={'bg-gray-800 px-6 py-3 text-left'} {...props} />,
+            td: ({ ...props }) => <td className={'border-t border-gray-700 px-6 py-4'} {...props} />,
 
-						// Images
-						img: ({...props}) => (
-							<Image
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								width={1200}
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								height={1200}
-								className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
-								loading={'lazy'}
-								{...props}
-							/>
-						),
+            // Images
+            img: ({ ...props }) => (
+              <Image
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                width={1200}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                height={1200}
+                className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
+                loading={'lazy'}
+                {...props}
+              />
+            ),
 
-						// Blockquotes
-						blockquote: ({...props}) => (
-							<blockquote
-								className={'border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'}
-								{...props}
-							/>
-						),
+            // Blockquotes
+            blockquote: ({ ...props }) => (
+              <blockquote className={'border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'} {...props} />
+            ),
 
-						// Lists
-						ul: ({...props}) => (
-							<ul
-								className={'my-4 list-inside list-disc'}
-								{...props}
-							/>
-						),
-						ol: ({...props}) => (
-							<ol
-								className={'my-4 list-inside list-decimal'}
-								{...props}
-							/>
-						),
+            // Lists
+            ul: ({ ...props }) => <ul className={'my-4 list-inside list-disc'} {...props} />,
+            ol: ({ ...props }) => <ol className={'my-4 list-inside list-decimal'} {...props} />,
 
-						// Links
-						a: ({...props}) => (
-							<a
-								className={'text-blue-400 hover:text-blue-300 transition-colors'}
-								target={'_blank'}
-								rel={'noopener noreferrer'}
-								{...props}
-							/>
-						)
-					}}>
-					{content}
-				</ReactMarkdown>
-			)}
+            // Links
+            a: ({ ...props }) => (
+              <a
+                className={'text-blue-400 hover:text-blue-300 transition-colors'}
+                target={'_blank'}
+                rel={'noopener noreferrer'}
+                {...props}
+              />
+            ),
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      )}
 
-			<style
-				jsx
-				global>
-				{`
-					.blog-content {
-						/* Base styles */
-						font-size: 1.125rem;
-						line-height: 1.75;
-						color: #e5e7eb;
-					}
+      <style jsx global>
+        {`
+          .blog-content {
+            /* Base styles */
+            font-size: 1.125rem;
+            line-height: 1.75;
+            color: #e5e7eb;
+          }
 
-					/* Code blocks */
-					.blog-content pre {
-						background-color: #1f2937;
-						padding: 1.5rem;
-						border-radius: 0.5rem;
-						overflow-x: auto;
-						margin: 1.5rem 0;
-						position: relative;
-					}
+          /* Code blocks */
+          .blog-content pre {
+            background-color: #1f2937;
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            margin: 1.5rem 0;
+            position: relative;
+          }
 
-					/* Footnotes */
-					.blog-content .footnotes {
-						border-top: 1px solid #374151;
-						margin-top: 2rem;
-						padding-top: 1rem;
-					}
+          /* Footnotes */
+          .blog-content .footnotes {
+            border-top: 1px solid #374151;
+            margin-top: 2rem;
+            padding-top: 1rem;
+          }
 
-					.blog-content .footnotes ol {
-						font-size: 0.875rem;
-					}
+          .blog-content .footnotes ol {
+            font-size: 0.875rem;
+          }
 
-					/* Definition lists */
-					.blog-content dl {
-						margin: 1.5rem 0;
-					}
+          /* Definition lists */
+          .blog-content dl {
+            margin: 1.5rem 0;
+          }
 
-					.blog-content dt {
-						font-weight: bold;
-						margin-top: 1rem;
-					}
+          .blog-content dt {
+            font-weight: bold;
+            margin-top: 1rem;
+          }
 
-					.blog-content dd {
-						margin-left: 1.5rem;
-					}
+          .blog-content dd {
+            margin-left: 1.5rem;
+          }
 
-					/* Custom containers */
-					.blog-content .warning {
-						background-color: #fef3c7;
-						border-left: 4px solid #f59e0b;
-						padding: 1rem;
-						margin: 1.5rem 0;
-						color: #92400e;
-					}
+          /* Custom containers */
+          .blog-content .warning {
+            background-color: #fef3c7;
+            border-left: 4px solid #f59e0b;
+            padding: 1rem;
+            margin: 1.5rem 0;
+            color: #92400e;
+          }
 
-					.blog-content p {
-						margin-bottom: 16px;
-					}
+          .blog-content p {
+            margin-bottom: 16px;
+          }
 
-					.blog-content strong {
-						margin-top: 20px;
-						display: inline-block;
-					}
-					.blog-content img {
-						margin-top: 20px;
-						margin-bottom: 20px;
-					}
-				`}
-			</style>
-		</div>
-	)
+          .blog-content strong {
+            margin-top: 20px;
+            display: inline-block;
+          }
+          .blog-content img {
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+        `}
+      </style>
+    </div>
+  )
 }
 
 export default function BlogPost(): ReactNode {
-	const {slug} = useParams()
+  const { slug } = useParams()
 
-	const {
-		cachedResponse: {data: cachedPosts}
-	} = useCachedNews()
-	const {posts, isLoading} = useFetchNewsroom({
-		page: 1,
-		pageSize: 1,
-		sort: 'desc',
-		populateContent: true,
-		cachePosts: true,
-		slug: slug as string,
-		skip: !!cachedPosts.find(p => p.slug === slug)
-	})
+  const {
+    cachedResponse: { data: cachedPosts },
+  } = useCachedNews()
+  const { posts, isLoading } = useFetchNewsroom({
+    page: 1,
+    pageSize: 1,
+    sort: 'desc',
+    populateContent: true,
+    cachePosts: true,
+    slug: slug as string,
+    skip: !!cachedPosts.find((p) => p.slug === slug),
+  })
 
-	const post = [...cachedPosts, ...posts].find(p => p.slug === slug)
-	const router = useRouter()
+  const post = [...cachedPosts, ...posts].find((p) => p.slug === slug)
+  const router = useRouter()
 
-	if (isLoading) {
-		return <LoadingSkeleton />
-	}
+  if (isLoading) {
+    return <LoadingSkeleton />
+  }
 
-	if (!post) {
-		notFound()
-	}
+  if (!post) {
+    notFound()
+  }
 
-	return (
-		<>
-			<article className={'prose prose-invert container relative mx-auto mb-20 mt-40 max-w-4xl px-4'}>
-				<button
-					className={'absolute -left-32 top-0 flex items-center gap-1 p-3 pt-0 text-gray-500'}
-					onClick={() => router.back()}>
-					<IconBack />
-					<span>{'Back'}</span>
-				</button>
-				<div className={'no-translate mb-8 text-gray-400'}>
-					{new Date(post.publishedAt).toLocaleDateString()}
-				</div>
+  return (
+    <>
+      <article className={'prose prose-invert container relative mx-auto mb-20 mt-40 max-w-4xl px-4'}>
+        <button
+          className={'absolute -left-32 top-0 flex items-center gap-1 p-3 pt-0 text-gray-500'}
+          onClick={() => router.back()}
+        >
+          <IconBack />
+          <span>{'Back'}</span>
+        </button>
+        <div className={'no-translate mb-8 text-gray-400'}>{new Date(post.publishedAt).toLocaleDateString()}</div>
 
-				<div className={'mb-8 flex flex-wrap gap-2'}>
-					{post.tags.map((tag: string, index: number) => (
-						<LocalizedLink
-							href={`/newsroom/tags/${tag}`}
-							className={'text-blue'}
-							key={index}>
-							{`#${tag}`}
-						</LocalizedLink>
-					))}
-				</div>
-				<h1 className={'mb-4 text-4xl font-bold'}>{post.slug.replace(/-/g, ' ')}</h1>
-				<BlogContent content={post.content} />
-			</article>
-			{!isLoading && (
-				<div className={'container mx-auto'}>
-					<Banner />
-				</div>
-			)}
-		</>
-	)
+        <div className={'mb-8 flex flex-wrap gap-2'}>
+          {post.tags.map((tag: string, index: number) => (
+            <LocalizedLink href={`/newsroom/tags/${tag}`} className={'text-blue'} key={index}>
+              {`#${tag}`}
+            </LocalizedLink>
+          ))}
+        </div>
+        <h1 className={'mb-4 text-4xl font-bold'}>{post.slug.replace(/-/g, ' ')}</h1>
+        <BlogContent content={post.content} />
+      </article>
+      {!isLoading && (
+        <div className={'container mx-auto'}>
+          <Banner />
+        </div>
+      )}
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/protocols/[slug]/page.tsx b/app/[lang]/(resources)/protocols/[slug]/page.tsx
index d291b26..92c71c2 100644
--- a/app/[lang]/(resources)/protocols/[slug]/page.tsx
+++ b/app/[lang]/(resources)/protocols/[slug]/page.tsx
@@ -1,113 +1,101 @@
 import Image from 'next/image'
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {ProtocolAbout} from '@/app/[lang]/(resources)/_components/ProtocolAbout'
-import {ProtocolEasier} from '@/app/[lang]/(resources)/_components/ProtocolEasier'
-import {ProtocolFeatures} from '@/app/[lang]/(resources)/_components/ProtocolFeatures'
-import {ProtocolHeader} from '@/app/[lang]/(resources)/_components/ProtocolHeader'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {getStrapiImageUrl, getSupportedProtocol} from '@/app/[lang]/_utils/query'
+import { ProtocolAbout } from '@/app/[lang]/(resources)/_components/ProtocolAbout'
+import { ProtocolEasier } from '@/app/[lang]/(resources)/_components/ProtocolEasier'
+import { ProtocolFeatures } from '@/app/[lang]/(resources)/_components/ProtocolFeatures'
+import { ProtocolHeader } from '@/app/[lang]/(resources)/_components/ProtocolHeader'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { getStrapiImageUrl, getSupportedProtocol } from '@/app/[lang]/_utils/query'
 
-import type {TSupportedProtocolData} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TSupportedProtocolData } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise<Metadata> {
-	const {slug} = await params
-	if (!slug) {
-		return notFound()
-	}
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params
+  if (!slug) {
+    return notFound()
+  }
 
-	const response = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?filters[slug][$eq]=${slug}&populate=*`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	)
-	const data = await response.json()
-	const protocol = data.data[0] as TSupportedProtocolData
-	if (!protocol) {
-		return notFound()
-	}
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?filters[slug][$eq]=${slug}&populate=*`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  )
+  const data = await response.json()
+  const protocol = data.data[0] as TSupportedProtocolData
+  if (!protocol) {
+    return notFound()
+  }
 
-	const imageUrl = protocol.featuredImg?.formats?.thumbnail?.url || protocol.featuredImg?.url
+  const imageUrl = protocol.featuredImg?.formats?.thumbnail?.url || protocol.featuredImg?.url
 
-	const metadata: Metadata = {
-		title: `${protocol.name} | ShapeShift`,
-		description: `Shift into ${protocol.name} with ShapeShift!`,
-		keywords: `${protocol.name}, ShapeShift`,
-		openGraph: {
-			title: protocol.name,
-			description: `Shift into ${protocol.name} with ShapeShift!`,
-			type: 'website'
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: protocol.name,
-			description: `Shift into ${protocol.name} with ShapeShift!`
-		}
-	}
+  const metadata: Metadata = {
+    title: `${protocol.name} | ShapeShift`,
+    description: `Shift into ${protocol.name} with ShapeShift!`,
+    keywords: `${protocol.name}, ShapeShift`,
+    openGraph: {
+      title: protocol.name,
+      description: `Shift into ${protocol.name} with ShapeShift!`,
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: protocol.name,
+      description: `Shift into ${protocol.name} with ShapeShift!`,
+    },
+  }
 
-	if (imageUrl) {
-		metadata.openGraph!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-		metadata.twitter!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-	}
+  if (imageUrl) {
+    metadata.openGraph!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+    metadata.twitter!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+  }
 
-	return metadata
+  return metadata
 }
 
-export default async function ProtocolPage({params}: {params: Promise<{slug: string}>}): Promise<ReactNode> {
-	const {slug} = await params
-	const protocol = await getSupportedProtocol(slug)
+export default async function ProtocolPage({ params }: { params: Promise<{ slug: string }> }): Promise<ReactNode> {
+  const { slug } = await params
+  const protocol = await getSupportedProtocol(slug)
 
-	if (!protocol) {
-		return notFound()
-	}
+  if (!protocol) {
+    return notFound()
+  }
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'absolute inset-0 -z-10 hidden lg:block'}>
-				<Image
-					src={'/heroBg.png'}
-					alt={'hero-bg'}
-					height={'2256'}
-					width={'3840'}
-					className={'object-cover'}
-				/>
-			</div>
-			<div className={'container mt-[60px] flex flex-col justify-center'}>
-				<ProtocolHeader
-					name={protocol?.name}
-					description={protocol?.description}
-					items={['Self-custodial', 'Private', 'Multichain trading']}
-					url={getStrapiImageUrl(protocol?.featuredImg?.url)}
-					width={protocol?.featuredImg?.width}
-					height={protocol?.featuredImg?.height}
-				/>
-				<ProtocolAbout
-					description={protocol?.description}
-					name={protocol?.name}
-				/>
-				<ProtocolEasier cards={protocol?.cards} />
-				<ProtocolFeatures
-					description={protocol?.collabDescription}
-					features={protocol?.features}
-				/>
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'absolute inset-0 -z-10 hidden lg:block'}>
+        <Image src={'/heroBg.png'} alt={'hero-bg'} height={'2256'} width={'3840'} className={'object-cover'} />
+      </div>
+      <div className={'container mt-[60px] flex flex-col justify-center'}>
+        <ProtocolHeader
+          name={protocol?.name}
+          description={protocol?.description}
+          items={['Self-custodial', 'Private', 'Multichain trading']}
+          url={getStrapiImageUrl(protocol?.featuredImg?.url)}
+          width={protocol?.featuredImg?.width}
+          height={protocol?.featuredImg?.height}
+        />
+        <ProtocolAbout description={protocol?.description} name={protocol?.name} />
+        <ProtocolEasier cards={protocol?.cards} />
+        <ProtocolFeatures description={protocol?.collabDescription} features={protocol?.features} />
 
-				<div className={'mb-16 mt-80'}>
-					<Banner />
-				</div>
-			</div>
-		</div>
-	)
+        <div className={'mb-16 mt-80'}>
+          <Banner />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx b/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx
index e07184a..0553049 100644
--- a/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx
+++ b/app/[lang]/(resources)/protocols/_components/ProtocolSearchWrapper.tsx
@@ -8,14 +8,14 @@
 
 'use client'
 
-import {useState} from 'react'
+import { useState } from 'react'
 
-import {SearchBar} from '@/app/[lang]/_components/SearchBar'
+import { SearchBar } from '@/app/[lang]/_components/SearchBar'
 
-import {ProtocolList} from '../../_components/ProtocolList'
+import { ProtocolList } from '../../_components/ProtocolList'
 
-import type {TSupportedProtocolData} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportedProtocolData } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 /**************************************************************************************************
  ** ProtocolSearchWrapper Component provides search functionality for protocols
@@ -27,7 +27,7 @@ import type {ReactNode} from 'react'
  ** @property {TSupportedProtocolData[]} protocols - Array of protocol data to be displayed and filtered
  *************************************************************************************************/
 type TProtocolSearchWrapperProps = {
-	protocols: TSupportedProtocolData[]
+  protocols: TSupportedProtocolData[]
 }
 
 /**************************************************************************************************
@@ -36,60 +36,49 @@ type TProtocolSearchWrapperProps = {
  ** @param {TProtocolSearchWrapperProps} props - Component props
  ** @returns {ReactNode} Rendered component
  *************************************************************************************************/
-export function ProtocolSearchWrapper({protocols}: TProtocolSearchWrapperProps): ReactNode {
-	/**********************************************************************************************
-	 ** State Management
-	 ** - filteredProtocols: protocols filtered by search query
-	 ** - searchQuery: current search input value
-	 *********************************************************************************************/
-	const [filteredProtocols, setFilteredProtocols] = useState(protocols)
-	const [searchQuery, setSearchQuery] = useState('')
+export function ProtocolSearchWrapper({ protocols }: TProtocolSearchWrapperProps): ReactNode {
+  /**********************************************************************************************
+   ** State Management
+   ** - filteredProtocols: protocols filtered by search query
+   ** - searchQuery: current search input value
+   *********************************************************************************************/
+  const [filteredProtocols, setFilteredProtocols] = useState(protocols)
+  const [searchQuery, setSearchQuery] = useState('')
 
-	/**********************************************************************************************
-	 ** Search Handler
-	 ** Filters protocols based on name matches (case-insensitive)
-	 *********************************************************************************************/
-	const handleSearch = (query: string): void => {
-		setSearchQuery(query)
-		const filtered = protocols.filter(protocol => protocol.name.toLowerCase().includes(query.toLowerCase()))
-		setFilteredProtocols(filtered)
-	}
+  /**********************************************************************************************
+   ** Search Handler
+   ** Filters protocols based on name matches (case-insensitive)
+   *********************************************************************************************/
+  const handleSearch = (query: string): void => {
+    setSearchQuery(query)
+    const filtered = protocols.filter((protocol) => protocol.name.toLowerCase().includes(query.toLowerCase()))
+    setFilteredProtocols(filtered)
+  }
 
-	/**********************************************************************************************
-	 ** Protocol Filtering
-	 ** Split protocols into featured and non-featured categories
-	 *********************************************************************************************/
-	const featuredProtocols = filteredProtocols?.filter(protocol => protocol.isFeatured)
-	const nonFeaturedProtocols = filteredProtocols?.filter(protocol => !protocol.isFeatured)
+  /**********************************************************************************************
+   ** Protocol Filtering
+   ** Split protocols into featured and non-featured categories
+   *********************************************************************************************/
+  const featuredProtocols = filteredProtocols?.filter((protocol) => protocol.isFeatured)
+  const nonFeaturedProtocols = filteredProtocols?.filter((protocol) => !protocol.isFeatured)
 
-	return (
-		<>
-			<SearchBar
-				searchQuery={searchQuery}
-				setSearchQueryAction={handleSearch}
-			/>
+  return (
+    <>
+      <SearchBar searchQuery={searchQuery} setSearchQueryAction={handleSearch} />
 
-			{/* Featured Protocols */}
-			{featuredProtocols && featuredProtocols.length > 0 && (
-				<div className={'mb-12'}>
-					<h2 className={'mb-6 text-2xl font-medium'}>{'Featured Protocols'}</h2>
-					<ProtocolList
-						protocols={featuredProtocols}
-						isSearchQuery={Boolean(searchQuery)}
-					/>
-				</div>
-			)}
+      {/* Featured Protocols */}
+      {featuredProtocols && featuredProtocols.length > 0 && (
+        <div className={'mb-12'}>
+          <h2 className={'mb-6 text-2xl font-medium'}>{'Featured Protocols'}</h2>
+          <ProtocolList protocols={featuredProtocols} isSearchQuery={Boolean(searchQuery)} />
+        </div>
+      )}
 
-			{/* Protocols grid section */}
-			<section
-				className={'mt-8'}
-				aria-label={'Supported Protocols'}>
-				<h2 className={'mb-6 text-2xl font-medium'}>{'Choose your preferred protocol'}</h2>
-				<ProtocolList
-					protocols={nonFeaturedProtocols}
-					isSearchQuery={Boolean(searchQuery)}
-				/>
-			</section>
-		</>
-	)
+      {/* Protocols grid section */}
+      <section className={'mt-8'} aria-label={'Supported Protocols'}>
+        <h2 className={'mb-6 text-2xl font-medium'}>{'Choose your preferred protocol'}</h2>
+        <ProtocolList protocols={nonFeaturedProtocols} isSearchQuery={Boolean(searchQuery)} />
+      </section>
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/protocols/layout.tsx b/app/[lang]/(resources)/protocols/layout.tsx
index 80815d7..de80644 100644
--- a/app/[lang]/(resources)/protocols/layout.tsx
+++ b/app/[lang]/(resources)/protocols/layout.tsx
@@ -1,34 +1,34 @@
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export async function generateMetadata(): Promise<Metadata> {
-	return {
-		title: 'Shift into DeFi with ShapeShift',
-		description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
-		keywords: 'ShapeShift, Supported Protocols',
-		openGraph: {
-			title: 'Shift into DeFi with ShapeShift',
-			description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
-			type: 'website',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: 'Shift into DeFi with ShapeShift',
-			description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		}
-	}
+  return {
+    title: 'Shift into DeFi with ShapeShift',
+    description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
+    keywords: 'ShapeShift, Supported Protocols',
+    openGraph: {
+      title: 'Shift into DeFi with ShapeShift',
+      description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+      type: 'website',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'Shift into DeFi with ShapeShift',
+      description: 'Discover all the protocols ShapeShift supports. Buy, sell, and swap crypto with ease.',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+  }
 }
 
-export default function Layout({children}: {children: ReactNode}): ReactNode {
-	return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+  return children
 }
diff --git a/app/[lang]/(resources)/protocols/page.tsx b/app/[lang]/(resources)/protocols/page.tsx
index 010c82b..4262dfe 100644
--- a/app/[lang]/(resources)/protocols/page.tsx
+++ b/app/[lang]/(resources)/protocols/page.tsx
@@ -15,57 +15,57 @@
  ** - Implements responsive design with Tailwind CSS
  ************************************************************************************************/
 
-import {Banner} from '@/app/[lang]/_components/Banner'
+import { Banner } from '@/app/[lang]/_components/Banner'
 
-import {ResourceHeader} from '../_components/ResourceHeader'
-import {fetchAllProtocols} from '../_utils/fetchUtils'
-import {ProtocolSearchWrapper} from './_components/ProtocolSearchWrapper'
+import { ResourceHeader } from '../_components/ResourceHeader'
+import { fetchAllProtocols } from '../_utils/fetchUtils'
+import { ProtocolSearchWrapper } from './_components/ProtocolSearchWrapper'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 // Static content for the page
 const pageContent = {
-	title: 'Shift into DeFi with ShapeShift',
-	description: 'Enter and exit top DeFi protocols in one-click with ShapeShift',
-	features: ['Multi-Chain Support', 'Non-Custodial', 'User-Friendly Interface'],
-	ctaButton: {
-		text: 'Get Started',
-		url: 'https://app.shapeshift.com/'
-	}
+  title: 'Shift into DeFi with ShapeShift',
+  description: 'Enter and exit top DeFi protocols in one-click with ShapeShift',
+  features: ['Multi-Chain Support', 'Non-Custodial', 'User-Friendly Interface'],
+  ctaButton: {
+    text: 'Get Started',
+    url: 'https://app.shapeshift.com/',
+  },
 }
 
 export default async function ProtocolsPage(): Promise<ReactNode> {
-	// Fetch protocols data
-	const protocols = await fetchAllProtocols()
+  // Fetch protocols data
+  const protocols = await fetchAllProtocols()
 
-	// Handle loading and error states
-	if (!protocols) {
-		return (
-			<div className={'mt-[120px] flex w-full justify-center text-center lg:mt-60'}>
-				<p className={'text-red-400'}>{'Unable to load protocols. Please try again later.'}</p>
-			</div>
-		)
-	}
+  // Handle loading and error states
+  if (!protocols) {
+    return (
+      <div className={'mt-[120px] flex w-full justify-center text-center lg:mt-60'}>
+        <p className={'text-red-400'}>{'Unable to load protocols. Please try again later.'}</p>
+      </div>
+    )
+  }
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container mt-[120px] flex flex-col justify-center lg:mt-60'}>
-				{/* Reusable header component */}
-				<ResourceHeader
-					title={pageContent.title}
-					description={pageContent.description}
-					items={pageContent.features}
-					ctaButton={pageContent.ctaButton}
-					className={'mb-12'}
-				/>
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container mt-[120px] flex flex-col justify-center lg:mt-60'}>
+        {/* Reusable header component */}
+        <ResourceHeader
+          title={pageContent.title}
+          description={pageContent.description}
+          items={pageContent.features}
+          ctaButton={pageContent.ctaButton}
+          className={'mb-12'}
+        />
 
-				<ProtocolSearchWrapper protocols={protocols} />
+        <ProtocolSearchWrapper protocols={protocols} />
 
-				{/* Footer banner */}
-				<div className={'my-16'}>
-					<Banner />
-				</div>
-			</div>
-		</div>
-	)
+        {/* Footer banner */}
+        <div className={'my-16'}>
+          <Banner />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/support/(withNavigation)/page.tsx b/app/[lang]/(resources)/support/(withNavigation)/page.tsx
index 9c46de7..3146a9f 100644
--- a/app/[lang]/(resources)/support/(withNavigation)/page.tsx
+++ b/app/[lang]/(resources)/support/(withNavigation)/page.tsx
@@ -18,14 +18,14 @@
 
 'use client'
 
-import {SupportArticleList} from '../../_components/SupportArticleList'
+import { SupportArticleList } from '../../_components/SupportArticleList'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function SupportListPage(): ReactNode {
-	return (
-		<>
-			<SupportArticleList emptyMessage={"We couldn't find any support articles matching your criteria."} />
-		</>
-	)
+  return (
+    <>
+      <SupportArticleList emptyMessage={"We couldn't find any support articles matching your criteria."} />
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/support/[slug]/SupportArticleContent.tsx b/app/[lang]/(resources)/support/[slug]/SupportArticleContent.tsx
index 271de8e..1d87b15 100644
--- a/app/[lang]/(resources)/support/[slug]/SupportArticleContent.tsx
+++ b/app/[lang]/(resources)/support/[slug]/SupportArticleContent.tsx
@@ -5,212 +5,161 @@ import rehypeHighlight from 'rehype-highlight'
 import remarkEmoji from 'remark-emoji'
 import remarkGfm from 'remark-gfm'
 
-import {isHtml} from '@/app/[lang]/_utils/isHtml'
-
-import type {ReactNode} from 'react'
-
-export function SupportArticleContent({content}: {content: string}): ReactNode {
-	return (
-		<div className={'support-content prose prose-invert max-w-none'}>
-			{isHtml(content) ? (
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				<div dangerouslySetInnerHTML={{__html: content}} />
-			) : (
-				<ReactMarkdown
-					remarkPlugins={[remarkGfm, remarkEmoji]}
-					rehypePlugins={[rehypeHighlight]}
-					components={{
-						// Headers
-						h1: ({...props}) => (
-							<h1
-								className={'mb-4 mt-8 text-4xl font-bold'}
-								{...props}
-							/>
-						),
-						h2: ({...props}) => (
-							<h2
-								className={'mb-3 mt-6 text-3xl font-bold'}
-								{...props}
-							/>
-						),
-						h3: ({...props}) => (
-							<h3
-								className={'mb-2 mt-4 text-2xl font-bold'}
-								{...props}
-							/>
-						),
-
-						// Code blocks
-						code: ({className, children, ...props}) => {
-							const match = /language-(\w+)/.exec(className || '')
-							return match ? (
-								<div className={'relative'}>
-									<div className={'absolute right-2 top-2 text-xs text-gray-400'}>{match[1]}</div>
-									<pre className={className}>
-										<code
-											className={className}
-											{...props}>
-											{children}
-										</code>
-									</pre>
-								</div>
-							) : (
-								<code
-									className={'rounded bg-gray-800 px-1.5 py-0.5'}
-									{...props}>
-									{children}
-								</code>
-							)
-						},
-
-						// Tables
-						table: ({...props}) => (
-							<div className={'my-8 overflow-x-auto'}>
-								<table
-									className={'min-w-full'}
-									{...props}
-								/>
-							</div>
-						),
-						th: ({...props}) => (
-							<th
-								className={'bg-gray-800 px-6 py-3 text-left'}
-								{...props}
-							/>
-						),
-						td: ({...props}) => (
-							<td
-								className={'border-t border-gray-700 px-6 py-4'}
-								{...props}
-							/>
-						),
-
-						// Images
-						img: ({...props}) => (
-							<Image
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								width={1200}
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore
-								height={1200}
-								className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
-								loading={'lazy'}
-								{...props}
-							/>
-						),
-
-						// Blockquotes
-						blockquote: ({...props}) => (
-							<blockquote
-								className={'border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'}
-								{...props}
-							/>
-						),
-
-						// Lists
-						ul: ({...props}) => (
-							<ul
-								className={'my-4 list-inside list-disc'}
-								{...props}
-							/>
-						),
-						ol: ({...props}) => (
-							<ol
-								className={'my-4 list-inside list-decimal'}
-								{...props}
-							/>
-						),
-
-						// Links
-						a: ({...props}) => (
-							<a
-								className={'text-blue underline transition-colors hover:text-blueHover'}
-								target={'_blank'}
-								rel={'noopener noreferrer'}
-								{...props}
-							/>
-						),
-						p: ({...props}) => (
-							<p
-								className={'mb-4'}
-								{...props}
-							/>
-						)
-					}}>
-					{content}
-				</ReactMarkdown>
-			)}
-
-			<style
-				jsx
-				global>
-				{`
-					.support-content {
-						/* Base styles */
-						font-size: 1.125rem;
-						line-height: 1.75;
-						color: #e5e7eb;
-					}
-
-					/* Code blocks */
-					.support-content pre {
-						background-color: #1f2937;
-						padding: 1.5rem;
-						border-radius: 0.5rem;
-						overflow-x: auto;
-						margin: 1.5rem 0;
-						position: relative;
-					}
-
-					/* Footnotes */
-					.support-content .footnotes {
-						border-top: 1px solid #374151;
-						margin-top: 2rem;
-						padding-top: 1rem;
-					}
-
-					.support-content .footnotes ol {
-						font-size: 0.875rem;
-					}
-
-					/* Definition lists */
-					.support-content dl {
-						margin: 1.5rem 0;
-					}
-
-					.support-content dt {
-						font-weight: bold;
-						margin-top: 1rem;
-					}
-
-					.support-content dd {
-						margin-left: 1.5rem;
-					}
-
-					/* Custom containers */
-					.support-content .warning {
-						background-color: #fef3c7;
-						border-left: 4px solid #f59e0b;
-						padding: 1rem;
-						margin: 1.5rem 0;
-						color: #92400e;
-					}
-
-					.support-content p {
-						margin-bottom: 16px;
-					}
-
-					.support-content strong {
-						margin-top: 20px;
-						display: inline-block;
-					}
-					.support-content img {
-						margin-top: 20px;
-						margin-bottom: 20px;
-					}
-				`}
-			</style>
-		</div>
-	)
+import { isHtml } from '@/app/[lang]/_utils/isHtml'
+
+import type { ReactNode } from 'react'
+
+export function SupportArticleContent({ content }: { content: string }): ReactNode {
+  return (
+    <div className={'support-content prose prose-invert max-w-none'}>
+      {isHtml(content) ? (
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+      ) : (
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkEmoji]}
+          rehypePlugins={[rehypeHighlight]}
+          components={{
+            // Headers
+            h1: ({ ...props }) => <h1 className={'mb-4 mt-8 text-4xl font-bold'} {...props} />,
+            h2: ({ ...props }) => <h2 className={'mb-3 mt-6 text-3xl font-bold'} {...props} />,
+            h3: ({ ...props }) => <h3 className={'mb-2 mt-4 text-2xl font-bold'} {...props} />,
+
+            // Code blocks
+            code: ({ className, children, ...props }) => {
+              const match = /language-(\w+)/.exec(className || '')
+              return match ? (
+                <div className={'relative'}>
+                  <div className={'absolute right-2 top-2 text-xs text-gray-400'}>{match[1]}</div>
+                  <pre className={className}>
+                    <code className={className} {...props}>
+                      {children}
+                    </code>
+                  </pre>
+                </div>
+              ) : (
+                <code className={'rounded bg-gray-800 px-1.5 py-0.5'} {...props}>
+                  {children}
+                </code>
+              )
+            },
+
+            // Tables
+            table: ({ ...props }) => (
+              <div className={'my-8 overflow-x-auto'}>
+                <table className={'min-w-full'} {...props} />
+              </div>
+            ),
+            th: ({ ...props }) => <th className={'bg-gray-800 px-6 py-3 text-left'} {...props} />,
+            td: ({ ...props }) => <td className={'border-t border-gray-700 px-6 py-4'} {...props} />,
+
+            // Images
+            img: ({ ...props }) => (
+              <Image
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                width={1200}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                height={1200}
+                className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
+                loading={'lazy'}
+                {...props}
+              />
+            ),
+
+            // Blockquotes
+            blockquote: ({ ...props }) => (
+              <blockquote className={'border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'} {...props} />
+            ),
+
+            // Lists
+            ul: ({ ...props }) => <ul className={'my-4 list-inside list-disc'} {...props} />,
+            ol: ({ ...props }) => <ol className={'my-4 list-inside list-decimal'} {...props} />,
+
+            // Links
+            a: ({ ...props }) => (
+              <a
+                className={'text-blue underline transition-colors hover:text-blueHover'}
+                target={'_blank'}
+                rel={'noopener noreferrer'}
+                {...props}
+              />
+            ),
+            p: ({ ...props }) => <p className={'mb-4'} {...props} />,
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      )}
+
+      <style jsx global>
+        {`
+          .support-content {
+            /* Base styles */
+            font-size: 1.125rem;
+            line-height: 1.75;
+            color: #e5e7eb;
+          }
+
+          /* Code blocks */
+          .support-content pre {
+            background-color: #1f2937;
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            margin: 1.5rem 0;
+            position: relative;
+          }
+
+          /* Footnotes */
+          .support-content .footnotes {
+            border-top: 1px solid #374151;
+            margin-top: 2rem;
+            padding-top: 1rem;
+          }
+
+          .support-content .footnotes ol {
+            font-size: 0.875rem;
+          }
+
+          /* Definition lists */
+          .support-content dl {
+            margin: 1.5rem 0;
+          }
+
+          .support-content dt {
+            font-weight: bold;
+            margin-top: 1rem;
+          }
+
+          .support-content dd {
+            margin-left: 1.5rem;
+          }
+
+          /* Custom containers */
+          .support-content .warning {
+            background-color: #fef3c7;
+            border-left: 4px solid #f59e0b;
+            padding: 1rem;
+            margin: 1.5rem 0;
+            color: #92400e;
+          }
+
+          .support-content p {
+            margin-bottom: 16px;
+          }
+
+          .support-content strong {
+            margin-top: 20px;
+            display: inline-block;
+          }
+          .support-content img {
+            margin-top: 20px;
+            margin-bottom: 20px;
+          }
+        `}
+      </style>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/support/[slug]/page.tsx b/app/[lang]/(resources)/support/[slug]/page.tsx
index 3f007ad..f2e7f68 100644
--- a/app/[lang]/(resources)/support/[slug]/page.tsx
+++ b/app/[lang]/(resources)/support/[slug]/page.tsx
@@ -1,90 +1,89 @@
 'use client'
 
 import 'highlight.js/styles/github-dark.css'
-import {notFound, useParams, useRouter} from 'next/navigation'
+import { notFound, useParams, useRouter } from 'next/navigation'
 import Script from 'next/script'
 
-import {SupportArticleContent} from '@/app/[lang]/(resources)/support/[slug]/SupportArticleContent'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {useCachedArticles} from '@/app/[lang]/_contexts/CachedArticlesContext'
-import {useFetchSupportArticles} from '@/app/[lang]/_hooks/useFetchSupportArticles'
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {generateSupportArticleSchema} from '@/app/[lang]/_utils/schema'
+import { SupportArticleContent } from '@/app/[lang]/(resources)/support/[slug]/SupportArticleContent'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { useCachedArticles } from '@/app/[lang]/_contexts/CachedArticlesContext'
+import { useFetchSupportArticles } from '@/app/[lang]/_hooks/useFetchSupportArticles'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { generateSupportArticleSchema } from '@/app/[lang]/_utils/schema'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 function LoadingSkeleton(): ReactNode {
-	return (
-		<div className={'animate-pulse'}>
-			<div className={'mb-4 h-8 w-3/4 rounded bg-gray-800'} />
-			<div className={'mb-8 h-64 rounded bg-gray-800'} />
-			<div className={'space-y-4'}>
-				<div className={'h-4 w-full rounded bg-gray-800'} />
-				<div className={'h-4 w-5/6 rounded bg-gray-800'} />
-				<div className={'h-4 w-4/6 rounded bg-gray-800'} />
-			</div>
-		</div>
-	)
+  return (
+    <div className={'animate-pulse'}>
+      <div className={'mb-4 h-8 w-3/4 rounded bg-gray-800'} />
+      <div className={'mb-8 h-64 rounded bg-gray-800'} />
+      <div className={'space-y-4'}>
+        <div className={'h-4 w-full rounded bg-gray-800'} />
+        <div className={'h-4 w-5/6 rounded bg-gray-800'} />
+        <div className={'h-4 w-4/6 rounded bg-gray-800'} />
+      </div>
+    </div>
+  )
 }
 
 export default function SupportArticle(): ReactNode {
-	const {slug} = useParams()
-	const {
-		cachedResponse: {data: cachedArticles}
-	} = useCachedArticles()
-	const {articles, isLoading} = useFetchSupportArticles({
-		page: 1,
-		pageSize: 1,
-		sort: 'desc',
-		populateContent: true,
-		cacheArticles: true,
-		slug: slug as string
-	})
+  const { slug } = useParams()
+  const {
+    cachedResponse: { data: cachedArticles },
+  } = useCachedArticles()
+  const { articles, isLoading } = useFetchSupportArticles({
+    page: 1,
+    pageSize: 1,
+    sort: 'desc',
+    populateContent: true,
+    cacheArticles: true,
+    slug: slug as string,
+  })
 
-	const article = [...cachedArticles, ...articles].find(a => a.slug === slug)
-	const router = useRouter()
+  const article = [...cachedArticles, ...articles].find((a) => a.slug === slug)
+  const router = useRouter()
 
-	if (isLoading) {
-		return <LoadingSkeleton />
-	}
+  if (isLoading) {
+    return <LoadingSkeleton />
+  }
 
-	if (!article) {
-		notFound()
-	}
+  if (!article) {
+    notFound()
+  }
 
-	// Generate structured data for the support article
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
-	const articleSchema = generateSupportArticleSchema(article, baseUrl)
+  // Generate structured data for the support article
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+  const articleSchema = generateSupportArticleSchema(article, baseUrl)
 
-	return (
-		<>
-			{/* Add structured data */}
-			<Script
-				id={'support-article-schema'}
-				type={'application/ld+json'}
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				dangerouslySetInnerHTML={{__html: JSON.stringify(articleSchema)}}
-			/>
+  return (
+    <>
+      {/* Add structured data */}
+      <Script
+        id={'support-article-schema'}
+        type={'application/ld+json'}
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
+      />
 
-			<article className={'prose prose-invert container relative mx-auto mb-20 mt-40 max-w-4xl px-4'}>
-				<button
-					className={'absolute -left-32 top-0 flex items-center gap-1 p-3 pt-0 text-gray-500'}
-					onClick={() => router.back()}>
-					<IconBack />
-					<span>{'Back'}</span>
-				</button>
-				<div className={'no-translate mb-8 text-gray-400'}>
-					{new Date(article.publishedAt).toLocaleDateString()}
-				</div>
+      <article className={'prose prose-invert container relative mx-auto mb-20 mt-40 max-w-4xl px-4'}>
+        <button
+          className={'absolute -left-32 top-0 flex items-center gap-1 p-3 pt-0 text-gray-500'}
+          onClick={() => router.back()}
+        >
+          <IconBack />
+          <span>{'Back'}</span>
+        </button>
+        <div className={'no-translate mb-8 text-gray-400'}>{new Date(article.publishedAt).toLocaleDateString()}</div>
 
-				<h1 className={'mb-4 text-4xl font-bold'}>{article.title}</h1>
-				<SupportArticleContent content={article.content} />
-			</article>
-			{!isLoading && (
-				<div className={'container mx-auto'}>
-					<Banner />
-				</div>
-			)}
-		</>
-	)
+        <h1 className={'mb-4 text-4xl font-bold'}>{article.title}</h1>
+        <SupportArticleContent content={article.content} />
+      </article>
+      {!isLoading && (
+        <div className={'container mx-auto'}>
+          <Banner />
+        </div>
+      )}
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/wallets/[slug]/page.tsx b/app/[lang]/(resources)/wallets/[slug]/page.tsx
index 0a45ee5..0da655b 100644
--- a/app/[lang]/(resources)/wallets/[slug]/page.tsx
+++ b/app/[lang]/(resources)/wallets/[slug]/page.tsx
@@ -1,102 +1,102 @@
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {SupportedWalletAccelerate} from '@/app/[lang]/(resources)/_components/SupportedWalletAccelerate'
-import {SupportedWalletHeader} from '@/app/[lang]/(resources)/_components/SupportedWalletHeader'
-import {SupportedWalletHero} from '@/app/[lang]/(resources)/_components/SupportedWalletHero'
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {StrapiFAQ} from '@/app/[lang]/_components/StrapiFAQ'
-import {getStrapiImageUrl, getSupportedWallet} from '@/app/[lang]/_utils/query'
+import { SupportedWalletAccelerate } from '@/app/[lang]/(resources)/_components/SupportedWalletAccelerate'
+import { SupportedWalletHeader } from '@/app/[lang]/(resources)/_components/SupportedWalletHeader'
+import { SupportedWalletHero } from '@/app/[lang]/(resources)/_components/SupportedWalletHero'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { StrapiFAQ } from '@/app/[lang]/_components/StrapiFAQ'
+import { getStrapiImageUrl, getSupportedWallet } from '@/app/[lang]/_utils/query'
 
-import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TSupportedWalletData } from '@/app/[lang]/_components/strapi/types'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
-export async function generateMetadata({params}: {params: Promise<{slug: string}>}): Promise<Metadata> {
-	const {slug} = await params
-	if (!slug) {
-		return notFound()
-	}
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params
+  if (!slug) {
+    return notFound()
+  }
 
-	const response = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?filters[slug][$eq]=${slug}&populate=*`,
-		{
-			headers: {
-				Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-			}
-		}
-	)
-	const data = await response.json()
-	const wallet = data.data[0] as TSupportedWalletData
-	if (!wallet) {
-		return notFound()
-	}
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?filters[slug][$eq]=${slug}&populate=*`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+      },
+    }
+  )
+  const data = await response.json()
+  const wallet = data.data[0] as TSupportedWalletData
+  if (!wallet) {
+    return notFound()
+  }
 
-	const imageUrl = wallet.featuredImg?.formats?.thumbnail?.url || wallet.featuredImg?.url
-	const metadata: Metadata = {
-		title: `${wallet.name} | ShapeShift Wallets`,
-		description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
-		keywords: `${wallet.name}, ShapeShift`,
-		openGraph: {
-			title: wallet.name,
-			description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
-			type: 'website'
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: wallet.name,
-			description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`
-		}
-	}
+  const imageUrl = wallet.featuredImg?.formats?.thumbnail?.url || wallet.featuredImg?.url
+  const metadata: Metadata = {
+    title: `${wallet.name} | ShapeShift Wallets`,
+    description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
+    keywords: `${wallet.name}, ShapeShift`,
+    openGraph: {
+      title: wallet.name,
+      description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
+      type: 'website',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: wallet.name,
+      description: `ShapeShift supports ${wallet.name}! Use it now to buy, sell, and swap crypto.`,
+    },
+  }
 
-	if (imageUrl) {
-		metadata.openGraph!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-		metadata.twitter!.images = [
-			{
-				url: getStrapiImageUrl(imageUrl)
-			}
-		]
-	}
+  if (imageUrl) {
+    metadata.openGraph!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+    metadata.twitter!.images = [
+      {
+        url: getStrapiImageUrl(imageUrl),
+      },
+    ]
+  }
 
-	return metadata
+  return metadata
 }
 
-export default async function WalletPage({params}: {params: Promise<{slug: string}>}): Promise<ReactNode> {
-	const {slug} = await params
-	const wallet = await getSupportedWallet(slug)
+export default async function WalletPage({ params }: { params: Promise<{ slug: string }> }): Promise<ReactNode> {
+  const { slug } = await params
+  const wallet = await getSupportedWallet(slug)
 
-	if (!wallet) {
-		return notFound()
-	}
+  if (!wallet) {
+    return notFound()
+  }
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container mt-[60px] flex flex-col justify-center'}>
-				<div className={'mb-12'}>
-					<SupportedWalletHero
-						url={getStrapiImageUrl(wallet?.featuredImg?.url)}
-						name={wallet?.name}
-						width={wallet?.featuredImg?.width}
-						height={wallet?.featuredImg?.height}
-					/>
-				</div>
-				<SupportedWalletHeader
-					title={wallet?.name}
-					description={wallet?.description}
-					items={['Self-custodial', 'Private', 'Multichain trading']}
-				/>
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container mt-[60px] flex flex-col justify-center'}>
+        <div className={'mb-12'}>
+          <SupportedWalletHero
+            url={getStrapiImageUrl(wallet?.featuredImg?.url)}
+            name={wallet?.name}
+            width={wallet?.featuredImg?.width}
+            height={wallet?.featuredImg?.height}
+          />
+        </div>
+        <SupportedWalletHeader
+          title={wallet?.name}
+          description={wallet?.description}
+          items={['Self-custodial', 'Private', 'Multichain trading']}
+        />
 
-				<SupportedWalletAccelerate />
+        <SupportedWalletAccelerate />
 
-				<StrapiFAQ />
+        <StrapiFAQ />
 
-				<div className={'my-16'}>
-					<Banner />
-				</div>
-			</div>
-		</div>
-	)
+        <div className={'my-16'}>
+          <Banner />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx b/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx
index 3b01e99..a8906ab 100644
--- a/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx
+++ b/app/[lang]/(resources)/wallets/_components/WalletSearchWrapper.tsx
@@ -1,59 +1,48 @@
 'use client'
 
-import {useState} from 'react'
+import { useState } from 'react'
 
-import {SearchBar} from '@/app/[lang]/_components/SearchBar'
+import { SearchBar } from '@/app/[lang]/_components/SearchBar'
 
-import {WalletList} from '../../_components/WalletList'
+import { WalletList } from '../../_components/WalletList'
 
-import type {TSupportedWalletData} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TSupportedWalletData } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TWalletSearchWrapperProps = {
-	wallets: TSupportedWalletData[]
+  wallets: TSupportedWalletData[]
 }
 
-export function WalletSearchWrapper({wallets}: TWalletSearchWrapperProps): ReactNode {
-	const [filteredWallets, setFilteredWallets] = useState(wallets)
-	const [searchQuery, setSearchQuery] = useState('')
-
-	const handleSearch = (query: string): void => {
-		setSearchQuery(query)
-		const filtered = wallets.filter(wallet => wallet.name.toLowerCase().includes(query.toLowerCase()))
-		setFilteredWallets(filtered)
-	}
-
-	const featuredWallets = filteredWallets?.filter(wallet => wallet.isFeatured)
-	const nonFeaturedWallets = filteredWallets?.filter(wallet => !wallet.isFeatured)
-
-	return (
-		<>
-			<SearchBar
-				searchQuery={searchQuery}
-				setSearchQueryAction={handleSearch}
-			/>
-
-			{/* Featured Wallets */}
-			{featuredWallets && featuredWallets.length > 0 && (
-				<div className={'mb-12'}>
-					<h2 className={'mb-6 text-2xl font-medium'}>{'Featured Wallets'}</h2>
-					<WalletList
-						wallets={featuredWallets}
-						isSearchQuery={!!searchQuery}
-					/>
-				</div>
-			)}
-
-			{/* Wallets grid section */}
-			<section
-				className={'mt-8'}
-				aria-label={'Supported Wallets'}>
-				<h2 className={'mb-6 text-2xl font-medium'}>{'Choose your preferred wallet'}</h2>
-				<WalletList
-					wallets={nonFeaturedWallets}
-					isSearchQuery={!!searchQuery}
-				/>
-			</section>
-		</>
-	)
+export function WalletSearchWrapper({ wallets }: TWalletSearchWrapperProps): ReactNode {
+  const [filteredWallets, setFilteredWallets] = useState(wallets)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const handleSearch = (query: string): void => {
+    setSearchQuery(query)
+    const filtered = wallets.filter((wallet) => wallet.name.toLowerCase().includes(query.toLowerCase()))
+    setFilteredWallets(filtered)
+  }
+
+  const featuredWallets = filteredWallets?.filter((wallet) => wallet.isFeatured)
+  const nonFeaturedWallets = filteredWallets?.filter((wallet) => !wallet.isFeatured)
+
+  return (
+    <>
+      <SearchBar searchQuery={searchQuery} setSearchQueryAction={handleSearch} />
+
+      {/* Featured Wallets */}
+      {featuredWallets && featuredWallets.length > 0 && (
+        <div className={'mb-12'}>
+          <h2 className={'mb-6 text-2xl font-medium'}>{'Featured Wallets'}</h2>
+          <WalletList wallets={featuredWallets} isSearchQuery={!!searchQuery} />
+        </div>
+      )}
+
+      {/* Wallets grid section */}
+      <section className={'mt-8'} aria-label={'Supported Wallets'}>
+        <h2 className={'mb-6 text-2xl font-medium'}>{'Choose your preferred wallet'}</h2>
+        <WalletList wallets={nonFeaturedWallets} isSearchQuery={!!searchQuery} />
+      </section>
+    </>
+  )
 }
diff --git a/app/[lang]/(resources)/wallets/layout.tsx b/app/[lang]/(resources)/wallets/layout.tsx
index 557bbdd..6ec5802 100644
--- a/app/[lang]/(resources)/wallets/layout.tsx
+++ b/app/[lang]/(resources)/wallets/layout.tsx
@@ -1,34 +1,34 @@
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export async function generateMetadata(): Promise<Metadata> {
-	return {
-		title: 'ShapeShift Supported Wallets',
-		description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
-		keywords: 'ShapeShift, Supported Wallets',
-		openGraph: {
-			title: 'ShapeShift Supported Wallets',
-			description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
-			type: 'website',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		},
-		twitter: {
-			card: 'summary_large_image',
-			title: 'ShapeShift Supported Wallets',
-			description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
-			images: [
-				{
-					url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`
-				}
-			]
-		}
-	}
+  return {
+    title: 'ShapeShift Supported Wallets',
+    description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+    keywords: 'ShapeShift, Supported Wallets',
+    openGraph: {
+      title: 'ShapeShift Supported Wallets',
+      description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+      type: 'website',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'ShapeShift Supported Wallets',
+      description: 'Discover all the wallets ShapeShift supports. Buy, sell, and swap crypto with ease.',
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_STRAPI_URL}/og.png`,
+        },
+      ],
+    },
+  }
 }
 
-export default function Layout({children}: {children: ReactNode}): ReactNode {
-	return children
+export default function Layout({ children }: { children: ReactNode }): ReactNode {
+  return children
 }
diff --git a/app/[lang]/(resources)/wallets/page.tsx b/app/[lang]/(resources)/wallets/page.tsx
index 9762ca8..d2de75c 100644
--- a/app/[lang]/(resources)/wallets/page.tsx
+++ b/app/[lang]/(resources)/wallets/page.tsx
@@ -16,79 +16,79 @@
  ** - Implements descriptive section headings for better accessibility
  ************************************************************************************************/
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {WalletRequestCard} from '@/app/[lang]/_components/WalletRequestCard'
-import {requestUrl} from '@/app/[lang]/_utils/constants'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { WalletRequestCard } from '@/app/[lang]/_components/WalletRequestCard'
+import { requestUrl } from '@/app/[lang]/_utils/constants'
 
-import {ResourceHeader} from '../_components/ResourceHeader'
-import {fetchAllWallets} from '../_utils/fetchUtils'
-import {WalletSearchWrapper} from './_components/WalletSearchWrapper'
+import { ResourceHeader } from '../_components/ResourceHeader'
+import { fetchAllWallets } from '../_utils/fetchUtils'
+import { WalletSearchWrapper } from './_components/WalletSearchWrapper'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 // Static content for the page
 const pageContent = {
-	title: 'Bring your own wallet',
-	description:
-		'Connect your favorite self-custody wallet to access the full ShapeShift platform and all supported chains.',
-	features: ['Non-Custodial', 'Multi-Provider Support', 'Enhanced Privacy'],
-	ctaButton: {
-		text: 'Get Started',
-		url: 'https://app.shapeshift.com/'
-	}
+  title: 'Bring your own wallet',
+  description:
+    'Connect your favorite self-custody wallet to access the full ShapeShift platform and all supported chains.',
+  features: ['Non-Custodial', 'Multi-Provider Support', 'Enhanced Privacy'],
+  ctaButton: {
+    text: 'Get Started',
+    url: 'https://app.shapeshift.com/',
+  },
 }
 
 export default async function WalletPage(): Promise<ReactNode> {
-	// Fetch wallets data
-	const wallets = await fetchAllWallets()
+  // Fetch wallets data
+  const wallets = await fetchAllWallets()
 
-	// Handle loading and error states
-	if (!wallets) {
-		return (
-			<div className={'mt-[120px] flex w-full justify-center text-center lg:mt-60'}>
-				<p className={'text-red-400'}>{'Unable to load wallet data. Please try again later.'}</p>
-			</div>
-		)
-	}
+  // Handle loading and error states
+  if (!wallets) {
+    return (
+      <div className={'mt-[120px] flex w-full justify-center text-center lg:mt-60'}>
+        <p className={'text-red-400'}>{'Unable to load wallet data. Please try again later.'}</p>
+      </div>
+    )
+  }
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container mt-[120px] flex flex-col justify-center lg:mt-60'}>
-				{/* Reusable header component */}
-				<ResourceHeader
-					title={pageContent.title}
-					description={pageContent.description}
-					items={pageContent.features}
-					ctaButton={pageContent.ctaButton}
-					className={'mb-12'}
-				/>
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container mt-[120px] flex flex-col justify-center lg:mt-60'}>
+        {/* Reusable header component */}
+        <ResourceHeader
+          title={pageContent.title}
+          description={pageContent.description}
+          items={pageContent.features}
+          ctaButton={pageContent.ctaButton}
+          className={'mb-12'}
+        />
 
-				<WalletSearchWrapper wallets={wallets} />
+        <WalletSearchWrapper wallets={wallets} />
 
-				<div className={'flex w-full justify-center'}>
-					<div className={'my-16 grid h-[1000px] grid-cols-1 gap-4 lg:h-[480px] lg:grid-cols-2'}>
-						<WalletRequestCard
-							title={"Don't see your wallet? Request it here"}
-							buttonTitle={'Request wallet'}
-							buttonHref={requestUrl}
-							bgImage={'/request-card-bg.png'}
-						/>
+        <div className={'flex w-full justify-center'}>
+          <div className={'my-16 grid h-[1000px] grid-cols-1 gap-4 lg:h-[480px] lg:grid-cols-2'}>
+            <WalletRequestCard
+              title={"Don't see your wallet? Request it here"}
+              buttonTitle={'Request wallet'}
+              buttonHref={requestUrl}
+              bgImage={'/request-card-bg.png'}
+            />
 
-						<WalletRequestCard
-							title={'Or create a new ShapeShift wallet'}
-							buttonTitle={'Create wallet'}
-							buttonHref={'/defi-wallet'}
-							bgImage={'/create-wallet-bg.png'}
-							buttonVariant={'blue'}
-						/>
-					</div>
-				</div>
+            <WalletRequestCard
+              title={'Or create a new ShapeShift wallet'}
+              buttonTitle={'Create wallet'}
+              buttonHref={'/defi-wallet'}
+              bgImage={'/create-wallet-bg.png'}
+              buttonVariant={'blue'}
+            />
+          </div>
+        </div>
 
-				{/* Footer banner */}
-				<div className={'my-16'}>
-					<Banner />
-				</div>
-			</div>
-		</div>
-	)
+        {/* Footer banner */}
+        <div className={'my-16'}>
+          <Banner />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/(terms)/_components/TermsAccordion.tsx b/app/[lang]/(terms)/_components/TermsAccordion.tsx
index 6ca36fe..b8156e4 100644
--- a/app/[lang]/(terms)/_components/TermsAccordion.tsx
+++ b/app/[lang]/(terms)/_components/TermsAccordion.tsx
@@ -8,94 +8,97 @@
  **************************************************************************************************/
 'use client'
 
-import {AnimatePresence, motion} from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import 'highlight.js/styles/github-dark.css'
-import {memo, useCallback, useState} from 'react'
+import { memo, useCallback, useState } from 'react'
 
 import TermsMarkdown from '@/app/[lang]/(terms)/_components/TermsMarkdown'
-import {AnimatedPlusMinusIcon} from '@/app/[lang]/_components/QuestionSection'
+import { AnimatedPlusMinusIcon } from '@/app/[lang]/_components/QuestionSection'
 
-import type {KeyboardEvent, ReactNode} from 'react'
+import type { KeyboardEvent, ReactNode } from 'react'
 
 export type TTermsItemData = {
-	id: number
-	title: string
-	date: string
-	content: string
+  id: number
+  title: string
+  date: string
+  content: string
 }
 
 type TTermsAccordionProps = {
-	item: TTermsItemData
+  item: TTermsItemData
 }
 
 /**************************************************************************************************
  * TermsAccordion component
  **************************************************************************************************/
-function TermsAccordion({item}: TTermsAccordionProps): ReactNode {
-	const [isOpen, setIsOpen] = useState(false)
+function TermsAccordion({ item }: TTermsAccordionProps): ReactNode {
+  const [isOpen, setIsOpen] = useState(false)
 
-	const handleToggle = useCallback(() => {
-		setIsOpen(prevState => !prevState)
-	}, [])
+  const handleToggle = useCallback(() => {
+    setIsOpen((prevState) => !prevState)
+  }, [])
 
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent<HTMLDivElement>) => {
-			if (event.key === 'Enter' || event.key === ' ') {
-				event.preventDefault()
-				handleToggle()
-			}
-		},
-		[handleToggle]
-	)
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+        handleToggle()
+      }
+    },
+    [handleToggle]
+  )
 
-	return (
-		<div className={'group rounded-2xl bg-secondBg hover:bg-secondHoverBg'}>
-			<div
-				className={'flex cursor-pointer items-center justify-between px-10 py-8'}
-				onClick={handleToggle}
-				onKeyDown={handleKeyDown}
-				role={'button'}
-				tabIndex={0}
-				aria-expanded={isOpen}
-				aria-controls={`content-${item.id}`}>
-				<div className={'flex flex-col gap-2 text-2xl'}>
-					<span className={'font-bold'}>{item.title}</span>
-					<span className={'no-translate text-sm text-gray-500'}>
-						{new Date(item.date).toLocaleDateString(undefined, {
-							year: 'numeric',
-							month: 'long',
-							day: 'numeric'
-						})}
-					</span>
-				</div>
-				<div
-					className={
-						'flex size-12 min-w-[48px] items-center justify-center rounded-full bg-white/10 transition-all duration-300 group-hover:scale-[1.16] group-hover:bg-blueHover'
-					}
-					aria-hidden={'true'}>
-					<AnimatedPlusMinusIcon isOpen={isOpen} />
-				</div>
-			</div>
-			<AnimatePresence>
-				{isOpen && (
-					<motion.div
-						id={`content-${item.id}`}
-						initial={{height: 0, opacity: 0}}
-						animate={{height: 'auto', opacity: 1}}
-						exit={{height: 0, opacity: 0}}
-						transition={{
-							duration: 0.3,
-							ease: 'easeInOut'
-						}}
-						className={'overflow-hidden'}>
-						<div className={'no-translate rounded-2xl px-10 pb-6 text-gray-500'}>
-							<TermsMarkdown content={item.content} />
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
-		</div>
-	)
+  return (
+    <div className={'group rounded-2xl bg-secondBg hover:bg-secondHoverBg'}>
+      <div
+        className={'flex cursor-pointer items-center justify-between px-10 py-8'}
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+        role={'button'}
+        tabIndex={0}
+        aria-expanded={isOpen}
+        aria-controls={`content-${item.id}`}
+      >
+        <div className={'flex flex-col gap-2 text-2xl'}>
+          <span className={'font-bold'}>{item.title}</span>
+          <span className={'no-translate text-sm text-gray-500'}>
+            {new Date(item.date).toLocaleDateString(undefined, {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </span>
+        </div>
+        <div
+          className={
+            'flex size-12 min-w-[48px] items-center justify-center rounded-full bg-white/10 transition-all duration-300 group-hover:scale-[1.16] group-hover:bg-blueHover'
+          }
+          aria-hidden={'true'}
+        >
+          <AnimatedPlusMinusIcon isOpen={isOpen} />
+        </div>
+      </div>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            id={`content-${item.id}`}
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{
+              duration: 0.3,
+              ease: 'easeInOut',
+            }}
+            className={'overflow-hidden'}
+          >
+            <div className={'no-translate rounded-2xl px-10 pb-6 text-gray-500'}>
+              <TermsMarkdown content={item.content} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
 }
 
 export default memo(TermsAccordion)
diff --git a/app/[lang]/(terms)/_components/TermsMarkdown.tsx b/app/[lang]/(terms)/_components/TermsMarkdown.tsx
index 723a4f6..0b8e0e8 100644
--- a/app/[lang]/(terms)/_components/TermsMarkdown.tsx
+++ b/app/[lang]/(terms)/_components/TermsMarkdown.tsx
@@ -10,185 +10,129 @@
 
 import 'highlight.js/styles/github-dark.css'
 import Image from 'next/image'
-import {memo} from 'react'
+import { memo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import rehypeHighlight from 'rehype-highlight'
 import remarkEmoji from 'remark-emoji'
 import remarkGfm from 'remark-gfm'
 
-import type {ComponentProps, ReactNode} from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 type TTermsMarkdownProps = {
-	content: string
+  content: string
 }
 
 /**************************************************************************************************
  * Helper function to check if content is HTML
  **************************************************************************************************/
 function isHtmlContent(content: string): boolean {
-	return /<\/?(?:div|span|p|a|img|h[1-6]|ul|ol|li|table|tr|td|th|br|hr|em|strong)[^>]*>/i.test(content)
+  return /<\/?(?:div|span|p|a|img|h[1-6]|ul|ol|li|table|tr|td|th|br|hr|em|strong)[^>]*>/i.test(content)
 }
 
 /**************************************************************************************************
  * TermsMarkdown component for rendering markdown content
  **************************************************************************************************/
-function TermsMarkdown({content}: TTermsMarkdownProps): ReactNode {
-	if (isHtmlContent(content)) {
-		// eslint-disable-next-line @typescript-eslint/naming-convention
-		return <div dangerouslySetInnerHTML={{__html: content}} />
-	}
-
-	return (
-		<ReactMarkdown
-			remarkPlugins={[remarkGfm, remarkEmoji]}
-			rehypePlugins={[rehypeHighlight]}
-			components={{
-				// Headers
-				h1: ({...props}) => (
-					<h1
-						className={'mb-4 mt-8 text-4xl font-bold'}
-						{...props}
-					/>
-				),
-				h2: ({...props}) => (
-					<h2
-						className={'mb-3 mt-6 text-3xl font-bold'}
-						{...props}
-					/>
-				),
-				h3: ({...props}) => (
-					<h3
-						className={'mb-2 mt-4 text-2xl font-bold'}
-						{...props}
-					/>
-				),
-
-				// Code blocks
-				code: CodeBlock,
-
-				// Tables
-				table: ({...props}) => (
-					<div className={'my-8 overflow-x-auto'}>
-						<table
-							className={'min-w-full'}
-							{...props}
-						/>
-					</div>
-				),
-				th: ({...props}) => (
-					<th
-						className={'bg-gray-800 px-6 py-3 text-left'}
-						{...props}
-					/>
-				),
-				td: ({...props}) => (
-					<td
-						className={'border-t border-gray-700 px-6 py-4'}
-						{...props}
-					/>
-				),
-
-				// Images - properly typed with next/image
-				img: ({src, alt}) => {
-					// If src is missing, render nothing
-					if (!src) {
-						return null
-					}
-
-					return (
-						<Image
-							src={src}
-							alt={alt || ''}
-							width={1200}
-							height={1200}
-							className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
-							loading={'lazy'}
-						/>
-					)
-				},
-
-				// Blockquotes
-				blockquote: ({...props}) => (
-					<blockquote
-						className={'border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'}
-						{...props}
-					/>
-				),
-
-				// Lists
-				ul: ({...props}) => (
-					<ul
-						className={'my-4 list-inside list-disc'}
-						{...props}
-					/>
-				),
-				ol: ({...props}) => (
-					<ol
-						className={'my-4 list-inside list-decimal'}
-						{...props}
-					/>
-				),
-				li: ({...props}) => (
-					<li
-						className={'my-4 list-inside'}
-						{...props}
-					/>
-				),
-
-				// Links
-				a: ({...props}) => (
-					<a
-						className={'text-blue underline transition-colors hover:text-blueHover'}
-						target={'_blank'}
-						rel={'noopener noreferrer'}
-						{...props}
-					/>
-				),
-
-				p: ({...props}) => (
-					<p
-						className={'mb-4'}
-						{...props}
-					/>
-				)
-			}}>
-			{content}
-		</ReactMarkdown>
-	)
+function TermsMarkdown({ content }: TTermsMarkdownProps): ReactNode {
+  if (isHtmlContent(content)) {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    return <div dangerouslySetInnerHTML={{ __html: content }} />
+  }
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm, remarkEmoji]}
+      rehypePlugins={[rehypeHighlight]}
+      components={{
+        // Headers
+        h1: ({ ...props }) => <h1 className={'mb-4 mt-8 text-4xl font-bold'} {...props} />,
+        h2: ({ ...props }) => <h2 className={'mb-3 mt-6 text-3xl font-bold'} {...props} />,
+        h3: ({ ...props }) => <h3 className={'mb-2 mt-4 text-2xl font-bold'} {...props} />,
+
+        // Code blocks
+        code: CodeBlock,
+
+        // Tables
+        table: ({ ...props }) => (
+          <div className={'my-8 overflow-x-auto'}>
+            <table className={'min-w-full'} {...props} />
+          </div>
+        ),
+        th: ({ ...props }) => <th className={'bg-gray-800 px-6 py-3 text-left'} {...props} />,
+        td: ({ ...props }) => <td className={'border-t border-gray-700 px-6 py-4'} {...props} />,
+
+        // Images - properly typed with next/image
+        img: ({ src, alt }) => {
+          // If src is missing, render nothing
+          if (!src) {
+            return null
+          }
+
+          return (
+            <Image
+              src={src}
+              alt={alt || ''}
+              width={1200}
+              height={1200}
+              className={'my-8 h-auto max-w-full rounded-lg shadow-lg'}
+              loading={'lazy'}
+            />
+          )
+        },
+
+        // Blockquotes
+        blockquote: ({ ...props }) => (
+          <blockquote className={'border-blue-500 my-6 border-l-4 pl-4 italic text-gray-300'} {...props} />
+        ),
+
+        // Lists
+        ul: ({ ...props }) => <ul className={'my-4 list-inside list-disc'} {...props} />,
+        ol: ({ ...props }) => <ol className={'my-4 list-inside list-decimal'} {...props} />,
+        li: ({ ...props }) => <li className={'my-4 list-inside'} {...props} />,
+
+        // Links
+        a: ({ ...props }) => (
+          <a
+            className={'text-blue underline transition-colors hover:text-blueHover'}
+            target={'_blank'}
+            rel={'noopener noreferrer'}
+            {...props}
+          />
+        ),
+
+        p: ({ ...props }) => <p className={'mb-4'} {...props} />,
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  )
 }
 
 /**************************************************************************************************
  * CodeBlock component for rendering code with syntax highlighting
  **************************************************************************************************/
-function CodeBlock({className, children, ...props}: ComponentProps<'code'>): ReactNode {
-	const match = /language-(\w+)/.exec(className || '')
-
-	if (match) {
-		return (
-			<div className={'relative'}>
-				<div
-					className={'absolute right-2 top-2 text-xs text-gray-400'}
-					aria-label={`Language: ${match[1]}`}>
-					{match[1]}
-				</div>
-				<pre className={className}>
-					<code
-						className={className}
-						{...props}>
-						{children}
-					</code>
-				</pre>
-			</div>
-		)
-	}
-
-	return (
-		<code
-			className={'rounded bg-gray-800 px-1.5 py-0.5'}
-			{...props}>
-			{children}
-		</code>
-	)
+function CodeBlock({ className, children, ...props }: ComponentProps<'code'>): ReactNode {
+  const match = /language-(\w+)/.exec(className || '')
+
+  if (match) {
+    return (
+      <div className={'relative'}>
+        <div className={'absolute right-2 top-2 text-xs text-gray-400'} aria-label={`Language: ${match[1]}`}>
+          {match[1]}
+        </div>
+        <pre className={className}>
+          <code className={className} {...props}>
+            {children}
+          </code>
+        </pre>
+      </div>
+    )
+  }
+
+  return (
+    <code className={'rounded bg-gray-800 px-1.5 py-0.5'} {...props}>
+      {children}
+    </code>
+  )
 }
 
 export default memo(TermsMarkdown)
diff --git a/app/[lang]/(terms)/_components/TermsPage.tsx b/app/[lang]/(terms)/_components/TermsPage.tsx
index 7c4a1fb..136aede 100644
--- a/app/[lang]/(terms)/_components/TermsPage.tsx
+++ b/app/[lang]/(terms)/_components/TermsPage.tsx
@@ -7,92 +7,79 @@
  ** Implements loading state and error handling for better UX
  **************************************************************************************************/
 
-import {Suspense} from 'react'
+import { Suspense } from 'react'
 
 import styles from '@/app/[lang]/(terms)/_components/terms.module.css'
 import TermsAccordion from '@/app/[lang]/(terms)/_components/TermsAccordion'
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import type {TTermsItemData} from '@/app/[lang]/(terms)/_components/TermsAccordion'
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { TTermsItemData } from '@/app/[lang]/(terms)/_components/TermsAccordion'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 type TTermsPageProps = {
-	title: string
-	items: TTermsItemData[]
+  title: string
+  items: TTermsItemData[]
 }
 
 /**************************************************************************************************
  * Helper function to create dynamic metadata based on title
  **************************************************************************************************/
-export function generateMetadata({title}: {title: string}): Metadata {
-	return {
-		title: `${title} | ShapeShift`,
-		description: `ShapeShift ${title.toLowerCase()} - legal information for users.`,
-		openGraph: {
-			title: `ShapeShift ${title}`,
-			description: `View ShapeShift's ${title.toLowerCase()} and legal information.`
-		}
-	}
+export function generateMetadata({ title }: { title: string }): Metadata {
+  return {
+    title: `${title} | ShapeShift`,
+    description: `ShapeShift ${title.toLowerCase()} - legal information for users.`,
+    openGraph: {
+      title: `ShapeShift ${title}`,
+      description: `View ShapeShift's ${title.toLowerCase()} and legal information.`,
+    },
+  }
 }
 
 /**************************************************************************************************
  * Terms content component
  **************************************************************************************************/
-function TermsContent({items}: TTermsPageProps): ReactNode {
-	return (
-		<div className={styles.blogContent}>
-			<div className={'flex flex-col gap-2'}>
-				{items.map(item => (
-					<TermsAccordion
-						key={item.id}
-						item={item}
-					/>
-				))}
-			</div>
-		</div>
-	)
+function TermsContent({ items }: TTermsPageProps): ReactNode {
+  return (
+    <div className={styles.blogContent}>
+      <div className={'flex flex-col gap-2'}>
+        {items.map((item) => (
+          <TermsAccordion key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  )
 }
 
 /**************************************************************************************************
  * Loading fallback component
  **************************************************************************************************/
 function TermsLoadingSkeleton(): ReactNode {
-	return (
-		<div className={'animate-pulse space-y-4'}>
-			{Array.from({length: 3}).map((_, index) => (
-				<div
-					key={index}
-					className={'h-24 rounded-2xl bg-secondBg/50'}
-				/>
-			))}
-		</div>
-	)
+  return (
+    <div className={'animate-pulse space-y-4'}>
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div key={index} className={'h-24 rounded-2xl bg-secondBg/50'} />
+      ))}
+    </div>
+  )
 }
 
 /**************************************************************************************************
  * Terms page component
  **************************************************************************************************/
-export function TermsPage({title, items}: TTermsPageProps): ReactNode {
-	return (
-		<main className={'container mx-auto mt-40 px-4 py-8'}>
-			<div className={'mb-20 flex w-full flex-col md:flex-row md:justify-between'}>
-				<section className={'flex flex-col'}>
-					<h1 className={'mb-6 text-4xl md:text-7xl'}>{title}</h1>
-					<Button
-						variant={'blue'}
-						href={'https://app.shapeshift.com/'}
-						title={'Get Started'}
-					/>
-				</section>
-			</div>
+export function TermsPage({ title, items }: TTermsPageProps): ReactNode {
+  return (
+    <main className={'container mx-auto mt-40 px-4 py-8'}>
+      <div className={'mb-20 flex w-full flex-col md:flex-row md:justify-between'}>
+        <section className={'flex flex-col'}>
+          <h1 className={'mb-6 text-4xl md:text-7xl'}>{title}</h1>
+          <Button variant={'blue'} href={'https://app.shapeshift.com/'} title={'Get Started'} />
+        </section>
+      </div>
 
-			<Suspense fallback={<TermsLoadingSkeleton />}>
-				<TermsContent
-					title={title}
-					items={items}
-				/>
-			</Suspense>
-		</main>
-	)
+      <Suspense fallback={<TermsLoadingSkeleton />}>
+        <TermsContent title={title} items={items} />
+      </Suspense>
+    </main>
+  )
 }
diff --git a/app/[lang]/(terms)/_components/utils.ts b/app/[lang]/(terms)/_components/utils.ts
index 9798a8a..9404f5a 100644
--- a/app/[lang]/(terms)/_components/utils.ts
+++ b/app/[lang]/(terms)/_components/utils.ts
@@ -6,42 +6,42 @@
  ** Enforces consistent data structure between different terms pages
  **************************************************************************************************/
 
-import {getPrivacyPolicy, getTermsOfService} from '@/app/[lang]/_utils/query'
+import { getPrivacyPolicy, getTermsOfService } from '@/app/[lang]/_utils/query'
 
-import type {TTermsItemData} from '@/app/[lang]/(terms)/_components/TermsAccordion'
+import type { TTermsItemData } from '@/app/[lang]/(terms)/_components/TermsAccordion'
 
 /**************************************************************************************************
  * Transforms privacy policy data from API format to component format
  **************************************************************************************************/
 export async function getPrivacyPolicyItems(): Promise<TTermsItemData[]> {
-	const data = await getPrivacyPolicy()
-
-	if (!data) {
-		return []
-	}
-
-	return data.policy.map(policy => ({
-		id: policy.id,
-		title: policy.title,
-		date: policy.date,
-		content: policy.policy
-	}))
+  const data = await getPrivacyPolicy()
+
+  if (!data) {
+    return []
+  }
+
+  return data.policy.map((policy) => ({
+    id: policy.id,
+    title: policy.title,
+    date: policy.date,
+    content: policy.policy,
+  }))
 }
 
 /**************************************************************************************************
  * Transforms terms of service data from API format to component format
  **************************************************************************************************/
 export async function getTermsOfServiceItems(): Promise<TTermsItemData[]> {
-	const data = await getTermsOfService()
-
-	if (!data) {
-		return []
-	}
-
-	return data.terms.map(term => ({
-		id: term.id,
-		title: term.title,
-		date: term.date,
-		content: term.policy
-	}))
+  const data = await getTermsOfService()
+
+  if (!data) {
+    return []
+  }
+
+  return data.terms.map((term) => ({
+    id: term.id,
+    title: term.title,
+    date: term.date,
+    content: term.policy,
+  }))
 }
diff --git a/app/[lang]/(terms)/error.tsx b/app/[lang]/(terms)/error.tsx
index 1893075..c689fc3 100644
--- a/app/[lang]/(terms)/error.tsx
+++ b/app/[lang]/(terms)/error.tsx
@@ -7,41 +7,33 @@
  **************************************************************************************************/
 'use client'
 
-import {useEffect} from 'react'
+import { useEffect } from 'react'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TErrorProps = {
-	error: Error & {digest?: string}
-	reset: () => void
+  error: Error & { digest?: string }
+  reset: () => void
 }
 
-export default function TermsError({error, reset}: TErrorProps): ReactNode {
-	useEffect(() => {
-		// Log the error to console for debugging
-		console.error('Terms page error:', error)
-	}, [error])
+export default function TermsError({ error, reset }: TErrorProps): ReactNode {
+  useEffect(() => {
+    // Log the error to console for debugging
+    console.error('Terms page error:', error)
+  }, [error])
 
-	return (
-		<main className={'container mx-auto mt-40 flex flex-col items-center px-4 py-8 text-center'}>
-			<h1 className={'mb-6 text-4xl md:text-7xl'}>{'Something went wrong'}</h1>
-			<p className={'mb-8 text-lg text-gray-300'}>
-				{'We encountered an error while loading this page. Please try again later.'}
-			</p>
-			<div className={'flex gap-4'}>
-				<Button
-					variant={'blue'}
-					onClick={reset}
-					title={'Try again'}
-				/>
-				<Button
-					variant={'white'}
-					href={'/'}
-					title={'Return home'}
-				/>
-			</div>
-		</main>
-	)
+  return (
+    <main className={'container mx-auto mt-40 flex flex-col items-center px-4 py-8 text-center'}>
+      <h1 className={'mb-6 text-4xl md:text-7xl'}>{'Something went wrong'}</h1>
+      <p className={'mb-8 text-lg text-gray-300'}>
+        {'We encountered an error while loading this page. Please try again later.'}
+      </p>
+      <div className={'flex gap-4'}>
+        <Button variant={'blue'} onClick={reset} title={'Try again'} />
+        <Button variant={'white'} href={'/'} title={'Return home'} />
+      </div>
+    </main>
+  )
 }
diff --git a/app/[lang]/(terms)/layout.tsx b/app/[lang]/(terms)/layout.tsx
index 1a2b019..b30f6c9 100644
--- a/app/[lang]/(terms)/layout.tsx
+++ b/app/[lang]/(terms)/layout.tsx
@@ -6,35 +6,35 @@
  ** Sets up responsive container layout with consistent spacing
  **************************************************************************************************/
 
-import {Banner} from '@/app/[lang]/_components/Banner'
+import { Banner } from '@/app/[lang]/_components/Banner'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export const metadata: Metadata = {
-	title: 'Legal Documents | ShapeShift',
-	description: 'ShapeShift privacy policy and terms of service documents.',
-	openGraph: {
-		title: 'ShapeShift Legal Documents',
-		description: 'Privacy Policy and Terms of Service for ShapeShift',
-		type: 'website',
-		locale: 'en_US',
-		url: 'https://shapeshift.com/terms',
-		siteName: 'ShapeShift'
-	}
+  title: 'Legal Documents | ShapeShift',
+  description: 'ShapeShift privacy policy and terms of service documents.',
+  openGraph: {
+    title: 'ShapeShift Legal Documents',
+    description: 'Privacy Policy and Terms of Service for ShapeShift',
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://shapeshift.com/terms',
+    siteName: 'ShapeShift',
+  },
 }
 
 type TTermsLayoutProps = {
-	children: ReactNode
+  children: ReactNode
 }
 
-export default function TermsLayout({children}: TTermsLayoutProps): ReactNode {
-	return (
-		<>
-			{children}
-			<div className={'container mx-auto mt-20 px-4'}>
-				<Banner />
-			</div>
-		</>
-	)
+export default function TermsLayout({ children }: TTermsLayoutProps): ReactNode {
+  return (
+    <>
+      {children}
+      <div className={'container mx-auto mt-20 px-4'}>
+        <Banner />
+      </div>
+    </>
+  )
 }
diff --git a/app/[lang]/(terms)/privacy-policy/page.tsx b/app/[lang]/(terms)/privacy-policy/page.tsx
index 97a4496..74b8048 100644
--- a/app/[lang]/(terms)/privacy-policy/page.tsx
+++ b/app/[lang]/(terms)/privacy-policy/page.tsx
@@ -6,27 +6,22 @@
  ** Handles loading states and error cases gracefully
  **************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {TermsPage, generateMetadata} from '@/app/[lang]/(terms)/_components/TermsPage'
-import {getPrivacyPolicyItems} from '@/app/[lang]/(terms)/_components/utils'
+import { TermsPage, generateMetadata } from '@/app/[lang]/(terms)/_components/TermsPage'
+import { getPrivacyPolicyItems } from '@/app/[lang]/(terms)/_components/utils'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
-export const metadata: Metadata = generateMetadata({title: 'Privacy Policy'})
+export const metadata: Metadata = generateMetadata({ title: 'Privacy Policy' })
 
 export default async function PrivacyPolicyPage(): Promise<ReactNode> {
-	const items = await getPrivacyPolicyItems()
+  const items = await getPrivacyPolicyItems()
 
-	if (!items.length) {
-		return notFound()
-	}
+  if (!items.length) {
+    return notFound()
+  }
 
-	return (
-		<TermsPage
-			title={'Privacy Policy'}
-			items={items}
-		/>
-	)
+  return <TermsPage title={'Privacy Policy'} items={items} />
 }
diff --git a/app/[lang]/(terms)/terms-of-service/page.tsx b/app/[lang]/(terms)/terms-of-service/page.tsx
index f95f84e..b8c3d85 100644
--- a/app/[lang]/(terms)/terms-of-service/page.tsx
+++ b/app/[lang]/(terms)/terms-of-service/page.tsx
@@ -6,29 +6,24 @@
  ** Handles loading states and error cases gracefully
  *************************************************************************************************/
 
-import {notFound} from 'next/navigation'
+import { notFound } from 'next/navigation'
 
-import {TermsPage, generateMetadata} from '@/app/[lang]/(terms)/_components/TermsPage'
-import {getTermsOfServiceItems} from '@/app/[lang]/(terms)/_components/utils'
+import { TermsPage, generateMetadata } from '@/app/[lang]/(terms)/_components/TermsPage'
+import { getTermsOfServiceItems } from '@/app/[lang]/(terms)/_components/utils'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export const metadata: Metadata = generateMetadata({
-	title: 'Terms of Service'
+  title: 'Terms of Service',
 })
 
 export default async function TermsOfServicePage(): Promise<ReactNode> {
-	const items = await getTermsOfServiceItems()
+  const items = await getTermsOfServiceItems()
 
-	if (!items.length) {
-		return notFound()
-	}
+  if (!items.length) {
+    return notFound()
+  }
 
-	return (
-		<TermsPage
-			title={'Terms of Service'}
-			items={items}
-		/>
-	)
+  return <TermsPage title={'Terms of Service'} items={items} />
 }
diff --git a/app/[lang]/_components/AnimatedHeight.tsx b/app/[lang]/_components/AnimatedHeight.tsx
index e7dd91d..0e18314 100644
--- a/app/[lang]/_components/AnimatedHeight.tsx
+++ b/app/[lang]/_components/AnimatedHeight.tsx
@@ -1,13 +1,13 @@
-import {motion} from 'framer-motion'
-import {useEffect, useRef, useState} from 'react'
+import { motion } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
 
-import {cl} from '@/app/[lang]/_utils/cl'
+import { cl } from '@/app/[lang]/_utils/cl'
 
 import type React from 'react'
 
 type TAnimateChangeInHeightProps = {
-	children: React.ReactNode
-	className?: string
+  children: React.ReactNode
+  className?: string
 }
 
 /********************************************************************************************
@@ -17,38 +17,39 @@ type TAnimateChangeInHeightProps = {
  * Automatically adjusts height based on content changes.
  ********************************************************************************************/
 
-export const AnimateChangeInHeight: React.FC<TAnimateChangeInHeightProps> = ({children, className}) => {
-	const containerRef = useRef<HTMLDivElement | null>(null)
-	const [height, setHeight] = useState<number | 'auto'>('auto')
-
-	/********************************************************************************************
-	 * Effect: Sets up ResizeObserver to track content height changes
-	 * Deps: None - Observer is set up once on mount
-	 ********************************************************************************************/
-	useEffect(() => {
-		if (containerRef.current) {
-			const resizeObserver = new ResizeObserver(entries => {
-				// We only have one entry, so we can use entries[0].
-				const observedHeight = entries[0].contentRect.height
-				setHeight(observedHeight)
-			})
-
-			resizeObserver.observe(containerRef.current)
-
-			return () => {
-				// Cleanup the observer when the component is unmounted
-				resizeObserver.disconnect()
-			}
-		}
-	}, [])
-
-	return (
-		<motion.div
-			className={cl(className, 'overflow-hidden')}
-			style={{height}}
-			animate={{height}}
-			transition={{duration: 0.1}}>
-			<div ref={containerRef}>{children}</div>
-		</motion.div>
-	)
+export const AnimateChangeInHeight: React.FC<TAnimateChangeInHeightProps> = ({ children, className }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [height, setHeight] = useState<number | 'auto'>('auto')
+
+  /********************************************************************************************
+   * Effect: Sets up ResizeObserver to track content height changes
+   * Deps: None - Observer is set up once on mount
+   ********************************************************************************************/
+  useEffect(() => {
+    if (containerRef.current) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        // We only have one entry, so we can use entries[0].
+        const observedHeight = entries[0].contentRect.height
+        setHeight(observedHeight)
+      })
+
+      resizeObserver.observe(containerRef.current)
+
+      return () => {
+        // Cleanup the observer when the component is unmounted
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  return (
+    <motion.div
+      className={cl(className, 'overflow-hidden')}
+      style={{ height }}
+      animate={{ height }}
+      transition={{ duration: 0.1 }}
+    >
+      <div ref={containerRef}>{children}</div>
+    </motion.div>
+  )
 }
diff --git a/app/[lang]/_components/Banner.tsx b/app/[lang]/_components/Banner.tsx
index a3c8fca..6431333 100644
--- a/app/[lang]/_components/Banner.tsx
+++ b/app/[lang]/_components/Banner.tsx
@@ -1,84 +1,64 @@
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import {LocalizedLink} from './LocalizedLink'
+import { LocalizedLink } from './LocalizedLink'
 import {
-	bannerLeftButtonTitle,
-	bannerLeftTitle,
-	bannerMobileSubtitle,
-	bannerRightTitle,
-	dAppUrl
+  bannerLeftButtonTitle,
+  bannerLeftTitle,
+  bannerMobileSubtitle,
+  bannerRightTitle,
+  dAppUrl,
 } from '../_utils/constants'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export function Banner(): ReactNode {
-	return (
-		<div
-			className={
-				'relative mb-40 w-full flex-col justify-between overflow-hidden rounded-2xl px-6 py-10 lg:flex lg:flex-row lg:p-24 lg:pr-6'
-			}>
-			<Image
-				src={'/bannerBg.png'}
-				alt={'banner'}
-				width={2800}
-				height={952}
-				className={'absolute inset-0 -z-10 size-full object-cover'}
-			/>
-			<div className={'flex flex-col lg:max-w-[511px]'}>
-				<h2 className={'mb-24 text-center text-[40px] leading-[40px] lg:text-left'}>{bannerLeftTitle}</h2>
+  return (
+    <div
+      className={
+        'relative mb-40 w-full flex-col justify-between overflow-hidden rounded-2xl px-6 py-10 lg:flex lg:flex-row lg:p-24 lg:pr-6'
+      }
+    >
+      <Image
+        src={'/bannerBg.png'}
+        alt={'banner'}
+        width={2800}
+        height={952}
+        className={'absolute inset-0 -z-10 size-full object-cover'}
+      />
+      <div className={'flex flex-col lg:max-w-[511px]'}>
+        <h2 className={'mb-24 text-center text-[40px] leading-[40px] lg:text-left'}>{bannerLeftTitle}</h2>
 
-				<div className={'flex gap-4'}>
-					<Button
-						variant={'blue'}
-						title={bannerLeftButtonTitle}
-						href={dAppUrl}
-						className={'mb-[44px] !w-full lg:mb-0 lg:!w-auto'}
-					/>
-				</div>
-			</div>
-			<p className={'mb-4 text-center lg:mb-0 lg:hidden'}>{bannerMobileSubtitle}</p>
+        <div className={'flex gap-4'}>
+          <Button
+            variant={'blue'}
+            title={bannerLeftButtonTitle}
+            href={dAppUrl}
+            className={'mb-[44px] !w-full lg:mb-0 lg:!w-auto'}
+          />
+        </div>
+      </div>
+      <p className={'mb-4 text-center lg:mb-0 lg:hidden'}>{bannerMobileSubtitle}</p>
 
-			<div className={'flex flex-col lg:max-w-[511px]'}>
-				<h2 className={'mb-10 hidden text-left text-[40px] leading-[40px] lg:block'}>{bannerRightTitle}</h2>
-				<div className={'flex justify-center gap-6 lg:justify-start'}>
-					<div className={'hidden size-[121px] lg:block'}>
-						<Image
-							src={'/qrcode.png'}
-							alt={'qrcode'}
-							width={360}
-							height={360}
-						/>
-					</div>
+      <div className={'flex flex-col lg:max-w-[511px]'}>
+        <h2 className={'mb-10 hidden text-left text-[40px] leading-[40px] lg:block'}>{bannerRightTitle}</h2>
+        <div className={'flex justify-center gap-6 lg:justify-start'}>
+          <div className={'hidden size-[121px] lg:block'}>
+            <Image src={'/qrcode.png'} alt={'qrcode'} width={360} height={360} />
+          </div>
 
-					<div className={'mb-[180px] flex items-center justify-center gap-3 lg:mb-0 lg:flex-col'}>
-						<LocalizedLink
-							href={'/apple-app-store'}
-							target={'_blank'}
-							className={'h-[40px] w-[130px]'}>
-							<Image
-								src={'/appstore.png'}
-								alt={'appstore'}
-								width={390}
-								height={120}
-							/>
-						</LocalizedLink>
+          <div className={'mb-[180px] flex items-center justify-center gap-3 lg:mb-0 lg:flex-col'}>
+            <LocalizedLink href={'/apple-app-store'} target={'_blank'} className={'h-[40px] w-[130px]'}>
+              <Image src={'/appstore.png'} alt={'appstore'} width={390} height={120} />
+            </LocalizedLink>
 
-						<LocalizedLink
-							href={'/google-play-store'}
-							target={'_blank'}
-							className={'h-[40px] w-[130px]'}>
-							<Image
-								src={'/google_play.png'}
-								alt={'googleplay'}
-								width={390}
-								height={120}
-							/>
-						</LocalizedLink>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
+            <LocalizedLink href={'/google-play-store'} target={'_blank'} className={'h-[40px] w-[130px]'}>
+              <Image src={'/google_play.png'} alt={'googleplay'} width={390} height={120} />
+            </LocalizedLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/BlogList.tsx b/app/[lang]/_components/BlogList.tsx
index a862812..606af64 100644
--- a/app/[lang]/_components/BlogList.tsx
+++ b/app/[lang]/_components/BlogList.tsx
@@ -1,33 +1,29 @@
 'use client'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {useFetchPosts} from '@/app/[lang]/_hooks/useFetchPosts'
+import { Button } from '@/app/[lang]/_components/Button'
+import { useFetchPosts } from '@/app/[lang]/_hooks/useFetchPosts'
 
-import {BlogPost} from './BlogPost'
-import {LocalizedLink} from './LocalizedLink'
+import { BlogPost } from './BlogPost'
+import { LocalizedLink } from './LocalizedLink'
 
-import type {TBlogPost} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TBlogPost } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-export function LatestBlogPosts({limit, isWithTitle = true}: {limit: number; isWithTitle?: boolean}): ReactNode {
-	const {posts} = useFetchPosts({page: 1, pageSize: limit, sort: 'desc'})
-	return (
-		<div className={'grid w-full grid-cols-1 gap-4 lg:grid-cols-3'}>
-			{isWithTitle && (
-				<div className={'col-span-1 flex flex-col gap-16'}>
-					<h1 className={'text-[40px] leading-10 text-white lg:text-7xl'}>{'Read more about ShapeShift.'}</h1>
-					<LocalizedLink href={'/blog'}>
-						<Button title={'See all articles'} />
-					</LocalizedLink>
-				</div>
-			)}
-			{posts.map((post: TBlogPost) => (
-				<BlogPost
-					key={post.id}
-					post={post}
-					isClassic={true}
-				/>
-			))}
-		</div>
-	)
+export function LatestBlogPosts({ limit, isWithTitle = true }: { limit: number; isWithTitle?: boolean }): ReactNode {
+  const { posts } = useFetchPosts({ page: 1, pageSize: limit, sort: 'desc' })
+  return (
+    <div className={'grid w-full grid-cols-1 gap-4 lg:grid-cols-3'}>
+      {isWithTitle && (
+        <div className={'col-span-1 flex flex-col gap-16'}>
+          <h1 className={'text-[40px] leading-10 text-white lg:text-7xl'}>{'Read more about ShapeShift.'}</h1>
+          <LocalizedLink href={'/blog'}>
+            <Button title={'See all articles'} />
+          </LocalizedLink>
+        </div>
+      )}
+      {posts.map((post: TBlogPost) => (
+        <BlogPost key={post.id} post={post} isClassic={true} />
+      ))}
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/BlogPost.tsx b/app/[lang]/_components/BlogPost.tsx
index 1534f03..c0e5fd6 100644
--- a/app/[lang]/_components/BlogPost.tsx
+++ b/app/[lang]/_components/BlogPost.tsx
@@ -1,13 +1,13 @@
 import Image from 'next/image'
-import {useMemo} from 'react'
+import { useMemo } from 'react'
 
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import {LocalizedLink} from './LocalizedLink'
-import {cl} from '../_utils/cl'
+import { LocalizedLink } from './LocalizedLink'
+import { cl } from '../_utils/cl'
 
-import type {TBlogPost} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TBlogPost } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 /********************************************************************************************
  * Blog Post Card Component
@@ -17,133 +17,119 @@ import type {ReactNode} from 'react'
  ********************************************************************************************/
 
 export function BlogPost({
-	post,
-	className,
-	isClassic = false
+  post,
+  className,
+  isClassic = false,
 }: {
-	post: TBlogPost
-	className?: string
-	isClassic?: boolean
+  post: TBlogPost
+  className?: string
+  isClassic?: boolean
 }): ReactNode {
-	if (post.isFeatured && !isClassic) {
-		return (
-			<>
-				<FeaturedPost
-					post={post}
-					className={'hidden lg:grid'}
-				/>
-				<PostCard
-					post={post}
-					className={'!bg-slate-800 lg:hidden'}
-				/>
-			</>
-		)
-	}
+  if (post.isFeatured && !isClassic) {
+    return (
+      <>
+        <FeaturedPost post={post} className={'hidden lg:grid'} />
+        <PostCard post={post} className={'!bg-slate-800 lg:hidden'} />
+      </>
+    )
+  }
 
-	return (
-		<PostCard
-			post={post}
-			className={className}
-		/>
-	)
+  return <PostCard post={post} className={className} />
 }
 
-function FeaturedPost({post, className}: {post: TBlogPost; className?: string}): ReactNode {
-	const formatDate = useMemo(
-		() =>
-			(date: string): string => {
-				return new Date(date).toLocaleDateString(undefined, {
-					year: 'numeric',
-					month: 'long',
-					day: 'numeric'
-				})
-			},
-		[]
-	)
+function FeaturedPost({ post, className }: { post: TBlogPost; className?: string }): ReactNode {
+  const formatDate = useMemo(
+    () =>
+      (date: string): string => {
+        return new Date(date).toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })
+      },
+    []
+  )
 
-	return (
-		<LocalizedLink
-			href={`/blog/${post.slug}`}
-			className={cl('col-span-3 h-[364px] grid grid-cols-2 rounded-2xl bg-secondBg p-6', className)}>
-			<div
-				className={'no-translate col-span-1 size-full max-h-[316px] max-w-[632px] overflow-hidden rounded-2xl'}>
-				{post?.featuredImg?.url ? (
-					<Image
-						src={getStrapiImageUrl(post?.featuredImg.url)}
-						alt={post.slug}
-						width={post?.featuredImg.width ?? 0}
-						height={post?.featuredImg.height ?? 0}
-						className={'no-translate size-full object-cover'}
-					/>
-				) : (
-					<div className={'h-full max-h-[316px] w-auto rounded-2xl bg-gray-500'} />
-				)}
-			</div>
+  return (
+    <LocalizedLink
+      href={`/blog/${post.slug}`}
+      className={cl('col-span-3 h-[364px] grid grid-cols-2 rounded-2xl bg-secondBg p-6', className)}
+    >
+      <div className={'no-translate col-span-1 size-full max-h-[316px] max-w-[632px] overflow-hidden rounded-2xl'}>
+        {post?.featuredImg?.url ? (
+          <Image
+            src={getStrapiImageUrl(post?.featuredImg.url)}
+            alt={post.slug}
+            width={post?.featuredImg.width ?? 0}
+            height={post?.featuredImg.height ?? 0}
+            className={'no-translate size-full object-cover'}
+          />
+        ) : (
+          <div className={'h-full max-h-[316px] w-auto rounded-2xl bg-gray-500'} />
+        )}
+      </div>
 
-			<div className={'col-span-1 ml-6 flex size-full flex-col justify-end gap-2'}>
-				<div className={'flex items-center'}>
-					{post.type?.length > 1 && (
-						<p className={'no-translate mr-2 text-xs text-blue'}>{post?.type.join(', ')}</p>
-					)}
-					<p className={'no-translate text-xs text-gray-500'}>{formatDate(post.publishedAt)}</p>
-				</div>
-				<div>
-					<p className={'no-translate text-[32px] leading-[40px]'}>{post.title}</p>
-				</div>
-			</div>
-		</LocalizedLink>
-	)
+      <div className={'col-span-1 ml-6 flex size-full flex-col justify-end gap-2'}>
+        <div className={'flex items-center'}>
+          {post.type?.length > 1 && <p className={'no-translate mr-2 text-xs text-blue'}>{post?.type.join(', ')}</p>}
+          <p className={'no-translate text-xs text-gray-500'}>{formatDate(post.publishedAt)}</p>
+        </div>
+        <div>
+          <p className={'no-translate text-[32px] leading-[40px]'}>{post.title}</p>
+        </div>
+      </div>
+    </LocalizedLink>
+  )
 }
 
-function PostCard({post, className}: {post: TBlogPost; className?: string}): ReactNode {
-	/********************************************************************************************
-	 * Memo: Creates a date formatting function
-	 * No dependencies as it's a static function
-	 ********************************************************************************************/
-	const formatDate = useMemo(
-		() =>
-			(date: string): string => {
-				return new Date(date).toLocaleDateString(undefined, {
-					year: 'numeric',
-					month: 'long',
-					day: 'numeric'
-				})
-			},
-		[]
-	)
+function PostCard({ post, className }: { post: TBlogPost; className?: string }): ReactNode {
+  /********************************************************************************************
+   * Memo: Creates a date formatting function
+   * No dependencies as it's a static function
+   ********************************************************************************************/
+  const formatDate = useMemo(
+    () =>
+      (date: string): string => {
+        return new Date(date).toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })
+      },
+    []
+  )
 
-	return (
-		<LocalizedLink
-			href={`/blog/${post.slug}`}
-			className={cl(
-				'rounded-2xl p-6 transition-all bg-secondBg duration-300 hover:scale-[1.02] hover:bg-secondHoverBg',
-				className
-			)}>
-			<div className={'h-[204px] max-w-[408px] overflow-hidden rounded-2xl'}>
-				{post?.featuredImg?.url ? (
-					<Image
-						src={getStrapiImageUrl(post?.featuredImg?.url)}
-						alt={post.slug}
-						width={post?.featuredImg?.width ?? 0}
-						height={post?.featuredImg?.height ?? 0}
-						className={'size-full object-cover'}
-					/>
-				) : (
-					<div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
-				)}
-			</div>
+  return (
+    <LocalizedLink
+      href={`/blog/${post.slug}`}
+      className={cl(
+        'rounded-2xl p-6 transition-all bg-secondBg duration-300 hover:scale-[1.02] hover:bg-secondHoverBg',
+        className
+      )}
+    >
+      <div className={'h-[204px] max-w-[408px] overflow-hidden rounded-2xl'}>
+        {post?.featuredImg?.url ? (
+          <Image
+            src={getStrapiImageUrl(post?.featuredImg?.url)}
+            alt={post.slug}
+            width={post?.featuredImg?.width ?? 0}
+            height={post?.featuredImg?.height ?? 0}
+            className={'size-full object-cover'}
+          />
+        ) : (
+          <div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
+        )}
+      </div>
 
-			<div className={'mt-6 flex flex-col gap-2'}>
-				<div className={'flex items-center'}>
-					{post.type?.length > 1 && (
-						<p className={'no-translate mr-2 text-xs text-blue'}>{post?.type.join(', ')}</p>
-					)}
-					<p className={'no-translate text-xs text-gray-500'}>{formatDate(post.publishedAt)}</p>
-				</div>
-				<div>
-					<p className={'no-translate text-2xl'}>{post.title}</p>
-				</div>
-			</div>
-		</LocalizedLink>
-	)
+      <div className={'mt-6 flex flex-col gap-2'}>
+        <div className={'flex items-center'}>
+          {post.type?.length > 1 && <p className={'no-translate mr-2 text-xs text-blue'}>{post?.type.join(', ')}</p>}
+          <p className={'no-translate text-xs text-gray-500'}>{formatDate(post.publishedAt)}</p>
+        </div>
+        <div>
+          <p className={'no-translate text-2xl'}>{post.title}</p>
+        </div>
+      </div>
+    </LocalizedLink>
+  )
 }
diff --git a/app/[lang]/_components/Button.tsx b/app/[lang]/_components/Button.tsx
index 2900cc0..131f882 100644
--- a/app/[lang]/_components/Button.tsx
+++ b/app/[lang]/_components/Button.tsx
@@ -1,55 +1,53 @@
-import {LocalizedLink} from './LocalizedLink'
-import {IconNext} from '../_icons/IconNext'
-import {cl} from '../_utils/cl'
+import { LocalizedLink } from './LocalizedLink'
+import { IconNext } from '../_icons/IconNext'
+import { cl } from '../_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TButtonVariant = 'blue' | 'white'
 
 type TButtonProps = {
-	title?: string
-	variant?: TButtonVariant
-	className?: string
-	onClick?: () => void
-	href?: string
-	hasArrow?: boolean
+  title?: string
+  variant?: TButtonVariant
+  className?: string
+  onClick?: () => void
+  href?: string
+  hasArrow?: boolean
 }
 
 export function Button(props: TButtonProps): ReactNode {
-	const {variant = 'blue', hasArrow = false, ...rest} = props
-	return (
-		<>
-			{props.href ? (
-				<LocalizedLink
-					className={cl(
-						'flex h-14 px-5 py-4 font-medium items-center text-white backdrop-blur-lg justify-center rounded-2xl hover:scale-105 transition-all duration-300 gap-2',
-						hasArrow ? 'justify-between min-w-[232px]' : '!min-w-[152px]',
-						variant === 'blue'
-							? 'bg-blue hover:bg-blueHover'
-							: 'bg-white/10 border border-white/50 hover:bg-white/5',
-						props.className
-					)}
-					href={props.href}
-					target={props.href?.startsWith('http') ? '_blank' : undefined}>
-					<span>{props.title}</span>
-					{hasArrow ? <IconNext /> : null}
-				</LocalizedLink>
-			) : (
-				<button
-					{...rest}
-					className={cl(
-						'flex h-14 px-5 py-4 font-medium items-center text-white backdrop-blur-lg justify-center rounded-2xl hover:scale-105 transition-all duration-300 gap-2',
-						props.className,
-						props.href || hasArrow ? 'justify-between min-w-[232px]' : '!min-w-[152px]',
-						variant === 'blue'
-							? 'bg-blue hover:bg-blueHover'
-							: 'bg-white/10 border border-white/50 hover:bg-white/5'
-					)}
-					onClick={props.onClick}>
-					{props.title}
-					{hasArrow ? <IconNext /> : null}
-				</button>
-			)}
-		</>
-	)
+  const { variant = 'blue', hasArrow = false, ...rest } = props
+  return (
+    <>
+      {props.href ? (
+        <LocalizedLink
+          className={cl(
+            'flex h-14 px-5 py-4 font-medium items-center text-white backdrop-blur-lg justify-center rounded-2xl hover:scale-105 transition-all duration-300 gap-2',
+            hasArrow ? 'justify-between min-w-[232px]' : '!min-w-[152px]',
+            variant === 'blue' ? 'bg-blue hover:bg-blueHover' : 'bg-white/10 border border-white/50 hover:bg-white/5',
+            props.className
+          )}
+          href={props.href}
+          target={props.href?.startsWith('http') ? '_blank' : undefined}
+        >
+          <span>{props.title}</span>
+          {hasArrow ? <IconNext /> : null}
+        </LocalizedLink>
+      ) : (
+        <button
+          {...rest}
+          className={cl(
+            'flex h-14 px-5 py-4 font-medium items-center text-white backdrop-blur-lg justify-center rounded-2xl hover:scale-105 transition-all duration-300 gap-2',
+            props.className,
+            props.href || hasArrow ? 'justify-between min-w-[232px]' : '!min-w-[152px]',
+            variant === 'blue' ? 'bg-blue hover:bg-blueHover' : 'bg-white/10 border border-white/50 hover:bg-white/5'
+          )}
+          onClick={props.onClick}
+        >
+          {props.title}
+          {hasArrow ? <IconNext /> : null}
+        </button>
+      )}
+    </>
+  )
 }
diff --git a/app/[lang]/_components/Carousel.tsx b/app/[lang]/_components/Carousel.tsx
index 67ca52f..cd15d0a 100644
--- a/app/[lang]/_components/Carousel.tsx
+++ b/app/[lang]/_components/Carousel.tsx
@@ -1,6 +1,6 @@
-import {cl} from '../_utils/cl'
+import { cl } from '../_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 /**************************************************************************************************
  * Carousel Component
@@ -32,42 +32,41 @@ import type {ReactNode} from 'react'
  *************************************************************************************************/
 
 type TCarouselProps = React.HTMLAttributes<HTMLDivElement> & {
-	/** The content to be displayed in the carousel */
-	children: React.ReactNode
-	/** Whether to pause the animation when hovering over the carousel */
-	pauseOnHover?: boolean
-	/** The direction in which the carousel should scroll */
-	direction?: 'left' | 'right'
-	/** The speed of the carousel animation in seconds (lower = faster) */
-	speed?: number
+  /** The content to be displayed in the carousel */
+  children: React.ReactNode
+  /** Whether to pause the animation when hovering over the carousel */
+  pauseOnHover?: boolean
+  /** The direction in which the carousel should scroll */
+  direction?: 'left' | 'right'
+  /** The speed of the carousel animation in seconds (lower = faster) */
+  speed?: number
 }
 
 export function Carousel({
-	children,
-	pauseOnHover = false,
-	direction = 'left',
-	//The lower the number, the faster the carousel
-	speed = 20,
-	className,
-	...props
+  children,
+  pauseOnHover = false,
+  direction = 'left',
+  //The lower the number, the faster the carousel
+  speed = 20,
+  className,
+  ...props
 }: TCarouselProps): ReactNode {
-	return (
-		<div
-			className={cl('w-full overflow-hidden z-10', className)}
-			{...props}>
-			<div className={'relative flex overflow-hidden'}>
-				<div
-					className={cl(
-						'flex w-max py-5 animate-carousel',
-						pauseOnHover ? 'hover:[animation-play-state:paused]' : '',
-						direction === 'right' ? 'animate-carousel-reverse' : ''
-					)}
-					// eslint-disable-next-line @typescript-eslint/naming-convention
-					style={{'--duration': `${speed}s`} as React.CSSProperties}>
-					{children}
-					{children}
-				</div>
-			</div>
-		</div>
-	)
+  return (
+    <div className={cl('w-full overflow-hidden z-10', className)} {...props}>
+      <div className={'relative flex overflow-hidden'}>
+        <div
+          className={cl(
+            'flex w-max py-5 animate-carousel',
+            pauseOnHover ? 'hover:[animation-play-state:paused]' : '',
+            direction === 'right' ? 'animate-carousel-reverse' : ''
+          )}
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          style={{ '--duration': `${speed}s` } as React.CSSProperties}
+        >
+          {children}
+          {children}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/ChainsBanner.tsx b/app/[lang]/_components/ChainsBanner.tsx
index bf17af3..34c9c2e 100644
--- a/app/[lang]/_components/ChainsBanner.tsx
+++ b/app/[lang]/_components/ChainsBanner.tsx
@@ -1,48 +1,49 @@
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import {cl} from '../_utils/cl'
+import { cl } from '../_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TChainsBanner = {
-	tag: string
-	title: string
-	href: string
-	buttonText: string
+  tag: string
+  title: string
+  href: string
+  buttonText: string
 }
 
 export function ChainsBanner(data: TChainsBanner): ReactNode {
-	return (
-		<section className={'relative mb-40 h-[424px] w-full max-w-[1400px] overflow-hidden rounded-2xl lg:h-[504px]'}>
-			<div className={'mx-auto'}>
-				<Image
-					src={'/bannerFooterBg.png'}
-					alt={data.title}
-					width={2800}
-					height={1008}
-					className={'absolute inset-0 size-full object-cover'}
-				/>
+  return (
+    <section className={'relative mb-40 h-[424px] w-full max-w-[1400px] overflow-hidden rounded-2xl lg:h-[504px]'}>
+      <div className={'mx-auto'}>
+        <Image
+          src={'/bannerFooterBg.png'}
+          alt={data.title}
+          width={2800}
+          height={1008}
+          className={'absolute inset-0 size-full object-cover'}
+        />
 
-				<div className={'absolute inset-0 z-10 flex w-full flex-col items-center justify-center gap-4 px-4'}>
-					<div className={'rounded-3xl bg-white/10 px-6 py-2 text-white'}>{data.tag}</div>
-					<div
-						className={cl(
-							'mb-[60px] mt-4 max-w-[800px] text-center text-[36px] font-normal leading-[36px]',
-							'text-white md:text-[48px] md:leading-[48px] lg:text-7xl'
-						)}>
-						{data.title}
-					</div>
-					<Button
-						variant={'blue'}
-						href={data.href}
-						title={data.buttonText}
-						hasArrow
-						className={'w-full lg:w-[232px]'}
-					/>
-				</div>
-			</div>
-		</section>
-	)
+        <div className={'absolute inset-0 z-10 flex w-full flex-col items-center justify-center gap-4 px-4'}>
+          <div className={'rounded-3xl bg-white/10 px-6 py-2 text-white'}>{data.tag}</div>
+          <div
+            className={cl(
+              'mb-[60px] mt-4 max-w-[800px] text-center text-[36px] font-normal leading-[36px]',
+              'text-white md:text-[48px] md:leading-[48px] lg:text-7xl'
+            )}
+          >
+            {data.title}
+          </div>
+          <Button
+            variant={'blue'}
+            href={data.href}
+            title={data.buttonText}
+            hasArrow
+            className={'w-full lg:w-[232px]'}
+          />
+        </div>
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/ChatwootWidget.tsx b/app/[lang]/_components/ChatwootWidget.tsx
index 916a6c3..b6bb4fc 100644
--- a/app/[lang]/_components/ChatwootWidget.tsx
+++ b/app/[lang]/_components/ChatwootWidget.tsx
@@ -2,30 +2,30 @@
 'use client'
 
 import Script from 'next/script'
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
 
 type SecureMessageEvent = {
-	data: {
-		type?: string
-		eventName?: string
-		config?: Record<string, string | number | boolean>
-		payload?: Record<string, string | number | boolean>
-	}
+  data: {
+    type?: string
+    eventName?: string
+    config?: Record<string, string | number | boolean>
+    payload?: Record<string, string | number | boolean>
+  }
 } & MessageEvent
 
 declare global {
-	// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-	interface Window {
-		chatwootSDK?: {
-			run: (config: {websiteToken: string; baseUrl: string}) => void
-			isLoaded?: boolean
-		}
-		$chatwoot?: {
-			reset?: () => void
-		}
-	}
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Window {
+    chatwootSDK?: {
+      run: (config: { websiteToken: string; baseUrl: string }) => void
+      isLoaded?: boolean
+    }
+    $chatwoot?: {
+      reset?: () => void
+    }
+  }
 }
 
 const ALLOWED_CHATWOOT_ORIGINS = ['https://app.chatwoot.com', 'https://widget.chatwoot.com']
@@ -37,241 +37,237 @@ const BLOCKED_MESSAGE_TYPES = ['popoutChatWindow', 'chatwoot:popout']
 const ALLOWED_CHATWOOT_DOMAINS = ['app.chatwoot.com', 'widget.chatwoot.com']
 
 function isValidUrl(urlString: string): boolean {
-	try {
-		const url = new URL(urlString)
-
-		if (url.protocol !== 'https:') {
-			return false
-		}
-
-		if (!ALLOWED_CHATWOOT_DOMAINS.includes(url.hostname)) {
-			return false
-		}
-
-		if (
-			url.pathname.includes('..') ||
-			url.pathname.includes('%') ||
-			url.search.includes('javascript') ||
-			url.hash.includes('javascript')
-		) {
-			return false
-		}
-
-		return true
-	} catch {
-		return false
-	}
+  try {
+    const url = new URL(urlString)
+
+    if (url.protocol !== 'https:') {
+      return false
+    }
+
+    if (!ALLOWED_CHATWOOT_DOMAINS.includes(url.hostname)) {
+      return false
+    }
+
+    if (
+      url.pathname.includes('..') ||
+      url.pathname.includes('%') ||
+      url.search.includes('javascript') ||
+      url.hash.includes('javascript')
+    ) {
+      return false
+    }
+
+    return true
+  } catch {
+    return false
+  }
 }
 
 function sanitizeValue(value: unknown, isUrl = false): string | number | boolean | null {
-	if (typeof value === 'string') {
-		if (isUrl) {
-			return isValidUrl(value) ? value : null
-		}
-
-		const sanitized = value
-			.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-			.replace(/javascript\s*:/gi, '')
-			.replace(/data\s*:/gi, '')
-			.replace(/vbscript\s*:/gi, '')
-			.replace(/on\w+\s*=/gi, '')
-			.replace(/eval\s*\(/gi, '')
-			.replace(/Function\s*\(/gi, '')
-			.replace(/setTimeout\s*\(/gi, '')
-			.replace(/setInterval\s*\(/gi, '')
-			.replace(/%0[ad]/gi, '')
-			.replace(/%2[ef]/gi, '')
-			.replace(/[\r\n\t]/g, '')
-
-		return sanitized === value ? sanitized : null
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return value
-	}
-	return null
+  if (typeof value === 'string') {
+    if (isUrl) {
+      return isValidUrl(value) ? value : null
+    }
+
+    const sanitized = value
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/javascript\s*:/gi, '')
+      .replace(/data\s*:/gi, '')
+      .replace(/vbscript\s*:/gi, '')
+      .replace(/on\w+\s*=/gi, '')
+      .replace(/eval\s*\(/gi, '')
+      .replace(/Function\s*\(/gi, '')
+      .replace(/setTimeout\s*\(/gi, '')
+      .replace(/setInterval\s*\(/gi, '')
+      .replace(/%0[ad]/gi, '')
+      .replace(/%2[ef]/gi, '')
+      .replace(/[\r\n\t]/g, '')
+
+    return sanitized === value ? sanitized : null
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return value
+  }
+  return null
 }
 
 function validateMessageData(data: unknown): data is SecureMessageEvent['data'] {
-	if (typeof data !== 'object' || data === null) {
-		return false
-	}
-
-	const obj = data as Record<string, unknown>
-
-	if (obj.type && typeof obj.type !== 'string') {
-		return false
-	}
-	if (obj.eventName && typeof obj.eventName !== 'string') {
-		return false
-	}
-
-	if (obj.config && typeof obj.config === 'object' && obj.config !== null) {
-		for (const [key, value] of Object.entries(obj.config)) {
-			const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
-			if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
-				return false
-			}
-		}
-	}
-
-	if (obj.payload && typeof obj.payload === 'object' && obj.payload !== null) {
-		for (const [key, value] of Object.entries(obj.payload)) {
-			const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
-			if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
-				return false
-			}
-		}
-	}
-
-	return true
+  if (typeof data !== 'object' || data === null) {
+    return false
+  }
+
+  const obj = data as Record<string, unknown>
+
+  if (obj.type && typeof obj.type !== 'string') {
+    return false
+  }
+  if (obj.eventName && typeof obj.eventName !== 'string') {
+    return false
+  }
+
+  if (obj.config && typeof obj.config === 'object' && obj.config !== null) {
+    for (const [key, value] of Object.entries(obj.config)) {
+      const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
+      if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
+        return false
+      }
+    }
+  }
+
+  if (obj.payload && typeof obj.payload === 'object' && obj.payload !== null) {
+    for (const [key, value] of Object.entries(obj.payload)) {
+      const isUrlField = key.toLowerCase().includes('url') || key.toLowerCase().includes('baseurl')
+      if (typeof key !== 'string' || sanitizeValue(value, isUrlField) === null) {
+        return false
+      }
+    }
+  }
+
+  return true
 }
 
 function createSecureMessageHandler(): (event: MessageEvent) => void {
-	return (event: MessageEvent) => {
-		if (!event.origin || !ALLOWED_CHATWOOT_ORIGINS.includes(event.origin)) {
-			console.warn('[ChatwootWidget] Blocked message from unauthorized origin:', event.origin)
-			return
-		}
-
-		if (!validateMessageData(event.data)) {
-			console.warn('[ChatwootWidget] Blocked message with invalid or potentially malicious data')
-			return
-		}
-
-		const data = event.data as SecureMessageEvent['data']
-		const messageType = data.type || data.eventName
-
-		if (
-			!messageType ||
-			!ALLOWED_MESSAGE_TYPES.includes(messageType) ||
-			BLOCKED_MESSAGE_TYPES.includes(messageType)
-		) {
-			console.warn('[ChatwootWidget] Blocked unauthorized message type:', messageType)
-			return
-		}
-
-		const sanitizedData = {
-			...data,
-			config: data.config
-				? Object.fromEntries(
-						Object.entries(data.config).map(([k, v]) => {
-							const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
-							return [k, sanitizeValue(v, isUrlField)]
-						})
-					)
-				: undefined,
-			payload: data.payload
-				? Object.fromEntries(
-						Object.entries(data.payload).map(([k, v]) => {
-							const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
-							return [k, sanitizeValue(v, isUrlField)]
-						})
-					)
-				: undefined
-		}
-
-		if (process.env.NODE_ENV === 'development') {
-			console.log('[ChatwootWidget] Authorized message received:', {
-				origin: event.origin,
-				type: messageType,
-				data: sanitizedData
-			})
-		}
-	}
+  return (event: MessageEvent) => {
+    if (!event.origin || !ALLOWED_CHATWOOT_ORIGINS.includes(event.origin)) {
+      console.warn('[ChatwootWidget] Blocked message from unauthorized origin:', event.origin)
+      return
+    }
+
+    if (!validateMessageData(event.data)) {
+      console.warn('[ChatwootWidget] Blocked message with invalid or potentially malicious data')
+      return
+    }
+
+    const data = event.data as SecureMessageEvent['data']
+    const messageType = data.type || data.eventName
+
+    if (!messageType || !ALLOWED_MESSAGE_TYPES.includes(messageType) || BLOCKED_MESSAGE_TYPES.includes(messageType)) {
+      console.warn('[ChatwootWidget] Blocked unauthorized message type:', messageType)
+      return
+    }
+
+    const sanitizedData = {
+      ...data,
+      config: data.config
+        ? Object.fromEntries(
+            Object.entries(data.config).map(([k, v]) => {
+              const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
+              return [k, sanitizeValue(v, isUrlField)]
+            })
+          )
+        : undefined,
+      payload: data.payload
+        ? Object.fromEntries(
+            Object.entries(data.payload).map(([k, v]) => {
+              const isUrlField = k.toLowerCase().includes('url') || k.toLowerCase().includes('baseurl')
+              return [k, sanitizeValue(v, isUrlField)]
+            })
+          )
+        : undefined,
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[ChatwootWidget] Authorized message received:', {
+        origin: event.origin,
+        type: messageType,
+        data: sanitizedData,
+      })
+    }
+  }
 }
 
-export function ChatwootWidget({nonce}: {nonce?: string}): ReactElement {
-	const [canInit, setCanInit] = useState(false)
-	const [isInitialized, setIsInitialized] = useState(false)
-	const [hasError, setHasError] = useState(false)
-
-	useEffect(() => {
-		if (!canInit || isInitialized || hasError) {
-			return
-		}
-
-		if (!process.env.NEXT_PUBLIC_CHATWOOT_API_KEY) {
-			console.error('[ChatwootWidget] NEXT_PUBLIC_CHATWOOT_API_KEY is not set')
-			setHasError(true)
-			return
-		}
-
-		const secureMessageHandler = createSecureMessageHandler()
-		window.addEventListener('message', secureMessageHandler)
-		console.log('[ChatwootWidget] Secure message handler registered')
-
-		let retryCount = 0
-		let retryTimeout: NodeJS.Timeout | undefined
-		const maxRetries = 10
-		const initialDelay = 100
-
-		const initChatwoot = (): void => {
-			try {
-				if (!window.chatwootSDK) {
-					if (retryCount < maxRetries) {
-						retryCount++
-						const delay = initialDelay * Math.pow(2, retryCount - 1)
-						console.log(
-							`[ChatwootWidget] Chatwoot SDK not found, retrying in ${delay}ms (attempt ${retryCount}/${maxRetries})`
-						)
-						retryTimeout = setTimeout(initChatwoot, delay)
-					} else {
-						console.warn('[ChatwootWidget] Chatwoot SDK not found after maximum retries')
-						setHasError(true)
-					}
-					return
-				}
-
-				if (window.chatwootSDK.isLoaded) {
-					console.log('[ChatwootWidget] Chatwoot SDK already initialized')
-					setIsInitialized(true)
-					return
-				}
-
-				console.log('[ChatwootWidget] Chatwoot SDK found, initializing')
-				window.chatwootSDK.run({
-					websiteToken: '', // Gets set by the backend proxy
-					baseUrl: '/api/chatwoot'
-				})
-				window.chatwootSDK.isLoaded = true
-				setIsInitialized(true)
-			} catch (error) {
-				console.error('[ChatwootWidget] Error initializing Chatwoot:', error)
-				setHasError(true)
-			}
-		}
-
-		if (window.chatwootSDK) {
-			initChatwoot()
-		} else {
-			initChatwoot()
-		}
-
-		return () => {
-			if (retryTimeout) {
-				clearTimeout(retryTimeout)
-			}
-			window.removeEventListener('message', secureMessageHandler)
-			console.log('[ChatwootWidget] Secure message handler removed')
-		}
-	}, [canInit, isInitialized, hasError])
-
-	return (
-		<Script
-			id={'chatwoot-sdk'}
-			src={'/api/chatwoot/packs/js/sdk.js'}
-			strategy={'afterInteractive'}
-			defer
-			async
-			nonce={nonce}
-			onLoad={() => {
-				console.log('[ChatwootWidget] Script loaded successfully')
-				setCanInit(true)
-			}}
-			onError={error => {
-				console.error('[ChatwootWidget] Failed to load Chatwoot script:', error)
-				setHasError(true)
-			}}
-		/>
-	)
+export function ChatwootWidget({ nonce }: { nonce?: string }): ReactElement {
+  const [canInit, setCanInit] = useState(false)
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [hasError, setHasError] = useState(false)
+
+  useEffect(() => {
+    if (!canInit || isInitialized || hasError) {
+      return
+    }
+
+    if (!process.env.NEXT_PUBLIC_CHATWOOT_API_KEY) {
+      console.error('[ChatwootWidget] NEXT_PUBLIC_CHATWOOT_API_KEY is not set')
+      setHasError(true)
+      return
+    }
+
+    const secureMessageHandler = createSecureMessageHandler()
+    window.addEventListener('message', secureMessageHandler)
+    console.log('[ChatwootWidget] Secure message handler registered')
+
+    let retryCount = 0
+    let retryTimeout: NodeJS.Timeout | undefined
+    const maxRetries = 10
+    const initialDelay = 100
+
+    const initChatwoot = (): void => {
+      try {
+        if (!window.chatwootSDK) {
+          if (retryCount < maxRetries) {
+            retryCount++
+            const delay = initialDelay * Math.pow(2, retryCount - 1)
+            console.log(
+              `[ChatwootWidget] Chatwoot SDK not found, retrying in ${delay}ms (attempt ${retryCount}/${maxRetries})`
+            )
+            retryTimeout = setTimeout(initChatwoot, delay)
+          } else {
+            console.warn('[ChatwootWidget] Chatwoot SDK not found after maximum retries')
+            setHasError(true)
+          }
+          return
+        }
+
+        if (window.chatwootSDK.isLoaded) {
+          console.log('[ChatwootWidget] Chatwoot SDK already initialized')
+          setIsInitialized(true)
+          return
+        }
+
+        console.log('[ChatwootWidget] Chatwoot SDK found, initializing')
+        window.chatwootSDK.run({
+          websiteToken: '', // Gets set by the backend proxy
+          baseUrl: '/api/chatwoot',
+        })
+        window.chatwootSDK.isLoaded = true
+        setIsInitialized(true)
+      } catch (error) {
+        console.error('[ChatwootWidget] Error initializing Chatwoot:', error)
+        setHasError(true)
+      }
+    }
+
+    if (window.chatwootSDK) {
+      initChatwoot()
+    } else {
+      initChatwoot()
+    }
+
+    return () => {
+      if (retryTimeout) {
+        clearTimeout(retryTimeout)
+      }
+      window.removeEventListener('message', secureMessageHandler)
+      console.log('[ChatwootWidget] Secure message handler removed')
+    }
+  }, [canInit, isInitialized, hasError])
+
+  return (
+    <Script
+      id={'chatwoot-sdk'}
+      src={'/api/chatwoot/packs/js/sdk.js'}
+      strategy={'afterInteractive'}
+      defer
+      async
+      nonce={nonce}
+      onLoad={() => {
+        console.log('[ChatwootWidget] Script loaded successfully')
+        setCanInit(true)
+      }}
+      onError={(error) => {
+        console.error('[ChatwootWidget] Failed to load Chatwoot script:', error)
+        setHasError(true)
+      }}
+    />
+  )
 }
diff --git a/app/[lang]/_components/ChatwootWidgetWrapper.tsx b/app/[lang]/_components/ChatwootWidgetWrapper.tsx
index 3935e73..105351d 100644
--- a/app/[lang]/_components/ChatwootWidgetWrapper.tsx
+++ b/app/[lang]/_components/ChatwootWidgetWrapper.tsx
@@ -1,12 +1,12 @@
-import {headers} from 'next/headers'
+import { headers } from 'next/headers'
 
-import {ChatwootWidget} from './ChatwootWidget'
+import { ChatwootWidget } from './ChatwootWidget'
 
-import type {ReactElement} from 'react'
+import type { ReactElement } from 'react'
 
 export async function ChatwootWidgetWrapper(): Promise<ReactElement> {
-	const headersList = await headers()
-	const nonce = headersList.get('x-nonce') || undefined
+  const headersList = await headers()
+  const nonce = headersList.get('x-nonce') || undefined
 
-	return <ChatwootWidget nonce={nonce} />
+  return <ChatwootWidget nonce={nonce} />
 }
diff --git a/app/[lang]/_components/Dropdown.tsx b/app/[lang]/_components/Dropdown.tsx
index fcea10a..fc54cce 100644
--- a/app/[lang]/_components/Dropdown.tsx
+++ b/app/[lang]/_components/Dropdown.tsx
@@ -1,20 +1,20 @@
 'use client'
 
-import {useState} from 'react'
+import { useState } from 'react'
 
-import {cl} from '@/app/[lang]/_utils/cl'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import {IconCheck} from '../_icons/IconCheck'
-import {IconChevron} from '../_icons/IconChevron'
+import { IconCheck } from '../_icons/IconCheck'
+import { IconChevron } from '../_icons/IconChevron'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TDropdownProps = {
-	options: string[]
-	value: string
-	onChangeAction: (value: string) => void
-	className?: string
-	allItemsLabel?: string
+  options: string[]
+  value: string
+  onChangeAction: (value: string) => void
+  className?: string
+  allItemsLabel?: string
 }
 
 /**************************************************************************************************
@@ -28,50 +28,53 @@ type TDropdownProps = {
  *************************************************************************************************/
 
 export function Dropdown({
-	options,
-	value,
-	onChangeAction,
-	className,
-	allItemsLabel = 'All chains'
+  options,
+  value,
+  onChangeAction,
+  className,
+  allItemsLabel = 'All chains',
 }: TDropdownProps): ReactNode {
-	const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
 
-	const allOptions = [allItemsLabel, ...options]
+  const allOptions = [allItemsLabel, ...options]
 
-	return (
-		<div className={'relative'}>
-			<button
-				onClick={() => setIsOpen(!isOpen)}
-				className={cl(
-					'flex w-full items-center border border-white/5 justify-between rounded-full bg-white/5 px-6 py-2 text-left transition-colors hover:bg-secondHoverBg',
-					className
-				)}>
-				<span>{value}</span>
-				<IconChevron className={cl('ml-2 transition-transform size-3', isOpen ? 'rotate-90' : '-rotate-90')} />
-			</button>
+  return (
+    <div className={'relative'}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cl(
+          'flex w-full items-center border border-white/5 justify-between rounded-full bg-white/5 px-6 py-2 text-left transition-colors hover:bg-secondHoverBg',
+          className
+        )}
+      >
+        <span>{value}</span>
+        <IconChevron className={cl('ml-2 transition-transform size-3', isOpen ? 'rotate-90' : '-rotate-90')} />
+      </button>
 
-			{isOpen && (
-				<div
-					className={
-						'absolute right-0 top-10 z-50 mt-2 flex w-[240px] flex-col gap-1 overflow-hidden rounded-2xl bg-secondBg p-1'
-					}>
-					{allOptions.map(option => (
-						<button
-							key={option}
-							onClick={() => {
-								onChangeAction(option)
-								setIsOpen(false)
-							}}
-							className={cl(
-								'flex w-full items-center justify-between px-6 rounded-lg py-4 text-left transition-colors hover:bg-white/10',
-								option === value ? 'bg-white/10' : ''
-							)}>
-							<span>{option}</span>
-							{option === value && <IconCheck className={'size-3'} />}
-						</button>
-					))}
-				</div>
-			)}
-		</div>
-	)
+      {isOpen && (
+        <div
+          className={
+            'absolute right-0 top-10 z-50 mt-2 flex w-[240px] flex-col gap-1 overflow-hidden rounded-2xl bg-secondBg p-1'
+          }
+        >
+          {allOptions.map((option) => (
+            <button
+              key={option}
+              onClick={() => {
+                onChangeAction(option)
+                setIsOpen(false)
+              }}
+              className={cl(
+                'flex w-full items-center justify-between px-6 rounded-lg py-4 text-left transition-colors hover:bg-white/10',
+                option === value ? 'bg-white/10' : ''
+              )}
+            >
+              <span>{option}</span>
+              {option === value && <IconCheck className={'size-3'} />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/ElementCard.tsx b/app/[lang]/_components/ElementCard.tsx
index b98994d..686c70d 100644
--- a/app/[lang]/_components/ElementCard.tsx
+++ b/app/[lang]/_components/ElementCard.tsx
@@ -1,83 +1,84 @@
 'use client'
 
-import {motion} from 'framer-motion'
+import { motion } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
 
-import {cl} from '@/app/[lang]/_utils/cl'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 const MotionLink = motion(Link)
 
 type TElementCardProps = {
-	slug: string
-	title: string
-	description: string
-	featuredImg: {
-		url: string
-		width: number
-		height: number
-	}
-	baseURL: string
-	position: 'center' | 'bottom'
+  slug: string
+  title: string
+  description: string
+  featuredImg: {
+    url: string
+    width: number
+    height: number
+  }
+  baseURL: string
+  position: 'center' | 'bottom'
 }
 
 export function ElementCard(props: TElementCardProps): ReactNode {
-	const {slug, title, description, featuredImg, baseURL, position} = props
+  const { slug, title, description, featuredImg, baseURL, position } = props
 
-	return (
-		<MotionLink
-			key={slug}
-			initial={{opacity: 0, scale: 0.8}}
-			animate={{opacity: 1, scale: 1}}
-			transition={{duration: 0.3, ease: 'easeInOut'}}
-			href={`${baseURL}/${slug}`}
-			className={cl('rounded-2xl p-6 transition-colors bg-secondBg hover:bg-secondHoverBg group')}>
-			<div
-				className={cl(
-					'relative h-[204px] max-w-[408px] overflow-hidden rounded-2xl',
-					position === 'center' ? 'p-10' : 'px-10 pt-10'
-				)}>
-				<Image
-					src={'/wallets/cover.png'}
-					alt={'cover'}
-					width={408}
-					height={204}
-					priority
-					className={'pointer-events-none absolute inset-0 z-0 aspect-video size-full object-cover'}
-				/>
-				{featuredImg?.url ? (
-					<motion.div
-						initial={{opacity: 0, scale: 0.9}}
-						animate={{opacity: 1, scale: 1}}
-						transition={{duration: 0.5}}
-						className={'relative z-10 size-full object-contain'}>
-						<Image
-							src={getStrapiImageUrl(featuredImg?.url)}
-							alt={slug}
-							width={featuredImg?.width ?? 0}
-							height={featuredImg?.height ?? 0}
-							className={cl(
-								'size-full items-end object-contain transition-all group-hover:scale-105',
-								position === 'center' ? '' : 'object-bottom'
-							)}
-						/>
-					</motion.div>
-				) : (
-					<div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
-				)}
-			</div>
+  return (
+    <MotionLink
+      key={slug}
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+      href={`${baseURL}/${slug}`}
+      className={cl('rounded-2xl p-6 transition-colors bg-secondBg hover:bg-secondHoverBg group')}
+    >
+      <div
+        className={cl(
+          'relative h-[204px] max-w-[408px] overflow-hidden rounded-2xl',
+          position === 'center' ? 'p-10' : 'px-10 pt-10'
+        )}
+      >
+        <Image
+          src={'/wallets/cover.png'}
+          alt={'cover'}
+          width={408}
+          height={204}
+          priority
+          className={'pointer-events-none absolute inset-0 z-0 aspect-video size-full object-cover'}
+        />
+        {featuredImg?.url ? (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5 }}
+            className={'relative z-10 size-full object-contain'}
+          >
+            <Image
+              src={getStrapiImageUrl(featuredImg?.url)}
+              alt={slug}
+              width={featuredImg?.width ?? 0}
+              height={featuredImg?.height ?? 0}
+              className={cl(
+                'size-full items-end object-contain transition-all group-hover:scale-105',
+                position === 'center' ? '' : 'object-bottom'
+              )}
+            />
+          </motion.div>
+        ) : (
+          <div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
+        )}
+      </div>
 
-			<div className={'mt-6 flex flex-col gap-2'}>
-				<div>
-					<p className={'text-2xl text-white'}>{title}</p>
-					<p className={'line-clamp-6 whitespace-break-spaces break-keep text-sm text-gray-500'}>
-						{description}
-					</p>
-				</div>
-			</div>
-		</MotionLink>
-	)
+      <div className={'mt-6 flex flex-col gap-2'}>
+        <div>
+          <p className={'text-2xl text-white'}>{title}</p>
+          <p className={'line-clamp-6 whitespace-break-spaces break-keep text-sm text-gray-500'}>{description}</p>
+        </div>
+      </div>
+    </MotionLink>
+  )
 }
diff --git a/app/[lang]/_components/Footer.tsx b/app/[lang]/_components/Footer.tsx
index 65dae9c..97b4bc4 100644
--- a/app/[lang]/_components/Footer.tsx
+++ b/app/[lang]/_components/Footer.tsx
@@ -2,77 +2,70 @@
 
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import {LocalizedLink} from './LocalizedLink'
-import {ShapeshiftLogo} from '../_icons/ShapeshiftLogo'
-import {footerButtonTitle, footerLinks} from '../_utils/constants'
+import { LocalizedLink } from './LocalizedLink'
+import { ShapeshiftLogo } from '../_icons/ShapeshiftLogo'
+import { footerButtonTitle, footerLinks } from '../_utils/constants'
 
-import type {TAppLink} from '../_utils/constants'
-import type {ReactNode} from 'react'
+import type { TAppLink } from '../_utils/constants'
+import type { ReactNode } from 'react'
 
 export function Footer(): ReactNode {
-	return (
-		<div className={'relative border-t border-stroke bg-secondBg'}>
-			<div className={'mx-auto max-w-[1440px] px-4 py-8 lg:px-8'}>
-				{/* Top row: Logo and Donate */}
-				<div className={'flex flex-col items-center justify-between gap-10 lg:flex-row lg:gap-0'}>
-					<LocalizedLink href={'/'}>
-						<ShapeshiftLogo />
-					</LocalizedLink>
-					<Button
-						href={'https://giveth.io/project/shapeshift-dao'}
-						variant={'blue'}
-						title={footerButtonTitle}
-						hasArrow
-					/>
-				</div>
+  return (
+    <div className={'relative border-t border-stroke bg-secondBg'}>
+      <div className={'mx-auto max-w-[1440px] px-4 py-8 lg:px-8'}>
+        {/* Top row: Logo and Donate */}
+        <div className={'flex flex-col items-center justify-between gap-10 lg:flex-row lg:gap-0'}>
+          <LocalizedLink href={'/'}>
+            <ShapeshiftLogo />
+          </LocalizedLink>
+          <Button
+            href={'https://giveth.io/project/shapeshift-dao'}
+            variant={'blue'}
+            title={footerButtonTitle}
+            hasArrow
+          />
+        </div>
 
-				{/* Middle row: Menu items */}
-				<div className={'mx-auto mt-12 w-full max-w-[720px]'}>
-					<div className={'grid grid-cols-2 gap-8 lg:grid-cols-4'}>
-						{Object.entries(footerLinks).map(([category, links]) => (
-							<div
-								key={category}
-								className={'flex flex-col gap-4'}>
-								<h3 className={'cursor-default text-sm font-medium text-gray-500'}>{category}</h3>
-								<div className={'flex flex-col gap-3'}>
-									{links.map((link: TAppLink) => (
-										<LocalizedLink
-											key={link.name}
-											href={link.href}
-											target={link.target || (category === 'Connect' ? '_blank' : '_self')}
-											className={'text-sm text-white transition-all hover:text-blue'}>
-											{link.name}
-										</LocalizedLink>
-									))}
-								</div>
-							</div>
-						))}
-					</div>
-				</div>
+        {/* Middle row: Menu items */}
+        <div className={'mx-auto mt-12 w-full max-w-[720px]'}>
+          <div className={'grid grid-cols-2 gap-8 lg:grid-cols-4'}>
+            {Object.entries(footerLinks).map(([category, links]) => (
+              <div key={category} className={'flex flex-col gap-4'}>
+                <h3 className={'cursor-default text-sm font-medium text-gray-500'}>{category}</h3>
+                <div className={'flex flex-col gap-3'}>
+                  {links.map((link: TAppLink) => (
+                    <LocalizedLink
+                      key={link.name}
+                      href={link.href}
+                      target={link.target || (category === 'Connect' ? '_blank' : '_self')}
+                      className={'text-sm text-white transition-all hover:text-blue'}
+                    >
+                      {link.name}
+                    </LocalizedLink>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
 
-				{/* Bottom row: App QR and Copyright */}
-				<div
-					className={
-						'mt-12 flex flex-col items-center justify-between gap-6 border-t border-stroke pt-8 sm:flex-row'
-					}>
-					<div className={'flex items-center gap-6 rounded-2xl border border-stroke bg-black/95 p-2'}>
-						<span className={'p-4 text-2xl text-white'}>{'Get the app'}</span>
-						<div>
-							<Image
-								src={'/qrcode.png'}
-								alt={'qrcode'}
-								width={128}
-								height={128}
-							/>
-						</div>
-					</div>
-					<div className={'text-sm text-gray-500'}>
-						{`© ${new Date().getFullYear()} ShapeShift. All Rights Reserved`}
-					</div>
-				</div>
-			</div>
-		</div>
-	)
+        {/* Bottom row: App QR and Copyright */}
+        <div
+          className={'mt-12 flex flex-col items-center justify-between gap-6 border-t border-stroke pt-8 sm:flex-row'}
+        >
+          <div className={'flex items-center gap-6 rounded-2xl border border-stroke bg-black/95 p-2'}>
+            <span className={'p-4 text-2xl text-white'}>{'Get the app'}</span>
+            <div>
+              <Image src={'/qrcode.png'} alt={'qrcode'} width={128} height={128} />
+            </div>
+          </div>
+          <div className={'text-sm text-gray-500'}>
+            {`© ${new Date().getFullYear()} ShapeShift. All Rights Reserved`}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/FooterBanner.tsx b/app/[lang]/_components/FooterBanner.tsx
index 6a0083b..daa13a7 100644
--- a/app/[lang]/_components/FooterBanner.tsx
+++ b/app/[lang]/_components/FooterBanner.tsx
@@ -1,101 +1,87 @@
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import {LocalizedLink} from './LocalizedLink'
-import {cl} from '../_utils/cl'
+import { LocalizedLink } from './LocalizedLink'
+import { cl } from '../_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TFooterBanner = {
-	tag: string
-	title: string
-	href: string
-	buttonText: string
+  tag: string
+  title: string
+  href: string
+  buttonText: string
 }
 
 export function FooterBanner(data: TFooterBanner): ReactNode | null {
-	return (
-		<section className={'relative mb-40 h-[424px] w-full max-w-[1400px] overflow-hidden rounded-2xl lg:h-[504px]'}>
-			<div className={'mx-auto'}>
-				<Image
-					src={'/bannerFooterBg.png'}
-					alt={data.title}
-					width={2800}
-					height={1008}
-					className={'absolute inset-0 size-full object-cover'}
-				/>
+  return (
+    <section className={'relative mb-40 h-[424px] w-full max-w-[1400px] overflow-hidden rounded-2xl lg:h-[504px]'}>
+      <div className={'mx-auto'}>
+        <Image
+          src={'/bannerFooterBg.png'}
+          alt={data.title}
+          width={2800}
+          height={1008}
+          className={'absolute inset-0 size-full object-cover'}
+        />
 
-				<div className={'absolute inset-0 z-10 flex w-full flex-col items-center justify-center gap-4 px-4'}>
-					<div className={'rounded-3xl bg-white/10 px-6 py-2 text-white'}>{data.tag}</div>
-					<div
-						className={cl(
-							'mb-[60px] mt-4 max-w-[800px] text-center text-[36px] font-normal leading-[36px]',
-							'text-white md:text-[48px] md:leading-[48px] lg:text-7xl'
-						)}>
-						{data.title}
-					</div>
-					<Button
-						variant={'blue'}
-						href={data.href}
-						title={data.buttonText}
-						hasArrow
-						className={'w-full lg:w-[232px]'}
-					/>
-				</div>
-			</div>
-		</section>
-	)
+        <div className={'absolute inset-0 z-10 flex w-full flex-col items-center justify-center gap-4 px-4'}>
+          <div className={'rounded-3xl bg-white/10 px-6 py-2 text-white'}>{data.tag}</div>
+          <div
+            className={cl(
+              'mb-[60px] mt-4 max-w-[800px] text-center text-[36px] font-normal leading-[36px]',
+              'text-white md:text-[48px] md:leading-[48px] lg:text-7xl'
+            )}
+          >
+            {data.title}
+          </div>
+          <Button
+            variant={'blue'}
+            href={data.href}
+            title={data.buttonText}
+            hasArrow
+            className={'w-full lg:w-[232px]'}
+          />
+        </div>
+      </div>
+    </section>
+  )
 }
 
 export function FooterBannerMobileApp(data: TFooterBanner): ReactNode | null {
-	return (
-		<section className={'relative mb-40 h-[424px] w-full max-w-[1400px] overflow-hidden rounded-2xl lg:h-[504px]'}>
-			<div className={'mx-auto'}>
-				<Image
-					src={'/bannerFooterBg.png'}
-					alt={data.title}
-					width={2800}
-					height={1008}
-					className={'absolute inset-0 size-full object-cover'}
-				/>
+  return (
+    <section className={'relative mb-40 h-[424px] w-full max-w-[1400px] overflow-hidden rounded-2xl lg:h-[504px]'}>
+      <div className={'mx-auto'}>
+        <Image
+          src={'/bannerFooterBg.png'}
+          alt={data.title}
+          width={2800}
+          height={1008}
+          className={'absolute inset-0 size-full object-cover'}
+        />
 
-				<div className={'absolute inset-0 z-10 flex w-full flex-col items-center justify-center gap-4 px-4'}>
-					<div className={'rounded-3xl bg-white/10 px-6 py-2 text-white'}>{data.tag}</div>
-					<div
-						className={cl(
-							'mb-[60px] mt-4 max-w-[800px] text-center text-[36px] font-normal leading-[36px]',
-							'text-white md:text-[48px] md:leading-[48px] lg:text-7xl'
-						)}>
-						{data.title}
-					</div>
-					<div className={'flex items-center justify-center gap-6'}>
-						<LocalizedLink
-							href={'/apple-app-store'}
-							target={'_blank'}
-							className={'h-[40px] w-[130px]'}>
-							<Image
-								src={'/appstore.png'}
-								alt={'appstore'}
-								width={390}
-								height={120}
-							/>
-						</LocalizedLink>
+        <div className={'absolute inset-0 z-10 flex w-full flex-col items-center justify-center gap-4 px-4'}>
+          <div className={'rounded-3xl bg-white/10 px-6 py-2 text-white'}>{data.tag}</div>
+          <div
+            className={cl(
+              'mb-[60px] mt-4 max-w-[800px] text-center text-[36px] font-normal leading-[36px]',
+              'text-white md:text-[48px] md:leading-[48px] lg:text-7xl'
+            )}
+          >
+            {data.title}
+          </div>
+          <div className={'flex items-center justify-center gap-6'}>
+            <LocalizedLink href={'/apple-app-store'} target={'_blank'} className={'h-[40px] w-[130px]'}>
+              <Image src={'/appstore.png'} alt={'appstore'} width={390} height={120} />
+            </LocalizedLink>
 
-						<LocalizedLink
-							href={'/google-play-store'}
-							target={'_blank'}
-							className={'h-[40px] w-[130px]'}>
-							<Image
-								src={'/google_play.png'}
-								alt={'googleplay'}
-								width={390}
-								height={120}
-							/>
-						</LocalizedLink>
-					</div>
-				</div>
-			</div>
-		</section>
-	)
+            <LocalizedLink href={'/google-play-store'} target={'_blank'} className={'h-[40px] w-[130px]'}>
+              <Image src={'/google_play.png'} alt={'googleplay'} width={390} height={120} />
+            </LocalizedLink>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/HeaderItem.tsx b/app/[lang]/_components/HeaderItem.tsx
index c200700..e1ab08e 100644
--- a/app/[lang]/_components/HeaderItem.tsx
+++ b/app/[lang]/_components/HeaderItem.tsx
@@ -1,34 +1,33 @@
-import {LocalizedLink} from './LocalizedLink'
+import { LocalizedLink } from './LocalizedLink'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type THeaderItemProps = {
-	name: string
-	href: string
-	icon: ReactNode
-	target?: string
-	description?: string
-	onClick?: () => void
+  name: string
+  href: string
+  icon: ReactNode
+  target?: string
+  description?: string
+  onClick?: () => void
 }
 
-export default function HeaderItem({name, href, target, description, onClick, icon}: THeaderItemProps): ReactNode {
-	return (
-		<LocalizedLink
-			href={href}
-			target={target}
-			className={
-				'flex w-1/3 max-w-[232px] grow gap-2 rounded-lg px-6 py-4 transition-colors duration-300 hover:bg-white/10'
-			}
-			onClick={onClick}>
-			<div className={'w-6'}>{icon}</div>
-			<div className={'ml-4 flex max-h-[120px] max-w-[100px] flex-col gap-1'}>
-				<span className={'truncate whitespace-nowrap text-sm font-medium '}>{name}</span>
-				{description && (
-					<span className={'line-clamp-3 truncate whitespace-normal text-xs text-gray-500'}>
-						{description}
-					</span>
-				)}
-			</div>
-		</LocalizedLink>
-	)
+export default function HeaderItem({ name, href, target, description, onClick, icon }: THeaderItemProps): ReactNode {
+  return (
+    <LocalizedLink
+      href={href}
+      target={target}
+      className={
+        'flex w-1/3 max-w-[232px] grow gap-2 rounded-lg px-6 py-4 transition-colors duration-300 hover:bg-white/10'
+      }
+      onClick={onClick}
+    >
+      <div className={'w-6'}>{icon}</div>
+      <div className={'ml-4 flex max-h-[120px] max-w-[100px] flex-col gap-1'}>
+        <span className={'truncate whitespace-nowrap text-sm font-medium '}>{name}</span>
+        {description && (
+          <span className={'line-clamp-3 truncate whitespace-normal text-xs text-gray-500'}>{description}</span>
+        )}
+      </div>
+    </LocalizedLink>
+  )
 }
diff --git a/app/[lang]/_components/LandingCard.tsx b/app/[lang]/_components/LandingCard.tsx
index 2ab1d4a..b2c4e72 100644
--- a/app/[lang]/_components/LandingCard.tsx
+++ b/app/[lang]/_components/LandingCard.tsx
@@ -1,59 +1,58 @@
 import Image from 'next/image'
 
-import {LocalizedLink} from './LocalizedLink'
-import {RoundButton} from './RoundButton'
-import {cl} from '../_utils/cl'
+import { LocalizedLink } from './LocalizedLink'
+import { RoundButton } from './RoundButton'
+import { cl } from '../_utils/cl'
 
-import type {TCard} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TCard } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-function Card({data}: {data: TCard}): ReactNode {
-	return (
-		<div
-			className={cl(
-				'flex overflow-hidden group rounded-2xl group h-full bg-secondBg hover:bg-secondHoverBg cursor-pointer',
-				data.isTextFirst ? 'flex-col-reverse rounded-b-2xl' : 'flex-col'
-			)}>
-			<div className={'relative h-full p-6 lg:p-10'}>
-				<div className={'w-full'}>
-					<div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
-					<div className={'pr-16 text-gray-500'}>{data?.description}</div>
-				</div>
+function Card({ data }: { data: TCard }): ReactNode {
+  return (
+    <div
+      className={cl(
+        'flex overflow-hidden group rounded-2xl group h-full bg-secondBg hover:bg-secondHoverBg cursor-pointer',
+        data.isTextFirst ? 'flex-col-reverse rounded-b-2xl' : 'flex-col'
+      )}
+    >
+      <div className={'relative h-full p-6 lg:p-10'}>
+        <div className={'w-full'}>
+          <div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
+          <div className={'pr-16 text-gray-500'}>{data?.description}</div>
+        </div>
 
-				<RoundButton
-					iconName={'arrow'}
-					className={
-						'bg-blue-500 !absolute right-4 top-4 group-hover:scale-110 group-hover:bg-blueHover lg:right-6 lg:top-6'
-					}
-				/>
-			</div>
-			<div
-				className={cl(
-					'overflow-hidden min-h-64 group-hover:scale-[1.02] duration-300 transition-all',
-					data.isTextFirst ? 'rounded-t-2xl' : 'rounded-b-2xl'
-				)}>
-				<Image
-					src={data?.image.url}
-					alt={data?.title}
-					width={461}
-					height={219}
-					className={cl('size-full object-cover', data.isTextFirst ? 'rounded-t-2xl' : 'rounded-b-2xl')}
-				/>
-			</div>
-		</div>
-	)
+        <RoundButton
+          iconName={'arrow'}
+          className={
+            'bg-blue-500 !absolute right-4 top-4 group-hover:scale-110 group-hover:bg-blueHover lg:right-6 lg:top-6'
+          }
+        />
+      </div>
+      <div
+        className={cl(
+          'overflow-hidden min-h-64 group-hover:scale-[1.02] duration-300 transition-all',
+          data.isTextFirst ? 'rounded-t-2xl' : 'rounded-b-2xl'
+        )}
+      >
+        <Image
+          src={data?.image.url}
+          alt={data?.title}
+          width={461}
+          height={219}
+          className={cl('size-full object-cover', data.isTextFirst ? 'rounded-t-2xl' : 'rounded-b-2xl')}
+        />
+      </div>
+    </div>
+  )
 }
 
-export function LandingCard({data}: {data: TCard}): ReactNode {
-	if (data?.href) {
-		return (
-			<LocalizedLink
-				href={data?.href}
-				target={data?.target}
-				className={'size-full'}>
-				<Card data={data} />
-			</LocalizedLink>
-		)
-	}
-	return <Card data={data} />
+export function LandingCard({ data }: { data: TCard }): ReactNode {
+  if (data?.href) {
+    return (
+      <LocalizedLink href={data?.href} target={data?.target} className={'size-full'}>
+        <Card data={data} />
+      </LocalizedLink>
+    )
+  }
+  return <Card data={data} />
 }
diff --git a/app/[lang]/_components/LandingInfoCard.tsx b/app/[lang]/_components/LandingInfoCard.tsx
index a3b8c4b..4f3075c 100644
--- a/app/[lang]/_components/LandingInfoCard.tsx
+++ b/app/[lang]/_components/LandingInfoCard.tsx
@@ -1,18 +1,17 @@
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TLandingInfoCard = {
-	title: string
-	stat: string
+  title: string
+  stat: string
 }
 
-export function LandingInfoCard({title, stat}: TLandingInfoCard): ReactNode {
-	return (
-		<div
-			className={
-				'group flex flex-col gap-9 rounded-2xl bg-secondBg p-10 transition-all duration-100 lg:hover:bg-blue'
-			}>
-			<h1 className={'text-xl text-gray-600 lg:group-hover:text-white'}>{title}</h1>
-			<p className={'text-[40px] leading-[48px]'}>{stat}</p>
-		</div>
-	)
+export function LandingInfoCard({ title, stat }: TLandingInfoCard): ReactNode {
+  return (
+    <div
+      className={'group flex flex-col gap-9 rounded-2xl bg-secondBg p-10 transition-all duration-100 lg:hover:bg-blue'}
+    >
+      <h1 className={'text-xl text-gray-600 lg:group-hover:text-white'}>{title}</h1>
+      <p className={'text-[40px] leading-[48px]'}>{stat}</p>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/LocalizedLink.tsx b/app/[lang]/_components/LocalizedLink.tsx
index 99957b9..b9e5cf0 100644
--- a/app/[lang]/_components/LocalizedLink.tsx
+++ b/app/[lang]/_components/LocalizedLink.tsx
@@ -1,74 +1,68 @@
 'use client'
 
 import Link from 'next/link'
-import {usePathname} from 'next/navigation'
-import {forwardRef} from 'react'
+import { usePathname } from 'next/navigation'
+import { forwardRef } from 'react'
 
-import {DEFAULT_LANGUAGE, getLanguageFromPath} from '@/app/[lang]/_utils/i18nconfig'
+import { DEFAULT_LANGUAGE, getLanguageFromPath } from '@/app/[lang]/_utils/i18nconfig'
 
-import type {LinkProps} from 'next/link'
-import type {AnchorHTMLAttributes, ReactNode} from 'react'
-import type {UrlObject} from 'url'
+import type { LinkProps } from 'next/link'
+import type { AnchorHTMLAttributes, ReactNode } from 'react'
+import type { UrlObject } from 'url'
 
 type TLocalizedLinkProps = LinkProps &
-	AnchorHTMLAttributes<HTMLAnchorElement> & {
-		children: ReactNode
-	}
+  AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: ReactNode
+  }
 
 /**
  * A localized version of Next.js Link that automatically prepends the current language
  * to internal links when needed.
  */
-export const LocalizedLink = forwardRef<HTMLAnchorElement, TLocalizedLinkProps>(({href, children, ...props}, ref) => {
-	const pathname = usePathname()
-	const currentLanguage = getLanguageFromPath(pathname) || DEFAULT_LANGUAGE
+export const LocalizedLink = forwardRef<HTMLAnchorElement, TLocalizedLinkProps>(({ href, children, ...props }, ref) => {
+  const pathname = usePathname()
+  const currentLanguage = getLanguageFromPath(pathname) || DEFAULT_LANGUAGE
 
-	// Convert href to string for processing
-	const hrefString =
-		typeof href === 'string'
-			? href
-			: typeof href === 'object' &&
-				  href !== null &&
-				  'pathname' in href &&
-				  typeof (href as UrlObject).pathname === 'string'
-				? (href as UrlObject).pathname
-				: ''
+  // Convert href to string for processing
+  const hrefString =
+    typeof href === 'string'
+      ? href
+      : typeof href === 'object' &&
+          href !== null &&
+          'pathname' in href &&
+          typeof (href as UrlObject).pathname === 'string'
+        ? (href as UrlObject).pathname
+        : ''
 
-	// Don't modify external links, anchors, or already localized paths
-	if (
-		hrefString?.startsWith('http') ||
-		hrefString?.startsWith('#') ||
-		hrefString?.startsWith('mailto:') ||
-		hrefString?.startsWith('tel:') ||
-		!hrefString?.startsWith('/')
-	) {
-		return (
-			<Link
-				href={href}
-				ref={ref}
-				{...props}>
-				{children}
-			</Link>
-		)
-	}
+  // Don't modify external links, anchors, or already localized paths
+  if (
+    hrefString?.startsWith('http') ||
+    hrefString?.startsWith('#') ||
+    hrefString?.startsWith('mailto:') ||
+    hrefString?.startsWith('tel:') ||
+    !hrefString?.startsWith('/')
+  ) {
+    return (
+      <Link href={href} ref={ref} {...props}>
+        {children}
+      </Link>
+    )
+  }
 
-	// Check if the href already has a language prefix
-	const hasLanguagePrefix = hrefString.match(/^\/[a-z]{2}(\/|$)/)
+  // Check if the href already has a language prefix
+  const hasLanguagePrefix = hrefString.match(/^\/[a-z]{2}(\/|$)/)
 
-	// Build the localized href
-	let localizedHref = hrefString
-	if (!hasLanguagePrefix && currentLanguage !== DEFAULT_LANGUAGE) {
-		localizedHref = `/${currentLanguage}${hrefString}`
-	}
+  // Build the localized href
+  let localizedHref = hrefString
+  if (!hasLanguagePrefix && currentLanguage !== DEFAULT_LANGUAGE) {
+    localizedHref = `/${currentLanguage}${hrefString}`
+  }
 
-	return (
-		<Link
-			href={localizedHref}
-			ref={ref}
-			{...props}>
-			{children}
-		</Link>
-	)
+  return (
+    <Link href={localizedHref} ref={ref} {...props}>
+      {children}
+    </Link>
+  )
 })
 
 LocalizedLink.displayName = 'LocalizedLink'
diff --git a/app/[lang]/_components/Modal.tsx b/app/[lang]/_components/Modal.tsx
index 78447e6..73030fb 100644
--- a/app/[lang]/_components/Modal.tsx
+++ b/app/[lang]/_components/Modal.tsx
@@ -1,104 +1,96 @@
-import {Dialog, DialogPanel, Transition, TransitionChild} from '@headlessui/react'
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
 import Image from 'next/image'
-import {Fragment} from 'react'
+import { Fragment } from 'react'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import {RoundButton} from './RoundButton'
-import {cl} from '../_utils/cl'
+import { RoundButton } from './RoundButton'
+import { cl } from '../_utils/cl'
 
-import type {TStrapiNotification} from '@/app/[lang]/_components/strapi/types'
-import type {ReactElement} from 'react'
+import type { TStrapiNotification } from '@/app/[lang]/_components/strapi/types'
+import type { ReactElement } from 'react'
 
 type TModalProps = {
-	isOpen: boolean
-	onClose: VoidFunction
-	notification: TStrapiNotification | null
-	className?: string
+  isOpen: boolean
+  onClose: VoidFunction
+  notification: TStrapiNotification | null
+  className?: string
 }
 
-export function Modal({isOpen, onClose, notification, className}: TModalProps): ReactElement {
-	return (
-		<Transition
-			show={isOpen}
-			as={Fragment}>
-			<Dialog
-				as={'div'}
-				className={'relative z-[1000]'}
-				onClose={onClose}>
-				<TransitionChild
-					as={Fragment}
-					enter={'ease-out duration-300'}
-					enterFrom={'opacity-0'}
-					enterTo={'opacity-100'}
-					leave={'ease-in duration-200'}
-					leaveFrom={'opacity-100'}
-					leaveTo={'opacity-0'}>
-					<div className={'fixed inset-0 bg-[#0C0D0F80] backdrop-blur-lg transition-opacity'} />
-				</TransitionChild>
-				<div className={'fixed inset-0 z-[1001] overflow-y-auto'}>
-					<div
-						className={
-							'flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0'
-						}>
-						<TransitionChild
-							as={Fragment}
-							enter={'ease-out duration-300'}
-							enterFrom={'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'}
-							enterTo={'opacity-100 translate-y-0 sm:scale-100'}
-							leave={'ease-in duration-200'}
-							leaveFrom={'opacity-100 translate-y-0 sm:scale-100'}
-							leaveTo={'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'}>
-							<DialogPanel
-								className={cl(
-									'relative overflow-hidden border min-h-[568px] border-white/10 flex max-w-2xl',
-									'flex-col items-center justify-start rounded-[24px]',
-									'bg-secondBg !p-10 transition-all',
-									'sm:my-8 sm:w-full md:max-w-2xl sm:max-w-lg',
-									className
-								)}>
-								<div className={'top-0 flex'}>
-									<div
-										className={
-											'absolute right-3 top-5 mx-2 p-2 text-neutral-600 transition-colors hover:text-neutral-700'
-										}
-										onClick={onClose}>
-										<RoundButton iconName={'cross'} />
-									</div>
-								</div>
-								<div className={'flex flex-col items-center'}>
-									{notification?.tag && (
-										<div className={'mb-6 rounded-[24px] bg-blue/10 px-6 py-2 text-blue'}>
-											{notification?.tag}
-										</div>
-									)}
+export function Modal({ isOpen, onClose, notification, className }: TModalProps): ReactElement {
+  return (
+    <Transition show={isOpen} as={Fragment}>
+      <Dialog as={'div'} className={'relative z-[1000]'} onClose={onClose}>
+        <TransitionChild
+          as={Fragment}
+          enter={'ease-out duration-300'}
+          enterFrom={'opacity-0'}
+          enterTo={'opacity-100'}
+          leave={'ease-in duration-200'}
+          leaveFrom={'opacity-100'}
+          leaveTo={'opacity-0'}
+        >
+          <div className={'fixed inset-0 bg-[#0C0D0F80] backdrop-blur-lg transition-opacity'} />
+        </TransitionChild>
+        <div className={'fixed inset-0 z-[1001] overflow-y-auto'}>
+          <div className={'flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0'}>
+            <TransitionChild
+              as={Fragment}
+              enter={'ease-out duration-300'}
+              enterFrom={'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'}
+              enterTo={'opacity-100 translate-y-0 sm:scale-100'}
+              leave={'ease-in duration-200'}
+              leaveFrom={'opacity-100 translate-y-0 sm:scale-100'}
+              leaveTo={'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'}
+            >
+              <DialogPanel
+                className={cl(
+                  'relative overflow-hidden border min-h-[568px] border-white/10 flex max-w-2xl',
+                  'flex-col items-center justify-start rounded-[24px]',
+                  'bg-secondBg !p-10 transition-all',
+                  'sm:my-8 sm:w-full md:max-w-2xl sm:max-w-lg',
+                  className
+                )}
+              >
+                <div className={'top-0 flex'}>
+                  <div
+                    className={
+                      'absolute right-3 top-5 mx-2 p-2 text-neutral-600 transition-colors hover:text-neutral-700'
+                    }
+                    onClick={onClose}
+                  >
+                    <RoundButton iconName={'cross'} />
+                  </div>
+                </div>
+                <div className={'flex flex-col items-center'}>
+                  {notification?.tag && (
+                    <div className={'mb-6 rounded-[24px] bg-blue/10 px-6 py-2 text-blue'}>{notification?.tag}</div>
+                  )}
 
-									<h2 className={'mb-4 text-2xl lg:text-[40px] lg:leading-[40px]'}>
-										{notification?.title ?? ''}
-									</h2>
+                  <h2 className={'mb-4 text-2xl lg:text-[40px] lg:leading-[40px]'}>{notification?.title ?? ''}</h2>
 
-									<p className={'mb-10 text-gray-500'}>{notification?.description ?? ''}</p>
+                  <p className={'mb-10 text-gray-500'}>{notification?.description ?? ''}</p>
 
-									<Button
-										href={notification?.href ?? 'https://app.shapeshift.com/'}
-										title={'Learn more'}
-										variant={'blue'}
-										hasArrow
-									/>
+                  <Button
+                    href={notification?.href ?? 'https://app.shapeshift.com/'}
+                    title={'Learn more'}
+                    variant={'blue'}
+                    hasArrow
+                  />
 
-									<Image
-										src={'/modalBg.png'}
-										alt={'modal-background'}
-										width={1600}
-										height={480}
-										className={'absolute inset-x-0 bottom-0'}
-									/>
-								</div>
-							</DialogPanel>
-						</TransitionChild>
-					</div>
-				</div>
-			</Dialog>
-		</Transition>
-	)
+                  <Image
+                    src={'/modalBg.png'}
+                    alt={'modal-background'}
+                    width={1600}
+                    height={480}
+                    className={'absolute inset-x-0 bottom-0'}
+                  />
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
 }
diff --git a/app/[lang]/_components/NewsPost.tsx b/app/[lang]/_components/NewsPost.tsx
index d7b7125..444bfe4 100644
--- a/app/[lang]/_components/NewsPost.tsx
+++ b/app/[lang]/_components/NewsPost.tsx
@@ -15,70 +15,66 @@
  ********************************************************************************************/
 
 import Image from 'next/image'
-import {useMemo} from 'react'
+import { useMemo } from 'react'
 
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import {LocalizedLink} from './LocalizedLink'
-import {cl} from '../_utils/cl'
+import { LocalizedLink } from './LocalizedLink'
+import { cl } from '../_utils/cl'
 
-import type {TNewsroomPost} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TNewsroomPost } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-export function NewsPost({post, className}: {post: TNewsroomPost; className?: string}): ReactNode {
-	/********************************************************************************************
-	 * Memo: Creates a reusable date formatting function
-	 * Returns date in format: Month Day, Year
-	 * No dependencies as it's a static formatter
-	 ********************************************************************************************/
-	const formatDate = useMemo(
-		() =>
-			(date: string): string => {
-				return new Date(date).toLocaleDateString(undefined, {
-					year: 'numeric',
-					month: 'long',
-					day: 'numeric'
-				})
-			},
-		[]
-	)
+export function NewsPost({ post, className }: { post: TNewsroomPost; className?: string }): ReactNode {
+  /********************************************************************************************
+   * Memo: Creates a reusable date formatting function
+   * Returns date in format: Month Day, Year
+   * No dependencies as it's a static formatter
+   ********************************************************************************************/
+  const formatDate = useMemo(
+    () =>
+      (date: string): string => {
+        return new Date(date).toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })
+      },
+    []
+  )
 
-	return (
-		<LocalizedLink
-			rel={'noopener noreferrer'}
-			target={post.externalURL ? '_blank' : '_self'}
-			href={post.externalURL ? post.externalURL : `/newsroom/${post.slug}`}
-			className={cl(
-				'rounded-2xl p-6 transition-all duration-300 hover:scale-[1.02] hover:bg-secondHoverBg',
-				className
-			)}>
-			{/* Featured Image Container */}
-			<div className={'h-[204px] max-w-[408px] overflow-hidden rounded-2xl'}>
-				{post?.featuredImg?.url ? (
-					<Image
-						src={getStrapiImageUrl(post?.featuredImg?.url)}
-						alt={post.slug}
-						width={post?.featuredImg?.width ?? 0}
-						height={post?.featuredImg?.height ?? 0}
-						className={'size-full object-cover'}
-					/>
-				) : (
-					<div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
-				)}
-			</div>
+  return (
+    <LocalizedLink
+      rel={'noopener noreferrer'}
+      target={post.externalURL ? '_blank' : '_self'}
+      href={post.externalURL ? post.externalURL : `/newsroom/${post.slug}`}
+      className={cl('rounded-2xl p-6 transition-all duration-300 hover:scale-[1.02] hover:bg-secondHoverBg', className)}
+    >
+      {/* Featured Image Container */}
+      <div className={'h-[204px] max-w-[408px] overflow-hidden rounded-2xl'}>
+        {post?.featuredImg?.url ? (
+          <Image
+            src={getStrapiImageUrl(post?.featuredImg?.url)}
+            alt={post.slug}
+            width={post?.featuredImg?.width ?? 0}
+            height={post?.featuredImg?.height ?? 0}
+            className={'size-full object-cover'}
+          />
+        ) : (
+          <div className={'h-[204px] w-auto rounded-2xl bg-gray-500'} />
+        )}
+      </div>
 
-			{/* Post Meta Information */}
-			<div className={'mt-6 flex flex-col gap-2'}>
-				<div className={'flex items-center'}>
-					<p className={'mr-2 text-xs text-blue'}>{post.author || post.category}</p>
-					<p className={'no-translate text-xs text-gray-500'}>
-						{formatDate(post.publishedOn || post.publishedAt)}
-					</p>
-				</div>
-				<div>
-					<p className={'text-2xl text-white'}>{post.title}</p>
-				</div>
-			</div>
-		</LocalizedLink>
-	)
+      {/* Post Meta Information */}
+      <div className={'mt-6 flex flex-col gap-2'}>
+        <div className={'flex items-center'}>
+          <p className={'mr-2 text-xs text-blue'}>{post.author || post.category}</p>
+          <p className={'no-translate text-xs text-gray-500'}>{formatDate(post.publishedOn || post.publishedAt)}</p>
+        </div>
+        <div>
+          <p className={'text-2xl text-white'}>{post.title}</p>
+        </div>
+      </div>
+    </LocalizedLink>
+  )
 }
diff --git a/app/[lang]/_components/Notification.tsx b/app/[lang]/_components/Notification.tsx
index bd0d684..4618d08 100644
--- a/app/[lang]/_components/Notification.tsx
+++ b/app/[lang]/_components/Notification.tsx
@@ -1,11 +1,11 @@
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
-import {Modal} from './Modal'
-import {NotificationBar} from './NotificationBar'
-import {Popup} from './Popup'
+import { Modal } from './Modal'
+import { NotificationBar } from './NotificationBar'
+import { Popup } from './Popup'
 
-import type {TStrapiNotification} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TStrapiNotification } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 /****************************************************************************************************
  * Notification system component that manages different types of notifications (modal, banner,
@@ -19,139 +19,127 @@ import type {ReactNode} from 'react'
  * storage full, etc.). Returns null on read errors and silently fails on write errors.
  ****************************************************************************************************/
 const safeLocalStorage = {
-	getItem: (key: string): string | null => {
-		try {
-			return localStorage.getItem(key)
-		} catch {
-			return null
-		}
-	},
-	setItem: (key: string, value: string): void => {
-		try {
-			localStorage.setItem(key, value)
-		} catch (error) {
-			console.warn('Failed to save to localStorage:', error)
-		}
-	}
+  getItem: (key: string): string | null => {
+    try {
+      return localStorage.getItem(key)
+    } catch {
+      return null
+    }
+  },
+  setItem: (key: string, value: string): void => {
+    try {
+      localStorage.setItem(key, value)
+    } catch (error) {
+      console.warn('Failed to save to localStorage:', error)
+    }
+  },
 }
 
 export function Notification(): ReactNode {
-	const [notification, setNotification] = useState<TStrapiNotification | null>(null)
-	const [isModalOpen, setIsModalOpen] = useState(false)
-	const [isPopupOpen, setIsPopupOpen] = useState(false)
-	const [isBannerOpen, setIsBannerOpen] = useState(false)
-	const [isLoading, setIsLoading] = useState(true)
-
-	/****************************************************************************************************
-	 * Fetches notification data from Strapi CMS on component mount. Makes an authenticated API call
-	 * to retrieve the current notification configuration.
-	 ****************************************************************************************************/
-	useEffect(() => {
-		const abortController = new AbortController()
-
-		const fetchData = async (): Promise<void> => {
-			try {
-				setIsLoading(true)
-				const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/notification?populate=*`, {
-					headers: {
-						Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-					},
-					signal: abortController.signal
-				})
-
-				if (!res.ok) {
-					throw new Error(`HTTP error! status: ${res.status}`)
-				}
-
-				const data = await res.json()
-				if (data?.data) {
-					setNotification(data.data)
-				}
-			} catch (error) {
-				if (error instanceof Error && error.name !== 'AbortError') {
-					console.error('Error fetching notification:', error)
-				}
-			} finally {
-				setIsLoading(false)
-			}
-		}
-
-		fetchData()
-
-		return () => {
-			abortController.abort()
-		}
-	}, [])
-
-	/****************************************************************************************************
-	 * Updates notification visibility based on type and enabled status. Checks localStorage for
-	 * dismissed notifications and sets the appropriate state for modal, popup, or banner display.
-	 ****************************************************************************************************/
-	useEffect(() => {
-		if (!notification || isLoading) {
-			return
-		}
-
-		const isDismissed = safeLocalStorage.getItem(`notification-dismissed-${notification.title}`) === 'true'
-
-		if (!isDismissed && notification.enabled) {
-			setIsBannerOpen(notification.type === 'bar')
-			setIsModalOpen(notification.type === 'modal')
-			setIsPopupOpen(notification.type === 'popup')
-		} else {
-			setIsBannerOpen(false)
-			setIsModalOpen(false)
-			setIsPopupOpen(false)
-		}
-	}, [notification, isLoading])
-
-	/****************************************************************************************************
-	 * Handles closing of notifications by storing dismissal state in localStorage and updating the
-	 * component state to hide the notification.
-	 *
-	 * @param type: The type of notification to close ('bar', 'modal', or 'popup')
-	 ****************************************************************************************************/
-	const handleClose = (type: 'bar' | 'modal' | 'popup'): void => {
-		if (notification?.title) {
-			safeLocalStorage.setItem(`notification-dismissed-${notification.title}`, 'true')
-		}
-
-		switch (type) {
-			case 'bar':
-				setIsBannerOpen(false)
-				break
-			case 'modal':
-				setIsModalOpen(false)
-				break
-			case 'popup':
-				setIsPopupOpen(false)
-				break
-			default:
-				break
-		}
-	}
-
-	if (isLoading) {
-		return null
-	}
-
-	return (
-		<>
-			<NotificationBar
-				isOpen={isBannerOpen}
-				onClose={() => handleClose('bar')}
-				notification={notification}
-			/>
-			<Modal
-				isOpen={isModalOpen}
-				onClose={() => handleClose('modal')}
-				notification={notification}
-			/>
-			<Popup
-				isOpen={isPopupOpen}
-				notification={notification}
-				onClose={() => handleClose('popup')}
-			/>
-		</>
-	)
+  const [notification, setNotification] = useState<TStrapiNotification | null>(null)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isPopupOpen, setIsPopupOpen] = useState(false)
+  const [isBannerOpen, setIsBannerOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  /****************************************************************************************************
+   * Fetches notification data from Strapi CMS on component mount. Makes an authenticated API call
+   * to retrieve the current notification configuration.
+   ****************************************************************************************************/
+  useEffect(() => {
+    const abortController = new AbortController()
+
+    const fetchData = async (): Promise<void> => {
+      try {
+        setIsLoading(true)
+        const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/notification?populate=*`, {
+          headers: {
+            Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+          },
+          signal: abortController.signal,
+        })
+
+        if (!res.ok) {
+          throw new Error(`HTTP error! status: ${res.status}`)
+        }
+
+        const data = await res.json()
+        if (data?.data) {
+          setNotification(data.data)
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name !== 'AbortError') {
+          console.error('Error fetching notification:', error)
+        }
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchData()
+
+    return () => {
+      abortController.abort()
+    }
+  }, [])
+
+  /****************************************************************************************************
+   * Updates notification visibility based on type and enabled status. Checks localStorage for
+   * dismissed notifications and sets the appropriate state for modal, popup, or banner display.
+   ****************************************************************************************************/
+  useEffect(() => {
+    if (!notification || isLoading) {
+      return
+    }
+
+    const isDismissed = safeLocalStorage.getItem(`notification-dismissed-${notification.title}`) === 'true'
+
+    if (!isDismissed && notification.enabled) {
+      setIsBannerOpen(notification.type === 'bar')
+      setIsModalOpen(notification.type === 'modal')
+      setIsPopupOpen(notification.type === 'popup')
+    } else {
+      setIsBannerOpen(false)
+      setIsModalOpen(false)
+      setIsPopupOpen(false)
+    }
+  }, [notification, isLoading])
+
+  /****************************************************************************************************
+   * Handles closing of notifications by storing dismissal state in localStorage and updating the
+   * component state to hide the notification.
+   *
+   * @param type: The type of notification to close ('bar', 'modal', or 'popup')
+   ****************************************************************************************************/
+  const handleClose = (type: 'bar' | 'modal' | 'popup'): void => {
+    if (notification?.title) {
+      safeLocalStorage.setItem(`notification-dismissed-${notification.title}`, 'true')
+    }
+
+    switch (type) {
+      case 'bar':
+        setIsBannerOpen(false)
+        break
+      case 'modal':
+        setIsModalOpen(false)
+        break
+      case 'popup':
+        setIsPopupOpen(false)
+        break
+      default:
+        break
+    }
+  }
+
+  if (isLoading) {
+    return null
+  }
+
+  return (
+    <>
+      <NotificationBar isOpen={isBannerOpen} onClose={() => handleClose('bar')} notification={notification} />
+      <Modal isOpen={isModalOpen} onClose={() => handleClose('modal')} notification={notification} />
+      <Popup isOpen={isPopupOpen} notification={notification} onClose={() => handleClose('popup')} />
+    </>
+  )
 }
diff --git a/app/[lang]/_components/NotificationBar.tsx b/app/[lang]/_components/NotificationBar.tsx
index c1269a0..175578c 100644
--- a/app/[lang]/_components/NotificationBar.tsx
+++ b/app/[lang]/_components/NotificationBar.tsx
@@ -1,49 +1,46 @@
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
-import {IconClose} from '../_icons/IconClose'
+import { IconClose } from '../_icons/IconClose'
 
-import type {TStrapiNotification} from '@/app/[lang]/_components/strapi/types'
-import type {ReactElement} from 'react'
+import type { TStrapiNotification } from '@/app/[lang]/_components/strapi/types'
+import type { ReactElement } from 'react'
 
 export function NotificationBar({
-	notification,
-	onClose,
-	isOpen
+  notification,
+  onClose,
+  isOpen,
 }: {
-	notification: TStrapiNotification | null
-	onClose: () => void
-	isOpen: boolean
+  notification: TStrapiNotification | null
+  onClose: () => void
+  isOpen: boolean
 }): ReactElement | null {
-	if (!notification) {
-		return null
-	}
-	return (
-		<>
-			{isOpen && (
-				<div className={'relative'}>
-					<div
-						className={
-							'inset-x-0 top-0 z-50 -mx-4 mb-6 flex w-screen flex-col items-center justify-center gap-4 bg-blue p-4 px-16 lg:flex-row'
-						}>
-						<p className={'whitespace-nowrap'}>{notification.title}</p>
-						<p className={'text-center lg:text-left'}>{notification.description}</p>
-						<Button
-							title={'Learn more'}
-							variant={'blue'}
-							hasArrow
-							href={notification?.href ?? '#'}
-							className={
-								'!h-10 !min-w-[152px] !rounded-[24px] !border !border-white/10 hover:!scale-100 '
-							}
-						/>
-						<button
-							onClick={onClose}
-							className={'absolute right-0 top-4'}>
-							<IconClose />
-						</button>
-					</div>
-				</div>
-			)}
-		</>
-	)
+  if (!notification) {
+    return null
+  }
+  return (
+    <>
+      {isOpen && (
+        <div className={'relative'}>
+          <div
+            className={
+              'inset-x-0 top-0 z-50 -mx-4 mb-6 flex w-screen flex-col items-center justify-center gap-4 bg-blue p-4 px-16 lg:flex-row'
+            }
+          >
+            <p className={'whitespace-nowrap'}>{notification.title}</p>
+            <p className={'text-center lg:text-left'}>{notification.description}</p>
+            <Button
+              title={'Learn more'}
+              variant={'blue'}
+              hasArrow
+              href={notification?.href ?? '#'}
+              className={'!h-10 !min-w-[152px] !rounded-[24px] !border !border-white/10 hover:!scale-100 '}
+            />
+            <button onClick={onClose} className={'absolute right-0 top-4'}>
+              <IconClose />
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  )
 }
diff --git a/app/[lang]/_components/Popup.tsx b/app/[lang]/_components/Popup.tsx
index d3eb716..363d844 100644
--- a/app/[lang]/_components/Popup.tsx
+++ b/app/[lang]/_components/Popup.tsx
@@ -1,15 +1,15 @@
-import {motion} from 'motion/react'
+import { motion } from 'motion/react'
 import Link from 'next/link'
 
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import {IconArrow} from '../_icons/IconArrow'
-import {IconClose} from '../_icons/IconClose'
-import {cl} from '../_utils/cl'
-import {popupAnimation} from '../_utils/constants'
+import { IconArrow } from '../_icons/IconArrow'
+import { IconClose } from '../_icons/IconClose'
+import { cl } from '../_utils/cl'
+import { popupAnimation } from '../_utils/constants'
 
-import type {TStrapiNotification} from '@/app/[lang]/_components/strapi/types'
-import type {ReactElement} from 'react'
+import type { TStrapiNotification } from '@/app/[lang]/_components/strapi/types'
+import type { ReactElement } from 'react'
 
 /************************************************************************************************
  * Notification Popup Component
@@ -22,91 +22,83 @@ import type {ReactElement} from 'react'
  * - Background image from Strapi
  ************************************************************************************************/
 export function Popup({
-	notification,
-	onClose,
-	isOpen
+  notification,
+  onClose,
+  isOpen,
 }: {
-	notification: TStrapiNotification | null
-	onClose: () => void
-	isOpen: boolean
+  notification: TStrapiNotification | null
+  onClose: () => void
+  isOpen: boolean
 }): ReactElement {
-	return (
-		<>
-			{isOpen && (
-				<div
-					style={{
-						bottom: '24px',
-						right: '24px'
-					}}
-					className={'fixed bottom-6 right-6 z-[1005]'}>
-					<motion.div
-						variants={popupAnimation}
-						initial={'initial'}
-						animate={'animate'}
-						exit={'exit'}
-						className={cl(
-							'relative flex flex-col',
-							'w-[400px] min-h-[200px]',
-							'rounded-2xl',
-							'bg-[#12141A] border border-white/10',
-							'p-6 pb-8',
-							'transition-all duration-300',
-							'max-md:w-[350px] max-md:p-4'
-						)}
-						style={{
-							...(notification?.bgImage?.url
-								? {
-										background: `url(${getStrapiImageUrl(notification.bgImage.url)}) no-repeat center center`,
-										backgroundSize: 'cover'
-									}
-								: null)
-						}}>
-						<button
-							onClick={onClose}
-							className={cl(
-								'absolute right-4 top-4',
-								'w-10 h-10 rounded-full',
-								'bg-[#2a2d35] hover:bg-[#3a3d45]',
-								'flex items-center justify-center',
-								'transition-colors duration-200',
-								'text-white/70 hover:text-white'
-							)}
-							aria-label={'Close notification'}>
-							<IconClose
-								width={16}
-								height={16}
-							/>
-						</button>
-						<div className={'flex-1 pr-8'}>
-							<h2 className={'mb-4 text-2xl font-bold leading-tight text-white'}>
-								{notification?.title ?? ''}
-							</h2>
-							<p className={'mb-6 text-base leading-relaxed text-white/80'}>
-								{notification?.description ?? ''}
-							</p>
-						</div>
-						<Link
-							href={notification?.href ?? '#'}
-							className={cl(
-								'inline-flex items-center gap-3',
-								'px-6 py-3 rounded-full',
-								'bg-white text-black',
-								'font-medium text-base',
-								'hover:bg-gray-100',
-								'transition-colors duration-200',
-								'no-underline w-max'
-							)}>
-							{'Learn more'}
-							<IconArrow
-								width={20}
-								height={20}
-								strokeWidth={2}
-								className={'size-4 rotate-45'}
-							/>
-						</Link>
-					</motion.div>
-				</div>
-			)}
-		</>
-	)
+  return (
+    <>
+      {isOpen && (
+        <div
+          style={{
+            bottom: '24px',
+            right: '24px',
+          }}
+          className={'fixed bottom-6 right-6 z-[1005]'}
+        >
+          <motion.div
+            variants={popupAnimation}
+            initial={'initial'}
+            animate={'animate'}
+            exit={'exit'}
+            className={cl(
+              'relative flex flex-col',
+              'w-[400px] min-h-[200px]',
+              'rounded-2xl',
+              'bg-[#12141A] border border-white/10',
+              'p-6 pb-8',
+              'transition-all duration-300',
+              'max-md:w-[350px] max-md:p-4'
+            )}
+            style={{
+              ...(notification?.bgImage?.url
+                ? {
+                    background: `url(${getStrapiImageUrl(notification.bgImage.url)}) no-repeat center center`,
+                    backgroundSize: 'cover',
+                  }
+                : null),
+            }}
+          >
+            <button
+              onClick={onClose}
+              className={cl(
+                'absolute right-4 top-4',
+                'w-10 h-10 rounded-full',
+                'bg-[#2a2d35] hover:bg-[#3a3d45]',
+                'flex items-center justify-center',
+                'transition-colors duration-200',
+                'text-white/70 hover:text-white'
+              )}
+              aria-label={'Close notification'}
+            >
+              <IconClose width={16} height={16} />
+            </button>
+            <div className={'flex-1 pr-8'}>
+              <h2 className={'mb-4 text-2xl font-bold leading-tight text-white'}>{notification?.title ?? ''}</h2>
+              <p className={'mb-6 text-base leading-relaxed text-white/80'}>{notification?.description ?? ''}</p>
+            </div>
+            <Link
+              href={notification?.href ?? '#'}
+              className={cl(
+                'inline-flex items-center gap-3',
+                'px-6 py-3 rounded-full',
+                'bg-white text-black',
+                'font-medium text-base',
+                'hover:bg-gray-100',
+                'transition-colors duration-200',
+                'no-underline w-max'
+              )}
+            >
+              {'Learn more'}
+              <IconArrow width={20} height={20} strokeWidth={2} className={'size-4 rotate-45'} />
+            </Link>
+          </motion.div>
+        </div>
+      )}
+    </>
+  )
 }
diff --git a/app/[lang]/_components/QuestionSection.tsx b/app/[lang]/_components/QuestionSection.tsx
index 8e7e0d3..c3f1ba7 100644
--- a/app/[lang]/_components/QuestionSection.tsx
+++ b/app/[lang]/_components/QuestionSection.tsx
@@ -1,43 +1,35 @@
 'use client'
 
-import {AnimatePresence, motion} from 'framer-motion'
-import {useState} from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState } from 'react'
 
-import type {TFaqSectionItem} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TFaqSectionItem } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 /**
  * AnimatedPlusMinusIcon renders a plus icon that animates into a minus icon
  * by collapsing the vertical stroke. The horizontal stroke remains constant.
  * @param isOpen - if true, the vertical stroke scales to 0 (minus state)
  */
-export const AnimatedPlusMinusIcon = ({isOpen}: {isOpen: boolean}): ReactNode => {
-	return (
-		<motion.svg
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}>
-			{/* Horizontal stroke as specified */}
-			<path
-				d={'M2 12L22 12'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-			/>
-			{/* Vertical stroke animates its scaleY to collapse when open */}
-			<motion.path
-				d={'M12 2L12 22'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-				animate={{rotate: isOpen ? 90 : 0, scaleY: isOpen ? 0 : 1}}
-				initial={{rotate: 0, scaleY: 1}}
-				transition={{duration: 0.2, ease: 'easeInOut'}}
-				// Set transform origin at the center (12,12) so it rotates and scales symmetrically
-				style={{transformOrigin: '12px 12px'}}
-			/>
-		</motion.svg>
-	)
+export const AnimatedPlusMinusIcon = ({ isOpen }: { isOpen: boolean }): ReactNode => {
+  return (
+    <motion.svg width={'24'} height={'24'} viewBox={'0 0 24 24'}>
+      {/* Horizontal stroke as specified */}
+      <path d={'M2 12L22 12'} stroke={'currentColor'} strokeWidth={'3'} strokeLinecap={'round'} />
+      {/* Vertical stroke animates its scaleY to collapse when open */}
+      <motion.path
+        d={'M12 2L12 22'}
+        stroke={'currentColor'}
+        strokeWidth={'3'}
+        strokeLinecap={'round'}
+        animate={{ rotate: isOpen ? 90 : 0, scaleY: isOpen ? 0 : 1 }}
+        initial={{ rotate: 0, scaleY: 1 }}
+        transition={{ duration: 0.2, ease: 'easeInOut' }}
+        // Set transform origin at the center (12,12) so it rotates and scales symmetrically
+        style={{ transformOrigin: '12px 12px' }}
+      />
+    </motion.svg>
+  )
 }
 
 /**
@@ -45,37 +37,37 @@ export const AnimatedPlusMinusIcon = ({isOpen}: {isOpen: boolean}): ReactNode =>
  * On click, it toggles the answer and animates the plus icon to a minus by collapsing the vertical stroke.
  * @param {TFaqSectionItem} faqSectionItem - The FAQ section item data.
  */
-export const QuestionSection = ({faqSectionItem}: {faqSectionItem: TFaqSectionItem}): ReactNode | null => {
-	const [isOpen, setIsOpen] = useState(false)
+export const QuestionSection = ({ faqSectionItem }: { faqSectionItem: TFaqSectionItem }): ReactNode | null => {
+  const [isOpen, setIsOpen] = useState(false)
 
-	return (
-		<div className={'group rounded-2xl bg-secondBg hover:bg-secondHoverBg'}>
-			<div
-				className={'flex cursor-pointer items-center justify-between px-10 py-8'}
-				onClick={() => setIsOpen(!isOpen)}>
-				<div className={'text-2xl'}>{faqSectionItem.question}</div>
-				<div
-					className={
-						'flex size-12 min-w-[48px] items-center justify-center rounded-full bg-white/10 transition-all duration-300 group-hover:scale-[1.16] group-hover:bg-blueHover'
-					}>
-					<AnimatedPlusMinusIcon isOpen={isOpen} />
-				</div>
-			</div>
-			<AnimatePresence>
-				{isOpen && (
-					<motion.div
-						initial={{height: 0, opacity: 0}}
-						animate={{height: 'auto', opacity: 1}}
-						exit={{height: 0, opacity: 0}}
-						transition={{
-							duration: 0.3,
-							ease: 'easeInOut'
-						}}
-						className={'overflow-hidden'}>
-						<div className={'rounded-2xl px-10 pb-6 text-gray-500'}>{faqSectionItem.answer}</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
-		</div>
-	)
+  return (
+    <div className={'group rounded-2xl bg-secondBg hover:bg-secondHoverBg'}>
+      <div className={'flex cursor-pointer items-center justify-between px-10 py-8'} onClick={() => setIsOpen(!isOpen)}>
+        <div className={'text-2xl'}>{faqSectionItem.question}</div>
+        <div
+          className={
+            'flex size-12 min-w-[48px] items-center justify-center rounded-full bg-white/10 transition-all duration-300 group-hover:scale-[1.16] group-hover:bg-blueHover'
+          }
+        >
+          <AnimatedPlusMinusIcon isOpen={isOpen} />
+        </div>
+      </div>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{
+              duration: 0.3,
+              ease: 'easeInOut',
+            }}
+            className={'overflow-hidden'}
+          >
+            <div className={'rounded-2xl px-10 pb-6 text-gray-500'}>{faqSectionItem.answer}</div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/RoundButton.tsx b/app/[lang]/_components/RoundButton.tsx
index 3f481e5..77837e9 100644
--- a/app/[lang]/_components/RoundButton.tsx
+++ b/app/[lang]/_components/RoundButton.tsx
@@ -1,36 +1,37 @@
-import {IconArrow} from '../_icons/IconArrow'
-import {IconClose} from '../_icons/IconClose'
-import {IconMinus} from '../_icons/IconMinus'
-import {IconPlus} from '../_icons/IconPlus'
-import {cl} from '../_utils/cl'
+import { IconArrow } from '../_icons/IconArrow'
+import { IconClose } from '../_icons/IconClose'
+import { IconMinus } from '../_icons/IconMinus'
+import { IconPlus } from '../_icons/IconPlus'
+import { cl } from '../_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 const icons = {
-	arrow: <IconArrow className={'text-white'} />,
-	plus: <IconPlus className={'text-white'} />,
-	minus: <IconMinus className={'text-white'} />,
-	cross: <IconClose className={'text-white'} />
+  arrow: <IconArrow className={'text-white'} />,
+  plus: <IconPlus className={'text-white'} />,
+  minus: <IconMinus className={'text-white'} />,
+  cross: <IconClose className={'text-white'} />,
 }
 
 export function RoundButton(props: {
-	className?: string
-	iconName: 'arrow' | 'plus' | 'minus' | 'cross'
-	onClick?: () => void
+  className?: string
+  iconName: 'arrow' | 'plus' | 'minus' | 'cross'
+  onClick?: () => void
 }): ReactNode {
-	const {className, iconName, onClick} = props
+  const { className, iconName, onClick } = props
 
-	return (
-		<>
-			<button
-				className={cl(
-					'flex size-[48px] items-center justify-center rounded-full bg-white/10',
-					'hover:bg-blueHover hover:scale-110 transition-all duration-300',
-					className
-				)}
-				onClick={onClick}>
-				{icons[iconName]}
-			</button>
-		</>
-	)
+  return (
+    <>
+      <button
+        className={cl(
+          'flex size-[48px] items-center justify-center rounded-full bg-white/10',
+          'hover:bg-blueHover hover:scale-110 transition-all duration-300',
+          className
+        )}
+        onClick={onClick}
+      >
+        {icons[iconName]}
+      </button>
+    </>
+  )
 }
diff --git a/app/[lang]/_components/SearchBar.tsx b/app/[lang]/_components/SearchBar.tsx
index 1344f87..761ff88 100644
--- a/app/[lang]/_components/SearchBar.tsx
+++ b/app/[lang]/_components/SearchBar.tsx
@@ -1,24 +1,24 @@
 'use client'
 
 type TSearchProps = {
-	searchQuery: string
-	setSearchQueryAction: (query: string) => void
+  searchQuery: string
+  setSearchQueryAction: (query: string) => void
 }
 
-export function SearchBar({searchQuery, setSearchQueryAction}: TSearchProps): JSX.Element {
-	return (
-		<div className={'relative mb-8'}>
-			<div className={'flex w-full justify-center'}>
-				<input
-					type={'text'}
-					value={searchQuery}
-					onChange={e => setSearchQueryAction(e.target.value)}
-					placeholder={'Search'}
-					className={
-						'w-1/2 rounded-2xl border-none bg-white/5 px-5 py-6 text-white outline-none focus:border-none focus:outline-none focus:ring-1 focus:ring-white/50'
-					}
-				/>
-			</div>
-		</div>
-	)
+export function SearchBar({ searchQuery, setSearchQueryAction }: TSearchProps): JSX.Element {
+  return (
+    <div className={'relative mb-8'}>
+      <div className={'flex w-full justify-center'}>
+        <input
+          type={'text'}
+          value={searchQuery}
+          onChange={(e) => setSearchQueryAction(e.target.value)}
+          placeholder={'Search'}
+          className={
+            'w-1/2 rounded-2xl border-none bg-white/5 px-5 py-6 text-white outline-none focus:border-none focus:outline-none focus:ring-1 focus:ring-white/50'
+          }
+        />
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/StrapiDiscover.tsx b/app/[lang]/_components/StrapiDiscover.tsx
index c723dd7..5fc0456 100644
--- a/app/[lang]/_components/StrapiDiscover.tsx
+++ b/app/[lang]/_components/StrapiDiscover.tsx
@@ -1,41 +1,41 @@
-import {ElementCard} from '@/app/[lang]/_components/ElementCard'
+import { ElementCard } from '@/app/[lang]/_components/ElementCard'
 
-import type {TDiscoverData} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TDiscoverData } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-export function StrapiDiscover(props: {discover?: TDiscoverData[] | null; isLoading?: boolean}): ReactNode {
-	const {discover, isLoading} = props
-	if (isLoading) {
-		return <div className={'h-[50vh]'} />
-	}
+export function StrapiDiscover(props: { discover?: TDiscoverData[] | null; isLoading?: boolean }): ReactNode {
+  const { discover, isLoading } = props
+  if (isLoading) {
+    return <div className={'h-[50vh]'} />
+  }
 
-	if (!discover || discover.length === 0) {
-		return (
-			<div className={'flex w-full justify-center'}>
-				<div className={'container flex flex-col items-center justify-center py-16'}>
-					<p className={'text-xl text-gray-400'}>{'No discover items available yet.'}</p>
-				</div>
-			</div>
-		)
-	}
+  if (!discover || discover.length === 0) {
+    return (
+      <div className={'flex w-full justify-center'}>
+        <div className={'container flex flex-col items-center justify-center py-16'}>
+          <p className={'text-xl text-gray-400'}>{'No discover items available yet.'}</p>
+        </div>
+      </div>
+    )
+  }
 
-	return (
-		<div className={'flex w-full justify-center'}>
-			<div className={'container flex flex-col justify-center'}>
-				<div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
-					{discover.map(discover => (
-						<ElementCard
-							key={discover.slug}
-							slug={discover.slug}
-							title={discover.title}
-							description={discover.description}
-							featuredImg={discover.featuredImg}
-							baseURL={'/discover'}
-							position={'center'}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	)
+  return (
+    <div className={'flex w-full justify-center'}>
+      <div className={'container flex flex-col justify-center'}>
+        <div className={'mb-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3'}>
+          {discover.map((discover) => (
+            <ElementCard
+              key={discover.slug}
+              slug={discover.slug}
+              title={discover.title}
+              description={discover.description}
+              featuredImg={discover.featuredImg}
+              baseURL={'/discover'}
+              position={'center'}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/StrapiFAQ.tsx b/app/[lang]/_components/StrapiFAQ.tsx
index 32a0ea7..dcceba3 100644
--- a/app/[lang]/_components/StrapiFAQ.tsx
+++ b/app/[lang]/_components/StrapiFAQ.tsx
@@ -6,43 +6,43 @@
 
 'use client'
 
-import {useCallback, useEffect, useState} from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
-import {QuestionSection} from '@/app/[lang]/_components/QuestionSection'
-import {getFaq} from '@/app/[lang]/_utils/query'
+import { QuestionSection } from '@/app/[lang]/_components/QuestionSection'
+import { getFaq } from '@/app/[lang]/_utils/query'
 
-import type {TFaqSectionItem} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TFaqSectionItem } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 export function StrapiFAQ(): ReactNode {
-	const [faqItems, setFaqItems] = useState<TFaqSectionItem[]>([])
-
-	/* Callback: Fetches FAQ items from Strapi CMS
-	 * No dependencies as it's a static fetch
-	 */
-	const handleFAQItems = useCallback(async () => {
-		const data = await getFaq()
-		const allQuestions = data?.faqSection.flatMap(section => section.faqSectionItem) ?? []
-		setFaqItems(allQuestions)
-	}, [])
-
-	/* Effect: Loads FAQ items on component mount
-	 * Deps: handleFAQItems - Reruns if the callback changes
-	 */
-	useEffect(() => {
-		handleFAQItems()
-	}, [handleFAQItems])
-
-	return (
-		<div>
-			<div className={'mb-6 text-[40px] leading-10 lg:mb-[77px] lg:text-7xl'}>{'FAQ'}</div>
-			<div className={'flex flex-col gap-2'}>
-				{faqItems.slice(0, 7).map(question => (
-					<div key={question.id}>
-						<QuestionSection faqSectionItem={question} />
-					</div>
-				))}
-			</div>
-		</div>
-	)
+  const [faqItems, setFaqItems] = useState<TFaqSectionItem[]>([])
+
+  /* Callback: Fetches FAQ items from Strapi CMS
+   * No dependencies as it's a static fetch
+   */
+  const handleFAQItems = useCallback(async () => {
+    const data = await getFaq()
+    const allQuestions = data?.faqSection.flatMap((section) => section.faqSectionItem) ?? []
+    setFaqItems(allQuestions)
+  }, [])
+
+  /* Effect: Loads FAQ items on component mount
+   * Deps: handleFAQItems - Reruns if the callback changes
+   */
+  useEffect(() => {
+    handleFAQItems()
+  }, [handleFAQItems])
+
+  return (
+    <div>
+      <div className={'mb-6 text-[40px] leading-10 lg:mb-[77px] lg:text-7xl'}>{'FAQ'}</div>
+      <div className={'flex flex-col gap-2'}>
+        {faqItems.slice(0, 7).map((question) => (
+          <div key={question.id}>
+            <QuestionSection faqSectionItem={question} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/TabItem.tsx b/app/[lang]/_components/TabItem.tsx
index 170bf49..bde2c4a 100644
--- a/app/[lang]/_components/TabItem.tsx
+++ b/app/[lang]/_components/TabItem.tsx
@@ -1,60 +1,60 @@
-import {LocalizedLink} from './LocalizedLink'
-import {cl} from '../_utils/cl'
+import { LocalizedLink } from './LocalizedLink'
+import { cl } from '../_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export function TabItem(props: {
-	title?: string
-	className?: string
-	selected?: boolean
-	onClick?: () => void
-	href?: string
+  title?: string
+  className?: string
+  selected?: boolean
+  onClick?: () => void
+  href?: string
 }): ReactNode {
-	const {title, className, selected: isSelected, onClick, href} = props
-	if (href) {
-		return (
-			<LocalizedLink
-				href={href}
-				className={className}>
-				<button
-					className={cl(
-						'w-max h-9 backdrop-blur-lg border border-white/50',
-						'transition-all duration-300 hover:scale-105 px-[22px] py-[6px]',
-						'flex items-center justify-center font-medium rounded-[40px]',
-						isSelected
-							? 'bg-white/90 hover:bg-white/90 text-bg'
-							: 'text-white bg-white/10 hover:bg-white/5',
-						className
-					)}>
-					<p
-						className={cl(
-							'transition-all whitespace-nowrap duration-300 font-medium',
-							isSelected ? 'text-bg' : 'text-white'
-						)}>
-						{title}
-					</p>
-				</button>
-			</LocalizedLink>
-		)
-	}
+  const { title, className, selected: isSelected, onClick, href } = props
+  if (href) {
+    return (
+      <LocalizedLink href={href} className={className}>
+        <button
+          className={cl(
+            'w-max h-9 backdrop-blur-lg border border-white/50',
+            'transition-all duration-300 hover:scale-105 px-[22px] py-[6px]',
+            'flex items-center justify-center font-medium rounded-[40px]',
+            isSelected ? 'bg-white/90 hover:bg-white/90 text-bg' : 'text-white bg-white/10 hover:bg-white/5',
+            className
+          )}
+        >
+          <p
+            className={cl(
+              'transition-all whitespace-nowrap duration-300 font-medium',
+              isSelected ? 'text-bg' : 'text-white'
+            )}
+          >
+            {title}
+          </p>
+        </button>
+      </LocalizedLink>
+    )
+  }
 
-	return (
-		<div
-			className={cl(
-				'w-max h-7 md:h-9 backdrop-blur-lg border border-white/50',
-				'transition-all duration-300 hover:scale-105 px-[22px] py-[6px]',
-				'flex items-center justify-center font-medium rounded-[40px]',
-				isSelected ? 'bg-white/90 hover:bg-white/90 text-bg' : 'text-white bg-white/10 hover:bg-white/5',
-				className
-			)}
-			onClick={onClick}>
-			<p
-				className={cl(
-					'transition-all whitespace-nowrap duration-300 font-medium text-sm md:text-base',
-					isSelected ? 'text-bg' : 'text-white'
-				)}>
-				{title}
-			</p>
-		</div>
-	)
+  return (
+    <div
+      className={cl(
+        'w-max h-7 md:h-9 backdrop-blur-lg border border-white/50',
+        'transition-all duration-300 hover:scale-105 px-[22px] py-[6px]',
+        'flex items-center justify-center font-medium rounded-[40px]',
+        isSelected ? 'bg-white/90 hover:bg-white/90 text-bg' : 'text-white bg-white/10 hover:bg-white/5',
+        className
+      )}
+      onClick={onClick}
+    >
+      <p
+        className={cl(
+          'transition-all whitespace-nowrap duration-300 font-medium text-sm md:text-base',
+          isSelected ? 'text-bg' : 'text-white'
+        )}
+      >
+        {title}
+      </p>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/WalletRequestCard.tsx b/app/[lang]/_components/WalletRequestCard.tsx
index 20dfeb6..c0cfec3 100644
--- a/app/[lang]/_components/WalletRequestCard.tsx
+++ b/app/[lang]/_components/WalletRequestCard.tsx
@@ -1,45 +1,41 @@
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 
 type TRequestCardProps = {
-	title: string
-	buttonTitle: string
-	buttonHref: string
-	bgImage: string
-	buttonVariant?: 'white' | 'blue'
+  title: string
+  buttonTitle: string
+  buttonHref: string
+  bgImage: string
+  buttonVariant?: 'white' | 'blue'
 }
 
 export function WalletRequestCard({
-	title,
-	buttonTitle,
-	buttonHref,
-	bgImage,
-	buttonVariant
+  title,
+  buttonTitle,
+  buttonHref,
+  bgImage,
+  buttonVariant,
 }: TRequestCardProps): JSX.Element {
-	return (
-		<div
-			className={
-				'relative flex flex-col items-center justify-between overflow-hidden rounded-2xl px-10 py-12 lg:w-[392px]'
-			}>
-			<div className={'absolute left-0 top-0 size-full'}>
-				<Image
-					src={bgImage}
-					width={786}
-					height={920}
-					alt={'Request card background'}
-					className={'size-full object-cover'}
-				/>
-			</div>
-			<div className={'z-10 flex max-w-[312px] items-start justify-start text-[40px] leading-10'}>{title}</div>
-			<div className={'flex items-end justify-end'}>
-				<Button
-					hasArrow
-					title={buttonTitle}
-					variant={buttonVariant || 'white'}
-					href={buttonHref}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      className={
+        'relative flex flex-col items-center justify-between overflow-hidden rounded-2xl px-10 py-12 lg:w-[392px]'
+      }
+    >
+      <div className={'absolute left-0 top-0 size-full'}>
+        <Image
+          src={bgImage}
+          width={786}
+          height={920}
+          alt={'Request card background'}
+          className={'size-full object-cover'}
+        />
+      </div>
+      <div className={'z-10 flex max-w-[312px] items-start justify-start text-[40px] leading-10'}>{title}</div>
+      <div className={'flex items-end justify-end'}>
+        <Button hasArrow title={buttonTitle} variant={buttonVariant || 'white'} href={buttonHref} />
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/WithFonts.tsx b/app/[lang]/_components/WithFonts.tsx
index 74e3f02..15277e1 100644
--- a/app/[lang]/_components/WithFonts.tsx
+++ b/app/[lang]/_components/WithFonts.tsx
@@ -1,34 +1,33 @@
 'use client'
 
-import {Inter_Tight} from 'next/font/google'
+import { Inter_Tight } from 'next/font/google'
 import React from 'react'
 
-import type {ReactElement, ReactNode} from 'react'
+import type { ReactElement, ReactNode } from 'react'
 
 const interTight = Inter_Tight({
-	weight: ['400', '500', '600', '700'],
-	subsets: ['latin'],
-	display: 'swap',
-	variable: '--inter-font'
+  weight: ['400', '500', '600', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--inter-font',
 })
 
-export function WithFonts({children}: {children: ReactNode}): ReactElement {
-	return (
-		<div
-			style={{
-				fontFamily: `${interTight.style.fontFamily}`
-			}}>
-			<style
-				jsx
-				global>
-				{`
-					:root {
-						--inter-font: ${interTight.style.fontFamily};
-					}
-				`}
-			</style>
+export function WithFonts({ children }: { children: ReactNode }): ReactElement {
+  return (
+    <div
+      style={{
+        fontFamily: `${interTight.style.fontFamily}`,
+      }}
+    >
+      <style jsx global>
+        {`
+          :root {
+            --inter-font: ${interTight.style.fontFamily};
+          }
+        `}
+      </style>
 
-			{children}
-		</div>
-	)
+      {children}
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/header/DaoExpand.tsx b/app/[lang]/_components/header/DaoExpand.tsx
index 1b8c2aa..01b865b 100644
--- a/app/[lang]/_components/header/DaoExpand.tsx
+++ b/app/[lang]/_components/header/DaoExpand.tsx
@@ -1,50 +1,43 @@
 import Image from 'next/image'
 
 import HeaderItem from '@/app/[lang]/_components/HeaderItem'
-import {appDao} from '@/app/[lang]/_utils/constants'
-import {DAO_DICT} from '@/app/[lang]/_utils/dictionary/dao'
+import { appDao } from '@/app/[lang]/_utils/constants'
+import { DAO_DICT } from '@/app/[lang]/_utils/dictionary/dao'
 
-import {expandAnimation} from './animations'
+import { expandAnimation } from './animations'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-export function DAOExpand({setCurrentTab}: {setCurrentTab: (tab: string) => void}): ReactNode {
-	return (
-		<div
-			className={'grid grid-cols-12'}
-			{...expandAnimation}>
-			<div className={'col-span-4 flex flex-col border-r border-white/5 p-16'}>
-				<div className={'mb-5 flex items-center gap-2'}>
-					<div className={'mr-4 size-10'}>
-						<Image
-							src={'/fox-token/foxLogo.png'}
-							alt={DAO_DICT.expand.imageAlt}
-							width={80}
-							height={80}
-						/>
-					</div>
-					<div className={'no-translate text-[32px] leading-[32px]'}>
-						<span>{DAO_DICT.expand.title.prefix}</span>
-						<span className={'font-bold italic text-blue'}>{DAO_DICT.expand.title.suffix}</span>
-					</div>
-				</div>
-				<p className={'text-sm text-gray-500'}>{DAO_DICT.expand.description}</p>
-			</div>
-			<div className={'col-span-8 p-16'}>
-				<div className={'flex flex-row flex-wrap gap-4'}>
-					{appDao.slice(0, 4).map(dao => (
-						<HeaderItem
-							onClick={() => setCurrentTab('empty')}
-							key={dao.name}
-							name={dao.name}
-							href={dao.href}
-							description={dao.description}
-							icon={dao.icon}
-							target={dao.target}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	)
+export function DAOExpand({ setCurrentTab }: { setCurrentTab: (tab: string) => void }): ReactNode {
+  return (
+    <div className={'grid grid-cols-12'} {...expandAnimation}>
+      <div className={'col-span-4 flex flex-col border-r border-white/5 p-16'}>
+        <div className={'mb-5 flex items-center gap-2'}>
+          <div className={'mr-4 size-10'}>
+            <Image src={'/fox-token/foxLogo.png'} alt={DAO_DICT.expand.imageAlt} width={80} height={80} />
+          </div>
+          <div className={'no-translate text-[32px] leading-[32px]'}>
+            <span>{DAO_DICT.expand.title.prefix}</span>
+            <span className={'font-bold italic text-blue'}>{DAO_DICT.expand.title.suffix}</span>
+          </div>
+        </div>
+        <p className={'text-sm text-gray-500'}>{DAO_DICT.expand.description}</p>
+      </div>
+      <div className={'col-span-8 p-16'}>
+        <div className={'flex flex-row flex-wrap gap-4'}>
+          {appDao.slice(0, 4).map((dao) => (
+            <HeaderItem
+              onClick={() => setCurrentTab('empty')}
+              key={dao.name}
+              name={dao.name}
+              href={dao.href}
+              description={dao.description}
+              icon={dao.icon}
+              target={dao.target}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/header/DesktopHeader.tsx b/app/[lang]/_components/header/DesktopHeader.tsx
index 0744f3d..e2e06f5 100644
--- a/app/[lang]/_components/header/DesktopHeader.tsx
+++ b/app/[lang]/_components/header/DesktopHeader.tsx
@@ -1,147 +1,135 @@
 'use client'
 
-import {motion} from 'framer-motion'
-import {usePathname} from 'next/navigation'
-import {useMemo, useState} from 'react'
+import { motion } from 'framer-motion'
+import { usePathname } from 'next/navigation'
+import { useMemo, useState } from 'react'
 
-import {AnimateChangeInHeight} from '@/app/[lang]/_components/AnimatedHeight'
-import {Button} from '@/app/[lang]/_components/Button'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {Notification} from '@/app/[lang]/_components/Notification'
-import {IconPlanet} from '@/app/[lang]/_icons/IconPlanet'
-import {ShapeshiftLogo} from '@/app/[lang]/_icons/ShapeshiftLogo'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {dAppUrl, headerTabs} from '@/app/[lang]/_utils/constants'
+import { AnimateChangeInHeight } from '@/app/[lang]/_components/AnimatedHeight'
+import { Button } from '@/app/[lang]/_components/Button'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { Notification } from '@/app/[lang]/_components/Notification'
+import { IconPlanet } from '@/app/[lang]/_icons/IconPlanet'
+import { ShapeshiftLogo } from '@/app/[lang]/_icons/ShapeshiftLogo'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { dAppUrl, headerTabs } from '@/app/[lang]/_utils/constants'
 
-import {containerAnimation} from './animations'
-import {DAOExpand} from './DaoExpand'
-import {LanguageExpand} from './LanguageExpand'
-import {ProductsExpand} from './ProductsExpand'
-import {ResourcesExpand} from './ResourcesExpand'
+import { containerAnimation } from './animations'
+import { DAOExpand } from './DaoExpand'
+import { LanguageExpand } from './LanguageExpand'
+import { ProductsExpand } from './ProductsExpand'
+import { ResourcesExpand } from './ResourcesExpand'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type TDesktopHeaderProps = {
-	className?: string
-	switchLanguageAction: (symbol: string) => void
-	currentLanguage: string
+  className?: string
+  switchLanguageAction: (symbol: string) => void
+  currentLanguage: string
 }
 
 /**
  * Desktop header component with hover menu expansions
  */
-export function DesktopHeader({className, switchLanguageAction, currentLanguage}: TDesktopHeaderProps): ReactNode {
-	const pathname = usePathname()
-	const variant = pathname === '/' ? 'transparent' : 'default'
-	const [currentTab, setCurrentTab] = useState<string>('')
+export function DesktopHeader({ className, switchLanguageAction, currentLanguage }: TDesktopHeaderProps): ReactNode {
+  const pathname = usePathname()
+  const variant = pathname === '/' ? 'transparent' : 'default'
+  const [currentTab, setCurrentTab] = useState<string>('')
 
-	/**
-	 * Map of tab content components keyed by tab value
-	 */
-	const tabContent: Record<string, ReactNode> = useMemo(
-		() => ({
-			products: <ProductsExpand setCurrentTab={setCurrentTab} />,
-			resources: <ResourcesExpand setCurrentTab={setCurrentTab} />,
-			dao: <DAOExpand setCurrentTab={setCurrentTab} />,
-			language: (
-				<LanguageExpand
-					switchLanguageAction={switchLanguageAction}
-					currentLanguage={currentLanguage}
-				/>
-			),
-			empty: null
-		}),
-		[switchLanguageAction, currentLanguage]
-	)
+  /**
+   * Map of tab content components keyed by tab value
+   */
+  const tabContent: Record<string, ReactNode> = useMemo(
+    () => ({
+      products: <ProductsExpand setCurrentTab={setCurrentTab} />,
+      resources: <ResourcesExpand setCurrentTab={setCurrentTab} />,
+      dao: <DAOExpand setCurrentTab={setCurrentTab} />,
+      language: <LanguageExpand switchLanguageAction={switchLanguageAction} currentLanguage={currentLanguage} />,
+      empty: null,
+    }),
+    [switchLanguageAction, currentLanguage]
+  )
 
-	/**
-	 * Determine background style based on variant and active tab
-	 */
-	const getVariant = (): string => {
-		if (variant === 'transparent') {
-			if (currentTab) {
-				return 'bg-headerBg'
-			}
-			return 'bg-transparent'
-		}
-		return 'bg-headerBg'
-	}
+  /**
+   * Determine background style based on variant and active tab
+   */
+  const getVariant = (): string => {
+    if (variant === 'transparent') {
+      if (currentTab) {
+        return 'bg-headerBg'
+      }
+      return 'bg-transparent'
+    }
+    return 'bg-headerBg'
+  }
 
-	return (
-		<div className={'sticky top-0 z-50 hidden rounded-2xl lg:block'}>
-			<Notification />
-			<div
-				onMouseLeave={() => setCurrentTab('')}
-				className={'roudnded-2xl relative mt-3 w-full bg-transparent'}>
-				<div
-					className={cl(
-						'flex flex-col border border-white/5 items-center transition-all backdrop-blur-lg duration-300 justify-between px-6 py-3',
-						currentTab ? 'rounded-t-lg' : 'rounded-lg',
-						getVariant(),
-						className
-					)}>
-					<div className={'flex w-full items-center justify-between'}>
-						<LocalizedLink
-							href={'/'}
-							className={'flex items-center'}
-							onMouseEnter={() => setCurrentTab('')}>
-							<ShapeshiftLogo />
-						</LocalizedLink>
+  return (
+    <div className={'sticky top-0 z-50 hidden rounded-2xl lg:block'}>
+      <Notification />
+      <div onMouseLeave={() => setCurrentTab('')} className={'roudnded-2xl relative mt-3 w-full bg-transparent'}>
+        <div
+          className={cl(
+            'flex flex-col border border-white/5 items-center transition-all backdrop-blur-lg duration-300 justify-between px-6 py-3',
+            currentTab ? 'rounded-t-lg' : 'rounded-lg',
+            getVariant(),
+            className
+          )}
+        >
+          <div className={'flex w-full items-center justify-between'}>
+            <LocalizedLink href={'/'} className={'flex items-center'} onMouseEnter={() => setCurrentTab('')}>
+              <ShapeshiftLogo />
+            </LocalizedLink>
 
-						<nav className={'flex'}>
-							{headerTabs.map(tab => (
-								<div
-									key={tab.name}
-									onMouseEnter={() => setCurrentTab(tab.value)}
-									className={cl(
-										'cursor-pointer p-4 text-sm font-medium transition-colors',
-										currentTab && currentTab !== tab.value ? 'text-gray-500' : 'text-white'
-									)}>
-									{tab.name}
-								</div>
-							))}
-						</nav>
+            <nav className={'flex'}>
+              {headerTabs.map((tab) => (
+                <div
+                  key={tab.name}
+                  onMouseEnter={() => setCurrentTab(tab.value)}
+                  className={cl(
+                    'cursor-pointer p-4 text-sm font-medium transition-colors',
+                    currentTab && currentTab !== tab.value ? 'text-gray-500' : 'text-white'
+                  )}
+                >
+                  {tab.name}
+                </div>
+              ))}
+            </nav>
 
-						<div className={'flex gap-2'}>
-							<button
-								onMouseEnter={() => setCurrentTab('language')}
-								className={
-									'group flex aspect-square h-14 items-center justify-center rounded-[20px] border border-white/5'
-								}>
-								<IconPlanet className={'opacity-50 transition-opacity group-hover:opacity-100'} />
-							</button>
-							<Button
-								variant={'blue'}
-								title={'Launch App'}
-								href={dAppUrl}
-							/>
-						</div>
-					</div>
-				</div>
-				<motion.div
-					className={cl(
-						'absolute top-full bg-bg',
-						'rounded-b-lg border-x border-b border-white/5',
-						'flex justify-center w-full',
-						tabContent[currentTab] ? 'opacity-1' : '!opacity-0'
-					)}
-					initial={containerAnimation.initial}
-					animate={containerAnimation.animate(true)}
-					exit={containerAnimation.exit}
-					transition={containerAnimation.transition}>
-					<div className={'bg-headerBg'}>
-						<AnimateChangeInHeight>
-							{Object.entries(tabContent).map(([key, content]) => (
-								<div
-									key={key}
-									className={currentTab === key ? 'block' : 'hidden'}>
-									{content}
-								</div>
-							))}
-						</AnimateChangeInHeight>
-					</div>
-				</motion.div>
-			</div>
-		</div>
-	)
+            <div className={'flex gap-2'}>
+              <button
+                onMouseEnter={() => setCurrentTab('language')}
+                className={
+                  'group flex aspect-square h-14 items-center justify-center rounded-[20px] border border-white/5'
+                }
+              >
+                <IconPlanet className={'opacity-50 transition-opacity group-hover:opacity-100'} />
+              </button>
+              <Button variant={'blue'} title={'Launch App'} href={dAppUrl} />
+            </div>
+          </div>
+        </div>
+        <motion.div
+          className={cl(
+            'absolute top-full bg-bg',
+            'rounded-b-lg border-x border-b border-white/5',
+            'flex justify-center w-full',
+            tabContent[currentTab] ? 'opacity-1' : '!opacity-0'
+          )}
+          initial={containerAnimation.initial}
+          animate={containerAnimation.animate(true)}
+          exit={containerAnimation.exit}
+          transition={containerAnimation.transition}
+        >
+          <div className={'bg-headerBg'}>
+            <AnimateChangeInHeight>
+              {Object.entries(tabContent).map(([key, content]) => (
+                <div key={key} className={currentTab === key ? 'block' : 'hidden'}>
+                  {content}
+                </div>
+              ))}
+            </AnimateChangeInHeight>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/header/Header.tsx b/app/[lang]/_components/header/Header.tsx
index 4a9becc..5c5fa2a 100644
--- a/app/[lang]/_components/header/Header.tsx
+++ b/app/[lang]/_components/header/Header.tsx
@@ -1,34 +1,27 @@
 'use client'
 
-import {useLanguage} from '@/app/[lang]/_contexts/LanguageContext'
+import { useLanguage } from '@/app/[lang]/_contexts/LanguageContext'
 
-import {DesktopHeader} from './DesktopHeader'
-import {MobileHeader} from './MobileHeader'
+import { DesktopHeader } from './DesktopHeader'
+import { MobileHeader } from './MobileHeader'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 type THeaderProps = {
-	className?: string
+  className?: string
 }
 
 /**
  * Responsive header component
  * Switches between mobile and desktop versions based on screen size
  */
-export function Header({className}: THeaderProps): ReactNode {
-	const {currentLanguage, switchLanguage} = useLanguage()
+export function Header({ className }: THeaderProps): ReactNode {
+  const { currentLanguage, switchLanguage } = useLanguage()
 
-	return (
-		<>
-			<MobileHeader
-				switchLanguage={switchLanguage}
-				currentLanguage={currentLanguage}
-			/>
-			<DesktopHeader
-				className={className}
-				switchLanguageAction={switchLanguage}
-				currentLanguage={currentLanguage}
-			/>
-		</>
-	)
+  return (
+    <>
+      <MobileHeader switchLanguage={switchLanguage} currentLanguage={currentLanguage} />
+      <DesktopHeader className={className} switchLanguageAction={switchLanguage} currentLanguage={currentLanguage} />
+    </>
+  )
 }
diff --git a/app/[lang]/_components/header/LanguageExpand.tsx b/app/[lang]/_components/header/LanguageExpand.tsx
index 3f7b9c7..088bbb1 100644
--- a/app/[lang]/_components/header/LanguageExpand.tsx
+++ b/app/[lang]/_components/header/LanguageExpand.tsx
@@ -1,46 +1,45 @@
 'use client'
 
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {SUPPORTED_LANGUAGES} from '@/app/[lang]/_utils/i18nconfig'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { SUPPORTED_LANGUAGES } from '@/app/[lang]/_utils/i18nconfig'
 
-import {expandAnimation} from './animations'
+import { expandAnimation } from './animations'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export function LanguageExpand({
-	switchLanguageAction,
-	currentLanguage
+  switchLanguageAction,
+  currentLanguage,
 }: {
-	switchLanguageAction: (symbol: string) => void
-	currentLanguage: string
+  switchLanguageAction: (symbol: string) => void
+  currentLanguage: string
 }): ReactNode {
-	return (
-		<div
-			className={'grid grid-cols-1'}
-			{...expandAnimation}>
-			{/* Left section with main CTA */}
-			<div className={'col-span-1 p-16'}>
-				<div className={'flex flex-wrap justify-center gap-1'}>
-					{SUPPORTED_LANGUAGES.map(language => (
-						<button
-							className={cl(
-								'rounded-lg px-6 py-4 hover:bg-white/10',
-								currentLanguage === language.code ? 'bg-white/10' : ''
-							)}
-							key={language.code}
-							onClick={() => switchLanguageAction(language.code)}>
-							<div className={'flex w-[184px] items-center justify-between'}>
-								<div className={'flex flex-col items-start'}>
-									<span className={'text-sm font-medium'}>{language.name}</span>
-									<span className={'no-translate text-xs opacity-70'}>{language.nativeName}</span>
-								</div>
-								{currentLanguage === language.code && <IconCheck />}
-							</div>
-						</button>
-					))}
-				</div>
-			</div>
-		</div>
-	)
+  return (
+    <div className={'grid grid-cols-1'} {...expandAnimation}>
+      {/* Left section with main CTA */}
+      <div className={'col-span-1 p-16'}>
+        <div className={'flex flex-wrap justify-center gap-1'}>
+          {SUPPORTED_LANGUAGES.map((language) => (
+            <button
+              className={cl(
+                'rounded-lg px-6 py-4 hover:bg-white/10',
+                currentLanguage === language.code ? 'bg-white/10' : ''
+              )}
+              key={language.code}
+              onClick={() => switchLanguageAction(language.code)}
+            >
+              <div className={'flex w-[184px] items-center justify-between'}>
+                <div className={'flex flex-col items-start'}>
+                  <span className={'text-sm font-medium'}>{language.name}</span>
+                  <span className={'no-translate text-xs opacity-70'}>{language.nativeName}</span>
+                </div>
+                {currentLanguage === language.code && <IconCheck />}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/header/MobileHeader.tsx b/app/[lang]/_components/header/MobileHeader.tsx
index a787353..a4e8270 100644
--- a/app/[lang]/_components/header/MobileHeader.tsx
+++ b/app/[lang]/_components/header/MobileHeader.tsx
@@ -1,233 +1,222 @@
 'use client'
 
-import {AnimatePresence, motion} from 'framer-motion'
-import {usePathname} from 'next/navigation'
-import {useEffect, useState} from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { usePathname } from 'next/navigation'
+import { useEffect, useState } from 'react'
 
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {AnimatedPlusMinusIcon} from '@/app/[lang]/_components/QuestionSection'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
-import {IconClose} from '@/app/[lang]/_icons/IconClose'
-import {IconMenu} from '@/app/[lang]/_icons/IconMenu'
-import {IconPlanet} from '@/app/[lang]/_icons/IconPlanet'
-import {ShapeshiftLogo} from '@/app/[lang]/_icons/ShapeshiftLogo'
-import {appDao, appProducts, appResources, headerTabs} from '@/app/[lang]/_utils/constants'
-import {SUPPORTED_LANGUAGES} from '@/app/[lang]/_utils/i18nconfig'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { AnimatedPlusMinusIcon } from '@/app/[lang]/_components/QuestionSection'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
+import { IconClose } from '@/app/[lang]/_icons/IconClose'
+import { IconMenu } from '@/app/[lang]/_icons/IconMenu'
+import { IconPlanet } from '@/app/[lang]/_icons/IconPlanet'
+import { ShapeshiftLogo } from '@/app/[lang]/_icons/ShapeshiftLogo'
+import { appDao, appProducts, appResources, headerTabs } from '@/app/[lang]/_utils/constants'
+import { SUPPORTED_LANGUAGES } from '@/app/[lang]/_utils/i18nconfig'
 
-import type {TAppLink} from '@/app/[lang]/_utils/constants'
-import type {ReactNode} from 'react'
+import type { TAppLink } from '@/app/[lang]/_utils/constants'
+import type { ReactNode } from 'react'
 
-const mobileTabs: {name: string; value: string; items: TAppLink[]}[] = [
-	{
-		name: 'Products',
-		value: 'products',
-		items: appProducts.slice(0, 6)
-	},
-	{
-		name: 'Resources',
-		value: 'resources',
-		items: appResources.slice(0, 7)
-	},
-	{
-		name: 'DAO',
-		value: 'dao',
-		items: appDao.slice(0, 4)
-	}
+const mobileTabs: { name: string; value: string; items: TAppLink[] }[] = [
+  {
+    name: 'Products',
+    value: 'products',
+    items: appProducts.slice(0, 6),
+  },
+  {
+    name: 'Resources',
+    value: 'resources',
+    items: appResources.slice(0, 7),
+  },
+  {
+    name: 'DAO',
+    value: 'dao',
+    items: appDao.slice(0, 4),
+  },
 ]
 
 const mobileMenuAnimation = {
-	initial: {opacity: 0, y: -20},
-	animate: {opacity: 1, y: 0},
-	exit: {opacity: 0, y: -20},
-	transition: {duration: 0.2}
+  initial: { opacity: 0, y: -20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -20 },
+  transition: { duration: 0.2 },
 }
 
 const expandAnimation = {
-	initial: {height: 0, opacity: 0},
-	animate: {height: 'auto', opacity: 1},
-	exit: {height: 0, opacity: 0},
-	transition: {duration: 0.2}
+  initial: { height: 0, opacity: 0 },
+  animate: { height: 'auto', opacity: 1 },
+  exit: { height: 0, opacity: 0 },
+  transition: { duration: 0.2 },
 }
 
 /**
  * Mobile header component with hamburger menu and expandable sections
  */
 export function MobileHeader({
-	switchLanguage,
-	currentLanguage
+  switchLanguage,
+  currentLanguage,
 }: {
-	switchLanguage: (symbol: string) => void
-	currentLanguage: string
+  switchLanguage: (symbol: string) => void
+  currentLanguage: string
 }): ReactNode {
-	const pathname = usePathname()
+  const pathname = usePathname()
 
-	const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
-	const [expandedSection, setExpandedSection] = useState<string>('')
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
+  const [expandedSection, setExpandedSection] = useState<string>('')
 
-	// Close menu when route changes
-	useEffect(() => {
-		setIsMenuOpen(false)
-	}, [pathname])
+  // Close menu when route changes
+  useEffect(() => {
+    setIsMenuOpen(false)
+  }, [pathname])
 
-	return (
-		<div className={'sticky top-0 z-50 lg:hidden'}>
-			<div className={'z-50 mt-6 flex w-full items-center justify-between rounded-2xl bg-headerBg p-4'}>
-				<LocalizedLink
-					href={'/'}
-					aria-label={'ShapeShift'}>
-					<ShapeshiftLogo />
-				</LocalizedLink>
-				<button
-					onClick={() => setIsMenuOpen(!isMenuOpen)}
-					className={'min-h-[56px] min-w-[56px] rounded-[20px] border border-white/5 p-4'}>
-					{isMenuOpen ? <IconClose /> : <IconMenu />}
-				</button>
-			</div>
-			<AnimatePresence>
-				{isMenuOpen && (
-					<motion.div
-						className={'fixed left-0 top-0 z-50 h-screen w-full overflow-y-auto bg-bg px-4 py-6'}
-						{...mobileMenuAnimation}>
-						<div className={'flex items-center justify-between'}>
-							<ShapeshiftLogo />
-							<button
-								onClick={() => setIsMenuOpen(false)}
-								className={'min-w-[56px] rounded-[20px] border border-white/5 p-4'}>
-								<IconClose />
-							</button>
-						</div>
+  return (
+    <div className={'sticky top-0 z-50 lg:hidden'}>
+      <div className={'z-50 mt-6 flex w-full items-center justify-between rounded-2xl bg-headerBg p-4'}>
+        <LocalizedLink href={'/'} aria-label={'ShapeShift'}>
+          <ShapeshiftLogo />
+        </LocalizedLink>
+        <button
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          className={'min-h-[56px] min-w-[56px] rounded-[20px] border border-white/5 p-4'}
+        >
+          {isMenuOpen ? <IconClose /> : <IconMenu />}
+        </button>
+      </div>
+      <AnimatePresence>
+        {isMenuOpen && (
+          <motion.div
+            className={'fixed left-0 top-0 z-50 h-screen w-full overflow-y-auto bg-bg px-4 py-6'}
+            {...mobileMenuAnimation}
+          >
+            <div className={'flex items-center justify-between'}>
+              <ShapeshiftLogo />
+              <button
+                onClick={() => setIsMenuOpen(false)}
+                className={'min-w-[56px] rounded-[20px] border border-white/5 p-4'}
+              >
+                <IconClose />
+              </button>
+            </div>
 
-						<div className={'flex min-h-[calc(100vh-100px)] flex-col justify-between'}>
-							<div className={'mt-10'}>
-								<LocalizedLink
-									href={'/'}
-									onClick={() => setIsMenuOpen(false)}
-									className={'mb-2 block rounded-2xl bg-secondBg p-8 text-2xl'}>
-									{'Home'}
-								</LocalizedLink>
+            <div className={'flex min-h-[calc(100vh-100px)] flex-col justify-between'}>
+              <div className={'mt-10'}>
+                <LocalizedLink
+                  href={'/'}
+                  onClick={() => setIsMenuOpen(false)}
+                  className={'mb-2 block rounded-2xl bg-secondBg p-8 text-2xl'}
+                >
+                  {'Home'}
+                </LocalizedLink>
 
-								<div className={'space-y-2'}>
-									{headerTabs.map(tab => (
-										<div
-											key={tab.name}
-											className={'overflow-hidden rounded-2xl bg-secondBg'}>
-											<button
-												onClick={() => {
-													setExpandedSection(expandedSection === tab.value ? '' : tab.value)
-												}}
-												className={'flex w-full items-center justify-between p-6 text-2xl'}>
-												{tab.name}
-												<div
-													className={'flex items-center gap-2 rounded-[100%] bg-white/5 p-2'}>
-													<AnimatedPlusMinusIcon isOpen={expandedSection === tab.value} />
-												</div>
-											</button>
-											<AnimatePresence>
-												{expandedSection === tab.value && (
-													<motion.div
-														className={'space-y-4 p-6 pt-0'}
-														{...expandAnimation}>
-														{mobileTabs
-															.find(t => t.value === tab.value)
-															?.items?.map((item: TAppLink) => (
-																<motion.div
-																	initial={{opacity: 0, x: -20}}
-																	animate={{opacity: 1, x: 0}}
-																	transition={{delay: 0.1}}
-																	key={item.name}>
-																	<LocalizedLink
-																		onClick={() => setIsMenuOpen(false)}
-																		href={item.href}
-																		target={item.target}
-																		className={'flex gap-4 pt-6 text-lg'}>
-																		<div
-																			className={
-																				'flex w-6 items-center justify-center gap-2'
-																			}>
-																			{item.icon}
-																		</div>
-																		<div>{item.name}</div>
-																	</LocalizedLink>
-																</motion.div>
-															))}
-													</motion.div>
-												)}
-											</AnimatePresence>
-											<div className={'pointer-events-none fixed -top-[9999px] left-0 opacity-0'}>
-												{mobileTabs
-													.filter(t => t.value !== tab.value)
-													.map(hiddenTab => (
-														<div key={`hidden-${hiddenTab.value}`}>
-															{hiddenTab.items?.map(item => (
-																<div key={`hidden-${item.name}`}>
-																	<div>{item.name}</div>
-																</div>
-															))}
-														</div>
-													))}
-											</div>
-										</div>
-									))}
-								</div>
-							</div>
-							<div>
-								<button
-									onClick={() => setExpandedSection(expandedSection === 'language' ? '' : 'language')}
-									className={
-										'mb-10 mt-6 flex w-full items-center justify-between gap-2 rounded-2xl border border-white/50 bg-white/10 p-4'
-									}>
-									<span>{SUPPORTED_LANGUAGES.find(l => l.code === currentLanguage)?.name}</span>
-									<IconPlanet className={'text-white/50'} />
-								</button>
-								<AnimatePresence>
-									{expandedSection === 'language' && (
-										<motion.div
-											className={'space-y-4 p-6 pt-0'}
-											{...expandAnimation}>
-											<div className={'flex flex-col gap-4'}>
-												{SUPPORTED_LANGUAGES.map(language => (
-													<button
-														key={language.code}
-														onClick={() => {
-															switchLanguage(language.code)
-															setExpandedSection('')
-														}}
-														className={
-															'flex items-center justify-between rounded-lg px-6 py-4 hover:bg-white/10'
-														}>
-														<div className={'flex flex-col items-start'}>
-															<span className={'text-sm font-medium'}>
-																{language.name}
-															</span>
-															<span className={'no-translate text-xs opacity-70'}>
-																{language.nativeName}
-															</span>
-														</div>
-														{currentLanguage === language.code && <IconCheck />}
-													</button>
-												))}
-											</div>
-										</motion.div>
-									)}
-								</AnimatePresence>
-								{/* Hidden language content for translations - always in DOM but invisible */}
-								<div className={'pointer-events-none fixed -top-[9999px] left-0 opacity-0'}>
-									{expandedSection !== 'language' && (
-										<div>
-											{SUPPORTED_LANGUAGES.map(language => (
-												<div key={`hidden-lang-${language.code}`}>
-													<span>{language.name}</span>
-													<span>{language.nativeName}</span>
-												</div>
-											))}
-										</div>
-									)}
-								</div>
-							</div>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
-		</div>
-	)
+                <div className={'space-y-2'}>
+                  {headerTabs.map((tab) => (
+                    <div key={tab.name} className={'overflow-hidden rounded-2xl bg-secondBg'}>
+                      <button
+                        onClick={() => {
+                          setExpandedSection(expandedSection === tab.value ? '' : tab.value)
+                        }}
+                        className={'flex w-full items-center justify-between p-6 text-2xl'}
+                      >
+                        {tab.name}
+                        <div className={'flex items-center gap-2 rounded-[100%] bg-white/5 p-2'}>
+                          <AnimatedPlusMinusIcon isOpen={expandedSection === tab.value} />
+                        </div>
+                      </button>
+                      <AnimatePresence>
+                        {expandedSection === tab.value && (
+                          <motion.div className={'space-y-4 p-6 pt-0'} {...expandAnimation}>
+                            {mobileTabs
+                              .find((t) => t.value === tab.value)
+                              ?.items?.map((item: TAppLink) => (
+                                <motion.div
+                                  initial={{ opacity: 0, x: -20 }}
+                                  animate={{ opacity: 1, x: 0 }}
+                                  transition={{ delay: 0.1 }}
+                                  key={item.name}
+                                >
+                                  <LocalizedLink
+                                    onClick={() => setIsMenuOpen(false)}
+                                    href={item.href}
+                                    target={item.target}
+                                    className={'flex gap-4 pt-6 text-lg'}
+                                  >
+                                    <div className={'flex w-6 items-center justify-center gap-2'}>{item.icon}</div>
+                                    <div>{item.name}</div>
+                                  </LocalizedLink>
+                                </motion.div>
+                              ))}
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                      <div className={'pointer-events-none fixed -top-[9999px] left-0 opacity-0'}>
+                        {mobileTabs
+                          .filter((t) => t.value !== tab.value)
+                          .map((hiddenTab) => (
+                            <div key={`hidden-${hiddenTab.value}`}>
+                              {hiddenTab.items?.map((item) => (
+                                <div key={`hidden-${item.name}`}>
+                                  <div>{item.name}</div>
+                                </div>
+                              ))}
+                            </div>
+                          ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <button
+                  onClick={() => setExpandedSection(expandedSection === 'language' ? '' : 'language')}
+                  className={
+                    'mb-10 mt-6 flex w-full items-center justify-between gap-2 rounded-2xl border border-white/50 bg-white/10 p-4'
+                  }
+                >
+                  <span>{SUPPORTED_LANGUAGES.find((l) => l.code === currentLanguage)?.name}</span>
+                  <IconPlanet className={'text-white/50'} />
+                </button>
+                <AnimatePresence>
+                  {expandedSection === 'language' && (
+                    <motion.div className={'space-y-4 p-6 pt-0'} {...expandAnimation}>
+                      <div className={'flex flex-col gap-4'}>
+                        {SUPPORTED_LANGUAGES.map((language) => (
+                          <button
+                            key={language.code}
+                            onClick={() => {
+                              switchLanguage(language.code)
+                              setExpandedSection('')
+                            }}
+                            className={'flex items-center justify-between rounded-lg px-6 py-4 hover:bg-white/10'}
+                          >
+                            <div className={'flex flex-col items-start'}>
+                              <span className={'text-sm font-medium'}>{language.name}</span>
+                              <span className={'no-translate text-xs opacity-70'}>{language.nativeName}</span>
+                            </div>
+                            {currentLanguage === language.code && <IconCheck />}
+                          </button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+                {/* Hidden language content for translations - always in DOM but invisible */}
+                <div className={'pointer-events-none fixed -top-[9999px] left-0 opacity-0'}>
+                  {expandedSection !== 'language' && (
+                    <div>
+                      {SUPPORTED_LANGUAGES.map((language) => (
+                        <div key={`hidden-lang-${language.code}`}>
+                          <span>{language.name}</span>
+                          <span>{language.nativeName}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/header/ProductsExpand.tsx b/app/[lang]/_components/header/ProductsExpand.tsx
index 2d1e50c..8fd1719 100644
--- a/app/[lang]/_components/header/ProductsExpand.tsx
+++ b/app/[lang]/_components/header/ProductsExpand.tsx
@@ -1,50 +1,50 @@
-import {Button} from '@/app/[lang]/_components/Button'
+import { Button } from '@/app/[lang]/_components/Button'
 import HeaderItem from '@/app/[lang]/_components/HeaderItem'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {appProducts, dAppUrl} from '@/app/[lang]/_utils/constants'
-import {PRODUCTS_DICT} from '@/app/[lang]/_utils/dictionary/products'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { appProducts, dAppUrl } from '@/app/[lang]/_utils/constants'
+import { PRODUCTS_DICT } from '@/app/[lang]/_utils/dictionary/products'
 
-import type {TAppLink} from '@/app/[lang]/_utils/constants'
-import type {ReactNode} from 'react'
+import type { TAppLink } from '@/app/[lang]/_utils/constants'
+import type { ReactNode } from 'react'
 
 /********************************************************************************************
  * Products expand section in the header
  * Shows product information and navigation items
  * @param {Function} setCurrentTab - Function to update the current tab state
  ********************************************************************************************/
-export function ProductsExpand({setCurrentTab}: {setCurrentTab: (tab: string) => void}): ReactNode {
-	return (
-		<div className={cl('grid grid-cols-12 h-full')}>
-			{/* Left section with main CTA */}
-			<div className={'col-span-4 flex flex-col border-r border-white/5 p-16'}>
-				<p className={'mb-4 text-2xl font-medium'}>
-					{PRODUCTS_DICT.header.titleLine1} <br /> {PRODUCTS_DICT.header.titleLine2}
-				</p>
-				<p className={'mb-10 max-w-[327px] text-sm text-gray-500'}>{PRODUCTS_DICT.header.description}</p>
-				<Button
-					variant={'blue'}
-					className={'whitespace-nowrap'}
-					title={PRODUCTS_DICT.header.ctaButton}
-					href={dAppUrl}
-				/>
-			</div>
+export function ProductsExpand({ setCurrentTab }: { setCurrentTab: (tab: string) => void }): ReactNode {
+  return (
+    <div className={cl('grid grid-cols-12 h-full')}>
+      {/* Left section with main CTA */}
+      <div className={'col-span-4 flex flex-col border-r border-white/5 p-16'}>
+        <p className={'mb-4 text-2xl font-medium'}>
+          {PRODUCTS_DICT.header.titleLine1} <br /> {PRODUCTS_DICT.header.titleLine2}
+        </p>
+        <p className={'mb-10 max-w-[327px] text-sm text-gray-500'}>{PRODUCTS_DICT.header.description}</p>
+        <Button
+          variant={'blue'}
+          className={'whitespace-nowrap'}
+          title={PRODUCTS_DICT.header.ctaButton}
+          href={dAppUrl}
+        />
+      </div>
 
-			{/* Right section with product grid */}
-			<div className={'col-span-8 p-16'}>
-				<div className={'flex flex-row flex-wrap gap-4'}>
-					{appProducts.map((product: TAppLink) => (
-						<HeaderItem
-							onClick={() => setCurrentTab(product.name)}
-							key={product.name}
-							name={product.name}
-							href={product.href}
-							description={product.description ?? ''}
-							icon={product.icon}
-							target={product.target}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	)
+      {/* Right section with product grid */}
+      <div className={'col-span-8 p-16'}>
+        <div className={'flex flex-row flex-wrap gap-4'}>
+          {appProducts.map((product: TAppLink) => (
+            <HeaderItem
+              onClick={() => setCurrentTab(product.name)}
+              key={product.name}
+              name={product.name}
+              href={product.href}
+              description={product.description ?? ''}
+              icon={product.icon}
+              target={product.target}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/header/ResourcesExpand.tsx b/app/[lang]/_components/header/ResourcesExpand.tsx
index 2892d02..37891ed 100644
--- a/app/[lang]/_components/header/ResourcesExpand.tsx
+++ b/app/[lang]/_components/header/ResourcesExpand.tsx
@@ -1,41 +1,39 @@
-import {motion} from 'framer-motion'
+import { motion } from 'framer-motion'
 
 import HeaderItem from '@/app/[lang]/_components/HeaderItem'
-import {appResources} from '@/app/[lang]/_utils/constants'
-import {RESOURCES_DICT} from '@/app/[lang]/_utils/dictionary/resources'
+import { appResources } from '@/app/[lang]/_utils/constants'
+import { RESOURCES_DICT } from '@/app/[lang]/_utils/dictionary/resources'
 
-import {expandAnimation} from './animations'
+import { expandAnimation } from './animations'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-export function ResourcesExpand({setCurrentTab}: {setCurrentTab: (tab: string) => void}): ReactNode {
-	return (
-		<motion.div
-			className={'grid grid-cols-12'}
-			{...expandAnimation}>
-			<div className={'col-span-4 flex flex-col border-r border-white/5 p-16'}>
-				<p className={'mb-4 text-2xl font-medium'}>
-					{RESOURCES_DICT.expand.titleLine1} <br />
-					{RESOURCES_DICT.expand.titleLine2}
-				</p>
-				<p className={'text-sm text-gray-500'}>{RESOURCES_DICT.expand.description}</p>
-			</div>
+export function ResourcesExpand({ setCurrentTab }: { setCurrentTab: (tab: string) => void }): ReactNode {
+  return (
+    <motion.div className={'grid grid-cols-12'} {...expandAnimation}>
+      <div className={'col-span-4 flex flex-col border-r border-white/5 p-16'}>
+        <p className={'mb-4 text-2xl font-medium'}>
+          {RESOURCES_DICT.expand.titleLine1} <br />
+          {RESOURCES_DICT.expand.titleLine2}
+        </p>
+        <p className={'text-sm text-gray-500'}>{RESOURCES_DICT.expand.description}</p>
+      </div>
 
-			<div className={'col-span-8 p-16'}>
-				<div className={'flex flex-row flex-wrap gap-4'}>
-					{appResources.slice(0, 7).map(resource => (
-						<HeaderItem
-							onClick={() => setCurrentTab('empty')}
-							key={resource.name}
-							name={resource.name}
-							href={resource.href}
-							description={resource.description}
-							icon={resource.icon}
-							target={resource.target}
-						/>
-					))}
-				</div>
-			</div>
-		</motion.div>
-	)
+      <div className={'col-span-8 p-16'}>
+        <div className={'flex flex-row flex-wrap gap-4'}>
+          {appResources.slice(0, 7).map((resource) => (
+            <HeaderItem
+              onClick={() => setCurrentTab('empty')}
+              key={resource.name}
+              name={resource.name}
+              href={resource.href}
+              description={resource.description}
+              icon={resource.icon}
+              target={resource.target}
+            />
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  )
 }
diff --git a/app/[lang]/_components/header/animations.ts b/app/[lang]/_components/header/animations.ts
index 46b4eac..d24c51f 100644
--- a/app/[lang]/_components/header/animations.ts
+++ b/app/[lang]/_components/header/animations.ts
@@ -3,23 +3,23 @@
  * Includes variants and transition settings
  ********************************************************************************************/
 export const expandAnimation = {
-	initial: {opacity: 0, y: 20},
-	animate: {opacity: 1, y: 0},
-	transition: {
-		y: {duration: 0.4, ease: [0.23, 1, 0.32, 1]},
-		opacity: {duration: 0.3}
-	}
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: {
+    y: { duration: 0.4, ease: [0.23, 1, 0.32, 1] },
+    opacity: { duration: 0.3 },
+  },
 }
 
 export const containerAnimation = {
-	initial: {opacity: 0},
-	animate: (isOpen: boolean) => ({
-		opacity: isOpen ? 1 : 0
-	}),
-	exit: {
-		opacity: 0,
-		transition: {duration: 0.1, ease: 'easeInOut'}
-	},
+  initial: { opacity: 0 },
+  animate: (isOpen: boolean) => ({
+    opacity: isOpen ? 1 : 0,
+  }),
+  exit: {
+    opacity: 0,
+    transition: { duration: 0.1, ease: 'easeInOut' },
+  },
 
-	transition: {duration: 0.4, ease: 'easeInOut'}
+  transition: { duration: 0.4, ease: 'easeInOut' },
 }
diff --git a/app/[lang]/_components/strapi/cards-row/Card.tsx b/app/[lang]/_components/strapi/cards-row/Card.tsx
index b831e05..ef16c6a 100644
--- a/app/[lang]/_components/strapi/cards-row/Card.tsx
+++ b/app/[lang]/_components/strapi/cards-row/Card.tsx
@@ -1,94 +1,98 @@
 'use client'
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { Button } from '@/app/[lang]/_components/Button'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {TCard} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TCard } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-export function Card({data, smaller}: {data: TCard; smaller?: boolean}): ReactNode {
-	if (data.isTextFirst) {
-		return (
-			<div
-				className={cl(
-					'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl group',
-					'w-full flex-col'
-				)}>
-				<div className={'h-3/5 p-10'}>
-					<div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
-					<p className={cl('text-gray-500 whitespace-break-spaces break-keep', smaller ? 'text-sm' : '')}>
-						{data?.description}
-					</p>
-				</div>
-				<div
-					className={cl(
-						'overflow-hidden aspect-video bg-secondBg group-hover:bg-secondHoverBg',
-						'flex items-center justify-center mt-auto h-[40%]'
-					)}
-					style={{
-						backgroundImage: "url('/chains/grid-bg.png')",
-						backgroundSize: 'cover',
-						backgroundPosition: 'center'
-					}}>
-					<Image
-						src={getStrapiImageUrl(data?.image.url)}
-						alt={data?.title}
-						width={461}
-						height={219}
-						className={cl(
-							'size-full object-contain transition-all duration-300 group-hover:scale-105',
-							smaller ? 'h-[156px] w-[156px]' : ''
-						)}
-					/>
-				</div>
-			</div>
-		)
-	}
-	return (
-		<div
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl group',
-				'w-full flex-col'
-			)}>
-			<div
-				className={cl(
-					'overflow-hidden aspect-video bg-secondBg group-hover:bg-secondHoverBg',
-					'flex items-center justify-center h-[40%]'
-				)}
-				style={{
-					backgroundImage: "url('/chains/grid-bg.png')",
-					backgroundSize: 'cover',
-					backgroundPosition: 'center'
-				}}>
-				<Image
-					src={getStrapiImageUrl(data?.image.url)}
-					alt={data?.title}
-					width={461}
-					height={219}
-					className={cl(
-						'size-full object-contain transition-all duration-300 group-hover:scale-105',
-						'py-6 px-4 size-full'
-					)}
-				/>
-			</div>
-			<div className={'flex h-3/5 flex-col p-10'}>
-				<div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
-				<div className={cl('text-gray-500 whitespace-break-spaces break-keep', smaller ? 'text-sm' : '')}>
-					{data?.description}
-				</div>
-				{data?.buttonCta?.url && data?.buttonCta?.title && (
-					<div className={'mt-auto pt-2'}>
-						<Button
-							variant={'white'}
-							className={'whitespace-no-wrap !w-fit !text-sm'}
-							href={data?.buttonCta?.url}
-							title={data?.buttonCta?.title}
-						/>
-					</div>
-				)}
-			</div>
-		</div>
-	)
+export function Card({ data, smaller }: { data: TCard; smaller?: boolean }): ReactNode {
+  if (data.isTextFirst) {
+    return (
+      <div
+        className={cl(
+          'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl group',
+          'w-full flex-col'
+        )}
+      >
+        <div className={'h-3/5 p-10'}>
+          <div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
+          <p className={cl('text-gray-500 whitespace-break-spaces break-keep', smaller ? 'text-sm' : '')}>
+            {data?.description}
+          </p>
+        </div>
+        <div
+          className={cl(
+            'overflow-hidden aspect-video bg-secondBg group-hover:bg-secondHoverBg',
+            'flex items-center justify-center mt-auto h-[40%]'
+          )}
+          style={{
+            backgroundImage: "url('/chains/grid-bg.png')",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          <Image
+            src={getStrapiImageUrl(data?.image.url)}
+            alt={data?.title}
+            width={461}
+            height={219}
+            className={cl(
+              'size-full object-contain transition-all duration-300 group-hover:scale-105',
+              smaller ? 'h-[156px] w-[156px]' : ''
+            )}
+          />
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl group',
+        'w-full flex-col'
+      )}
+    >
+      <div
+        className={cl(
+          'overflow-hidden aspect-video bg-secondBg group-hover:bg-secondHoverBg',
+          'flex items-center justify-center h-[40%]'
+        )}
+        style={{
+          backgroundImage: "url('/chains/grid-bg.png')",
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      >
+        <Image
+          src={getStrapiImageUrl(data?.image.url)}
+          alt={data?.title}
+          width={461}
+          height={219}
+          className={cl(
+            'size-full object-contain transition-all duration-300 group-hover:scale-105',
+            'py-6 px-4 size-full'
+          )}
+        />
+      </div>
+      <div className={'flex h-3/5 flex-col p-10'}>
+        <div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
+        <div className={cl('text-gray-500 whitespace-break-spaces break-keep', smaller ? 'text-sm' : '')}>
+          {data?.description}
+        </div>
+        {data?.buttonCta?.url && data?.buttonCta?.title && (
+          <div className={'mt-auto pt-2'}>
+            <Button
+              variant={'white'}
+              className={'whitespace-no-wrap !w-fit !text-sm'}
+              href={data?.buttonCta?.url}
+              title={data?.buttonCta?.title}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/strapi/cards-row/CardsRow.tsx b/app/[lang]/_components/strapi/cards-row/CardsRow.tsx
index da86d61..2b5add7 100644
--- a/app/[lang]/_components/strapi/cards-row/CardsRow.tsx
+++ b/app/[lang]/_components/strapi/cards-row/CardsRow.tsx
@@ -1,44 +1,41 @@
-import {Fragment} from 'react'
+import { Fragment } from 'react'
 
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {RoundButton} from '@/app/[lang]/_components/RoundButton'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { RoundButton } from '@/app/[lang]/_components/RoundButton'
 
-import type {TCard, TCardsRowSection} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TCard, TCardsRowSection } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 export default function CardsRow(props: {
-	data: TCardsRowSection
-	children: (card: TCard) => ReactNode
+  data: TCardsRowSection
+  children: (card: TCard) => ReactNode
 }): ReactNode | null {
-	const {data, children} = props
-	if (!data) {
-		return null
-	}
+  const { data, children } = props
+  if (!data) {
+    return null
+  }
 
-	return (
-		<section className={'container relative mx-auto mb-[120px] md:px-4 lg:mb-60 lg:px-0'}>
-			<div className={'mb-8 text-left text-[40px] font-normal leading-[48px] text-white lg:max-w-[60%]'}>
-				{data?.title}
-			</div>
-			<div className={'row-span-full grid place-items-start gap-2 md:grid-cols-3'}>
-				{data?.cards?.map((card): ReactNode => <Fragment key={card.id}>{children?.(card)}</Fragment>)}
-			</div>
-			{data?.ctaBlock && (
-				<LocalizedLink
-					className={
-						'group mt-2 flex w-full items-center justify-between rounded-2xl bg-secondBg p-6 lg:p-10'
-					}
-					href={data?.ctaBlock?.url ?? '/'}
-					target={data?.ctaBlock?.target}>
-					<div className={'text-2xl text-white'}>{data?.ctaBlock?.title}</div>
-					<RoundButton
-						iconName={'arrow'}
-						className={
-							'bg-blue-500 transition-all duration-300 group-hover:scale-110 group-hover:bg-blueHover'
-						}
-					/>
-				</LocalizedLink>
-			)}
-		</section>
-	)
+  return (
+    <section className={'container relative mx-auto mb-[120px] md:px-4 lg:mb-60 lg:px-0'}>
+      <div className={'mb-8 text-left text-[40px] font-normal leading-[48px] text-white lg:max-w-[60%]'}>
+        {data?.title}
+      </div>
+      <div className={'row-span-full grid place-items-start gap-2 md:grid-cols-3'}>
+        {data?.cards?.map((card): ReactNode => <Fragment key={card.id}>{children?.(card)}</Fragment>)}
+      </div>
+      {data?.ctaBlock && (
+        <LocalizedLink
+          className={'group mt-2 flex w-full items-center justify-between rounded-2xl bg-secondBg p-6 lg:p-10'}
+          href={data?.ctaBlock?.url ?? '/'}
+          target={data?.ctaBlock?.target}
+        >
+          <div className={'text-2xl text-white'}>{data?.ctaBlock?.title}</div>
+          <RoundButton
+            iconName={'arrow'}
+            className={'bg-blue-500 transition-all duration-300 group-hover:scale-110 group-hover:bg-blueHover'}
+          />
+        </LocalizedLink>
+      )}
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/strapi/products/BuyCryptoCard.tsx b/app/[lang]/_components/strapi/products/BuyCryptoCard.tsx
index 5702274..9dd6174 100644
--- a/app/[lang]/_components/strapi/products/BuyCryptoCard.tsx
+++ b/app/[lang]/_components/strapi/products/BuyCryptoCard.tsx
@@ -1,38 +1,40 @@
 'use client'
 
-import {cl} from '@/app/[lang]/_utils/cl'
-import {PRODUCTS_DICT} from '@/app/[lang]/_utils/dictionary/products'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { PRODUCTS_DICT } from '@/app/[lang]/_utils/dictionary/products'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export function BuyCryptoCard(): ReactNode {
-	return (
-		<div
-			style={{
-				padding: '2px',
-				position: 'relative',
-				borderRadius: '1rem',
-				background: 'linear-gradient(to bottom, #FBA590, #AE5367, #1F5A9E)'
-			}}>
-			<div
-				className={cl(
-					'size-full min-w-[420px] p-6 pb-1 flex flex-col items-center justify-between rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C]'
-				)}>
-				<div>
-					<h1 className={'text-2xl'}>{PRODUCTS_DICT.buyCrypto.title}</h1>
+  return (
+    <div
+      style={{
+        padding: '2px',
+        position: 'relative',
+        borderRadius: '1rem',
+        background: 'linear-gradient(to bottom, #FBA590, #AE5367, #1F5A9E)',
+      }}
+    >
+      <div
+        className={cl(
+          'size-full min-w-[420px] p-6 pb-1 flex flex-col items-center justify-between rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C]'
+        )}
+      >
+        <div>
+          <h1 className={'text-2xl'}>{PRODUCTS_DICT.buyCrypto.title}</h1>
 
-					<p className={'mt-2 text-gray-600'}>{PRODUCTS_DICT.buyCrypto.description}</p>
-				</div>
-				<div className={'my-10 size-min overflow-hidden rounded-2xl'}>
-					<iframe
-						src={process.env.NEXT_PUBLIC_ONRAMPER_URL}
-						title={PRODUCTS_DICT.buyCrypto.widgetTitle}
-						height={'630px'}
-						width={'420px'}
-						allow={'accelerometer; autoplay; camera; gyroscope; payment; microphone'}
-					/>
-				</div>
-			</div>
-		</div>
-	)
+          <p className={'mt-2 text-gray-600'}>{PRODUCTS_DICT.buyCrypto.description}</p>
+        </div>
+        <div className={'my-10 size-min overflow-hidden rounded-2xl'}>
+          <iframe
+            src={process.env.NEXT_PUBLIC_ONRAMPER_URL}
+            title={PRODUCTS_DICT.buyCrypto.widgetTitle}
+            height={'630px'}
+            width={'420px'}
+            allow={'accelerometer; autoplay; camera; gyroscope; payment; microphone'}
+          />
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/strapi/products/CarouselCard.tsx b/app/[lang]/_components/strapi/products/CarouselCard.tsx
index 56e78ed..ed0ab04 100644
--- a/app/[lang]/_components/strapi/products/CarouselCard.tsx
+++ b/app/[lang]/_components/strapi/products/CarouselCard.tsx
@@ -2,62 +2,56 @@
 
 import Image from 'next/image'
 
-import {Carousel} from '@/app/[lang]/_components/Carousel'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { Carousel } from '@/app/[lang]/_components/Carousel'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {TStrapiImage} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TStrapiImage } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 type TCarouselCardProps = {
-	title: string
-	description: string
-	items?: {image?: TStrapiImage; url?: string}[]
-	image?: TStrapiImage
+  title: string
+  description: string
+  items?: { image?: TStrapiImage; url?: string }[]
+  image?: TStrapiImage
 }
 
-export function CarouselCard({title, description, items, image}: TCarouselCardProps): ReactNode {
-	return (
-		<div className={'flex flex-col rounded-2xl bg-secondBg'}>
-			<div className={'p-10'}>
-				<p className={'text-2xl text-white'}>{title}</p>
-				<p className={'text-gray-500'}>{description}</p>
-				<div className={'-mx-10 -mb-5 mt-10 overflow-hidden'}>
-					{items ? (
-						<Carousel
-							pauseOnHover
-							speed={20}
-							className={''}>
-							{items?.map(({image, url}, index) => (
-								<LocalizedLink
-									href={url ?? 'https://app.shapeshift.com'}
-									key={index}
-									className={'mx-6'}>
-									<div className={'relative flex max-h-10 w-max items-center justify-start'}>
-										<Image
-											src={getStrapiImageUrl(image?.url ?? '')}
-											alt={image?.url || ''}
-											width={696}
-											height={168}
-											className={'h-10 w-auto'}
-										/>
-									</div>
-								</LocalizedLink>
-							))}
-						</Carousel>
-					) : (
-						<div className={'mt-auto overflow-hidden'}>
-							<Image
-								src={getStrapiImageUrl(image?.url ?? '')}
-								alt={title}
-								width={696}
-								height={168}
-								className={'w-full object-contain'}
-							/>
-						</div>
-					)}
-				</div>
-			</div>
-		</div>
-	)
+export function CarouselCard({ title, description, items, image }: TCarouselCardProps): ReactNode {
+  return (
+    <div className={'flex flex-col rounded-2xl bg-secondBg'}>
+      <div className={'p-10'}>
+        <p className={'text-2xl text-white'}>{title}</p>
+        <p className={'text-gray-500'}>{description}</p>
+        <div className={'-mx-10 -mb-5 mt-10 overflow-hidden'}>
+          {items ? (
+            <Carousel pauseOnHover speed={20} className={''}>
+              {items?.map(({ image, url }, index) => (
+                <LocalizedLink href={url ?? 'https://app.shapeshift.com'} key={index} className={'mx-6'}>
+                  <div className={'relative flex max-h-10 w-max items-center justify-start'}>
+                    <Image
+                      src={getStrapiImageUrl(image?.url ?? '')}
+                      alt={image?.url || ''}
+                      width={696}
+                      height={168}
+                      className={'h-10 w-auto'}
+                    />
+                  </div>
+                </LocalizedLink>
+              ))}
+            </Carousel>
+          ) : (
+            <div className={'mt-auto overflow-hidden'}>
+              <Image
+                src={getStrapiImageUrl(image?.url ?? '')}
+                alt={title}
+                width={696}
+                height={168}
+                className={'w-full object-contain'}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx b/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx
index 1162eb9..121b2e3 100644
--- a/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx
+++ b/app/[lang]/_components/strapi/products/ChainBubblesCard.tsx
@@ -1,122 +1,106 @@
 'use client'
 
-import {motion} from 'framer-motion'
+import { motion } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
 
-import {PRODUCTS_DICT} from '@/app/[lang]/_utils/dictionary/products'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { PRODUCTS_DICT } from '@/app/[lang]/_utils/dictionary/products'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {TStrapiImage} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TStrapiImage } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 const MotionLink = motion(Link)
 
 type TChainBubblesCardProps = {
-	title: string
-	description: string
-	items?: {url?: string; image?: TStrapiImage}[]
-	randomDelays: number[]
+  title: string
+  description: string
+  items?: { url?: string; image?: TStrapiImage }[]
+  randomDelays: number[]
 }
 
-export function ChainBubblesCard({title, description, items, randomDelays}: TChainBubblesCardProps): ReactNode {
-	const hasChainItemsFromStrapi = items && items.length > 0
+export function ChainBubblesCard({ title, description, items, randomDelays }: TChainBubblesCardProps): ReactNode {
+  const hasChainItemsFromStrapi = items && items.length > 0
 
-	const chainItems = hasChainItemsFromStrapi ? items.slice(0, 5) : PRODUCTS_DICT.chainBubbles.defaultChains
+  const chainItems = hasChainItemsFromStrapi ? items.slice(0, 5) : PRODUCTS_DICT.chainBubbles.defaultChains
 
-	return (
-		<div className={'col-span-2 flex h-full flex-col rounded-2xl bg-secondBg'}>
-			<div className={'min-h-[330px] p-10'}>
-				<p className={'text-2xl text-white'}>{title}</p>
-				<p className={'text-gray-500'}>{description}</p>
+  return (
+    <div className={'col-span-2 flex h-full flex-col rounded-2xl bg-secondBg'}>
+      <div className={'min-h-[330px] p-10'}>
+        <p className={'text-2xl text-white'}>{title}</p>
+        <p className={'text-gray-500'}>{description}</p>
 
-				<div className={'mt-14 hidden grid-cols-5 gap-4 lg:grid'}>
-					{chainItems?.map((item, index) => (
-						<div
-							key={item.url}
-							className={'flex h-10 items-center justify-center lg:h-20'}>
-							<MotionLink
-								href={item.url ?? '#'}
-								target={'_blank'}
-								className={
-									'relative hidden items-center justify-center rounded-full border-2 border-[#386FF91A] bg-[#386FF91A] transition-all duration-300 lg:flex lg:hover:!h-[120px] lg:hover:!w-[120px]'
-								}
-								initial={{width: 100, height: 100}}
-								animate={{
-									width: [100, 120, 90],
-									height: [100, 120, 90]
-								}}
-								transition={{
-									duration: 4,
-									repeat: Number.POSITIVE_INFINITY,
-									repeatType: 'reverse',
-									ease: 'easeInOut',
-									delay: randomDelays[index]
-								}}>
-								<div
-									className={
-										'absolute left-1/2 top-1/2 size-[62px] -translate-x-1/2 -translate-y-1/2'
-									}>
-									<Image
-										src={
-											hasChainItemsFromStrapi
-												? getStrapiImageUrl(item.image?.url ?? '')
-												: (item.image?.url ?? '')
-										}
-										alt={item.image?.url || ''}
-										width={62}
-										height={62}
-										className={'size-[62px]'}
-									/>
-								</div>
-							</MotionLink>
-						</div>
-					))}
-				</div>
-				<div className={'mt-14 grid grid-cols-3 gap-4 lg:hidden'}>
-					{chainItems.slice(0, 3)?.map((item, index) => (
-						<div
-							key={item.url}
-							className={'flex h-10 items-center justify-center lg:h-20'}>
-							<MotionLink
-								href={item.url ?? '#'}
-								target={'_blank'}
-								className={
-									'relative flex items-center justify-center rounded-full border-2 border-[#386FF91A] bg-[#386FF91A] transition-all hover:!h-[130px] hover:!w-[130px] lg:hidden'
-								}
-								initial={{width: 70, height: 70}}
-								animate={{
-									width: [70, 100, 70],
-									height: [70, 100, 70]
-								}}
-								transition={{
-									duration: 4,
-									repeat: Number.POSITIVE_INFINITY,
-									repeatType: 'reverse',
-									ease: 'easeInOut',
-									delay: randomDelays[index]
-								}}>
-								<div
-									className={
-										'absolute left-1/2 top-1/2 size-[32px] -translate-x-1/2 -translate-y-1/2'
-									}>
-									<Image
-										src={
-											hasChainItemsFromStrapi
-												? getStrapiImageUrl(item.image?.url ?? '')
-												: (item.image?.url ?? '')
-										}
-										alt={item.image?.url || ''}
-										width={62}
-										height={62}
-										className={'size-[32px]'}
-									/>
-								</div>
-							</MotionLink>
-						</div>
-					))}
-				</div>
-			</div>
-		</div>
-	)
+        <div className={'mt-14 hidden grid-cols-5 gap-4 lg:grid'}>
+          {chainItems?.map((item, index) => (
+            <div key={item.url} className={'flex h-10 items-center justify-center lg:h-20'}>
+              <MotionLink
+                href={item.url ?? '#'}
+                target={'_blank'}
+                className={
+                  'relative hidden items-center justify-center rounded-full border-2 border-[#386FF91A] bg-[#386FF91A] transition-all duration-300 lg:flex lg:hover:!h-[120px] lg:hover:!w-[120px]'
+                }
+                initial={{ width: 100, height: 100 }}
+                animate={{
+                  width: [100, 120, 90],
+                  height: [100, 120, 90],
+                }}
+                transition={{
+                  duration: 4,
+                  repeat: Number.POSITIVE_INFINITY,
+                  repeatType: 'reverse',
+                  ease: 'easeInOut',
+                  delay: randomDelays[index],
+                }}
+              >
+                <div className={'absolute left-1/2 top-1/2 size-[62px] -translate-x-1/2 -translate-y-1/2'}>
+                  <Image
+                    src={hasChainItemsFromStrapi ? getStrapiImageUrl(item.image?.url ?? '') : (item.image?.url ?? '')}
+                    alt={item.image?.url || ''}
+                    width={62}
+                    height={62}
+                    className={'size-[62px]'}
+                  />
+                </div>
+              </MotionLink>
+            </div>
+          ))}
+        </div>
+        <div className={'mt-14 grid grid-cols-3 gap-4 lg:hidden'}>
+          {chainItems.slice(0, 3)?.map((item, index) => (
+            <div key={item.url} className={'flex h-10 items-center justify-center lg:h-20'}>
+              <MotionLink
+                href={item.url ?? '#'}
+                target={'_blank'}
+                className={
+                  'relative flex items-center justify-center rounded-full border-2 border-[#386FF91A] bg-[#386FF91A] transition-all hover:!h-[130px] hover:!w-[130px] lg:hidden'
+                }
+                initial={{ width: 70, height: 70 }}
+                animate={{
+                  width: [70, 100, 70],
+                  height: [70, 100, 70],
+                }}
+                transition={{
+                  duration: 4,
+                  repeat: Number.POSITIVE_INFINITY,
+                  repeatType: 'reverse',
+                  ease: 'easeInOut',
+                  delay: randomDelays[index],
+                }}
+              >
+                <div className={'absolute left-1/2 top-1/2 size-[32px] -translate-x-1/2 -translate-y-1/2'}>
+                  <Image
+                    src={hasChainItemsFromStrapi ? getStrapiImageUrl(item.image?.url ?? '') : (item.image?.url ?? '')}
+                    alt={item.image?.url || ''}
+                    width={62}
+                    height={62}
+                    className={'size-[32px]'}
+                  />
+                </div>
+              </MotionLink>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/strapi/products/Grid.tsx b/app/[lang]/_components/strapi/products/Grid.tsx
index 12488d7..a4610a3 100644
--- a/app/[lang]/_components/strapi/products/Grid.tsx
+++ b/app/[lang]/_components/strapi/products/Grid.tsx
@@ -1,74 +1,67 @@
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { Button } from '@/app/[lang]/_components/Button'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {TCard, TGridSection} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TCard, TGridSection } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-export default function Grid({data}: {data: TGridSection}): ReactNode | null {
-	if (!data) {
-		return null
-	}
+export default function Grid({ data }: { data: TGridSection }): ReactNode | null {
+  if (!data) {
+    return null
+  }
 
-	return (
-		<section className={'container mb-60 grid w-full grid-cols-1 gap-2 lg:grid-cols-3'}>
-			<div
-				className={'col-span-1 row-span-3 hidden rounded-2xl lg:block'}
-				style={{
-					background: 'linear-gradient(180deg, #FBA590 0%, #AE5367 50%, #1F5A9E 100%)',
-					padding: 2
-				}}>
-				<div
-					style={{
-						background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-					}}
-					className={cl('flex flex-col items-center justify-center rounded-2xl h-full w-full')}>
-					<div className={'relative z-50 flex max-w-[300px] flex-col items-center justify-center'}>
-						<div className={' text-center text-[40px] leading-[48px]'}>{data?.cardCta[0]?.title}</div>
-						<div className={'mb-14 mt-4 text-center text-gray-500'}>{data?.cardCta[0]?.description}</div>
-						<Button
-							variant={'blue'}
-							title={data?.cardCta[0]?.buttonCta?.title ?? 'Click Here'}
-							href={data?.cardCta[0]?.buttonCta?.url ?? '/'}
-						/>
-					</div>
-				</div>
-			</div>
-			<div>
-				<div className={'mb-6 text-left text-[28px] leading-[32px] lg:hidden'}>{data?.cardCta[0]?.title}</div>
-			</div>
-			<Card
-				data={data?.card[0]}
-				className={'col-span-1 h-[356px] lg:col-span-2'}
-			/>
-			<Card
-				data={data?.card[1]}
-				className={'col-span-1 h-[356px]'}
-			/>
-			<Card
-				data={data?.card[2]}
-				className={'col-span-1 h-[356px]'}
-			/>
-		</section>
-	)
+  return (
+    <section className={'container mb-60 grid w-full grid-cols-1 gap-2 lg:grid-cols-3'}>
+      <div
+        className={'col-span-1 row-span-3 hidden rounded-2xl lg:block'}
+        style={{
+          background: 'linear-gradient(180deg, #FBA590 0%, #AE5367 50%, #1F5A9E 100%)',
+          padding: 2,
+        }}
+      >
+        <div
+          style={{
+            background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+          }}
+          className={cl('flex flex-col items-center justify-center rounded-2xl h-full w-full')}
+        >
+          <div className={'relative z-50 flex max-w-[300px] flex-col items-center justify-center'}>
+            <div className={' text-center text-[40px] leading-[48px]'}>{data?.cardCta[0]?.title}</div>
+            <div className={'mb-14 mt-4 text-center text-gray-500'}>{data?.cardCta[0]?.description}</div>
+            <Button
+              variant={'blue'}
+              title={data?.cardCta[0]?.buttonCta?.title ?? 'Click Here'}
+              href={data?.cardCta[0]?.buttonCta?.url ?? '/'}
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div className={'mb-6 text-left text-[28px] leading-[32px] lg:hidden'}>{data?.cardCta[0]?.title}</div>
+      </div>
+      <Card data={data?.card[0]} className={'col-span-1 h-[356px] lg:col-span-2'} />
+      <Card data={data?.card[1]} className={'col-span-1 h-[356px]'} />
+      <Card data={data?.card[2]} className={'col-span-1 h-[356px]'} />
+    </section>
+  )
 }
 
-function Card({data, className}: {data: TCard; className: string}): ReactNode {
-	return (
-		<div className={`relative overflow-hidden rounded-2xl bg-secondBg ${className}`}>
-			<div className={'relative z-30 p-10'}>
-				<div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
-				<div className={'text-gray-500'}>{data?.description}</div>
-			</div>
-			<Image
-				src={getStrapiImageUrl(data?.image.url)}
-				alt={data?.title}
-				width={data?.image.width}
-				height={data?.image.height}
-				className={'absolute inset-x-0 bottom-0 z-10 mt-auto w-full object-contain'}
-			/>
-		</div>
-	)
+function Card({ data, className }: { data: TCard; className: string }): ReactNode {
+  return (
+    <div className={`relative overflow-hidden rounded-2xl bg-secondBg ${className}`}>
+      <div className={'relative z-30 p-10'}>
+        <div className={'mb-2 text-2xl text-white'}>{data?.title}</div>
+        <div className={'text-gray-500'}>{data?.description}</div>
+      </div>
+      <Image
+        src={getStrapiImageUrl(data?.image.url)}
+        alt={data?.title}
+        width={data?.image.width}
+        height={data?.image.height}
+        className={'absolute inset-x-0 bottom-0 z-10 mt-auto w-full object-contain'}
+      />
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/strapi/products/GridDisplaced.tsx b/app/[lang]/_components/strapi/products/GridDisplaced.tsx
index 3d72f0c..ede9662 100644
--- a/app/[lang]/_components/strapi/products/GridDisplaced.tsx
+++ b/app/[lang]/_components/strapi/products/GridDisplaced.tsx
@@ -1,70 +1,70 @@
 'use client'
 
 import Image from 'next/image'
-import {useMemo} from 'react'
+import { useMemo } from 'react'
 
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import {BuyCryptoCard} from './BuyCryptoCard'
-import {CarouselCard} from './CarouselCard'
-import {ChainBubblesCard} from './ChainBubblesCard'
+import { BuyCryptoCard } from './BuyCryptoCard'
+import { CarouselCard } from './CarouselCard'
+import { ChainBubblesCard } from './ChainBubblesCard'
 
-import type {TGridDisplacedSection} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TGridDisplacedSection } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-export default function GridDisplaced({data}: {data: TGridDisplacedSection}): ReactNode | null {
-	// Create an array of random delays for each bubble
-	const randomDelays = useMemo(
-		() => data?.cards[0].items?.map(() => Math.random() * 2) || [],
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[JSON.stringify(data?.cards)]
-	)
+export default function GridDisplaced({ data }: { data: TGridDisplacedSection }): ReactNode | null {
+  // Create an array of random delays for each bubble
+  const randomDelays = useMemo(
+    () => data?.cards[0].items?.map(() => Math.random() * 2) || [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(data?.cards)]
+  )
 
-	if (!data) {
-		return null
-	}
+  if (!data) {
+    return null
+  }
 
-	return (
-		<section className={'container relative'}>
-			<div className={'grid grid-cols-1 gap-2 lg:grid-cols-3'}>
-				<div className={'col-span-2 grid grid-cols-2 gap-2 overflow-hidden rounded-2xl'}>
-					<div className={'col-span-2 p-10'}>
-						<p className={'text-[28px] leading-[32px] lg:text-[40px] lg:leading-[48px]'}>{data?.title}</p>
-					</div>
+  return (
+    <section className={'container relative'}>
+      <div className={'grid grid-cols-1 gap-2 lg:grid-cols-3'}>
+        <div className={'col-span-2 grid grid-cols-2 gap-2 overflow-hidden rounded-2xl'}>
+          <div className={'col-span-2 p-10'}>
+            <p className={'text-[28px] leading-[32px] lg:text-[40px] lg:leading-[48px]'}>{data?.title}</p>
+          </div>
 
-					<ChainBubblesCard
-						title={data?.cards[0].title}
-						description={data?.cards[0].description}
-						items={data?.cards[0].items}
-						randomDelays={randomDelays}
-					/>
+          <ChainBubblesCard
+            title={data?.cards[0].title}
+            description={data?.cards[0].description}
+            items={data?.cards[0].items}
+            randomDelays={randomDelays}
+          />
 
-					<div className={'col-span-2 grid h-full grid-cols-2 gap-2'}>
-						<CarouselCard
-							title={data?.cards[1]?.title}
-							description={data?.cards[1]?.description}
-							items={data?.cards[1]?.items}
-							image={data?.cards[1]?.image}
-						/>
-						<div className={'flex flex-col rounded-2xl bg-secondBg'}>
-							<div className={'p-10'}>
-								<p className={'text-2xl text-white'}>{data?.cards[2]?.title}</p>
-								<p className={'text-gray-500'}>{data?.cards[2]?.description}</p>
-							</div>
-							<div className={'mt-auto overflow-hidden'}>
-								<Image
-									src={getStrapiImageUrl(data?.cards[2]?.image?.url)}
-									alt={data?.cards[2]?.title}
-									width={696}
-									height={168}
-									className={'w-full object-contain'}
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-				<BuyCryptoCard />
-			</div>
-		</section>
-	)
+          <div className={'col-span-2 grid h-full grid-cols-2 gap-2'}>
+            <CarouselCard
+              title={data?.cards[1]?.title}
+              description={data?.cards[1]?.description}
+              items={data?.cards[1]?.items}
+              image={data?.cards[1]?.image}
+            />
+            <div className={'flex flex-col rounded-2xl bg-secondBg'}>
+              <div className={'p-10'}>
+                <p className={'text-2xl text-white'}>{data?.cards[2]?.title}</p>
+                <p className={'text-gray-500'}>{data?.cards[2]?.description}</p>
+              </div>
+              <div className={'mt-auto overflow-hidden'}>
+                <Image
+                  src={getStrapiImageUrl(data?.cards[2]?.image?.url)}
+                  alt={data?.cards[2]?.title}
+                  width={696}
+                  height={168}
+                  className={'w-full object-contain'}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <BuyCryptoCard />
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/strapi/products/GridLadder.tsx b/app/[lang]/_components/strapi/products/GridLadder.tsx
index fa4d780..af5003e 100644
--- a/app/[lang]/_components/strapi/products/GridLadder.tsx
+++ b/app/[lang]/_components/strapi/products/GridLadder.tsx
@@ -1,81 +1,83 @@
 import Image from 'next/image'
 import React from 'react'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { Button } from '@/app/[lang]/_components/Button'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {TGridLadderSection, TGridLadderStep} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TGridLadderSection, TGridLadderStep } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-export default function GridLadder({data}: {data: TGridLadderSection}): ReactNode | null {
-	if (!data) {
-		return null
-	}
+export default function GridLadder({ data }: { data: TGridLadderSection }): ReactNode | null {
+  if (!data) {
+    return null
+  }
 
-	return (
-		<section className={'container mb-[120px] lg:mb-60'}>
-			<div className={'grid gap-x-[120px] gap-y-40 lg:grid-cols-1'}>
-				{data.steps.map((step, index) => (
-					<div
-						key={step.id}
-						className={'container relative overflow-hidden rounded-2xl bg-secondBg'}
-						style={{
-							backgroundImage: "url('/chains/grid-bg.png')",
-							backgroundSize: 'cover',
-							backgroundPosition: 'center'
-						}}>
-						<div
-							className={cl(
-								'flex gap-x-[120px] justify-between flex-col',
-								index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
-							)}
-							key={step.id}>
-							<LadderItem data={step} />
-							<div className={'h-[400px] w-[640px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
-								<Image
-									src={getStrapiImageUrl(step.image?.url)}
-									alt={step.id.toString()}
-									width={step.image?.width}
-									height={step.image?.height}
-									className={'size-full object-cover'}
-								/>
-							</div>
-						</div>
-						{step.buttonCta && (
-							<Button
-								variant={'blue'}
-								title={step.buttonCta.title}
-								href={step.buttonCta.url}
-								hasArrow
-								className={'mt-10 block !w-full lg:hidden'}
-							/>
-						)}
-					</div>
-				))}
-			</div>
-		</section>
-	)
+  return (
+    <section className={'container mb-[120px] lg:mb-60'}>
+      <div className={'grid gap-x-[120px] gap-y-40 lg:grid-cols-1'}>
+        {data.steps.map((step, index) => (
+          <div
+            key={step.id}
+            className={'container relative overflow-hidden rounded-2xl bg-secondBg'}
+            style={{
+              backgroundImage: "url('/chains/grid-bg.png')",
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          >
+            <div
+              className={cl(
+                'flex gap-x-[120px] justify-between flex-col',
+                index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+              )}
+              key={step.id}
+            >
+              <LadderItem data={step} />
+              <div className={'h-[400px] w-[640px] overflow-hidden rounded-2xl bg-secondHoverBg'}>
+                <Image
+                  src={getStrapiImageUrl(step.image?.url)}
+                  alt={step.id.toString()}
+                  width={step.image?.width}
+                  height={step.image?.height}
+                  className={'size-full object-cover'}
+                />
+              </div>
+            </div>
+            {step.buttonCta && (
+              <Button
+                variant={'blue'}
+                title={step.buttonCta.title}
+                href={step.buttonCta.url}
+                hasArrow
+                className={'mt-10 block !w-full lg:hidden'}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
 }
 
-const LadderItem = ({data}: {data: TGridLadderStep}): ReactNode | null => {
-	if (!data) {
-		return null
-	}
+const LadderItem = ({ data }: { data: TGridLadderStep }): ReactNode | null => {
+  if (!data) {
+    return null
+  }
 
-	return (
-		<div className={'flex max-w-screen-sm flex-col p-10'}>
-			<h2 className={'mb-4 text-[40px] leading-[48px]'}>{data.title}</h2>
-			<p className={'mb-10 text-gray-500'}>{data.description}</p>
-			{data.buttonCta && (
-				<Button
-					variant={'blue'}
-					title={data.buttonCta.title}
-					href={data.buttonCta.url}
-					hasArrow
-					className={'hidden lg:flex'}
-				/>
-			)}
-		</div>
-	)
+  return (
+    <div className={'flex max-w-screen-sm flex-col p-10'}>
+      <h2 className={'mb-4 text-[40px] leading-[48px]'}>{data.title}</h2>
+      <p className={'mb-10 text-gray-500'}>{data.description}</p>
+      {data.buttonCta && (
+        <Button
+          variant={'blue'}
+          title={data.buttonCta.title}
+          href={data.buttonCta.url}
+          hasArrow
+          className={'hidden lg:flex'}
+        />
+      )}
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/strapi/templates/ChainActions.tsx b/app/[lang]/_components/strapi/templates/ChainActions.tsx
index d011b88..d3feb6a 100644
--- a/app/[lang]/_components/strapi/templates/ChainActions.tsx
+++ b/app/[lang]/_components/strapi/templates/ChainActions.tsx
@@ -1,105 +1,103 @@
-import {useMemo} from 'react'
+import { useMemo } from 'react'
 
-import {IconBorrow} from '@/app/[lang]/_icons/IconBorrow'
-import {IconBuySell} from '@/app/[lang]/_icons/IconBuySell'
-import {IconEarn} from '@/app/[lang]/_icons/IconEarn'
-import {IconHold} from '@/app/[lang]/_icons/IconHold'
-import {IconSendReceive} from '@/app/[lang]/_icons/IconSendReceive'
-import {IconTrade} from '@/app/[lang]/_icons/IconTrade'
+import { IconBorrow } from '@/app/[lang]/_icons/IconBorrow'
+import { IconBuySell } from '@/app/[lang]/_icons/IconBuySell'
+import { IconEarn } from '@/app/[lang]/_icons/IconEarn'
+import { IconHold } from '@/app/[lang]/_icons/IconHold'
+import { IconSendReceive } from '@/app/[lang]/_icons/IconSendReceive'
+import { IconTrade } from '@/app/[lang]/_icons/IconTrade'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-function Feature({title, description, icon}: {title: string; description: string; icon: ReactNode}): ReactNode {
-	return (
-		<div className={'flex items-center gap-6 rounded-2xl bg-secondBg px-6 py-[26px] lg:px-10 lg:py-[30px]'}>
-			<div className={'size-12 rounded-[12px] bg-white/5 p-[12px] lg:size-16 lg:rounded-2xl lg:p-5'}>{icon}</div>
+function Feature({ title, description, icon }: { title: string; description: string; icon: ReactNode }): ReactNode {
+  return (
+    <div className={'flex items-center gap-6 rounded-2xl bg-secondBg px-6 py-[26px] lg:px-10 lg:py-[30px]'}>
+      <div className={'size-12 rounded-[12px] bg-white/5 p-[12px] lg:size-16 lg:rounded-2xl lg:p-5'}>{icon}</div>
 
-			<div className={'flex flex-col gap-1'}>
-				<h2 className={'lg:text-2xl'}>{title}</h2>
-				<p className={'text-sm text-gray-500 lg:text-base'}>{description}</p>
-			</div>
-		</div>
-	)
+      <div className={'flex flex-col gap-1'}>
+        <h2 className={'lg:text-2xl'}>{title}</h2>
+        <p className={'text-sm text-gray-500 lg:text-base'}>{description}</p>
+      </div>
+    </div>
+  )
 }
 
-export function ChainActions({features, chainName}: {features: string[]; chainName: string}): ReactNode {
-	const featuresComponents = useMemo((): ReactNode[] => {
-		const featuresToDisplay = []
-		if (features.includes('Trade')) {
-			featuresToDisplay.push(
-				<Feature
-					key={'Trade'}
-					title={'Trade'}
-					description={`Trade 10,000+ assets on ${chainName} across 15 chains.`}
-					icon={<IconTrade />}
-				/>
-			)
-		}
+export function ChainActions({ features, chainName }: { features: string[]; chainName: string }): ReactNode {
+  const featuresComponents = useMemo((): ReactNode[] => {
+    const featuresToDisplay = []
+    if (features.includes('Trade')) {
+      featuresToDisplay.push(
+        <Feature
+          key={'Trade'}
+          title={'Trade'}
+          description={`Trade 10,000+ assets on ${chainName} across 15 chains.`}
+          icon={<IconTrade />}
+        />
+      )
+    }
 
-		if (features.includes('Hodl')) {
-			featuresToDisplay.push(
-				<Feature
-					key={'Hodl'}
-					title={'Hodl'}
-					description={`Stack crypto on ${chainName} and never let it go.`}
-					icon={<IconHold />}
-				/>
-			)
-		}
+    if (features.includes('Hodl')) {
+      featuresToDisplay.push(
+        <Feature
+          key={'Hodl'}
+          title={'Hodl'}
+          description={`Stack crypto on ${chainName} and never let it go.`}
+          icon={<IconHold />}
+        />
+      )
+    }
 
-		if (features.includes('Earn')) {
-			featuresToDisplay.push(
-				<Feature
-					key={'Earn'}
-					title={'Earn'}
-					description={`Put your assets to work with one-click ${chainName} DeFi yield.`}
-					icon={<IconEarn />}
-				/>
-			)
-		}
+    if (features.includes('Earn')) {
+      featuresToDisplay.push(
+        <Feature
+          key={'Earn'}
+          title={'Earn'}
+          description={`Put your assets to work with one-click ${chainName} DeFi yield.`}
+          icon={<IconEarn />}
+        />
+      )
+    }
 
-		if (features.includes('Borrow')) {
-			featuresToDisplay.push(
-				<Feature
-					key={'Borrow'}
-					title={'Discover'}
-					description={`Explore new tokens and rising DeFi projects on ${chainName}.`}
-					icon={<IconBorrow />}
-				/>
-			)
-		}
+    if (features.includes('Borrow')) {
+      featuresToDisplay.push(
+        <Feature
+          key={'Borrow'}
+          title={'Discover'}
+          description={`Explore new tokens and rising DeFi projects on ${chainName}.`}
+          icon={<IconBorrow />}
+        />
+      )
+    }
 
-		if (features.includes('Buy & Sell')) {
-			featuresToDisplay.push(
-				<Feature
-					key={'Buy & Sell'}
-					title={'Buy & Sell'}
-					description={`Buy and sell assets on ${chainName} instantly.`}
-					icon={<IconBuySell />}
-				/>
-			)
-		}
+    if (features.includes('Buy & Sell')) {
+      featuresToDisplay.push(
+        <Feature
+          key={'Buy & Sell'}
+          title={'Buy & Sell'}
+          description={`Buy and sell assets on ${chainName} instantly.`}
+          icon={<IconBuySell />}
+        />
+      )
+    }
 
-		if (features.includes('Send & Receive')) {
-			featuresToDisplay.push(
-				<Feature
-					key={'Send & Receive'}
-					title={'Send & Receive'}
-					description={`Send and receive crypto on ${chainName} with ease.`}
-					icon={<IconSendReceive />}
-				/>
-			)
-		}
+    if (features.includes('Send & Receive')) {
+      featuresToDisplay.push(
+        <Feature
+          key={'Send & Receive'}
+          title={'Send & Receive'}
+          description={`Send and receive crypto on ${chainName} with ease.`}
+          icon={<IconSendReceive />}
+        />
+      )
+    }
 
-		return featuresToDisplay
-	}, [features, chainName])
+    return featuresToDisplay
+  }, [features, chainName])
 
-	return (
-		<section className={'container flex flex-col gap-6 lg:gap-16'}>
-			<h1 className={'max-w-[700px] text-[28px] leading-[32px] lg:text-7xl'}>
-				{`What can I do on ${chainName}?`}
-			</h1>
-			<div className={'grid grid-cols-1 gap-6 md:grid-cols-3'}>{featuresComponents}</div>
-		</section>
-	)
+  return (
+    <section className={'container flex flex-col gap-6 lg:gap-16'}>
+      <h1 className={'max-w-[700px] text-[28px] leading-[32px] lg:text-7xl'}>{`What can I do on ${chainName}?`}</h1>
+      <div className={'grid grid-cols-1 gap-6 md:grid-cols-3'}>{featuresComponents}</div>
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/strapi/templates/ChainDescription.tsx b/app/[lang]/_components/strapi/templates/ChainDescription.tsx
index d874fe0..674d446 100644
--- a/app/[lang]/_components/strapi/templates/ChainDescription.tsx
+++ b/app/[lang]/_components/strapi/templates/ChainDescription.tsx
@@ -1,17 +1,16 @@
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-export function ChainDescription({chainName, description}: {chainName: string; description: string}): ReactNode {
-	return (
-		<section
-			className={
-				'grid grid-cols-1 items-center rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] p-6 lg:grid-cols-2 lg:p-20'
-			}>
-			<h2 className={'col-span-1 mb-6 text-[28px] leading-[32px] lg:mb-0 lg:text-7xl'}>
-				{`What is ${chainName}`}
-			</h2>
-			<div className={'col-span-1 flex max-w-[560px] flex-col gap-4'}>
-				<p className={'whitespace-break-spaces break-keep text-gray-500'}>{description}</p>
-			</div>
-		</section>
-	)
+export function ChainDescription({ chainName, description }: { chainName: string; description: string }): ReactNode {
+  return (
+    <section
+      className={
+        'grid grid-cols-1 items-center rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] p-6 lg:grid-cols-2 lg:p-20'
+      }
+    >
+      <h2 className={'col-span-1 mb-6 text-[28px] leading-[32px] lg:mb-0 lg:text-7xl'}>{`What is ${chainName}`}</h2>
+      <div className={'col-span-1 flex max-w-[560px] flex-col gap-4'}>
+        <p className={'whitespace-break-spaces break-keep text-gray-500'}>{description}</p>
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/strapi/templates/ChainFeatures.tsx b/app/[lang]/_components/strapi/templates/ChainFeatures.tsx
index ae108f8..478aa79 100644
--- a/app/[lang]/_components/strapi/templates/ChainFeatures.tsx
+++ b/app/[lang]/_components/strapi/templates/ChainFeatures.tsx
@@ -1,821 +1,734 @@
 import Image from 'next/image'
-import {useMemo} from 'react'
+import { useMemo } from 'react'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {getStrapiImageUrl} from '@/app/[lang]/_utils/query'
+import { Button } from '@/app/[lang]/_components/Button'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { getStrapiImageUrl } from '@/app/[lang]/_utils/query'
 
-import type {TStrapiImage} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TStrapiImage } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
-function WalletFeature({chainName}: {chainName: string}): ReactNode {
-	return (
-		<div
-			className={
-				'container col-span-6 grid w-full grid-cols-2 overflow-hidden rounded-2xl lg:aspect-[760/540] lg:h-[540px]'
-			}
-			style={{
-				backgroundImage: "url('/wallets/cover.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			<div className={'w-full p-20'}>
-				<p className={'text-[40px] leading-[48px] text-white'}>{`ShapeShift ${chainName} wallet`}</p>
-				<div className={'flex flex-col gap-4 pt-8'}>
-					<p className={'text-xl text-secondary/50'}>
-						{`Easily connect your favorite ${chainName} Wallet to ShapeShift. Need a ${chainName} Wallet? Get started with the ShapeShift wallet today.`}
-					</p>
-					<p className={'text-xl text-secondary/50'}>
-						{`Easily view your ${chainName} wallet address, ${chainName} balance, ${chainName} transaction history, and ${chainName} price in one simple `}
-						<LocalizedLink
-							className={'text-white underline'}
-							target={'_blank'}
-							href={'https://app.shapeshift.com/#/wallet'}>
-							{'interactive dashboard'}
-						</LocalizedLink>
-						{'.'}
-					</p>
-				</div>
-				<div className={'mt-10'}>
-					<Button
-						variant={'blue'}
-						title={'Get Started'}
-						href={'https://app.shapeshift.com/#/wallet'}
-						hasArrow
-					/>
-				</div>
-			</div>
-			<div className={'flex w-full items-end justify-end'}>
-				<Image
-					src={'/chains/wallet-mockup.png'}
-					alt={'ShapeShift wallet'}
-					width={680}
-					height={540}
-				/>
-			</div>
-		</div>
-	)
+function WalletFeature({ chainName }: { chainName: string }): ReactNode {
+  return (
+    <div
+      className={
+        'container col-span-6 grid w-full grid-cols-2 overflow-hidden rounded-2xl lg:aspect-[760/540] lg:h-[540px]'
+      }
+      style={{
+        backgroundImage: "url('/wallets/cover.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className={'w-full p-20'}>
+        <p className={'text-[40px] leading-[48px] text-white'}>{`ShapeShift ${chainName} wallet`}</p>
+        <div className={'flex flex-col gap-4 pt-8'}>
+          <p className={'text-xl text-secondary/50'}>
+            {`Easily connect your favorite ${chainName} Wallet to ShapeShift. Need a ${chainName} Wallet? Get started with the ShapeShift wallet today.`}
+          </p>
+          <p className={'text-xl text-secondary/50'}>
+            {`Easily view your ${chainName} wallet address, ${chainName} balance, ${chainName} transaction history, and ${chainName} price in one simple `}
+            <LocalizedLink
+              className={'text-white underline'}
+              target={'_blank'}
+              href={'https://app.shapeshift.com/#/wallet'}
+            >
+              {'interactive dashboard'}
+            </LocalizedLink>
+            {'.'}
+          </p>
+        </div>
+        <div className={'mt-10'}>
+          <Button variant={'blue'} title={'Get Started'} href={'https://app.shapeshift.com/#/wallet'} hasArrow />
+        </div>
+      </div>
+      <div className={'flex w-full items-end justify-end'}>
+        <Image src={'/chains/wallet-mockup.png'} alt={'ShapeShift wallet'} width={680} height={540} />
+      </div>
+    </div>
+  )
 }
 
-function HardwareWalletFeature({chainName}: {chainName: string}): ReactNode {
-	return (
-		<div
-			className={
-				'container col-span-1 grid grid-cols-3 gap-4 overflow-hidden rounded-2xl bg-secondBg p-6 lg:col-span-6 lg:aspect-[1400/476] lg:h-[476px] lg:p-10'
-			}
-			style={{
-				backgroundImage: "url('/chains/grid-bg.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			<div className={'flex w-full items-center justify-start px-20'}>
-				<p className={'text-[40px] leading-[48px] text-white'}>{'Hardware wallet support'}</p>
-			</div>
-			<div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
-				<Image
-					src={'/chains/keepkey.png'}
-					alt={'KeepKey'}
-					width={349}
-					height={204}
-				/>
-				<div className={'text-left'}>
-					<p className={'pb-2 text-2xl text-white'}>{'KeepKey'}</p>
-					<p className={'text-base text-secondary/50'}>
-						{'Connect your '}
-						<LocalizedLink
-							className={'text-white underline'}
-							target={'_blank'}
-							href={'https://shapeshift.com/wallets/keepkey'}>
-							{'KeepKey'}
-						</LocalizedLink>
-						{` hardware wallet to ShapeShift and enjoy permissionless, private ${chainName} swaps and DeFi.`}
-					</p>
-				</div>
-			</div>
-			<div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
-				<Image
-					src={'/chains/ledger.png'}
-					alt={'Ledger'}
-					width={349}
-					height={204}
-				/>
-				<div className={'text-left'}>
-					<p className={'pb-2 text-2xl text-white'}>{'Ledger'}</p>
-					<p className={'text-base text-secondary/50'}>
-						{'Privately connect your '}
-						<LocalizedLink
-							className={'text-white underline'}
-							href={'/wallets/ledger'}>
-							{'Ledger'}
-						</LocalizedLink>
-						{` directly to ShapeShift without the need for Ledger Live and enjoy permissionless ${chainName}.`}
-					</p>
-				</div>
-			</div>
-		</div>
-	)
+function HardwareWalletFeature({ chainName }: { chainName: string }): ReactNode {
+  return (
+    <div
+      className={
+        'container col-span-1 grid grid-cols-3 gap-4 overflow-hidden rounded-2xl bg-secondBg p-6 lg:col-span-6 lg:aspect-[1400/476] lg:h-[476px] lg:p-10'
+      }
+      style={{
+        backgroundImage: "url('/chains/grid-bg.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className={'flex w-full items-center justify-start px-20'}>
+        <p className={'text-[40px] leading-[48px] text-white'}>{'Hardware wallet support'}</p>
+      </div>
+      <div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
+        <Image src={'/chains/keepkey.png'} alt={'KeepKey'} width={349} height={204} />
+        <div className={'text-left'}>
+          <p className={'pb-2 text-2xl text-white'}>{'KeepKey'}</p>
+          <p className={'text-base text-secondary/50'}>
+            {'Connect your '}
+            <LocalizedLink
+              className={'text-white underline'}
+              target={'_blank'}
+              href={'https://shapeshift.com/wallets/keepkey'}
+            >
+              {'KeepKey'}
+            </LocalizedLink>
+            {` hardware wallet to ShapeShift and enjoy permissionless, private ${chainName} swaps and DeFi.`}
+          </p>
+        </div>
+      </div>
+      <div className={'flex w-full flex-col items-center gap-6 rounded-2xl bg-secondHoverBg p-10'}>
+        <Image src={'/chains/ledger.png'} alt={'Ledger'} width={349} height={204} />
+        <div className={'text-left'}>
+          <p className={'pb-2 text-2xl text-white'}>{'Ledger'}</p>
+          <p className={'text-base text-secondary/50'}>
+            {'Privately connect your '}
+            <LocalizedLink className={'text-white underline'} href={'/wallets/ledger'}>
+              {'Ledger'}
+            </LocalizedLink>
+            {` directly to ShapeShift without the need for Ledger Live and enjoy permissionless ${chainName}.`}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
 }
 
-function BuyInSecondsFeature({chainName}: {chainName: string}): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>
-						{`Easily buy ${chainName} in seconds`}
-					</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px]'}
-							title={'Buy'}
-							href={'https://app.shapeshift.com/#/ramp/trade/buy'}
-						/>
-					</div>
-				</div>
-				<p className={'pb-4 text-base text-secondary/50'}>
-					{`Experience the multichain simplicity of buying ${chainName} with ShapeShift's easy-to-use `}
-					<LocalizedLink
-						className={'text-white underline'}
-						target={'_blank'}
-						href={'https://app.shapeshift.com/#/ramp/trade/buy'}>
-						{'fiat ramp'}
-					</LocalizedLink>
-					{`. No matter where you are, ShapeShift makes it effortless buy ${chainName}.`}
-				</p>
-				<p className={'text-base text-secondary/50'}>
-					{`Say goodbye to complex procedures and failed transactions, and say hello to a new way to ShapeShift your ${chainName}.`}
-				</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
-				<Image
-					src={'/chains/buy-mockup.png'}
-					alt={''}
-					className={'h-auto w-full object-contain object-bottom'}
-					width={515}
-					height={368}
-				/>
-			</div>
-		</div>
-	)
+function BuyInSecondsFeature({ chainName }: { chainName: string }): ReactNode {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>
+            {`Easily buy ${chainName} in seconds`}
+          </p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px]'}
+              title={'Buy'}
+              href={'https://app.shapeshift.com/#/ramp/trade/buy'}
+            />
+          </div>
+        </div>
+        <p className={'pb-4 text-base text-secondary/50'}>
+          {`Experience the multichain simplicity of buying ${chainName} with ShapeShift's easy-to-use `}
+          <LocalizedLink
+            className={'text-white underline'}
+            target={'_blank'}
+            href={'https://app.shapeshift.com/#/ramp/trade/buy'}
+          >
+            {'fiat ramp'}
+          </LocalizedLink>
+          {`. No matter where you are, ShapeShift makes it effortless buy ${chainName}.`}
+        </p>
+        <p className={'text-base text-secondary/50'}>
+          {`Say goodbye to complex procedures and failed transactions, and say hello to a new way to ShapeShift your ${chainName}.`}
+        </p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
+        <Image
+          src={'/chains/buy-mockup.png'}
+          alt={''}
+          className={'h-auto w-full object-contain object-bottom'}
+          width={515}
+          height={368}
+        />
+      </div>
+    </div>
+  )
 }
 
-function CustodialFeature({chainName, foxImg}: {chainName: string; foxImg: TStrapiImage}): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>
-						{`Self-custodial ${chainName}: Redefined`}
-					</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px] whitespace-nowrap'}
-							title={'Learn More'}
-							href={'/defi-wallet'}
-						/>
-					</div>
-				</div>
-				<p className={'pb-4 text-base text-secondary/50'}>
-					{`Your keys. Your assets. Your chain. ShapeShift Wallet gives you direct, private access to ${chainName}. No middlemen, no compromises. Hold, trade, and interact with DeFi your way, across all supported networks.`}
-				</p>
-				<p className={'text-base text-secondary/50'}>
-					{`Welcome to the most private multichain interface for ${chainName}.`}
-				</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
-				<Image
-					src={getStrapiImageUrl(foxImg.url)}
-					alt={''}
-					className={'h-auto w-full object-contain object-bottom'}
-					width={foxImg.width}
-					height={foxImg.height}
-				/>
-			</div>
-		</div>
-	)
+function CustodialFeature({ chainName, foxImg }: { chainName: string; foxImg: TStrapiImage }): ReactNode {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>
+            {`Self-custodial ${chainName}: Redefined`}
+          </p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px] whitespace-nowrap'}
+              title={'Learn More'}
+              href={'/defi-wallet'}
+            />
+          </div>
+        </div>
+        <p className={'pb-4 text-base text-secondary/50'}>
+          {`Your keys. Your assets. Your chain. ShapeShift Wallet gives you direct, private access to ${chainName}. No middlemen, no compromises. Hold, trade, and interact with DeFi your way, across all supported networks.`}
+        </p>
+        <p className={'text-base text-secondary/50'}>
+          {`Welcome to the most private multichain interface for ${chainName}.`}
+        </p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
+        <Image
+          src={getStrapiImageUrl(foxImg.url)}
+          alt={''}
+          className={'h-auto w-full object-contain object-bottom'}
+          width={foxImg.width}
+          height={foxImg.height}
+        />
+      </div>
+    </div>
+  )
 }
 
 function SolanaJupiterExchangeFeature(): ReactNode {
-	return (
-		<div
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col-reverse rounded-b-2xl col-span-1 lg:col-span-2'
-			)}>
-			<div className={'p-10'}>
-				<div className={'mb-2 text-2xl text-white'}>{'Jupiter Exchange'}</div>
-				<div className={'text-gray-500'}>
-					{
-						"Experience the multichain simplicity of buying Solana with ShapeShift's easy-to-use fiat ramp. No matter where you are, ShapeShift makes it effortless buy Solana."
-					}
-				</div>
-			</div>
-			<div className={'aspect-video overflow-hidden rounded-2xl'}>
-				<Image
-					src={'/chains/feature-jupiter.png'}
-					alt={'Jupiter Exchange'}
-					width={461}
-					height={219}
-					className={'size-full object-contain p-6 transition-all duration-300 hover:scale-105'}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col-reverse rounded-b-2xl col-span-1 lg:col-span-2'
+      )}
+    >
+      <div className={'p-10'}>
+        <div className={'mb-2 text-2xl text-white'}>{'Jupiter Exchange'}</div>
+        <div className={'text-gray-500'}>
+          {
+            "Experience the multichain simplicity of buying Solana with ShapeShift's easy-to-use fiat ramp. No matter where you are, ShapeShift makes it effortless buy Solana."
+          }
+        </div>
+      </div>
+      <div className={'aspect-video overflow-hidden rounded-2xl'}>
+        <Image
+          src={'/chains/feature-jupiter.png'}
+          alt={'Jupiter Exchange'}
+          width={461}
+          height={219}
+          className={'size-full object-contain p-6 transition-all duration-300 hover:scale-105'}
+        />
+      </div>
+    </div>
+  )
 }
 
 function ShapeshiftMultichainSnapFeature(): ReactNode {
-	return (
-		<div
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col-reverse rounded-b-2xl col-span-1 lg:col-span-2'
-			)}>
-			<div className={'p-10'}>
-				<div className={'mb-2 text-2xl text-white'}>{'Multichain Snap'}</div>
-				<div className={'text-gray-500'}>
-					{'ShapeShift’s MetaMask Snap empowers you to do more with your '}
-					<LocalizedLink
-						className={'text-white underline'}
-						target={'_blank'}
-						href={'https://metamask.io/'}>
-						{'MetaMask'}
-					</LocalizedLink>
-					{' wallet. Trade '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/bitcoin'}>
-						{'Bitcoin'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/ethereum'}>
-						{'Ethereum'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/base'}>
-						{'Base'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/cosmos'}>
-						{'Cosmos'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/thorchain'}>
-						{'THORChain'}
-					</LocalizedLink>
-					{' and more with your '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/wallets/metamask'}>
-						{'MetaMask'}
-					</LocalizedLink>
-					{'.'}
-				</div>
-			</div>
-			<div className={'aspect-video overflow-hidden rounded-2xl pt-[5%]'}>
-				<Image
-					src={'/chains/feature-multichainSnap.png'}
-					alt={'Jupiter Exchange'}
-					width={461}
-					height={219}
-					className={'size-full object-cover object-top px-6 transition-all duration-300 hover:scale-105'}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col-reverse rounded-b-2xl col-span-1 lg:col-span-2'
+      )}
+    >
+      <div className={'p-10'}>
+        <div className={'mb-2 text-2xl text-white'}>{'Multichain Snap'}</div>
+        <div className={'text-gray-500'}>
+          {'ShapeShift’s MetaMask Snap empowers you to do more with your '}
+          <LocalizedLink className={'text-white underline'} target={'_blank'} href={'https://metamask.io/'}>
+            {'MetaMask'}
+          </LocalizedLink>
+          {' wallet. Trade '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/bitcoin'}>
+            {'Bitcoin'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/ethereum'}>
+            {'Ethereum'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/base'}>
+            {'Base'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/cosmos'}>
+            {'Cosmos'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/thorchain'}>
+            {'THORChain'}
+          </LocalizedLink>
+          {' and more with your '}
+          <LocalizedLink className={'text-white underline'} href={'/wallets/metamask'}>
+            {'MetaMask'}
+          </LocalizedLink>
+          {'.'}
+        </div>
+      </div>
+      <div className={'aspect-video overflow-hidden rounded-2xl pt-[5%]'}>
+        <Image
+          src={'/chains/feature-multichainSnap.png'}
+          alt={'Jupiter Exchange'}
+          width={461}
+          height={219}
+          className={'size-full object-cover object-top px-6 transition-all duration-300 hover:scale-105'}
+        />
+      </div>
+    </div>
+  )
 }
 
 function YourKeyFeature(): ReactNode {
-	return (
-		<div
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col-reverse rounded-b-2xl col-span-1 lg:col-span-2'
-			)}>
-			<div className={'p-10'}>
-				<div className={'mb-2 text-2xl text-white'}>{'You control your keys'}</div>
-				<div className={'text-gray-500'}>
-					{'Always retain custody of your assets when you earn with ShapeShift. Your keys. Your crypto.'}
-				</div>
-			</div>
-			<div className={'aspect-video overflow-hidden rounded-2xl'}>
-				<Image
-					src={'/chains/feature-yourKey.png'}
-					alt={'Your Key'}
-					width={461}
-					height={219}
-					className={'size-full object-contain transition-all duration-300 hover:scale-105'}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col-reverse rounded-b-2xl col-span-1 lg:col-span-2'
+      )}
+    >
+      <div className={'p-10'}>
+        <div className={'mb-2 text-2xl text-white'}>{'You control your keys'}</div>
+        <div className={'text-gray-500'}>
+          {'Always retain custody of your assets when you earn with ShapeShift. Your keys. Your crypto.'}
+        </div>
+      </div>
+      <div className={'aspect-video overflow-hidden rounded-2xl'}>
+        <Image
+          src={'/chains/feature-yourKey.png'}
+          alt={'Your Key'}
+          width={461}
+          height={219}
+          className={'size-full object-contain transition-all duration-300 hover:scale-105'}
+        />
+      </div>
+    </div>
+  )
 }
 
-function StreamingSwapsFeature({chainName}: {chainName: string}): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Streaming swaps'}</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px] whitespace-nowrap'}
-							title={'Swap'}
-							href={'https://app.shapeshift.com/#/trade'}
-						/>
-					</div>
-				</div>
-				<p className={'pb-4 text-base text-secondary/50'}>
-					{`Experience the multichain simplicity of buying ${chainName} with ShapeShift's easy-to-use `}
-					<LocalizedLink
-						className={'text-white underline'}
-						target={'_blank'}
-						href={'https://app.shapeshift.com/#/ramp/trade/buy'}>
-						{'fiat ramp'}
-					</LocalizedLink>
-					{`. No matter where you are, ShapeShift makes it effortless buy ${chainName}.`}
-				</p>
-				<p className={'text-base text-secondary/50'}>
-					{`Say goodbye to complex procedures and failed transactions, and say hello to a new way to ShapeShift your ${chainName}.`}
-				</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end pb-10'}>
-				<Image
-					src={'/chains/feature-streamingswaps.png'}
-					alt={''}
-					className={'h-auto w-full object-contain object-bottom'}
-					width={409}
-					height={300}
-				/>
-			</div>
-		</div>
-	)
+function StreamingSwapsFeature({ chainName }: { chainName: string }): ReactNode {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Streaming swaps'}</p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px] whitespace-nowrap'}
+              title={'Swap'}
+              href={'https://app.shapeshift.com/#/trade'}
+            />
+          </div>
+        </div>
+        <p className={'pb-4 text-base text-secondary/50'}>
+          {`Experience the multichain simplicity of buying ${chainName} with ShapeShift's easy-to-use `}
+          <LocalizedLink
+            className={'text-white underline'}
+            target={'_blank'}
+            href={'https://app.shapeshift.com/#/ramp/trade/buy'}
+          >
+            {'fiat ramp'}
+          </LocalizedLink>
+          {`. No matter where you are, ShapeShift makes it effortless buy ${chainName}.`}
+        </p>
+        <p className={'text-base text-secondary/50'}>
+          {`Say goodbye to complex procedures and failed transactions, and say hello to a new way to ShapeShift your ${chainName}.`}
+        </p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end pb-10'}>
+        <Image
+          src={'/chains/feature-streamingswaps.png'}
+          alt={''}
+          className={'h-auto w-full object-contain object-bottom'}
+          width={409}
+          height={300}
+        />
+      </div>
+    </div>
+  )
 }
 
 function ThorChainTradeFeature(): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Trade'}</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px] whitespace-nowrap'}
-							title={'Trade'}
-							href={'https://app.shapeshift.com/'}
-						/>
-					</div>
-				</div>
-				<p className={'pb-4 text-base text-secondary/50'}>
-					{'Enjoy the most seamless, fast, and secure '}
-					<LocalizedLink
-						className={'text-white underline'}
-						target={'_blank'}
-						href={'https://app.shapeshift.com/'}>
-						{'trading experience'}
-					</LocalizedLink>
-					{' across multiple blockchains directly from your '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/wallets/'}>
-						{'DeFi wallet'}
-					</LocalizedLink>
-					{'.'}
-				</p>
-				<p className={'text-base text-secondary/50'}>
-					{
-						"ShapeShift harnesses the power of THORChain's technology, enhancing the way you trade--ensuring you get the best rate every time. Whether you are trading "
-					}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/bitcoin'}>
-						{'Bitcoin'}
-					</LocalizedLink>
-					{' or Memecoins, trade like the professionals with ShapeShift and THORChain.'}
-				</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
-				<Image
-					src={'/chains/feature-thorChainTrade.png'}
-					alt={''}
-					className={'h-auto w-full object-contain object-bottom'}
-					width={409}
-					height={300}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Trade'}</p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px] whitespace-nowrap'}
+              title={'Trade'}
+              href={'https://app.shapeshift.com/'}
+            />
+          </div>
+        </div>
+        <p className={'pb-4 text-base text-secondary/50'}>
+          {'Enjoy the most seamless, fast, and secure '}
+          <LocalizedLink className={'text-white underline'} target={'_blank'} href={'https://app.shapeshift.com/'}>
+            {'trading experience'}
+          </LocalizedLink>
+          {' across multiple blockchains directly from your '}
+          <LocalizedLink className={'text-white underline'} href={'/wallets/'}>
+            {'DeFi wallet'}
+          </LocalizedLink>
+          {'.'}
+        </p>
+        <p className={'text-base text-secondary/50'}>
+          {
+            "ShapeShift harnesses the power of THORChain's technology, enhancing the way you trade--ensuring you get the best rate every time. Whether you are trading "
+          }
+          <LocalizedLink className={'text-white underline'} href={'/chains/bitcoin'}>
+            {'Bitcoin'}
+          </LocalizedLink>
+          {' or Memecoins, trade like the professionals with ShapeShift and THORChain.'}
+        </p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
+        <Image
+          src={'/chains/feature-thorChainTrade.png'}
+          alt={''}
+          className={'h-auto w-full object-contain object-bottom'}
+          width={409}
+          height={300}
+        />
+      </div>
+    </div>
+  )
 }
 
 function RFoxFeature(): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>
-						{'Get paid to trade: Introducing rFOX'}
-					</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px] whitespace-nowrap'}
-							title={'Learn more'}
-							href={'https://app.shapeshift.com/#/rfox/stake'}
-						/>
-					</div>
-				</div>
-				<p className={'pb-4 text-base text-secondary/50'}>{'Stake into rFOX, get rewarded in RUNE.'}</p>
-				<p className={'text-base text-secondary/50'}>{'The more you trade, the more you earn.'}</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end pb-10'}>
-				<Image
-					src={'/chains/feature-rFox.png'}
-					alt={''}
-					className={'h-auto max-h-[200px] w-full object-contain object-bottom'}
-					width={409}
-					height={300}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>
+            {'Get paid to trade: Introducing rFOX'}
+          </p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px] whitespace-nowrap'}
+              title={'Learn more'}
+              href={'https://app.shapeshift.com/#/rfox/stake'}
+            />
+          </div>
+        </div>
+        <p className={'pb-4 text-base text-secondary/50'}>{'Stake into rFOX, get rewarded in RUNE.'}</p>
+        <p className={'text-base text-secondary/50'}>{'The more you trade, the more you earn.'}</p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end pb-10'}>
+        <Image
+          src={'/chains/feature-rFox.png'}
+          alt={''}
+          className={'h-auto max-h-[200px] w-full object-contain object-bottom'}
+          width={409}
+          height={300}
+        />
+      </div>
+    </div>
+  )
 }
 
 function ThorChainLendingFeature(): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Lend & borrow'}</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px] whitespace-nowrap'}
-							title={'Learn more'}
-							href={'https://app.shapeshift.com/#/lending'}
-						/>
-					</div>
-				</div>
-				<p className={'pb-4 text-base text-secondary/50'}>
-					{'Until the launch of THORChain’s app layer, THORChain Lending is halted'}
-				</p>
-				<p className={'text-base text-secondary/50'}>
-					{'Borrow over 10,000 assets against your '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/bitcoin'}>
-						{'BTC'}
-					</LocalizedLink>
-					{' and '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/ethereum'}>
-						{'ETH'}
-					</LocalizedLink>
-					{' with 0% APR and no liquidations! Do more with your crypto portfolio with THORChain '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'https://app.shapeshift.com/#/lending'}>
-						{'Lending'}
-					</LocalizedLink>
-					{' on ShapeShift.'}
-				</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end pb-10'}>
-				<Image
-					src={'/chains/feature-thorChainLending.png'}
-					alt={''}
-					className={'h-auto w-full object-contain object-bottom'}
-					width={409}
-					height={300}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Lend & borrow'}</p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px] whitespace-nowrap'}
+              title={'Learn more'}
+              href={'https://app.shapeshift.com/#/lending'}
+            />
+          </div>
+        </div>
+        <p className={'pb-4 text-base text-secondary/50'}>
+          {'Until the launch of THORChain’s app layer, THORChain Lending is halted'}
+        </p>
+        <p className={'text-base text-secondary/50'}>
+          {'Borrow over 10,000 assets against your '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/bitcoin'}>
+            {'BTC'}
+          </LocalizedLink>
+          {' and '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/ethereum'}>
+            {'ETH'}
+          </LocalizedLink>
+          {' with 0% APR and no liquidations! Do more with your crypto portfolio with THORChain '}
+          <LocalizedLink className={'text-white underline'} href={'https://app.shapeshift.com/#/lending'}>
+            {'Lending'}
+          </LocalizedLink>
+          {' on ShapeShift.'}
+        </p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end pb-10'}>
+        <Image
+          src={'/chains/feature-thorChainLending.png'}
+          alt={''}
+          className={'h-auto w-full object-contain object-bottom'}
+          width={409}
+          height={300}
+        />
+      </div>
+    </div>
+  )
 }
 
 function LiquidityPoolFeature(): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Liquidity pools'}</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px] whitespace-nowrap'}
-							title={'Dive in'}
-							href={'https://app.shapeshift.com/pools#/pools'}
-						/>
-					</div>
-				</div>
-				<p className={'text-base text-secondary/50'}>
-					{'Enhance your crypto portfolio by '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'https://app.shapeshift.com/pools#/pools'}>
-						{'providing liquidity'}
-					</LocalizedLink>
-					{' and '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'https://app.shapeshift.com/#/pools'}>
-						{'earning passive income'}
-					</LocalizedLink>
-					{
-						' directly from your DeFi wallet with ShapeShift App. It’s simple, secure, and effective. Dive in and start maximizing your returns today!'
-					}
-				</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
-				<Image
-					src={'/chains/feature-liquidityPool.png'}
-					alt={''}
-					className={'h-auto w-full object-contain object-bottom'}
-					width={409}
-					height={300}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'Liquidity pools'}</p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px] whitespace-nowrap'}
+              title={'Dive in'}
+              href={'https://app.shapeshift.com/pools#/pools'}
+            />
+          </div>
+        </div>
+        <p className={'text-base text-secondary/50'}>
+          {'Enhance your crypto portfolio by '}
+          <LocalizedLink className={'text-white underline'} href={'https://app.shapeshift.com/pools#/pools'}>
+            {'providing liquidity'}
+          </LocalizedLink>
+          {' and '}
+          <LocalizedLink className={'text-white underline'} href={'https://app.shapeshift.com/#/pools'}>
+            {'earning passive income'}
+          </LocalizedLink>
+          {
+            ' directly from your DeFi wallet with ShapeShift App. It’s simple, secure, and effective. Dive in and start maximizing your returns today!'
+          }
+        </p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
+        <Image
+          src={'/chains/feature-liquidityPool.png'}
+          alt={''}
+          className={'h-auto w-full object-contain object-bottom'}
+          width={409}
+          height={300}
+        />
+      </div>
+    </div>
+  )
 }
 
 function ThorChainRunePoolFeature(): ReactNode {
-	return (
-		<div
-			style={{
-				background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)'
-			}}
-			className={cl(
-				'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
-				'flex-col col-span-1 lg:col-span-3'
-			)}>
-			<div className={'aspect-video p-10 text-left'}>
-				<div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
-					<p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'RUNE pool'}</p>
-					<div>
-						<Button
-							variant={'white'}
-							className={'!w-[120px] whitespace-nowrap'}
-							title={'Dive in'}
-							href={'https://app.shapeshift.com/pools#/pools'}
-						/>
-					</div>
-				</div>
-				<p className={'text-base text-secondary/50'}>
-					{
-						'Earn RUNE yield by providing liquidity onchain with a diverse group of bluechip asset pools such as '
-					}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/bitcoin'}>
-						{'Bitcoin'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/ethereum'}>
-						{'Ethereum'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/binance-chain'}>
-						{'BNB'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/dogecoin'}>
-						{'Dogecoin'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/avalanche'}>
-						{'AVAX'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/cosmos'}>
-						{'ATOM'}
-					</LocalizedLink>
-					{', USDC, USDT and any other major gas asset added to THORChain.'}
-				</p>
-			</div>
-			<div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
-				<Image
-					src={'/chains/feature-thorChainRunePool.png'}
-					alt={''}
-					className={'h-auto w-full object-contain object-bottom'}
-					width={409}
-					height={300}
-				/>
-			</div>
-		</div>
-	)
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(180deg, #101114 0%, #16181C 100%)',
+      }}
+      className={cl(
+        'flex overflow-hidden h-full bg-secondBg hover:bg-secondHoverBg rounded-2xl',
+        'flex-col col-span-1 lg:col-span-3'
+      )}
+    >
+      <div className={'aspect-video p-10 text-left'}>
+        <div className={'flex w-full flex-row items-baseline justify-between gap-x-4'}>
+          <p className={'max-w-80 pb-8 text-[40px] leading-[48px] text-white'}>{'RUNE pool'}</p>
+          <div>
+            <Button
+              variant={'white'}
+              className={'!w-[120px] whitespace-nowrap'}
+              title={'Dive in'}
+              href={'https://app.shapeshift.com/pools#/pools'}
+            />
+          </div>
+        </div>
+        <p className={'text-base text-secondary/50'}>
+          {'Earn RUNE yield by providing liquidity onchain with a diverse group of bluechip asset pools such as '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/bitcoin'}>
+            {'Bitcoin'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/ethereum'}>
+            {'Ethereum'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/binance-chain'}>
+            {'BNB'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/dogecoin'}>
+            {'Dogecoin'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/avalanche'}>
+            {'AVAX'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/cosmos'}>
+            {'ATOM'}
+          </LocalizedLink>
+          {', USDC, USDT and any other major gas asset added to THORChain.'}
+        </p>
+      </div>
+      <div className={'mx-auto mt-auto flex aspect-video w-2/3 items-end justify-end'}>
+        <Image
+          src={'/chains/feature-thorChainRunePool.png'}
+          alt={''}
+          className={'h-auto w-full object-contain object-bottom'}
+          width={409}
+          height={300}
+        />
+      </div>
+    </div>
+  )
 }
 
 function SaverVaultFeature(): ReactNode {
-	return (
-		<div
-			className={
-				'container relative col-span-6 grid grid-cols-2 overflow-hidden rounded-2xl bg-secondBg px-10 pt-10'
-			}
-			style={{
-				backgroundImage: "url('/chains/grid-bg.png')",
-				backgroundSize: 'cover',
-				backgroundPosition: 'center'
-			}}>
-			<div className={'flex w-full flex-col justify-start gap-8 px-10'}>
-				<p className={'text-left text-[40px] leading-[48px] text-white'}>{'Saver vaults'}</p>
-				<p className={'text-left text-base text-secondary/50'}>
-					{
-						'Welcome to a new, permissionless, self-custodial solution that empowers you to provide single asset liquidity on  THORChain. Earn single sided yield on native assets such as '
-					}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/bitcoin'}>
-						{'Bitcoin'}
-					</LocalizedLink>
-					{', '}
-					<LocalizedLink
-						className={'text-white underline'}
-						href={'/chains/dogecoin'}>
-						{'Dogecoin'}
-					</LocalizedLink>
-					{', Bitcoin Cash, Litecoin, and more.'}
-				</p>
-			</div>
+  return (
+    <div
+      className={'container relative col-span-6 grid grid-cols-2 overflow-hidden rounded-2xl bg-secondBg px-10 pt-10'}
+      style={{
+        backgroundImage: "url('/chains/grid-bg.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className={'flex w-full flex-col justify-start gap-8 px-10'}>
+        <p className={'text-left text-[40px] leading-[48px] text-white'}>{'Saver vaults'}</p>
+        <p className={'text-left text-base text-secondary/50'}>
+          {
+            'Welcome to a new, permissionless, self-custodial solution that empowers you to provide single asset liquidity on  THORChain. Earn single sided yield on native assets such as '
+          }
+          <LocalizedLink className={'text-white underline'} href={'/chains/bitcoin'}>
+            {'Bitcoin'}
+          </LocalizedLink>
+          {', '}
+          <LocalizedLink className={'text-white underline'} href={'/chains/dogecoin'}>
+            {'Dogecoin'}
+          </LocalizedLink>
+          {', Bitcoin Cash, Litecoin, and more.'}
+        </p>
+      </div>
 
-			<div className={'flex flex-row justify-between'}>
-				<Image
-					src={'/chains/feature-vaults.png'}
-					alt={'feature-vaults'}
-					width={349}
-					height={204}
-				/>
-				<Button
-					variant={'white'}
-					className={'!w-[120px] whitespace-nowrap'}
-					title={'Start Saving'}
-					href={'https://app.shapeshift.com/#/pools'}
-				/>
-			</div>
-		</div>
-	)
+      <div className={'flex flex-row justify-between'}>
+        <Image src={'/chains/feature-vaults.png'} alt={'feature-vaults'} width={349} height={204} />
+        <Button
+          variant={'white'}
+          className={'!w-[120px] whitespace-nowrap'}
+          title={'Start Saving'}
+          href={'https://app.shapeshift.com/#/pools'}
+        />
+      </div>
+    </div>
+  )
 }
 
-export function ChainFeatures(props: {chainName: string; foxImg: TStrapiImage; features: string[]}): ReactNode {
-	const {
-		chainName,
-		foxImg,
-		features = ['ShapeShift wallet', 'Hardware wallet support', 'Easily buy in seconds', 'Self-custodial Redefined']
-	} = props
+export function ChainFeatures(props: { chainName: string; foxImg: TStrapiImage; features: string[] }): ReactNode {
+  const {
+    chainName,
+    foxImg,
+    features = ['ShapeShift wallet', 'Hardware wallet support', 'Easily buy in seconds', 'Self-custodial Redefined'],
+  } = props
 
-	const featuresComponents = useMemo(() => {
-		const allFeatures = []
-		if (features.includes('ShapeShift wallet')) {
-			allFeatures.push(
-				<WalletFeature
-					key={'WalletFeature'}
-					chainName={chainName}
-				/>
-			)
-		}
-		if (features.includes('Hardware wallet support')) {
-			allFeatures.push(
-				<HardwareWalletFeature
-					key={'HardwareWalletFeature'}
-					chainName={chainName}
-				/>
-			)
-		}
-		if (features.includes('Easily buy in seconds')) {
-			allFeatures.push(
-				<BuyInSecondsFeature
-					key={'BuyInSecondsFeature'}
-					chainName={chainName}
-				/>
-			)
-		}
-		if (features.includes('Self-custodial Redefined')) {
-			allFeatures.push(
-				<CustodialFeature
-					key={'CustodialFeature'}
-					chainName={chainName}
-					foxImg={foxImg}
-				/>
-			)
-		}
-		if (features.includes('Jupiter Exchange')) {
-			allFeatures.push(<SolanaJupiterExchangeFeature key={'SolanaJupiterExchangeFeature'} />)
-		}
-		if (features.includes('Multichain Snap')) {
-			allFeatures.push(<ShapeshiftMultichainSnapFeature key={'ShapeshiftMultichainSnapFeature'} />)
-		}
-		if (features.includes('Your keys')) {
-			allFeatures.push(<YourKeyFeature key={'YourKeyFeature'} />)
-		}
-		if (features.includes('Thor Streaming swaps')) {
-			allFeatures.push(
-				<StreamingSwapsFeature
-					key={'StreamingSwapsFeature'}
-					chainName={chainName}
-				/>
-			)
-		}
-		if (features.includes('Thor Trade')) {
-			allFeatures.push(<ThorChainTradeFeature key={'ThorChainTradeFeature'} />)
-		}
-		if (features.includes('Thor rFox')) {
-			allFeatures.push(<RFoxFeature key={'RFoxFeature'} />)
-		}
-		if (features.includes('Thor Lending')) {
-			allFeatures.push(<ThorChainLendingFeature key={'ThorChainLendingFeature'} />)
-		}
-		if (features.includes('Thor Liquidity Pool')) {
-			allFeatures.push(<LiquidityPoolFeature key={'LiquidityPoolFeature'} />)
-		}
-		if (features.includes('Thor RUNE Pool')) {
-			allFeatures.push(<ThorChainRunePoolFeature key={'ThorChainRunePoolFeature'} />)
-		}
-		if (features.includes('Saver vaults')) {
-			allFeatures.push(<SaverVaultFeature key={'SaverVaultFeature'} />)
-		}
-		return allFeatures
-	}, [features, chainName, foxImg])
+  const featuresComponents = useMemo(() => {
+    const allFeatures = []
+    if (features.includes('ShapeShift wallet')) {
+      allFeatures.push(<WalletFeature key={'WalletFeature'} chainName={chainName} />)
+    }
+    if (features.includes('Hardware wallet support')) {
+      allFeatures.push(<HardwareWalletFeature key={'HardwareWalletFeature'} chainName={chainName} />)
+    }
+    if (features.includes('Easily buy in seconds')) {
+      allFeatures.push(<BuyInSecondsFeature key={'BuyInSecondsFeature'} chainName={chainName} />)
+    }
+    if (features.includes('Self-custodial Redefined')) {
+      allFeatures.push(<CustodialFeature key={'CustodialFeature'} chainName={chainName} foxImg={foxImg} />)
+    }
+    if (features.includes('Jupiter Exchange')) {
+      allFeatures.push(<SolanaJupiterExchangeFeature key={'SolanaJupiterExchangeFeature'} />)
+    }
+    if (features.includes('Multichain Snap')) {
+      allFeatures.push(<ShapeshiftMultichainSnapFeature key={'ShapeshiftMultichainSnapFeature'} />)
+    }
+    if (features.includes('Your keys')) {
+      allFeatures.push(<YourKeyFeature key={'YourKeyFeature'} />)
+    }
+    if (features.includes('Thor Streaming swaps')) {
+      allFeatures.push(<StreamingSwapsFeature key={'StreamingSwapsFeature'} chainName={chainName} />)
+    }
+    if (features.includes('Thor Trade')) {
+      allFeatures.push(<ThorChainTradeFeature key={'ThorChainTradeFeature'} />)
+    }
+    if (features.includes('Thor rFox')) {
+      allFeatures.push(<RFoxFeature key={'RFoxFeature'} />)
+    }
+    if (features.includes('Thor Lending')) {
+      allFeatures.push(<ThorChainLendingFeature key={'ThorChainLendingFeature'} />)
+    }
+    if (features.includes('Thor Liquidity Pool')) {
+      allFeatures.push(<LiquidityPoolFeature key={'LiquidityPoolFeature'} />)
+    }
+    if (features.includes('Thor RUNE Pool')) {
+      allFeatures.push(<ThorChainRunePoolFeature key={'ThorChainRunePoolFeature'} />)
+    }
+    if (features.includes('Saver vaults')) {
+      allFeatures.push(<SaverVaultFeature key={'SaverVaultFeature'} />)
+    }
+    return allFeatures
+  }, [features, chainName, foxImg])
 
-	return (
-		<section className={'container flex flex-col'}>
-			<h1 className={'mb-6 max-w-[700px] text-[28px] leading-[32px] lg:mb-16 lg:text-7xl'}>
-				{'Explore our features.'}
-			</h1>
+  return (
+    <section className={'container flex flex-col'}>
+      <h1 className={'mb-6 max-w-[700px] text-[28px] leading-[32px] lg:mb-16 lg:text-7xl'}>
+        {'Explore our features.'}
+      </h1>
 
-			<div className={'grid gap-2'}>
-				<div className={'container grid grid-cols-1 gap-2 lg:grid-cols-6'}>{featuresComponents}</div>
-			</div>
-		</section>
-	)
+      <div className={'grid gap-2'}>
+        <div className={'container grid grid-cols-1 gap-2 lg:grid-cols-6'}>{featuresComponents}</div>
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/strapi/templates/ChainHeader.tsx b/app/[lang]/_components/strapi/templates/ChainHeader.tsx
index 9d9c06d..c77ff91 100644
--- a/app/[lang]/_components/strapi/templates/ChainHeader.tsx
+++ b/app/[lang]/_components/strapi/templates/ChainHeader.tsx
@@ -1,34 +1,28 @@
-import {Button} from '@/app/[lang]/_components/Button'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
+import { Button } from '@/app/[lang]/_components/Button'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-export function ChainHeader({chainName}: {chainName: string}): ReactNode {
-	return (
-		<section className={'flex flex-col items-center'}>
-			<div className={'mb-10 hidden gap-2 lg:flex'}>
-				{['Self-custodial', 'Private', 'Multichain trading'].map(item => (
-					<div
-						className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'}
-						key={item}>
-						<IconCheck className={'text-blue'} />
-						<span className={'text-blue'}>{item}</span>
-					</div>
-				))}
-			</div>
-			<div className={'mb-10 flex flex-col items-center gap-2'}>
-				<h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-left lg:text-7xl'}>
-					{`ShapeShift supports ${chainName}`}
-				</h1>
-				<p className={'mx-auto max-w-screen-lg text-center text-sm text-gray-500 lg:text-xl'}>
-					{`Unlock the best way to use and manage your crypto on ${chainName}`}
-				</p>
-			</div>
-			<Button
-				variant={'blue'}
-				href={'https://app.shapeshift.com'}
-				title={'Get Started'}
-			/>
-		</section>
-	)
+export function ChainHeader({ chainName }: { chainName: string }): ReactNode {
+  return (
+    <section className={'flex flex-col items-center'}>
+      <div className={'mb-10 hidden gap-2 lg:flex'}>
+        {['Self-custodial', 'Private', 'Multichain trading'].map((item) => (
+          <div className={'flex items-center gap-1 rounded-[24px] bg-secondBg px-4 py-[10px]'} key={item}>
+            <IconCheck className={'text-blue'} />
+            <span className={'text-blue'}>{item}</span>
+          </div>
+        ))}
+      </div>
+      <div className={'mb-10 flex flex-col items-center gap-2'}>
+        <h1 className={'mb-6 text-center text-[40px] leading-10 lg:text-left lg:text-7xl'}>
+          {`ShapeShift supports ${chainName}`}
+        </h1>
+        <p className={'mx-auto max-w-screen-lg text-center text-sm text-gray-500 lg:text-xl'}>
+          {`Unlock the best way to use and manage your crypto on ${chainName}`}
+        </p>
+      </div>
+      <Button variant={'blue'} href={'https://app.shapeshift.com'} title={'Get Started'} />
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/strapi/templates/ChainHero.tsx b/app/[lang]/_components/strapi/templates/ChainHero.tsx
index 62d4c1a..732c1b5 100644
--- a/app/[lang]/_components/strapi/templates/ChainHero.tsx
+++ b/app/[lang]/_components/strapi/templates/ChainHero.tsx
@@ -1,25 +1,20 @@
 import Image from 'next/image'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
-export function ChainHero(props: {url: string; width: number; height: number; name: string}): ReactNode {
-	return (
-		<section className={'relative flex w-full overflow-hidden rounded-2xl'}>
-			<Image
-				src={'/wallets/hero.jpg'}
-				alt={'hero'}
-				width={2800}
-				height={720}
-			/>
-			<div className={'absolute inset-x-0 bottom-0 flex items-center justify-end pr-16 pt-6'}>
-				<Image
-					src={props.url}
-					alt={props.name}
-					width={props.width}
-					height={props.height}
-					className={'my-auto h-full max-h-[220px] w-auto'}
-				/>
-			</div>
-		</section>
-	)
+export function ChainHero(props: { url: string; width: number; height: number; name: string }): ReactNode {
+  return (
+    <section className={'relative flex w-full overflow-hidden rounded-2xl'}>
+      <Image src={'/wallets/hero.jpg'} alt={'hero'} width={2800} height={720} />
+      <div className={'absolute inset-x-0 bottom-0 flex items-center justify-end pr-16 pt-6'}>
+        <Image
+          src={props.url}
+          alt={props.name}
+          width={props.width}
+          height={props.height}
+          className={'my-auto h-full max-h-[220px] w-auto'}
+        />
+      </div>
+    </section>
+  )
 }
diff --git a/app/[lang]/_components/strapi/types.ts b/app/[lang]/_components/strapi/types.ts
index 24b2aa0..738f8ad 100644
--- a/app/[lang]/_components/strapi/types.ts
+++ b/app/[lang]/_components/strapi/types.ts
@@ -3,103 +3,103 @@
  * Each component type corresponds to a section that can be included in a page
  ********************************************************************************************/
 export type TStrapiImage = {
-	url: string
-	width: number
-	height: number
-	formats: {
-		thumbnail: {url: string; width: number; height: number}
-		small?: {url: string; width: number; height: number}
-		medium?: {url: string; width: number; height: number}
-		large?: {url: string; width: number; height: number}
-	}
+  url: string
+  width: number
+  height: number
+  formats: {
+    thumbnail: { url: string; width: number; height: number }
+    small?: { url: string; width: number; height: number }
+    medium?: { url: string; width: number; height: number }
+    large?: { url: string; width: number; height: number }
+  }
 }
 
 export type TDownloadButton = {
-	id: number
-	variant: 'appstore' | 'googleplay'
-	url: string
+  id: number
+  variant: 'appstore' | 'googleplay'
+  url: string
 }
 
 export type TButton = {
-	id: number
-	title: string
-	url: string
-	target?: string
+  id: number
+  title: string
+  url: string
+  target?: string
 }
 
 export type TStat = {
-	id: number
-	title: string
-	value: string
+  id: number
+  title: string
+  value: string
 }
 
 export type TCard = {
-	id: number
-	title: string
-	description: string
-	isTextFirst: boolean
-	image: TStrapiImage
-	href?: string
-	buttonCta?: TButton
-	target?: string
-	items?: {
-		url?: string
-		image?: TStrapiImage
-	}[]
+  id: number
+  title: string
+  description: string
+  isTextFirst: boolean
+  image: TStrapiImage
+  href?: string
+  buttonCta?: TButton
+  target?: string
+  items?: {
+    url?: string
+    image?: TStrapiImage
+  }[]
 }
 
 export type TGridLadderStep = {
-	id: number
-	title: string
-	description: string
-	image?: TStrapiImage
-	buttonCta: TButton
+  id: number
+  title: string
+  description: string
+  image?: TStrapiImage
+  buttonCta: TButton
 }
 
 export type TCardsRowSection = {
-	id: number
-	title: string
-	ctaBlock: TButton | null
-	cards: TCard[]
+  id: number
+  title: string
+  ctaBlock: TButton | null
+  cards: TCard[]
 }
 
 export type TGridSection = {
-	id: number
-	card: TCard[]
-	cardCta: {
-		id: number
-		title: string
-		description: string
-		imageBg?: TStrapiImage
-		buttonCta: TButton
-	}[]
+  id: number
+  card: TCard[]
+  cardCta: {
+    id: number
+    title: string
+    description: string
+    imageBg?: TStrapiImage
+    buttonCta: TButton
+  }[]
 }
 
 export type TGridDisplacedSection = {
-	id: number
-	title: string
-	description: string
-	cta: TButton
-	cards: TCard[]
-	features: {
-		title: string
-		description: string
-		image?: TStrapiImage
-	}[]
+  id: number
+  title: string
+  description: string
+  cta: TButton
+  cards: TCard[]
+  features: {
+    title: string
+    description: string
+    image?: TStrapiImage
+  }[]
 }
 
 export type TGridLadderSection = {
-	id: number
-	steps: TGridLadderStep[]
+  id: number
+  steps: TGridLadderStep[]
 }
 
 export type TFooterSection = {
-	id: number
-	title: string
-	cta: string
-	imageBg: TStrapiImage
-	buttonDownload: TButton[]
-	buttonCta: TButton
+  id: number
+  title: string
+  cta: string
+  imageBg: TStrapiImage
+  buttonDownload: TButton[]
+  buttonCta: TButton
 }
 
 /********************************************************************************************
@@ -107,191 +107,191 @@ export type TFooterSection = {
  * Includes both list and single post interfaces
  ********************************************************************************************/
 export type TBlogPost = {
-	id: number
-	documentId: string
-	slug: string
-	title: string
-	content: string
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
-	featuredImg: TStrapiImage
-	tags: string[]
-	type: string[]
-	summary: string
-	isFeatured: boolean
+  id: number
+  documentId: string
+  slug: string
+  title: string
+  content: string
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
+  featuredImg: TStrapiImage
+  tags: string[]
+  type: string[]
+  summary: string
+  isFeatured: boolean
 }
 
 export type TPagination = {
-	page: number
-	pageSize: number
-	pageCount: number
-	total: number
+  page: number
+  pageSize: number
+  pageCount: number
+  total: number
 }
 
 export type TBlogListResponse = {
-	data: TBlogPost[]
-	meta: {
-		pagination: TPagination
-	}
+  data: TBlogPost[]
+  meta: {
+    pagination: TPagination
+  }
 }
 
 export type TFaqData = {
-	id: number
-	documentId: string
-	title: string
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
-	faqSection: TFaqSection[]
+  id: number
+  documentId: string
+  title: string
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
+  faqSection: TFaqSection[]
 }
 
 export type TFaqSection = {
-	id: number
-	sectionTitle: string
-	faqSectionItem: TFaqSectionItem[]
+  id: number
+  sectionTitle: string
+  faqSectionItem: TFaqSectionItem[]
 }
 
 export type TFaqSectionItem = {
-	id: number
-	question: string
-	answer: string
+  id: number
+  question: string
+  answer: string
 }
 
 export type TSupportData = {
-	id: number
-	supportItems: {
-		id: number
-		title: string
-		description?: string
-		href: string
-	}[]
+  id: number
+  supportItems: {
+    id: number
+    title: string
+    description?: string
+    href: string
+  }[]
 }
 export type TSupportedWalletData = {
-	id: number
-	documentId: string
-	name: string
-	description: string
-	slug: string
-	featuredImg: TStrapiImage
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
-	isFeatured: boolean
+  id: number
+  documentId: string
+  name: string
+  description: string
+  slug: string
+  featuredImg: TStrapiImage
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
+  isFeatured: boolean
 }
 
 export type TSupportedChainData = {
-	id: number
-	documentId: string
-	name: string
-	description: string
-	slug: string
-	featuredImg: TStrapiImage
-	foxImg: TStrapiImage
-	actions: string[]
-	features: string[]
-	typeOfChain: TSupportedChainTypes
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
+  id: number
+  documentId: string
+  name: string
+  description: string
+  slug: string
+  featuredImg: TStrapiImage
+  foxImg: TStrapiImage
+  actions: string[]
+  features: string[]
+  typeOfChain: TSupportedChainTypes
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
 }
 
 export type TSupportedProtocolData = {
-	id: number
-	documentId: string
-	name: string
-	description: string
-	collabDescription: string
-	slug: string
-	featuredImg: TStrapiImage
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
-	isFeatured: boolean
-	features: string[]
-	cards: {
-		title: string
-		description?: string
-	}[]
+  id: number
+  documentId: string
+  name: string
+  description: string
+  collabDescription: string
+  slug: string
+  featuredImg: TStrapiImage
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
+  isFeatured: boolean
+  features: string[]
+  cards: {
+    title: string
+    description?: string
+  }[]
 }
 
 export type TDiscoverData = {
-	id: number
-	documentId: string
-	title: string
-	description: string
-	slug: string
-	tag: string
-	type: string
-	featuredImg: TStrapiImage
-	features: TCard[]
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
+  id: number
+  documentId: string
+  title: string
+  description: string
+  slug: string
+  tag: string
+  type: string
+  featuredImg: TStrapiImage
+  features: TCard[]
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
 }
 
 export type TNewsroomPost = {
-	id: number
-	documentId: string
-	slug: string
-	title: string
-	content: string
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
-	publishedOn: string
-	featuredImg: TStrapiImage
-	tags: string[]
-	category: string[]
-	author: string
-	postSummary: string
-	externalURL: string
+  id: number
+  documentId: string
+  slug: string
+  title: string
+  content: string
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
+  publishedOn: string
+  featuredImg: TStrapiImage
+  tags: string[]
+  category: string[]
+  author: string
+  postSummary: string
+  externalURL: string
 }
 
 export type TPrivacyPolicyData = {
-	id: number
-	documentId: string
-	policy: {
-		id: number
-		title: string
-		createdAt: string
-		updatedAt: string
-		publishedAt: string
-		policy: string
-		date: string
-	}[]
+  id: number
+  documentId: string
+  policy: {
+    id: number
+    title: string
+    createdAt: string
+    updatedAt: string
+    publishedAt: string
+    policy: string
+    date: string
+  }[]
 }
 
 export type TTermsOfServiceData = {
-	id: number
-	documentId: string
-	terms: {
-		id: number
-		title: string
-		createdAt: string
-		updatedAt: string
-		publishedAt: string
-		policy: string
-		date: string
-	}[]
+  id: number
+  documentId: string
+  terms: {
+    id: number
+    title: string
+    createdAt: string
+    updatedAt: string
+    publishedAt: string
+    policy: string
+    date: string
+  }[]
 }
 
 export type TNewsroomListResponse = {
-	data: TNewsroomPost[]
-	meta: {
-		pagination: TPagination
-	}
+  data: TNewsroomPost[]
+  meta: {
+    pagination: TPagination
+  }
 }
 
 export type TStrapiNotification = {
-	id: number
-	title: string
-	description: string
-	href?: string
-	tag?: string
-	type: 'popup' | 'modal' | 'bar'
-	enabled: boolean
-	bgImage?: TStrapiImage
+  id: number
+  title: string
+  description: string
+  href?: string
+  tag?: string
+  type: 'popup' | 'modal' | 'bar'
+  enabled: boolean
+  bgImage?: TStrapiImage
 }
 
 export type TSupportedChainTypes = 'EVM' | 'Solana' | 'Bitcoin' | 'Cosmos' | string
@@ -301,21 +301,21 @@ export type TSupportedChainTypes = 'EVM' | 'Solana' | 'Bitcoin' | 'Cosmos' | str
  * Includes both list and single article interfaces
  ********************************************************************************************/
 export type TSupportArticle = {
-	id: number
-	documentId: string
-	slug: string
-	title: string
-	content: string
-	createdAt: string
-	updatedAt: string
-	publishedAt: string
-	featuredImg: TStrapiImage
-	summary: string
+  id: number
+  documentId: string
+  slug: string
+  title: string
+  content: string
+  createdAt: string
+  updatedAt: string
+  publishedAt: string
+  featuredImg: TStrapiImage
+  summary: string
 }
 
 export type TArticleListResponse = {
-	data: TSupportArticle[]
-	meta: {
-		pagination: TPagination
-	}
+  data: TSupportArticle[]
+  meta: {
+    pagination: TPagination
+  }
 }
diff --git a/app/[lang]/_components/trading/ChainSelect.tsx b/app/[lang]/_components/trading/ChainSelect.tsx
index 7903eb3..9cc2835 100644
--- a/app/[lang]/_components/trading/ChainSelect.tsx
+++ b/app/[lang]/_components/trading/ChainSelect.tsx
@@ -2,93 +2,86 @@
 
 import Image from 'next/image'
 
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export type TChain = {
-	id: string
-	name: string
-	icon: string
-	requestKey: string
-	chainId?: string
+  id: string
+  name: string
+  icon: string
+  requestKey: string
+  chainId?: string
 }
 
 export function ChainSelect({
-	chains,
-	selectedChain,
-	onSelectAction,
-	disabled,
-	isOpen,
-	setIsOpenAction
+  chains,
+  selectedChain,
+  onSelectAction,
+  disabled,
+  isOpen,
+  setIsOpenAction,
 }: {
-	chains: TChain[]
-	selectedChain: TChain
-	onSelectAction: (chain: TChain) => void
-	disabled?: boolean
-	isOpen: boolean
-	setIsOpenAction: (isOpen: boolean) => void
+  chains: TChain[]
+  selectedChain: TChain
+  onSelectAction: (chain: TChain) => void
+  disabled?: boolean
+  isOpen: boolean
+  setIsOpenAction: (isOpen: boolean) => void
 }): ReactNode {
-	return (
-		<div className={'group relative'}>
-			<button
-				onClick={() => !disabled && setIsOpenAction(!isOpen)}
-				className={cl(
-					'flex items-center gap-2 rounded-full bg-[#a1bdd914] p-2',
-					disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-white/10'
-				)}>
-				<Image
-					src={selectedChain?.icon}
-					alt={selectedChain?.name}
-					width={20}
-					height={20}
-				/>
-				<span>{selectedChain?.name}</span>
-				{!disabled && <IconBack className={'size-4 -rotate-90'} />}
-			</button>
+  return (
+    <div className={'group relative'}>
+      <button
+        onClick={() => !disabled && setIsOpenAction(!isOpen)}
+        className={cl(
+          'flex items-center gap-2 rounded-full bg-[#a1bdd914] p-2',
+          disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-white/10'
+        )}
+      >
+        <Image src={selectedChain?.icon} alt={selectedChain?.name} width={20} height={20} />
+        <span>{selectedChain?.name}</span>
+        {!disabled && <IconBack className={'size-4 -rotate-90'} />}
+      </button>
 
-			{/* Tooltip */}
-			{disabled && (
-				<div
-					className={
-						'absolute -bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-[#22272B] px-3 py-2 text-sm opacity-0 transition-opacity group-hover:opacity-100'
-					}>
-					{`This asset is only available on ${selectedChain?.name}`}
-					<div className={'absolute -top-1 left-1/2 size-2 -translate-x-1/2 -rotate-45 bg-[#22272B]'} />
-				</div>
-			)}
+      {/* Tooltip */}
+      {disabled && (
+        <div
+          className={
+            'absolute -bottom-12 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-[#22272B] px-3 py-2 text-sm opacity-0 transition-opacity group-hover:opacity-100'
+          }
+        >
+          {`This asset is only available on ${selectedChain?.name}`}
+          <div className={'absolute -top-1 left-1/2 size-2 -translate-x-1/2 -rotate-45 bg-[#22272B]'} />
+        </div>
+      )}
 
-			{isOpen && (
-				<div className={'absolute z-20 mt-2 flex w-max flex-col gap-1 rounded-lg bg-[#22272B] p-2 shadow-lg'}>
-					{chains.map(chain => (
-						<button
-							key={chain.id}
-							onClick={() => {
-								onSelectAction(chain)
-								setIsOpenAction(false)
-							}}
-							className={cl(
-								'flex w-full items-center gap-3 justify-start rounded-lg px-4 py-3 hover:bg-white/5',
-								selectedChain?.id === chain.id ? 'bg-white/5' : ''
-							)}>
-							{selectedChain?.id === chain.id ? (
-								<IconCheck className={'size-4 font-normal'} />
-							) : (
-								<div className={'size-4'} />
-							)}
-							<Image
-								src={chain.icon}
-								alt={chain.name}
-								width={24}
-								height={24}
-							/>
-							<span>{chain.name}</span>
-						</button>
-					))}
-				</div>
-			)}
-		</div>
-	)
+      {isOpen && (
+        <div className={'absolute z-20 mt-2 flex w-max flex-col gap-1 rounded-lg bg-[#22272B] p-2 shadow-lg'}>
+          {chains.map((chain) => (
+            <button
+              key={chain.id}
+              onClick={() => {
+                onSelectAction(chain)
+                setIsOpenAction(false)
+              }}
+              className={cl(
+                'flex w-full items-center gap-3 justify-start rounded-lg px-4 py-3 hover:bg-white/5',
+                selectedChain?.id === chain.id ? 'bg-white/5' : ''
+              )}
+            >
+              {selectedChain?.id === chain.id ? (
+                <IconCheck className={'size-4 font-normal'} />
+              ) : (
+                <div className={'size-4'} />
+              )}
+              <Image src={chain.icon} alt={chain.name} width={24} height={24} />
+              <span>{chain.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/trading/TokenSelect.tsx b/app/[lang]/_components/trading/TokenSelect.tsx
index b2b3f02..78fa659 100644
--- a/app/[lang]/_components/trading/TokenSelect.tsx
+++ b/app/[lang]/_components/trading/TokenSelect.tsx
@@ -2,103 +2,95 @@
 
 import Image from 'next/image'
 
-import {IconBack} from '@/app/[lang]/_icons/IconBack'
-import {IconCheck} from '@/app/[lang]/_icons/IconCheck'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { IconBack } from '@/app/[lang]/_icons/IconBack'
+import { IconCheck } from '@/app/[lang]/_icons/IconCheck'
+import { cl } from '@/app/[lang]/_utils/cl'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export type TToken = {
-	symbol: string
-	name: string
-	icon: string
-	sublogo?: string
-	slug: string
-	decimals: Record<string, number>
-	requestKey?: string
-	tokenAddress?: string
+  symbol: string
+  name: string
+  icon: string
+  sublogo?: string
+  slug: string
+  decimals: Record<string, number>
+  requestKey?: string
+  tokenAddress?: string
 }
 
 export function TokenSelect({
-	tokens,
-	selectedToken,
-	onSelectAction,
-	isOpen,
-	setIsOpenAction
+  tokens,
+  selectedToken,
+  onSelectAction,
+  isOpen,
+  setIsOpenAction,
 }: {
-	tokens: TToken[]
-	selectedToken: TToken
-	onSelectAction: (token: TToken) => void
-	isOpen: boolean
-	setIsOpenAction: (isOpen: boolean) => void
+  tokens: TToken[]
+  selectedToken: TToken
+  onSelectAction: (token: TToken) => void
+  isOpen: boolean
+  setIsOpenAction: (isOpen: boolean) => void
 }): ReactNode {
-	return (
-		<div className={'relative'}>
-			<button
-				onClick={() => setIsOpenAction(!isOpen)}
-				className={'flex items-center gap-2 rounded-full bg-[#a1bdd914] p-2 hover:bg-white/10'}>
-				<div className={'relative flex size-6 items-center justify-center rounded-[100%]'}>
-					{selectedToken.sublogo && (
-						<Image
-							src={selectedToken.sublogo}
-							alt={selectedToken.name}
-							width={8}
-							height={8}
-							className={'absolute left-0 top-0'}
-						/>
-					)}
-					<Image
-						src={selectedToken.icon}
-						alt={selectedToken.name}
-						width={24}
-						height={24}
-					/>
-				</div>
-				<span>{selectedToken.symbol}</span>
-				<IconBack className={'size-4 -rotate-90'} />
-			</button>
+  return (
+    <div className={'relative'}>
+      <button
+        onClick={() => setIsOpenAction(!isOpen)}
+        className={'flex items-center gap-2 rounded-full bg-[#a1bdd914] p-2 hover:bg-white/10'}
+      >
+        <div className={'relative flex size-6 items-center justify-center rounded-[100%]'}>
+          {selectedToken.sublogo && (
+            <Image
+              src={selectedToken.sublogo}
+              alt={selectedToken.name}
+              width={8}
+              height={8}
+              className={'absolute left-0 top-0'}
+            />
+          )}
+          <Image src={selectedToken.icon} alt={selectedToken.name} width={24} height={24} />
+        </div>
+        <span>{selectedToken.symbol}</span>
+        <IconBack className={'size-4 -rotate-90'} />
+      </button>
 
-			{isOpen && (
-				<div className={'absolute z-20 mt-2 flex w-max flex-col gap-1 rounded-lg bg-[#22272B] p-2 shadow-lg'}>
-					{tokens.map(token => (
-						<button
-							key={token.slug}
-							onClick={() => {
-								onSelectAction(token)
-								setIsOpenAction(false)
-							}}
-							className={cl(
-								'flex w-full items-center gap-4 rounded-lg px-3 py-2 hover:bg-white/5',
-								selectedToken.slug === token.slug ? 'bg-white/5' : ''
-							)}>
-							{selectedToken.name === token.name ? (
-								<IconCheck className={'size-4 font-normal'} />
-							) : (
-								<div className={'size-4'} />
-							)}
-							<div className={'relative flex size-6 items-center justify-center rounded-[100%]'}>
-								{token.sublogo && (
-									<Image
-										src={token.sublogo}
-										alt={token.name}
-										width={8}
-										height={8}
-										className={'absolute left-0 top-0'}
-									/>
-								)}
-								<Image
-									src={token.icon}
-									alt={token.name}
-									width={24}
-									height={24}
-								/>
-							</div>
-							<span>{token.symbol}</span>
-							<span className={'ml-auto text-sm text-gray-400'}>{token.name}</span>
-						</button>
-					))}
-				</div>
-			)}
-		</div>
-	)
+      {isOpen && (
+        <div className={'absolute z-20 mt-2 flex w-max flex-col gap-1 rounded-lg bg-[#22272B] p-2 shadow-lg'}>
+          {tokens.map((token) => (
+            <button
+              key={token.slug}
+              onClick={() => {
+                onSelectAction(token)
+                setIsOpenAction(false)
+              }}
+              className={cl(
+                'flex w-full items-center gap-4 rounded-lg px-3 py-2 hover:bg-white/5',
+                selectedToken.slug === token.slug ? 'bg-white/5' : ''
+              )}
+            >
+              {selectedToken.name === token.name ? (
+                <IconCheck className={'size-4 font-normal'} />
+              ) : (
+                <div className={'size-4'} />
+              )}
+              <div className={'relative flex size-6 items-center justify-center rounded-[100%]'}>
+                {token.sublogo && (
+                  <Image
+                    src={token.sublogo}
+                    alt={token.name}
+                    width={8}
+                    height={8}
+                    className={'absolute left-0 top-0'}
+                  />
+                )}
+                <Image src={token.icon} alt={token.name} width={24} height={24} />
+              </div>
+              <span>{token.symbol}</span>
+              <span className={'ml-auto text-sm text-gray-400'}>{token.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
diff --git a/app/[lang]/_components/trading/TradingWidget.tsx b/app/[lang]/_components/trading/TradingWidget.tsx
index 169b4ad..32cbd06 100644
--- a/app/[lang]/_components/trading/TradingWidget.tsx
+++ b/app/[lang]/_components/trading/TradingWidget.tsx
@@ -1,374 +1,370 @@
 'use client'
 
-import {useCallback, useEffect, useState} from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
-import {useDebounce} from '@/app/[lang]/_hooks/useDebounce'
-import {IconArrow} from '@/app/[lang]/_icons/IconArrow'
-import {IconQuestion} from '@/app/[lang]/_icons/IconQuestion'
-import {cl} from '@/app/[lang]/_utils/cl'
-import {SUPPORTED_CHAINS, SUPPORTED_TOKENS, TOKEN_CHAIN_SUPPORT} from '@/app/[lang]/_utils/constants'
-import {formatNumber} from '@/app/[lang]/_utils/formatNumber'
+import { useDebounce } from '@/app/[lang]/_hooks/useDebounce'
+import { IconArrow } from '@/app/[lang]/_icons/IconArrow'
+import { IconQuestion } from '@/app/[lang]/_icons/IconQuestion'
+import { cl } from '@/app/[lang]/_utils/cl'
+import { SUPPORTED_CHAINS, SUPPORTED_TOKENS, TOKEN_CHAIN_SUPPORT } from '@/app/[lang]/_utils/constants'
+import { formatNumber } from '@/app/[lang]/_utils/formatNumber'
 
-import {ChainSelect} from './ChainSelect'
-import {TokenSelect} from './TokenSelect'
-import {LocalizedLink} from '../LocalizedLink'
+import { ChainSelect } from './ChainSelect'
+import { TokenSelect } from './TokenSelect'
+import { LocalizedLink } from '../LocalizedLink'
 
-import type {TChain} from './ChainSelect'
-import type {TToken} from './TokenSelect'
-import type {ReactNode} from 'react'
+import type { TChain } from './ChainSelect'
+import type { TToken } from './TokenSelect'
+import type { ReactNode } from 'react'
 
 const getChainflipAssetId = (token: TToken, chain: TChain): string => {
-	if (token.symbol === 'SOL') {
-		return 'Sol.Sol'
-	}
-	if (token.symbol === 'BTC') {
-		return 'Btc.Btc'
-	}
-	if (token.symbol === 'ETH') {
-		return 'Eth.Eth'
-	}
-	if (token.symbol === 'USDT') {
-		return 'Usdt.Eth'
-	}
-	return `${token.symbol}.${chain.requestKey}`
+  if (token.symbol === 'SOL') {
+    return 'Sol.Sol'
+  }
+  if (token.symbol === 'BTC') {
+    return 'Btc.Btc'
+  }
+  if (token.symbol === 'ETH') {
+    return 'Eth.Eth'
+  }
+  if (token.symbol === 'USDT') {
+    return 'Usdt.Eth'
+  }
+  return `${token.symbol}.${chain.requestKey}`
 }
 
 const getChainflipDecimals = (token: TToken): number => {
-	switch (token.symbol) {
-		case 'SOL':
-			return 9
-		case 'BTC':
-			return 8
-		case 'ETH':
-			return 18
-		case 'USDT':
-			return 6
-		default:
-			return 18
-	}
+  switch (token.symbol) {
+    case 'SOL':
+      return 9
+    case 'BTC':
+      return 8
+    case 'ETH':
+      return 18
+    case 'USDT':
+      return 6
+    default:
+      return 18
+  }
 }
 
 export function TradingWidget(): ReactNode {
-	const [fromToken, setFromToken] = useState<TToken>(SUPPORTED_TOKENS[0])
-	const [toToken, setToToken] = useState<TToken>(SUPPORTED_TOKENS[1])
-	const [fromChain, setFromChain] = useState<TChain>(SUPPORTED_CHAINS[2])
-	const [toChain, setToChain] = useState<TChain>(SUPPORTED_CHAINS[0])
-	const [amount, setAmount] = useState<string>('0')
-	const [outputAmount, setOutputAmount] = useState({
-		amount: 0,
-		isNative: true
-	})
-	const [openSelect, setOpenSelect] = useState<string | null>(null)
-	const [isLoading, setIsLoading] = useState(false)
-	const [error, setError] = useState('')
-
-	const debouncedAmount = useDebounce(amount)
-
-	useEffect(() => {
-		if (error) {
-			setOutputAmount({amount: 0, isNative: true})
-		}
-	}, [error, fromChain.id, fromToken.symbol, toChain.id, toToken.symbol])
-
-	const fetchFromDaemon = useCallback((): void => {
-		setError('')
-		try {
-			setIsLoading(true)
-			const numericAmount = Number(debouncedAmount)
-			fetch(
-				`https://api.thorchain.shapeshift.com/lcd/thorchain/quote/swap?amount=${numericAmount * 10 ** (fromToken.decimals[toToken.symbol?.toLowerCase() || 'eth'] || 6)}&from_asset=${fromChain.requestKey}.${fromToken.requestKey}&to_asset=${toChain.requestKey}.${toToken.requestKey}&affiliate_bps=64&affiliate=ss&streaming_interval=1`
-			)
-				.then(async res => res.json())
-				.then(data => {
-					setOutputAmount({amount: data.expected_amount_out, isNative: true})
-					if (!data.expected_amount_out) {
-						setError('No rate available')
-					}
-				})
-				.finally(() => {
-					setIsLoading(false)
-				})
-		} catch {
-			setError('No rate available')
-			setIsLoading(false)
-		}
-	}, [
-		debouncedAmount,
-		fromChain.requestKey,
-		fromToken.decimals,
-		fromToken.requestKey,
-		toChain.requestKey,
-		toToken.requestKey,
-		toToken.symbol
-	])
-
-	const fetchFromChainFlip = useCallback((): void => {
-		setError('')
-		setIsLoading(true)
-		try {
-			const numericAmount = Number(debouncedAmount)
-			const sourceAsset = getChainflipAssetId(fromToken, fromChain)
-			const destinationAsset = getChainflipAssetId(toToken, toChain)
-			const decimals = getChainflipDecimals(fromToken)
-			const amountInBaseUnits = BigInt(Math.round(numericAmount * 10 ** decimals)).toString()
-			fetch(
-				`https://chainflip-broker.io/quotes-native?apiKey=09bc0796ff40435482c0a54fa6ae2784&sourceAsset=${sourceAsset}&destinationAsset=${destinationAsset}&amount=${amountInBaseUnits}&commissionBps=63`
-			)
-				.then(async res => res.json())
-				.then(data => {
-					setOutputAmount({
-						amount: data[0]?.egressAmountNative,
-						isNative: true
-					})
-					if (!data?.[0]?.egressAmountNative) {
-						setError('No rate available')
-					}
-				})
-				.finally(() => {
-					setIsLoading(false)
-				})
-		} catch {
-			setError('No rate available')
-			setIsLoading(false)
-		}
-	}, [debouncedAmount, fromChain, fromToken, toChain, toToken])
-
-	useEffect(() => {
-		if (debouncedAmount === '0' || debouncedAmount === '') {
-			return
-		}
-
-		if (toToken.symbol === fromToken.symbol && toChain.id === fromChain.id) {
-			return setError('Please select different tokens')
-		}
-
-		if (fromChain.id === 'solana' || toChain.id === 'solana') {
-			return fetchFromChainFlip()
-		}
-
-		return fetchFromDaemon()
-	}, [
-		debouncedAmount,
-		fetchFromChainFlip,
-		fetchFromDaemon,
-		fromChain.id,
-		fromChain.name,
-		fromToken.symbol,
-		toChain.id,
-		toChain.name,
-		toToken.symbol
-	])
-
-	// Get supported chains for a token
-	const getSupportedChains = (token: TToken): TChain[] => {
-		const supportedChainIds = TOKEN_CHAIN_SUPPORT[token.symbol]
-		return SUPPORTED_CHAINS.filter(chain => supportedChainIds?.includes(chain.id))
-	}
-
-	const handleTokenSelect = (token: TToken, isFrom: boolean): void => {
-		const supportedChains = getSupportedChains(token)
-		if (isFrom) {
-			setFromToken(token)
-			if (supportedChains.length === 1) {
-				setFromChain(supportedChains[0])
-			} else if (!supportedChains.find(chain => chain.id === fromChain.id)) {
-				setFromChain(supportedChains[0])
-			}
-		} else {
-			setToToken(token)
-			if (supportedChains.length === 1) {
-				setToChain(supportedChains[0])
-			} else if (!supportedChains.find(chain => chain.id === toChain.id)) {
-				setToChain(supportedChains[0])
-			}
-		}
-	}
-
-	const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		setOutputAmount({amount: 0, isNative: true})
-		const value = e.target.value
-		// Allow decimal numbers with up to 18 decimal places
-		if (/^\d*\.?\d{0,18}$/.test(value)) {
-			if (value === '') {
-				setAmount('0')
-				return
-			}
-			if (value.length > 1 && value[0] === '0' && value[1] !== '.') {
-				setAmount(value.slice(1))
-				return
-			}
-			setAmount(value)
-		}
-	}
-
-	const handleSwap = (): void => {
-		const tempToken = fromToken
-		const tempChain = fromChain
-
-		setFromToken(toToken)
-		setFromChain(toChain)
-		setToToken(tempToken)
-		setToChain(tempChain)
-	}
-
-	const generateTradeUrl = useCallback((): string => {
-		const baseUrl = 'https://app.shapeshift.com/?utm_source=widget&utm_medium=cta&utm_campaign=getstarted#/trade/'
-
-		// Map chain IDs to their respective parameters
-		const chainParams: Record<string, string> = {
-			bitcoin: 'bip122:000000000019d6689c085ae165831e93/slip44:0',
-			ethereum: 'eip155:1/slip44:60',
-			base: 'eip155:8453/slip44:60',
-			solana: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501'
-		}
-
-		// Map token decimals
-		const tokenDecimals: Record<string, number> = {
-			USDT: 6,
-			BTC: 8,
-			ETH: 18,
-			SOL: 9
-		}
-
-		// Get chain parameters
-		const fromChainParam = chainParams[fromChain.id] || ''
-		const toChainParam = chainParams[toChain.id] || ''
-
-		// Format amount in smallest unit using the correct decimals for the source token
-		const decimals = tokenDecimals[fromToken.symbol] || 18
-		const amountInSmallestUnit = Number(amount) > 0 ? Math.floor(Number(amount) * 10 ** decimals).toString() : '0'
-
-		// For SOL to USDT
-		if (fromToken.symbol === 'SOL' && toToken.symbol === 'USDT') {
-			return `${baseUrl}/eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7/${fromChainParam}/${amountInSmallestUnit}`
-		}
-
-		// For USDT to BTC
-		if (fromToken.symbol === 'USDT' && toToken.symbol === 'BTC') {
-			return `${baseUrl}/${toChainParam}/eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7/${amountInSmallestUnit}`
-		}
-
-		// For BTC to USDT
-		if (fromToken.symbol === 'BTC' && toToken.symbol === 'USDT') {
-			return `${baseUrl}/eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7/${fromChainParam}/${amountInSmallestUnit}`
-		}
-
-		// For all other tokens, use the standard format
-		return `${baseUrl}/${toChainParam}/${fromChainParam}/${amountInSmallestUnit}`
-	}, [fromChain.id, toChain.id, amount, fromToken.symbol, toToken.symbol])
-
-	return (
-		<div className={'flex max-w-[400px] flex-col rounded-2xl bg-[#17191c] lg:w-[400px]'}>
-			<div className={'flex items-center justify-between p-4 lg:p-6'}>{'Trade/Bridge'}</div>
-
-			<div className={'mb-2 px-6'}>
-				<div className={'mb-2 text-sm'}>{'Pay With'}</div>
-				<div className={'no-translate flex items-center gap-2'}>
-					<TokenSelect
-						tokens={SUPPORTED_TOKENS}
-						selectedToken={fromToken}
-						onSelectAction={token => handleTokenSelect(token, true)}
-						isOpen={openSelect === 'fromToken'}
-						setIsOpenAction={isOpen => setOpenSelect(isOpen ? 'fromToken' : null)}
-					/>
-					<span className={'text-sm text-gray-400'}>{'on'}</span>
-					<ChainSelect
-						chains={getSupportedChains(fromToken)}
-						selectedChain={fromChain}
-						onSelectAction={setFromChain}
-						disabled={getSupportedChains(fromToken).length === 1}
-						isOpen={openSelect === 'fromChain'}
-						setIsOpenAction={isOpen => setOpenSelect(isOpen ? 'fromChain' : null)}
-					/>
-				</div>
-				<input
-					type={'text'}
-					value={amount}
-					inputMode={'decimal'}
-					onChange={handleAmountChange}
-					className={'mt-4 w-full bg-transparent text-2xl outline-none placeholder:text-gray-600'}
-					placeholder={'0'}
-				/>
-			</div>
-
-			<div className={'relative flex items-center justify-center px-2 lg:p-2'}>
-				<div
-					className={cl(
-						'relative z-10 group rounded-full border p-3 cursor-pointer',
-						isLoading
-							? 'bg-[#17191c] border-transparent z-10 before:absolute before:inset-0 before:animate-spin before:rounded-full before:border before:border-transparent before:border-t-blue'
-							: 'border-white/5 bg-[#17191c] hover:bg-[#17191c]'
-					)}
-					onClick={handleSwap}>
-					<div className={'relative z-10'}>
-						<IconArrow className={'size-3 rotate-[135deg] text-white/50 group-hover:text-white'} />
-					</div>
-				</div>
-				<div className={'absolute top-1/2 h-px w-full -translate-y-1/2 border-t border-white/5'} />
-			</div>
-
-			<div className={'mb-4 px-6'}>
-				<div className={'mb-2 text-sm text-gray-400'}>{'You Get'}</div>
-				<div className={'no-translate flex items-center gap-2 '}>
-					<TokenSelect
-						tokens={SUPPORTED_TOKENS}
-						selectedToken={toToken}
-						onSelectAction={token => handleTokenSelect(token, false)}
-						isOpen={openSelect === 'toToken'}
-						setIsOpenAction={isOpen => setOpenSelect(isOpen ? 'toToken' : null)}
-					/>
-					<span className={'text-sm text-gray-400'}>{'on'}</span>
-					<ChainSelect
-						chains={getSupportedChains(toToken)}
-						selectedChain={toChain}
-						onSelectAction={setToChain}
-						disabled={getSupportedChains(toToken).length === 1}
-						isOpen={openSelect === 'toChain'}
-						setIsOpenAction={isOpen => setOpenSelect(isOpen ? 'toChain' : null)}
-					/>
-				</div>
-				<div className={'mt-4 text-2xl'}>
-					{isLoading ? (
-						<div className={'relative overflow-hidden rounded bg-white/5 text-transparent'}>
-							<div className={'relative z-0'}>{'0000.0000'}</div>
-							<div
-								className={
-									'absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/10 to-transparent'
-								}
-							/>
-						</div>
-					) : (
-						<div>
-							{formatNumber(
-								outputAmount.amount,
-								outputAmount.isNative,
-								fromChain.id === 'solana' || toChain.id === 'solana'
-									? getChainflipDecimals(toToken)
-									: toToken.decimals[fromToken.symbol?.toLowerCase() || 'eth'] || 6
-							)}
-						</div>
-					)}
-				</div>
-			</div>
-			{error && (
-				<div className={'flex items-center gap-2 border-t border-t-white/5 p-4 text-gray-500'}>
-					<div className={'flex size-5 items-center justify-center rounded-[100%] bg-gray-500'}>
-						<IconQuestion className={'size-2 text-white'} />
-					</div>
-					<span className={'text-sm text-gray-400'}>{error}</span>
-				</div>
-			)}
-
-			<div className={'w-full rounded-b-2xl border-t border-t-white/5 bg-[#1e2024] px-4 py-3 lg:px-5 lg:py-4'}>
-				<LocalizedLink
-					href={generateTradeUrl()}
-					target={'_blank'}
-					rel={'noopener noreferrer'}>
-					<button className={'w-full rounded-2xl bg-blue py-4 font-medium hover:bg-blueHover'}>
-						{'Get Started'}
-					</button>
-				</LocalizedLink>
-			</div>
-		</div>
-	)
+  const [fromToken, setFromToken] = useState<TToken>(SUPPORTED_TOKENS[0])
+  const [toToken, setToToken] = useState<TToken>(SUPPORTED_TOKENS[1])
+  const [fromChain, setFromChain] = useState<TChain>(SUPPORTED_CHAINS[2])
+  const [toChain, setToChain] = useState<TChain>(SUPPORTED_CHAINS[0])
+  const [amount, setAmount] = useState<string>('0')
+  const [outputAmount, setOutputAmount] = useState({
+    amount: 0,
+    isNative: true,
+  })
+  const [openSelect, setOpenSelect] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const debouncedAmount = useDebounce(amount)
+
+  useEffect(() => {
+    if (error) {
+      setOutputAmount({ amount: 0, isNative: true })
+    }
+  }, [error, fromChain.id, fromToken.symbol, toChain.id, toToken.symbol])
+
+  const fetchFromDaemon = useCallback((): void => {
+    setError('')
+    try {
+      setIsLoading(true)
+      const numericAmount = Number(debouncedAmount)
+      fetch(
+        `https://api.thorchain.shapeshift.com/lcd/thorchain/quote/swap?amount=${numericAmount * 10 ** (fromToken.decimals[toToken.symbol?.toLowerCase() || 'eth'] || 6)}&from_asset=${fromChain.requestKey}.${fromToken.requestKey}&to_asset=${toChain.requestKey}.${toToken.requestKey}&affiliate_bps=64&affiliate=ss&streaming_interval=1`
+      )
+        .then(async (res) => res.json())
+        .then((data) => {
+          setOutputAmount({ amount: data.expected_amount_out, isNative: true })
+          if (!data.expected_amount_out) {
+            setError('No rate available')
+          }
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+    } catch {
+      setError('No rate available')
+      setIsLoading(false)
+    }
+  }, [
+    debouncedAmount,
+    fromChain.requestKey,
+    fromToken.decimals,
+    fromToken.requestKey,
+    toChain.requestKey,
+    toToken.requestKey,
+    toToken.symbol,
+  ])
+
+  const fetchFromChainFlip = useCallback((): void => {
+    setError('')
+    setIsLoading(true)
+    try {
+      const numericAmount = Number(debouncedAmount)
+      const sourceAsset = getChainflipAssetId(fromToken, fromChain)
+      const destinationAsset = getChainflipAssetId(toToken, toChain)
+      const decimals = getChainflipDecimals(fromToken)
+      const amountInBaseUnits = BigInt(Math.round(numericAmount * 10 ** decimals)).toString()
+      fetch(
+        `https://chainflip-broker.io/quotes-native?apiKey=09bc0796ff40435482c0a54fa6ae2784&sourceAsset=${sourceAsset}&destinationAsset=${destinationAsset}&amount=${amountInBaseUnits}&commissionBps=63`
+      )
+        .then(async (res) => res.json())
+        .then((data) => {
+          setOutputAmount({
+            amount: data[0]?.egressAmountNative,
+            isNative: true,
+          })
+          if (!data?.[0]?.egressAmountNative) {
+            setError('No rate available')
+          }
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+    } catch {
+      setError('No rate available')
+      setIsLoading(false)
+    }
+  }, [debouncedAmount, fromChain, fromToken, toChain, toToken])
+
+  useEffect(() => {
+    if (debouncedAmount === '0' || debouncedAmount === '') {
+      return
+    }
+
+    if (toToken.symbol === fromToken.symbol && toChain.id === fromChain.id) {
+      return setError('Please select different tokens')
+    }
+
+    if (fromChain.id === 'solana' || toChain.id === 'solana') {
+      return fetchFromChainFlip()
+    }
+
+    return fetchFromDaemon()
+  }, [
+    debouncedAmount,
+    fetchFromChainFlip,
+    fetchFromDaemon,
+    fromChain.id,
+    fromChain.name,
+    fromToken.symbol,
+    toChain.id,
+    toChain.name,
+    toToken.symbol,
+  ])
+
+  // Get supported chains for a token
+  const getSupportedChains = (token: TToken): TChain[] => {
+    const supportedChainIds = TOKEN_CHAIN_SUPPORT[token.symbol]
+    return SUPPORTED_CHAINS.filter((chain) => supportedChainIds?.includes(chain.id))
+  }
+
+  const handleTokenSelect = (token: TToken, isFrom: boolean): void => {
+    const supportedChains = getSupportedChains(token)
+    if (isFrom) {
+      setFromToken(token)
+      if (supportedChains.length === 1) {
+        setFromChain(supportedChains[0])
+      } else if (!supportedChains.find((chain) => chain.id === fromChain.id)) {
+        setFromChain(supportedChains[0])
+      }
+    } else {
+      setToToken(token)
+      if (supportedChains.length === 1) {
+        setToChain(supportedChains[0])
+      } else if (!supportedChains.find((chain) => chain.id === toChain.id)) {
+        setToChain(supportedChains[0])
+      }
+    }
+  }
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setOutputAmount({ amount: 0, isNative: true })
+    const value = e.target.value
+    // Allow decimal numbers with up to 18 decimal places
+    if (/^\d*\.?\d{0,18}$/.test(value)) {
+      if (value === '') {
+        setAmount('0')
+        return
+      }
+      if (value.length > 1 && value[0] === '0' && value[1] !== '.') {
+        setAmount(value.slice(1))
+        return
+      }
+      setAmount(value)
+    }
+  }
+
+  const handleSwap = (): void => {
+    const tempToken = fromToken
+    const tempChain = fromChain
+
+    setFromToken(toToken)
+    setFromChain(toChain)
+    setToToken(tempToken)
+    setToChain(tempChain)
+  }
+
+  const generateTradeUrl = useCallback((): string => {
+    const baseUrl = 'https://app.shapeshift.com/?utm_source=widget&utm_medium=cta&utm_campaign=getstarted#/trade/'
+
+    // Map chain IDs to their respective parameters
+    const chainParams: Record<string, string> = {
+      bitcoin: 'bip122:000000000019d6689c085ae165831e93/slip44:0',
+      ethereum: 'eip155:1/slip44:60',
+      base: 'eip155:8453/slip44:60',
+      solana: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501',
+    }
+
+    // Map token decimals
+    const tokenDecimals: Record<string, number> = {
+      USDT: 6,
+      BTC: 8,
+      ETH: 18,
+      SOL: 9,
+    }
+
+    // Get chain parameters
+    const fromChainParam = chainParams[fromChain.id] || ''
+    const toChainParam = chainParams[toChain.id] || ''
+
+    // Format amount in smallest unit using the correct decimals for the source token
+    const decimals = tokenDecimals[fromToken.symbol] || 18
+    const amountInSmallestUnit = Number(amount) > 0 ? Math.floor(Number(amount) * 10 ** decimals).toString() : '0'
+
+    // For SOL to USDT
+    if (fromToken.symbol === 'SOL' && toToken.symbol === 'USDT') {
+      return `${baseUrl}/eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7/${fromChainParam}/${amountInSmallestUnit}`
+    }
+
+    // For USDT to BTC
+    if (fromToken.symbol === 'USDT' && toToken.symbol === 'BTC') {
+      return `${baseUrl}/${toChainParam}/eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7/${amountInSmallestUnit}`
+    }
+
+    // For BTC to USDT
+    if (fromToken.symbol === 'BTC' && toToken.symbol === 'USDT') {
+      return `${baseUrl}/eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7/${fromChainParam}/${amountInSmallestUnit}`
+    }
+
+    // For all other tokens, use the standard format
+    return `${baseUrl}/${toChainParam}/${fromChainParam}/${amountInSmallestUnit}`
+  }, [fromChain.id, toChain.id, amount, fromToken.symbol, toToken.symbol])
+
+  return (
+    <div className={'flex max-w-[400px] flex-col rounded-2xl bg-[#17191c] lg:w-[400px]'}>
+      <div className={'flex items-center justify-between p-4 lg:p-6'}>{'Trade/Bridge'}</div>
+
+      <div className={'mb-2 px-6'}>
+        <div className={'mb-2 text-sm'}>{'Pay With'}</div>
+        <div className={'no-translate flex items-center gap-2'}>
+          <TokenSelect
+            tokens={SUPPORTED_TOKENS}
+            selectedToken={fromToken}
+            onSelectAction={(token) => handleTokenSelect(token, true)}
+            isOpen={openSelect === 'fromToken'}
+            setIsOpenAction={(isOpen) => setOpenSelect(isOpen ? 'fromToken' : null)}
+          />
+          <span className={'text-sm text-gray-400'}>{'on'}</span>
+          <ChainSelect
+            chains={getSupportedChains(fromToken)}
+            selectedChain={fromChain}
+            onSelectAction={setFromChain}
+            disabled={getSupportedChains(fromToken).length === 1}
+            isOpen={openSelect === 'fromChain'}
+            setIsOpenAction={(isOpen) => setOpenSelect(isOpen ? 'fromChain' : null)}
+          />
+        </div>
+        <input
+          type={'text'}
+          value={amount}
+          inputMode={'decimal'}
+          onChange={handleAmountChange}
+          className={'mt-4 w-full bg-transparent text-2xl outline-none placeholder:text-gray-600'}
+          placeholder={'0'}
+        />
+      </div>
+
+      <div className={'relative flex items-center justify-center px-2 lg:p-2'}>
+        <div
+          className={cl(
+            'relative z-10 group rounded-full border p-3 cursor-pointer',
+            isLoading
+              ? 'bg-[#17191c] border-transparent z-10 before:absolute before:inset-0 before:animate-spin before:rounded-full before:border before:border-transparent before:border-t-blue'
+              : 'border-white/5 bg-[#17191c] hover:bg-[#17191c]'
+          )}
+          onClick={handleSwap}
+        >
+          <div className={'relative z-10'}>
+            <IconArrow className={'size-3 rotate-[135deg] text-white/50 group-hover:text-white'} />
+          </div>
+        </div>
+        <div className={'absolute top-1/2 h-px w-full -translate-y-1/2 border-t border-white/5'} />
+      </div>
+
+      <div className={'mb-4 px-6'}>
+        <div className={'mb-2 text-sm text-gray-400'}>{'You Get'}</div>
+        <div className={'no-translate flex items-center gap-2 '}>
+          <TokenSelect
+            tokens={SUPPORTED_TOKENS}
+            selectedToken={toToken}
+            onSelectAction={(token) => handleTokenSelect(token, false)}
+            isOpen={openSelect === 'toToken'}
+            setIsOpenAction={(isOpen) => setOpenSelect(isOpen ? 'toToken' : null)}
+          />
+          <span className={'text-sm text-gray-400'}>{'on'}</span>
+          <ChainSelect
+            chains={getSupportedChains(toToken)}
+            selectedChain={toChain}
+            onSelectAction={setToChain}
+            disabled={getSupportedChains(toToken).length === 1}
+            isOpen={openSelect === 'toChain'}
+            setIsOpenAction={(isOpen) => setOpenSelect(isOpen ? 'toChain' : null)}
+          />
+        </div>
+        <div className={'mt-4 text-2xl'}>
+          {isLoading ? (
+            <div className={'relative overflow-hidden rounded bg-white/5 text-transparent'}>
+              <div className={'relative z-0'}>{'0000.0000'}</div>
+              <div
+                className={
+                  'absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/10 to-transparent'
+                }
+              />
+            </div>
+          ) : (
+            <div>
+              {formatNumber(
+                outputAmount.amount,
+                outputAmount.isNative,
+                fromChain.id === 'solana' || toChain.id === 'solana'
+                  ? getChainflipDecimals(toToken)
+                  : toToken.decimals[fromToken.symbol?.toLowerCase() || 'eth'] || 6
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      {error && (
+        <div className={'flex items-center gap-2 border-t border-t-white/5 p-4 text-gray-500'}>
+          <div className={'flex size-5 items-center justify-center rounded-[100%] bg-gray-500'}>
+            <IconQuestion className={'size-2 text-white'} />
+          </div>
+          <span className={'text-sm text-gray-400'}>{error}</span>
+        </div>
+      )}
+
+      <div className={'w-full rounded-b-2xl border-t border-t-white/5 bg-[#1e2024] px-4 py-3 lg:px-5 lg:py-4'}>
+        <LocalizedLink href={generateTradeUrl()} target={'_blank'} rel={'noopener noreferrer'}>
+          <button className={'w-full rounded-2xl bg-blue py-4 font-medium hover:bg-blueHover'}>{'Get Started'}</button>
+        </LocalizedLink>
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/_contexts/CachedArticlesContext.tsx b/app/[lang]/_contexts/CachedArticlesContext.tsx
index 7cd203b..ca89991 100644
--- a/app/[lang]/_contexts/CachedArticlesContext.tsx
+++ b/app/[lang]/_contexts/CachedArticlesContext.tsx
@@ -10,20 +10,20 @@
 
 'use client'
 
-import {createContext, useContext, useState} from 'react'
+import { createContext, useContext, useState } from 'react'
 
-import type {TArticleListResponse} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TArticleListResponse } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 /********************************************************************************************
  * Type definition for cached query parameters
  ********************************************************************************************/
 type TCachedParams = {
-	page: number | undefined
-	pageSize: number | undefined
-	sort: 'asc' | 'desc' | undefined
-	slug: string | undefined
-	populateContent: boolean | undefined
+  page: number | undefined
+  pageSize: number | undefined
+  sort: 'asc' | 'desc' | undefined
+  slug: string | undefined
+  populateContent: boolean | undefined
 }
 
 /********************************************************************************************
@@ -31,31 +31,31 @@ type TCachedParams = {
  * Provides default values for initial state
  ********************************************************************************************/
 const ArticlesContext = createContext<{
-	cachedResponse: TArticleListResponse
-	setCachedResponse: (responses: TArticleListResponse) => void
-	cachedParams: TCachedParams
-	setCachedParams: (params: TCachedParams) => void
+  cachedResponse: TArticleListResponse
+  setCachedResponse: (responses: TArticleListResponse) => void
+  cachedParams: TCachedParams
+  setCachedParams: (params: TCachedParams) => void
 }>({
-	cachedResponse: {
-		data: [],
-		meta: {
-			pagination: {
-				page: 1,
-				pageSize: 12,
-				pageCount: 1,
-				total: 0
-			}
-		}
-	},
-	setCachedResponse: () => {},
-	cachedParams: {
-		page: undefined,
-		pageSize: undefined,
-		sort: undefined,
-		slug: undefined,
-		populateContent: undefined
-	},
-	setCachedParams: () => {}
+  cachedResponse: {
+    data: [],
+    meta: {
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        pageCount: 1,
+        total: 0,
+      },
+    },
+  },
+  setCachedResponse: () => {},
+  cachedParams: {
+    page: undefined,
+    pageSize: undefined,
+    sort: undefined,
+    slug: undefined,
+    populateContent: undefined,
+  },
+  setCachedParams: () => {},
 })
 
 /**
@@ -63,37 +63,38 @@ const ArticlesContext = createContext<{
  * @param children - Child components that will have access to the articles cache
  * @returns Provider component with cached articles state
  */
-export function CachedArticlesProvider({children}: {children: ReactNode}): ReactNode {
-	const [cachedResponse, setCachedResponse] = useState<TArticleListResponse>({
-		data: [],
-		meta: {
-			pagination: {
-				page: 1,
-				pageSize: 12,
-				pageCount: 1,
-				total: 0
-			}
-		}
-	})
-	const [cachedParams, setCachedParams] = useState<TCachedParams>({
-		page: undefined,
-		pageSize: undefined,
-		sort: undefined,
-		slug: undefined,
-		populateContent: undefined
-	})
+export function CachedArticlesProvider({ children }: { children: ReactNode }): ReactNode {
+  const [cachedResponse, setCachedResponse] = useState<TArticleListResponse>({
+    data: [],
+    meta: {
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        pageCount: 1,
+        total: 0,
+      },
+    },
+  })
+  const [cachedParams, setCachedParams] = useState<TCachedParams>({
+    page: undefined,
+    pageSize: undefined,
+    sort: undefined,
+    slug: undefined,
+    populateContent: undefined,
+  })
 
-	return (
-		<ArticlesContext.Provider
-			value={{
-				cachedResponse,
-				setCachedResponse,
-				cachedParams,
-				setCachedParams
-			}}>
-			{children}
-		</ArticlesContext.Provider>
-	)
+  return (
+    <ArticlesContext.Provider
+      value={{
+        cachedResponse,
+        setCachedResponse,
+        cachedParams,
+        setCachedParams,
+      }}
+    >
+      {children}
+    </ArticlesContext.Provider>
+  )
 }
 
 /**
@@ -102,10 +103,10 @@ export function CachedArticlesProvider({children}: {children: ReactNode}): React
  * @throws Error if used outside of CachedArticlesProvider
  */
 export function useCachedArticles(): {
-	cachedResponse: TArticleListResponse
-	setCachedResponse: (responses: TArticleListResponse) => void
-	cachedParams: TCachedParams
-	setCachedParams: (params: TCachedParams) => void
+  cachedResponse: TArticleListResponse
+  setCachedResponse: (responses: TArticleListResponse) => void
+  cachedParams: TCachedParams
+  setCachedParams: (params: TCachedParams) => void
 } {
-	return useContext(ArticlesContext)
+  return useContext(ArticlesContext)
 }
diff --git a/app/[lang]/_contexts/CachedNewsContext.tsx b/app/[lang]/_contexts/CachedNewsContext.tsx
index db7734f..63b36c7 100644
--- a/app/[lang]/_contexts/CachedNewsContext.tsx
+++ b/app/[lang]/_contexts/CachedNewsContext.tsx
@@ -10,22 +10,22 @@
 
 'use client'
 
-import {createContext, useContext, useState} from 'react'
+import { createContext, useContext, useState } from 'react'
 
-import type {TNewsroomListResponse} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TNewsroomListResponse } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 /********************************************************************************************
  * Type definition for cached query parameters
  ********************************************************************************************/
 type TCachedParams = {
-	page: number | undefined
-	pageSize: number | undefined
-	sort: 'asc' | 'desc' | undefined
-	slug: string | undefined
-	populateContent: boolean | undefined
-	category: string | undefined
-	tag: string | undefined
+  page: number | undefined
+  pageSize: number | undefined
+  sort: 'asc' | 'desc' | undefined
+  slug: string | undefined
+  populateContent: boolean | undefined
+  category: string | undefined
+  tag: string | undefined
 }
 
 /********************************************************************************************
@@ -33,33 +33,33 @@ type TCachedParams = {
  * Provides default values for initial state
  */
 const NewsContext = createContext<{
-	cachedResponse: TNewsroomListResponse
-	setCachedResponse: (responses: TNewsroomListResponse) => void
-	cachedParams: TCachedParams
-	setCachedParams: (params: TCachedParams) => void
+  cachedResponse: TNewsroomListResponse
+  setCachedResponse: (responses: TNewsroomListResponse) => void
+  cachedParams: TCachedParams
+  setCachedParams: (params: TCachedParams) => void
 }>({
-	cachedResponse: {
-		data: [],
-		meta: {
-			pagination: {
-				page: 1,
-				pageSize: 12,
-				pageCount: 1,
-				total: 0
-			}
-		}
-	},
-	setCachedResponse: () => {},
-	cachedParams: {
-		page: undefined,
-		pageSize: undefined,
-		sort: undefined,
-		slug: undefined,
-		populateContent: undefined,
-		category: undefined,
-		tag: undefined
-	},
-	setCachedParams: () => {}
+  cachedResponse: {
+    data: [],
+    meta: {
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        pageCount: 1,
+        total: 0,
+      },
+    },
+  },
+  setCachedResponse: () => {},
+  cachedParams: {
+    page: undefined,
+    pageSize: undefined,
+    sort: undefined,
+    slug: undefined,
+    populateContent: undefined,
+    category: undefined,
+    tag: undefined,
+  },
+  setCachedParams: () => {},
 })
 
 /**
@@ -67,39 +67,40 @@ const NewsContext = createContext<{
  * @param children - Child components that will have access to the news cache
  * @returns Provider component with cached news state
  */
-export function CachedNewsProvider({children}: {children: ReactNode}): ReactNode {
-	const [cachedResponse, setCachedResponse] = useState<TNewsroomListResponse>({
-		data: [],
-		meta: {
-			pagination: {
-				page: 1,
-				pageSize: 12,
-				pageCount: 1,
-				total: 0
-			}
-		}
-	})
-	const [cachedParams, setCachedParams] = useState<TCachedParams>({
-		page: undefined,
-		pageSize: undefined,
-		sort: undefined,
-		slug: undefined,
-		populateContent: undefined,
-		category: undefined,
-		tag: undefined
-	})
+export function CachedNewsProvider({ children }: { children: ReactNode }): ReactNode {
+  const [cachedResponse, setCachedResponse] = useState<TNewsroomListResponse>({
+    data: [],
+    meta: {
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        pageCount: 1,
+        total: 0,
+      },
+    },
+  })
+  const [cachedParams, setCachedParams] = useState<TCachedParams>({
+    page: undefined,
+    pageSize: undefined,
+    sort: undefined,
+    slug: undefined,
+    populateContent: undefined,
+    category: undefined,
+    tag: undefined,
+  })
 
-	return (
-		<NewsContext.Provider
-			value={{
-				cachedResponse,
-				setCachedResponse,
-				cachedParams,
-				setCachedParams
-			}}>
-			{children}
-		</NewsContext.Provider>
-	)
+  return (
+    <NewsContext.Provider
+      value={{
+        cachedResponse,
+        setCachedResponse,
+        cachedParams,
+        setCachedParams,
+      }}
+    >
+      {children}
+    </NewsContext.Provider>
+  )
 }
 
 /**
@@ -108,10 +109,10 @@ export function CachedNewsProvider({children}: {children: ReactNode}): ReactNode
  * @throws Error if used outside of CachedNewsProvider
  */
 export function useCachedNews(): {
-	cachedResponse: TNewsroomListResponse
-	setCachedResponse: (responses: TNewsroomListResponse) => void
-	cachedParams: TCachedParams
-	setCachedParams: (params: TCachedParams) => void
+  cachedResponse: TNewsroomListResponse
+  setCachedResponse: (responses: TNewsroomListResponse) => void
+  cachedParams: TCachedParams
+  setCachedParams: (params: TCachedParams) => void
 } {
-	return useContext(NewsContext)
+  return useContext(NewsContext)
 }
diff --git a/app/[lang]/_contexts/CachedPostsContext.tsx b/app/[lang]/_contexts/CachedPostsContext.tsx
index aff45de..7076c3d 100644
--- a/app/[lang]/_contexts/CachedPostsContext.tsx
+++ b/app/[lang]/_contexts/CachedPostsContext.tsx
@@ -10,22 +10,22 @@
 
 'use client'
 
-import {createContext, useContext, useState} from 'react'
+import { createContext, useContext, useState } from 'react'
 
-import type {TBlogListResponse} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TBlogListResponse } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 /********************************************************************************************
  * Type definition for cached query parameters
  ********************************************************************************************/
 type TCachedParams = {
-	page: number | undefined
-	pageSize: number | undefined
-	sort: 'asc' | 'desc' | undefined
-	slug: string | undefined
-	populateContent: boolean | undefined
-	type: string | undefined
-	tag: string | undefined
+  page: number | undefined
+  pageSize: number | undefined
+  sort: 'asc' | 'desc' | undefined
+  slug: string | undefined
+  populateContent: boolean | undefined
+  type: string | undefined
+  tag: string | undefined
 }
 
 /********************************************************************************************
@@ -33,33 +33,33 @@ type TCachedParams = {
  * Provides default values for initial state
  ********************************************************************************************/
 const PostsContext = createContext<{
-	cachedResponse: TBlogListResponse
-	setCachedResponse: (responses: TBlogListResponse) => void
-	cachedParams: TCachedParams
-	setCachedParams: (params: TCachedParams) => void
+  cachedResponse: TBlogListResponse
+  setCachedResponse: (responses: TBlogListResponse) => void
+  cachedParams: TCachedParams
+  setCachedParams: (params: TCachedParams) => void
 }>({
-	cachedResponse: {
-		data: [],
-		meta: {
-			pagination: {
-				page: 1,
-				pageSize: 12,
-				pageCount: 1,
-				total: 0
-			}
-		}
-	},
-	setCachedResponse: () => {},
-	cachedParams: {
-		page: undefined,
-		pageSize: undefined,
-		sort: undefined,
-		slug: undefined,
-		populateContent: undefined,
-		type: undefined,
-		tag: undefined
-	},
-	setCachedParams: () => {}
+  cachedResponse: {
+    data: [],
+    meta: {
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        pageCount: 1,
+        total: 0,
+      },
+    },
+  },
+  setCachedResponse: () => {},
+  cachedParams: {
+    page: undefined,
+    pageSize: undefined,
+    sort: undefined,
+    slug: undefined,
+    populateContent: undefined,
+    type: undefined,
+    tag: undefined,
+  },
+  setCachedParams: () => {},
 })
 
 /**
@@ -67,39 +67,40 @@ const PostsContext = createContext<{
  * @param children - Child components that will have access to the posts cache
  * @returns Provider component with cached posts state
  */
-export function CachedPostsProvider({children}: {children: ReactNode}): ReactNode {
-	const [cachedResponse, setCachedResponse] = useState<TBlogListResponse>({
-		data: [],
-		meta: {
-			pagination: {
-				page: 1,
-				pageSize: 12,
-				pageCount: 1,
-				total: 0
-			}
-		}
-	})
-	const [cachedParams, setCachedParams] = useState<TCachedParams>({
-		page: undefined,
-		pageSize: undefined,
-		sort: undefined,
-		slug: undefined,
-		populateContent: undefined,
-		type: undefined,
-		tag: undefined
-	})
+export function CachedPostsProvider({ children }: { children: ReactNode }): ReactNode {
+  const [cachedResponse, setCachedResponse] = useState<TBlogListResponse>({
+    data: [],
+    meta: {
+      pagination: {
+        page: 1,
+        pageSize: 12,
+        pageCount: 1,
+        total: 0,
+      },
+    },
+  })
+  const [cachedParams, setCachedParams] = useState<TCachedParams>({
+    page: undefined,
+    pageSize: undefined,
+    sort: undefined,
+    slug: undefined,
+    populateContent: undefined,
+    type: undefined,
+    tag: undefined,
+  })
 
-	return (
-		<PostsContext.Provider
-			value={{
-				cachedResponse,
-				setCachedResponse,
-				cachedParams,
-				setCachedParams
-			}}>
-			{children}
-		</PostsContext.Provider>
-	)
+  return (
+    <PostsContext.Provider
+      value={{
+        cachedResponse,
+        setCachedResponse,
+        cachedParams,
+        setCachedParams,
+      }}
+    >
+      {children}
+    </PostsContext.Provider>
+  )
 }
 
 /**
@@ -108,10 +109,10 @@ export function CachedPostsProvider({children}: {children: ReactNode}): ReactNod
  * @throws Error if used outside of CachedPostsProvider
  */
 export function useCachedPosts(): {
-	cachedResponse: TBlogListResponse
-	setCachedResponse: (responses: TBlogListResponse) => void
-	cachedParams: TCachedParams
-	setCachedParams: (params: TCachedParams) => void
+  cachedResponse: TBlogListResponse
+  setCachedResponse: (responses: TBlogListResponse) => void
+  cachedParams: TCachedParams
+  setCachedParams: (params: TCachedParams) => void
 } {
-	return useContext(PostsContext)
+  return useContext(PostsContext)
 }
diff --git a/app/[lang]/_contexts/LanguageContext.tsx b/app/[lang]/_contexts/LanguageContext.tsx
index 53e37b9..4b6a655 100644
--- a/app/[lang]/_contexts/LanguageContext.tsx
+++ b/app/[lang]/_contexts/LanguageContext.tsx
@@ -2,192 +2,193 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 'use client'
 
-import {usePathname, useRouter} from 'next/navigation'
-import {createContext, useCallback, useContext, useEffect, useState} from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { createContext, useCallback, useContext, useEffect, useState } from 'react'
 
 import {
-	DEFAULT_LANGUAGE,
-	SUPPORTED_LANGUAGES,
-	getLanguageFromPath,
-	getPathWithoutLanguage
+  DEFAULT_LANGUAGE,
+  SUPPORTED_LANGUAGES,
+  getLanguageFromPath,
+  getPathWithoutLanguage,
 } from '@/app/[lang]/_utils/i18nconfig'
 
-import type {TLanguage} from '@/app/[lang]/_utils/i18nconfig'
+import type { TLanguage } from '@/app/[lang]/_utils/i18nconfig'
 
 type WeglotInstance = {
-	initialized: boolean
-	switchTo(languageCode: string): void
-	on(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void
-	on(event: 'initialized', handler: () => void): void
-	off(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void
-	off(event: 'initialized', handler: () => void): void
+  initialized: boolean
+  switchTo(languageCode: string): void
+  on(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void
+  on(event: 'initialized', handler: () => void): void
+  off(event: 'languageChanged', handler: (newLang: string, prevLang: string) => void): void
+  off(event: 'initialized', handler: () => void): void
 }
 
 declare global {
-	interface Window {
-		Weglot?: WeglotInstance
-	}
+  interface Window {
+    Weglot?: WeglotInstance
+  }
 }
 
 type TLanguageContext = {
-	currentLanguage: string
-	supportedLanguages: TLanguage[]
-	switchLanguage: (languageCode: string) => void
+  currentLanguage: string
+  supportedLanguages: TLanguage[]
+  switchLanguage: (languageCode: string) => void
 }
 
 const LanguageContext = createContext<TLanguageContext | undefined>(undefined)
 
-export function LanguageProvider({children}: {children: React.ReactNode}): JSX.Element {
-	const router = useRouter()
-	const pathname = usePathname()
-	const initialLanguage = getLanguageFromPath(pathname) || DEFAULT_LANGUAGE
-	const [currentLanguage, setCurrentLanguage] = useState(initialLanguage)
-	const [isInitialized, setIsInitialized] = useState(false)
-	const [, setHasManuallyChangedLanguage] = useState(false)
-
-	const switchLanguage = (languageCode: string, isScripted: boolean = false): void => {
-		if (!isInitialized) {
-			return
-		}
-		if (languageCode === currentLanguage) {
-			return
-		}
-
-		const cleanPath = getPathWithoutLanguage(pathname)
-		const targetPath = languageCode === DEFAULT_LANGUAGE ? cleanPath || '/' : `/${languageCode}${cleanPath}`
-
-		if (!isScripted) {
-			setHasManuallyChangedLanguage(true)
-			// Set cookie when user manually changes language
-			document.cookie = `locale=${languageCode}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`
-		}
-
-		const weglotInstance = window.Weglot
-		if (weglotInstance?.initialized) {
-			weglotInstance.switchTo(languageCode)
-		}
-
-		setCurrentLanguage(languageCode)
-		if (pathname !== targetPath) {
-			router.push(targetPath)
-		}
-	}
-
-	// const getBrowserLanguage = (): string => {
-	// 	if (typeof window === 'undefined') {
-	// 		return DEFAULT_LANGUAGE;
-	// 	}
-
-	// 	// Get browser language and extract the language code (e.g., 'fr' from 'fr-FR')
-	// 	const browserLang = navigator.language.toLowerCase().split('-')[0];
-
-	// 	// Check if browser language is supported
-	// 	const supportedLang = SUPPORTED_LANGUAGES.find(lang => lang.code === browserLang);
-	// 	return supportedLang ? browserLang : DEFAULT_LANGUAGE;
-	// };
-
-	const setLanguageFromPath = useCallback(() => {
-		const pathLanguage = getLanguageFromPath(pathname)
-		const weglotInstance = window.Weglot
-
-		if (!weglotInstance) {
-			return
-		}
-
-		// If path has a language, use it
-		if (pathLanguage) {
-			weglotInstance.switchTo(pathLanguage)
-			setCurrentLanguage(pathLanguage)
-		} else {
-			// If no language in path, the middleware should have handled it
-			// Just sync with the default language
-			weglotInstance.switchTo(DEFAULT_LANGUAGE)
-			setCurrentLanguage(DEFAULT_LANGUAGE)
-		}
-	}, [pathname])
-
-	const weglotConfigIsInitialized = typeof window !== 'undefined' && window.Weglot?.initialized
-	const handleWeglotLanguageChange = useCallback(
-		(newLang: string, prevLang: string): void => {
-			console.warn('[Weglot] Language changed from', prevLang, 'to', newLang)
-			setCurrentLanguage(newLang)
-
-			if (newLang !== prevLang && newLang) {
-				if (!prevLang || prevLang !== DEFAULT_LANGUAGE) {
-					router.replace(`/${newLang}${getPathWithoutLanguage(pathname)}`)
-				}
-			} else {
-				console.warn('ignoring')
-			}
-		},
-		[pathname, router]
-	)
-	const handleWeglotInitialized = useCallback((): void => {
-		setIsInitialized(true)
-		setLanguageFromPath()
-	}, [setLanguageFromPath])
-
-	useEffect(() => {
-		if (typeof window === 'undefined') {
-			return
-		}
-
-		let retryCount = 0
-		let retryTimeout: NodeJS.Timeout | undefined
-		const maxRetries = 10
-		const initialDelay = 100
-
-		const initializeWeglot = (): void => {
-			const weglot = window.Weglot
-			if (!weglot) {
-				if (retryCount < maxRetries) {
-					retryCount++
-					const delay = initialDelay * Math.pow(2, retryCount - 1)
-					console.log(
-						`[LanguageContext] Weglot not found, retrying in ${delay}ms (attempt ${retryCount}/${maxRetries})`
-					)
-					retryTimeout = setTimeout(initializeWeglot, delay)
-				} else {
-					console.warn('[LanguageContext] Weglot not found after maximum retries')
-				}
-				return
-			}
-
-			console.log('[LanguageContext] Weglot found, attaching event handlers')
-			weglot.on('languageChanged', handleWeglotLanguageChange)
-			weglot.on('initialized', handleWeglotInitialized)
-		}
-
-		initializeWeglot()
-
-		return () => {
-			if (retryTimeout) {
-				clearTimeout(retryTimeout)
-			}
-			const weglot = window.Weglot
-			if (weglot?.initialized) {
-				weglot.off('languageChanged', handleWeglotLanguageChange)
-				weglot.off('initialized', handleWeglotInitialized)
-			}
-		}
-	}, [weglotConfigIsInitialized, handleWeglotLanguageChange, handleWeglotInitialized])
-
-	return (
-		<LanguageContext.Provider
-			value={{
-				currentLanguage,
-				supportedLanguages: SUPPORTED_LANGUAGES,
-				switchLanguage
-			}}>
-			{children}
-		</LanguageContext.Provider>
-	)
+export function LanguageProvider({ children }: { children: React.ReactNode }): JSX.Element {
+  const router = useRouter()
+  const pathname = usePathname()
+  const initialLanguage = getLanguageFromPath(pathname) || DEFAULT_LANGUAGE
+  const [currentLanguage, setCurrentLanguage] = useState(initialLanguage)
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [, setHasManuallyChangedLanguage] = useState(false)
+
+  const switchLanguage = (languageCode: string, isScripted: boolean = false): void => {
+    if (!isInitialized) {
+      return
+    }
+    if (languageCode === currentLanguage) {
+      return
+    }
+
+    const cleanPath = getPathWithoutLanguage(pathname)
+    const targetPath = languageCode === DEFAULT_LANGUAGE ? cleanPath || '/' : `/${languageCode}${cleanPath}`
+
+    if (!isScripted) {
+      setHasManuallyChangedLanguage(true)
+      // Set cookie when user manually changes language
+      document.cookie = `locale=${languageCode}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`
+    }
+
+    const weglotInstance = window.Weglot
+    if (weglotInstance?.initialized) {
+      weglotInstance.switchTo(languageCode)
+    }
+
+    setCurrentLanguage(languageCode)
+    if (pathname !== targetPath) {
+      router.push(targetPath)
+    }
+  }
+
+  // const getBrowserLanguage = (): string => {
+  // 	if (typeof window === 'undefined') {
+  // 		return DEFAULT_LANGUAGE;
+  // 	}
+
+  // 	// Get browser language and extract the language code (e.g., 'fr' from 'fr-FR')
+  // 	const browserLang = navigator.language.toLowerCase().split('-')[0];
+
+  // 	// Check if browser language is supported
+  // 	const supportedLang = SUPPORTED_LANGUAGES.find(lang => lang.code === browserLang);
+  // 	return supportedLang ? browserLang : DEFAULT_LANGUAGE;
+  // };
+
+  const setLanguageFromPath = useCallback(() => {
+    const pathLanguage = getLanguageFromPath(pathname)
+    const weglotInstance = window.Weglot
+
+    if (!weglotInstance) {
+      return
+    }
+
+    // If path has a language, use it
+    if (pathLanguage) {
+      weglotInstance.switchTo(pathLanguage)
+      setCurrentLanguage(pathLanguage)
+    } else {
+      // If no language in path, the middleware should have handled it
+      // Just sync with the default language
+      weglotInstance.switchTo(DEFAULT_LANGUAGE)
+      setCurrentLanguage(DEFAULT_LANGUAGE)
+    }
+  }, [pathname])
+
+  const weglotConfigIsInitialized = typeof window !== 'undefined' && window.Weglot?.initialized
+  const handleWeglotLanguageChange = useCallback(
+    (newLang: string, prevLang: string): void => {
+      console.warn('[Weglot] Language changed from', prevLang, 'to', newLang)
+      setCurrentLanguage(newLang)
+
+      if (newLang !== prevLang && newLang) {
+        if (!prevLang || prevLang !== DEFAULT_LANGUAGE) {
+          router.replace(`/${newLang}${getPathWithoutLanguage(pathname)}`)
+        }
+      } else {
+        console.warn('ignoring')
+      }
+    },
+    [pathname, router]
+  )
+  const handleWeglotInitialized = useCallback((): void => {
+    setIsInitialized(true)
+    setLanguageFromPath()
+  }, [setLanguageFromPath])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    let retryCount = 0
+    let retryTimeout: NodeJS.Timeout | undefined
+    const maxRetries = 10
+    const initialDelay = 100
+
+    const initializeWeglot = (): void => {
+      const weglot = window.Weglot
+      if (!weglot) {
+        if (retryCount < maxRetries) {
+          retryCount++
+          const delay = initialDelay * Math.pow(2, retryCount - 1)
+          console.log(
+            `[LanguageContext] Weglot not found, retrying in ${delay}ms (attempt ${retryCount}/${maxRetries})`
+          )
+          retryTimeout = setTimeout(initializeWeglot, delay)
+        } else {
+          console.warn('[LanguageContext] Weglot not found after maximum retries')
+        }
+        return
+      }
+
+      console.log('[LanguageContext] Weglot found, attaching event handlers')
+      weglot.on('languageChanged', handleWeglotLanguageChange)
+      weglot.on('initialized', handleWeglotInitialized)
+    }
+
+    initializeWeglot()
+
+    return () => {
+      if (retryTimeout) {
+        clearTimeout(retryTimeout)
+      }
+      const weglot = window.Weglot
+      if (weglot?.initialized) {
+        weglot.off('languageChanged', handleWeglotLanguageChange)
+        weglot.off('initialized', handleWeglotInitialized)
+      }
+    }
+  }, [weglotConfigIsInitialized, handleWeglotLanguageChange, handleWeglotInitialized])
+
+  return (
+    <LanguageContext.Provider
+      value={{
+        currentLanguage,
+        supportedLanguages: SUPPORTED_LANGUAGES,
+        switchLanguage,
+      }}
+    >
+      {children}
+    </LanguageContext.Provider>
+  )
 }
 
 export function useLanguage(): TLanguageContext {
-	const context = useContext(LanguageContext)
-	if (context === undefined) {
-		throw new Error('useLanguage must be used within a LanguageProvider')
-	}
-	return context
+  const context = useContext(LanguageContext)
+  if (context === undefined) {
+    throw new Error('useLanguage must be used within a LanguageProvider')
+  }
+  return context
 }
diff --git a/app/[lang]/_hooks/useDebounce.ts b/app/[lang]/_hooks/useDebounce.ts
index bc48a6c..a63daec 100644
--- a/app/[lang]/_hooks/useDebounce.ts
+++ b/app/[lang]/_hooks/useDebounce.ts
@@ -6,24 +6,24 @@
  * @param {number} delay - The delay time in milliseconds (default: 500ms)
  * @returns {T} The debounced value that updates only after the delay
  ********************************************************************************************/
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
 export function useDebounce<T>(value: T, delay = 500): T {
-	const [debouncedValue, setDebouncedValue] = useState<T>(value)
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
 
-	/********************************************************************************************
-	 * Sets up a timer that updates the debounced value after the specified delay
-	 * Clears the previous timer if the value changes before the delay completes.
-	 ********************************************************************************************/
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setDebouncedValue(value)
-		}, delay)
+  /********************************************************************************************
+   * Sets up a timer that updates the debounced value after the specified delay
+   * Clears the previous timer if the value changes before the delay completes.
+   ********************************************************************************************/
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
 
-		return () => {
-			clearTimeout(timer)
-		}
-	}, [value, delay])
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
 
-	return debouncedValue
+  return debouncedValue
 }
diff --git a/app/[lang]/_hooks/useFetchNewsroom.tsx b/app/[lang]/_hooks/useFetchNewsroom.tsx
index 7abf148..b7c5268 100644
--- a/app/[lang]/_hooks/useFetchNewsroom.tsx
+++ b/app/[lang]/_hooks/useFetchNewsroom.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
-import {useCachedNews} from '@/app/[lang]/_contexts/CachedNewsContext'
+import { useCachedNews } from '@/app/[lang]/_contexts/CachedNewsContext'
 
-import type {TNewsroomListResponse, TNewsroomPost, TPagination} from '@/app/[lang]/_components/strapi/types'
+import type { TNewsroomListResponse, TNewsroomPost, TPagination } from '@/app/[lang]/_components/strapi/types'
 
 /********************************************************************************************
  * Custom hook for fetching blog posts from Strapi
@@ -15,131 +15,131 @@ import type {TNewsroomListResponse, TNewsroomPost, TPagination} from '@/app/[lan
  * @returns {Error | null} error - Error object if fetch fails
  ********************************************************************************************/
 export function useFetchNewsroom({
-	page = 1,
-	pageSize = 12,
-	sort = 'asc',
-	slug,
-	category,
-	tag,
-	populateContent = false,
-	cachePosts = false,
-	skip = false
+  page = 1,
+  pageSize = 12,
+  sort = 'asc',
+  slug,
+  category,
+  tag,
+  populateContent = false,
+  cachePosts = false,
+  skip = false,
 }: {
-	page: number
-	pageSize: number
-	sort: 'asc' | 'desc'
-	slug?: string
-	category?: string
-	tag?: string
-	populateContent?: boolean
-	cachePosts?: boolean
-	skip?: boolean
+  page: number
+  pageSize: number
+  sort: 'asc' | 'desc'
+  slug?: string
+  category?: string
+  tag?: string
+  populateContent?: boolean
+  cachePosts?: boolean
+  skip?: boolean
 }): {
-	posts: TNewsroomPost[]
-	pagination: TPagination | undefined
-	isLoading: boolean
-	error: Error | null
+  posts: TNewsroomPost[]
+  pagination: TPagination | undefined
+  isLoading: boolean
+  error: Error | null
 } {
-	const [posts, setPosts] = useState<TNewsroomPost[]>([])
-	const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
-	const [isLoading, setIsLoading] = useState<boolean>(true)
-	const [error, setError] = useState<Error | null>(null)
-	const {setCachedResponse, setCachedParams, cachedResponse, cachedParams} = useCachedNews()
+  const [posts, setPosts] = useState<TNewsroomPost[]>([])
+  const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+  const { setCachedResponse, setCachedParams, cachedResponse, cachedParams } = useCachedNews()
 
-	useEffect(() => {
-		if (skip) {
-			setIsLoading(false)
-			return
-		}
+  useEffect(() => {
+    if (skip) {
+      setIsLoading(false)
+      return
+    }
 
-		if (
-			cachedResponse.data.length > 0 &&
-			cachedParams.page === page &&
-			cachedParams.pageSize === pageSize &&
-			cachedParams.sort === sort &&
-			cachedParams.slug === slug &&
-			cachedParams.populateContent === populateContent &&
-			cachedParams.category === category &&
-			cachedParams.tag === tag
-		) {
-			setPosts(cachedResponse.data)
-			setPagination(cachedResponse.meta.pagination)
-			setIsLoading(false)
-			return
-		}
+    if (
+      cachedResponse.data.length > 0 &&
+      cachedParams.page === page &&
+      cachedParams.pageSize === pageSize &&
+      cachedParams.sort === sort &&
+      cachedParams.slug === slug &&
+      cachedParams.populateContent === populateContent &&
+      cachedParams.category === category &&
+      cachedParams.tag === tag
+    ) {
+      setPosts(cachedResponse.data)
+      setPagination(cachedResponse.meta.pagination)
+      setIsLoading(false)
+      return
+    }
 
-		/********************************************************************************************
-		 * Fetches blog posts from Strapi API
-		 * Includes error handling and state updates
-		 ********************************************************************************************/
-		async function fetchPosts(): Promise<void> {
-			try {
-				// Fetch posts with featured image population
-				const res = await fetch(
-					`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?populate[0]=featuredImg&fields[0]=slug&fields[1]=postSummary&fields[2]=title&fields[3]=category&fields[4]=tags&fields[5]=publishedAt&fields[7]=publishedOn&fields[14]=author&fields[8]=externalURL&sort[0]=publishedOn:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${populateContent ? '&fields[6]=content' : ''}${slug ? `&filters[slug][$eq]=${slug}` : ''}${category ? `&filters[category][$contains]=${category.replace(/ /g, '_')}` : ''}${tag ? `&filters[tags][$contains]=${tag.replace(/ /g, '_')}` : ''}`,
-					{
-						headers: {
-							Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-						}
-					}
-				)
+    /********************************************************************************************
+     * Fetches blog posts from Strapi API
+     * Includes error handling and state updates
+     ********************************************************************************************/
+    async function fetchPosts(): Promise<void> {
+      try {
+        // Fetch posts with featured image population
+        const res = await fetch(
+          `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/newsrooms?populate[0]=featuredImg&fields[0]=slug&fields[1]=postSummary&fields[2]=title&fields[3]=category&fields[4]=tags&fields[5]=publishedAt&fields[7]=publishedOn&fields[14]=author&fields[8]=externalURL&sort[0]=publishedOn:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${populateContent ? '&fields[6]=content' : ''}${slug ? `&filters[slug][$eq]=${slug}` : ''}${category ? `&filters[category][$contains]=${category.replace(/ /g, '_')}` : ''}${tag ? `&filters[tags][$contains]=${tag.replace(/ /g, '_')}` : ''}`,
+          {
+            headers: {
+              Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+            },
+          }
+        )
 
-				if (!res.ok) {
-					throw new Error(`Failed to fetch posts: ${res.status}`)
-				}
+        if (!res.ok) {
+          throw new Error(`Failed to fetch posts: ${res.status}`)
+        }
 
-				const data: TNewsroomListResponse = await res.json()
-				setPosts(data.data)
-				setPagination(data.meta.pagination)
-				if (cachePosts) {
-					setCachedResponse(data)
-					setCachedParams({
-						page,
-						pageSize,
-						sort,
-						slug,
-						populateContent,
-						category,
-						tag
-					})
-				}
-			} catch (err) {
-				setError(err as Error)
-				console.error('Error fetching blog posts:', err)
-			} finally {
-				setIsLoading(false)
-			}
-		}
+        const data: TNewsroomListResponse = await res.json()
+        setPosts(data.data)
+        setPagination(data.meta.pagination)
+        if (cachePosts) {
+          setCachedResponse(data)
+          setCachedParams({
+            page,
+            pageSize,
+            sort,
+            slug,
+            populateContent,
+            category,
+            tag,
+          })
+        }
+      } catch (err) {
+        setError(err as Error)
+        console.error('Error fetching blog posts:', err)
+      } finally {
+        setIsLoading(false)
+      }
+    }
 
-		fetchPosts()
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		cachePosts,
-		cachedParams.page,
-		cachedParams.pageSize,
-		cachedParams.populateContent,
-		cachedParams.slug,
-		cachedParams.sort,
-		cachedParams.category,
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		JSON.stringify(cachedResponse.data),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		JSON.stringify(cachedResponse.meta.pagination),
-		cachedResponse.meta.pagination.page,
-		cachedResponse.meta.pagination.pageCount,
-		cachedResponse.meta.pagination.pageSize,
-		cachedResponse.meta.pagination.total,
-		page,
-		pageSize,
-		populateContent,
-		setCachedParams,
-		setCachedResponse,
-		skip,
-		slug,
-		sort,
-		category,
-		tag
-	])
+    fetchPosts()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    cachePosts,
+    cachedParams.page,
+    cachedParams.pageSize,
+    cachedParams.populateContent,
+    cachedParams.slug,
+    cachedParams.sort,
+    cachedParams.category,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(cachedResponse.data),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(cachedResponse.meta.pagination),
+    cachedResponse.meta.pagination.page,
+    cachedResponse.meta.pagination.pageCount,
+    cachedResponse.meta.pagination.pageSize,
+    cachedResponse.meta.pagination.total,
+    page,
+    pageSize,
+    populateContent,
+    setCachedParams,
+    setCachedResponse,
+    skip,
+    slug,
+    sort,
+    category,
+    tag,
+  ])
 
-	return {posts, isLoading, pagination, error}
+  return { posts, isLoading, pagination, error }
 }
diff --git a/app/[lang]/_hooks/useFetchPosts.tsx b/app/[lang]/_hooks/useFetchPosts.tsx
index 8a739fb..9015d96 100644
--- a/app/[lang]/_hooks/useFetchPosts.tsx
+++ b/app/[lang]/_hooks/useFetchPosts.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
-import {useCachedPosts} from '@/app/[lang]/_contexts/CachedPostsContext'
+import { useCachedPosts } from '@/app/[lang]/_contexts/CachedPostsContext'
 
-import type {TBlogListResponse, TBlogPost, TPagination} from '@/app/[lang]/_components/strapi/types'
+import type { TBlogListResponse, TBlogPost, TPagination } from '@/app/[lang]/_components/strapi/types'
 
 /********************************************************************************************
  * Custom hook for fetching blog posts from Strapi
@@ -29,138 +29,138 @@ import type {TBlogListResponse, TBlogPost, TPagination} from '@/app/[lang]/_comp
  * @returns {Error | null} error - Error object if fetch fails
  ********************************************************************************************/
 export function useFetchPosts({
-	page = 1,
-	pageSize = 12,
-	sort = 'asc',
-	slug,
-	type,
-	tag,
-	populateContent = false,
-	cachePosts = false,
-	skip = false
+  page = 1,
+  pageSize = 12,
+  sort = 'asc',
+  slug,
+  type,
+  tag,
+  populateContent = false,
+  cachePosts = false,
+  skip = false,
 }: {
-	page: number
-	pageSize: number
-	sort: 'asc' | 'desc'
-	slug?: string
-	type?: string
-	tag?: string
-	populateContent?: boolean
-	cachePosts?: boolean
-	skip?: boolean
+  page: number
+  pageSize: number
+  sort: 'asc' | 'desc'
+  slug?: string
+  type?: string
+  tag?: string
+  populateContent?: boolean
+  cachePosts?: boolean
+  skip?: boolean
 }): {
-	posts: TBlogPost[]
-	pagination: TPagination | undefined
-	isLoading: boolean
-	error: Error | null
+  posts: TBlogPost[]
+  pagination: TPagination | undefined
+  isLoading: boolean
+  error: Error | null
 } {
-	const [posts, setPosts] = useState<TBlogPost[]>([])
-	const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
-	const [isLoading, setIsLoading] = useState<boolean>(true)
-	const [error, setError] = useState<Error | null>(null)
-	const {setCachedResponse, setCachedParams, cachedResponse, cachedParams} = useCachedPosts()
+  const [posts, setPosts] = useState<TBlogPost[]>([])
+  const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+  const { setCachedResponse, setCachedParams, cachedResponse, cachedParams } = useCachedPosts()
 
-	useEffect(() => {
-		if (skip) {
-			setIsLoading(false)
-			return
-		}
+  useEffect(() => {
+    if (skip) {
+      setIsLoading(false)
+      return
+    }
 
-		/********************************************************************************************
-		 * Check if we already have cached data for the current query parameters
-		 * If cached data is available and parameters match, use it instead of fetching again
-		 ********************************************************************************************/
-		if (
-			cachedResponse.data.length > 0 &&
-			cachedParams.page === page &&
-			cachedParams.pageSize === pageSize &&
-			cachedParams.sort === sort &&
-			cachedParams.slug === slug &&
-			cachedParams.populateContent === populateContent &&
-			cachedParams.type === type &&
-			cachedParams.tag === tag
-		) {
-			setPosts(cachedResponse.data)
-			setPagination(cachedResponse.meta.pagination)
-			setIsLoading(false)
-			return
-		}
+    /********************************************************************************************
+     * Check if we already have cached data for the current query parameters
+     * If cached data is available and parameters match, use it instead of fetching again
+     ********************************************************************************************/
+    if (
+      cachedResponse.data.length > 0 &&
+      cachedParams.page === page &&
+      cachedParams.pageSize === pageSize &&
+      cachedParams.sort === sort &&
+      cachedParams.slug === slug &&
+      cachedParams.populateContent === populateContent &&
+      cachedParams.type === type &&
+      cachedParams.tag === tag
+    ) {
+      setPosts(cachedResponse.data)
+      setPagination(cachedResponse.meta.pagination)
+      setIsLoading(false)
+      return
+    }
 
-		/********************************************************************************************
-		 * Fetches blog posts from Strapi API
-		 * Constructs the API URL with appropriate filters and parameters
-		 * Updates state with fetched data and caches results if requested
-		 * Handles errors and loading state
-		 ********************************************************************************************/
-		async function fetchPosts(): Promise<void> {
-			try {
-				// Fetch posts with featured image population
-				const res = await fetch(
-					`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?populate[0]=featuredImg&fields[0]=slug&fields[1]=summary&fields[2]=title&fields[3]=type&fields[4]=tags&fields[5]=publishedAt&fields[6]=isFeatured&sort[0]=isFeatured:desc&sort[1]=id:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${populateContent ? '&fields[7]=content' : ''}${slug ? `&filters[slug][$eq]=${slug}` : ''}${type ? `&filters[type][$contains]=${type.replace(/ /g, '_')}` : ''}${tag ? `&filters[tags][$contains]=${tag.replace(/ /g, '_')}` : ''}`,
-					{
-						headers: {
-							Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-						}
-					}
-				)
+    /********************************************************************************************
+     * Fetches blog posts from Strapi API
+     * Constructs the API URL with appropriate filters and parameters
+     * Updates state with fetched data and caches results if requested
+     * Handles errors and loading state
+     ********************************************************************************************/
+    async function fetchPosts(): Promise<void> {
+      try {
+        // Fetch posts with featured image population
+        const res = await fetch(
+          `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?populate[0]=featuredImg&fields[0]=slug&fields[1]=summary&fields[2]=title&fields[3]=type&fields[4]=tags&fields[5]=publishedAt&fields[6]=isFeatured&sort[0]=isFeatured:desc&sort[1]=id:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${populateContent ? '&fields[7]=content' : ''}${slug ? `&filters[slug][$eq]=${slug}` : ''}${type ? `&filters[type][$contains]=${type.replace(/ /g, '_')}` : ''}${tag ? `&filters[tags][$contains]=${tag.replace(/ /g, '_')}` : ''}`,
+          {
+            headers: {
+              Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+            },
+          }
+        )
 
-				if (!res.ok) {
-					throw new Error(`Failed to fetch posts: ${res.status}`)
-				}
+        if (!res.ok) {
+          throw new Error(`Failed to fetch posts: ${res.status}`)
+        }
 
-				const data: TBlogListResponse = await res.json()
+        const data: TBlogListResponse = await res.json()
 
-				setPosts(data.data)
-				setPagination(data.meta.pagination)
-				if (cachePosts) {
-					setCachedResponse(data)
-					setCachedParams({
-						page,
-						pageSize,
-						sort,
-						slug,
-						populateContent,
-						type,
-						tag
-					})
-				}
-			} catch (err) {
-				setError(err as Error)
-				console.error('Error fetching blog posts:', err)
-			} finally {
-				setIsLoading(false)
-			}
-		}
+        setPosts(data.data)
+        setPagination(data.meta.pagination)
+        if (cachePosts) {
+          setCachedResponse(data)
+          setCachedParams({
+            page,
+            pageSize,
+            sort,
+            slug,
+            populateContent,
+            type,
+            tag,
+          })
+        }
+      } catch (err) {
+        setError(err as Error)
+        console.error('Error fetching blog posts:', err)
+      } finally {
+        setIsLoading(false)
+      }
+    }
 
-		fetchPosts()
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		cachePosts,
-		cachedParams.page,
-		cachedParams.pageSize,
-		cachedParams.populateContent,
-		cachedParams.slug,
-		cachedParams.sort,
-		cachedParams.type,
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		JSON.stringify(cachedResponse.data),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		JSON.stringify(cachedResponse.meta.pagination),
-		cachedResponse.meta.pagination.page,
-		cachedResponse.meta.pagination.pageCount,
-		cachedResponse.meta.pagination.pageSize,
-		cachedResponse.meta.pagination.total,
-		page,
-		pageSize,
-		populateContent,
-		setCachedParams,
-		setCachedResponse,
-		skip,
-		slug,
-		sort,
-		type,
-		tag
-	])
+    fetchPosts()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    cachePosts,
+    cachedParams.page,
+    cachedParams.pageSize,
+    cachedParams.populateContent,
+    cachedParams.slug,
+    cachedParams.sort,
+    cachedParams.type,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(cachedResponse.data),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(cachedResponse.meta.pagination),
+    cachedResponse.meta.pagination.page,
+    cachedResponse.meta.pagination.pageCount,
+    cachedResponse.meta.pagination.pageSize,
+    cachedResponse.meta.pagination.total,
+    page,
+    pageSize,
+    populateContent,
+    setCachedParams,
+    setCachedResponse,
+    skip,
+    slug,
+    sort,
+    type,
+    tag,
+  ])
 
-	return {posts, isLoading, pagination, error}
+  return { posts, isLoading, pagination, error }
 }
diff --git a/app/[lang]/_hooks/useFetchSupportArticles.ts b/app/[lang]/_hooks/useFetchSupportArticles.ts
index bc3461f..dd2751b 100644
--- a/app/[lang]/_hooks/useFetchSupportArticles.ts
+++ b/app/[lang]/_hooks/useFetchSupportArticles.ts
@@ -1,10 +1,10 @@
 'use client'
 
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
-import {useCachedArticles} from '@/app/[lang]/_contexts/CachedArticlesContext'
+import { useCachedArticles } from '@/app/[lang]/_contexts/CachedArticlesContext'
 
-import type {TArticleListResponse, TPagination, TSupportArticle} from '@/app/[lang]/_components/strapi/types'
+import type { TArticleListResponse, TPagination, TSupportArticle } from '@/app/[lang]/_components/strapi/types'
 
 /********************************************************************************************
  * Custom hook for fetching support articles from Strapi
@@ -27,106 +27,106 @@ import type {TArticleListResponse, TPagination, TSupportArticle} from '@/app/[la
  * @returns {Error | null} error - Error object if fetch fails
  ********************************************************************************************/
 export function useFetchSupportArticles({
-	page = 1,
-	pageSize = 12,
-	sort = 'asc',
-	slug,
-	populateContent = false,
-	cacheArticles = false,
-	skip = false
+  page = 1,
+  pageSize = 12,
+  sort = 'asc',
+  slug,
+  populateContent = false,
+  cacheArticles = false,
+  skip = false,
 }: {
-	page: number
-	pageSize: number
-	sort: 'asc' | 'desc'
-	slug?: string
-	populateContent?: boolean
-	cacheArticles?: boolean
-	skip?: boolean
+  page: number
+  pageSize: number
+  sort: 'asc' | 'desc'
+  slug?: string
+  populateContent?: boolean
+  cacheArticles?: boolean
+  skip?: boolean
 }): {
-	articles: TSupportArticle[]
-	pagination: TPagination | undefined
-	isLoading: boolean
-	error: Error | null
+  articles: TSupportArticle[]
+  pagination: TPagination | undefined
+  isLoading: boolean
+  error: Error | null
 } {
-	const [articles, setArticles] = useState<TSupportArticle[]>([])
-	const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
-	const [isLoading, setIsLoading] = useState<boolean>(true)
-	const [error, setError] = useState<Error | null>(null)
-	const {setCachedResponse, setCachedParams, cachedResponse, cachedParams} = useCachedArticles()
+  const [articles, setArticles] = useState<TSupportArticle[]>([])
+  const [pagination, setPagination] = useState<TPagination | undefined>(undefined)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+  const { setCachedResponse, setCachedParams, cachedResponse, cachedParams } = useCachedArticles()
 
-	useEffect(() => {
-		if (skip) {
-			setIsLoading(false)
-			return
-		}
+  useEffect(() => {
+    if (skip) {
+      setIsLoading(false)
+      return
+    }
 
-		if (
-			cachedResponse.data.length > 0 &&
-			cachedParams.page === page &&
-			cachedParams.pageSize === pageSize &&
-			cachedParams.sort === sort &&
-			cachedParams.slug === slug &&
-			cachedParams.populateContent === populateContent
-		) {
-			setArticles(cachedResponse.data)
-			setPagination(cachedResponse.meta.pagination)
-			setIsLoading(false)
-			return
-		}
+    if (
+      cachedResponse.data.length > 0 &&
+      cachedParams.page === page &&
+      cachedParams.pageSize === pageSize &&
+      cachedParams.sort === sort &&
+      cachedParams.slug === slug &&
+      cachedParams.populateContent === populateContent
+    ) {
+      setArticles(cachedResponse.data)
+      setPagination(cachedResponse.meta.pagination)
+      setIsLoading(false)
+      return
+    }
 
-		async function fetchArticles(): Promise<void> {
-			try {
-				const res = await fetch(
-					`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/support-articles?populate[0]=featuredImg&fields[0]=slug&fields[1]=summary&fields[2]=title&fields[3]=publishedAt&sort[0]=publishedAt:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${populateContent ? '&fields[4]=content' : ''}${slug ? `&filters[slug][$eq]=${slug}` : ''}`,
-					{
-						headers: {
-							Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-						}
-					}
-				)
+    async function fetchArticles(): Promise<void> {
+      try {
+        const res = await fetch(
+          `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/support-articles?populate[0]=featuredImg&fields[0]=slug&fields[1]=summary&fields[2]=title&fields[3]=publishedAt&sort[0]=publishedAt:${sort}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&pagination[withCount]=true${populateContent ? '&fields[4]=content' : ''}${slug ? `&filters[slug][$eq]=${slug}` : ''}`,
+          {
+            headers: {
+              Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+            },
+          }
+        )
 
-				if (!res.ok) {
-					throw new Error(`Failed to fetch support articles: ${res.status}`)
-				}
+        if (!res.ok) {
+          throw new Error(`Failed to fetch support articles: ${res.status}`)
+        }
 
-				const data: TArticleListResponse = await res.json()
-				setArticles(data.data)
-				setPagination(data.meta.pagination)
-				if (cacheArticles) {
-					setCachedResponse(data)
-					setCachedParams({page, pageSize, sort, slug, populateContent})
-				}
-			} catch (err) {
-				setError(err as Error)
-				console.error('Error fetching support articles:', err)
-			} finally {
-				setIsLoading(false)
-			}
-		}
+        const data: TArticleListResponse = await res.json()
+        setArticles(data.data)
+        setPagination(data.meta.pagination)
+        if (cacheArticles) {
+          setCachedResponse(data)
+          setCachedParams({ page, pageSize, sort, slug, populateContent })
+        }
+      } catch (err) {
+        setError(err as Error)
+        console.error('Error fetching support articles:', err)
+      } finally {
+        setIsLoading(false)
+      }
+    }
 
-		fetchArticles()
-	}, [
-		cacheArticles,
-		cachedParams.page,
-		cachedParams.pageSize,
-		cachedParams.populateContent,
-		cachedParams.slug,
-		cachedParams.sort,
-		cachedResponse.data,
-		cachedResponse.meta.pagination,
-		cachedResponse.meta.pagination.page,
-		cachedResponse.meta.pagination.pageCount,
-		cachedResponse.meta.pagination.pageSize,
-		cachedResponse.meta.pagination.total,
-		page,
-		pageSize,
-		populateContent,
-		setCachedParams,
-		setCachedResponse,
-		skip,
-		slug,
-		sort
-	])
+    fetchArticles()
+  }, [
+    cacheArticles,
+    cachedParams.page,
+    cachedParams.pageSize,
+    cachedParams.populateContent,
+    cachedParams.slug,
+    cachedParams.sort,
+    cachedResponse.data,
+    cachedResponse.meta.pagination,
+    cachedResponse.meta.pagination.page,
+    cachedResponse.meta.pagination.pageCount,
+    cachedResponse.meta.pagination.pageSize,
+    cachedResponse.meta.pagination.total,
+    page,
+    pageSize,
+    populateContent,
+    setCachedParams,
+    setCachedResponse,
+    skip,
+    slug,
+    sort,
+  ])
 
-	return {articles, isLoading, pagination, error}
+  return { articles, isLoading, pagination, error }
 }
diff --git a/app/[lang]/_hooks/useIsMobile.ts b/app/[lang]/_hooks/useIsMobile.ts
index 511fd11..2f873ec 100644
--- a/app/[lang]/_hooks/useIsMobile.ts
+++ b/app/[lang]/_hooks/useIsMobile.ts
@@ -1,13 +1,13 @@
-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 
 export function useIsMobile(): boolean {
-	const [isMobile, setIsMobile] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
 
-	useEffect(() => {
-		if (typeof navigator !== 'undefined') {
-			setIsMobile(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini|Mobile/i.test(navigator.userAgent))
-		}
-	}, [])
+  useEffect(() => {
+    if (typeof navigator !== 'undefined') {
+      setIsMobile(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini|Mobile/i.test(navigator.userAgent))
+    }
+  }, [])
 
-	return isMobile
+  return isMobile
 }
diff --git a/app/[lang]/_icons/IconActivityRings.tsx b/app/[lang]/_icons/IconActivityRings.tsx
index d6031c9..43f547b 100644
--- a/app/[lang]/_icons/IconActivityRings.tsx
+++ b/app/[lang]/_icons/IconActivityRings.tsx
@@ -1,54 +1,44 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconActivityRings(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'18'}
-			height={'18'}
-			viewBox={'0 0 18 18'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_847_11213)'}>
-				<path
-					d={
-						'M6.75 1.0605C7.4655 0.858 8.22 0.75 9 0.75C13.5562 0.75 17.25 4.44375 17.25 9C17.25 13.5562 13.5562 17.25 9 17.25C4.44375 17.25 0.75 13.5562 0.75 9C0.75 8.22 0.85875 7.4655 1.0605 6.75'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.5'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={
-						'M7.5 3.96744C7.9755 3.82569 8.47875 3.74994 9 3.74994C11.8995 3.74994 14.25 6.10044 14.25 8.99994C14.25 11.8994 11.8995 14.2499 9 14.2499C6.1005 14.2499 3.75 11.8994 3.75 8.99994C3.75 8.47869 3.8265 7.97544 3.9675 7.49994'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.5'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M11.25 8.99994C11.25 10.2427 10.2427 11.2499 9 11.2499C7.75725 11.2499 6.75 10.2427 6.75 8.99994C6.75 7.75719 7.75725 6.74994 9 6.74994C10.2427 6.74994 11.25 7.75719 11.25 8.99994Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.5'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_847_11213'}>
-					<rect
-						width={'18'}
-						height={'18'}
-						fill={'white'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'18'} height={'18'} viewBox={'0 0 18 18'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_847_11213)'}>
+        <path
+          d={
+            'M6.75 1.0605C7.4655 0.858 8.22 0.75 9 0.75C13.5562 0.75 17.25 4.44375 17.25 9C17.25 13.5562 13.5562 17.25 9 17.25C4.44375 17.25 0.75 13.5562 0.75 9C0.75 8.22 0.85875 7.4655 1.0605 6.75'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.5'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={
+            'M7.5 3.96744C7.9755 3.82569 8.47875 3.74994 9 3.74994C11.8995 3.74994 14.25 6.10044 14.25 8.99994C14.25 11.8994 11.8995 14.2499 9 14.2499C6.1005 14.2499 3.75 11.8994 3.75 8.99994C3.75 8.47869 3.8265 7.97544 3.9675 7.49994'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.5'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M11.25 8.99994C11.25 10.2427 10.2427 11.2499 9 11.2499C7.75725 11.2499 6.75 10.2427 6.75 8.99994C6.75 7.75719 7.75725 6.74994 9 6.74994C10.2427 6.74994 11.25 7.75719 11.25 8.99994Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.5'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_847_11213'}>
+          <rect width={'18'} height={'18'} fill={'white'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconArrow.tsx b/app/[lang]/_icons/IconArrow.tsx
index a5700d4..8a2877f 100644
--- a/app/[lang]/_icons/IconArrow.tsx
+++ b/app/[lang]/_icons/IconArrow.tsx
@@ -1,28 +1,22 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconArrow(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M8 4H20V16'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M20 4L4 20'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M8 4H20V16'}
+        stroke={'currentColor'}
+        strokeWidth={'3'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M20 4L4 20'}
+        stroke={'currentColor'}
+        strokeWidth={'3'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconBack.tsx b/app/[lang]/_icons/IconBack.tsx
index d221898..e49ddf6 100644
--- a/app/[lang]/_icons/IconBack.tsx
+++ b/app/[lang]/_icons/IconBack.tsx
@@ -1,21 +1,15 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconBack(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'9'}
-			height={'14'}
-			viewBox={'0 0 9 14'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M7 2L2 7L7 12'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'9'} height={'14'} viewBox={'0 0 9 14'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M7 2L2 7L7 12'}
+        stroke={'currentColor'}
+        strokeWidth={'3'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconBlog.tsx b/app/[lang]/_icons/IconBlog.tsx
index 8033ec7..ff02694 100644
--- a/app/[lang]/_icons/IconBlog.tsx
+++ b/app/[lang]/_icons/IconBlog.tsx
@@ -1,36 +1,30 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconBlog(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'22'}
-			viewBox={'0 0 24 22'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g id={'book-open'}>
-				<path
-					id={'Stroke'}
-					d={'M12.0005 3V21'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_2'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M20.641 1.03276L12 2.99976L3.36 1.03276C2.131 0.809755 1 1.75376 1 3.00176V17.3298C1 18.2978 1.692 19.1258 2.644 19.2988L12 20.9998L21.357 19.2988C22.309 19.1258 23 18.2978 23 17.3298V3.00176C23 1.75376 21.87 0.809755 20.641 1.03276Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'22'} viewBox={'0 0 24 22'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g id={'book-open'}>
+        <path
+          id={'Stroke'}
+          d={'M12.0005 3V21'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_2'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M20.641 1.03276L12 2.99976L3.36 1.03276C2.131 0.809755 1 1.75376 1 3.00176V17.3298C1 18.2978 1.692 19.1258 2.644 19.2988L12 20.9998L21.357 19.2988C22.309 19.1258 23 18.2978 23 17.3298V3.00176C23 1.75376 21.87 0.809755 20.641 1.03276Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconBorrow.tsx b/app/[lang]/_icons/IconBorrow.tsx
index 3a9753b..6cf01d4 100644
--- a/app/[lang]/_icons/IconBorrow.tsx
+++ b/app/[lang]/_icons/IconBorrow.tsx
@@ -1,64 +1,54 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconBorrow(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_730_4840)'}>
-				<path
-					d={
-						'M14 7.99951H11C9.896 7.99951 9 8.89551 9 9.99951C9 11.1035 9.896 11.9995 11 11.9995H13C14.104 11.9995 15 12.8955 15 13.9995C15 15.1035 14.104 15.9995 13 15.9995H9.5'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M12 7.99951V5.99951'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M12 17.9995V15.9995'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M1 3.99951V7.99951H5'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={
-						'M4.22151 19.778C6.21251 21.768 8.96251 23 11.9995 23C18.0755 23 22.9995 18.075 22.9995 12C22.9995 5.924 18.0755 1 11.9995 1C8.13851 1 4.74151 2.99 2.77951 6C2.37151 6.625 2.02551 7.295 1.74951 8'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_730_4840'}>
-					<rect
-						width={'24'}
-						height={'24'}
-						fill={'white'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_730_4840)'}>
+        <path
+          d={
+            'M14 7.99951H11C9.896 7.99951 9 8.89551 9 9.99951C9 11.1035 9.896 11.9995 11 11.9995H13C14.104 11.9995 15 12.8955 15 13.9995C15 15.1035 14.104 15.9995 13 15.9995H9.5'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M12 7.99951V5.99951'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M12 17.9995V15.9995'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M1 3.99951V7.99951H5'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={
+            'M4.22151 19.778C6.21251 21.768 8.96251 23 11.9995 23C18.0755 23 22.9995 18.075 22.9995 12C22.9995 5.924 18.0755 1 11.9995 1C8.13851 1 4.74151 2.99 2.77951 6C2.37151 6.625 2.02551 7.295 1.74951 8'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_730_4840'}>
+          <rect width={'24'} height={'24'} fill={'white'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconBulb.tsx b/app/[lang]/_icons/IconBulb.tsx
index 376dedb..b069d9c 100644
--- a/app/[lang]/_icons/IconBulb.tsx
+++ b/app/[lang]/_icons/IconBulb.tsx
@@ -1,34 +1,28 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconBulb(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M13.4601 15.8332C13.7226 14.2565 14.386 12.7657 15.3535 11.4665C16.1785 10.359 16.6668 8.98734 16.6668 7.49984C16.6668 3.56734 13.2618 0.42984 9.23846 0.875673C6.30763 1.19984 3.86929 3.51817 3.41596 6.43151C3.12679 8.29817 3.61346 10.0465 4.60096 11.4057C5.56846 12.7357 6.25929 14.2382 6.53346 15.8332'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M6.53394 15.8331C6.61894 16.3256 6.66644 16.8256 6.66644 17.334V17.4998C6.66644 18.4198 7.4131 19.1665 8.3331 19.1665H11.6664C12.5873 19.1665 13.3331 18.4198 13.3331 17.4998V17.3306C13.3331 16.8248 13.3789 16.3248 13.4606 15.8331H6.53394Z'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M13.4601 15.8332C13.7226 14.2565 14.386 12.7657 15.3535 11.4665C16.1785 10.359 16.6668 8.98734 16.6668 7.49984C16.6668 3.56734 13.2618 0.42984 9.23846 0.875673C6.30763 1.19984 3.86929 3.51817 3.41596 6.43151C3.12679 8.29817 3.61346 10.0465 4.60096 11.4057C5.56846 12.7357 6.25929 14.2382 6.53346 15.8332'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M6.53394 15.8331C6.61894 16.3256 6.66644 16.8256 6.66644 17.334V17.4998C6.66644 18.4198 7.4131 19.1665 8.3331 19.1665H11.6664C12.5873 19.1665 13.3331 18.4198 13.3331 17.4998V17.3306C13.3331 16.8248 13.3789 16.3248 13.4606 15.8331H6.53394Z'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconBuySell.tsx b/app/[lang]/_icons/IconBuySell.tsx
index bc173d6..b3c0653 100644
--- a/app/[lang]/_icons/IconBuySell.tsx
+++ b/app/[lang]/_icons/IconBuySell.tsx
@@ -1,59 +1,35 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconBuySell(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_721_6584)'}>
-				<path
-					d={
-						'M14 8H11C9.896 8 9 8.896 9 10C9 11.104 9.896 12 11 12H13C14.104 12 15 12.896 15 14C15 15.104 14.104 16 13 16H10'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M12 8V6'}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M12 18V16'}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M23 12C23 18.075 18.075 23 12 23C5.925 23 1 18.075 1 12C1 5.925 5.925 1 12 1C18.075 1 23 5.925 23 12Z'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_721_6584'}>
-					<rect
-						width={'24'}
-						height={'24'}
-						fill={'white'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_721_6584)'}>
+        <path
+          d={
+            'M14 8H11C9.896 8 9 8.896 9 10C9 11.104 9.896 12 11 12H13C14.104 12 15 12.896 15 14C15 15.104 14.104 16 13 16H10'
+          }
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path d={'M12 8V6'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+        <path d={'M12 18V16'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={'M23 12C23 18.075 18.075 23 12 23C5.925 23 1 18.075 1 12C1 5.925 5.925 1 12 1C18.075 1 23 5.925 23 12Z'}
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_721_6584'}>
+          <rect width={'24'} height={'24'} fill={'white'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconChains.tsx b/app/[lang]/_icons/IconChains.tsx
index f559300..b0c8254 100644
--- a/app/[lang]/_icons/IconChains.tsx
+++ b/app/[lang]/_icons/IconChains.tsx
@@ -1,44 +1,38 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconChains(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g id={'stack'}>
-				<path
-					id={'Stroke'}
-					d={'M1.69678 19.3164L12.0008 23.0004L22.3038 19.3164'}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_2'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M1.69677 7.34651L12.0008 10.9995L22.3038 7.34651C23.2018 7.02751 23.2408 5.78251 22.3648 5.40951L12.0008 0.999512L1.63577 5.40951C0.759767 5.78251 0.798767 7.02751 1.69677 7.34651Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_3'}
-					d={'M1.69678 13.3579L12.0008 16.9999L22.3038 13.3579'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g id={'stack'}>
+        <path
+          id={'Stroke'}
+          d={'M1.69678 19.3164L12.0008 23.0004L22.3038 19.3164'}
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_2'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M1.69677 7.34651L12.0008 10.9995L22.3038 7.34651C23.2018 7.02751 23.2408 5.78251 22.3648 5.40951L12.0008 0.999512L1.63577 5.40951C0.759767 5.78251 0.798767 7.02751 1.69677 7.34651Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_3'}
+          d={'M1.69678 13.3579L12.0008 16.9999L22.3038 13.3579'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconCheck.tsx b/app/[lang]/_icons/IconCheck.tsx
index 72bdf32..36c40bc 100644
--- a/app/[lang]/_icons/IconCheck.tsx
+++ b/app/[lang]/_icons/IconCheck.tsx
@@ -1,21 +1,15 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconCheck(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'10'}
-			height={'8'}
-			viewBox={'0 0 10 8'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M2.0835 3.58329L4.5835 6.08329L8.75016 1.91663'}
-				stroke={'currentColor'}
-				strokeWidth={'2.5'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'10'} height={'8'} viewBox={'0 0 10 8'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M2.0835 3.58329L4.5835 6.08329L8.75016 1.91663'}
+        stroke={'currentColor'}
+        strokeWidth={'2.5'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconCheckCircle.tsx b/app/[lang]/_icons/IconCheckCircle.tsx
index 1b4ddaf..7f16b78 100644
--- a/app/[lang]/_icons/IconCheckCircle.tsx
+++ b/app/[lang]/_icons/IconCheckCircle.tsx
@@ -1,43 +1,33 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconCheckCircle(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_1046_6190)'}>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M19.1666 10C19.1666 15.0625 15.0624 19.1667 9.99992 19.1667C4.93742 19.1667 0.833252 15.0625 0.833252 10C0.833252 4.93754 4.93742 0.833374 9.99992 0.833374C15.0624 0.833374 19.1666 4.93754 19.1666 10Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M7.08325 10.8333L9.58325 12.5L12.9166 7.5'}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_1046_6190'}>
-					<rect
-						width={'20'}
-						height={'20'}
-						fill={'currentColor'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_1046_6190)'}>
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M19.1666 10C19.1666 15.0625 15.0624 19.1667 9.99992 19.1667C4.93742 19.1667 0.833252 15.0625 0.833252 10C0.833252 4.93754 4.93742 0.833374 9.99992 0.833374C15.0624 0.833374 19.1666 4.93754 19.1666 10Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M7.08325 10.8333L9.58325 12.5L12.9166 7.5'}
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_1046_6190'}>
+          <rect width={'20'} height={'20'} fill={'currentColor'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconChevron.tsx b/app/[lang]/_icons/IconChevron.tsx
index 912cc78..3575d91 100644
--- a/app/[lang]/_icons/IconChevron.tsx
+++ b/app/[lang]/_icons/IconChevron.tsx
@@ -1,21 +1,9 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconChevron(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			width={'9'}
-			height={'14'}
-			viewBox={'0 0 9 14'}
-			fill={'none'}
-			{...props}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M7 2L2 7L7 12'}
-				stroke={'white'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg width={'9'} height={'14'} viewBox={'0 0 9 14'} fill={'none'} {...props} xmlns={'http://www.w3.org/2000/svg'}>
+      <path d={'M7 2L2 7L7 12'} stroke={'white'} strokeWidth={'3'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconClassic.tsx b/app/[lang]/_icons/IconClassic.tsx
index 4ceb66c..5c89efb 100644
--- a/app/[lang]/_icons/IconClassic.tsx
+++ b/app/[lang]/_icons/IconClassic.tsx
@@ -1,45 +1,39 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconClassic(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M9.00049 15H7.00049C6.44849 15 6.00049 14.552 6.00049 14V10C6.00049 9.448 6.44849 9 7.00049 9H9.00049C9.55249 9 10.0005 9.448 10.0005 10V14C10.0005 14.552 9.55249 15 9.00049 15Z'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M21.0005 20H3.00049C1.89649 20 1.00049 19.104 1.00049 18V6C1.00049 4.896 1.89649 4 3.00049 4H21.0005C22.1045 4 23.0005 4.896 23.0005 6V18C23.0005 19.104 22.1045 20 21.0005 20Z'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={
-					'M18.0005 10C18.0005 9.448 17.5525 9 17.0005 9H15.0005C14.4485 9 14.0005 9.448 14.0005 10V14C14.0005 14.552 14.4485 15 15.0005 15H17.0005C17.5526 15 18.0005 14.5521 18.0005 14V14V13H17.0005'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M9.00049 15H7.00049C6.44849 15 6.00049 14.552 6.00049 14V10C6.00049 9.448 6.44849 9 7.00049 9H9.00049C9.55249 9 10.0005 9.448 10.0005 10V14C10.0005 14.552 9.55249 15 9.00049 15Z'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M21.0005 20H3.00049C1.89649 20 1.00049 19.104 1.00049 18V6C1.00049 4.896 1.89649 4 3.00049 4H21.0005C22.1045 4 23.0005 4.896 23.0005 6V18C23.0005 19.104 22.1045 20 21.0005 20Z'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={
+          'M18.0005 10C18.0005 9.448 17.5525 9 17.0005 9H15.0005C14.4485 9 14.0005 9.448 14.0005 10V14C14.0005 14.552 14.4485 15 15.0005 15H17.0005C17.5526 15 18.0005 14.5521 18.0005 14V14V13H17.0005'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconClose.tsx b/app/[lang]/_icons/IconClose.tsx
index 4dd2cc8..2167013 100644
--- a/app/[lang]/_icons/IconClose.tsx
+++ b/app/[lang]/_icons/IconClose.tsx
@@ -1,28 +1,22 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export const IconClose = (props: SVGProps<SVGSVGElement>): ReactNode => {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M18.3638 5.63623L5.63585 18.3642'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M18.3638 18.3638L5.63585 5.63585'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M18.3638 5.63623L5.63585 18.3642'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M18.3638 18.3638L5.63585 5.63585'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconDapp.tsx b/app/[lang]/_icons/IconDapp.tsx
index a266ab2..504f01a 100644
--- a/app/[lang]/_icons/IconDapp.tsx
+++ b/app/[lang]/_icons/IconDapp.tsx
@@ -1,36 +1,26 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconDapp(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_30_709)'}>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M21.167 6.5L23 3.75L20.25 1L17.5 2.833L14.75 1L12 2.833L9.25 1L6.5 2.833L3.75 1L1 3.75L2.834 6.5L1 9.25L2.834 12L1 14.75L2.834 17.5L1 20.25L3.75 23L6.5 21.167L9.25 23L12 21.167L14.75 23L17.5 21.167L20.25 23L23 20.25L21.167 17.5L23 14.75L21.167 12L23 9.25L21.167 6.5Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_30_709'}>
-					<rect
-						width={'24'}
-						height={'24'}
-						fill={'white'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_30_709)'}>
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M21.167 6.5L23 3.75L20.25 1L17.5 2.833L14.75 1L12 2.833L9.25 1L6.5 2.833L3.75 1L1 3.75L2.834 6.5L1 9.25L2.834 12L1 14.75L2.834 17.5L1 20.25L3.75 23L6.5 21.167L9.25 23L12 21.167L14.75 23L17.5 21.167L20.25 23L23 20.25L21.167 17.5L23 14.75L21.167 12L23 9.25L21.167 6.5Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_30_709'}>
+          <rect width={'24'} height={'24'} fill={'white'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconDiscord.tsx b/app/[lang]/_icons/IconDiscord.tsx
index a6917e5..1fb8ff8 100644
--- a/app/[lang]/_icons/IconDiscord.tsx
+++ b/app/[lang]/_icons/IconDiscord.tsx
@@ -1,20 +1,14 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconDiscord(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'40'}
-			height={'40'}
-			viewBox={'0 0 40 40'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M31.0894 10.4653C29.0498 9.5883 26.8626 8.94217 24.5759 8.57211C24.5342 8.56497 24.4926 8.58282 24.4712 8.61851C24.1899 9.08734 23.8783 9.69896 23.6601 10.1797C21.2005 9.83462 18.7536 9.83462 16.3444 10.1797C16.1262 9.68827 15.8033 9.08734 15.5208 8.61851C15.4993 8.58401 15.4577 8.56616 15.4161 8.57211C13.1305 8.94099 10.9434 9.58712 8.90258 10.4653C8.88491 10.4724 8.86977 10.4843 8.85972 10.4998C4.71119 16.3078 3.57473 21.9731 4.13224 27.5682C4.13476 27.5956 4.15116 27.6217 4.17386 27.6384C6.91095 29.522 9.56228 30.6656 12.1644 31.4235C12.206 31.4354 12.2501 31.4212 12.2766 31.389C12.8922 30.6013 13.4409 29.7708 13.9113 28.8973C13.9391 28.8462 13.9126 28.7855 13.8558 28.7652C12.9855 28.4559 12.1568 28.0786 11.3596 27.6503C11.2966 27.6158 11.2915 27.5313 11.3495 27.4908C11.5173 27.373 11.6851 27.2504 11.8453 27.1267C11.8743 27.1041 11.9146 27.0993 11.9487 27.1136C17.1857 29.3543 22.8554 29.3543 28.0306 27.1136C28.0647 27.0981 28.1051 27.1029 28.1353 27.1255C28.2955 27.2493 28.4633 27.373 28.6323 27.4908C28.6903 27.5313 28.6865 27.6158 28.6235 27.6503C27.8263 28.087 26.9976 28.4559 26.126 28.7641C26.0693 28.7843 26.044 28.8462 26.0718 28.8973C26.5523 29.7695 27.101 30.6001 27.7052 31.3878C27.7304 31.4212 27.7758 31.4354 27.8175 31.4235C30.4322 30.6656 33.0835 29.522 35.8206 27.6384C35.8446 27.6217 35.8597 27.5967 35.8622 27.5694C36.5294 21.1009 34.7447 15.482 31.131 10.501C31.1221 10.4843 31.107 10.4724 31.0894 10.4653ZM14.6934 24.1614C13.1167 24.1614 11.8175 22.8049 11.8175 21.139C11.8175 19.4731 13.0915 18.1166 14.6934 18.1166C16.3078 18.1166 17.5944 19.485 17.5692 21.139C17.5692 22.8049 16.2952 24.1614 14.6934 24.1614ZM25.3263 24.1614C23.7497 24.1614 22.4505 22.8049 22.4505 21.139C22.4505 19.4731 23.7244 18.1166 25.3263 18.1166C26.9408 18.1166 28.2274 19.485 28.2022 21.139C28.2022 22.8049 26.9408 24.1614 25.3263 24.1614Z'
-				}
-				fill={'currentColor'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'40'} height={'40'} viewBox={'0 0 40 40'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M31.0894 10.4653C29.0498 9.5883 26.8626 8.94217 24.5759 8.57211C24.5342 8.56497 24.4926 8.58282 24.4712 8.61851C24.1899 9.08734 23.8783 9.69896 23.6601 10.1797C21.2005 9.83462 18.7536 9.83462 16.3444 10.1797C16.1262 9.68827 15.8033 9.08734 15.5208 8.61851C15.4993 8.58401 15.4577 8.56616 15.4161 8.57211C13.1305 8.94099 10.9434 9.58712 8.90258 10.4653C8.88491 10.4724 8.86977 10.4843 8.85972 10.4998C4.71119 16.3078 3.57473 21.9731 4.13224 27.5682C4.13476 27.5956 4.15116 27.6217 4.17386 27.6384C6.91095 29.522 9.56228 30.6656 12.1644 31.4235C12.206 31.4354 12.2501 31.4212 12.2766 31.389C12.8922 30.6013 13.4409 29.7708 13.9113 28.8973C13.9391 28.8462 13.9126 28.7855 13.8558 28.7652C12.9855 28.4559 12.1568 28.0786 11.3596 27.6503C11.2966 27.6158 11.2915 27.5313 11.3495 27.4908C11.5173 27.373 11.6851 27.2504 11.8453 27.1267C11.8743 27.1041 11.9146 27.0993 11.9487 27.1136C17.1857 29.3543 22.8554 29.3543 28.0306 27.1136C28.0647 27.0981 28.1051 27.1029 28.1353 27.1255C28.2955 27.2493 28.4633 27.373 28.6323 27.4908C28.6903 27.5313 28.6865 27.6158 28.6235 27.6503C27.8263 28.087 26.9976 28.4559 26.126 28.7641C26.0693 28.7843 26.044 28.8462 26.0718 28.8973C26.5523 29.7695 27.101 30.6001 27.7052 31.3878C27.7304 31.4212 27.7758 31.4354 27.8175 31.4235C30.4322 30.6656 33.0835 29.522 35.8206 27.6384C35.8446 27.6217 35.8597 27.5967 35.8622 27.5694C36.5294 21.1009 34.7447 15.482 31.131 10.501C31.1221 10.4843 31.107 10.4724 31.0894 10.4653ZM14.6934 24.1614C13.1167 24.1614 11.8175 22.8049 11.8175 21.139C11.8175 19.4731 13.0915 18.1166 14.6934 18.1166C16.3078 18.1166 17.5944 19.485 17.5692 21.139C17.5692 22.8049 16.2952 24.1614 14.6934 24.1614ZM25.3263 24.1614C23.7497 24.1614 22.4505 22.8049 22.4505 21.139C22.4505 19.4731 23.7244 18.1166 25.3263 18.1166C26.9408 18.1166 28.2274 19.485 28.2022 21.139C28.2022 22.8049 26.9408 24.1614 25.3263 24.1614Z'
+        }
+        fill={'currentColor'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconDiscover.tsx b/app/[lang]/_icons/IconDiscover.tsx
index 44f5f93..85acef0 100644
--- a/app/[lang]/_icons/IconDiscover.tsx
+++ b/app/[lang]/_icons/IconDiscover.tsx
@@ -1,45 +1,35 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconDiscover(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_1138_6391)'}>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M19.1666 9.99992C19.1666 15.0627 15.0627 19.1666 9.99992 19.1666C4.93717 19.1666 0.833252 15.0627 0.833252 9.99992C0.833252 4.93717 4.93717 0.833252 9.99992 0.833252C15.0627 0.833252 19.1666 4.93717 19.1666 9.99992Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={'M10.0002 13.6668L6.3335 10.0002L10.0002 6.3335L13.6668 10.0002L10.0002 13.6668Z'}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_1138_6391'}>
-					<rect
-						width={'20'}
-						height={'20'}
-						fill={'currentColor'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_1138_6391)'}>
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M19.1666 9.99992C19.1666 15.0627 15.0627 19.1666 9.99992 19.1666C4.93717 19.1666 0.833252 15.0627 0.833252 9.99992C0.833252 4.93717 4.93717 0.833252 9.99992 0.833252C15.0627 0.833252 19.1666 4.93717 19.1666 9.99992Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={'M10.0002 13.6668L6.3335 10.0002L10.0002 6.3335L13.6668 10.0002L10.0002 13.6668Z'}
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_1138_6391'}>
+          <rect width={'20'} height={'20'} fill={'currentColor'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconDocs.tsx b/app/[lang]/_icons/IconDocs.tsx
index 187ce43..1020925 100644
--- a/app/[lang]/_icons/IconDocs.tsx
+++ b/app/[lang]/_icons/IconDocs.tsx
@@ -1,52 +1,46 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconDocs(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'22'}
-			height={'24'}
-			viewBox={'0 0 22 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g id={'content'}>
-				<path
-					id={'Stroke'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M19.0005 23H3.00049C1.89649 23 1.00049 22.104 1.00049 21V3C1.00049 1.896 1.89649 1 3.00049 1H19.0005C20.1045 1 21.0005 1.896 21.0005 3V21C21.0005 22.104 20.1045 23 19.0005 23Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_2'}
-					d={'M6.00049 12H16.0005'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_3'}
-					d={'M6.00049 17H12.0005'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_4'}
-					d={'M6.00049 7H16.0005'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'22'} height={'24'} viewBox={'0 0 22 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g id={'content'}>
+        <path
+          id={'Stroke'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M19.0005 23H3.00049C1.89649 23 1.00049 22.104 1.00049 21V3C1.00049 1.896 1.89649 1 3.00049 1H19.0005C20.1045 1 21.0005 1.896 21.0005 3V21C21.0005 22.104 20.1045 23 19.0005 23Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_2'}
+          d={'M6.00049 12H16.0005'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_3'}
+          d={'M6.00049 17H12.0005'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_4'}
+          d={'M6.00049 7H16.0005'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconDollar.tsx b/app/[lang]/_icons/IconDollar.tsx
index 425a2a9..241a4f2 100644
--- a/app/[lang]/_icons/IconDollar.tsx
+++ b/app/[lang]/_icons/IconDollar.tsx
@@ -1,59 +1,49 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconDollar(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 18 18'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_847_11219)'}>
-				<path
-					d={
-						'M10.5 6H8.25C7.422 6 6.75 6.672 6.75 7.5C6.75 8.328 7.422 9 8.25 9H9.75C10.578 9 11.25 9.672 11.25 10.5C11.25 11.328 10.578 12 9.75 12H7.5'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.5'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M9 6V4.5'}
-					stroke={'currentColor'}
-					strokeWidth={'1.5'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M9 13.5V12'}
-					stroke={'currentColor'}
-					strokeWidth={'1.5'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M17.25 9C17.25 13.5562 13.5562 17.25 9 17.25C4.44375 17.25 0.75 13.5562 0.75 9C0.75 4.44375 4.44375 0.75 9 0.75C13.5562 0.75 17.25 4.44375 17.25 9Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.5'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_847_11219'}>
-					<rect
-						width={'18'}
-						height={'18'}
-						fill={'currentColor'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 18 18'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_847_11219)'}>
+        <path
+          d={
+            'M10.5 6H8.25C7.422 6 6.75 6.672 6.75 7.5C6.75 8.328 7.422 9 8.25 9H9.75C10.578 9 11.25 9.672 11.25 10.5C11.25 11.328 10.578 12 9.75 12H7.5'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.5'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M9 6V4.5'}
+          stroke={'currentColor'}
+          strokeWidth={'1.5'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M9 13.5V12'}
+          stroke={'currentColor'}
+          strokeWidth={'1.5'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M17.25 9C17.25 13.5562 13.5562 17.25 9 17.25C4.44375 17.25 0.75 13.5562 0.75 9C0.75 4.44375 4.44375 0.75 9 0.75C13.5562 0.75 17.25 4.44375 17.25 9Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.5'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_847_11219'}>
+          <rect width={'18'} height={'18'} fill={'currentColor'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconEarn.tsx b/app/[lang]/_icons/IconEarn.tsx
index 0727da1..f486e92 100644
--- a/app/[lang]/_icons/IconEarn.tsx
+++ b/app/[lang]/_icons/IconEarn.tsx
@@ -1,43 +1,37 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconEarn(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M2.75 21.25L21.25 2.75'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M10.25 6.25C10.25 8.183 8.683 9.75 6.75 9.75C4.817 9.75 3.25 8.183 3.25 6.25C3.25 4.317 4.817 2.75 6.75 2.75C8.683 2.75 10.25 4.317 10.25 6.25Z'
-				}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M21.25 17.25C21.25 19.183 19.683 20.75 17.75 20.75C15.817 20.75 14.25 19.183 14.25 17.25C14.25 15.317 15.817 13.75 17.75 13.75C19.683 13.75 21.25 15.317 21.25 17.25Z'
-				}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M2.75 21.25L21.25 2.75'}
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M10.25 6.25C10.25 8.183 8.683 9.75 6.75 9.75C4.817 9.75 3.25 8.183 3.25 6.25C3.25 4.317 4.817 2.75 6.75 2.75C8.683 2.75 10.25 4.317 10.25 6.25Z'
+        }
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M21.25 17.25C21.25 19.183 19.683 20.75 17.75 20.75C15.817 20.75 14.25 19.183 14.25 17.25C14.25 15.317 15.817 13.75 17.75 13.75C19.683 13.75 21.25 15.317 21.25 17.25Z'
+        }
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconFox.tsx b/app/[lang]/_icons/IconFox.tsx
index efba714..512f406 100644
--- a/app/[lang]/_icons/IconFox.tsx
+++ b/app/[lang]/_icons/IconFox.tsx
@@ -1,20 +1,14 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconFox(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'22'}
-			height={'23'}
-			viewBox={'0 0 22 23'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M21.0832 1.18158C21.0832 0.802926 20.7827 0.5 20.4072 0.5C20.0317 0.5 20.257 0.5 20.1819 0.537866H20.1443L14.3234 2.99914H7.75139L1.85536 0.537866C1.78025 0.537866 1.70514 0.5 1.59248 0.5C1.21694 0.5 0.916504 0.802926 0.916504 1.18158C0.916504 1.56024 0.916504 1.21945 0.916504 1.25731C0.916504 1.29518 2.26846 9.58778 2.26846 9.58778L0.954058 14.0938C0.954058 14.2074 0.954058 14.2453 0.954058 14.321C0.954058 14.5861 1.10428 14.8133 1.29205 14.9268L5.57324 17.1231C7.30074 18.1833 8.01427 19.395 9.32867 20.9475L10.4553 22.2349V22.3107C10.6431 22.4243 10.7933 22.5 10.9811 22.5C11.1688 22.5 11.3566 22.4243 11.4693 22.2728L12.5959 20.9475C13.9103 19.395 14.6238 18.1833 16.3513 17.1231L20.6325 14.9268C20.8578 14.8133 20.9705 14.5861 20.9705 14.321C20.9705 14.0559 20.9705 14.2074 20.9705 14.1317L19.6561 9.62564L21.0081 1.29518C21.0081 1.29518 21.0081 1.25731 21.0081 1.21945L21.0832 1.18158ZM19.0928 2.88554L18.3417 7.54303L15.8631 4.28657L19.1303 2.92341L19.0928 2.88554ZM7.93916 4.74096H14.023L17.0649 8.75473H4.89726L7.93916 4.74096ZM11.0186 15.3812L5.34791 10.4966H16.6893L11.0186 15.3812ZM6.17411 4.24871L3.69552 7.50516L2.94444 2.84768L6.21166 4.21084L6.17411 4.24871ZM2.90688 13.6394L3.62041 11.4811L8.46492 15.8356L2.90688 13.6394ZM11.0186 19.7737L8.87802 17.1988L11.0186 17.5017L13.1592 17.1988L11.0186 19.7737ZM13.5348 15.8356L18.3793 11.4811L19.0928 13.6394L13.5348 15.8356Z'
-				}
-				fill={'currentColor'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'22'} height={'23'} viewBox={'0 0 22 23'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M21.0832 1.18158C21.0832 0.802926 20.7827 0.5 20.4072 0.5C20.0317 0.5 20.257 0.5 20.1819 0.537866H20.1443L14.3234 2.99914H7.75139L1.85536 0.537866C1.78025 0.537866 1.70514 0.5 1.59248 0.5C1.21694 0.5 0.916504 0.802926 0.916504 1.18158C0.916504 1.56024 0.916504 1.21945 0.916504 1.25731C0.916504 1.29518 2.26846 9.58778 2.26846 9.58778L0.954058 14.0938C0.954058 14.2074 0.954058 14.2453 0.954058 14.321C0.954058 14.5861 1.10428 14.8133 1.29205 14.9268L5.57324 17.1231C7.30074 18.1833 8.01427 19.395 9.32867 20.9475L10.4553 22.2349V22.3107C10.6431 22.4243 10.7933 22.5 10.9811 22.5C11.1688 22.5 11.3566 22.4243 11.4693 22.2728L12.5959 20.9475C13.9103 19.395 14.6238 18.1833 16.3513 17.1231L20.6325 14.9268C20.8578 14.8133 20.9705 14.5861 20.9705 14.321C20.9705 14.0559 20.9705 14.2074 20.9705 14.1317L19.6561 9.62564L21.0081 1.29518C21.0081 1.29518 21.0081 1.25731 21.0081 1.21945L21.0832 1.18158ZM19.0928 2.88554L18.3417 7.54303L15.8631 4.28657L19.1303 2.92341L19.0928 2.88554ZM7.93916 4.74096H14.023L17.0649 8.75473H4.89726L7.93916 4.74096ZM11.0186 15.3812L5.34791 10.4966H16.6893L11.0186 15.3812ZM6.17411 4.24871L3.69552 7.50516L2.94444 2.84768L6.21166 4.21084L6.17411 4.24871ZM2.90688 13.6394L3.62041 11.4811L8.46492 15.8356L2.90688 13.6394ZM11.0186 19.7737L8.87802 17.1988L11.0186 17.5017L13.1592 17.1988L11.0186 19.7737ZM13.5348 15.8356L18.3793 11.4811L19.0928 13.6394L13.5348 15.8356Z'
+        }
+        fill={'currentColor'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconGlobe.tsx b/app/[lang]/_icons/IconGlobe.tsx
index a80f23a..554da20 100644
--- a/app/[lang]/_icons/IconGlobe.tsx
+++ b/app/[lang]/_icons/IconGlobe.tsx
@@ -1,23 +1,17 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconGlobe(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M10 19C11.995 18.9999 13.9335 18.3372 15.511 17.116C17.0886 15.8948 18.2159 14.1843 18.716 12.253M10 19C8.00501 18.9999 6.06654 18.3372 4.48898 17.116C2.91141 15.8948 1.78408 14.1843 1.284 12.253M10 19C12.485 19 14.5 14.97 14.5 10C14.5 5.03 12.485 1 10 1M10 19C7.515 19 5.5 14.97 5.5 10C5.5 5.03 7.515 1 10 1M18.716 12.253C18.901 11.533 19 10.778 19 10C19.0025 8.45211 18.6039 6.92999 17.843 5.582M18.716 12.253C16.0492 13.7314 13.0492 14.5048 10 14.5C6.838 14.5 3.867 13.685 1.284 12.253M1.284 12.253C1.09475 11.517 0.999327 10.76 1 10C1 8.395 1.42 6.887 2.157 5.582M10 1C11.5962 0.999335 13.1639 1.42336 14.5422 2.22856C15.9205 3.03377 17.0597 4.19117 17.843 5.582M10 1C8.40376 0.999335 6.83608 1.42336 5.45781 2.22856C4.07954 3.03377 2.94031 4.19117 2.157 5.582M17.843 5.582C15.6657 7.46793 12.8805 8.50415 10 8.5C7.002 8.5 4.26 7.4 2.157 5.582'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'1.5'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M10 19C11.995 18.9999 13.9335 18.3372 15.511 17.116C17.0886 15.8948 18.2159 14.1843 18.716 12.253M10 19C8.00501 18.9999 6.06654 18.3372 4.48898 17.116C2.91141 15.8948 1.78408 14.1843 1.284 12.253M10 19C12.485 19 14.5 14.97 14.5 10C14.5 5.03 12.485 1 10 1M10 19C7.515 19 5.5 14.97 5.5 10C5.5 5.03 7.515 1 10 1M18.716 12.253C18.901 11.533 19 10.778 19 10C19.0025 8.45211 18.6039 6.92999 17.843 5.582M18.716 12.253C16.0492 13.7314 13.0492 14.5048 10 14.5C6.838 14.5 3.867 13.685 1.284 12.253M1.284 12.253C1.09475 11.517 0.999327 10.76 1 10C1 8.395 1.42 6.887 2.157 5.582M10 1C11.5962 0.999335 13.1639 1.42336 14.5422 2.22856C15.9205 3.03377 17.0597 4.19117 17.843 5.582M10 1C8.40376 0.999335 6.83608 1.42336 5.45781 2.22856C4.07954 3.03377 2.94031 4.19117 2.157 5.582M17.843 5.582C15.6657 7.46793 12.8805 8.50415 10 8.5C7.002 8.5 4.26 7.4 2.157 5.582'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'1.5'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconGovern.tsx b/app/[lang]/_icons/IconGovern.tsx
index 63ef4be..c5d3fb7 100644
--- a/app/[lang]/_icons/IconGovern.tsx
+++ b/app/[lang]/_icons/IconGovern.tsx
@@ -1,52 +1,46 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconGovern(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'22'}
-			height={'22'}
-			viewBox={'0 0 22 22'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g id={'season-winter'}>
-				<path
-					id={'Stroke'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M17.363 1H4.636C2.628 1 1 2.628 1 4.636V17.364C1 19.372 2.628 21 4.636 21H17.363C19.372 21 21 19.372 21 17.364V4.636C21 2.628 19.372 1 17.363 1Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_2'}
-					d={'M10.9995 5V17'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_3'}
-					d={'M5.80322 8L16.1962 14'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_4'}
-					d={'M5.80322 14L16.1962 8'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'22'} height={'22'} viewBox={'0 0 22 22'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g id={'season-winter'}>
+        <path
+          id={'Stroke'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M17.363 1H4.636C2.628 1 1 2.628 1 4.636V17.364C1 19.372 2.628 21 4.636 21H17.363C19.372 21 21 19.372 21 17.364V4.636C21 2.628 19.372 1 17.363 1Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_2'}
+          d={'M10.9995 5V17'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_3'}
+          d={'M5.80322 8L16.1962 14'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_4'}
+          d={'M5.80322 14L16.1962 8'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconHeart.tsx b/app/[lang]/_icons/IconHeart.tsx
index 7e1ee19..817d0e4 100644
--- a/app/[lang]/_icons/IconHeart.tsx
+++ b/app/[lang]/_icons/IconHeart.tsx
@@ -1,32 +1,26 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconHeart(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'18'}
-			height={'18'}
-			viewBox={'0 0 18 18'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M1.94141 10.5H3.75041L6.00041 6.75L8.25041 10.5H12.7504'}
-				stroke={'currentColor'}
-				strokeWidth={'1.5'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M13.125 2.25C11.0625 2.25 9.93375 3.32775 9 4.275C8.06625 3.32775 6.9375 2.25 4.875 2.25C2.12475 2.25 0.75 4.55325 0.75 6.975C0.75 11.0527 5.56275 14.4 9 15.75C12.4373 14.4 17.25 11.0527 17.25 6.975C17.25 4.55325 15.8753 2.25 13.125 2.25Z'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'1.5'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'18'} height={'18'} viewBox={'0 0 18 18'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M1.94141 10.5H3.75041L6.00041 6.75L8.25041 10.5H12.7504'}
+        stroke={'currentColor'}
+        strokeWidth={'1.5'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M13.125 2.25C11.0625 2.25 9.93375 3.32775 9 4.275C8.06625 3.32775 6.9375 2.25 4.875 2.25C2.12475 2.25 0.75 4.55325 0.75 6.975C0.75 11.0527 5.56275 14.4 9 15.75C12.4373 14.4 17.25 11.0527 17.25 6.975C17.25 4.55325 15.8753 2.25 13.125 2.25Z'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'1.5'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconHold.tsx b/app/[lang]/_icons/IconHold.tsx
index 7b20ae7..51229a3 100644
--- a/app/[lang]/_icons/IconHold.tsx
+++ b/app/[lang]/_icons/IconHold.tsx
@@ -1,72 +1,60 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconHold(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_721_6560)'}>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M21 23H3C1.896 23 1 22.104 1 21V3C1 1.896 1.896 1 3 1H21C22.104 1 23 1.896 23 3V21C23 22.104 22.104 23 21 23Z'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M17 12C17 15.313 14.313 18 11 18C7.687 18 5 15.313 5 12C5 8.687 7.687 6 11 6C14.313 6 17 8.687 17 12Z'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M14.3164 7H18.9994'}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M14.3164 17H18.9994'}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M13 12C13 13.104 12.104 14 11 14C9.896 14 9 13.104 9 12C9 10.896 9.896 10 11 10C12.104 10 13 10.896 13 12Z'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_721_6560'}>
-					<rect
-						width={'24'}
-						height={'24'}
-						fill={'white'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_721_6560)'}>
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M21 23H3C1.896 23 1 22.104 1 21V3C1 1.896 1.896 1 3 1H21C22.104 1 23 1.896 23 3V21C23 22.104 22.104 23 21 23Z'
+          }
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={'M17 12C17 15.313 14.313 18 11 18C7.687 18 5 15.313 5 12C5 8.687 7.687 6 11 6C14.313 6 17 8.687 17 12Z'}
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M14.3164 7H18.9994'}
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M14.3164 17H18.9994'}
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M13 12C13 13.104 12.104 14 11 14C9.896 14 9 13.104 9 12C9 10.896 9.896 10 11 10C12.104 10 13 10.896 13 12Z'
+          }
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_721_6560'}>
+          <rect width={'24'} height={'24'} fill={'white'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconKey.tsx b/app/[lang]/_icons/IconKey.tsx
index 0d5ea17..bad5071 100644
--- a/app/[lang]/_icons/IconKey.tsx
+++ b/app/[lang]/_icons/IconKey.tsx
@@ -1,28 +1,22 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconKey(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g id={'key'}>
-				<path
-					id={'Stroke'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M15.5 1C11.357 1 8 4.357 8 8.5C8 8.968 8.049 9.425 8.131 9.869L1 17V23H7V19H11V16H15.5C19.643 16 23 12.642 23 8.5C23 4.357 19.643 1 15.5 1Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g id={'key'}>
+        <path
+          id={'Stroke'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M15.5 1C11.357 1 8 4.357 8 8.5C8 8.968 8.049 9.425 8.131 9.869L1 17V23H7V19H11V16H15.5C19.643 16 23 12.642 23 8.5C23 4.357 19.643 1 15.5 1Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconMedium.tsx b/app/[lang]/_icons/IconMedium.tsx
index 7c6ec1d..a1ec01b 100644
--- a/app/[lang]/_icons/IconMedium.tsx
+++ b/app/[lang]/_icons/IconMedium.tsx
@@ -1,44 +1,33 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconMedium(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'41'}
-			height={'40'}
-			viewBox={'0 0 41 40'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_576_2498)'}>
-				<path
-					d={
-						'M7.41988 0.5H33.3848C36.9843 0.5 39.9023 3.418 39.9023 7.01754V32.9825C39.9023 36.582 36.9843 39.5 33.3848 39.5H7.41988C3.82035 39.5 0.902344 36.582 0.902344 32.9825V7.01754C0.902344 3.418 3.82035 0.5 7.41988 0.5Z'
-					}
-					stroke={'currentColor'}
-				/>
-				<path
-					d={
-						'M40.4042 27.5288V31.1616C40.1761 31.1836 39.9417 31.1949 39.7011 31.1949C35.4066 31.1949 32.9888 27.6179 32.8846 23.1419C32.8815 22.9689 32.8827 22.7969 32.8865 22.6261C32.8888 22.5196 32.8931 22.4134 32.8984 22.3077C32.9011 22.2511 32.9038 22.198 32.9081 22.1388C32.9123 22.0796 32.9165 22.0204 32.9215 21.9611C33.0761 19.9849 33.7123 18.2264 34.7623 16.9252C35.4147 16.1175 36.1985 15.5021 37.0874 15.0905C37.8682 14.6974 38.9656 14.4805 39.8601 14.4805H39.8988C40.0683 14.4805 40.2366 14.4861 40.4042 14.4973V15.4968C40.2265 15.4481 40.0363 15.422 39.8339 15.4186C38.0248 15.4559 36.9466 17.6229 36.8124 20.6253H40.4042V21.4715H36.7313L36.7301 21.4723C36.5645 24.3977 38.1656 26.87 40.4042 27.5288Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M33.0631 9.55561L33.0946 9.5487V9.30444H26.6529L20.6715 23.3626L14.6902 9.30444H7.7484V9.5487L7.77957 9.55561C8.95535 9.82101 9.5523 10.2168 9.5523 11.6441V28.3543C9.5523 29.7817 8.95305 30.1775 7.77727 30.4428L7.74609 30.4498V30.6948H12.4559V30.4505L12.4247 30.4436C11.2489 30.1782 10.652 29.7825 10.652 28.3551V12.6134L18.3357 30.6948H18.7714L26.679 12.1092V28.7678C26.5783 29.8951 25.9867 30.2432 24.9221 30.4836L24.8905 30.4909V30.7333H33.0946V30.4909L33.0631 30.4836C31.9973 30.2432 31.3915 29.8951 31.2907 28.7678L31.2854 11.6441H31.2907C31.2907 10.2168 31.8877 9.82101 33.0631 9.55561Z'
-					}
-					fill={'currentColor'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_576_2498'}>
-					<rect
-						width={'40'}
-						height={'40'}
-						fill={'currentColor'}
-						transform={'translate(0.402344)'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'41'} height={'40'} viewBox={'0 0 41 40'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_576_2498)'}>
+        <path
+          d={
+            'M7.41988 0.5H33.3848C36.9843 0.5 39.9023 3.418 39.9023 7.01754V32.9825C39.9023 36.582 36.9843 39.5 33.3848 39.5H7.41988C3.82035 39.5 0.902344 36.582 0.902344 32.9825V7.01754C0.902344 3.418 3.82035 0.5 7.41988 0.5Z'
+          }
+          stroke={'currentColor'}
+        />
+        <path
+          d={
+            'M40.4042 27.5288V31.1616C40.1761 31.1836 39.9417 31.1949 39.7011 31.1949C35.4066 31.1949 32.9888 27.6179 32.8846 23.1419C32.8815 22.9689 32.8827 22.7969 32.8865 22.6261C32.8888 22.5196 32.8931 22.4134 32.8984 22.3077C32.9011 22.2511 32.9038 22.198 32.9081 22.1388C32.9123 22.0796 32.9165 22.0204 32.9215 21.9611C33.0761 19.9849 33.7123 18.2264 34.7623 16.9252C35.4147 16.1175 36.1985 15.5021 37.0874 15.0905C37.8682 14.6974 38.9656 14.4805 39.8601 14.4805H39.8988C40.0683 14.4805 40.2366 14.4861 40.4042 14.4973V15.4968C40.2265 15.4481 40.0363 15.422 39.8339 15.4186C38.0248 15.4559 36.9466 17.6229 36.8124 20.6253H40.4042V21.4715H36.7313L36.7301 21.4723C36.5645 24.3977 38.1656 26.87 40.4042 27.5288Z'
+          }
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M33.0631 9.55561L33.0946 9.5487V9.30444H26.6529L20.6715 23.3626L14.6902 9.30444H7.7484V9.5487L7.77957 9.55561C8.95535 9.82101 9.5523 10.2168 9.5523 11.6441V28.3543C9.5523 29.7817 8.95305 30.1775 7.77727 30.4428L7.74609 30.4498V30.6948H12.4559V30.4505L12.4247 30.4436C11.2489 30.1782 10.652 29.7825 10.652 28.3551V12.6134L18.3357 30.6948H18.7714L26.679 12.1092V28.7678C26.5783 29.8951 25.9867 30.2432 24.9221 30.4836L24.8905 30.4909V30.7333H33.0946V30.4909L33.0631 30.4836C31.9973 30.2432 31.3915 29.8951 31.2907 28.7678L31.2854 11.6441H31.2907C31.2907 10.2168 31.8877 9.82101 33.0631 9.55561Z'
+          }
+          fill={'currentColor'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_576_2498'}>
+          <rect width={'40'} height={'40'} fill={'currentColor'} transform={'translate(0.402344)'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconMenu.tsx b/app/[lang]/_icons/IconMenu.tsx
index 9eb8e0f..4f88855 100644
--- a/app/[lang]/_icons/IconMenu.tsx
+++ b/app/[lang]/_icons/IconMenu.tsx
@@ -1,56 +1,50 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconMenu(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'16'}
-			viewBox={'0 0 20 16'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M1.00024 1H19.0002'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M1.00024 8H19.0002'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M1.00024 15H19.0002'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M1.00024 1H19.0002'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M1.00024 8H19.0002'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M1.00024 15H19.0002'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'16'} viewBox={'0 0 20 16'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M1.00024 1H19.0002'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M1.00024 8H19.0002'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M1.00024 15H19.0002'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M1.00024 1H19.0002'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M1.00024 8H19.0002'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M1.00024 15H19.0002'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconMinus.tsx b/app/[lang]/_icons/IconMinus.tsx
index 30554bf..823d508 100644
--- a/app/[lang]/_icons/IconMinus.tsx
+++ b/app/[lang]/_icons/IconMinus.tsx
@@ -1,20 +1,9 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconMinus(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M2 12L22 12'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path d={'M2 12L22 12'} stroke={'currentColor'} strokeWidth={'3'} strokeLinecap={'round'} />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconMobile.tsx b/app/[lang]/_icons/IconMobile.tsx
index 7613577..79b2ae1 100644
--- a/app/[lang]/_icons/IconMobile.tsx
+++ b/app/[lang]/_icons/IconMobile.tsx
@@ -1,36 +1,30 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconMobile(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'18'}
-			height={'24'}
-			viewBox={'0 0 18 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g id={'iphone'}>
-				<path
-					id={'Stroke'}
-					d={'M2 17H16'}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_2'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M15 23H3C1.896 23 1 22.104 1 21V3C1 1.896 1.896 1 3 1H15C16.104 1 17 1.896 17 3V21C17 22.104 16.104 23 15 23Z'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'18'} height={'24'} viewBox={'0 0 18 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g id={'iphone'}>
+        <path
+          id={'Stroke'}
+          d={'M2 17H16'}
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_2'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M15 23H3C1.896 23 1 22.104 1 21V3C1 1.896 1.896 1 3 1H15C16.104 1 17 1.896 17 3V21C17 22.104 16.104 23 15 23Z'
+          }
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconNext.tsx b/app/[lang]/_icons/IconNext.tsx
index 6c6d9bc..489403f 100644
--- a/app/[lang]/_icons/IconNext.tsx
+++ b/app/[lang]/_icons/IconNext.tsx
@@ -1,27 +1,16 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconNext(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M4 12L20 12'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-			/>
-			<path
-				d={'M15 7L20 12L15 17'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path d={'M4 12L20 12'} stroke={'currentColor'} strokeWidth={'3'} strokeLinecap={'round'} />
+      <path
+        d={'M15 7L20 12L15 17'}
+        stroke={'currentColor'}
+        strokeWidth={'3'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconPercent.tsx b/app/[lang]/_icons/IconPercent.tsx
index fdc63b3..b5a914e 100644
--- a/app/[lang]/_icons/IconPercent.tsx
+++ b/app/[lang]/_icons/IconPercent.tsx
@@ -1,48 +1,42 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconPercent(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'22'}
-			height={'22'}
-			viewBox={'0 0 22 22'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g id={'percentage'}>
-				<path
-					id={'Stroke'}
-					d={'M1.75049 20.25L20.2505 1.75'}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_2'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M9.25049 5.25C9.25049 7.183 7.68349 8.75 5.75049 8.75C3.81749 8.75 2.25049 7.183 2.25049 5.25C2.25049 3.317 3.81749 1.75 5.75049 1.75C7.68349 1.75 9.25049 3.317 9.25049 5.25Z'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					id={'Stroke_3'}
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M20.2505 16.25C20.2505 18.183 18.6835 19.75 16.7505 19.75C14.8175 19.75 13.2505 18.183 13.2505 16.25C13.2505 14.317 14.8175 12.75 16.7505 12.75C18.6835 12.75 20.2505 14.317 20.2505 16.25Z'
-					}
-					stroke={'#E6E6E6'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'22'} height={'22'} viewBox={'0 0 22 22'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g id={'percentage'}>
+        <path
+          id={'Stroke'}
+          d={'M1.75049 20.25L20.2505 1.75'}
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_2'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M9.25049 5.25C9.25049 7.183 7.68349 8.75 5.75049 8.75C3.81749 8.75 2.25049 7.183 2.25049 5.25C2.25049 3.317 3.81749 1.75 5.75049 1.75C7.68349 1.75 9.25049 3.317 9.25049 5.25Z'
+          }
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          id={'Stroke_3'}
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M20.2505 16.25C20.2505 18.183 18.6835 19.75 16.7505 19.75C14.8175 19.75 13.2505 18.183 13.2505 16.25C13.2505 14.317 14.8175 12.75 16.7505 12.75C18.6835 12.75 20.2505 14.317 20.2505 16.25Z'
+          }
+          stroke={'#E6E6E6'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconPlanet.tsx b/app/[lang]/_icons/IconPlanet.tsx
index 48d9ecb..239e52a 100644
--- a/app/[lang]/_icons/IconPlanet.tsx
+++ b/app/[lang]/_icons/IconPlanet.tsx
@@ -1,23 +1,17 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconPlanet(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			{...props}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M10 19C11.995 18.9999 13.9335 18.3372 15.511 17.116C17.0886 15.8948 18.2159 14.1843 18.716 12.253M10 19C8.00501 18.9999 6.06654 18.3372 4.48898 17.116C2.91141 15.8948 1.78408 14.1843 1.284 12.253M10 19C12.485 19 14.5 14.97 14.5 10C14.5 5.03 12.485 1 10 1M10 19C7.515 19 5.5 14.97 5.5 10C5.5 5.03 7.515 1 10 1M18.716 12.253C18.901 11.533 19 10.778 19 10C19.0025 8.45211 18.6039 6.92999 17.843 5.582M18.716 12.253C16.0492 13.7314 13.0492 14.5048 10 14.5C6.838 14.5 3.867 13.685 1.284 12.253M1.284 12.253C1.09475 11.517 0.999327 10.76 1 10C1 8.395 1.42 6.887 2.157 5.582M10 1C11.5962 0.999335 13.1639 1.42336 14.5422 2.22856C15.9205 3.03377 17.0597 4.19117 17.843 5.582M10 1C8.40376 0.999335 6.83608 1.42336 5.45781 2.22856C4.07954 3.03377 2.94031 4.19117 2.157 5.582M17.843 5.582C15.6657 7.46793 12.8805 8.50415 10 8.5C7.002 8.5 4.26 7.4 2.157 5.582'
-				}
-				stroke={'#E6E6E6'}
-				strokeWidth={'1.5'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} {...props} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M10 19C11.995 18.9999 13.9335 18.3372 15.511 17.116C17.0886 15.8948 18.2159 14.1843 18.716 12.253M10 19C8.00501 18.9999 6.06654 18.3372 4.48898 17.116C2.91141 15.8948 1.78408 14.1843 1.284 12.253M10 19C12.485 19 14.5 14.97 14.5 10C14.5 5.03 12.485 1 10 1M10 19C7.515 19 5.5 14.97 5.5 10C5.5 5.03 7.515 1 10 1M18.716 12.253C18.901 11.533 19 10.778 19 10C19.0025 8.45211 18.6039 6.92999 17.843 5.582M18.716 12.253C16.0492 13.7314 13.0492 14.5048 10 14.5C6.838 14.5 3.867 13.685 1.284 12.253M1.284 12.253C1.09475 11.517 0.999327 10.76 1 10C1 8.395 1.42 6.887 2.157 5.582M10 1C11.5962 0.999335 13.1639 1.42336 14.5422 2.22856C15.9205 3.03377 17.0597 4.19117 17.843 5.582M10 1C8.40376 0.999335 6.83608 1.42336 5.45781 2.22856C4.07954 3.03377 2.94031 4.19117 2.157 5.582M17.843 5.582C15.6657 7.46793 12.8805 8.50415 10 8.5C7.002 8.5 4.26 7.4 2.157 5.582'
+        }
+        stroke={'#E6E6E6'}
+        strokeWidth={'1.5'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconPlus.tsx b/app/[lang]/_icons/IconPlus.tsx
index ba097a5..8404926 100644
--- a/app/[lang]/_icons/IconPlus.tsx
+++ b/app/[lang]/_icons/IconPlus.tsx
@@ -1,26 +1,10 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconPlus(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M12 22L12 2'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-			/>
-			<path
-				d={'M2 12L22 12'}
-				stroke={'currentColor'}
-				strokeWidth={'3'}
-				strokeLinecap={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path d={'M12 22L12 2'} stroke={'currentColor'} strokeWidth={'3'} strokeLinecap={'round'} />
+      <path d={'M2 12L22 12'} stroke={'currentColor'} strokeWidth={'3'} strokeLinecap={'round'} />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconQuestion.tsx b/app/[lang]/_icons/IconQuestion.tsx
index 7b472f4..2d0ba5b 100644
--- a/app/[lang]/_icons/IconQuestion.tsx
+++ b/app/[lang]/_icons/IconQuestion.tsx
@@ -1,20 +1,14 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconQuestion(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'12'}
-			height={'20'}
-			viewBox={'0 0 12 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M5.46369 13.8845C4.69728 13.8845 4.05484 13.2618 4.11384 12.4977C4.15438 11.9727 4.23816 11.4525 4.41117 10.958C4.64358 10.3106 4.9743 9.79877 5.40335 9.42257C5.84134 9.03762 6.35978 8.66142 6.95866 8.29396C7.5486 7.95276 8.04022 7.52843 8.43352 7.021C8.82682 6.50481 9.02346 5.88801 9.02346 5.1706C9.02346 4.61067 8.88939 4.12511 8.62123 3.71391C8.35307 3.30271 7.99106 2.98338 7.5352 2.75591C7.07933 2.52843 6.5743 2.4147 6.02011 2.4147C5.52849 2.4147 5.05475 2.51531 4.59888 2.71654C4.14302 2.91776 3.76313 3.23272 3.45922 3.66142C3.39576 3.7491 3.33815 3.84231 3.28639 3.94106C2.91867 4.6425 2.3291 5.30184 1.53712 5.30184C0.696119 5.30184 -0.0061282 4.59352 0.227393 3.78559C0.373159 3.28128 0.587864 2.82431 0.871508 2.4147C1.41676 1.61855 2.13631 1.01925 3.03017 0.616798C3.93296 0.205599 4.92961 0 6.02011 0C7.22682 0 8.27709 0.218723 9.17095 0.656168C10.0648 1.09361 10.7575 1.70166 11.2492 2.48031C11.7497 3.25897 12 4.16448 12 5.19685C12 6.27297 11.7497 7.18723 11.2492 7.93963C10.7486 8.68329 10.0648 9.31758 9.19777 9.84252C8.64357 10.1662 8.19218 10.4856 7.84358 10.8005C7.49497 11.1155 7.24022 11.4961 7.07933 11.9423C7.01585 12.125 6.97 12.3119 6.9369 12.5012C6.8049 13.2562 6.2301 13.8845 5.46369 13.8845ZM5.4838 20C4.92067 20 4.44693 19.8206 4.06257 19.4619C3.68715 19.0945 3.49944 18.6439 3.49944 18.1102C3.49944 17.5678 3.68715 17.1172 4.06257 16.7585C4.44693 16.3911 4.92067 16.2073 5.4838 16.2073C6.04693 16.2073 6.5162 16.3911 6.89162 16.7585C7.27598 17.1172 7.46816 17.5678 7.46816 18.1102C7.46816 18.6439 7.27598 19.0945 6.89162 19.4619C6.5162 19.8206 6.04693 20 5.4838 20Z'
-				}
-				fill={'currentColor'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'12'} height={'20'} viewBox={'0 0 12 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M5.46369 13.8845C4.69728 13.8845 4.05484 13.2618 4.11384 12.4977C4.15438 11.9727 4.23816 11.4525 4.41117 10.958C4.64358 10.3106 4.9743 9.79877 5.40335 9.42257C5.84134 9.03762 6.35978 8.66142 6.95866 8.29396C7.5486 7.95276 8.04022 7.52843 8.43352 7.021C8.82682 6.50481 9.02346 5.88801 9.02346 5.1706C9.02346 4.61067 8.88939 4.12511 8.62123 3.71391C8.35307 3.30271 7.99106 2.98338 7.5352 2.75591C7.07933 2.52843 6.5743 2.4147 6.02011 2.4147C5.52849 2.4147 5.05475 2.51531 4.59888 2.71654C4.14302 2.91776 3.76313 3.23272 3.45922 3.66142C3.39576 3.7491 3.33815 3.84231 3.28639 3.94106C2.91867 4.6425 2.3291 5.30184 1.53712 5.30184C0.696119 5.30184 -0.0061282 4.59352 0.227393 3.78559C0.373159 3.28128 0.587864 2.82431 0.871508 2.4147C1.41676 1.61855 2.13631 1.01925 3.03017 0.616798C3.93296 0.205599 4.92961 0 6.02011 0C7.22682 0 8.27709 0.218723 9.17095 0.656168C10.0648 1.09361 10.7575 1.70166 11.2492 2.48031C11.7497 3.25897 12 4.16448 12 5.19685C12 6.27297 11.7497 7.18723 11.2492 7.93963C10.7486 8.68329 10.0648 9.31758 9.19777 9.84252C8.64357 10.1662 8.19218 10.4856 7.84358 10.8005C7.49497 11.1155 7.24022 11.4961 7.07933 11.9423C7.01585 12.125 6.97 12.3119 6.9369 12.5012C6.8049 13.2562 6.2301 13.8845 5.46369 13.8845ZM5.4838 20C4.92067 20 4.44693 19.8206 4.06257 19.4619C3.68715 19.0945 3.49944 18.6439 3.49944 18.1102C3.49944 17.5678 3.68715 17.1172 4.06257 16.7585C4.44693 16.3911 4.92067 16.2073 5.4838 16.2073C6.04693 16.2073 6.5162 16.3911 6.89162 16.7585C7.27598 17.1172 7.46816 17.5678 7.46816 18.1102C7.46816 18.6439 7.27598 19.0945 6.89162 19.4619C6.5162 19.8206 6.04693 20 5.4838 20Z'
+        }
+        fill={'currentColor'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconResource.tsx b/app/[lang]/_icons/IconResource.tsx
index d286786..40105bf 100644
--- a/app/[lang]/_icons/IconResource.tsx
+++ b/app/[lang]/_icons/IconResource.tsx
@@ -1,64 +1,52 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconResource(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_30_707)'}>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M23 12C23 18.075 18.075 23 12 23C5.925 23 1 18.075 1 12C1 5.925 5.925 1 12 1C18.075 1 23 5.925 23 12Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M9 9V9.01'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M15 9V9.01'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M9 14.9902V15.0002'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M15 14.9902V15.0002'}
-					stroke={'currentColor'}
-					strokeWidth={'2'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_30_707'}>
-					<rect
-						width={'24'}
-						height={'24'}
-						fill={'currentColor'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_30_707)'}>
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={'M23 12C23 18.075 18.075 23 12 23C5.925 23 1 18.075 1 12C1 5.925 5.925 1 12 1C18.075 1 23 5.925 23 12Z'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M9 9V9.01'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M15 9V9.01'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M9 14.9902V15.0002'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M15 14.9902V15.0002'}
+          stroke={'currentColor'}
+          strokeWidth={'2'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_30_707'}>
+          <rect width={'24'} height={'24'} fill={'currentColor'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconScanDevice.tsx b/app/[lang]/_icons/IconScanDevice.tsx
index d11c3f7..f3bfa1c 100644
--- a/app/[lang]/_icons/IconScanDevice.tsx
+++ b/app/[lang]/_icons/IconScanDevice.tsx
@@ -1,60 +1,54 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconScanDevice(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M3.33301 14.1667H16.6663'}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M6.66699 5V10'}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M10.0002 5V5.83333'}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M10.0002 9.16675V10.0001'}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M13.3335 5V10'}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M15.6248 19.1666H4.37476C3.33976 19.1666 2.49976 18.4199 2.49976 17.4999V2.49992C2.49976 1.57992 3.33976 0.833252 4.37476 0.833252H15.6248C16.6598 0.833252 17.4998 1.57992 17.4998 2.49992V17.4999C17.4998 18.4199 16.6598 19.1666 15.6248 19.1666Z'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'1.66667'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M3.33301 14.1667H16.6663'}
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M6.66699 5V10'}
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M10.0002 5V5.83333'}
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M10.0002 9.16675V10.0001'}
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M13.3335 5V10'}
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M15.6248 19.1666H4.37476C3.33976 19.1666 2.49976 18.4199 2.49976 17.4999V2.49992C2.49976 1.57992 3.33976 0.833252 4.37476 0.833252H15.6248C16.6598 0.833252 17.4998 1.57992 17.4998 2.49992V17.4999C17.4998 18.4199 16.6598 19.1666 15.6248 19.1666Z'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'1.66667'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconSendReceive.tsx b/app/[lang]/_icons/IconSendReceive.tsx
index 1bda30b..7d83a4c 100644
--- a/app/[lang]/_icons/IconSendReceive.tsx
+++ b/app/[lang]/_icons/IconSendReceive.tsx
@@ -1,42 +1,18 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconSendReceive(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M18 22L22 18L18 14'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M22 18H6'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M6 2L2 6L6 10'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M2 6H18'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={'M18 22L22 18L18 14'}
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path d={'M22 18H6'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+      <path d={'M6 2L2 6L6 10'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+      <path d={'M2 6H18'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconShapeshift.tsx b/app/[lang]/_icons/IconShapeshift.tsx
index 65809ad..8dfeeea 100644
--- a/app/[lang]/_icons/IconShapeshift.tsx
+++ b/app/[lang]/_icons/IconShapeshift.tsx
@@ -1,20 +1,14 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconShapeshift(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'30'}
-			height={'32'}
-			viewBox={'0 0 30 32'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M29.4538 0.991394C29.4538 0.44062 29.015 0 28.4665 0C27.918 0 28.2471 -5.58794e-08 28.1374 0.0550774H28.0826L19.581 3.63511H9.98248L1.37122 0.0550774C1.26152 0.0550774 1.15183 0 0.987279 0C0.438791 0 0 0.44062 0 0.991394C0 1.54217 0 1.04647 0 1.10155C0 1.15663 1.97456 13.2186 1.97456 13.2186L0.0548487 19.7728C0.0548487 19.938 0.0548487 19.9931 0.0548487 20.1033C0.0548487 20.4888 0.274244 20.8193 0.548488 20.9845L6.80125 24.179C9.3243 25.7212 10.3664 27.4836 12.2861 29.7418L13.9316 31.6145V31.7246C14.2058 31.8898 14.4252 32 14.6995 32C14.9737 32 15.248 31.8898 15.4125 31.6695L17.058 29.7418C18.9777 27.4836 20.0198 25.7212 22.5429 24.179L28.7956 20.9845C29.1247 20.8193 29.2893 20.4888 29.2893 20.1033C29.2893 19.7177 29.2893 19.938 29.2893 19.8279L27.3696 13.2737L29.3441 1.15663C29.3441 1.15663 29.3441 1.10155 29.3441 1.04647L29.4538 0.991394ZM26.5468 3.46988L25.4498 10.2444L21.8298 5.50774L26.6017 3.52496L26.5468 3.46988ZM10.2567 6.16867H19.1422L23.585 12.0069H5.81397L10.2567 6.16867ZM14.7543 21.6454L6.47216 14.5404H23.0365L14.7543 21.6454ZM7.67883 5.45267L4.05881 10.1893L2.96184 3.4148L7.73368 5.39759L7.67883 5.45267ZM2.90699 19.1119L3.94911 15.9725L11.0246 22.3064L2.90699 19.1119ZM14.7543 28.0344L11.6279 24.2892L14.7543 24.7298L17.8807 24.2892L14.7543 28.0344ZM18.4292 22.3064L25.5047 15.9725L26.5468 19.1119L18.4292 22.3064Z'
-				}
-				fill={'currentColor'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'30'} height={'32'} viewBox={'0 0 30 32'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M29.4538 0.991394C29.4538 0.44062 29.015 0 28.4665 0C27.918 0 28.2471 -5.58794e-08 28.1374 0.0550774H28.0826L19.581 3.63511H9.98248L1.37122 0.0550774C1.26152 0.0550774 1.15183 0 0.987279 0C0.438791 0 0 0.44062 0 0.991394C0 1.54217 0 1.04647 0 1.10155C0 1.15663 1.97456 13.2186 1.97456 13.2186L0.0548487 19.7728C0.0548487 19.938 0.0548487 19.9931 0.0548487 20.1033C0.0548487 20.4888 0.274244 20.8193 0.548488 20.9845L6.80125 24.179C9.3243 25.7212 10.3664 27.4836 12.2861 29.7418L13.9316 31.6145V31.7246C14.2058 31.8898 14.4252 32 14.6995 32C14.9737 32 15.248 31.8898 15.4125 31.6695L17.058 29.7418C18.9777 27.4836 20.0198 25.7212 22.5429 24.179L28.7956 20.9845C29.1247 20.8193 29.2893 20.4888 29.2893 20.1033C29.2893 19.7177 29.2893 19.938 29.2893 19.8279L27.3696 13.2737L29.3441 1.15663C29.3441 1.15663 29.3441 1.10155 29.3441 1.04647L29.4538 0.991394ZM26.5468 3.46988L25.4498 10.2444L21.8298 5.50774L26.6017 3.52496L26.5468 3.46988ZM10.2567 6.16867H19.1422L23.585 12.0069H5.81397L10.2567 6.16867ZM14.7543 21.6454L6.47216 14.5404H23.0365L14.7543 21.6454ZM7.67883 5.45267L4.05881 10.1893L2.96184 3.4148L7.73368 5.39759L7.67883 5.45267ZM2.90699 19.1119L3.94911 15.9725L11.0246 22.3064L2.90699 19.1119ZM14.7543 28.0344L11.6279 24.2892L14.7543 24.7298L17.8807 24.2892L14.7543 28.0344ZM18.4292 22.3064L25.5047 15.9725L26.5468 19.1119L18.4292 22.3064Z'
+        }
+        fill={'currentColor'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconShield.tsx b/app/[lang]/_icons/IconShield.tsx
index f5f0e81..b089660 100644
--- a/app/[lang]/_icons/IconShield.tsx
+++ b/app/[lang]/_icons/IconShield.tsx
@@ -1,22 +1,16 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconShield(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M11.5144 0.125843L2.51436 5.12584C2.19689 5.30221 2 5.63683 2 6V12C2.1566 17.873 4.79595 21.6963 11.6892 23.9505C11.8911 24.0165 12.1089 24.0165 12.3108 23.9505C19.2041 21.6963 21.8434 17.873 21.9996 12.0267L22 6C22 5.63683 21.8031 5.30221 21.4856 5.12584L12.4856 0.125843C12.1836 -0.0419476 11.8164 -0.0419476 11.5144 0.125843ZM20 6.5884V12C19.8683 16.9156 17.8222 19.9611 12 21.9458C6.17776 19.9611 4.13171 16.9151 3.99964 11.9733L3.99996 6.58842L12 2.14396L20 6.5884ZM7.66795 12.4453C7.9743 11.9858 8.59517 11.8616 9.0547 12.1679L11.2226 13.6132L14.6679 8.4453C14.9743 7.98577 15.5952 7.8616 16.0547 8.16795C16.5142 8.4743 16.6384 9.09517 16.3321 9.5547L12.3321 15.5547C12.0257 16.0142 11.4048 16.1384 10.9453 15.8321L7.9453 13.8321C7.48577 13.5257 7.3616 12.9048 7.66795 12.4453Z'
-				}
-				fill={'#E6E6E6'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M11.5144 0.125843L2.51436 5.12584C2.19689 5.30221 2 5.63683 2 6V12C2.1566 17.873 4.79595 21.6963 11.6892 23.9505C11.8911 24.0165 12.1089 24.0165 12.3108 23.9505C19.2041 21.6963 21.8434 17.873 21.9996 12.0267L22 6C22 5.63683 21.8031 5.30221 21.4856 5.12584L12.4856 0.125843C12.1836 -0.0419476 11.8164 -0.0419476 11.5144 0.125843ZM20 6.5884V12C19.8683 16.9156 17.8222 19.9611 12 21.9458C6.17776 19.9611 4.13171 16.9151 3.99964 11.9733L3.99996 6.58842L12 2.14396L20 6.5884ZM7.66795 12.4453C7.9743 11.9858 8.59517 11.8616 9.0547 12.1679L11.2226 13.6132L14.6679 8.4453C14.9743 7.98577 15.5952 7.8616 16.0547 8.16795C16.5142 8.4743 16.6384 9.09517 16.3321 9.5547L12.3321 15.5547C12.0257 16.0142 11.4048 16.1384 10.9453 15.8321L7.9453 13.8321C7.48577 13.5257 7.3616 12.9048 7.66795 12.4453Z'
+        }
+        fill={'#E6E6E6'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconStar.tsx b/app/[lang]/_icons/IconStar.tsx
index 3e3f851..287b50c 100644
--- a/app/[lang]/_icons/IconStar.tsx
+++ b/app/[lang]/_icons/IconStar.tsx
@@ -1,36 +1,26 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconStar(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_1046_6228)'}>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M18.4746 7.50004H12.583L10.733 1.37837C10.628 1.05254 10.3321 0.833374 9.99881 0.833374C9.66547 0.833374 9.36964 1.05254 9.26464 1.37837L7.33964 7.50004H1.55464C0.711308 7.50004 0.711308 8.33337 1.02881 8.65171L5.76297 12.1967L3.84631 18.1175C3.74047 18.445 3.85131 18.805 4.12047 19.0109C4.39131 19.2159 4.75797 19.2192 5.03047 19.0184L9.99881 15.3642L14.9671 19.0184C15.1013 19.1167 15.2596 19.1667 15.4163 19.1667C15.578 19.1667 15.7405 19.115 15.8771 19.0109C16.1463 18.805 16.2571 18.445 16.1513 18.1175L14.2346 12.1967L18.968 8.65171C19.2871 8.33337 19.2871 7.50004 18.4746 7.50004Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_1046_6228'}>
-					<rect
-						width={'20'}
-						height={'20'}
-						fill={'currentColor'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_1046_6228)'}>
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M18.4746 7.50004H12.583L10.733 1.37837C10.628 1.05254 10.3321 0.833374 9.99881 0.833374C9.66547 0.833374 9.36964 1.05254 9.26464 1.37837L7.33964 7.50004H1.55464C0.711308 7.50004 0.711308 8.33337 1.02881 8.65171L5.76297 12.1967L3.84631 18.1175C3.74047 18.445 3.85131 18.805 4.12047 19.0109C4.39131 19.2159 4.75797 19.2192 5.03047 19.0184L9.99881 15.3642L14.9671 19.0184C15.1013 19.1167 15.2596 19.1667 15.4163 19.1667C15.578 19.1667 15.7405 19.115 15.8771 19.0109C16.1463 18.805 16.2571 18.445 16.1513 18.1175L14.2346 12.1967L18.968 8.65171C19.2871 8.33337 19.2871 7.50004 18.4746 7.50004Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_1046_6228'}>
+          <rect width={'20'} height={'20'} fill={'currentColor'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconSupport.tsx b/app/[lang]/_icons/IconSupport.tsx
index 0fa0f86..ff73241 100644
--- a/app/[lang]/_icons/IconSupport.tsx
+++ b/app/[lang]/_icons/IconSupport.tsx
@@ -1,75 +1,65 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconSupport(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_1395_7321)'}>
-				<path
-					d={'M12.9473 7.05341L16.4831 3.51758'}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M3.51758 16.4831L7.05341 12.9473'}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M12.9473 12.9473L16.4831 16.4831'}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					d={'M3.51758 3.51953L7.05341 7.05536'}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M12.9165 7.08312C11.3056 5.47229 8.69396 5.47229 7.08312 7.08312C5.47229 8.69396 5.47229 11.3056 7.08312 12.9165C8.69396 14.5273 11.3056 14.5273 12.9165 12.9165C14.5273 11.3056 14.5273 8.69396 12.9165 7.08312Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-				<path
-					fillRule={'evenodd'}
-					clipRule={'evenodd'}
-					d={
-						'M19.1673 10.0007C19.1673 15.0631 15.0631 19.1673 10.0007 19.1673C4.93815 19.1673 0.833984 15.0631 0.833984 10.0007C0.833984 4.93815 4.93815 0.833984 10.0007 0.833984C15.0631 0.833984 19.1673 4.93815 19.1673 10.0007Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_1395_7321'}>
-					<rect
-						width={'20'}
-						height={'20'}
-						fill={'white'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_1395_7321)'}>
+        <path
+          d={'M12.9473 7.05341L16.4831 3.51758'}
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M3.51758 16.4831L7.05341 12.9473'}
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M12.9473 12.9473L16.4831 16.4831'}
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          d={'M3.51758 3.51953L7.05341 7.05536'}
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M12.9165 7.08312C11.3056 5.47229 8.69396 5.47229 7.08312 7.08312C5.47229 8.69396 5.47229 11.3056 7.08312 12.9165C8.69396 14.5273 11.3056 14.5273 12.9165 12.9165C14.5273 11.3056 14.5273 8.69396 12.9165 7.08312Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+        <path
+          fillRule={'evenodd'}
+          clipRule={'evenodd'}
+          d={
+            'M19.1673 10.0007C19.1673 15.0631 15.0631 19.1673 10.0007 19.1673C4.93815 19.1673 0.833984 15.0631 0.833984 10.0007C0.833984 4.93815 4.93815 0.833984 10.0007 0.833984C15.0631 0.833984 19.1673 4.93815 19.1673 10.0007Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_1395_7321'}>
+          <rect width={'20'} height={'20'} fill={'white'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconTelegram.tsx b/app/[lang]/_icons/IconTelegram.tsx
index f2cd429..9656fe1 100644
--- a/app/[lang]/_icons/IconTelegram.tsx
+++ b/app/[lang]/_icons/IconTelegram.tsx
@@ -1,22 +1,16 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconTelegram(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'41'}
-			height={'40'}
-			viewBox={'0 0 41 40'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M23.5009 11.1547C20.6349 12.3468 14.9069 14.814 6.31702 18.5565C4.92215 19.1112 4.19146 19.6539 4.12494 20.1845C4.01252 21.0812 5.13548 21.4343 6.66466 21.9151C6.87267 21.9806 7.0882 22.0483 7.30915 22.1201C8.81363 22.6092 10.8374 23.1813 11.8895 23.2041C12.8438 23.2247 13.909 22.8312 15.085 22.0237C23.1108 16.6061 27.2538 13.8677 27.5139 13.8087C27.6974 13.767 27.9517 13.7147 28.124 13.8678C28.2962 14.021 28.2793 14.311 28.2611 14.3888C28.1498 14.863 23.7418 18.9611 21.4606 21.0819C20.7495 21.743 20.245 22.212 20.1419 22.3191C19.9109 22.559 19.6755 22.786 19.4492 23.0041C18.0515 24.3515 17.0034 25.3619 19.5072 27.0119C20.7105 27.8049 21.6734 28.4606 22.6339 29.1147C23.683 29.8291 24.7293 30.5417 26.0831 31.4291C26.428 31.6552 26.7574 31.89 27.0782 32.1187C28.299 32.9891 29.3959 33.771 30.7509 33.6463C31.5383 33.5738 32.3516 32.8335 32.7646 30.6254C33.7408 25.4069 35.6595 14.1001 36.103 9.44087C36.1418 9.03266 36.0929 8.51023 36.0537 8.2809C36.0144 8.05156 35.9324 7.72481 35.6343 7.48293C35.2813 7.19646 34.7363 7.13605 34.4925 7.14034C33.3843 7.15987 31.6839 7.75111 23.5009 11.1547Z'
-				}
-				fill={'currentColor'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'41'} height={'40'} viewBox={'0 0 41 40'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M23.5009 11.1547C20.6349 12.3468 14.9069 14.814 6.31702 18.5565C4.92215 19.1112 4.19146 19.6539 4.12494 20.1845C4.01252 21.0812 5.13548 21.4343 6.66466 21.9151C6.87267 21.9806 7.0882 22.0483 7.30915 22.1201C8.81363 22.6092 10.8374 23.1813 11.8895 23.2041C12.8438 23.2247 13.909 22.8312 15.085 22.0237C23.1108 16.6061 27.2538 13.8677 27.5139 13.8087C27.6974 13.767 27.9517 13.7147 28.124 13.8678C28.2962 14.021 28.2793 14.311 28.2611 14.3888C28.1498 14.863 23.7418 18.9611 21.4606 21.0819C20.7495 21.743 20.245 22.212 20.1419 22.3191C19.9109 22.559 19.6755 22.786 19.4492 23.0041C18.0515 24.3515 17.0034 25.3619 19.5072 27.0119C20.7105 27.8049 21.6734 28.4606 22.6339 29.1147C23.683 29.8291 24.7293 30.5417 26.0831 31.4291C26.428 31.6552 26.7574 31.89 27.0782 32.1187C28.299 32.9891 29.3959 33.771 30.7509 33.6463C31.5383 33.5738 32.3516 32.8335 32.7646 30.6254C33.7408 25.4069 35.6595 14.1001 36.103 9.44087C36.1418 9.03266 36.0929 8.51023 36.0537 8.2809C36.0144 8.05156 35.9324 7.72481 35.6343 7.48293C35.2813 7.19646 34.7363 7.13605 34.4925 7.14034C33.3843 7.15987 31.6839 7.75111 23.5009 11.1547Z'
+        }
+        fill={'currentColor'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconTrade.tsx b/app/[lang]/_icons/IconTrade.tsx
index baca052..a77d0b4 100644
--- a/app/[lang]/_icons/IconTrade.tsx
+++ b/app/[lang]/_icons/IconTrade.tsx
@@ -1,76 +1,46 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconTrade(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={'M23 21H16'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M16 16H23'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M16 11H23'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M14 6H23'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M8 6V3C8 1.896 8.896 1 10 1H21C22.104 1 23 1.896 23 3V21'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={'M1 21H16V16H1V21Z'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={'M1 16H16V11H1V16Z'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={'M16 11H1V8C1 6.896 1.896 6 3 6H14C15.104 6 16 6.896 16 8V11Z'}
-				stroke={'#E6E6E6'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path d={'M23 21H16'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+      <path d={'M16 16H23'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+      <path d={'M16 11H23'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+      <path d={'M14 6H23'} stroke={'#E6E6E6'} strokeWidth={'2'} strokeLinecap={'round'} strokeLinejoin={'round'} />
+      <path
+        d={'M8 6V3C8 1.896 8.896 1 10 1H21C22.104 1 23 1.896 23 3V21'}
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={'M1 21H16V16H1V21Z'}
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={'M1 16H16V11H1V16Z'}
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={'M16 11H1V8C1 6.896 1.896 6 3 6H14C15.104 6 16 6.896 16 8V11Z'}
+        stroke={'#E6E6E6'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconTriLink.tsx b/app/[lang]/_icons/IconTriLink.tsx
index 16dbea8..dd769b9 100644
--- a/app/[lang]/_icons/IconTriLink.tsx
+++ b/app/[lang]/_icons/IconTriLink.tsx
@@ -1,46 +1,40 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconTriLink(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'24'}
-			height={'24'}
-			viewBox={'0 0 24 24'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				fillRule={'evenodd'}
-				clipRule={'evenodd'}
-				d={
-					'M18.192 12.6717L17.875 12.6747C17.088 12.7287 16.302 12.2977 15.879 11.5597C15.455 10.8337 15.493 9.90374 15.975 9.13274C16.592 8.14774 16.819 6.97474 16.612 5.83274C16.275 3.94674 14.768 2.43874 12.858 2.07974C11.458 1.82474 10.031 2.18774 8.946 3.07674C7.857 3.96974 7.233 5.28074 7.233 6.67374C7.233 7.59574 7.51 8.49374 8.039 9.27374C8.483 9.92274 8.506 10.7817 8.071 11.5157C7.636 12.2617 6.836 12.6887 6.006 12.6517C5.615 12.6247 5.213 12.6527 4.883 12.7297C2.973 13.0577 1.406 14.6027 1.074 16.4847C0.827001 17.8647 1.205 19.2657 2.108 20.3277C3.013 21.3907 4.335 21.9997 5.734 21.9997C7.488 21.9997 9.1 21.0407 9.95 19.4787C10.342 18.7207 11.092 18.2507 11.907 18.2507H12.086C12.897 18.2507 13.63 18.7147 14.043 19.4767C14.845 21.0327 16.462 21.9997 18.259 21.9997C19.544 21.9997 20.745 21.5017 21.644 20.5967C22.546 19.6897 23.027 18.4887 22.999 17.1857C22.859 14.6967 20.702 12.6717 18.192 12.6717Z'
-				}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M5.50195 17.5V17.51'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M18.502 17.5V17.51'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-			<path
-				d={'M12.002 6.48926V6.49926'}
-				stroke={'currentColor'}
-				strokeWidth={'2'}
-				strokeLinecap={'round'}
-				strokeLinejoin={'round'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'24'} height={'24'} viewBox={'0 0 24 24'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        fillRule={'evenodd'}
+        clipRule={'evenodd'}
+        d={
+          'M18.192 12.6717L17.875 12.6747C17.088 12.7287 16.302 12.2977 15.879 11.5597C15.455 10.8337 15.493 9.90374 15.975 9.13274C16.592 8.14774 16.819 6.97474 16.612 5.83274C16.275 3.94674 14.768 2.43874 12.858 2.07974C11.458 1.82474 10.031 2.18774 8.946 3.07674C7.857 3.96974 7.233 5.28074 7.233 6.67374C7.233 7.59574 7.51 8.49374 8.039 9.27374C8.483 9.92274 8.506 10.7817 8.071 11.5157C7.636 12.2617 6.836 12.6887 6.006 12.6517C5.615 12.6247 5.213 12.6527 4.883 12.7297C2.973 13.0577 1.406 14.6027 1.074 16.4847C0.827001 17.8647 1.205 19.2657 2.108 20.3277C3.013 21.3907 4.335 21.9997 5.734 21.9997C7.488 21.9997 9.1 21.0407 9.95 19.4787C10.342 18.7207 11.092 18.2507 11.907 18.2507H12.086C12.897 18.2507 13.63 18.7147 14.043 19.4767C14.845 21.0327 16.462 21.9997 18.259 21.9997C19.544 21.9997 20.745 21.5017 21.644 20.5967C22.546 19.6897 23.027 18.4887 22.999 17.1857C22.859 14.6967 20.702 12.6717 18.192 12.6717Z'
+        }
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M5.50195 17.5V17.51'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M18.502 17.5V17.51'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+      <path
+        d={'M12.002 6.48926V6.49926'}
+        stroke={'currentColor'}
+        strokeWidth={'2'}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconTwitter.tsx b/app/[lang]/_icons/IconTwitter.tsx
index 139049c..72843e8 100644
--- a/app/[lang]/_icons/IconTwitter.tsx
+++ b/app/[lang]/_icons/IconTwitter.tsx
@@ -1,20 +1,14 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconTwitter(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'33'}
-			height={'28'}
-			viewBox={'0 0 33 28'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<path
-				d={
-					'M26.0027 0.286255H30.9095L20.1895 11.9047L32.8008 27.7148H22.9262L15.1921 18.1261L6.34252 27.7148H1.43268L12.8989 15.2876L0.800781 0.286255H10.926L17.917 9.05074L26.0027 0.286255ZM24.2805 24.9298H26.9995L9.44863 2.92502H6.53091L24.2805 24.9298Z'
-				}
-				fill={'currentColor'}
-			/>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'33'} height={'28'} viewBox={'0 0 33 28'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <path
+        d={
+          'M26.0027 0.286255H30.9095L20.1895 11.9047L32.8008 27.7148H22.9262L15.1921 18.1261L6.34252 27.7148H1.43268L12.8989 15.2876L0.800781 0.286255H10.926L17.917 9.05074L26.0027 0.286255ZM24.2805 24.9298H26.9995L9.44863 2.92502H6.53091L24.2805 24.9298Z'
+        }
+        fill={'currentColor'}
+      />
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconWallet.tsx b/app/[lang]/_icons/IconWallet.tsx
index b0ac1d7..033f2a7 100644
--- a/app/[lang]/_icons/IconWallet.tsx
+++ b/app/[lang]/_icons/IconWallet.tsx
@@ -1,34 +1,24 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconWallet(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'20'}
-			height={'20'}
-			viewBox={'0 0 20 20'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_1082_6167)'}>
-				<path
-					d={
-						'M19.1668 10.0001C19.1668 9.39732 18.9254 8.81924 18.4956 8.39302C18.0658 7.9668 17.4829 7.72735 16.8752 7.72735H13.0557C13.0557 8.53104 12.7338 9.30181 12.1608 9.8701C11.5877 10.4384 10.8105 10.7577 10.0002 10.7577C9.18978 10.7577 8.41259 10.4384 7.83956 9.8701C7.26653 9.30181 6.94461 8.53104 6.94461 7.72735H3.12516C2.51737 7.72735 1.93448 7.9668 1.50471 8.39302C1.07494 8.81924 0.833496 9.39732 0.833496 10.0001M19.1668 10.0001V16.0607C19.1668 16.6635 18.9254 17.2415 18.4956 17.6677C18.0658 18.094 17.4829 18.3334 16.8752 18.3334H3.12516C2.51737 18.3334 1.93448 18.094 1.50471 17.6677C1.07494 17.2415 0.833496 16.6635 0.833496 16.0607V10.0001M19.1668 10.0001V6.96978M0.833496 10.0001V6.96978M19.1668 6.96978C19.1668 6.36701 18.9254 5.78894 18.4956 5.36272C18.0658 4.9365 17.4829 4.69705 16.8752 4.69705H3.12516C2.51737 4.69705 1.93448 4.9365 1.50471 5.36272C1.07494 5.78894 0.833496 6.36701 0.833496 6.96978M19.1668 6.96978V3.93948C19.1668 3.33671 18.9254 2.75863 18.4956 2.33241C18.0658 1.9062 17.4829 1.66675 16.8752 1.66675H3.12516C2.51737 1.66675 1.93448 1.9062 1.50471 2.33241C1.07494 2.75863 0.833496 3.33671 0.833496 3.93948V6.96978'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'1.66667'}
-					strokeLinecap={'round'}
-					strokeLinejoin={'round'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_1082_6167'}>
-					<rect
-						width={'20'}
-						height={'20'}
-						fill={'white'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'20'} height={'20'} viewBox={'0 0 20 20'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_1082_6167)'}>
+        <path
+          d={
+            'M19.1668 10.0001C19.1668 9.39732 18.9254 8.81924 18.4956 8.39302C18.0658 7.9668 17.4829 7.72735 16.8752 7.72735H13.0557C13.0557 8.53104 12.7338 9.30181 12.1608 9.8701C11.5877 10.4384 10.8105 10.7577 10.0002 10.7577C9.18978 10.7577 8.41259 10.4384 7.83956 9.8701C7.26653 9.30181 6.94461 8.53104 6.94461 7.72735H3.12516C2.51737 7.72735 1.93448 7.9668 1.50471 8.39302C1.07494 8.81924 0.833496 9.39732 0.833496 10.0001M19.1668 10.0001V16.0607C19.1668 16.6635 18.9254 17.2415 18.4956 17.6677C18.0658 18.094 17.4829 18.3334 16.8752 18.3334H3.12516C2.51737 18.3334 1.93448 18.094 1.50471 17.6677C1.07494 17.2415 0.833496 16.6635 0.833496 16.0607V10.0001M19.1668 10.0001V6.96978M0.833496 10.0001V6.96978M19.1668 6.96978C19.1668 6.36701 18.9254 5.78894 18.4956 5.36272C18.0658 4.9365 17.4829 4.69705 16.8752 4.69705H3.12516C2.51737 4.69705 1.93448 4.9365 1.50471 5.36272C1.07494 5.78894 0.833496 6.36701 0.833496 6.96978M19.1668 6.96978V3.93948C19.1668 3.33671 18.9254 2.75863 18.4956 2.33241C18.0658 1.9062 17.4829 1.66675 16.8752 1.66675H3.12516C2.51737 1.66675 1.93448 1.9062 1.50471 2.33241C1.07494 2.75863 0.833496 3.33671 0.833496 3.93948V6.96978'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'1.66667'}
+          strokeLinecap={'round'}
+          strokeLinejoin={'round'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_1082_6167'}>
+          <rect width={'20'} height={'20'} fill={'white'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/IconWarpcast.tsx b/app/[lang]/_icons/IconWarpcast.tsx
index fa63ba6..9b033ee 100644
--- a/app/[lang]/_icons/IconWarpcast.tsx
+++ b/app/[lang]/_icons/IconWarpcast.tsx
@@ -1,43 +1,29 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function IconWarpcast(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'41'}
-			height={'40'}
-			viewBox={'0 0 41 40'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_576_2973)'}>
-				<path
-					d={'M0.199219 0H40.1868V39.9876H0.199219V0Z'}
-					fill={'black'}
-				/>
-				<path
-					d={
-						'M30.2864 39.5114H10.0996C4.9035 39.5114 0.675409 35.2836 0.675409 30.0873V9.90063C0.675409 4.70444 4.90352 0.476313 10.0996 0.476313H30.2864C35.4826 0.476313 39.7107 4.70444 39.7107 9.90063V30.0873C39.7107 35.2836 35.4826 39.5114 30.2864 39.5114Z'
-					}
-					stroke={'currentColor'}
-					strokeWidth={'0.952381'}
-				/>
-				<path
-					d={
-						'M26.4363 12.655L24.4646 20.06L22.4865 12.655H17.9342L15.9371 20.1145L13.9466 12.655H8.76172L13.5796 29.0273H18.0527L20.1917 21.4246L22.3305 29.0273H26.8133L31.6206 12.655H26.4363Z'
-					}
-					fill={'currentColor'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_576_2973'}>
-					<rect
-						width={'40'}
-						height={'40'}
-						fill={'currentColor'}
-						transform={'translate(0.199219)'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg {...props} width={'41'} height={'40'} viewBox={'0 0 41 40'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+      <g clipPath={'url(#clip0_576_2973)'}>
+        <path d={'M0.199219 0H40.1868V39.9876H0.199219V0Z'} fill={'black'} />
+        <path
+          d={
+            'M30.2864 39.5114H10.0996C4.9035 39.5114 0.675409 35.2836 0.675409 30.0873V9.90063C0.675409 4.70444 4.90352 0.476313 10.0996 0.476313H30.2864C35.4826 0.476313 39.7107 4.70444 39.7107 9.90063V30.0873C39.7107 35.2836 35.4826 39.5114 30.2864 39.5114Z'
+          }
+          stroke={'currentColor'}
+          strokeWidth={'0.952381'}
+        />
+        <path
+          d={
+            'M26.4363 12.655L24.4646 20.06L22.4865 12.655H17.9342L15.9371 20.1145L13.9466 12.655H8.76172L13.5796 29.0273H18.0527L20.1917 21.4246L22.3305 29.0273H26.8133L31.6206 12.655H26.4363Z'
+          }
+          fill={'currentColor'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_576_2973'}>
+          <rect width={'40'} height={'40'} fill={'currentColor'} transform={'translate(0.199219)'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_icons/ShapeshiftLogo.tsx b/app/[lang]/_icons/ShapeshiftLogo.tsx
index bea5d81..54560ff 100644
--- a/app/[lang]/_icons/ShapeshiftLogo.tsx
+++ b/app/[lang]/_icons/ShapeshiftLogo.tsx
@@ -1,87 +1,79 @@
-import type {ReactNode, SVGProps} from 'react'
+import type { ReactNode, SVGProps } from 'react'
 
 export function ShapeshiftLogo(props: SVGProps<SVGSVGElement>): ReactNode {
-	return (
-		<svg
-			{...props}
-			width={'194'}
-			height={'48'}
-			viewBox={'0 0 194 48'}
-			fill={'none'}
-			xmlns={'http://www.w3.org/2000/svg'}>
-			<g clipPath={'url(#clip0_30_551)'}>
-				<path
-					d={
-						'M40.4235 29.8652L42.1786 26.8359C43.4402 27.7722 45.8535 28.5984 47.8829 28.5984C49.9123 28.5984 49.5284 28.323 49.5284 27.9375C49.5284 27.3867 48.4862 27.3316 47.115 27.1664C44.5371 26.8359 40.8074 26.2851 40.8074 22.9254C40.8074 19.5657 43.4402 18.5743 47.7184 18.5743C51.9966 18.5743 52.6548 19.1802 54.4648 20.3919L52.7096 23.311C51.1738 22.3196 48.925 21.8239 47.2796 21.8239C45.6341 21.8239 46.2374 21.9891 46.2374 22.3746C46.2374 22.9254 47.3344 23.0907 48.7605 23.311C51.2835 23.6965 54.8487 24.2473 54.8487 27.3867C54.8487 30.5261 52.1063 31.9581 47.9926 31.9581C43.8789 31.9581 41.9592 31.0769 40.3686 29.8652H40.4235Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M56.3293 18.7949H61.4302V23.0358H66.6957V18.7949H71.7966V31.7381H66.6957V27.1116H61.4302V31.7381H56.3293V18.7949Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M78.653 18.7949H84.467L90.5552 31.7381H84.9058L84.3024 30.1408H78.8724L78.2691 31.7381H72.6196L78.7079 18.7949H78.653ZM82.9861 26.9463L81.56 23.2561L80.1339 26.9463H83.0409H82.9861Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M91.2681 18.7949H101.525C104.596 18.7949 106.406 20.6124 106.406 23.3112C106.406 26.01 104.651 27.8276 101.525 27.8276H96.4239V31.7932H91.323V18.85L91.2681 18.7949ZM100.428 24.1374C101.031 24.1374 101.415 23.862 101.415 23.3112C101.415 22.7605 101.031 22.5401 100.428 22.5401H96.3691V24.1925H100.428V24.1374Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M107.942 18.7949H121.599V22.3198H113.043V23.6417H121.27V26.8362H113.043V28.2682H121.599V31.7932H107.942V18.7949Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M123.19 29.8652L124.945 26.836C126.207 27.7723 128.62 28.5985 130.65 28.5985C132.679 28.5985 132.295 28.3231 132.295 27.9375C132.295 27.3868 131.253 27.3317 129.882 27.1664C127.304 26.836 123.574 26.2852 123.574 22.9255C123.574 19.5658 126.207 18.5744 130.485 18.5744C134.763 18.5744 135.421 19.1802 137.231 20.3919L135.476 23.311C133.941 22.3196 131.692 21.8239 130.046 21.8239C128.401 21.8239 129.004 21.9892 129.004 22.3747C129.004 22.9255 130.101 23.0907 131.527 23.311C134.05 23.6966 137.615 24.2473 137.615 27.3868C137.615 30.5262 134.873 31.9582 130.759 31.9582C126.646 31.9582 124.726 31.0769 123.135 29.8652H123.19Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M139.096 18.7949H144.197V23.0358H149.463V18.7949H154.563V31.7381H149.463V27.1116H144.197V31.7381H139.096V18.7949Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={'M156.922 18.7949H162.023V31.7381H156.922V18.7949Z'}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M164.381 18.7949H177.764V22.3198H169.482V23.6417H177.435V26.8362H169.482V31.7932H164.381V18.7949Z'
-					}
-					fill={'currentColor'}
-				/>
-				<path
-					d={'M184.347 22.9257H179.794V18.7949H194V22.9257H189.448V31.7932H184.292V22.9257H184.347Z'}
-					fill={'currentColor'}
-				/>
-				<path
-					d={
-						'M29.4538 8.99139C29.4538 8.44062 29.015 8 28.4665 8C27.918 8 28.2471 8 28.1374 8.05508H28.0826L19.581 11.6351H9.98248L1.37122 8.05508C1.26152 8.05508 1.15183 8 0.987279 8C0.438791 8 0 8.44062 0 8.99139C0 9.54217 0 9.04647 0 9.10155C0 9.15663 1.97456 21.2186 1.97456 21.2186L0.0548487 27.7728C0.0548487 27.938 0.0548487 27.9931 0.0548487 28.1033C0.0548487 28.4888 0.274244 28.8193 0.548488 28.9845L6.80125 32.179C9.3243 33.7212 10.3664 35.4836 12.2861 37.7418L13.9316 39.6145V39.7246C14.2058 39.8898 14.4252 40 14.6995 40C14.9737 40 15.248 39.8898 15.4125 39.6695L17.058 37.7418C18.9777 35.4836 20.0198 33.7212 22.5429 32.179L28.7956 28.9845C29.1247 28.8193 29.2893 28.4888 29.2893 28.1033C29.2893 27.7177 29.2893 27.938 29.2893 27.8279L27.3696 21.2737L29.3441 9.15663C29.3441 9.15663 29.3441 9.10155 29.3441 9.04647L29.4538 8.99139ZM26.5468 11.4699L25.4498 18.2444L21.8298 13.5077L26.6017 11.525L26.5468 11.4699ZM10.2567 14.1687H19.1422L23.585 20.0069H5.81397L10.2567 14.1687ZM14.7543 29.6454L6.47216 22.5404H23.0365L14.7543 29.6454ZM7.67883 13.4527L4.05881 18.1893L2.96184 11.4148L7.73368 13.3976L7.67883 13.4527ZM2.90699 27.1119L3.94911 23.9725L11.0246 30.3064L2.90699 27.1119ZM14.7543 36.0344L11.6279 32.2892L14.7543 32.7298L17.8807 32.2892L14.7543 36.0344ZM18.4292 30.3064L25.5047 23.9725L26.5468 27.1119L18.4292 30.3064Z'
-					}
-					fill={'currentColor'}
-				/>
-			</g>
-			<defs>
-				<clipPath id={'clip0_30_551'}>
-					<rect
-						width={'194'}
-						height={'48'}
-						fill={'currentColor'}
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	)
+  return (
+    <svg
+      {...props}
+      width={'194'}
+      height={'48'}
+      viewBox={'0 0 194 48'}
+      fill={'none'}
+      xmlns={'http://www.w3.org/2000/svg'}
+    >
+      <g clipPath={'url(#clip0_30_551)'}>
+        <path
+          d={
+            'M40.4235 29.8652L42.1786 26.8359C43.4402 27.7722 45.8535 28.5984 47.8829 28.5984C49.9123 28.5984 49.5284 28.323 49.5284 27.9375C49.5284 27.3867 48.4862 27.3316 47.115 27.1664C44.5371 26.8359 40.8074 26.2851 40.8074 22.9254C40.8074 19.5657 43.4402 18.5743 47.7184 18.5743C51.9966 18.5743 52.6548 19.1802 54.4648 20.3919L52.7096 23.311C51.1738 22.3196 48.925 21.8239 47.2796 21.8239C45.6341 21.8239 46.2374 21.9891 46.2374 22.3746C46.2374 22.9254 47.3344 23.0907 48.7605 23.311C51.2835 23.6965 54.8487 24.2473 54.8487 27.3867C54.8487 30.5261 52.1063 31.9581 47.9926 31.9581C43.8789 31.9581 41.9592 31.0769 40.3686 29.8652H40.4235Z'
+          }
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M56.3293 18.7949H61.4302V23.0358H66.6957V18.7949H71.7966V31.7381H66.6957V27.1116H61.4302V31.7381H56.3293V18.7949Z'
+          }
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M78.653 18.7949H84.467L90.5552 31.7381H84.9058L84.3024 30.1408H78.8724L78.2691 31.7381H72.6196L78.7079 18.7949H78.653ZM82.9861 26.9463L81.56 23.2561L80.1339 26.9463H83.0409H82.9861Z'
+          }
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M91.2681 18.7949H101.525C104.596 18.7949 106.406 20.6124 106.406 23.3112C106.406 26.01 104.651 27.8276 101.525 27.8276H96.4239V31.7932H91.323V18.85L91.2681 18.7949ZM100.428 24.1374C101.031 24.1374 101.415 23.862 101.415 23.3112C101.415 22.7605 101.031 22.5401 100.428 22.5401H96.3691V24.1925H100.428V24.1374Z'
+          }
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M107.942 18.7949H121.599V22.3198H113.043V23.6417H121.27V26.8362H113.043V28.2682H121.599V31.7932H107.942V18.7949Z'
+          }
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M123.19 29.8652L124.945 26.836C126.207 27.7723 128.62 28.5985 130.65 28.5985C132.679 28.5985 132.295 28.3231 132.295 27.9375C132.295 27.3868 131.253 27.3317 129.882 27.1664C127.304 26.836 123.574 26.2852 123.574 22.9255C123.574 19.5658 126.207 18.5744 130.485 18.5744C134.763 18.5744 135.421 19.1802 137.231 20.3919L135.476 23.311C133.941 22.3196 131.692 21.8239 130.046 21.8239C128.401 21.8239 129.004 21.9892 129.004 22.3747C129.004 22.9255 130.101 23.0907 131.527 23.311C134.05 23.6966 137.615 24.2473 137.615 27.3868C137.615 30.5262 134.873 31.9582 130.759 31.9582C126.646 31.9582 124.726 31.0769 123.135 29.8652H123.19Z'
+          }
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M139.096 18.7949H144.197V23.0358H149.463V18.7949H154.563V31.7381H149.463V27.1116H144.197V31.7381H139.096V18.7949Z'
+          }
+          fill={'currentColor'}
+        />
+        <path d={'M156.922 18.7949H162.023V31.7381H156.922V18.7949Z'} fill={'currentColor'} />
+        <path
+          d={'M164.381 18.7949H177.764V22.3198H169.482V23.6417H177.435V26.8362H169.482V31.7932H164.381V18.7949Z'}
+          fill={'currentColor'}
+        />
+        <path
+          d={'M184.347 22.9257H179.794V18.7949H194V22.9257H189.448V31.7932H184.292V22.9257H184.347Z'}
+          fill={'currentColor'}
+        />
+        <path
+          d={
+            'M29.4538 8.99139C29.4538 8.44062 29.015 8 28.4665 8C27.918 8 28.2471 8 28.1374 8.05508H28.0826L19.581 11.6351H9.98248L1.37122 8.05508C1.26152 8.05508 1.15183 8 0.987279 8C0.438791 8 0 8.44062 0 8.99139C0 9.54217 0 9.04647 0 9.10155C0 9.15663 1.97456 21.2186 1.97456 21.2186L0.0548487 27.7728C0.0548487 27.938 0.0548487 27.9931 0.0548487 28.1033C0.0548487 28.4888 0.274244 28.8193 0.548488 28.9845L6.80125 32.179C9.3243 33.7212 10.3664 35.4836 12.2861 37.7418L13.9316 39.6145V39.7246C14.2058 39.8898 14.4252 40 14.6995 40C14.9737 40 15.248 39.8898 15.4125 39.6695L17.058 37.7418C18.9777 35.4836 20.0198 33.7212 22.5429 32.179L28.7956 28.9845C29.1247 28.8193 29.2893 28.4888 29.2893 28.1033C29.2893 27.7177 29.2893 27.938 29.2893 27.8279L27.3696 21.2737L29.3441 9.15663C29.3441 9.15663 29.3441 9.10155 29.3441 9.04647L29.4538 8.99139ZM26.5468 11.4699L25.4498 18.2444L21.8298 13.5077L26.6017 11.525L26.5468 11.4699ZM10.2567 14.1687H19.1422L23.585 20.0069H5.81397L10.2567 14.1687ZM14.7543 29.6454L6.47216 22.5404H23.0365L14.7543 29.6454ZM7.67883 13.4527L4.05881 18.1893L2.96184 11.4148L7.73368 13.3976L7.67883 13.4527ZM2.90699 27.1119L3.94911 23.9725L11.0246 30.3064L2.90699 27.1119ZM14.7543 36.0344L11.6279 32.2892L14.7543 32.7298L17.8807 32.2892L14.7543 36.0344ZM18.4292 30.3064L25.5047 23.9725L26.5468 27.1119L18.4292 30.3064Z'
+          }
+          fill={'currentColor'}
+        />
+      </g>
+      <defs>
+        <clipPath id={'clip0_30_551'}>
+          <rect width={'194'} height={'48'} fill={'currentColor'} />
+        </clipPath>
+      </defs>
+    </svg>
+  )
 }
diff --git a/app/[lang]/_utils/cl.ts b/app/[lang]/_utils/cl.ts
index 6526fd4..f65f861 100644
--- a/app/[lang]/_utils/cl.ts
+++ b/app/[lang]/_utils/cl.ts
@@ -7,5 +7,5 @@
  * @returns the joined classes
  */
 export function cl(...classes: (string | null | undefined)[]): string {
-	return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(' ')
 }
diff --git a/app/[lang]/_utils/constants.tsx b/app/[lang]/_utils/constants.tsx
index 51c29e6..816415b 100644
--- a/app/[lang]/_utils/constants.tsx
+++ b/app/[lang]/_utils/constants.tsx
@@ -1,41 +1,41 @@
 import Image from 'next/image'
 
-import {IconActivityRings} from '../_icons/IconActivityRings'
-import {IconBlog} from '../_icons/IconBlog'
-import {IconBulb} from '../_icons/IconBulb'
-import {IconChains} from '../_icons/IconChains'
-import {IconClassic} from '../_icons/IconClassic'
-import {IconDapp} from '../_icons/IconDapp'
-import {IconDiscover} from '../_icons/IconDiscover'
-import {IconDocs} from '../_icons/IconDocs'
-import {IconDollar} from '../_icons/IconDollar'
-import {IconFox} from '../_icons/IconFox'
-import {IconGlobe} from '../_icons/IconGlobe'
-import {IconGovern} from '../_icons/IconGovern'
-import {IconHeart} from '../_icons/IconHeart'
-import {IconMobile} from '../_icons/IconMobile'
-import {IconQuestion} from '../_icons/IconQuestion'
-import {IconResource} from '../_icons/IconResource'
-import {IconScanDevice} from '../_icons/IconScanDevice'
-import {IconShield} from '../_icons/IconShield'
-import {IconStar} from '../_icons/IconStar'
-import {IconSupport} from '../_icons/IconSupport'
-import {IconTriLink} from '../_icons/IconTriLink'
-import {IconWallet} from '../_icons/IconWallet'
-
-import type {TCardsRowSection, TSupportedChainTypes} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import { IconActivityRings } from '../_icons/IconActivityRings'
+import { IconBlog } from '../_icons/IconBlog'
+import { IconBulb } from '../_icons/IconBulb'
+import { IconChains } from '../_icons/IconChains'
+import { IconClassic } from '../_icons/IconClassic'
+import { IconDapp } from '../_icons/IconDapp'
+import { IconDiscover } from '../_icons/IconDiscover'
+import { IconDocs } from '../_icons/IconDocs'
+import { IconDollar } from '../_icons/IconDollar'
+import { IconFox } from '../_icons/IconFox'
+import { IconGlobe } from '../_icons/IconGlobe'
+import { IconGovern } from '../_icons/IconGovern'
+import { IconHeart } from '../_icons/IconHeart'
+import { IconMobile } from '../_icons/IconMobile'
+import { IconQuestion } from '../_icons/IconQuestion'
+import { IconResource } from '../_icons/IconResource'
+import { IconScanDevice } from '../_icons/IconScanDevice'
+import { IconShield } from '../_icons/IconShield'
+import { IconStar } from '../_icons/IconStar'
+import { IconSupport } from '../_icons/IconSupport'
+import { IconTriLink } from '../_icons/IconTriLink'
+import { IconWallet } from '../_icons/IconWallet'
+
+import type { TCardsRowSection, TSupportedChainTypes } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 export type TAppLink = {
-	name: string
-	href: string
-	description?: string
-	icon?: ReactNode
-	target?: string
+  name: string
+  href: string
+  description?: string
+  icon?: ReactNode
+  target?: string
 }
 
 export const dAppUrl =
-	'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=launchdapp&utm_campaign=cta#/trade/eip155:1/erc20:0xc770eefad204b5180df6a14ee197d99d808ee52d/eip155:1/slip44:60/0'
+  'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=launchdapp&utm_campaign=cta#/trade/eip155:1/erc20:0xc770eefad204b5180df6a14ee197d99d808ee52d/eip155:1/slip44:60/0'
 
 const docsUrl = 'https://github.com/shapeshift/web'
 
@@ -49,7 +49,7 @@ export const footerButtonTitle = 'Donate'
 
 export const heroTitle = 'Your multichain crypto home base.'
 export const heroDescription =
-	'Your gateway to trading, tracking, earning, and exploring crypto effortlessly. A community-owned, private, non-custodial, multichain platform putting you in full control of your digital assets.'
+  'Your gateway to trading, tracking, earning, and exploring crypto effortlessly. A community-owned, private, non-custodial, multichain platform putting you in full control of your digital assets.'
 
 export const homepageWhiteTitle = 'Your Wallet. One App.'
 export const homepageBlueTitle = 'Endless Opportunity.'
@@ -68,85 +68,85 @@ export const featureCard4BlueTitle = 'with DeFi'
  ************************************************************************************************/
 
 export type TFoxContract = {
-	chain: 'Ethereum' | 'Arbitrum' | 'Base' | 'Gnosis' | 'Optimism' | 'Polygon'
-	address: string
+  chain: 'Ethereum' | 'Arbitrum' | 'Base' | 'Gnosis' | 'Optimism' | 'Polygon'
+  address: string
 }
 
 export const FOX_CONTRACTS: readonly TFoxContract[] = [
-	{chain: 'Ethereum', address: '0xc770eefad204b5180df6a14ee197d99d808ee52d'},
-	{chain: 'Arbitrum', address: '0xf929de51D91C77E42f5090069E0AD7A09e513c73'},
-	{chain: 'Base', address: '0x2dbe0d779c7A04F7a5de83326973effE23356930'},
-	{chain: 'Gnosis', address: '0x21a42669643f45bc0e086b8fc2ed70c23d67509d'},
-	{chain: 'Optimism', address: '0xf1a0da3367bc7aa04f8d94ba57b862ff37ced174'},
-	{chain: 'Polygon', address: '0x65a05db8322701724c197af82c9cae41195b0aa8'}
+  { chain: 'Ethereum', address: '0xc770eefad204b5180df6a14ee197d99d808ee52d' },
+  { chain: 'Arbitrum', address: '0xf929de51D91C77E42f5090069E0AD7A09e513c73' },
+  { chain: 'Base', address: '0x2dbe0d779c7A04F7a5de83326973effE23356930' },
+  { chain: 'Gnosis', address: '0x21a42669643f45bc0e086b8fc2ed70c23d67509d' },
+  { chain: 'Optimism', address: '0xf1a0da3367bc7aa04f8d94ba57b862ff37ced174' },
+  { chain: 'Polygon', address: '0x65a05db8322701724c197af82c9cae41195b0aa8' },
 ] as const
 
 export const foxTokenTitleWhite = 'Fox'
 export const foxTokenTitleBlue = 'Power'
 export const foxTokenDescription = 'FOX tokens wield mighty power for those who hodl them.'
 export const foxTokenDescriptionNote =
-	"Want to list FOX token on your App or Exchange? Let's get in touch: listings@shapeshiftdao.org"
+  "Want to list FOX token on your App or Exchange? Let's get in touch: listings@shapeshiftdao.org"
 export const section1Title = 'How do I participate?'
 export const section1Description =
-	'You can contribute as little or as much as you want to. Contribute more to get rewarded more. Keep up on everything going on in the DAO. Follow on Twitter for updates, join the Discord to learn about contributing, and discuss governance proposals on the FOX Forum.'
+  'You can contribute as little or as much as you want to. Contribute more to get rewarded more. Keep up on everything going on in the DAO. Follow on Twitter for updates, join the Discord to learn about contributing, and discuss governance proposals on the FOX Forum.'
 
 export const section2Title = 'How is a DAO different than a centralized company?'
 export const section2Article1 =
-	'FOX token holders govern the ShapeShift DAO—a treasury endowed with 567,000,000 FOX Tokens (56.7% of all FOX) and actively generating revenue.'
+  'FOX token holders govern the ShapeShift DAO—a treasury endowed with 567,000,000 FOX Tokens (56.7% of all FOX) and actively generating revenue.'
 export const section2Article2 =
-	'DAOs (Decentralized Autonomous Organizations) are a collective organization owned and managed by its members with all of them having a voice. We are actively building a powerful community around the open-source, self-custody, multi-chain crypto platform for the world.'
+  'DAOs (Decentralized Autonomous Organizations) are a collective organization owned and managed by its members with all of them having a voice. We are actively building a powerful community around the open-source, self-custody, multi-chain crypto platform for the world.'
 export const benefitsTitle = 'Benefits of working with the DAO.'
 export const resourcesTitle = 'Resources'
 export const communityTitle = 'Join our community'
 
 export const foxTokenBenefits = [
-	{
-		title: 'Work from anywhere in the world.',
-		icon: <IconGlobe />
-	},
-	{
-		title: 'Get healthcare coverage (for US based workers)',
-		icon: <IconHeart />
-	},
-	{
-		title: 'Work anonymously',
-		icon: <IconShield />
-	},
-	{
-		title: 'Optional W2s for US contributors',
-		icon: <IconActivityRings />
-	},
-	{
-		title: 'Get paid in USDC, FOX, or Fiat',
-		icon: <IconDollar />
-	},
-	{
-		title: 'Work with a fully distributed team of top talent',
-		icon: <IconTriLink />
-	}
+  {
+    title: 'Work from anywhere in the world.',
+    icon: <IconGlobe />,
+  },
+  {
+    title: 'Get healthcare coverage (for US based workers)',
+    icon: <IconHeart />,
+  },
+  {
+    title: 'Work anonymously',
+    icon: <IconShield />,
+  },
+  {
+    title: 'Optional W2s for US contributors',
+    icon: <IconActivityRings />,
+  },
+  {
+    title: 'Get paid in USDC, FOX, or Fiat',
+    icon: <IconDollar />,
+  },
+  {
+    title: 'Work with a fully distributed team of top talent',
+    icon: <IconTriLink />,
+  },
 ]
 
 export const foxTokenContributeItems = [
-	{
-		title: 'Contribute',
-		href: githubUrl,
-		target: '_blank'
-	},
-	{
-		title: 'Govern',
-		href: 'https://snapshot.box/#/s:shapeshiftdao.eth',
-		target: '_blank'
-	},
-	{
-		title: 'Read Docs',
-		href: docsUrl,
-		target: '_blank'
-	},
-	{
-		title: 'Discuss',
-		href: 'https://forum.shapeshift.com/',
-		target: '_blank'
-	}
+  {
+    title: 'Contribute',
+    href: githubUrl,
+    target: '_blank',
+  },
+  {
+    title: 'Govern',
+    href: 'https://snapshot.box/#/s:shapeshiftdao.eth',
+    target: '_blank',
+  },
+  {
+    title: 'Read Docs',
+    href: docsUrl,
+    target: '_blank',
+  },
+  {
+    title: 'Discuss',
+    href: 'https://forum.shapeshift.com/',
+    target: '_blank',
+  },
 ]
 
 /************************************************************************************************
@@ -164,803 +164,733 @@ export const bannerMobileSubtitle = 'Or download the app'
  ************************************************************************************************/
 
 export const appResources: TAppLink[] = [
-	{
-		name: 'Blog',
-		href: '/blog',
-		description: 'Latest news and updates',
-		icon: <IconBlog />
-	},
-	{
-		name: 'Discover',
-		description: 'Learn more about the ShapeShift ecosystem',
-		href: '/discover',
-		icon: <IconDiscover />
-	},
-	{
-		name: 'FAQ',
-		href: '/faq',
-		description: 'Frequently asked questions',
-		icon: <IconQuestion />
-	},
-	{
-		name: 'Chains',
-		href: '/chains',
-		description: 'Blockchain networks we support',
-		icon: <IconChains />
-	},
-	{
-		name: 'Wallets',
-		href: '/wallets',
-		description: 'Wallets we support',
-		icon: <IconWallet />
-	},
-	{
-		name: 'Protocols',
-		href: '/protocols',
-		description: 'Protocols we support',
-		icon: <IconScanDevice />
-	},
-	{
-		name: 'Support',
-		href: '/support',
-		description: 'We are here to help',
-		icon: <IconSupport />
-	},
-	{
-		name: 'Terms of Service',
-		href: '/terms-of-service',
-		description: 'Our terms and conditions',
-		icon: <IconDocs />
-	},
-	{
-		name: 'Privacy Policy',
-		href: '/privacy-policy',
-		description: 'How we handle your data',
-		icon: <IconDocs />
-	},
-	{
-		name: 'Brand Guidelines',
-		href: 'https://www.figma.com/design/Pvo3sJx2n5TGf1tUgmZR4z/ShapeShift-Brand-Guidelines',
-		description: 'Our brand guidelines',
-		target: '_blank'
-	}
+  {
+    name: 'Blog',
+    href: '/blog',
+    description: 'Latest news and updates',
+    icon: <IconBlog />,
+  },
+  {
+    name: 'Discover',
+    description: 'Learn more about the ShapeShift ecosystem',
+    href: '/discover',
+    icon: <IconDiscover />,
+  },
+  {
+    name: 'FAQ',
+    href: '/faq',
+    description: 'Frequently asked questions',
+    icon: <IconQuestion />,
+  },
+  {
+    name: 'Chains',
+    href: '/chains',
+    description: 'Blockchain networks we support',
+    icon: <IconChains />,
+  },
+  {
+    name: 'Wallets',
+    href: '/wallets',
+    description: 'Wallets we support',
+    icon: <IconWallet />,
+  },
+  {
+    name: 'Protocols',
+    href: '/protocols',
+    description: 'Protocols we support',
+    icon: <IconScanDevice />,
+  },
+  {
+    name: 'Support',
+    href: '/support',
+    description: 'We are here to help',
+    icon: <IconSupport />,
+  },
+  {
+    name: 'Terms of Service',
+    href: '/terms-of-service',
+    description: 'Our terms and conditions',
+    icon: <IconDocs />,
+  },
+  {
+    name: 'Privacy Policy',
+    href: '/privacy-policy',
+    description: 'How we handle your data',
+    icon: <IconDocs />,
+  },
+  {
+    name: 'Brand Guidelines',
+    href: 'https://www.figma.com/design/Pvo3sJx2n5TGf1tUgmZR4z/ShapeShift-Brand-Guidelines',
+    description: 'Our brand guidelines',
+    target: '_blank',
+  },
 ]
 
 export const appDao: TAppLink[] = [
-	{
-		name: 'FOX Token',
-		href: '/dao/fox-token',
-		description: 'Our governance token',
-		icon: <IconFox />
-	},
-	{
-		name: 'Governance',
-		href: 'https://snapshot.box/#/s:shapeshiftdao.eth',
-		description: 'Participate in decision making',
-		icon: <IconGovern />,
-		target: '_blank'
-	},
-	{
-		name: 'Docs',
-		href: docsUrl,
-		description: 'Technical documentation',
-		icon: <IconDocs />,
-		target: '_blank'
-	},
-	{
-		name: 'Join Us',
-		href: 'https://forum.shapeshift.com/',
-		description: 'Join the community',
-		icon: <IconStar />,
-		target: '_blank'
-	},
-	{
-		name: 'Feature Requests',
-		href: 'https://shapeshift.canny.io/feature-requests',
-		description: 'Feature requests',
-		icon: <IconBulb />,
-		target: '_blank'
-	},
-	{
-		name: 'Integration Requests',
-		href: 'https://shapeshift.canny.io/integration-requests',
-		description: 'Integration requests',
-		icon: <IconBulb />,
-		target: '_blank'
-	}
+  {
+    name: 'FOX Token',
+    href: '/dao/fox-token',
+    description: 'Our governance token',
+    icon: <IconFox />,
+  },
+  {
+    name: 'Governance',
+    href: 'https://snapshot.box/#/s:shapeshiftdao.eth',
+    description: 'Participate in decision making',
+    icon: <IconGovern />,
+    target: '_blank',
+  },
+  {
+    name: 'Docs',
+    href: docsUrl,
+    description: 'Technical documentation',
+    icon: <IconDocs />,
+    target: '_blank',
+  },
+  {
+    name: 'Join Us',
+    href: 'https://forum.shapeshift.com/',
+    description: 'Join the community',
+    icon: <IconStar />,
+    target: '_blank',
+  },
+  {
+    name: 'Feature Requests',
+    href: 'https://shapeshift.canny.io/feature-requests',
+    description: 'Feature requests',
+    icon: <IconBulb />,
+    target: '_blank',
+  },
+  {
+    name: 'Integration Requests',
+    href: 'https://shapeshift.canny.io/integration-requests',
+    description: 'Integration requests',
+    icon: <IconBulb />,
+    target: '_blank',
+  },
 ]
 
 export const appProducts: TAppLink[] = [
-	{
-		name: 'App',
-		href: dAppUrl,
-		description: 'Trade, track, buy, and earn with your favorite crypto.',
-		icon: <IconDapp />,
-		target: '_blank'
-	},
-	{
-		name: 'Classic',
-		href: 'https://og.shapeshift.com/?utm_source=mainpage&utm_medium=menu&utm_campaign=classic',
-		description: 'Original ShapeShift platform with classic interface.',
-		icon: <IconClassic />,
-		target: '_blank'
-	},
-	{
-		name: 'Trade',
-		href: '/trade',
-		description: 'Trade 10,000+ assets instantly.',
-		icon: <IconDollar />
-	},
-	{
-		name: 'DeFi Wallet',
-		href: '/defi-wallet',
-		description: 'All-In-One ShapeShift DeFi wallet.',
-		icon: <IconResource />
-	},
-	{
-		name: 'Mobile App',
-		href: '/mobile-app',
-		description: 'The only crypto app you need.',
-		icon: <IconMobile />
-	},
-	{
-		name: 'Buy/Sell Crypto',
-		href: 'https://app.shapeshift.com/#/ramp/trade/buy?utm_source=menu&utm_medium=cta&utm_campaign=buy',
-		description: 'Exchange Fiat for cryptocurrency.',
-		icon: <IconDollar />,
-		target: '_blank'
-	}
+  {
+    name: 'App',
+    href: dAppUrl,
+    description: 'Trade, track, buy, and earn with your favorite crypto.',
+    icon: <IconDapp />,
+    target: '_blank',
+  },
+  {
+    name: 'Classic',
+    href: 'https://og.shapeshift.com/?utm_source=mainpage&utm_medium=menu&utm_campaign=classic',
+    description: 'Original ShapeShift platform with classic interface.',
+    icon: <IconClassic />,
+    target: '_blank',
+  },
+  {
+    name: 'Trade',
+    href: '/trade',
+    description: 'Trade 10,000+ assets instantly.',
+    icon: <IconDollar />,
+  },
+  {
+    name: 'DeFi Wallet',
+    href: '/defi-wallet',
+    description: 'All-In-One ShapeShift DeFi wallet.',
+    icon: <IconResource />,
+  },
+  {
+    name: 'Mobile App',
+    href: '/mobile-app',
+    description: 'The only crypto app you need.',
+    icon: <IconMobile />,
+  },
+  {
+    name: 'Buy/Sell Crypto',
+    href: 'https://app.shapeshift.com/#/ramp/trade/buy?utm_source=menu&utm_medium=cta&utm_campaign=buy',
+    description: 'Exchange Fiat for cryptocurrency.',
+    icon: <IconDollar />,
+    target: '_blank',
+  },
 ]
 
 export const headerTabs = [
-	{name: 'Products', href: '/products', value: 'products'},
-	{name: 'Resources', href: '/resources', value: 'resources'},
-	{name: 'DAO', href: '/dao', value: 'dao'}
+  { name: 'Products', href: '/products', value: 'products' },
+  { name: 'Resources', href: '/resources', value: 'resources' },
+  { name: 'DAO', href: '/dao', value: 'dao' },
 ]
 
 export const footerLinks: Record<string, TAppLink[]> = {
-	Products: appProducts,
-	Resources: appResources,
-	DAO: appDao,
-	Connect: [
-		{name: '𝕏', href: 'https://x.com/shapeshift'},
-		{name: 'Discord', href: 'https://discord.gg/shapeshift'},
-		{name: 'Farcaster', href: 'https://farcaster.xyz/shapeshift'}
-	]
+  Products: appProducts,
+  Resources: appResources,
+  DAO: appDao,
+  Connect: [
+    { name: '𝕏', href: 'https://x.com/shapeshift' },
+    { name: 'Discord', href: 'https://discord.gg/shapeshift' },
+    { name: 'Farcaster', href: 'https://farcaster.xyz/shapeshift' },
+  ],
 }
 
 export const allWallets = [
-	'KeepKey',
-	'ShapeShift Wallet',
-	'MetaMask',
-	'XDEFI',
-	'Wallet Connect',
-	'Ledger',
-	'Coinbase Wallet',
-	'Phantom Wallet',
-	'Keplr'
+  'KeepKey',
+  'ShapeShift Wallet',
+  'MetaMask',
+  'XDEFI',
+  'Wallet Connect',
+  'Ledger',
+  'Coinbase Wallet',
+  'Phantom Wallet',
+  'Keplr',
 ]
 
 export const supportedChains = {
-	btc: {
-		name: 'BTC',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Coinbase Wallet']
-	},
-	eth: {
-		name: 'ETH + ERC-20',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet']
-	},
-	base: {
-		name: 'Base',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'Wallet Connect', 'Ledger', 'Coinbase Wallet']
-	},
-	atom: {
-		name: 'ATOM',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Keplr']
-	},
-	gnosis: {
-		name: 'Gnosis',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'Ledger', 'Coinbase Wallet']
-	},
-	doge: {
-		name: 'DOGE',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Coinbase Wallet']
-	},
-	avalanche: {
-		name: 'Avalanche',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet']
-	},
-	bch: {
-		name: 'BCH',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger']
-	},
-	bnbs: {
-		name: 'BNB',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Coinbase Wallet']
-	},
-	arb: {
-		name: 'ARB',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet']
-	},
-	optimism: {
-		name: 'Optimism',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'Wallet Connect', 'Ledger']
-	},
-	polygon: {
-		name: 'Polygon',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet']
-	},
-	thorchain: {
-		name: 'THORChain',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger']
-	},
-	ltc: {
-		name: 'LTC',
-		supported: ['KeepKey', 'ShapeShift Wallet', 'Ledger', 'Coinbase Wallet']
-	},
-	sol: {
-		name: 'SOL',
-		supported: ['Phantom Wallet']
-	}
+  btc: {
+    name: 'BTC',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Coinbase Wallet'],
+  },
+  eth: {
+    name: 'ETH + ERC-20',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet'],
+  },
+  base: {
+    name: 'Base',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'Wallet Connect', 'Ledger', 'Coinbase Wallet'],
+  },
+  atom: {
+    name: 'ATOM',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Keplr'],
+  },
+  gnosis: {
+    name: 'Gnosis',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'Ledger', 'Coinbase Wallet'],
+  },
+  doge: {
+    name: 'DOGE',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Coinbase Wallet'],
+  },
+  avalanche: {
+    name: 'Avalanche',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet'],
+  },
+  bch: {
+    name: 'BCH',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger'],
+  },
+  bnbs: {
+    name: 'BNB',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger', 'Coinbase Wallet'],
+  },
+  arb: {
+    name: 'ARB',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet'],
+  },
+  optimism: {
+    name: 'Optimism',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'Wallet Connect', 'Ledger'],
+  },
+  polygon: {
+    name: 'Polygon',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'MetaMask', 'XDEFI', 'Wallet Connect', 'Ledger', 'Coinbase Wallet'],
+  },
+  thorchain: {
+    name: 'THORChain',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'XDEFI', 'Ledger'],
+  },
+  ltc: {
+    name: 'LTC',
+    supported: ['KeepKey', 'ShapeShift Wallet', 'Ledger', 'Coinbase Wallet'],
+  },
+  sol: {
+    name: 'SOL',
+    supported: ['Phantom Wallet'],
+  },
 }
 
 export const landingCards: TCardsRowSection = {
-	id: 11,
-	title: '',
-	ctaBlock: {
-		id: 1,
-		title: 'Try Classic',
-		url: 'https://og.shapeshift.com/?utm_source=mainpage&utm_medium=card&utm_campaign=classic',
-		target: '_blank'
-	},
-	cards: [
-		{
-			id: 49,
-			title: 'Buy and Sell',
-			description: "Buy crypto with fiat. Sell it back when you're ready. All in one place.",
-			isTextFirst: false,
-			href: 'https://app.shapeshift.com/#/ramp/trade/buy?utm_source=mainpage&utm_medium=cta&utm_campaign=buy',
-			target: '_blank',
-			image: {
-				url: '/landing/cardBuyAndSell.png',
-				width: 922,
-				height: 512,
-				formats: {
-					thumbnail: {
-						width: 245,
-						height: 116,
-						url: '/uploads/thumbnail_img_5997fe520e.png'
-					}
-				}
-			}
-		},
-		{
-			id: 50,
-			title: 'Trade',
-			description: 'Trade 10,000+ assets for Bitcoin, Ethereum, DOGE, & more with one click.',
-			isTextFirst: false,
-			href: 'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=card&utm_campaign=trade#/trade',
-			target: '_blank',
-			image: {
-				url: '/landing/cardethbtc.png',
-				width: 922,
-				height: 512,
-				formats: {
-					thumbnail: {
-						width: 245,
-						height: 116,
-						url: '/uploads/thumbnail_img_5997fe520e.png'
-					}
-				}
-			}
-		},
-		{
-			id: 51,
-			title: 'Shift',
-			description:
-				'Put your crypto to work instantly and start earning with the top DeFi solutions—effortless, permissionless, and non-custodial.',
-			isTextFirst: false,
-			href: 'https://app.shapeshift.com/pools?utm_source=mainpage&utm_medium=card&utm_campaign=1click#/markets/category/oneClickDefiAssets',
-			target: '_blank',
-			image: {
-				url: '/landing/cardShift.png',
-				width: 922,
-				height: 512,
-				formats: {
-					thumbnail: {
-						width: 245,
-						height: 116,
-						url: '/landing/cardShapeshiftDAO.png'
-					}
-				}
-			}
-		}
-	]
+  id: 11,
+  title: '',
+  ctaBlock: {
+    id: 1,
+    title: 'Try Classic',
+    url: 'https://og.shapeshift.com/?utm_source=mainpage&utm_medium=card&utm_campaign=classic',
+    target: '_blank',
+  },
+  cards: [
+    {
+      id: 49,
+      title: 'Buy and Sell',
+      description: "Buy crypto with fiat. Sell it back when you're ready. All in one place.",
+      isTextFirst: false,
+      href: 'https://app.shapeshift.com/#/ramp/trade/buy?utm_source=mainpage&utm_medium=cta&utm_campaign=buy',
+      target: '_blank',
+      image: {
+        url: '/landing/cardBuyAndSell.png',
+        width: 922,
+        height: 512,
+        formats: {
+          thumbnail: {
+            width: 245,
+            height: 116,
+            url: '/uploads/thumbnail_img_5997fe520e.png',
+          },
+        },
+      },
+    },
+    {
+      id: 50,
+      title: 'Trade',
+      description: 'Trade 10,000+ assets for Bitcoin, Ethereum, DOGE, & more with one click.',
+      isTextFirst: false,
+      href: 'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=card&utm_campaign=trade#/trade',
+      target: '_blank',
+      image: {
+        url: '/landing/cardethbtc.png',
+        width: 922,
+        height: 512,
+        formats: {
+          thumbnail: {
+            width: 245,
+            height: 116,
+            url: '/uploads/thumbnail_img_5997fe520e.png',
+          },
+        },
+      },
+    },
+    {
+      id: 51,
+      title: 'Shift',
+      description:
+        'Put your crypto to work instantly and start earning with the top DeFi solutions—effortless, permissionless, and non-custodial.',
+      isTextFirst: false,
+      href: 'https://app.shapeshift.com/pools?utm_source=mainpage&utm_medium=card&utm_campaign=1click#/markets/category/oneClickDefiAssets',
+      target: '_blank',
+      image: {
+        url: '/landing/cardShift.png',
+        width: 922,
+        height: 512,
+        formats: {
+          thumbnail: {
+            width: 245,
+            height: 116,
+            url: '/landing/cardShapeshiftDAO.png',
+          },
+        },
+      },
+    },
+  ],
 }
 
 export const blogTypes = [
-	{
-		title: 'All posts',
-		slug: 'all'
-	},
-	{
-		title: 'Partner Integrations',
-		slug: 'partner-integrations'
-	},
-	{
-		title: 'Ethereum',
-		slug: 'ethereum'
-	},
-	{
-		title: 'Crypto 101',
-		slug: 'crypto-101'
-	},
-	{
-		title: 'Bitcoin',
-		slug: 'bitcoin'
-	},
-	{
-		title: 'Crypto pro',
-		slug: 'crypto-pro'
-	},
-	{
-		title: 'Thought Leadership',
-		slug: 'thought-leadership'
-	},
-	{
-		title: 'Governance Newsletters',
-		slug: 'governance-newsletters'
-	},
-	{
-		title: 'Newsletter',
-		slug: 'newsletter'
-	}
+  {
+    title: 'All posts',
+    slug: 'all',
+  },
+  {
+    title: 'Partner Integrations',
+    slug: 'partner-integrations',
+  },
+  {
+    title: 'Ethereum',
+    slug: 'ethereum',
+  },
+  {
+    title: 'Crypto 101',
+    slug: 'crypto-101',
+  },
+  {
+    title: 'Bitcoin',
+    slug: 'bitcoin',
+  },
+  {
+    title: 'Crypto pro',
+    slug: 'crypto-pro',
+  },
+  {
+    title: 'Thought Leadership',
+    slug: 'thought-leadership',
+  },
+  {
+    title: 'Governance Newsletters',
+    slug: 'governance-newsletters',
+  },
+  {
+    title: 'Newsletter',
+    slug: 'newsletter',
+  },
 ]
 export function blogTypesSlugToCategory(slug: string): string {
-	return blogTypes.find(tab => tab.slug === slug)?.title ?? slug
+  return blogTypes.find((tab) => tab.slug === slug)?.title ?? slug
 }
 
 export const newsroomCategories = [
-	{
-		title: 'All',
-		slug: 'all'
-	},
-	{
-		title: 'In The News',
-		slug: 'in-the-news'
-	},
-	{
-		title: 'Press Releases',
-		slug: 'press-releases'
-	}
+  {
+    title: 'All',
+    slug: 'all',
+  },
+  {
+    title: 'In The News',
+    slug: 'in-the-news',
+  },
+  {
+    title: 'Press Releases',
+    slug: 'press-releases',
+  },
 ]
 export function newsroomCategoriesSlugToCategory(slug: string): string {
-	return newsroomCategories.find(tab => tab.slug === slug)?.title ?? slug
+  return newsroomCategories.find((tab) => tab.slug === slug)?.title ?? slug
 }
 
 export const SUPPORTED_TOKENS = [
-	{
-		symbol: 'ETH',
-		name: 'Ethereum',
-		icon: '/widget/eth_icon.png',
-		slug: 'ethereum',
-		decimals: {
-			btc: 8,
-			eth: 18,
-			sol: 8,
-			usdt: 8,
-			bnbeth: 18
-		},
-		requestKey: 'ETH',
-		tokenAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'
-	},
-	{
-		symbol: 'BTC',
-		name: 'Bitcoin',
-		icon: '/widget/btc_icon.png',
-		slug: 'bitcoin',
-		decimals: {
-			btc: 8,
-			eth: 8,
-			sol: 8,
-			usdt: 8,
-			bnbeth: 18
-		},
-		requestKey: 'BTC'
-	},
-	{
-		symbol: 'USDT',
-		name: 'Tether on Ethereum',
-		icon: '/widget/usdt_icon.png',
-		sublogo: '/widget/eth_icon.png',
-		slug: 'tether-on-ethereum',
-		decimals: {
-			btc: 8,
-			eth: 8,
-			sol: 5,
-			usdt: 8,
-			bnbeth: 6
-		},
-		requestKey: 'USDT-0XDAC17F958D2EE523A2206206994597C13D831EC7',
-		tokenAddress: '0xdac17f958d2ee523a2206206994597c13d831ec7'
-	},
-
-	{
-		symbol: 'SOL',
-		name: 'Solana',
-		icon: '/widget/sol_icon.png',
-		slug: 'solana',
-		decimals: {
-			btc: 9,
-			eth: 18,
-			sol: 8,
-			usdt: 8,
-			bnbeth: 18
-		},
-		requestKey: 'SOL'
-	}
+  {
+    symbol: 'ETH',
+    name: 'Ethereum',
+    icon: '/widget/eth_icon.png',
+    slug: 'ethereum',
+    decimals: {
+      btc: 8,
+      eth: 18,
+      sol: 8,
+      usdt: 8,
+      bnbeth: 18,
+    },
+    requestKey: 'ETH',
+    tokenAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+  },
+  {
+    symbol: 'BTC',
+    name: 'Bitcoin',
+    icon: '/widget/btc_icon.png',
+    slug: 'bitcoin',
+    decimals: {
+      btc: 8,
+      eth: 8,
+      sol: 8,
+      usdt: 8,
+      bnbeth: 18,
+    },
+    requestKey: 'BTC',
+  },
+  {
+    symbol: 'USDT',
+    name: 'Tether on Ethereum',
+    icon: '/widget/usdt_icon.png',
+    sublogo: '/widget/eth_icon.png',
+    slug: 'tether-on-ethereum',
+    decimals: {
+      btc: 8,
+      eth: 8,
+      sol: 5,
+      usdt: 8,
+      bnbeth: 6,
+    },
+    requestKey: 'USDT-0XDAC17F958D2EE523A2206206994597C13D831EC7',
+    tokenAddress: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+  },
+
+  {
+    symbol: 'SOL',
+    name: 'Solana',
+    icon: '/widget/sol_icon.png',
+    slug: 'solana',
+    decimals: {
+      btc: 9,
+      eth: 18,
+      sol: 8,
+      usdt: 8,
+      bnbeth: 18,
+    },
+    requestKey: 'SOL',
+  },
 ]
 
 export const SUPPORTED_CHAINS = [
-	{
-		id: 'bitcoin',
-		name: 'Bitcoin',
-		icon: '/widget/btc_icon.png',
-		requestKey: 'BTC'
-	},
-	{
-		id: 'base',
-		name: 'Base',
-		icon: '/widget/base_icon.png',
-		requestKey: 'BASE'
-	},
-	{
-		id: 'ethereum',
-		name: 'Ethereum',
-		icon: '/widget/eth_icon.png',
-		requestKey: 'ETH',
-		chainId: '1'
-	},
-	{
-		id: 'solana',
-		name: 'Solana',
-		icon: '/widget/sol_icon.png',
-		requestKey: 'SOL'
-	}
+  {
+    id: 'bitcoin',
+    name: 'Bitcoin',
+    icon: '/widget/btc_icon.png',
+    requestKey: 'BTC',
+  },
+  {
+    id: 'base',
+    name: 'Base',
+    icon: '/widget/base_icon.png',
+    requestKey: 'BASE',
+  },
+  {
+    id: 'ethereum',
+    name: 'Ethereum',
+    icon: '/widget/eth_icon.png',
+    requestKey: 'ETH',
+    chainId: '1',
+  },
+  {
+    id: 'solana',
+    name: 'Solana',
+    icon: '/widget/sol_icon.png',
+    requestKey: 'SOL',
+  },
 ]
 
 export const TOKEN_CHAIN_SUPPORT: Record<string, string[]> = {
-	USDT: ['arbitrum', 'ethereum', 'optimism'],
-	BTC: ['bitcoin'],
-	BNBETH: ['ethereum'],
-	BNB: ['bnb'],
-	SOL: ['solana'],
-	ETH: ['arbitrum', 'base', 'optimism', 'ethereum']
+  USDT: ['arbitrum', 'ethereum', 'optimism'],
+  BTC: ['bitcoin'],
+  BNBETH: ['ethereum'],
+  BNB: ['bnb'],
+  SOL: ['solana'],
+  ETH: ['arbitrum', 'base', 'optimism', 'ethereum'],
 }
 
 export const blogTags = [
-	{
-		title: 'All tags',
-		slug: 'all'
-	},
-	{
-		title: 'Arbitrum',
-		slug: 'arbitrum'
-	},
-	{
-		title: 'Bitcoin',
-		slug: 'bitcoin'
-	},
-	{
-		title: 'Bitcoin Price',
-		slug: 'bitcoin-price'
-	},
-	{
-		title: 'Bitcoin Wallet',
-		slug: 'bitcoin-wallet'
-	},
-	{
-		title: 'CoinCap',
-		slug: 'coincap'
-	},
-	{
-		title: 'Cryptocurrency',
-		slug: 'cryptocurrency'
-	},
-	{
-		title: 'Culture',
-		slug: 'culture'
-	},
-	{
-		title: 'DAO',
-		slug: 'dao'
-	},
-	{
-		title: 'DeFi',
-		slug: 'defi'
-	},
-	{
-		title: 'Developer',
-		slug: 'developer'
-	},
-	{
-		title: 'DEX',
-		slug: 'dex'
-	},
-	{
-		title: 'Ethereum',
-		slug: 'ethereum'
-	},
-	{
-		title: 'Finance',
-		slug: 'finance'
-	},
-	{
-		title: 'FOX Token',
-		slug: 'fox-token'
-	},
-	{
-		title: 'KeepKey',
-		slug: 'keepkey'
-	},
-	{
-		title: 'Ledger',
-		slug: 'ledger'
-	},
-	{
-		title: 'Mobile',
-		slug: 'mobile'
-	},
-	{
-		title: 'News',
-		slug: 'news'
-	},
-	{
-		title: 'Optimism',
-		slug: 'optimism'
-	},
-	{
-		title: 'Portis',
-		slug: 'portis'
-	},
-	{
-		title: 'Security',
-		slug: 'security'
-	},
-	{
-		title: 'ShapeShift',
-		slug: 'shapeshift'
-	},
-	{
-		title: 'THORChain',
-		slug: 'thorchain'
-	},
-	{
-		title: 'Trader',
-		slug: 'trader'
-	},
-	{
-		title: 'Trading',
-		slug: 'trading'
-	},
-	{
-		title: 'Trezor',
-		slug: 'trezor'
-	},
-	{
-		title: 'Wallet',
-		slug: 'wallet'
-	}
+  {
+    title: 'All tags',
+    slug: 'all',
+  },
+  {
+    title: 'Arbitrum',
+    slug: 'arbitrum',
+  },
+  {
+    title: 'Bitcoin',
+    slug: 'bitcoin',
+  },
+  {
+    title: 'Bitcoin Price',
+    slug: 'bitcoin-price',
+  },
+  {
+    title: 'Bitcoin Wallet',
+    slug: 'bitcoin-wallet',
+  },
+  {
+    title: 'CoinCap',
+    slug: 'coincap',
+  },
+  {
+    title: 'Cryptocurrency',
+    slug: 'cryptocurrency',
+  },
+  {
+    title: 'Culture',
+    slug: 'culture',
+  },
+  {
+    title: 'DAO',
+    slug: 'dao',
+  },
+  {
+    title: 'DeFi',
+    slug: 'defi',
+  },
+  {
+    title: 'Developer',
+    slug: 'developer',
+  },
+  {
+    title: 'DEX',
+    slug: 'dex',
+  },
+  {
+    title: 'Ethereum',
+    slug: 'ethereum',
+  },
+  {
+    title: 'Finance',
+    slug: 'finance',
+  },
+  {
+    title: 'FOX Token',
+    slug: 'fox-token',
+  },
+  {
+    title: 'KeepKey',
+    slug: 'keepkey',
+  },
+  {
+    title: 'Ledger',
+    slug: 'ledger',
+  },
+  {
+    title: 'Mobile',
+    slug: 'mobile',
+  },
+  {
+    title: 'News',
+    slug: 'news',
+  },
+  {
+    title: 'Optimism',
+    slug: 'optimism',
+  },
+  {
+    title: 'Portis',
+    slug: 'portis',
+  },
+  {
+    title: 'Security',
+    slug: 'security',
+  },
+  {
+    title: 'ShapeShift',
+    slug: 'shapeshift',
+  },
+  {
+    title: 'THORChain',
+    slug: 'thorchain',
+  },
+  {
+    title: 'Trader',
+    slug: 'trader',
+  },
+  {
+    title: 'Trading',
+    slug: 'trading',
+  },
+  {
+    title: 'Trezor',
+    slug: 'trezor',
+  },
+  {
+    title: 'Wallet',
+    slug: 'wallet',
+  },
 ]
 
 export const newsroomTags = [
-	{
-		title: 'All tags',
-		slug: 'all'
-	},
-	{
-		title: 'Cryptocurrency',
-		slug: 'cryptocurrency'
-	},
-	{
-		title: 'DeFi',
-		slug: 'defi'
-	},
-	{
-		title: 'Ethereum',
-		slug: 'ethereum'
-	},
-	{
-		title: 'Finance',
-		slug: 'finance'
-	},
-	{
-		title: 'Culture',
-		slug: 'culture'
-	},
-	{
-		title: 'DEX',
-		slug: 'dex'
-	},
-	{
-		title: 'Bitcoin',
-		slug: 'bitcoin'
-	},
-	{
-		title: 'DAO',
-		slug: 'dao'
-	},
-	{
-		title: 'ShapeShift',
-		slug: 'shapeshift'
-	},
-	{
-		title: 'KeepKey',
-		slug: 'keepkey'
-	},
-	{
-		title: 'News',
-		slug: 'news'
-	},
-	{
-		title: 'Trading',
-		slug: 'trading'
-	},
-	{
-		title: 'Bitcoin Wallet',
-		slug: 'bitcoin-wallet'
-	},
-	{
-		title: 'Security',
-		slug: 'security'
-	},
-	{
-		title: 'Developer',
-		slug: 'developer'
-	},
-	{
-		title: 'Bitcoin Price',
-		slug: 'bitcoin-price'
-	},
-	{
-		title: 'Optimism',
-		slug: 'optimism'
-	},
-	{
-		title: 'Trader',
-		slug: 'trader'
-	},
-	{
-		title: 'Ledger',
-		slug: 'ledger'
-	},
-	{
-		title: 'Mobile',
-		slug: 'mobile'
-	}
+  {
+    title: 'All tags',
+    slug: 'all',
+  },
+  {
+    title: 'Cryptocurrency',
+    slug: 'cryptocurrency',
+  },
+  {
+    title: 'DeFi',
+    slug: 'defi',
+  },
+  {
+    title: 'Ethereum',
+    slug: 'ethereum',
+  },
+  {
+    title: 'Finance',
+    slug: 'finance',
+  },
+  {
+    title: 'Culture',
+    slug: 'culture',
+  },
+  {
+    title: 'DEX',
+    slug: 'dex',
+  },
+  {
+    title: 'Bitcoin',
+    slug: 'bitcoin',
+  },
+  {
+    title: 'DAO',
+    slug: 'dao',
+  },
+  {
+    title: 'ShapeShift',
+    slug: 'shapeshift',
+  },
+  {
+    title: 'KeepKey',
+    slug: 'keepkey',
+  },
+  {
+    title: 'News',
+    slug: 'news',
+  },
+  {
+    title: 'Trading',
+    slug: 'trading',
+  },
+  {
+    title: 'Bitcoin Wallet',
+    slug: 'bitcoin-wallet',
+  },
+  {
+    title: 'Security',
+    slug: 'security',
+  },
+  {
+    title: 'Developer',
+    slug: 'developer',
+  },
+  {
+    title: 'Bitcoin Price',
+    slug: 'bitcoin-price',
+  },
+  {
+    title: 'Optimism',
+    slug: 'optimism',
+  },
+  {
+    title: 'Trader',
+    slug: 'trader',
+  },
+  {
+    title: 'Ledger',
+    slug: 'ledger',
+  },
+  {
+    title: 'Mobile',
+    slug: 'mobile',
+  },
 ]
 
 export const carouselLogos = {
-	cowSwap: {
-		href: 'https://cow.fi/',
-		src: '/landing/cow-swap.png',
-		Logo: () => (
-			<Image
-				src={'/landing/cow-swap.png'}
-				alt={'cow swap'}
-				width={200}
-				height={40}
-			/>
-		)
-	},
-	thorchain: {
-		href: 'https://thorchain.org/',
-		src: '/landing/thorchain.png',
-		Logo: () => (
-			<Image
-				src={'/landing/thorchain.png'}
-				alt={'thorchain'}
-				width={180}
-				height={40}
-			/>
-		)
-	},
-	onramper: {
-		href: 'https://www.onramper.com/',
-		src: '/landing/onramper.png',
-		Logo: () => (
-			<Image
-				src={'/landing/onramper.png'}
-				alt={'onramper'}
-				width={160}
-				height={40}
-			/>
-		)
-	},
-	banxa: {
-		href: 'https://banxa.com/',
-		src: '/landing/banxa.png',
-		Logo: () => (
-			<Image
-				src={'/landing/banxa.png'}
-				alt={'banxa'}
-				width={160}
-				height={40}
-			/>
-		)
-	},
-	Ox: {
-		href: 'https://0x.org/',
-		src: '/landing/0x.png',
-		Logo: () => (
-			<Image
-				src={'/landing/0x.png'}
-				alt={'0x'}
-				width={50}
-				height={40}
-			/>
-		)
-	},
-	mayaProtocol: {
-		href: 'https://mayaprotocol.com/',
-		src: '/landing/maya-protocol.png',
-		Logo: () => (
-			<Image
-				src={'/landing/maya-protocol.png'}
-				alt={'maya protocol'}
-				width={180}
-				height={40}
-			/>
-		)
-	},
-	jupiter: {
-		href: 'https://jup.ag/',
-		src: '/landing/jupiter.png',
-		Logo: () => (
-			<Image
-				src={'/landing/jupiter.png'}
-				alt={'jupiter'}
-				width={150}
-				height={40}
-			/>
-		)
-	},
-	butterNetwork: {
-		href: 'https://butter.network/',
-		src: '/landing/butter-network.png',
-		Logo: () => (
-			<Image
-				src={'/landing/butter-network.png'}
-				alt={'butter network'}
-				width={180}
-				height={40}
-			/>
-		)
-	},
-	chainflip: {
-		href: 'https://chainflip.io/',
-		src: '/landing/chainflip.png',
-		Logo: () => (
-			<Image
-				src={'/landing/chainflip.png'}
-				alt={'chainflip'}
-				width={180}
-				height={40}
-			/>
-		)
-	},
-	relay: {
-		href: 'https://relay.link/',
-		src: '/landing/relay.png',
-		Logo: () => (
-			<Image
-				src={'/landing/relay.png'}
-				alt={'relay'}
-				width={145}
-				height={40}
-			/>
-		)
-	}
+  cowSwap: {
+    href: 'https://cow.fi/',
+    src: '/landing/cow-swap.png',
+    Logo: () => <Image src={'/landing/cow-swap.png'} alt={'cow swap'} width={200} height={40} />,
+  },
+  thorchain: {
+    href: 'https://thorchain.org/',
+    src: '/landing/thorchain.png',
+    Logo: () => <Image src={'/landing/thorchain.png'} alt={'thorchain'} width={180} height={40} />,
+  },
+  onramper: {
+    href: 'https://www.onramper.com/',
+    src: '/landing/onramper.png',
+    Logo: () => <Image src={'/landing/onramper.png'} alt={'onramper'} width={160} height={40} />,
+  },
+  banxa: {
+    href: 'https://banxa.com/',
+    src: '/landing/banxa.png',
+    Logo: () => <Image src={'/landing/banxa.png'} alt={'banxa'} width={160} height={40} />,
+  },
+  Ox: {
+    href: 'https://0x.org/',
+    src: '/landing/0x.png',
+    Logo: () => <Image src={'/landing/0x.png'} alt={'0x'} width={50} height={40} />,
+  },
+  mayaProtocol: {
+    href: 'https://mayaprotocol.com/',
+    src: '/landing/maya-protocol.png',
+    Logo: () => <Image src={'/landing/maya-protocol.png'} alt={'maya protocol'} width={180} height={40} />,
+  },
+  jupiter: {
+    href: 'https://jup.ag/',
+    src: '/landing/jupiter.png',
+    Logo: () => <Image src={'/landing/jupiter.png'} alt={'jupiter'} width={150} height={40} />,
+  },
+  butterNetwork: {
+    href: 'https://butter.network/',
+    src: '/landing/butter-network.png',
+    Logo: () => <Image src={'/landing/butter-network.png'} alt={'butter network'} width={180} height={40} />,
+  },
+  chainflip: {
+    href: 'https://chainflip.io/',
+    src: '/landing/chainflip.png',
+    Logo: () => <Image src={'/landing/chainflip.png'} alt={'chainflip'} width={180} height={40} />,
+  },
+  relay: {
+    href: 'https://relay.link/',
+    src: '/landing/relay.png',
+    Logo: () => <Image src={'/landing/relay.png'} alt={'relay'} width={145} height={40} />,
+  },
 }
 
 /************************************************************************************************
@@ -971,34 +901,34 @@ export const carouselLogos = {
  * - Spring animation for natural feel
  ************************************************************************************************/
 export const popupAnimation = {
-	initial: {
-		opacity: 0,
-		y: 100,
-		scale: 0.95,
-		z: 1
-	},
-	animate: {
-		opacity: 1,
-		y: 0,
-		scale: 1,
-		z: 1,
-		transition: {
-			type: 'spring',
-			stiffness: 200,
-			damping: 15,
-			mass: 0.8,
-			delay: 0.2
-		}
-	},
-	exit: {
-		opacity: 0,
-		y: 50,
-		scale: 0.95,
-		z: 1,
-		transition: {
-			duration: 0.15
-		}
-	}
+  initial: {
+    opacity: 0,
+    y: 100,
+    scale: 0.95,
+    z: 1,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    z: 1,
+    transition: {
+      type: 'spring',
+      stiffness: 200,
+      damping: 15,
+      mass: 0.8,
+      delay: 0.2,
+    },
+  },
+  exit: {
+    opacity: 0,
+    y: 50,
+    scale: 0.95,
+    z: 1,
+    transition: {
+      duration: 0.15,
+    },
+  },
 }
 
 export const CHAIN_TYPES: TSupportedChainTypes[] = ['EVM', 'Solana', 'Bitcoin', 'Cosmos']
@@ -1010,22 +940,22 @@ export const CHAIN_TYPES: TSupportedChainTypes[] = ['EVM', 'Solana', 'Bitcoin',
  * Used in the landing page to showcase key metrics about ShapeShift
  ************************************************************************************************/
 export const landingInfoCards = [
-	{
-		title: 'Active wallets',
-		stat: '35k+'
-	},
-	{
-		title: 'Available chains',
-		stat: '15+'
-	},
-	{
-		title: 'Assets',
-		stat: '10K+'
-	},
-	{
-		title: 'Traded on ShapeShift',
-		stat: '$1.7 billion'
-	}
+  {
+    title: 'Active wallets',
+    stat: '35k+',
+  },
+  {
+    title: 'Available chains',
+    stat: '15+',
+  },
+  {
+    title: 'Assets',
+    stat: '10K+',
+  },
+  {
+    title: 'Traded on ShapeShift',
+    stat: '$1.7 billion',
+  },
 ]
 
 export const statCardsTitle = 'Trusted by \n the Best'
diff --git a/app/[lang]/_utils/dictionary/dao.ts b/app/[lang]/_utils/dictionary/dao.ts
index dba19d1..c3e8ad4 100644
--- a/app/[lang]/_utils/dictionary/dao.ts
+++ b/app/[lang]/_utils/dictionary/dao.ts
@@ -1,10 +1,10 @@
 export const DAO_DICT = {
-	expand: {
-		title: {
-			prefix: 'FOX ',
-			suffix: 'Power'
-		},
-		description: 'FOX tokens wield mighty powers for those who hodl them.',
-		imageAlt: 'FOX Token'
-	}
+  expand: {
+    title: {
+      prefix: 'FOX ',
+      suffix: 'Power',
+    },
+    description: 'FOX tokens wield mighty powers for those who hodl them.',
+    imageAlt: 'FOX Token',
+  },
 } as const
diff --git a/app/[lang]/_utils/dictionary/products.ts b/app/[lang]/_utils/dictionary/products.ts
index cc5fb1a..6a47c5b 100644
--- a/app/[lang]/_utils/dictionary/products.ts
+++ b/app/[lang]/_utils/dictionary/products.ts
@@ -1,22 +1,22 @@
 export const PRODUCTS_DICT = {
-	header: {
-		titleLine1: 'Your Wallet. One App.',
-		titleLine2: 'Endless Opportunity',
-		description: 'Trade Bitcoin, Ethereum and more with the best rates across leading DEXs and aggregators.',
-		ctaButton: 'Trade Smarter'
-	},
-	buyCrypto: {
-		title: 'Buy Crypto',
-		description: 'Need to top up your crypto balance? ShapeShift has you covered with',
-		widgetTitle: 'Onramper Widget'
-	},
-	chainBubbles: {
-		defaultChains: [
-			{url: '/chains/ethereum', image: {url: '/eth.png'}},
-			{url: '/chains/bitcoin', image: {url: '/bitcoin.png'}},
-			{url: '/chains/solana', image: {url: '/sol.png'}},
-			{url: '/chains/ethereum', image: {url: '/eth.png'}},
-			{url: '/chains/bitcoin', image: {url: '/bitcoin.png'}}
-		]
-	}
+  header: {
+    titleLine1: 'Your Wallet. One App.',
+    titleLine2: 'Endless Opportunity',
+    description: 'Trade Bitcoin, Ethereum and more with the best rates across leading DEXs and aggregators.',
+    ctaButton: 'Trade Smarter',
+  },
+  buyCrypto: {
+    title: 'Buy Crypto',
+    description: 'Need to top up your crypto balance? ShapeShift has you covered with',
+    widgetTitle: 'Onramper Widget',
+  },
+  chainBubbles: {
+    defaultChains: [
+      { url: '/chains/ethereum', image: { url: '/eth.png' } },
+      { url: '/chains/bitcoin', image: { url: '/bitcoin.png' } },
+      { url: '/chains/solana', image: { url: '/sol.png' } },
+      { url: '/chains/ethereum', image: { url: '/eth.png' } },
+      { url: '/chains/bitcoin', image: { url: '/bitcoin.png' } },
+    ],
+  },
 } as const
diff --git a/app/[lang]/_utils/dictionary/resources.ts b/app/[lang]/_utils/dictionary/resources.ts
index 5ba5ba5..c46a961 100644
--- a/app/[lang]/_utils/dictionary/resources.ts
+++ b/app/[lang]/_utils/dictionary/resources.ts
@@ -1,28 +1,27 @@
 export const RESOURCES_DICT = {
-	discover: {
-		title: 'Explore Web3 with ShapeShift',
-		ctaButton: 'Get Started'
-	},
-	faq: {
-		title: 'Frequently Asked Questions | ShapeShift',
-		description: 'Find answers to common questions about ShapeShift, cryptocurrency, and decentralized finance.',
-		keywords: 'ShapeShift, FAQ, cryptocurrency, questions, help, support, DeFi',
-		noDataMessage: 'No FAQ data available. Please check back later.',
-		metadata: {
-			title: 'Frequently Asked Questions | ShapeShift',
-			description:
-				'Find answers to common questions about ShapeShift, cryptocurrency, and decentralized finance.',
-			keywords: 'ShapeShift, FAQ, cryptocurrency, questions, help, support, DeFi'
-		}
-	},
-	expand: {
-		titleLine1: 'Learn more',
-		titleLine2: 'about ShapeShift.',
-		description: "Your guide to ShapeShift's features, support, and ecosystem."
-	},
-	support: {
-		title: 'Support',
-		description: 'Find answers to your questions and learn more about ShapeShift.',
-		emptyMessage: "We couldn't find any support articles matching your criteria."
-	}
+  discover: {
+    title: 'Explore Web3 with ShapeShift',
+    ctaButton: 'Get Started',
+  },
+  faq: {
+    title: 'Frequently Asked Questions | ShapeShift',
+    description: 'Find answers to common questions about ShapeShift, cryptocurrency, and decentralized finance.',
+    keywords: 'ShapeShift, FAQ, cryptocurrency, questions, help, support, DeFi',
+    noDataMessage: 'No FAQ data available. Please check back later.',
+    metadata: {
+      title: 'Frequently Asked Questions | ShapeShift',
+      description: 'Find answers to common questions about ShapeShift, cryptocurrency, and decentralized finance.',
+      keywords: 'ShapeShift, FAQ, cryptocurrency, questions, help, support, DeFi',
+    },
+  },
+  expand: {
+    titleLine1: 'Learn more',
+    titleLine2: 'about ShapeShift.',
+    description: "Your guide to ShapeShift's features, support, and ecosystem.",
+  },
+  support: {
+    title: 'Support',
+    description: 'Find answers to your questions and learn more about ShapeShift.',
+    emptyMessage: "We couldn't find any support articles matching your criteria.",
+  },
 } as const
diff --git a/app/[lang]/_utils/formatNumber.ts b/app/[lang]/_utils/formatNumber.ts
index da3e123..7949382 100644
--- a/app/[lang]/_utils/formatNumber.ts
+++ b/app/[lang]/_utils/formatNumber.ts
@@ -9,15 +9,15 @@
  * formatNumber(1234567, true, 6) // '1.234567'
  */
 export function formatNumber(num: number, isNative: boolean, decimals = 6): string {
-	const fixed = isNative ? num / 10 ** decimals : num
-	if (Number.isNaN(fixed)) {
-		return '0'
-	}
+  const fixed = isNative ? num / 10 ** decimals : num
+  if (Number.isNaN(fixed)) {
+    return '0'
+  }
 
-	const numStr = fixed.toString()
-	const [whole, decimal] = numStr.split('.')
+  const numStr = fixed.toString()
+  const [whole, decimal] = numStr.split('.')
 
-	const formattedWhole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  const formattedWhole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
-	return decimal ? `${formattedWhole}.${decimal}` : formattedWhole
+  return decimal ? `${formattedWhole}.${decimal}` : formattedWhole
 }
diff --git a/app/[lang]/_utils/i18nconfig.ts b/app/[lang]/_utils/i18nconfig.ts
index 0779a44..1b0a356 100644
--- a/app/[lang]/_utils/i18nconfig.ts
+++ b/app/[lang]/_utils/i18nconfig.ts
@@ -4,49 +4,49 @@
  ************************************************************************************************/
 
 export type TLanguage = {
-	code: string
-	name: string
-	nativeName: string
-	weglotCode: string
+  code: string
+  name: string
+  nativeName: string
+  weglotCode: string
 }
 
 export const SUPPORTED_LANGUAGES: TLanguage[] = [
-	{
-		code: 'en',
-		name: 'English',
-		nativeName: 'English',
-		weglotCode: 'en'
-	},
-	{
-		code: 'ru',
-		name: 'Russian',
-		nativeName: 'Русский',
-		weglotCode: 'ru'
-	},
-	{
-		code: 'de',
-		name: 'German',
-		nativeName: 'Deutsch',
-		weglotCode: 'de'
-	},
-	{
-		code: 'fr',
-		name: 'French',
-		nativeName: 'Français',
-		weglotCode: 'fr'
-	},
-	{
-		code: 'zh',
-		name: 'Chinese',
-		nativeName: '中文',
-		weglotCode: 'zh'
-	},
-	{
-		code: 'es',
-		name: 'Spanish',
-		nativeName: 'Español',
-		weglotCode: 'es'
-	}
+  {
+    code: 'en',
+    name: 'English',
+    nativeName: 'English',
+    weglotCode: 'en',
+  },
+  {
+    code: 'ru',
+    name: 'Russian',
+    nativeName: 'Русский',
+    weglotCode: 'ru',
+  },
+  {
+    code: 'de',
+    name: 'German',
+    nativeName: 'Deutsch',
+    weglotCode: 'de',
+  },
+  {
+    code: 'fr',
+    name: 'French',
+    nativeName: 'Français',
+    weglotCode: 'fr',
+  },
+  {
+    code: 'zh',
+    name: 'Chinese',
+    nativeName: '中文',
+    weglotCode: 'zh',
+  },
+  {
+    code: 'es',
+    name: 'Spanish',
+    nativeName: 'Español',
+    weglotCode: 'es',
+  },
 ]
 
 export const DEFAULT_LANGUAGE = 'en'
@@ -57,19 +57,19 @@ export const DEFAULT_LANGUAGE = 'en'
 export const DEPRECATED_LANGUAGES = ['br']
 
 export function getLanguageFromPath(pathname: string): string {
-	const segments = pathname.split('/').filter(Boolean)
-	const firstSegment = segments[0]
+  const segments = pathname.split('/').filter(Boolean)
+  const firstSegment = segments[0]
 
-	return SUPPORTED_LANGUAGES.some(lang => lang.code === firstSegment) ? firstSegment : ''
+  return SUPPORTED_LANGUAGES.some((lang) => lang.code === firstSegment) ? firstSegment : ''
 }
 
 export function getPathWithoutLanguage(pathname: string): string {
-	const segments = pathname.split('/').filter(Boolean)
-	const firstSegment = segments[0]
+  const segments = pathname.split('/').filter(Boolean)
+  const firstSegment = segments[0]
 
-	if (SUPPORTED_LANGUAGES.some(lang => lang.code === firstSegment)) {
-		return `/${segments.slice(1).join('/')}`
-	}
+  if (SUPPORTED_LANGUAGES.some((lang) => lang.code === firstSegment)) {
+    return `/${segments.slice(1).join('/')}`
+  }
 
-	return pathname || '/'
+  return pathname || '/'
 }
diff --git a/app/[lang]/_utils/isHtml.ts b/app/[lang]/_utils/isHtml.ts
index ad1132f..08dee85 100644
--- a/app/[lang]/_utils/isHtml.ts
+++ b/app/[lang]/_utils/isHtml.ts
@@ -4,5 +4,5 @@
  * @returns boolean - True if the string contains HTML tags
  */
 export function isHtml(content: string): boolean {
-	return /<\/?(?:div|span|p|a|img|h[1-6]|ul|ol|li|table|tr|td|th|br|hr|em|strong)[^>]*>/i.test(content)
+  return /<\/?(?:div|span|p|a|img|h[1-6]|ul|ol|li|table|tr|td|th|br|hr|em|strong)[^>]*>/i.test(content)
 }
diff --git a/app/[lang]/_utils/query.ts b/app/[lang]/_utils/query.ts
index 34cebb6..0138f51 100644
--- a/app/[lang]/_utils/query.ts
+++ b/app/[lang]/_utils/query.ts
@@ -1,11 +1,11 @@
 import type {
-	TDiscoverData,
-	TFaqData,
-	TPrivacyPolicyData,
-	TSupportedChainData,
-	TSupportedProtocolData,
-	TSupportedWalletData,
-	TTermsOfServiceData
+  TDiscoverData,
+  TFaqData,
+  TPrivacyPolicyData,
+  TSupportedChainData,
+  TSupportedProtocolData,
+  TSupportedWalletData,
+  TTermsOfServiceData,
 } from '@/app/[lang]/_components/strapi/types'
 
 /**
@@ -21,22 +21,22 @@ import type {
  * Prepend NEXT_PUBLIC_STRAPI_URL only when the url is relative.
  */
 export function getStrapiImageUrl(url: string | null | undefined): string {
-	if (!url) {
-		return ''
-	}
-	if (url.startsWith('http')) {
-		return url
-	}
-	return `${process.env.NEXT_PUBLIC_STRAPI_URL}${url}`
+  if (!url) {
+    return ''
+  }
+  if (url.startsWith('http')) {
+    return url
+  }
+  return `${process.env.NEXT_PUBLIC_STRAPI_URL}${url}`
 }
 
 /**
  * Common headers used for all Strapi API requests
  */
 const apiHeaders = {
-	headers: {
-		Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`
-	}
+  headers: {
+    Authorization: `Bearer ${process.env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
+  },
 }
 
 /**
@@ -45,16 +45,16 @@ const apiHeaders = {
  * @returns Promise with FAQ data or null if request fails
  */
 export async function getFaq(): Promise<TFaqData | null> {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/faq?populate[0]=faqSection&populate[1]=faqSection.faqSectionItem&pagination[pageSize]=10&pagination[page]=1&status=published&locale=en`,
-		apiHeaders
-	)
-
-	if (!res.ok) {
-		return null
-	}
-	const data = await res.json()
-	return data.data
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/faq?populate[0]=faqSection&populate[1]=faqSection.faqSectionItem&pagination[pageSize]=10&pagination[page]=1&status=published&locale=en`,
+    apiHeaders
+  )
+
+  if (!res.ok) {
+    return null
+  }
+  const data = await res.json()
+  return data.data
 }
 
 /**
@@ -64,16 +64,16 @@ export async function getFaq(): Promise<TFaqData | null> {
  * @returns Promise with wallet data or null if request fails or wallet not found
  */
 export async function getSupportedWallet(slug: string): Promise<TSupportedWalletData | null> {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?filters[slug][$eq]=${slug}&populate=*`,
-		apiHeaders
-	)
-
-	if (!res.ok) {
-		return null
-	}
-	const data = await res.json()
-	return data.data[0]
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-wallets?filters[slug][$eq]=${slug}&populate=*`,
+    apiHeaders
+  )
+
+  if (!res.ok) {
+    return null
+  }
+  const data = await res.json()
+  return data.data[0]
 }
 
 /**
@@ -83,16 +83,16 @@ export async function getSupportedWallet(slug: string): Promise<TSupportedWallet
  * @returns Promise with chain data or null if request fails or chain not found
  */
 export async function getSupportedChain(slug: string): Promise<TSupportedChainData | null> {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?filters[slug][$eq]=${slug}&populate=*`,
-		apiHeaders
-	)
-
-	if (!res.ok) {
-		return null
-	}
-	const data = await res.json()
-	return data.data[0]
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-chains?filters[slug][$eq]=${slug}&populate=*`,
+    apiHeaders
+  )
+
+  if (!res.ok) {
+    return null
+  }
+  const data = await res.json()
+  return data.data[0]
 }
 
 /**
@@ -102,16 +102,16 @@ export async function getSupportedChain(slug: string): Promise<TSupportedChainDa
  * @returns Promise with protocol data or null if request fails or protocol not found
  */
 export async function getSupportedProtocol(slug: string): Promise<TSupportedProtocolData | null> {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?filters[slug][$eq]=${slug}&populate=*`,
-		apiHeaders
-	)
-
-	if (!res.ok) {
-		return null
-	}
-	const data = await res.json()
-	return data.data[0]
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/supported-protocols?filters[slug][$eq]=${slug}&populate=*`,
+    apiHeaders
+  )
+
+  if (!res.ok) {
+    return null
+  }
+  const data = await res.json()
+  return data.data[0]
 }
 
 /**
@@ -120,13 +120,13 @@ export async function getSupportedProtocol(slug: string): Promise<TSupportedProt
  * @returns Promise with array of discover data or null if request fails
  */
 export async function getDiscovers(): Promise<TDiscoverData[] | null> {
-	const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/discovers?populate=*`, apiHeaders)
+  const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/discovers?populate=*`, apiHeaders)
 
-	if (!res.ok) {
-		return null
-	}
-	const data = await res.json()
-	return data.data
+  if (!res.ok) {
+    return null
+  }
+  const data = await res.json()
+  return data.data
 }
 
 /**
@@ -135,13 +135,13 @@ export async function getDiscovers(): Promise<TDiscoverData[] | null> {
  * @returns Promise with privacy policy data or null if request fails
  */
 export async function getPrivacyPolicy(): Promise<TPrivacyPolicyData | null> {
-	const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/privacy-policy?populate=*`, apiHeaders)
+  const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/privacy-policy?populate=*`, apiHeaders)
 
-	if (!res.ok) {
-		return null
-	}
-	const data = await res.json()
-	return data.data
+  if (!res.ok) {
+    return null
+  }
+  const data = await res.json()
+  return data.data
 }
 
 /**
@@ -150,11 +150,11 @@ export async function getPrivacyPolicy(): Promise<TPrivacyPolicyData | null> {
  * @returns Promise with terms of service data or null if request fails
  */
 export async function getTermsOfService(): Promise<TTermsOfServiceData | null> {
-	const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/terms-of-service?populate=*`, apiHeaders)
+  const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/terms-of-service?populate=*`, apiHeaders)
 
-	if (!res.ok) {
-		return null
-	}
-	const data = await res.json()
-	return data.data
+  if (!res.ok) {
+    return null
+  }
+  const data = await res.json()
+  return data.data
 }
diff --git a/app/[lang]/_utils/schema.ts b/app/[lang]/_utils/schema.ts
index 96d32b3..b8ea152 100644
--- a/app/[lang]/_utils/schema.ts
+++ b/app/[lang]/_utils/schema.ts
@@ -5,152 +5,152 @@
  ** Supports blog posts, product pages, and organization schema
  ************************************************************************************************/
 
-import type {TBlogPost, TSupportArticle} from '@/app/[lang]/_components/strapi/types'
+import type { TBlogPost, TSupportArticle } from '@/app/[lang]/_components/strapi/types'
 
 // Base organization data
 const organizationSchema = {
-	'@context': 'https://schema.org',
-	'@type': 'Organization',
-	name: 'ShapeShift',
-	url: 'https://shapeshift.com',
-	logo: 'https://shapeshift.com/icon.png',
-	sameAs: ['https://twitter.com/ShapeShift', 'https://discord.com/invite/shapeshift']
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: 'ShapeShift',
+  url: 'https://shapeshift.com',
+  logo: 'https://shapeshift.com/icon.png',
+  sameAs: ['https://twitter.com/ShapeShift', 'https://discord.com/invite/shapeshift'],
 }
 
 /**
  * Generate Article schema for blog posts
  */
 export function generateBlogPostSchema(post: TBlogPost, baseUrl: string): Record<string, unknown> {
-	// Ensure we have required fields
-	if (!post?.title || !post.slug) {
-		return {}
-	}
+  // Ensure we have required fields
+  if (!post?.title || !post.slug) {
+    return {}
+  }
 
-	const postUrl = `${baseUrl}/blog/${post.slug}`
-	const imageUrl = post.featuredImg?.url
-		? `${process.env.NEXT_PUBLIC_STRAPI_URL || 'https://cms.shapeshift.com'}${post.featuredImg.url}`
-		: `${baseUrl}/opengraph-image.png`
+  const postUrl = `${baseUrl}/blog/${post.slug}`
+  const imageUrl = post.featuredImg?.url
+    ? `${process.env.NEXT_PUBLIC_STRAPI_URL || 'https://cms.shapeshift.com'}${post.featuredImg.url}`
+    : `${baseUrl}/opengraph-image.png`
 
-	return {
-		'@context': 'https://schema.org',
-		'@type': 'BlogPosting',
-		headline: post.title,
-		description: post.summary || '',
-		image: imageUrl,
-		url: postUrl,
-		datePublished: post.publishedAt,
-		dateModified: post.updatedAt || post.publishedAt,
-		author: {
-			'@type': 'Organization',
-			name: 'ShapeShift',
-			url: baseUrl
-		},
-		publisher: organizationSchema,
-		mainEntityOfPage: {
-			'@type': 'WebPage',
-			'@id': postUrl
-		},
-		keywords: post.tags?.join(', ') || '',
-		articleSection: post.type?.[0] || 'General'
-	}
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.title,
+    description: post.summary || '',
+    image: imageUrl,
+    url: postUrl,
+    datePublished: post.publishedAt,
+    dateModified: post.updatedAt || post.publishedAt,
+    author: {
+      '@type': 'Organization',
+      name: 'ShapeShift',
+      url: baseUrl,
+    },
+    publisher: organizationSchema,
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': postUrl,
+    },
+    keywords: post.tags?.join(', ') || '',
+    articleSection: post.type?.[0] || 'General',
+  }
 }
 
 /**
  * Generate Product schema for product pages
  */
 export function generateProductSchema({
-	title,
-	description,
-	featuredImage,
-	pageURL,
-	features = []
+  title,
+  description,
+  featuredImage,
+  pageURL,
+  features = [],
 }: {
-	title: string
-	description: string
-	featuredImage?: string
-	pageURL: string
-	features?: {title: string; description: string}[]
+  title: string
+  description: string
+  featuredImage?: string
+  pageURL: string
+  features?: { title: string; description: string }[]
 }): Record<string, unknown> {
-	// Ensure we have required fields
-	if (!title || !pageURL) {
-		return {}
-	}
+  // Ensure we have required fields
+  if (!title || !pageURL) {
+    return {}
+  }
 
-	const productID = pageURL.split('/').pop() || 'shapeshift-product'
-	const image = featuredImage || `${process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'}/opengraph-image.png`
+  const productID = pageURL.split('/').pop() || 'shapeshift-product'
+  const image = featuredImage || `${process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'}/opengraph-image.png`
 
-	return {
-		'@context': 'https://schema.org',
-		'@type': 'SoftwareApplication',
-		id: productID,
-		name: title,
-		description: description || '',
-		image,
-		url: pageURL,
-		applicationCategory: 'FinanceApplication',
-		operatingSystem: 'Web, Android, iOS',
-		author: organizationSchema,
-		publisher: organizationSchema,
-		...(features.length > 0 && {
-			featureList: {
-				'@type': 'ItemList',
-				itemListElement: features.map((feature, index) => ({
-					'@type': 'ListItem',
-					position: index + 1,
-					name: feature.title,
-					description: feature.description
-				}))
-			}
-		})
-	}
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    id: productID,
+    name: title,
+    description: description || '',
+    image,
+    url: pageURL,
+    applicationCategory: 'FinanceApplication',
+    operatingSystem: 'Web, Android, iOS',
+    author: organizationSchema,
+    publisher: organizationSchema,
+    ...(features.length > 0 && {
+      featureList: {
+        '@type': 'ItemList',
+        itemListElement: features.map((feature, index) => ({
+          '@type': 'ListItem',
+          position: index + 1,
+          name: feature.title,
+          description: feature.description,
+        })),
+      },
+    }),
+  }
 }
 
 /**
  * Generate Article schema for support articles
  */
 export function generateSupportArticleSchema(article: TSupportArticle, baseUrl: string): Record<string, unknown> {
-	if (!article?.title || !article.slug) {
-		return {}
-	}
+  if (!article?.title || !article.slug) {
+    return {}
+  }
 
-	const articleUrl = `${baseUrl}/support/${article.slug}`
-	const imageUrl = article.featuredImg?.url
-		? `${process.env.NEXT_PUBLIC_STRAPI_URL || 'https://cms.shapeshift.com'}${article.featuredImg.url}`
-		: `${baseUrl}/opengraph-image.png`
+  const articleUrl = `${baseUrl}/support/${article.slug}`
+  const imageUrl = article.featuredImg?.url
+    ? `${process.env.NEXT_PUBLIC_STRAPI_URL || 'https://cms.shapeshift.com'}${article.featuredImg.url}`
+    : `${baseUrl}/opengraph-image.png`
 
-	return {
-		'@context': 'https://schema.org',
-		'@type': 'Article',
-		headline: article.title,
-		description: article.summary || '',
-		image: imageUrl,
-		url: articleUrl,
-		datePublished: article.publishedAt,
-		dateModified: article.updatedAt || article.publishedAt,
-		author: organizationSchema,
-		publisher: organizationSchema,
-		mainEntityOfPage: {
-			'@type': 'WebPage',
-			'@id': articleUrl
-		}
-	}
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: article.title,
+    description: article.summary || '',
+    image: imageUrl,
+    url: articleUrl,
+    datePublished: article.publishedAt,
+    dateModified: article.updatedAt || article.publishedAt,
+    author: organizationSchema,
+    publisher: organizationSchema,
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': articleUrl,
+    },
+  }
 }
 
 /**
  * Generate WebSite schema for homepage
  */
 export function generateWebsiteSchema(baseUrl: string): Record<string, unknown> {
-	return {
-		'@context': 'https://schema.org',
-		'@type': 'WebSite',
-		name: 'ShapeShift',
-		url: baseUrl
-	}
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'ShapeShift',
+    url: baseUrl,
+  }
 }
 
 /**
  * Generate Organization schema
  */
 export function generateOrganizationSchema(): Record<string, unknown> {
-	return organizationSchema
+  return organizationSchema
 }
diff --git a/app/[lang]/dao/docs/page.tsx b/app/[lang]/dao/docs/page.tsx
index b3d7662..928877e 100644
--- a/app/[lang]/dao/docs/page.tsx
+++ b/app/[lang]/dao/docs/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function DocsPage(): ReactNode {
-	return <h1 className={'text-3xl font-bold'}>{'Docs'}</h1>
+  return <h1 className={'text-3xl font-bold'}>{'Docs'}</h1>
 }
diff --git a/app/[lang]/dao/forum/page.tsx b/app/[lang]/dao/forum/page.tsx
index 354196d..bbd1674 100644
--- a/app/[lang]/dao/forum/page.tsx
+++ b/app/[lang]/dao/forum/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function ForumPage(): ReactNode {
-	return <h1 className={'text-3xl font-bold'}>{'Forum'}</h1>
+  return <h1 className={'text-3xl font-bold'}>{'Forum'}</h1>
 }
diff --git a/app/[lang]/dao/fox-token/page.tsx b/app/[lang]/dao/fox-token/page.tsx
index 8e173e7..ffb8cbc 100644
--- a/app/[lang]/dao/fox-token/page.tsx
+++ b/app/[lang]/dao/fox-token/page.tsx
@@ -1,176 +1,162 @@
 import Image from 'next/image'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LatestBlogPosts} from '@/app/[lang]/_components/BlogList'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
-import {RoundButton} from '@/app/[lang]/_components/RoundButton'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LatestBlogPosts } from '@/app/[lang]/_components/BlogList'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
+import { RoundButton } from '@/app/[lang]/_components/RoundButton'
 import {
-	FOX_CONTRACTS,
-	benefitsTitle,
-	communityTitle,
-	foxTokenBenefits,
-	foxTokenContributeItems,
-	foxTokenDescription,
-	foxTokenDescriptionNote,
-	foxTokenTitleBlue,
-	foxTokenTitleWhite,
-	resourcesTitle,
-	section1Description,
-	section1Title,
-	section2Article1,
-	section2Article2,
-	section2Title
+  FOX_CONTRACTS,
+  benefitsTitle,
+  communityTitle,
+  foxTokenBenefits,
+  foxTokenContributeItems,
+  foxTokenDescription,
+  foxTokenDescriptionNote,
+  foxTokenTitleBlue,
+  foxTokenTitleWhite,
+  resourcesTitle,
+  section1Description,
+  section1Title,
+  section2Article1,
+  section2Article2,
+  section2Title,
 } from '@/app/[lang]/_utils/constants'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function FoxTokenPage(): ReactNode {
-	return (
-		<div className={'relative mt-16 flex w-full flex-col items-center justify-center lg:mt-28'}>
-			<div
-				className={
-					'relative mb-[120px] flex h-[440px] w-full flex-col items-center justify-center py-20 lg:mb-40'
-				}>
-				<Image
-					src={'/fox-token/foxTokenHeader.png'}
-					alt={'Fox Token Header'}
-					width={3776}
-					height={880}
-					className={'absolute left-0 top-0 -z-10 size-full rounded-2xl object-cover'}
-				/>
+  return (
+    <div className={'relative mt-16 flex w-full flex-col items-center justify-center lg:mt-28'}>
+      <div className={'relative mb-[120px] flex h-[440px] w-full flex-col items-center justify-center py-20 lg:mb-40'}>
+        <Image
+          src={'/fox-token/foxTokenHeader.png'}
+          alt={'Fox Token Header'}
+          width={3776}
+          height={880}
+          className={'absolute left-0 top-0 -z-10 size-full rounded-2xl object-cover'}
+        />
 
-				<div className={'mb-6 size-[88px]'}>
-					<Image
-						src={'/fox-token/foxLogo.png'}
-						alt={'Fox Logo'}
-						width={176}
-						height={176}
-						className={'size-full object-cover'}
-					/>
-				</div>
+        <div className={'mb-6 size-[88px]'}>
+          <Image
+            src={'/fox-token/foxLogo.png'}
+            alt={'Fox Logo'}
+            width={176}
+            height={176}
+            className={'size-full object-cover'}
+          />
+        </div>
 
-				<div className={'no-translate mb-10 flex items-center gap-2'}>
-					<span className={'no-translate text-[40px] leading-10 text-white lg:text-7xl'}>
-						{foxTokenTitleWhite}
-					</span>
-					<span className={'no-translate text-[40px] font-bold italic leading-10 text-blue lg:text-7xl'}>
-						{foxTokenTitleBlue}
-					</span>
-				</div>
+        <div className={'no-translate mb-10 flex items-center gap-2'}>
+          <span className={'no-translate text-[40px] leading-10 text-white lg:text-7xl'}>{foxTokenTitleWhite}</span>
+          <span className={'no-translate text-[40px] font-bold italic leading-10 text-blue lg:text-7xl'}>
+            {foxTokenTitleBlue}
+          </span>
+        </div>
 
-				<div className={'flex flex-col items-center justify-center gap-2'}>
-					<p className={'text-center text-2xl'}>{foxTokenDescription}</p>
-					<p className={'text-center text-xs'}>{foxTokenDescriptionNote}</p>
-				</div>
-			</div>
+        <div className={'flex flex-col items-center justify-center gap-2'}>
+          <p className={'text-center text-2xl'}>{foxTokenDescription}</p>
+          <p className={'text-center text-xs'}>{foxTokenDescriptionNote}</p>
+        </div>
+      </div>
 
-			<div className={'container mb-[120px] grid grid-cols-1 lg:mb-60 lg:grid-cols-2 lg:gap-20'}>
-				<div>
-					<h1 className={'mb-8 text-[28px] leading-[32px] lg:text-7xl'}>{section1Title}</h1>
-					<p className={'hidden text-gray-500 lg:block'}>{section1Description}</p>
-				</div>
-				<div className={'flex flex-col gap-2'}>
-					{foxTokenContributeItems.map(item => (
-						<LocalizedLink
-							href={item.href}
-							target={item.target}
-							className={
-								'group flex w-full items-center justify-between rounded-2xl bg-secondBg px-10 py-7'
-							}
-							key={item.title}>
-							<p className={'text-2xl lg:text-[40px] lg:leading-[40px]'}>{item.title}</p>
-							<RoundButton
-								className={
-									'size-4 transition-all duration-300 group-hover:scale-110 group-hover:bg-blueHover'
-								}
-								iconName={'arrow'}
-							/>
-						</LocalizedLink>
-					))}
-				</div>
-			</div>
+      <div className={'container mb-[120px] grid grid-cols-1 lg:mb-60 lg:grid-cols-2 lg:gap-20'}>
+        <div>
+          <h1 className={'mb-8 text-[28px] leading-[32px] lg:text-7xl'}>{section1Title}</h1>
+          <p className={'hidden text-gray-500 lg:block'}>{section1Description}</p>
+        </div>
+        <div className={'flex flex-col gap-2'}>
+          {foxTokenContributeItems.map((item) => (
+            <LocalizedLink
+              href={item.href}
+              target={item.target}
+              className={'group flex w-full items-center justify-between rounded-2xl bg-secondBg px-10 py-7'}
+              key={item.title}
+            >
+              <p className={'text-2xl lg:text-[40px] lg:leading-[40px]'}>{item.title}</p>
+              <RoundButton
+                className={'size-4 transition-all duration-300 group-hover:scale-110 group-hover:bg-blueHover'}
+                iconName={'arrow'}
+              />
+            </LocalizedLink>
+          ))}
+        </div>
+      </div>
 
-			<div
-				className={
-					'relative mx-0 mb-[120px] flex justify-center overflow-hidden rounded-2xl px-6 py-8 lg:-mx-4 lg:mb-60 lg:h-[552px] lg:w-screen lg:p-0'
-				}>
-				<Image
-					src={'/fox-token/foxBanner.png'}
-					alt={'Fox Banner'}
-					width={1920}
-					height={550}
-					className={'absolute left-0 top-0 -z-10 size-full object-cover'}
-				/>
+      <div
+        className={
+          'relative mx-0 mb-[120px] flex justify-center overflow-hidden rounded-2xl px-6 py-8 lg:-mx-4 lg:mb-60 lg:h-[552px] lg:w-screen lg:p-0'
+        }
+      >
+        <Image
+          src={'/fox-token/foxBanner.png'}
+          alt={'Fox Banner'}
+          width={1920}
+          height={550}
+          className={'absolute left-0 top-0 -z-10 size-full object-cover'}
+        />
 
-				<div className={'container relative flex items-center justify-between'}>
-					<div className={'max-w-[800px]'}>
-						<h1 className={'mb-8 text-2xl leading-[24px] lg:text-7xl'}>{section2Title}</h1>
-						<div className={'text-sm'}>
-							<p>{section2Article1}</p>
-							<br />
-							<p>{section2Article2}</p>
-							<p className={'mt-4'}>{'You can find FOX token contracts at:'}</p>
-							<ul className={'list-disc pl-6 break-all'}>
-								{FOX_CONTRACTS.map(({chain, address}) => (
-									<li
-										key={chain}
-										className={'font-mono'}>
-										{chain}
-										{': '}
-										{address}
-									</li>
-								))}
-							</ul>
-						</div>
-					</div>
+        <div className={'container relative flex items-center justify-between'}>
+          <div className={'max-w-[800px]'}>
+            <h1 className={'mb-8 text-2xl leading-[24px] lg:text-7xl'}>{section2Title}</h1>
+            <div className={'text-sm'}>
+              <p>{section2Article1}</p>
+              <br />
+              <p>{section2Article2}</p>
+              <p className={'mt-4'}>{'You can find FOX token contracts at:'}</p>
+              <ul className={'list-disc pl-6 break-all'}>
+                {FOX_CONTRACTS.map(({ chain, address }) => (
+                  <li key={chain} className={'font-mono'}>
+                    {chain}
+                    {': '}
+                    {address}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
 
-					<div className={'absolute bottom-0 right-[5%] hidden h-[398px] w-[423px] lg:block '}>
-						<Image
-							src={'/fox-token/foxBannerImage.png'}
-							alt={'Fox Token Benefits'}
-							width={846}
-							height={796}
-							className={'size-full object-cover'}
-						/>
-					</div>
-				</div>
-			</div>
+          <div className={'absolute bottom-0 right-[5%] hidden h-[398px] w-[423px] lg:block '}>
+            <Image
+              src={'/fox-token/foxBannerImage.png'}
+              alt={'Fox Token Benefits'}
+              width={846}
+              height={796}
+              className={'size-full object-cover'}
+            />
+          </div>
+        </div>
+      </div>
 
-			<div className={'container'}>
-				<h1 className={'mb-14 text-[28px] leading-[32px] lg:text-7xl'}>{benefitsTitle}</h1>
+      <div className={'container'}>
+        <h1 className={'mb-14 text-[28px] leading-[32px] lg:text-7xl'}>{benefitsTitle}</h1>
 
-				<div className={'mb-[120px] grid grid-cols-1 gap-2 lg:mb-60 lg:grid-cols-3'}>
-					{foxTokenBenefits.map(benefit => (
-						<div
-							key={benefit.title}
-							className={
-								'flex items-center justify-start gap-6 rounded-2xl bg-secondBg px-6 py-[36px] lg:px-10 lg:py-[62px]'
-							}>
-							{benefit.icon ? (
-								<div
-									className={
-										'flex size-14 min-w-14 items-center justify-center rounded-2xl bg-white/5'
-									}>
-									{benefit.icon}
-								</div>
-							) : (
-								<div className={'size-14 min-w-14 rounded-2xl bg-white/5'} />
-							)}
-							<h2 className={'text-base lg:text-2xl'}>{benefit.title}</h2>
-						</div>
-					))}
-				</div>
+        <div className={'mb-[120px] grid grid-cols-1 gap-2 lg:mb-60 lg:grid-cols-3'}>
+          {foxTokenBenefits.map((benefit) => (
+            <div
+              key={benefit.title}
+              className={
+                'flex items-center justify-start gap-6 rounded-2xl bg-secondBg px-6 py-[36px] lg:px-10 lg:py-[62px]'
+              }
+            >
+              {benefit.icon ? (
+                <div className={'flex size-14 min-w-14 items-center justify-center rounded-2xl bg-white/5'}>
+                  {benefit.icon}
+                </div>
+              ) : (
+                <div className={'size-14 min-w-14 rounded-2xl bg-white/5'} />
+              )}
+              <h2 className={'text-base lg:text-2xl'}>{benefit.title}</h2>
+            </div>
+          ))}
+        </div>
 
-				<h1 className={'mb-14 text-[40px] leading-10 lg:text-7xl'}>{resourcesTitle}</h1>
+        <h1 className={'mb-14 text-[40px] leading-10 lg:text-7xl'}>{resourcesTitle}</h1>
 
-				<LatestBlogPosts
-					limit={3}
-					isWithTitle={false}
-				/>
-				<h1 className={'mb-14 mt-[120px] text-[40px] leading-10 lg:text-7xl'}>{communityTitle}</h1>
+        <LatestBlogPosts limit={3} isWithTitle={false} />
+        <h1 className={'mb-14 mt-[120px] text-[40px] leading-10 lg:text-7xl'}>{communityTitle}</h1>
 
-				<Banner />
-			</div>
-		</div>
-	)
+        <Banner />
+      </div>
+    </div>
+  )
 }
diff --git a/app/[lang]/dao/governance/page.tsx b/app/[lang]/dao/governance/page.tsx
index 8953726..b5b3483 100644
--- a/app/[lang]/dao/governance/page.tsx
+++ b/app/[lang]/dao/governance/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function GovernancePage(): ReactNode {
-	return <h1 className={'text-3xl font-bold'}>{'Governance'}</h1>
+  return <h1 className={'text-3xl font-bold'}>{'Governance'}</h1>
 }
diff --git a/app/[lang]/dao/page.tsx b/app/[lang]/dao/page.tsx
index 856c767..48c6bb2 100644
--- a/app/[lang]/dao/page.tsx
+++ b/app/[lang]/dao/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function DaoPage(): ReactNode {
-	return <h1 className={'text-3xl font-bold'}>{'DAO'}</h1>
+  return <h1 className={'text-3xl font-bold'}>{'DAO'}</h1>
 }
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
index 2cb3ae7..e61af39 100644
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -1,329 +1,295 @@
 'use client'
 
 import Image from 'next/image'
-import {useState} from 'react'
+import { useState } from 'react'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LatestBlogPosts} from '@/app/[lang]/_components/BlogList'
-import {Button} from '@/app/[lang]/_components/Button'
-import {Carousel} from '@/app/[lang]/_components/Carousel'
-import {LandingCard} from '@/app/[lang]/_components/LandingCard'
-import {LandingInfoCard} from '@/app/[lang]/_components/LandingInfoCard'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LatestBlogPosts } from '@/app/[lang]/_components/BlogList'
+import { Button } from '@/app/[lang]/_components/Button'
+import { Carousel } from '@/app/[lang]/_components/Carousel'
+import { LandingCard } from '@/app/[lang]/_components/LandingCard'
+import { LandingInfoCard } from '@/app/[lang]/_components/LandingInfoCard'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
-import {TabItem} from '@/app/[lang]/_components/TabItem'
-import {TradingWidget} from '@/app/[lang]/_components/trading/TradingWidget'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { TabItem } from '@/app/[lang]/_components/TabItem'
+import { TradingWidget } from '@/app/[lang]/_components/trading/TradingWidget'
+import { cl } from '@/app/[lang]/_utils/cl'
 import {
-	carouselLogos,
-	featureCard1WhiteTitle,
-	featureCard3BlueTitle,
-	featureCard3WhiteTitle,
-	featureCard4BlueTitle,
-	featureCard4WhiteTitle,
-	featureTabTitle,
-	featuresTitle,
-	heroDescription,
-	heroTitle,
-	homepageBlueTitle,
-	homepageFeatureTabs,
-	homepageWhiteTitle,
-	landingCards,
-	landingInfoCards,
-	statCardsTitle
+  carouselLogos,
+  featureCard1WhiteTitle,
+  featureCard3BlueTitle,
+  featureCard3WhiteTitle,
+  featureCard4BlueTitle,
+  featureCard4WhiteTitle,
+  featureTabTitle,
+  featuresTitle,
+  heroDescription,
+  heroTitle,
+  homepageBlueTitle,
+  homepageFeatureTabs,
+  homepageWhiteTitle,
+  landingCards,
+  landingInfoCards,
+  statCardsTitle,
 } from '@/app/[lang]/_utils/constants'
 
-import {useIsMobile} from './_hooks/useIsMobile'
+import { useIsMobile } from './_hooks/useIsMobile'
 
-import type {TCard} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TCard } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 export default function HomePage(): ReactNode {
-	const [tab, setTab] = useState(homepageFeatureTabs[0])
-	const isMobile = useIsMobile()
-	const createWalletHref = isMobile
-		? '/mobile-app'
-		: 'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=hero&utm_campaign=create#/wallet'
-	return (
-		<div className={'flex min-h-screen flex-col items-center pt-4'}>
-			<div className={'relative flex h-[814px] w-full justify-center rounded-2xl p-6'}>
-				<Image
-					src={'/homepageBanner.png'}
-					alt={'homepage_banner'}
-					width={'3776'}
-					height={'1628'}
-					priority
-					loading={'eager'}
-					className={'absolute left-0 top-0 z-10 size-full rounded-2xl object-cover'}
-				/>
+  const [tab, setTab] = useState(homepageFeatureTabs[0])
+  const isMobile = useIsMobile()
+  const createWalletHref = isMobile
+    ? '/mobile-app'
+    : 'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=hero&utm_campaign=create#/wallet'
+  return (
+    <div className={'flex min-h-screen flex-col items-center pt-4'}>
+      <div className={'relative flex h-[814px] w-full justify-center rounded-2xl p-6'}>
+        <Image
+          src={'/homepageBanner.png'}
+          alt={'homepage_banner'}
+          width={'3776'}
+          height={'1628'}
+          priority
+          loading={'eager'}
+          className={'absolute left-0 top-0 z-10 size-full rounded-2xl object-cover'}
+        />
 
-				<div
-					className={
-						'container z-20 flex w-full flex-col items-center justify-between pb-10 pt-6 lg:flex-row lg:items-end'
-					}>
-					<div className={'flex h-full max-w-[800px] flex-col justify-end'}>
-						<div className={'flex flex-col gap-6'}>
-							<h1
-								className={
-									'mb-6 max-w-screen-sm text-center text-[40px] leading-10 text-white lg:text-left lg:text-7xl'
-								}>
-								{heroTitle}
-							</h1>
+        <div
+          className={
+            'container z-20 flex w-full flex-col items-center justify-between pb-10 pt-6 lg:flex-row lg:items-end'
+          }
+        >
+          <div className={'flex h-full max-w-[800px] flex-col justify-end'}>
+            <div className={'flex flex-col gap-6'}>
+              <h1
+                className={
+                  'mb-6 max-w-screen-sm text-center text-[40px] leading-10 text-white lg:text-left lg:text-7xl'
+                }
+              >
+                {heroTitle}
+              </h1>
 
-							<div className={'flex flex-col items-center lg:items-start'}>
-								<p className={'text-center text-sm text-white lg:text-left lg:text-xl'}>
-									{heroDescription}
-								</p>
-								<div className={'flex gap-4 mt-4 mb-4 text-center justify-center lg:justify-start'}>
-									{/* On mobile we direct users to the mobile app if they need a wallet, otherwise web app */}
-									<LocalizedLink
-										href={createWalletHref}
-										target={isMobile ? undefined : '_blank'}>
-										<Button title={'Create a Wallet'} />
-									</LocalizedLink>
-									<Button
-										title={'Trade Now'}
-										href={
-											'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=hero&utm_campaign=trade#/trade'
-										}
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div>
-						<TradingWidget />
-					</div>
-				</div>
-			</div>
-			<div className={'absolute inset-0 -z-10 mt-[95vh] hidden lg:block'}>
-				<Image
-					src={'/heroBg.png'}
-					alt={'hero-bg'}
-					height={'2256'}
-					width={'3840'}
-					className={'object-cover'}
-				/>
-			</div>
-			<div className={'container mt-[120px]'}>
-				<div className={' mb-14 mt-40 inline'}>
-					<span className={'mb-6 text-[40px] leading-10 text-white lg:text-7xl'}>{homepageWhiteTitle}</span>
-					<br className={'hidden lg:block'} />
-					&nbsp;
-					<span className={'text-[40px] leading-10 text-blue lg:text-7xl'}>{homepageBlueTitle}</span>
-				</div>
+              <div className={'flex flex-col items-center lg:items-start'}>
+                <p className={'text-center text-sm text-white lg:text-left lg:text-xl'}>{heroDescription}</p>
+                <div className={'flex gap-4 mt-4 mb-4 text-center justify-center lg:justify-start'}>
+                  {/* On mobile we direct users to the mobile app if they need a wallet, otherwise web app */}
+                  <LocalizedLink href={createWalletHref} target={isMobile ? undefined : '_blank'}>
+                    <Button title={'Create a Wallet'} />
+                  </LocalizedLink>
+                  <Button
+                    title={'Trade Now'}
+                    href={'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=hero&utm_campaign=trade#/trade'}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <TradingWidget />
+          </div>
+        </div>
+      </div>
+      <div className={'absolute inset-0 -z-10 mt-[95vh] hidden lg:block'}>
+        <Image src={'/heroBg.png'} alt={'hero-bg'} height={'2256'} width={'3840'} className={'object-cover'} />
+      </div>
+      <div className={'container mt-[120px]'}>
+        <div className={' mb-14 mt-40 inline'}>
+          <span className={'mb-6 text-[40px] leading-10 text-white lg:text-7xl'}>{homepageWhiteTitle}</span>
+          <br className={'hidden lg:block'} />
+          &nbsp;
+          <span className={'text-[40px] leading-10 text-blue lg:text-7xl'}>{homepageBlueTitle}</span>
+        </div>
 
-				<CardsRow data={landingCards}>{(card: TCard) => <LandingCard data={card} />}</CardsRow>
+        <CardsRow data={landingCards}>{(card: TCard) => <LandingCard data={card} />}</CardsRow>
 
-				<div className={'mb-[120px] lg:mb-60'}>
-					<h1 className={'mb-8 text-[40px] leading-10 text-white lg:mb-14 lg:text-7xl'}>{featuresTitle}</h1>
-					<div className={'group relative h-[350px] overflow-hidden rounded-2xl md:h-[500px] lg:h-[674px]'}>
-						<Image
-							src={'/landing/landingTabsBg.png'}
-							alt={'tab_bg'}
-							width={'2800'}
-							height={'1348'}
-							className={'size-full object-cover transition-all duration-300 group-hover:scale-[1.02]'}
-						/>
-						<div
-							className={
-								'absolute -bottom-6 left-1/2 w-3/4 -translate-x-1/2 overflow-hidden rounded-t-2xl'
-							}>
-							<Image
-								src={'/landing/tabBuy.png'}
-								alt={'img'}
-								width={'2160'}
-								height={'868'}
-								className={`object-cover ${tab === 'Buy' ? 'block' : 'hidden'}`}
-								priority
-							/>
-							<Image
-								src={'/landing/tabTrade.png'}
-								alt={'img'}
-								width={'2160'}
-								height={'868'}
-								className={`object-cover ${tab === 'Trade' ? 'block' : 'hidden'}`}
-								priority
-							/>
-							<Image
-								src={'/landing/tabMarkets.png'}
-								alt={'img'}
-								width={'2160'}
-								height={'868'}
-								className={`object-cover ${tab === 'Markets' ? 'block' : 'hidden'}`}
-								priority
-							/>
-						</div>
+        <div className={'mb-[120px] lg:mb-60'}>
+          <h1 className={'mb-8 text-[40px] leading-10 text-white lg:mb-14 lg:text-7xl'}>{featuresTitle}</h1>
+          <div className={'group relative h-[350px] overflow-hidden rounded-2xl md:h-[500px] lg:h-[674px]'}>
+            <Image
+              src={'/landing/landingTabsBg.png'}
+              alt={'tab_bg'}
+              width={'2800'}
+              height={'1348'}
+              className={'size-full object-cover transition-all duration-300 group-hover:scale-[1.02]'}
+            />
+            <div className={'absolute -bottom-6 left-1/2 w-3/4 -translate-x-1/2 overflow-hidden rounded-t-2xl'}>
+              <Image
+                src={'/landing/tabBuy.png'}
+                alt={'img'}
+                width={'2160'}
+                height={'868'}
+                className={`object-cover ${tab === 'Buy' ? 'block' : 'hidden'}`}
+                priority
+              />
+              <Image
+                src={'/landing/tabTrade.png'}
+                alt={'img'}
+                width={'2160'}
+                height={'868'}
+                className={`object-cover ${tab === 'Trade' ? 'block' : 'hidden'}`}
+                priority
+              />
+              <Image
+                src={'/landing/tabMarkets.png'}
+                alt={'img'}
+                width={'2160'}
+                height={'868'}
+                className={`object-cover ${tab === 'Markets' ? 'block' : 'hidden'}`}
+                priority
+              />
+            </div>
 
-						<div className={'absolute left-0 top-0 mt-8 flex size-full flex-col items-center lg:mt-16'}>
-							<h1
-								className={
-									'mb-7 px-4 text-center text-2xl text-white lg:px-0 lg:text-[40px] lg:leading-[40px]'
-								}>
-								{featureTabTitle}
-							</h1>
-							<div className={'flex w-min gap-2 rounded-full border border-white/10 p-2 lg:gap-4'}>
-								{homepageFeatureTabs.map((item: string) => (
-									<button
-										key={item}
-										onClick={() => setTab(item)}>
-										<TabItem
-											className={'!px-6 lg:!px-8'}
-											title={item}
-											selected={tab === item}
-										/>
-									</button>
-								))}
-							</div>
-						</div>
-					</div>
-					<div className={'mb-[120px] mt-2 grid w-full grid-cols-1 gap-2 lg:mb-60 lg:grid-cols-3'}>
-						<Card
-							className={
-								'relative col-span-1 rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] transition-all duration-300 hover:scale-[1.02] lg:col-span-2 lg:row-span-1'
-							}>
-							<Image
-								src={'/landing/landingCard1.png'}
-								alt={'tab_bg'}
-								width={'931'}
-								height={'322'}
-								className={'size-full object-cover'}
-							/>
-							<div
-								className={
-									'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
-								}>
-								<span className={'max-w-[560px] text-center text-lg text-white lg:text-xl'}>
-									{featureCard1WhiteTitle}
-								</span>
-							</div>
-						</Card>
-						<Card
-							className={'col-span-1 row-span-2'}
-							href={'/mobile-app'}>
-							<Image
-								src={'/landing/landingCard2.png'}
-								alt={'tab_bg'}
-								width={'461'}
-								height={'652'}
-								className={'size-full object-cover transition-all duration-300 hover:scale-[1.02]'}
-							/>
-						</Card>
-						<Card
-							className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
-							href={'/defi-wallet'}>
-							<Image
-								src={'/landing/landingCard3.png'}
-								alt={'tab_bg'}
-								width={'461'}
-								height={'322'}
-								className={'size-full object-cover transition-all duration-300 '}
-							/>
-							<div
-								className={
-									'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
-								}>
-								<span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
-									{featureCard3WhiteTitle}
-								</span>
-								<span className={'text-center text-[40px] leading-[48px]'}>
-									{featureCard3BlueTitle}
-								</span>
-							</div>
-						</Card>
-						<Card
-							className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
-							href={'https://app.shapeshift.com/markets/recommended#/markets/recommended'}
-							target={'_blank'}>
-							<Image
-								src={'/landing/landingCard4.png'}
-								alt={'tab_bg'}
-								width={'461'}
-								height={'322'}
-								className={'size-full object-cover'}
-							/>
-							<div
-								className={
-									'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
-								}>
-								<span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
-									{featureCard4WhiteTitle}
-								</span>
-								<span className={'text-center text-[40px] leading-[48px]'}>
-									{featureCard4BlueTitle}
-								</span>
-							</div>
-						</Card>
-						<Card className={'col-span-1 row-span-1 flex items-center bg-secondBg lg:col-span-3'}>
-							<Carousel pauseOnHover>
-								{Object.values(carouselLogos).map(({Logo, href}, index) => (
-									<div
-										key={index}
-										className={'mx-10'}>
-										<LocalizedLink
-											href={href}
-											target={'_blank'}
-											rel={'noopener noreferrer'}
-											className={'relative flex max-h-10 w-max items-center justify-start'}>
-											<Logo />
-										</LocalizedLink>
-									</div>
-								))}
-							</Carousel>
-						</Card>
-					</div>
-					<div className={'mb-[120px] lg:mb-60'}>
-						<LatestBlogPosts limit={2} />
-					</div>
-					<div className={'mb-[120px] lg:mb-60'}>
-						<div className={'grid grid-cols-1 gap-4 lg:grid-cols-3'}>
-							<div className={'col-span-1 mb-6 lg:mb-0'}>
-								<h1 className={'max-w-[400px] text-[40px] leading-10 lg:text-7xl'}>{statCardsTitle}</h1>
-							</div>
-							<div className={'col-span-1 flex flex-col gap-4'}>
-								<LandingInfoCard
-									title={landingInfoCards[0].title}
-									stat={landingInfoCards[0].stat}
-								/>
-								<LandingInfoCard
-									title={landingInfoCards[1].title}
-									stat={landingInfoCards[1].stat}
-								/>
-							</div>
-							<div className={'col-span-1 flex flex-col gap-4'}>
-								<LandingInfoCard
-									title={landingInfoCards[2].title}
-									stat={landingInfoCards[2].stat}
-								/>
-								<LandingInfoCard
-									title={landingInfoCards[3].title}
-									stat={landingInfoCards[3].stat}
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-				<Banner />
-			</div>
-		</div>
-	)
+            <div className={'absolute left-0 top-0 mt-8 flex size-full flex-col items-center lg:mt-16'}>
+              <h1 className={'mb-7 px-4 text-center text-2xl text-white lg:px-0 lg:text-[40px] lg:leading-[40px]'}>
+                {featureTabTitle}
+              </h1>
+              <div className={'flex w-min gap-2 rounded-full border border-white/10 p-2 lg:gap-4'}>
+                {homepageFeatureTabs.map((item: string) => (
+                  <button key={item} onClick={() => setTab(item)}>
+                    <TabItem className={'!px-6 lg:!px-8'} title={item} selected={tab === item} />
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className={'mb-[120px] mt-2 grid w-full grid-cols-1 gap-2 lg:mb-60 lg:grid-cols-3'}>
+            <Card
+              className={
+                'relative col-span-1 rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] transition-all duration-300 hover:scale-[1.02] lg:col-span-2 lg:row-span-1'
+              }
+            >
+              <Image
+                src={'/landing/landingCard1.png'}
+                alt={'tab_bg'}
+                width={'931'}
+                height={'322'}
+                className={'size-full object-cover'}
+              />
+              <div
+                className={
+                  'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
+                }
+              >
+                <span className={'max-w-[560px] text-center text-lg text-white lg:text-xl'}>
+                  {featureCard1WhiteTitle}
+                </span>
+              </div>
+            </Card>
+            <Card className={'col-span-1 row-span-2'} href={'/mobile-app'}>
+              <Image
+                src={'/landing/landingCard2.png'}
+                alt={'tab_bg'}
+                width={'461'}
+                height={'652'}
+                className={'size-full object-cover transition-all duration-300 hover:scale-[1.02]'}
+              />
+            </Card>
+            <Card
+              className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
+              href={'/defi-wallet'}
+            >
+              <Image
+                src={'/landing/landingCard3.png'}
+                alt={'tab_bg'}
+                width={'461'}
+                height={'322'}
+                className={'size-full object-cover transition-all duration-300 '}
+              />
+              <div
+                className={
+                  'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
+                }
+              >
+                <span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
+                  {featureCard3WhiteTitle}
+                </span>
+                <span className={'text-center text-[40px] leading-[48px]'}>{featureCard3BlueTitle}</span>
+              </div>
+            </Card>
+            <Card
+              className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
+              href={'https://app.shapeshift.com/markets/recommended#/markets/recommended'}
+              target={'_blank'}
+            >
+              <Image
+                src={'/landing/landingCard4.png'}
+                alt={'tab_bg'}
+                width={'461'}
+                height={'322'}
+                className={'size-full object-cover'}
+              />
+              <div
+                className={
+                  'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
+                }
+              >
+                <span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
+                  {featureCard4WhiteTitle}
+                </span>
+                <span className={'text-center text-[40px] leading-[48px]'}>{featureCard4BlueTitle}</span>
+              </div>
+            </Card>
+            <Card className={'col-span-1 row-span-1 flex items-center bg-secondBg lg:col-span-3'}>
+              <Carousel pauseOnHover>
+                {Object.values(carouselLogos).map(({ Logo, href }, index) => (
+                  <div key={index} className={'mx-10'}>
+                    <LocalizedLink
+                      href={href}
+                      target={'_blank'}
+                      rel={'noopener noreferrer'}
+                      className={'relative flex max-h-10 w-max items-center justify-start'}
+                    >
+                      <Logo />
+                    </LocalizedLink>
+                  </div>
+                ))}
+              </Carousel>
+            </Card>
+          </div>
+          <div className={'mb-[120px] lg:mb-60'}>
+            <LatestBlogPosts limit={2} />
+          </div>
+          <div className={'mb-[120px] lg:mb-60'}>
+            <div className={'grid grid-cols-1 gap-4 lg:grid-cols-3'}>
+              <div className={'col-span-1 mb-6 lg:mb-0'}>
+                <h1 className={'max-w-[400px] text-[40px] leading-10 lg:text-7xl'}>{statCardsTitle}</h1>
+              </div>
+              <div className={'col-span-1 flex flex-col gap-4'}>
+                <LandingInfoCard title={landingInfoCards[0].title} stat={landingInfoCards[0].stat} />
+                <LandingInfoCard title={landingInfoCards[1].title} stat={landingInfoCards[1].stat} />
+              </div>
+              <div className={'col-span-1 flex flex-col gap-4'}>
+                <LandingInfoCard title={landingInfoCards[2].title} stat={landingInfoCards[2].stat} />
+                <LandingInfoCard title={landingInfoCards[3].title} stat={landingInfoCards[3].stat} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <Banner />
+      </div>
+    </div>
+  )
 }
 
-const Card = (props: {children: ReactNode; className: string; href?: string; target?: string}): ReactNode => {
-	const {children, className, href, target} = props
+const Card = (props: { children: ReactNode; className: string; href?: string; target?: string }): ReactNode => {
+  const { children, className, href, target } = props
 
-	return (
-		<>
-			{href ? (
-				<LocalizedLink
-					href={href}
-					target={target}
-					className={cl('cursor-pointer overflow-hidden rounded-2xl', className)}>
-					{children}
-				</LocalizedLink>
-			) : (
-				<div className={cl('overflow-hidden rounded-2xl', className)}>{children}</div>
-			)}
-		</>
-	)
+  return (
+    <>
+      {href ? (
+        <LocalizedLink
+          href={href}
+          target={target}
+          className={cl('cursor-pointer overflow-hidden rounded-2xl', className)}
+        >
+          {children}
+        </LocalizedLink>
+      ) : (
+        <div className={cl('overflow-hidden rounded-2xl', className)}>{children}</div>
+      )}
+    </>
+  )
 }
diff --git a/app/api/chatwoot/[...path]/route.ts b/app/api/chatwoot/[...path]/route.ts
index 088ae3f..332cf55 100644
--- a/app/api/chatwoot/[...path]/route.ts
+++ b/app/api/chatwoot/[...path]/route.ts
@@ -5,125 +5,131 @@
  * This is a legitimate case where the web standard takes precedence.
  */
 /* eslint-disable @typescript-eslint/naming-convention */
-import {NextResponse} from 'next/server'
-
-import type {NextRequest} from 'next/server'
-
-export async function GET(request: NextRequest, {params}: {params: Promise<{path: string[]}>}): Promise<NextResponse> {
-	try {
-		const {path} = await params
-		const searchParams = request.nextUrl.searchParams
-		searchParams.set('website_token', process.env.NEXT_PUBLIC_CHATWOOT_API_KEY ?? '')
-
-		// Construct the Chatwoot URL
-		const chatwootPath = path.join('/')
-		const chatwootUrl = `https://app.chatwoot.com/${chatwootPath}?${searchParams.toString()}`
-
-		// Forward the request to Chatwoot
-		const response = await fetch(chatwootUrl, {
-			method: 'GET',
-			headers: {
-				'user-agent': request.headers.get('user-agent') || 'ShapeShift-Proxy',
-				accept: request.headers.get('accept') || '*/*',
-				'accept-language': request.headers.get('accept-language') || 'en-US,en;q=0.9',
-				referer: request.headers.get('referer') || request.nextUrl.origin,
-
-				cookie: request.headers.get('cookie') || '',
-				'x-auth-token': request.headers.get('x-auth-token') || '',
-				'if-none-match': request.headers.get('if-none-match') || ''
-			}
-		})
-
-		if (!response.ok) {
-			return new NextResponse(null, {status: response.status})
-		}
-
-		const content = await response.text()
-
-		// Create response with proper COEP headers
-		const nextResponse = new NextResponse(content, {
-			status: response.status,
-
-			headers: {
-				'content-type': response.headers.get('content-type') || 'text/html',
-				'cross-origin-embedder-policy': 'credentialless',
-				'cross-origin-resource-policy': 'cross-origin',
-				'cross-origin-opener-policy': 'same-origin',
-				'x-frame-options': 'SAMEORIGIN',
-				// Preserve some original headers
-				'cache-control': response.headers.get('cache-control') || 'no-cache',
-				etag: response.headers.get('etag') || '',
-				vary: response.headers.get('vary') || ''
-			}
-		})
-
-		// Copy Set-Cookie headers if present (for Chatwoot session)
-		const setCookieHeaders = response.headers.get('set-cookie')
-		if (setCookieHeaders) {
-			nextResponse.headers.set('Set-Cookie', setCookieHeaders)
-		}
-
-		return nextResponse
-	} catch (error) {
-		console.error('Chatwoot proxy error:', error)
-		return new NextResponse('Proxy Error', {status: 500})
-	}
+import { NextResponse } from 'next/server'
+
+import type { NextRequest } from 'next/server'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+): Promise<NextResponse> {
+  try {
+    const { path } = await params
+    const searchParams = request.nextUrl.searchParams
+    searchParams.set('website_token', process.env.NEXT_PUBLIC_CHATWOOT_API_KEY ?? '')
+
+    // Construct the Chatwoot URL
+    const chatwootPath = path.join('/')
+    const chatwootUrl = `https://app.chatwoot.com/${chatwootPath}?${searchParams.toString()}`
+
+    // Forward the request to Chatwoot
+    const response = await fetch(chatwootUrl, {
+      method: 'GET',
+      headers: {
+        'user-agent': request.headers.get('user-agent') || 'ShapeShift-Proxy',
+        accept: request.headers.get('accept') || '*/*',
+        'accept-language': request.headers.get('accept-language') || 'en-US,en;q=0.9',
+        referer: request.headers.get('referer') || request.nextUrl.origin,
+
+        cookie: request.headers.get('cookie') || '',
+        'x-auth-token': request.headers.get('x-auth-token') || '',
+        'if-none-match': request.headers.get('if-none-match') || '',
+      },
+    })
+
+    if (!response.ok) {
+      return new NextResponse(null, { status: response.status })
+    }
+
+    const content = await response.text()
+
+    // Create response with proper COEP headers
+    const nextResponse = new NextResponse(content, {
+      status: response.status,
+
+      headers: {
+        'content-type': response.headers.get('content-type') || 'text/html',
+        'cross-origin-embedder-policy': 'credentialless',
+        'cross-origin-resource-policy': 'cross-origin',
+        'cross-origin-opener-policy': 'same-origin',
+        'x-frame-options': 'SAMEORIGIN',
+        // Preserve some original headers
+        'cache-control': response.headers.get('cache-control') || 'no-cache',
+        etag: response.headers.get('etag') || '',
+        vary: response.headers.get('vary') || '',
+      },
+    })
+
+    // Copy Set-Cookie headers if present (for Chatwoot session)
+    const setCookieHeaders = response.headers.get('set-cookie')
+    if (setCookieHeaders) {
+      nextResponse.headers.set('Set-Cookie', setCookieHeaders)
+    }
+
+    return nextResponse
+  } catch (error) {
+    console.error('Chatwoot proxy error:', error)
+    return new NextResponse('Proxy Error', { status: 500 })
+  }
 }
 
-export async function POST(request: NextRequest, {params}: {params: Promise<{path: string[]}>}): Promise<NextResponse> {
-	try {
-		const {path} = await params
-		const searchParams = request.nextUrl.searchParams
-		const body = await request.text()
-
-		searchParams.set('website_token', process.env.NEXT_PUBLIC_CHATWOOT_API_KEY ?? '')
-
-		// Construct the Chatwoot URL
-		const chatwootPath = path.join('/')
-		const chatwootUrl = `https://app.chatwoot.com/${chatwootPath}?${searchParams.toString()}`
-
-		// Forward the request to Chatwoot
-		const response = await fetch(chatwootUrl, {
-			method: 'POST',
-
-			headers: {
-				'content-type': request.headers.get('content-type') || 'application/json',
-				'user-agent': request.headers.get('user-agent') || 'ShapeShift-Proxy',
-				accept: request.headers.get('accept') || '*/*',
-				'accept-language': request.headers.get('accept-language') || 'en-US,en;q=0.9',
-				referer: request.headers.get('referer') || request.nextUrl.origin,
-				cookie: request.headers.get('cookie') || '',
-				'x-auth-token': request.headers.get('x-auth-token') || '',
-				'if-none-match': request.headers.get('if-none-match') || ''
-			},
-			body: body || undefined
-		})
-
-		const content = await response.text()
-
-		// Create response with proper COEP headers
-		const nextResponse = new NextResponse(content, {
-			status: response.status,
-
-			headers: {
-				'content-type': response.headers.get('content-type') || 'application/json',
-				'cross-origin-embedder-policy': 'credentialless',
-				'cross-origin-resource-policy': 'cross-origin',
-				'cross-origin-opener-policy': 'same-origin',
-				'x-frame-options': 'SAMEORIGIN',
-				'cache-control': response.headers.get('cache-control') || 'no-cache'
-			}
-		})
-
-		// Copy Set-Cookie headers if present
-		const setCookieHeaders = response.headers.get('set-cookie')
-		if (setCookieHeaders) {
-			nextResponse.headers.set('Set-Cookie', setCookieHeaders)
-		}
-
-		return nextResponse
-	} catch (error) {
-		console.error('Chatwoot proxy error:', error)
-		return new NextResponse('Proxy Error', {status: 500})
-	}
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+): Promise<NextResponse> {
+  try {
+    const { path } = await params
+    const searchParams = request.nextUrl.searchParams
+    const body = await request.text()
+
+    searchParams.set('website_token', process.env.NEXT_PUBLIC_CHATWOOT_API_KEY ?? '')
+
+    // Construct the Chatwoot URL
+    const chatwootPath = path.join('/')
+    const chatwootUrl = `https://app.chatwoot.com/${chatwootPath}?${searchParams.toString()}`
+
+    // Forward the request to Chatwoot
+    const response = await fetch(chatwootUrl, {
+      method: 'POST',
+
+      headers: {
+        'content-type': request.headers.get('content-type') || 'application/json',
+        'user-agent': request.headers.get('user-agent') || 'ShapeShift-Proxy',
+        accept: request.headers.get('accept') || '*/*',
+        'accept-language': request.headers.get('accept-language') || 'en-US,en;q=0.9',
+        referer: request.headers.get('referer') || request.nextUrl.origin,
+        cookie: request.headers.get('cookie') || '',
+        'x-auth-token': request.headers.get('x-auth-token') || '',
+        'if-none-match': request.headers.get('if-none-match') || '',
+      },
+      body: body || undefined,
+    })
+
+    const content = await response.text()
+
+    // Create response with proper COEP headers
+    const nextResponse = new NextResponse(content, {
+      status: response.status,
+
+      headers: {
+        'content-type': response.headers.get('content-type') || 'application/json',
+        'cross-origin-embedder-policy': 'credentialless',
+        'cross-origin-resource-policy': 'cross-origin',
+        'cross-origin-opener-policy': 'same-origin',
+        'x-frame-options': 'SAMEORIGIN',
+        'cache-control': response.headers.get('cache-control') || 'no-cache',
+      },
+    })
+
+    // Copy Set-Cookie headers if present
+    const setCookieHeaders = response.headers.get('set-cookie')
+    if (setCookieHeaders) {
+      nextResponse.headers.set('Set-Cookie', setCookieHeaders)
+    }
+
+    return nextResponse
+  } catch (error) {
+    console.error('Chatwoot proxy error:', error)
+    return new NextResponse('Proxy Error', { status: 500 })
+  }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index b3f72c8..736e36c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,63 +1,60 @@
-import {headers} from 'next/headers'
+import { headers } from 'next/headers'
 import Script from 'next/script'
 
-import {ChatwootWidgetWrapper} from '@/app/[lang]/_components/ChatwootWidgetWrapper'
-import {Footer} from '@/app/[lang]/_components/Footer'
-import {Header} from '@/app/[lang]/_components/header/Header'
-import {WithFonts} from '@/app/[lang]/_components/WithFonts'
-import {CachedArticlesProvider} from '@/app/[lang]/_contexts/CachedArticlesContext'
-import {CachedNewsProvider} from '@/app/[lang]/_contexts/CachedNewsContext'
-import {CachedPostsProvider} from '@/app/[lang]/_contexts/CachedPostsContext'
-import {LanguageProvider} from '@/app/[lang]/_contexts/LanguageContext'
-import {SUPPORTED_LANGUAGES} from '@/app/[lang]/_utils/i18nconfig'
-import {generateOrganizationSchema, generateWebsiteSchema} from '@/app/[lang]/_utils/schema'
+import { ChatwootWidgetWrapper } from '@/app/[lang]/_components/ChatwootWidgetWrapper'
+import { Footer } from '@/app/[lang]/_components/Footer'
+import { Header } from '@/app/[lang]/_components/header/Header'
+import { WithFonts } from '@/app/[lang]/_components/WithFonts'
+import { CachedArticlesProvider } from '@/app/[lang]/_contexts/CachedArticlesContext'
+import { CachedNewsProvider } from '@/app/[lang]/_contexts/CachedNewsContext'
+import { CachedPostsProvider } from '@/app/[lang]/_contexts/CachedPostsContext'
+import { LanguageProvider } from '@/app/[lang]/_contexts/LanguageContext'
+import { SUPPORTED_LANGUAGES } from '@/app/[lang]/_utils/i18nconfig'
+import { generateOrganizationSchema, generateWebsiteSchema } from '@/app/[lang]/_utils/schema'
 
 import './globals.css'
-import {defaultMetadata} from './metadata'
+import { defaultMetadata } from './metadata'
 
-import type {Metadata} from 'next'
-import type {ReactNode} from 'react'
+import type { Metadata } from 'next'
+import type { ReactNode } from 'react'
 
 export async function getSubdomain(): Promise<string | null> {
-	const headersList = await headers()
-	const host = headersList.get('host')
+  const headersList = await headers()
+  const host = headersList.get('host')
 
-	if (!host) {
-		return null
-	}
+  if (!host) {
+    return null
+  }
 
-	// Remove port number if present
-	const hostname = host.split(':')[0]
-	// Split hostname into parts
-	const parts = hostname.split('.')
-	// Check if we have a subdomain
-	if (parts.length > 2) {
-		// Return first part as subdomain
-		return parts[0] === 'www' || parts[0] === 'shapeshift' ? null : parts[0]
-	}
+  // Remove port number if present
+  const hostname = host.split(':')[0]
+  // Split hostname into parts
+  const parts = hostname.split('.')
+  // Check if we have a subdomain
+  if (parts.length > 2) {
+    // Return first part as subdomain
+    return parts[0] === 'www' || parts[0] === 'shapeshift' ? null : parts[0]
+  }
 
-	return null
+  return null
 }
 
 export const metadata: Metadata = defaultMetadata
 
-export default async function RootLayout({children}: {children: ReactNode}): Promise<ReactNode> {
-	const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
-	const websiteSchema = generateWebsiteSchema(baseUrl)
-	const organizationSchema = generateOrganizationSchema()
-	const weglotLanguages = SUPPORTED_LANGUAGES.map(lang => lang.weglotCode).join(',')
-	// Get nonce from headers
-	const headersList = await headers()
-	const nonce = headersList.get('x-nonce') || undefined
+export default async function RootLayout({ children }: { children: ReactNode }): Promise<ReactNode> {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.com'
+  const websiteSchema = generateWebsiteSchema(baseUrl)
+  const organizationSchema = generateOrganizationSchema()
+  const weglotLanguages = SUPPORTED_LANGUAGES.map((lang) => lang.weglotCode).join(',')
+  // Get nonce from headers
+  const headersList = await headers()
+  const nonce = headersList.get('x-nonce') || undefined
 
-	return (
-		<html lang={'en'}>
-			<head>
-				<Script
-					id={'hypelab'}
-					strategy={'beforeInteractive'}
-					nonce={nonce}>
-					{`!(function(h,y,p,e,l,a,b){
+  return (
+    <html lang={'en'}>
+      <head>
+        <Script id={'hypelab'} strategy={'beforeInteractive'} nonce={nonce}>
+          {`!(function(h,y,p,e,l,a,b){
     ((window.__hype_analytics=[]),(window.__hype_wids=[])),
     (window.HypeLabAnalytics={
       logEvent:function(){window.__hype_analytics.push(Array.prototype.slice.call(arguments))},
@@ -71,29 +68,25 @@ export default async function RootLayout({children}: {children: ReactNode}): Pro
     }),
     (b=document.getElementsByTagName(h)[0]).parentNode.insertBefore(a,b)
   })('script','https://api.hypelab.com/v1/scripts/ha-sdk.js?v=0','production','4793fe16ca',{privacy:{trackAllSessions:true}});`}
-				</Script>
-				<Script
-					strategy={'beforeInteractive'}
-					type={'text/javascript'}
-					src={'https://cdn.weglot.com/weglot.min.js'}
-					crossOrigin={'anonymous'}
-					nonce={nonce}
-				/>
-				<Script
-					strategy={'afterInteractive'}
-					id={'weglot'}
-					crossOrigin={'anonymous'}
-					nonce={nonce}>
-					{`
+        </Script>
+        <Script
+          strategy={'beforeInteractive'}
+          type={'text/javascript'}
+          src={'https://cdn.weglot.com/weglot.min.js'}
+          crossOrigin={'anonymous'}
+          nonce={nonce}
+        />
+        <Script strategy={'afterInteractive'} id={'weglot'} crossOrigin={'anonymous'} nonce={nonce}>
+          {`
 						if (typeof Weglot !== 'undefined') {
 							try {
 								Weglot.initialize({
 									api_key: '${process.env.NEXT_PUBLIC_WEGLOT_API_KEY}',
 									original_language: 'en',
 									languages: [${weglotLanguages
-										.split(',')
-										.map(lang => `'${lang}'`)
-										.join(', ')}],
+                    .split(',')
+                    .map((lang) => `'${lang}'`)
+                    .join(', ')}],
 									exclude_blocks: ['.no-translate'],
 									wait_transition: true
 								});
@@ -104,42 +97,42 @@ export default async function RootLayout({children}: {children: ReactNode}): Pro
 							console.warn('Weglot is not defined. Translation service may not be available.');
 						}
 					`}
-				</Script>
-				<Script
-					id={'website-schema'}
-					type={'application/ld+json'}
-					// eslint-disable-next-line @typescript-eslint/naming-convention
-					dangerouslySetInnerHTML={{__html: JSON.stringify(websiteSchema)}}
-					nonce={nonce}
-				/>
-				<Script
-					id={'organization-schema'}
-					type={'application/ld+json'}
-					dangerouslySetInnerHTML={{
-						// eslint-disable-next-line @typescript-eslint/naming-convention
-						__html: JSON.stringify(organizationSchema)
-					}}
-					nonce={nonce}
-				/>
-			</head>
-			<body className={'relative min-h-screen overflow-x-hidden bg-bg px-4 pb-4 text-white'}>
-				<WithFonts>
-					<LanguageProvider>
-						<CachedNewsProvider>
-							<CachedPostsProvider>
-								<CachedArticlesProvider>
-									<div className={'flex flex-col'}>
-										<Header />
-										{children}
-										<Footer />
-										<ChatwootWidgetWrapper />
-									</div>
-								</CachedArticlesProvider>
-							</CachedPostsProvider>
-						</CachedNewsProvider>
-					</LanguageProvider>
-				</WithFonts>
-			</body>
-		</html>
-	)
+        </Script>
+        <Script
+          id={'website-schema'}
+          type={'application/ld+json'}
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema) }}
+          nonce={nonce}
+        />
+        <Script
+          id={'organization-schema'}
+          type={'application/ld+json'}
+          dangerouslySetInnerHTML={{
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            __html: JSON.stringify(organizationSchema),
+          }}
+          nonce={nonce}
+        />
+      </head>
+      <body className={'relative min-h-screen overflow-x-hidden bg-bg px-4 pb-4 text-white'}>
+        <WithFonts>
+          <LanguageProvider>
+            <CachedNewsProvider>
+              <CachedPostsProvider>
+                <CachedArticlesProvider>
+                  <div className={'flex flex-col'}>
+                    <Header />
+                    {children}
+                    <Footer />
+                    <ChatwootWidgetWrapper />
+                  </div>
+                </CachedArticlesProvider>
+              </CachedPostsProvider>
+            </CachedNewsProvider>
+          </LanguageProvider>
+        </WithFonts>
+      </body>
+    </html>
+  )
 }
diff --git a/app/manifest.ts b/app/manifest.ts
index 6759226..a700458 100644
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -4,30 +4,30 @@
  * Defines default metadata, OpenGraph, and Twitter card settings
  * Used across the entire application with the ability to override per-page
  ************************************************************************************************/
-import type {MetadataRoute} from 'next'
+import type { MetadataRoute } from 'next'
 
 const siteConfig = {
-	name: 'ShapeShift',
-	description: 'Your multichain crypto home base.',
-	url: process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.builtby.dad',
-	ogImage: '/og.png'
+  name: 'ShapeShift',
+  description: 'Your multichain crypto home base.',
+  url: process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.builtby.dad',
+  ogImage: '/og.png',
 }
 
 export default function manifest(): MetadataRoute.Manifest {
-	return {
-		name: siteConfig.name,
-		short_name: siteConfig.name,
-		description: siteConfig.description,
-		start_url: '/',
-		display: 'standalone',
-		background_color: '#0C0D0F',
-		theme_color: '#FFFFFF',
-		icons: [
-			{src: '/favicon.ico', sizes: 'any', type: 'image/x-icon'},
-			{src: '/favicon-16x16.png', sizes: '16x16', type: 'image/png'},
-			{src: '/favicon-32x32.png', sizes: '32x32', type: 'image/png'},
-			{src: '/favicon-180x180.png', sizes: '180x180', type: 'image/png'},
-			{src: '/favicon-512x512.png', sizes: '512x512', type: 'image/png'}
-		]
-	}
+  return {
+    name: siteConfig.name,
+    short_name: siteConfig.name,
+    description: siteConfig.description,
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#0C0D0F',
+    theme_color: '#FFFFFF',
+    icons: [
+      { src: '/favicon.ico', sizes: 'any', type: 'image/x-icon' },
+      { src: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { src: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+      { src: '/favicon-180x180.png', sizes: '180x180', type: 'image/png' },
+      { src: '/favicon-512x512.png', sizes: '512x512', type: 'image/png' },
+    ],
+  }
 }
diff --git a/app/metadata.ts b/app/metadata.ts
index 7657b6e..2753dc3 100644
--- a/app/metadata.ts
+++ b/app/metadata.ts
@@ -3,57 +3,57 @@
  * Defines default metadata, OpenGraph, and Twitter card settings
  * Used across the entire application with the ability to override per-page
  ************************************************************************************************/
-import type {Metadata} from 'next'
+import type { Metadata } from 'next'
 
 const siteConfig = {
-	name: 'ShapeShift',
-	description: 'Your multichain crypto home base.',
-	url: process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.builtby.dad',
-	ogImage: '/og.png'
+  name: 'ShapeShift',
+  description: 'Your multichain crypto home base.',
+  url: process.env.NEXT_PUBLIC_SITE_URL || 'https://shapeshift.builtby.dad',
+  ogImage: '/og.png',
 }
 
 export const defaultMetadata: Metadata = {
-	metadataBase: new URL(siteConfig.url),
-	applicationName: siteConfig.name,
-	title: {
-		default: siteConfig.name,
-		template: `%s | ${siteConfig.name}`
-	},
-	description: siteConfig.description,
-	icons: {
-		icon: [
-			{url: '/favicon.ico'},
-			{url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png'},
-			{url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png'},
-			{url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png'},
-			{url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png'}
-		],
-		apple: [
-			{url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png'},
-			{url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png'},
-			{url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png'},
-			{url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png'}
-		]
-	},
-	openGraph: {
-		type: 'website',
-		siteName: siteConfig.name,
-		title: siteConfig.name,
-		description: siteConfig.description,
-		images: [
-			{
-				url: siteConfig.ogImage,
-				width: 1200,
-				height: 630,
-				alt: siteConfig.name
-			}
-		]
-	},
-	twitter: {
-		card: 'summary_large_image',
-		title: siteConfig.name,
-		description: siteConfig.description,
-		images: [siteConfig.ogImage],
-		creator: '@ShapeShift'
-	}
+  metadataBase: new URL(siteConfig.url),
+  applicationName: siteConfig.name,
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  icons: {
+    icon: [
+      { url: '/favicon.ico' },
+      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+      { url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png' },
+      { url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png' },
+    ],
+    apple: [
+      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+      { url: '/favicon-180x180.png', sizes: '180x180', type: 'image/png' },
+      { url: '/favicon-512x512.png', sizes: '512x512', type: 'image/png' },
+    ],
+  },
+  openGraph: {
+    type: 'website',
+    siteName: siteConfig.name,
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [
+      {
+        url: siteConfig.ogImage,
+        width: 1200,
+        height: 630,
+        alt: siteConfig.name,
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [siteConfig.ogImage],
+    creator: '@ShapeShift',
+  },
 }
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 2ed9404..28ee2e9 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,44 +1,32 @@
 import Image from 'next/image'
 
-import {Button} from '@/app/[lang]/_components/Button'
-import {dAppUrl} from '@/app/[lang]/_utils/constants'
+import { Button } from '@/app/[lang]/_components/Button'
+import { dAppUrl } from '@/app/[lang]/_utils/constants'
 
-import type {ReactNode} from 'react'
+import type { ReactNode } from 'react'
 
 export default function Page(): ReactNode {
-	return (
-		<div className={'container mx-auto my-12 h-[50vh]'}>
-			<div className={'relative h-full overflow-hidden rounded-2xl'}>
-				<Image
-					src={'/homepageBanner.png'}
-					alt={'404'}
-					width={2800}
-					height={1008}
-					className={'size-full object-cover'}
-				/>
-				<div
-					className={
-						'absolute inset-0 mx-auto flex max-w-[800px] flex-col items-center justify-center p-5 text-center'
-					}>
-					<h1 className={'text-[40px] leading-10 lg:text-7xl'}>
-						{"We can't find the page you're looking for."}
-					</h1>
+  return (
+    <div className={'container mx-auto my-12 h-[50vh]'}>
+      <div className={'relative h-full overflow-hidden rounded-2xl'}>
+        <Image
+          src={'/homepageBanner.png'}
+          alt={'404'}
+          width={2800}
+          height={1008}
+          className={'size-full object-cover'}
+        />
+        <div
+          className={'absolute inset-0 mx-auto flex max-w-[800px] flex-col items-center justify-center p-5 text-center'}
+        >
+          <h1 className={'text-[40px] leading-10 lg:text-7xl'}>{"We can't find the page you're looking for."}</h1>
 
-					<div className={'mt-14 flex flex-col gap-4 lg:flex-row'}>
-						<Button
-							title={'Launch App'}
-							href={dAppUrl}
-							className={'!w-full lg:!w-auto'}
-						/>
-						<Button
-							title={'ShapeShift Home'}
-							variant={'white'}
-							className={'!w-full lg:!w-max'}
-							href={'/'}
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
+          <div className={'mt-14 flex flex-col gap-4 lg:flex-row'}>
+            <Button title={'Launch App'} href={dAppUrl} className={'!w-full lg:!w-auto'} />
+            <Button title={'ShapeShift Home'} variant={'white'} className={'!w-full lg:!w-max'} href={'/'} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/page.tsx b/app/page.tsx
index 8c4e500..663af56 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,313 +1,277 @@
 'use client'
 
 import Image from 'next/image'
-import {useState} from 'react'
+import { useState } from 'react'
 
-import {Banner} from '@/app/[lang]/_components/Banner'
-import {LatestBlogPosts} from '@/app/[lang]/_components/BlogList'
-import {Carousel} from '@/app/[lang]/_components/Carousel'
-import {LandingCard} from '@/app/[lang]/_components/LandingCard'
-import {LandingInfoCard} from '@/app/[lang]/_components/LandingInfoCard'
-import {LocalizedLink} from '@/app/[lang]/_components/LocalizedLink'
+import { Banner } from '@/app/[lang]/_components/Banner'
+import { LatestBlogPosts } from '@/app/[lang]/_components/BlogList'
+import { Carousel } from '@/app/[lang]/_components/Carousel'
+import { LandingCard } from '@/app/[lang]/_components/LandingCard'
+import { LandingInfoCard } from '@/app/[lang]/_components/LandingInfoCard'
+import { LocalizedLink } from '@/app/[lang]/_components/LocalizedLink'
 import CardsRow from '@/app/[lang]/_components/strapi/cards-row/CardsRow'
-import {TabItem} from '@/app/[lang]/_components/TabItem'
-import {TradingWidget} from '@/app/[lang]/_components/trading/TradingWidget'
-import {cl} from '@/app/[lang]/_utils/cl'
+import { TabItem } from '@/app/[lang]/_components/TabItem'
+import { TradingWidget } from '@/app/[lang]/_components/trading/TradingWidget'
+import { cl } from '@/app/[lang]/_utils/cl'
 import {
-	carouselLogos,
-	featureCard1WhiteTitle,
-	featureCard3BlueTitle,
-	featureCard3WhiteTitle,
-	featureCard4BlueTitle,
-	featureCard4WhiteTitle,
-	featureTabTitle,
-	featuresTitle,
-	heroDescription,
-	heroTitle,
-	homepageBlueTitle,
-	homepageFeatureTabs,
-	homepageWhiteTitle,
-	landingCards,
-	landingInfoCards,
-	statCardsTitle
+  carouselLogos,
+  featureCard1WhiteTitle,
+  featureCard3BlueTitle,
+  featureCard3WhiteTitle,
+  featureCard4BlueTitle,
+  featureCard4WhiteTitle,
+  featureTabTitle,
+  featuresTitle,
+  heroDescription,
+  heroTitle,
+  homepageBlueTitle,
+  homepageFeatureTabs,
+  homepageWhiteTitle,
+  landingCards,
+  landingInfoCards,
+  statCardsTitle,
 } from '@/app/[lang]/_utils/constants'
 
-import type {TCard} from '@/app/[lang]/_components/strapi/types'
-import type {ReactNode} from 'react'
+import type { TCard } from '@/app/[lang]/_components/strapi/types'
+import type { ReactNode } from 'react'
 
 export default function HomePage(): ReactNode {
-	const [tab, setTab] = useState(homepageFeatureTabs[0])
+  const [tab, setTab] = useState(homepageFeatureTabs[0])
 
-	return (
-		<div className={'flex min-h-screen flex-col items-center pt-4'}>
-			<div className={'relative flex h-[814px] w-full justify-center rounded-2xl p-6'}>
-				<Image
-					src={'/homepageBanner.png'}
-					alt={'homepage_banner'}
-					width={'3776'}
-					height={'1628'}
-					priority
-					loading={'eager'}
-					className={'absolute left-0 top-0 z-10 size-full rounded-2xl object-cover'}
-				/>
+  return (
+    <div className={'flex min-h-screen flex-col items-center pt-4'}>
+      <div className={'relative flex h-[814px] w-full justify-center rounded-2xl p-6'}>
+        <Image
+          src={'/homepageBanner.png'}
+          alt={'homepage_banner'}
+          width={'3776'}
+          height={'1628'}
+          priority
+          loading={'eager'}
+          className={'absolute left-0 top-0 z-10 size-full rounded-2xl object-cover'}
+        />
 
-				<div
-					className={
-						'container z-20 flex w-full flex-col items-center justify-between pb-20 pt-6 lg:flex-row'
-					}>
-					<div className={'flex h-full max-w-[800px] flex-col justify-end'}>
-						<div className={'flex flex-col gap-6'}>
-							<h1
-								className={
-									'mb-6 max-w-screen-sm text-center text-[40px] leading-10 text-white lg:text-left lg:text-7xl'
-								}>
-								{heroTitle}
-							</h1>
+        <div className={'container z-20 flex w-full flex-col items-center justify-between pb-20 pt-6 lg:flex-row'}>
+          <div className={'flex h-full max-w-[800px] flex-col justify-end'}>
+            <div className={'flex flex-col gap-6'}>
+              <h1
+                className={
+                  'mb-6 max-w-screen-sm text-center text-[40px] leading-10 text-white lg:text-left lg:text-7xl'
+                }
+              >
+                {heroTitle}
+              </h1>
 
-							<p className={'mb-[60px] text-center text-sm text-white lg:text-left lg:text-xl'}>
-								{heroDescription}
-							</p>
-						</div>
-					</div>
-					<div>
-						<TradingWidget />
-					</div>
-				</div>
-			</div>
-			<div className={'absolute inset-0 -z-10 mt-[95vh] hidden lg:block'}>
-				<Image
-					src={'/heroBg.png'}
-					alt={'hero-bg'}
-					height={'2256'}
-					width={'3840'}
-					className={'object-cover'}
-				/>
-			</div>
-			<div className={'container mt-[120px]'}>
-				<div className={' mb-14 mt-40 inline'}>
-					<span className={'mb-6 text-[40px] leading-10 text-white lg:text-7xl'}>{homepageWhiteTitle}</span>
-					<br className={'hidden lg:block'} />
-					&nbsp;
-					<span className={'text-[40px] leading-10 text-blue lg:text-7xl'}>{homepageBlueTitle}</span>
-				</div>
+              <p className={'mb-[60px] text-center text-sm text-white lg:text-left lg:text-xl'}>{heroDescription}</p>
+            </div>
+          </div>
+          <div>
+            <TradingWidget />
+          </div>
+        </div>
+      </div>
+      <div className={'absolute inset-0 -z-10 mt-[95vh] hidden lg:block'}>
+        <Image src={'/heroBg.png'} alt={'hero-bg'} height={'2256'} width={'3840'} className={'object-cover'} />
+      </div>
+      <div className={'container mt-[120px]'}>
+        <div className={' mb-14 mt-40 inline'}>
+          <span className={'mb-6 text-[40px] leading-10 text-white lg:text-7xl'}>{homepageWhiteTitle}</span>
+          <br className={'hidden lg:block'} />
+          &nbsp;
+          <span className={'text-[40px] leading-10 text-blue lg:text-7xl'}>{homepageBlueTitle}</span>
+        </div>
 
-				<CardsRow data={landingCards}>{(card: TCard) => <LandingCard data={card} />}</CardsRow>
+        <CardsRow data={landingCards}>{(card: TCard) => <LandingCard data={card} />}</CardsRow>
 
-				<div className={'mb-[120px] lg:mb-60'}>
-					<h1 className={'mb-8 text-[40px] leading-10 text-white lg:mb-14 lg:text-7xl'}>{featuresTitle}</h1>
-					<div className={'group relative h-[350px] overflow-hidden rounded-2xl md:h-[500px] lg:h-[674px]'}>
-						<Image
-							src={'/landing/landingTabsBg.png'}
-							alt={'tab_bg'}
-							width={'2800'}
-							height={'1348'}
-							className={'size-full object-cover transition-all duration-300 group-hover:scale-[1.02]'}
-						/>
-						<div
-							className={
-								'absolute -bottom-6 left-1/2 w-3/4 -translate-x-1/2 overflow-hidden rounded-t-2xl'
-							}>
-							<Image
-								src={'/landing/tabBuy.png'}
-								alt={'img'}
-								width={'2160'}
-								height={'868'}
-								className={`object-cover ${tab === 'Buy' ? 'block' : 'hidden'}`}
-								priority
-							/>
-							<Image
-								src={'/landing/tabTrade.png'}
-								alt={'img'}
-								width={'2160'}
-								height={'868'}
-								className={`object-cover ${tab === 'Trade' ? 'block' : 'hidden'}`}
-								priority
-							/>
-							<Image
-								src={'/landing/tabMarkets.png'}
-								alt={'img'}
-								width={'2160'}
-								height={'868'}
-								className={`object-cover ${tab === 'Markets' ? 'block' : 'hidden'}`}
-								priority
-							/>
-						</div>
+        <div className={'mb-[120px] lg:mb-60'}>
+          <h1 className={'mb-8 text-[40px] leading-10 text-white lg:mb-14 lg:text-7xl'}>{featuresTitle}</h1>
+          <div className={'group relative h-[350px] overflow-hidden rounded-2xl md:h-[500px] lg:h-[674px]'}>
+            <Image
+              src={'/landing/landingTabsBg.png'}
+              alt={'tab_bg'}
+              width={'2800'}
+              height={'1348'}
+              className={'size-full object-cover transition-all duration-300 group-hover:scale-[1.02]'}
+            />
+            <div className={'absolute -bottom-6 left-1/2 w-3/4 -translate-x-1/2 overflow-hidden rounded-t-2xl'}>
+              <Image
+                src={'/landing/tabBuy.png'}
+                alt={'img'}
+                width={'2160'}
+                height={'868'}
+                className={`object-cover ${tab === 'Buy' ? 'block' : 'hidden'}`}
+                priority
+              />
+              <Image
+                src={'/landing/tabTrade.png'}
+                alt={'img'}
+                width={'2160'}
+                height={'868'}
+                className={`object-cover ${tab === 'Trade' ? 'block' : 'hidden'}`}
+                priority
+              />
+              <Image
+                src={'/landing/tabMarkets.png'}
+                alt={'img'}
+                width={'2160'}
+                height={'868'}
+                className={`object-cover ${tab === 'Markets' ? 'block' : 'hidden'}`}
+                priority
+              />
+            </div>
 
-						<div className={'absolute left-0 top-0 mt-8 flex size-full flex-col items-center lg:mt-16'}>
-							<h1
-								className={
-									'mb-7 px-4 text-center text-2xl text-white lg:px-0 lg:text-[40px] lg:leading-[40px]'
-								}>
-								{featureTabTitle}
-							</h1>
-							<div className={'flex w-min gap-2 rounded-full border border-white/10 p-2 lg:gap-4'}>
-								{homepageFeatureTabs.map((item: string) => (
-									<button
-										key={item}
-										onClick={() => setTab(item)}>
-										<TabItem
-											className={'!px-6 lg:!px-8'}
-											title={item}
-											selected={tab === item}
-										/>
-									</button>
-								))}
-							</div>
-						</div>
-					</div>
-					<div className={'mb-[120px] mt-2 grid w-full grid-cols-1 gap-2 lg:mb-60 lg:grid-cols-3'}>
-						<Card
-							className={
-								'relative col-span-1 rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] transition-all duration-300 hover:scale-[1.02] lg:col-span-2 lg:row-span-1'
-							}
-							href={
-								'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=cta&utm_campaign=gridcard'
-							}
-							target={'_blank'}>
-							<Image
-								src={'/landing/landingCard1.png'}
-								alt={'tab_bg'}
-								width={'931'}
-								height={'322'}
-								className={'size-full object-cover'}
-							/>
-							<div
-								className={
-									'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
-								}>
-								<span className={'max-w-[560px] text-center text-lg text-white lg:text-xl'}>
-									{featureCard1WhiteTitle}
-								</span>
-							</div>
-						</Card>
-						<Card
-							className={'col-span-1 row-span-2'}
-							href={'/mobile-app'}>
-							<Image
-								src={'/landing/landingCard2.png'}
-								alt={'tab_bg'}
-								width={'461'}
-								height={'652'}
-								className={'size-full object-cover transition-all duration-300 hover:scale-[1.02]'}
-							/>
-						</Card>
-						<Card
-							className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
-							href={'/defi-wallet'}>
-							<Image
-								src={'/landing/landingCard3.png'}
-								alt={'tab_bg'}
-								width={'461'}
-								height={'322'}
-								className={'size-full object-cover transition-all duration-300 '}
-							/>
-							<div
-								className={
-									'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
-								}>
-								<span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
-									{featureCard3WhiteTitle}
-								</span>
-								<span className={'text-center text-[40px] leading-[48px]'}>
-									{featureCard3BlueTitle}
-								</span>
-							</div>
-						</Card>
-						<Card
-							className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
-							href={
-								'https://app.shapeshift.com/markets/recommended?utm_source=mainpage&utm_medium=cta&utm_campaign=earnmore#/markets/recommended'
-							}
-							target={'_blank'}>
-							<Image
-								src={'/landing/landingCard4.png'}
-								alt={'tab_bg'}
-								width={'461'}
-								height={'322'}
-								className={'size-full object-cover'}
-							/>
-							<div
-								className={
-									'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
-								}>
-								<span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
-									{featureCard4WhiteTitle}
-								</span>
-								<span className={'text-center text-[40px] leading-[48px]'}>
-									{featureCard4BlueTitle}
-								</span>
-							</div>
-						</Card>
-						<Card className={'col-span-1 row-span-1 flex items-center bg-secondBg lg:col-span-3'}>
-							<Carousel pauseOnHover>
-								{Object.values(carouselLogos).map(({Logo, href}, index) => (
-									<div
-										key={index}
-										className={'mx-10'}>
-										<LocalizedLink
-											href={href}
-											target={'_blank'}
-											rel={'noopener noreferrer'}
-											className={'relative flex max-h-10 w-max items-center justify-start'}>
-											<Logo />
-										</LocalizedLink>
-									</div>
-								))}
-							</Carousel>
-						</Card>
-					</div>
-					<div className={'mb-[120px] lg:mb-60'}>
-						<LatestBlogPosts limit={2} />
-					</div>
-					<div className={'mb-[120px] lg:mb-60'}>
-						<div className={'grid grid-cols-1 gap-4 lg:grid-cols-3'}>
-							<div className={'col-span-1 mb-6 lg:mb-0'}>
-								<h1 className={'max-w-[400px] text-[40px] leading-10 lg:text-7xl'}>{statCardsTitle}</h1>
-							</div>
-							<div className={'col-span-1 flex flex-col gap-4'}>
-								<LandingInfoCard
-									title={landingInfoCards[0].title}
-									stat={landingInfoCards[0].stat}
-								/>
-								<LandingInfoCard
-									title={landingInfoCards[1].title}
-									stat={landingInfoCards[1].stat}
-								/>
-							</div>
-							<div className={'col-span-1 flex flex-col gap-4'}>
-								<LandingInfoCard
-									title={landingInfoCards[2].title}
-									stat={landingInfoCards[2].stat}
-								/>
-								<LandingInfoCard
-									title={landingInfoCards[3].title}
-									stat={landingInfoCards[3].stat}
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-				<Banner />
-			</div>
-		</div>
-	)
+            <div className={'absolute left-0 top-0 mt-8 flex size-full flex-col items-center lg:mt-16'}>
+              <h1 className={'mb-7 px-4 text-center text-2xl text-white lg:px-0 lg:text-[40px] lg:leading-[40px]'}>
+                {featureTabTitle}
+              </h1>
+              <div className={'flex w-min gap-2 rounded-full border border-white/10 p-2 lg:gap-4'}>
+                {homepageFeatureTabs.map((item: string) => (
+                  <button key={item} onClick={() => setTab(item)}>
+                    <TabItem className={'!px-6 lg:!px-8'} title={item} selected={tab === item} />
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className={'mb-[120px] mt-2 grid w-full grid-cols-1 gap-2 lg:mb-60 lg:grid-cols-3'}>
+            <Card
+              className={
+                'relative col-span-1 rounded-2xl bg-gradient-to-b from-[#101114] to-[#16181C] transition-all duration-300 hover:scale-[1.02] lg:col-span-2 lg:row-span-1'
+              }
+              href={'https://app.shapeshift.com/?utm_source=mainpage&utm_medium=cta&utm_campaign=gridcard'}
+              target={'_blank'}
+            >
+              <Image
+                src={'/landing/landingCard1.png'}
+                alt={'tab_bg'}
+                width={'931'}
+                height={'322'}
+                className={'size-full object-cover'}
+              />
+              <div
+                className={
+                  'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
+                }
+              >
+                <span className={'max-w-[560px] text-center text-lg text-white lg:text-xl'}>
+                  {featureCard1WhiteTitle}
+                </span>
+              </div>
+            </Card>
+            <Card className={'col-span-1 row-span-2'} href={'/mobile-app'}>
+              <Image
+                src={'/landing/landingCard2.png'}
+                alt={'tab_bg'}
+                width={'461'}
+                height={'652'}
+                className={'size-full object-cover transition-all duration-300 hover:scale-[1.02]'}
+              />
+            </Card>
+            <Card
+              className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
+              href={'/defi-wallet'}
+            >
+              <Image
+                src={'/landing/landingCard3.png'}
+                alt={'tab_bg'}
+                width={'461'}
+                height={'322'}
+                className={'size-full object-cover transition-all duration-300 '}
+              />
+              <div
+                className={
+                  'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
+                }
+              >
+                <span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
+                  {featureCard3WhiteTitle}
+                </span>
+                <span className={'text-center text-[40px] leading-[48px]'}>{featureCard3BlueTitle}</span>
+              </div>
+            </Card>
+            <Card
+              className={'relative col-span-1 row-span-1 transition-all duration-300 hover:scale-[1.02]'}
+              href={
+                'https://app.shapeshift.com/markets/recommended?utm_source=mainpage&utm_medium=cta&utm_campaign=earnmore#/markets/recommended'
+              }
+              target={'_blank'}
+            >
+              <Image
+                src={'/landing/landingCard4.png'}
+                alt={'tab_bg'}
+                width={'461'}
+                height={'322'}
+                className={'size-full object-cover'}
+              />
+              <div
+                className={
+                  'absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-[40px] leading-[48px]'
+                }
+              >
+                <span className={'text-center text-[64px] italic leading-[64px] text-blue'}>
+                  {featureCard4WhiteTitle}
+                </span>
+                <span className={'text-center text-[40px] leading-[48px]'}>{featureCard4BlueTitle}</span>
+              </div>
+            </Card>
+            <Card className={'col-span-1 row-span-1 flex items-center bg-secondBg lg:col-span-3'}>
+              <Carousel pauseOnHover>
+                {Object.values(carouselLogos).map(({ Logo, href }, index) => (
+                  <div key={index} className={'mx-10'}>
+                    <LocalizedLink
+                      href={href}
+                      target={'_blank'}
+                      rel={'noopener noreferrer'}
+                      className={'relative flex max-h-10 w-max items-center justify-start'}
+                    >
+                      <Logo />
+                    </LocalizedLink>
+                  </div>
+                ))}
+              </Carousel>
+            </Card>
+          </div>
+          <div className={'mb-[120px] lg:mb-60'}>
+            <LatestBlogPosts limit={2} />
+          </div>
+          <div className={'mb-[120px] lg:mb-60'}>
+            <div className={'grid grid-cols-1 gap-4 lg:grid-cols-3'}>
+              <div className={'col-span-1 mb-6 lg:mb-0'}>
+                <h1 className={'max-w-[400px] text-[40px] leading-10 lg:text-7xl'}>{statCardsTitle}</h1>
+              </div>
+              <div className={'col-span-1 flex flex-col gap-4'}>
+                <LandingInfoCard title={landingInfoCards[0].title} stat={landingInfoCards[0].stat} />
+                <LandingInfoCard title={landingInfoCards[1].title} stat={landingInfoCards[1].stat} />
+              </div>
+              <div className={'col-span-1 flex flex-col gap-4'}>
+                <LandingInfoCard title={landingInfoCards[2].title} stat={landingInfoCards[2].stat} />
+                <LandingInfoCard title={landingInfoCards[3].title} stat={landingInfoCards[3].stat} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <Banner />
+      </div>
+    </div>
+  )
 }
 
-const Card = (props: {children: ReactNode; className: string; href?: string; target?: string}): ReactNode => {
-	const {children, className, href, target} = props
+const Card = (props: { children: ReactNode; className: string; href?: string; target?: string }): ReactNode => {
+  const { children, className, href, target } = props
 
-	return (
-		<>
-			{href ? (
-				<LocalizedLink
-					href={href}
-					target={target}
-					className={cl('cursor-pointer overflow-hidden rounded-2xl', className)}>
-					{children}
-				</LocalizedLink>
-			) : (
-				<div className={cl('overflow-hidden rounded-2xl', className)}>{children}</div>
-			)}
-		</>
-	)
+  return (
+    <>
+      {href ? (
+        <LocalizedLink
+          href={href}
+          target={target}
+          className={cl('cursor-pointer overflow-hidden rounded-2xl', className)}
+        >
+          {children}
+        </LocalizedLink>
+      ) : (
+        <div className={cl('overflow-hidden rounded-2xl', className)}>{children}</div>
+      )}
+    </>
+  )
 }
diff --git a/bun.lockb b/bun.lockb
index 85bc08e15dac472f872a2b4bae458aa2cb10b902..2390945e20c5788d9125b941994e3fe45c4c61ed 100755
GIT binary patch
delta 45138
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%0Dhuj##8ynVr+&vGzJF!LfS<-$m0USXv?
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
KlML$c!2bXklX$fN

delta 43882
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
Ggct!AL}vE@

diff --git a/eslint.config.mjs b/eslint.config.mjs
index a1f021d..437ff04 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,7 @@
 import js from '@eslint/js'
 
 import importPlugin from 'eslint-plugin-import'
+import prettierPlugin from 'eslint-plugin-prettier/recommended'
 import reactPlugin from 'eslint-plugin-react'
 import reactHooksPlugin from 'eslint-plugin-react-hooks'
 import tailwindcssPlugin from 'eslint-plugin-tailwindcss'
@@ -79,7 +80,6 @@ export default tseslint.config(
 			// React rules
 			'react/prop-types': 0,
 			'react/jsx-curly-brace-presence': ['error', {props: 'always', children: 'always'}],
-			'react/jsx-first-prop-new-line': ['error', 'multiline'],
 			'react/jsx-closing-tag-location': 2,
 			'react/jsx-max-props-per-line': 'off',
 
@@ -88,29 +88,9 @@ export default tseslint.config(
 
 			// General rules
 			'no-async-promise-executor': 0,
-			semi: [2, 'never'],
-			quotes: [2, 'single', {avoidEscape: true}],
-			'object-curly-spacing': [2, 'never'],
-			'array-bracket-spacing': [2, 'never'],
-			'comma-dangle': ['error', 'never'],
-			'arrow-parens': ['error', 'as-needed'],
 			'no-else-return': ['error', {allowElseIf: false}],
-			'eol-last': ['error', 'always'],
-			'array-bracket-newline': ['error', {multiline: true}],
 			'no-unused-vars': 'off', // Turned off in favor of @typescript-eslint version
 			curly: ['error', 'all'],
-			'object-curly-newline': [
-				'error',
-				{
-					ObjectExpression: {multiline: true, consistent: true},
-					ObjectPattern: {multiline: true, consistent: true},
-					ImportDeclaration: {multiline: true, consistent: true},
-					ExportDeclaration: {multiline: true, minProperties: 3}
-				}
-			],
-			'object-property-newline': ['error', {allowAllPropertiesOnSameLine: true}],
-			'no-multi-spaces': ['error', {ignoreEOLComments: false}],
-			'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
 			'sort-imports': [
 				'error',
 				{
@@ -121,7 +101,6 @@ export default tseslint.config(
 					allowSeparatedGroups: true
 				}
 			],
-
 			'object-shorthand': 'error',
 			eqeqeq: 'error',
 			'default-case': 'error',
@@ -190,10 +169,7 @@ export default tseslint.config(
 			'@typescript-eslint/prefer-includes': 'error',
 			'@typescript-eslint/promise-function-async': 'error',
 			'@typescript-eslint/require-array-sort-compare': 'error',
-			'brace-style': 'off',
 			'@typescript-eslint/prefer-optional-chain': 'error',
-			indent: 'off',
-			'@typescript-eslint/indent': 0,
 
 			// Unused imports rules
 			'unused-imports/no-unused-imports': 'error',
@@ -212,5 +188,21 @@ export default tseslint.config(
 
 			// Next.js rules - using Next.js built-in ESLint config instead
 		}
+	},
+
+	// Prettier last — disables all ESLint formatting rules that conflict, then enforces Prettier as a single rule
+	prettierPlugin,
+	{
+		rules: {
+			'prettier/prettier': [
+				'error',
+				{
+					singleQuote: true,
+					semi: false,
+					trailingComma: 'es5',
+					printWidth: 120
+				}
+			]
+		}
 	}
 )
diff --git a/middleware.ts b/middleware.ts
index 3d91ce9..18cd194 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,185 +1,185 @@
-import {NextResponse} from 'next/server'
+import { NextResponse } from 'next/server'
 
 import {
-	DEFAULT_LANGUAGE,
-	DEPRECATED_LANGUAGES,
-	SUPPORTED_LANGUAGES,
-	getLanguageFromPath
+  DEFAULT_LANGUAGE,
+  DEPRECATED_LANGUAGES,
+  SUPPORTED_LANGUAGES,
+  getLanguageFromPath,
 } from '@/app/[lang]/_utils/i18nconfig'
 
-import type {NextRequest} from 'next/server'
+import type { NextRequest } from 'next/server'
 
 /**
  * Extract language from subdomain if present
  */
 function extractLanguageFromSubdomain(hostname: string): string | null {
-	const hostParts = hostname.split('.')
+  const hostParts = hostname.split('.')
 
-	if (hostParts.length <= 2) {
-		return null
-	}
+  if (hostParts.length <= 2) {
+    return null
+  }
 
-	const possibleLang = hostParts[0]
-	const isValidLanguage = SUPPORTED_LANGUAGES.some(lang => lang.code === possibleLang)
-	const isValidDeprecatedLanguage = DEPRECATED_LANGUAGES.includes(possibleLang)
+  const possibleLang = hostParts[0]
+  const isValidLanguage = SUPPORTED_LANGUAGES.some((lang) => lang.code === possibleLang)
+  const isValidDeprecatedLanguage = DEPRECATED_LANGUAGES.includes(possibleLang)
 
-	return isValidLanguage || isValidDeprecatedLanguage ? possibleLang : null
+  return isValidLanguage || isValidDeprecatedLanguage ? possibleLang : null
 }
 
 /**
  * Check if pathname contains a locale
  */
 function hasLocaleInPath(pathname: string): boolean {
-	return SUPPORTED_LANGUAGES.some(lang => pathname.startsWith(`/${lang.code}/`) || pathname === `/${lang.code}`)
+  return SUPPORTED_LANGUAGES.some((lang) => pathname.startsWith(`/${lang.code}/`) || pathname === `/${lang.code}`)
 }
 
 /**
  * Create headers with locale information
  */
 function createLocaleHeaders(requestHeaders: Headers, pathname: string, locale: string): Headers {
-	const headers = new Headers(requestHeaders)
-	headers.set('x-current-path', pathname)
-	headers.set('x-locale', locale)
-	return headers
+  const headers = new Headers(requestHeaders)
+  headers.set('x-current-path', pathname)
+  headers.set('x-locale', locale)
+  return headers
 }
 
 /**
  * Set locale cookie on response
  */
 function setLocaleCookie(response: NextResponse, locale: string): void {
-	response.cookies.set('locale', locale, {
-		httpOnly: false,
-		sameSite: 'lax',
-		path: '/',
-		maxAge: 60 * 60 * 24 * 365 // 1 year
-	})
+  response.cookies.set('locale', locale, {
+    httpOnly: false,
+    sameSite: 'lax',
+    path: '/',
+    maxAge: 60 * 60 * 24 * 365, // 1 year
+  })
 }
 
 /**
  * Handle subdomain-based language redirect
  */
 function handleSubdomainRedirect(request: NextRequest, hostname: string, subdomainLang: string): NextResponse {
-	const hostParts = hostname.split('.')
-	const mainDomain = hostParts.slice(1).join('.')
+  const hostParts = hostname.split('.')
+  const mainDomain = hostParts.slice(1).join('.')
 
-	const newUrl = new URL(request.url)
-	newUrl.hostname = mainDomain
+  const newUrl = new URL(request.url)
+  newUrl.hostname = mainDomain
 
-	// Redirect deprecated languages to default language without prefix
-	if (DEPRECATED_LANGUAGES.includes(subdomainLang)) {
-		newUrl.pathname = request.nextUrl.pathname // Preserve path
-		return NextResponse.redirect(newUrl, 301)
-	}
+  // Redirect deprecated languages to default language without prefix
+  if (DEPRECATED_LANGUAGES.includes(subdomainLang)) {
+    newUrl.pathname = request.nextUrl.pathname // Preserve path
+    return NextResponse.redirect(newUrl, 301)
+  }
 
-	newUrl.pathname = `/${subdomainLang}${request.nextUrl.pathname}`
+  newUrl.pathname = `/${subdomainLang}${request.nextUrl.pathname}`
 
-	return NextResponse.redirect(newUrl, 301)
+  return NextResponse.redirect(newUrl, 301)
 }
 
 /**
  * Handle locale-based routing logic
  */
 function handleLocaleRouting(
-	request: NextRequest,
-	response: NextResponse,
-	locale: string,
-	pathHasLocale: boolean
+  request: NextRequest,
+  response: NextResponse,
+  locale: string,
+  pathHasLocale: boolean
 ): NextResponse {
-	const pathname = request.nextUrl.pathname
-
-	// If path has locale, return as is (Next.js will handle the routing)
-	if (pathHasLocale) {
-		console.log('returning response - path has locale')
-		return response
-	}
-
-	// If no locale in path and it's the default language, rewrite to include it
-	if (locale === DEFAULT_LANGUAGE) {
-		request.nextUrl.pathname = `/${DEFAULT_LANGUAGE}${pathname}`
-		console.log('rewriting to', request.nextUrl.pathname)
-		return NextResponse.rewrite(request.nextUrl)
-	}
-
-	// Redirect to include locale in path for non-default languages
-	request.nextUrl.pathname = `/${locale}${pathname}`
-	console.log('redirecting to', request.nextUrl.pathname)
-	return NextResponse.redirect(request.nextUrl)
+  const pathname = request.nextUrl.pathname
+
+  // If path has locale, return as is (Next.js will handle the routing)
+  if (pathHasLocale) {
+    console.log('returning response - path has locale')
+    return response
+  }
+
+  // If no locale in path and it's the default language, rewrite to include it
+  if (locale === DEFAULT_LANGUAGE) {
+    request.nextUrl.pathname = `/${DEFAULT_LANGUAGE}${pathname}`
+    console.log('rewriting to', request.nextUrl.pathname)
+    return NextResponse.rewrite(request.nextUrl)
+  }
+
+  // Redirect to include locale in path for non-default languages
+  request.nextUrl.pathname = `/${locale}${pathname}`
+  console.log('redirecting to', request.nextUrl.pathname)
+  return NextResponse.redirect(request.nextUrl)
 }
 
 export function middleware(request: NextRequest): NextResponse {
-	const pathname = request.nextUrl.pathname
-	const hostname = request.headers.get('host') || ''
-
-	// Generate a nonce for CSP
-	const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
-
-	// Check for language subdomain
-	const subdomainLang = extractLanguageFromSubdomain(hostname)
-
-	// Handle subdomain-based language redirect
-	if (subdomainLang && subdomainLang !== DEFAULT_LANGUAGE) {
-		return handleSubdomainRedirect(request, hostname, subdomainLang)
-	}
-
-	// Check if path has locale
-	const isPathWithLocale = hasLocaleInPath(pathname)
-
-	// Get saved locale from cookie
-	const savedLocale = request.cookies.get('locale')?.value
-
-	// Get browser language
-	const acceptLanguage = request.headers.get('accept-language') || ''
-	const browserLang = acceptLanguage.split(',')[0]?.split('-')[0]?.toLowerCase()
-	const isBrowserLangSupported = SUPPORTED_LANGUAGES.some(lang => lang.code === browserLang)
-
-	// Determine locale priority: URL path > saved cookie > browser language > default
-	let locale: string
-	if (isPathWithLocale) {
-		locale = getLanguageFromPath(pathname) || DEFAULT_LANGUAGE
-	} else if (savedLocale && SUPPORTED_LANGUAGES.some(lang => lang.code === savedLocale)) {
-		locale = savedLocale
-	} else if (!savedLocale && isBrowserLangSupported && browserLang) {
-		// Only use browser language if no cookie is set
-		locale = browserLang
-	} else {
-		locale = DEFAULT_LANGUAGE
-	}
-
-	// Create response with locale headers and nonce
-	const headers = createLocaleHeaders(request.headers, pathname, locale)
-	headers.set('x-nonce', nonce)
-	const response = NextResponse.next({headers})
-
-	// Only set locale cookie if user explicitly changed language (cookie already exists)
-	// This prevents auto-setting cookie based on browser language
-	if (savedLocale) {
-		setLocaleCookie(response, locale)
-	}
-
-	// Set security headers including COEP
-	response.headers.set('Cross-Origin-Embedder-Policy', 'credentialless')
-	response.headers.set('Cross-Origin-Resource-Policy', 'cross-origin')
-	response.headers.set('Cross-Origin-Opener-Policy', 'same-origin')
-
-	// Set the CSP header with the nonce
-	const cspHeader = `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://cdn.weglot.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.weglot.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; media-src 'self' https:; connect-src 'self' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://strapi.shapeshift.com https://cdn.weglot.com https://api.weglot.com https://cdn-api-weglot.com wss://app.chatwoot.com  https://api.thorchain.shapeshift.com; frame-src 'self' https://widget.chatwoot.com https://app.chatwoot.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self' https://app.chatwoot.com; frame-ancestors 'self'; upgrade-insecure-requests;`
-	response.headers.set('Content-Security-Policy', cspHeader)
-
-	// Handle locale routing
-	return handleLocaleRouting(request, response, locale, isPathWithLocale)
+  const pathname = request.nextUrl.pathname
+  const hostname = request.headers.get('host') || ''
+
+  // Generate a nonce for CSP
+  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+
+  // Check for language subdomain
+  const subdomainLang = extractLanguageFromSubdomain(hostname)
+
+  // Handle subdomain-based language redirect
+  if (subdomainLang && subdomainLang !== DEFAULT_LANGUAGE) {
+    return handleSubdomainRedirect(request, hostname, subdomainLang)
+  }
+
+  // Check if path has locale
+  const isPathWithLocale = hasLocaleInPath(pathname)
+
+  // Get saved locale from cookie
+  const savedLocale = request.cookies.get('locale')?.value
+
+  // Get browser language
+  const acceptLanguage = request.headers.get('accept-language') || ''
+  const browserLang = acceptLanguage.split(',')[0]?.split('-')[0]?.toLowerCase()
+  const isBrowserLangSupported = SUPPORTED_LANGUAGES.some((lang) => lang.code === browserLang)
+
+  // Determine locale priority: URL path > saved cookie > browser language > default
+  let locale: string
+  if (isPathWithLocale) {
+    locale = getLanguageFromPath(pathname) || DEFAULT_LANGUAGE
+  } else if (savedLocale && SUPPORTED_LANGUAGES.some((lang) => lang.code === savedLocale)) {
+    locale = savedLocale
+  } else if (!savedLocale && isBrowserLangSupported && browserLang) {
+    // Only use browser language if no cookie is set
+    locale = browserLang
+  } else {
+    locale = DEFAULT_LANGUAGE
+  }
+
+  // Create response with locale headers and nonce
+  const headers = createLocaleHeaders(request.headers, pathname, locale)
+  headers.set('x-nonce', nonce)
+  const response = NextResponse.next({ headers })
+
+  // Only set locale cookie if user explicitly changed language (cookie already exists)
+  // This prevents auto-setting cookie based on browser language
+  if (savedLocale) {
+    setLocaleCookie(response, locale)
+  }
+
+  // Set security headers including COEP
+  response.headers.set('Cross-Origin-Embedder-Policy', 'credentialless')
+  response.headers.set('Cross-Origin-Resource-Policy', 'cross-origin')
+  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin')
+
+  // Set the CSP header with the nonce
+  const cspHeader = `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://cdn.weglot.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.weglot.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; media-src 'self' https:; connect-src 'self' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://strapi.shapeshift.com https://cdn.weglot.com https://api.weglot.com https://cdn-api-weglot.com wss://app.chatwoot.com  https://api.thorchain.shapeshift.com; frame-src 'self' https://widget.chatwoot.com https://app.chatwoot.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self' https://app.chatwoot.com; frame-ancestors 'self'; upgrade-insecure-requests;`
+  response.headers.set('Content-Security-Policy', cspHeader)
+
+  // Handle locale routing
+  return handleLocaleRouting(request, response, locale, isPathWithLocale)
 }
 
 export const config = {
-	matcher: [
-		/*
-		 * Match all request paths except for the ones starting with:
-		 * - api (API routes)
-		 * - _next/static (static files)
-		 * - _next/image (image optimization files)
-		 * - favicon.ico, sitemap.xml, robots.txt
-		 * - chatwoot (now handled by API route)
-		 * - public assets with extensions (images, fonts, etc.)
-		 */
-		'/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|chatwoot|.*\\.(?:svg|png|jpg|jpeg|gif|webp|webmanifest|ico|css|js|woff|woff2|ttf|otf)).*)'
-	]
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico, sitemap.xml, robots.txt
+     * - chatwoot (now handled by API route)
+     * - public assets with extensions (images, fonts, etc.)
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|chatwoot|.*\\.(?:svg|png|jpg|jpeg|gif|webp|webmanifest|ico|css|js|woff|woff2|ttf|otf)).*)',
+  ],
 }
diff --git a/package.json b/package.json
index 19f9669..a41c7e0 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
 		"dev": "next dev --turbopack",
 		"build": "next build",
 		"start": "next start",
-		"lint": "next lint",
+		"lint": "eslint . --cache",
+		"lint:fix": "eslint . --cache --fix",
 		"deadcode": "ts-prune | grep -v 'page\\.tsx\\|loading\\.tsx\\|layout\\.tsx'",
 		"release": "bun scripts/release.ts"
 	},
@@ -46,6 +47,7 @@
 		"eslint-import-resolver-typescript": "^3.7.0",
 		"eslint-plugin-brackets": "^0.1.3",
 		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-prettier": "^5.5.5",
 		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-react-hooks": "^5.1.0",
 		"eslint-plugin-tailwindcss": "^3.17.5",
@@ -60,4 +62,4 @@
 		"ts-prune": "^0.10.3",
 		"typescript": "^5"
 	}
-}
+}
\ No newline at end of file
diff --git a/railway.json b/railway.json
new file mode 100644
index 0000000..0b542af
--- /dev/null
+++ b/railway.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://railway.com/railway.schema.json",
+  "build": {
+    "buildCommand": "bun install --frozen-lockfile && bun run build",
+    "watchPatterns": [
+      "app/**",
+      "public/**",
+      "package.json",
+      "bun.lockb",
+      "next.config.ts",
+      "tailwind.config.ts",
+      "postcss.config.mjs",
+      "tsconfig.json",
+      "middleware.ts",
+      "railway.json"
+    ]
+  },
+  "deploy": {
+    "startCommand": "bun run start",
+    "healthcheckPath": "/",
+    "restartPolicyType": "ALWAYS"
+  }
+}
diff --git a/scripts/release.ts b/scripts/release.ts
index 9c379c4..ced30d1 100755
--- a/scripts/release.ts
+++ b/scripts/release.ts
@@ -1,77 +1,77 @@
 #!/usr/bin/env bun
 
-import {exec} from 'child_process'
+import { exec } from 'child_process'
 
 import chalk from 'chalk'
 import inquirer from 'inquirer'
 import pify from 'pify'
 import semver from 'semver'
-import {simpleGit as git} from 'simple-git'
+import { simpleGit as git } from 'simple-git'
 
-import {exit, getLatestSemverTag} from './utils'
+import { exit, getLatestSemverTag } from './utils'
 
 const assertIsCleanRepo = async (): Promise<void> => {
-	const gitStatus = await git().status()
-	if (!gitStatus.isClean()) {
-		console.log(chalk.red('Your repository is not clean. Please commit or stash your changes.'))
-		exit()
-	}
+  const gitStatus = await git().status()
+  if (!gitStatus.isClean()) {
+    console.log(chalk.red('Your repository is not clean. Please commit or stash your changes.'))
+    exit()
+  }
 }
 
 const assertGhInstalled = async (): Promise<void> => {
-	try {
-		await pify(exec)('hash gh')
-	} catch {
-		exit(chalk.red('Please install GitHub CLI https://github.com/cli/cli#installation'))
-	}
+  try {
+    await pify(exec)('hash gh')
+  } catch {
+    exit(chalk.red('Please install GitHub CLI https://github.com/cli/cli#installation'))
+  }
 }
 
 const assertGhAuth = async (): Promise<void> => {
-	try {
-		await pify(exec)('gh auth status')
-	} catch (e) {
-		exit(chalk.red((e as Error).message))
-	}
+  try {
+    await pify(exec)('gh auth status')
+  } catch (e) {
+    exit(chalk.red((e as Error).message))
+  }
 }
 
-const getCommits = async (from: string, to: string): Promise<{messages: string[]; total: number}> => {
-	// Get the last release tag for proper commit range calculation
-	const latestTag = from === 'origin/release' ? await getLatestSemverTag() : null
-
-	// Use tag-based range if available, otherwise fall back to branch comparison
-	let range: string
-	if (latestTag && from === 'origin/release' && latestTag !== 'v1.0.0') {
-		// Use tag-based range if we have real tags (not the default fallback)
-		range = `${latestTag}..${to}`
-	} else {
-		// Fall back to branch comparison when no tags exist or using non-release branches
-		range = `${from}..${to}`
-	}
-
-	const {all, total} = await git().log(['--oneline', '--first-parent', '--pretty=format:%s', range])
-	const messages = all.map(({hash}) => hash)
-	return {messages, total}
+const getCommits = async (from: string, to: string): Promise<{ messages: string[]; total: number }> => {
+  // Get the last release tag for proper commit range calculation
+  const latestTag = from === 'origin/release' ? await getLatestSemverTag() : null
+
+  // Use tag-based range if available, otherwise fall back to branch comparison
+  let range: string
+  if (latestTag && from === 'origin/release' && latestTag !== 'v1.0.0') {
+    // Use tag-based range if we have real tags (not the default fallback)
+    range = `${latestTag}..${to}`
+  } else {
+    // Fall back to branch comparison when no tags exist or using non-release branches
+    range = `${from}..${to}`
+  }
+
+  const { all, total } = await git().log(['--oneline', '--first-parent', '--pretty=format:%s', range])
+  const messages = all.map(({ hash }) => hash)
+  return { messages, total }
 }
 
 const inquireProceedWithCommits = async (commits: string[], action: 'create' | 'merge'): Promise<void> => {
-	console.log(chalk.blue(['', commits, ''].join('\n')))
-	const message =
-		action === 'create'
-			? 'Do you want to create a release with these commits?'
-			: 'Do you want to merge and push these commits into main?'
-	const questions: inquirer.QuestionCollection<{shouldProceed: boolean}> = [
-		{
-			type: 'confirm',
-			default: 'y',
-			name: 'shouldProceed',
-			message,
-			choices: ['y', 'n']
-		}
-	]
-	const {shouldProceed} = await inquirer.prompt(questions)
-	if (!shouldProceed) {
-		exit('Release cancelled.')
-	}
+  console.log(chalk.blue(['', commits, ''].join('\n')))
+  const message =
+    action === 'create'
+      ? 'Do you want to create a release with these commits?'
+      : 'Do you want to merge and push these commits into main?'
+  const questions: inquirer.QuestionCollection<{ shouldProceed: boolean }> = [
+    {
+      type: 'confirm',
+      default: 'y',
+      name: 'shouldProceed',
+      message,
+      choices: ['y', 'n'],
+    },
+  ]
+  const { shouldProceed } = await inquirer.prompt(questions)
+  if (!shouldProceed) {
+    exit('Release cancelled.')
+  }
 }
 
 const releaseType = ['Regular', 'Hotfix'] as const
@@ -79,191 +79,191 @@ type TReleaseType = (typeof releaseType)[number]
 type TWebReleaseType = Extract<semver.ReleaseType, 'minor' | 'patch'>
 
 const getNextReleaseVersion = async (versionBump: TWebReleaseType): Promise<string> => {
-	const latestTag = await getLatestSemverTag()
-	const currentVersion = latestTag.replace(/^v/, '')
-	const nextVersion = semver.inc(currentVersion, versionBump)
-	if (!nextVersion) {
-		exit(chalk.red(`Could not bump version from ${latestTag}`))
-	}
-	return `v${nextVersion}`
+  const latestTag = await getLatestSemverTag()
+  const currentVersion = latestTag.replace(/^v/, '')
+  const nextVersion = semver.inc(currentVersion, versionBump)
+  if (!nextVersion) {
+    exit(chalk.red(`Could not bump version from ${latestTag}`))
+  }
+  return `v${nextVersion}`
 }
 
 const inquireCleanBranchOffMain = async (): Promise<boolean> => {
-	const questions: inquirer.QuestionCollection<{isCleanlyBranched: boolean}> = [
-		{
-			type: 'confirm',
-			name: 'isCleanlyBranched',
-			message: 'Is your branch cleanly branched off origin/main?',
-			default: false // Defaulting to false to encourage verification
-		}
-	]
-	const {isCleanlyBranched} = await inquirer.prompt(questions)
-	return isCleanlyBranched
+  const questions: inquirer.QuestionCollection<{ isCleanlyBranched: boolean }> = [
+    {
+      type: 'confirm',
+      name: 'isCleanlyBranched',
+      message: 'Is your branch cleanly branched off origin/main?',
+      default: false, // Defaulting to false to encourage verification
+    },
+  ]
+  const { isCleanlyBranched } = await inquirer.prompt(questions)
+  return isCleanlyBranched
 }
 
 const inquireTReleaseType = async (): Promise<TReleaseType> => {
-	const questions: inquirer.QuestionCollection<{releaseType: TReleaseType}> = [
-		{
-			type: 'list',
-			name: 'releaseType',
-			message: 'What type of release is this?',
-			choices: releaseType
-		}
-	]
-	return (await inquirer.prompt(questions)).releaseType
+  const questions: inquirer.QuestionCollection<{ releaseType: TReleaseType }> = [
+    {
+      type: 'list',
+      name: 'releaseType',
+      message: 'What type of release is this?',
+      choices: releaseType,
+    },
+  ]
+  return (await inquirer.prompt(questions)).releaseType
 }
 
 const createRelease = async (): Promise<void> => {
-	const releaseType = await inquireTReleaseType()
-
-	if (releaseType === 'Regular') {
-		// Regular release: develop -> release -> main
-		const {messages, total} = await getCommits('origin/release', 'origin/develop')
-
-		if (!total) {
-			exit(chalk.yellow('No new commits to release from develop.'))
-		}
-
-		await inquireProceedWithCommits(messages, 'create')
-
-		console.log(chalk.green('Checking out develop...'))
-		await git().checkout(['develop'])
-		console.log(chalk.green('Pulling develop...'))
-		await git().pull('origin', 'develop')
-		console.log(chalk.green('Resetting release to develop...'))
-		await git().checkout(['-B', 'release'])
-		console.log(chalk.green('Force pushing release branch...'))
-		await git().push(['--force', 'origin', 'release'])
-
-		// Create PR with version
-		const nextVersion = await getNextReleaseVersion('minor')
-		const title = `chore: release ${nextVersion}`
-		const body = messages.map(m => m.replace(/"/g, '\\"')).join('\\n')
-		const command = `gh pr create --draft --base "main" --title "${title}" --body "${body}"`
-		console.log(chalk.green('Creating draft PR...'))
-		await pify(exec)(command)
-
-		exit(chalk.green(`Release ${nextVersion} created successfully. PR has been opened.`))
-	} else {
-		// Hotfix release: current branch -> release -> main
-		const currentBranch = await git().revparse(['--abbrev-ref', 'HEAD'])
-
-		if (currentBranch === 'main') {
-			console.log(
-				chalk.red(
-					'Cannot open hotfix PRs directly off local main branch for security reasons. Please branch out to another branch first.'
-				)
-			)
-			exit()
-		}
-
-		// Only continue if the branch is cleanly branched off origin/main since we will
-		// target it in the hotfix PR
-		const isCleanOffMain = await inquireCleanBranchOffMain()
-		if (!isCleanOffMain) {
-			exit(chalk.yellow('Please ensure your branch is cleanly branched off origin/main before proceeding.'))
-		}
-
-		// Dev has confirmed they're clean off main, here goes nothing
-		console.log(chalk.green('Fetching latest changes...'))
-		await git().fetch(['origin', '--tags', '--force'])
-
-		console.log(chalk.green(`Force pushing ${currentBranch} branch...`))
-		await git().push(['-u', 'origin', currentBranch, '--force'])
-
-		const {messages, total} = await getCommits('origin/main', `origin/${currentBranch}`)
-
-		if (!total) {
-			exit(chalk.yellow('No commits to release.'))
-		}
-
-		await inquireProceedWithCommits(messages, 'create')
-
-		// Merge origin/main as a paranoia check
-		console.log(chalk.green('Merging origin/main...'))
-		await git().merge(['origin/main'])
-
-		console.log(chalk.green('Setting release to current branch...'))
-		await git().checkout(['-B', 'release'])
-		console.log(chalk.green('Force pushing release branch...'))
-		await git().push(['--force', 'origin', 'release'])
-
-		// Create hotfix PR with version
-		const nextVersion = await getNextReleaseVersion('patch')
-		const title = `chore: hotfix release ${nextVersion}`
-		const body = messages.map(m => m.replace(/"/g, '\\"')).join('\\n')
-		const command = `gh pr create --draft --base "main" --title "${title}" --body "${body}"`
-		console.log(chalk.green('Creating draft hotfix PR...'))
-		await pify(exec)(command)
-
-		exit(chalk.green(`Hotfix release ${nextVersion} created successfully. PR has been opened.`))
-	}
+  const releaseType = await inquireTReleaseType()
+
+  if (releaseType === 'Regular') {
+    // Regular release: develop -> release -> main
+    const { messages, total } = await getCommits('origin/release', 'origin/develop')
+
+    if (!total) {
+      exit(chalk.yellow('No new commits to release from develop.'))
+    }
+
+    await inquireProceedWithCommits(messages, 'create')
+
+    console.log(chalk.green('Checking out develop...'))
+    await git().checkout(['develop'])
+    console.log(chalk.green('Pulling develop...'))
+    await git().pull('origin', 'develop')
+    console.log(chalk.green('Resetting release to develop...'))
+    await git().checkout(['-B', 'release'])
+    console.log(chalk.green('Force pushing release branch...'))
+    await git().push(['--force', 'origin', 'release'])
+
+    // Create PR with version
+    const nextVersion = await getNextReleaseVersion('minor')
+    const title = `chore: release ${nextVersion}`
+    const body = messages.map((m) => m.replace(/"/g, '\\"')).join('\\n')
+    const command = `gh pr create --draft --base "main" --title "${title}" --body "${body}"`
+    console.log(chalk.green('Creating draft PR...'))
+    await pify(exec)(command)
+
+    exit(chalk.green(`Release ${nextVersion} created successfully. PR has been opened.`))
+  } else {
+    // Hotfix release: current branch -> release -> main
+    const currentBranch = await git().revparse(['--abbrev-ref', 'HEAD'])
+
+    if (currentBranch === 'main') {
+      console.log(
+        chalk.red(
+          'Cannot open hotfix PRs directly off local main branch for security reasons. Please branch out to another branch first.'
+        )
+      )
+      exit()
+    }
+
+    // Only continue if the branch is cleanly branched off origin/main since we will
+    // target it in the hotfix PR
+    const isCleanOffMain = await inquireCleanBranchOffMain()
+    if (!isCleanOffMain) {
+      exit(chalk.yellow('Please ensure your branch is cleanly branched off origin/main before proceeding.'))
+    }
+
+    // Dev has confirmed they're clean off main, here goes nothing
+    console.log(chalk.green('Fetching latest changes...'))
+    await git().fetch(['origin', '--tags', '--force'])
+
+    console.log(chalk.green(`Force pushing ${currentBranch} branch...`))
+    await git().push(['-u', 'origin', currentBranch, '--force'])
+
+    const { messages, total } = await getCommits('origin/main', `origin/${currentBranch}`)
+
+    if (!total) {
+      exit(chalk.yellow('No commits to release.'))
+    }
+
+    await inquireProceedWithCommits(messages, 'create')
+
+    // Merge origin/main as a paranoia check
+    console.log(chalk.green('Merging origin/main...'))
+    await git().merge(['origin/main'])
+
+    console.log(chalk.green('Setting release to current branch...'))
+    await git().checkout(['-B', 'release'])
+    console.log(chalk.green('Force pushing release branch...'))
+    await git().push(['--force', 'origin', 'release'])
+
+    // Create hotfix PR with version
+    const nextVersion = await getNextReleaseVersion('patch')
+    const title = `chore: hotfix release ${nextVersion}`
+    const body = messages.map((m) => m.replace(/"/g, '\\"')).join('\\n')
+    const command = `gh pr create --draft --base "main" --title "${title}" --body "${body}"`
+    console.log(chalk.green('Creating draft hotfix PR...'))
+    await pify(exec)(command)
+
+    exit(chalk.green(`Hotfix release ${nextVersion} created successfully. PR has been opened.`))
+  }
 }
 
 const mergeRelease = async (): Promise<void> => {
-	const {messages, total} = await getCommits('origin/main', 'origin/release')
-
-	if (!total) {
-		exit(chalk.yellow('No commits to merge.'))
-	}
-
-	await inquireProceedWithCommits(messages, 'merge')
-
-	console.log(chalk.green('Checking out release...'))
-	await git().checkout(['release'])
-	console.log(chalk.green('Pulling release...'))
-	await git().pull('origin', 'release')
-	console.log(chalk.green('Checking out main...'))
-	await git().checkout(['main'])
-	console.log(chalk.green('Pulling main...'))
-	await git().pull('origin', 'main')
-	console.log(chalk.green('Merging release into main...'))
-	await git().merge(['release'])
-
-	// Determine version bump type (patch for hotfix, minor for regular)
-	// We can detect this by checking if release branch differs from develop
-	const {total: developDiff} = await getCommits('origin/develop', 'origin/release')
-	const versionBump: TWebReleaseType = developDiff > 0 ? 'patch' : 'minor'
-
-	// Tag the release
-	const nextVersion = await getNextReleaseVersion(versionBump)
-	console.log(chalk.green(`Tagging main with version ${nextVersion}`))
-	await git().tag(['-a', nextVersion, '-m', nextVersion])
-
-	console.log(chalk.green('Pushing main with tags...'))
-	await git().push(['origin', 'main', '--tags'])
-
-	// Merge back to develop to keep in sync
-	console.log(chalk.green('Checking out develop...'))
-	await git().checkout(['develop'])
-	console.log(chalk.green('Pulling develop...'))
-	await git().pull('origin', 'develop')
-	console.log(chalk.green('Merging main back into develop...'))
-	await git().merge(['main'])
-	console.log(chalk.green('Pushing develop...'))
-	await git().push(['origin', 'develop'])
-
-	exit(chalk.green(`Release ${nextVersion} completed successfully!`))
+  const { messages, total } = await getCommits('origin/main', 'origin/release')
+
+  if (!total) {
+    exit(chalk.yellow('No commits to merge.'))
+  }
+
+  await inquireProceedWithCommits(messages, 'merge')
+
+  console.log(chalk.green('Checking out release...'))
+  await git().checkout(['release'])
+  console.log(chalk.green('Pulling release...'))
+  await git().pull('origin', 'release')
+  console.log(chalk.green('Checking out main...'))
+  await git().checkout(['main'])
+  console.log(chalk.green('Pulling main...'))
+  await git().pull('origin', 'main')
+  console.log(chalk.green('Merging release into main...'))
+  await git().merge(['release'])
+
+  // Determine version bump type (patch for hotfix, minor for regular)
+  // We can detect this by checking if release branch differs from develop
+  const { total: developDiff } = await getCommits('origin/develop', 'origin/release')
+  const versionBump: TWebReleaseType = developDiff > 0 ? 'patch' : 'minor'
+
+  // Tag the release
+  const nextVersion = await getNextReleaseVersion(versionBump)
+  console.log(chalk.green(`Tagging main with version ${nextVersion}`))
+  await git().tag(['-a', nextVersion, '-m', nextVersion])
+
+  console.log(chalk.green('Pushing main with tags...'))
+  await git().push(['origin', 'main', '--tags'])
+
+  // Merge back to develop to keep in sync
+  console.log(chalk.green('Checking out develop...'))
+  await git().checkout(['develop'])
+  console.log(chalk.green('Pulling develop...'))
+  await git().pull('origin', 'develop')
+  console.log(chalk.green('Merging main back into develop...'))
+  await git().merge(['main'])
+  console.log(chalk.green('Pushing develop...'))
+  await git().push(['origin', 'develop'])
+
+  exit(chalk.green(`Release ${nextVersion} completed successfully!`))
 }
 
 const isReleaseInProgress = async (): Promise<boolean> => {
-	const {total} = await getCommits('origin/main', 'origin/release')
-	return Boolean(total)
+  const { total } = await getCommits('origin/main', 'origin/release')
+  return Boolean(total)
 }
 
 const main = async (): Promise<void> => {
-	await assertIsCleanRepo()
-	await assertGhInstalled()
-	await assertGhAuth()
-
-	console.log(chalk.green('Fetching latest changes...'))
-	await git().fetch(['origin', '--tags', '--force'])
-
-	if (await isReleaseInProgress()) {
-		await mergeRelease()
-	} else {
-		await createRelease()
-	}
+  await assertIsCleanRepo()
+  await assertGhInstalled()
+  await assertGhAuth()
+
+  console.log(chalk.green('Fetching latest changes...'))
+  await git().fetch(['origin', '--tags', '--force'])
+
+  if (await isReleaseInProgress()) {
+    await mergeRelease()
+  } else {
+    await createRelease()
+  }
 }
 
 main()
diff --git a/scripts/utils.ts b/scripts/utils.ts
index 5c5fa19..985d11b 100644
--- a/scripts/utils.ts
+++ b/scripts/utils.ts
@@ -1,22 +1,22 @@
 import chalk from 'chalk'
 import * as semver from 'semver'
-import {simpleGit as git} from 'simple-git'
+import { simpleGit as git } from 'simple-git'
 
 export const exit = (reason?: string): boolean => Boolean(reason && console.log(reason)) || process.exit(0)
 
 export const getLatestSemverTag = async (): Promise<string> => {
-	try {
-		const tags = await git().tag(['-l', '--sort=-version:refname'])
-		const semverTags = tags.split('\n').filter(tag => semver.valid(tag.replace(/^v/, '')))
+  try {
+    const tags = await git().tag(['-l', '--sort=-version:refname'])
+    const semverTags = tags.split('\n').filter((tag) => semver.valid(tag.replace(/^v/, '')))
 
-		if (semverTags.length === 0) {
-			console.log(chalk.yellow('No semver tags found. Starting from v1.0.0'))
-			return 'v1.0.0'
-		}
+    if (semverTags.length === 0) {
+      console.log(chalk.yellow('No semver tags found. Starting from v1.0.0'))
+      return 'v1.0.0'
+    }
 
-		return semverTags[0]
-	} catch {
-		console.log(chalk.yellow('Could not get latest semver tag. Starting from v1.0.0'))
-		return 'v1.0.0'
-	}
+    return semverTags[0]
+  } catch {
+    console.log(chalk.yellow('Could not get latest semver tag. Starting from v1.0.0'))
+    return 'v1.0.0'
+  }
 }

From e9eab2f8cbe6b83f639114cedf595157460af37d Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Mon, 23 Feb 2026 11:28:49 -0700
Subject: [PATCH 3/5] chore: add strapi hostname to csp rules

---
 middleware.ts  | 4 +++-
 next.config.ts | 3 +--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/middleware.ts b/middleware.ts
index 18cd194..9ac22d7 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -9,6 +9,8 @@ import {
 
 import type { NextRequest } from 'next/server'
 
+const strapiHostname = process.env.NEXT_PUBLIC_STRAPI_URL ? new URL(process.env.NEXT_PUBLIC_STRAPI_URL).hostname : null
+
 /**
  * Extract language from subdomain if present
  */
@@ -162,7 +164,7 @@ export function middleware(request: NextRequest): NextResponse {
   response.headers.set('Cross-Origin-Opener-Policy', 'same-origin')
 
   // Set the CSP header with the nonce
-  const cspHeader = `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://cdn.weglot.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.weglot.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; media-src 'self' https:; connect-src 'self' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://strapi.shapeshift.com https://cdn.weglot.com https://api.weglot.com https://cdn-api-weglot.com wss://app.chatwoot.com  https://api.thorchain.shapeshift.com; frame-src 'self' https://widget.chatwoot.com https://app.chatwoot.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self' https://app.chatwoot.com; frame-ancestors 'self'; upgrade-insecure-requests;`
+  const cspHeader = `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com https://cdn.weglot.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.weglot.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; media-src 'self' https:; connect-src 'self' https://api.hypelab.com https://app.chatwoot.com https://widget.chatwoot.com ${strapiHostname} https://cdn.weglot.com https://api.weglot.com https://cdn-api-weglot.com wss://app.chatwoot.com  https://api.thorchain.shapeshift.com; frame-src 'self' https://widget.chatwoot.com https://app.chatwoot.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'; form-action 'self' https://app.chatwoot.com; frame-ancestors 'self'; upgrade-insecure-requests;`
   response.headers.set('Content-Security-Policy', cspHeader)
 
   // Handle locale routing
diff --git a/next.config.ts b/next.config.ts
index 47fc358..384b3b4 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -8,9 +8,8 @@ const nextConfig = {
 	reactStrictMode: true,
 	images: {
 		remotePatterns: [
-			{protocol: 'https', hostname: 'strapi.shapeshift.com'},
-			{protocol: 'https', hostname: 'website-backend-assets.shapeshift.com'},
 			...(strapiHostname ? [{protocol: 'https', hostname: strapiHostname}] : []),
+			{protocol: 'https', hostname: 'website-backend-assets.shapeshift.com'},
 			{protocol: 'http', hostname: '172.233.242.224'}
 		]
 	},

From 094ed0bafb0399b5511cc441f976e9339b8b9906 Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Tue, 24 Feb 2026 11:27:51 -0700
Subject: [PATCH 4/5] remove vercel from readme

---
 README.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/README.md b/README.md
index 9da4bae..e0f83cc 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,3 @@ bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-## Deploy on Vercel
-
-The website will redeploy on Vercel on merges to `main`.

From d9efc5e4da68320c8e9fac44eab358f81a49e034 Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Tue, 24 Feb 2026 14:19:31 -0700
Subject: [PATCH 5/5] cleanup blog types

---
 .../categories/[category]/ListOfPosts.tsx                 | 8 +-------
 app/[lang]/_utils/constants.tsx                           | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
index 2928dcd..a363d0d 100644
--- a/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
+++ b/app/[lang]/(resources)/blog/(withNavigation)/categories/[category]/ListOfPosts.tsx
@@ -27,13 +27,7 @@ export function ListOfPosts({ category }: { category: string }): ReactElement {
   // Convert URL slug to proper category type for the API
   const categoryType = blogTypesSlugToCategory(category)
 
-  // Format category name for display (capitalize first letter)
-  const formattedCategory = category.charAt(0).toUpperCase() + category.slice(1)
-
   return (
-    <PostList
-      category={categoryType}
-      emptyMessage={`We couldn't find any posts in the ${formattedCategory} category.`}
-    />
+    <PostList category={categoryType} emptyMessage={`We couldn't find any posts in the ${categoryType} category.`} />
   )
 }
diff --git a/app/[lang]/_utils/constants.tsx b/app/[lang]/_utils/constants.tsx
index 816415b..3bbc2a9 100644
--- a/app/[lang]/_utils/constants.tsx
+++ b/app/[lang]/_utils/constants.tsx
@@ -500,7 +500,7 @@ export const blogTypes = [
     slug: 'bitcoin',
   },
   {
-    title: 'Crypto pro',
+    title: 'Crypto Pro',
     slug: 'crypto-pro',
   },
   {