diff --git a/app/layout.tsx b/app/layout.tsx
index e817f18..7c6de7b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,7 +3,6 @@ import '@/styles/globals.css'
 import '@/styles/loading-ui.css'
 import Script from 'next/script'
 import { title, description, font, liveUrl, isProduction } from '@/constants'
-import { headers } from 'next/headers'
 
 export const metadata: Metadata = {
   title,
@@ -17,11 +16,8 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const headersList = headers()
-  const locale = headersList.get('x-locale')
-
   return (
-    <html lang="en" data-locale={locale}>
+    <html lang="en">
       <head>
         {isProduction ? (
           <Script
diff --git a/app/page.tsx b/app/page.tsx
index 79f0236..33740a9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
-import styles from './page.module.css'
+import { Content, Footer, Header } from '@/components'
 import { Swap, Buy } from '@/features/strategies'
 import { MarketData } from '@/features/prices'
-import { Content, Footer, Header } from '@/components'
+import styles from './page.module.css'
 
 export default function Home() {
   return (
diff --git a/features/prices/components/MarketData/MarketData.tsx b/features/prices/components/MarketData/MarketData.tsx
index c90414e..3e2b687 100644
--- a/features/prices/components/MarketData/MarketData.tsx
+++ b/features/prices/components/MarketData/MarketData.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
-import styles from './MarketData.module.css'
-import { usePrices } from '@/features/prices'
+import { usePrices, Price } from '@/features/prices'
 import { Badge } from '@/components'
-import { Price } from '../Price'
+import styles from './MarketData.module.css'
 
 export function MarketData() {
   const { prices } = usePrices()
@@ -13,14 +12,14 @@ export function MarketData() {
     <ul className={styles.marketData}>
       <li>
         <p>1 ASI</p>
-        <Price price={prices.asi.usd} priceChange={prices.asi.usd_24h_change} />
+        <Price price={prices.asi} />
       </li>
       <li>
         <p>
           1 Fet = {ratioFetToAsi} ASI
           <Badge>fixed</Badge>
         </p>
-        <Price price={prices.fet.usd} priceChange={prices.fet.usd_24h_change} />
+        <Price price={prices.fet} />
       </li>
       <li>
         <p>
@@ -29,10 +28,7 @@ export function MarketData() {
           ASI
           <Badge>fixed</Badge>
         </p>
-        <Price
-          price={prices.ocean.usd}
-          priceChange={prices.ocean.usd_24h_change}
-        />
+        <Price price={prices.ocean} />
       </li>
       <li>
         <p>
@@ -41,10 +37,7 @@ export function MarketData() {
           ASI
           <Badge>fixed</Badge>
         </p>
-        <Price
-          price={prices.agix.usd}
-          priceChange={prices.agix.usd_24h_change}
-        />
+        <Price price={prices.agix} />
       </li>
     </ul>
   )
diff --git a/features/prices/components/Price/Price.tsx b/features/prices/components/Price/Price.tsx
index 96a3a53..ee79230 100644
--- a/features/prices/components/Price/Price.tsx
+++ b/features/prices/components/Price/Price.tsx
@@ -1,14 +1,8 @@
-import styles from './Price.module.css'
-import { usePrices } from '@/features/prices'
+import { usePrices, type PriceCoingecko } from '@/features/prices'
 import { PriceChange } from './PriceChange'
+import styles from './Price.module.css'
 
-export function Price({
-  price,
-  priceChange
-}: {
-  price: number
-  priceChange?: number
-}) {
+export function Price({ price }: { price: PriceCoingecko }) {
   const { isValidating, isLoading } = usePrices()
 
   const feedbackClasses = isLoading
@@ -19,8 +13,10 @@ export function Price({
 
   return (
     <p className={styles.price}>
-      <span className={`${styles.fiat} ${feedbackClasses}`}>${price} </span>
-      {priceChange ? <PriceChange priceChange={priceChange} /> : null}
+      <span className={`${styles.fiat} ${feedbackClasses}`}>${price.usd} </span>
+      {price?.usd_24h_change ? (
+        <PriceChange priceChange={price.usd_24h_change} />
+      ) : null}
     </p>
   )
 }
diff --git a/features/prices/components/Price/PriceChange.module.css b/features/prices/components/Price/PriceChange.module.css
index b006cd2..d3b822a 100644
--- a/features/prices/components/Price/PriceChange.module.css
+++ b/features/prices/components/Price/PriceChange.module.css
@@ -6,13 +6,13 @@
 }
 
 /* culture-sensitive color psychology */
-[data-locale|='zh'] .change,
-[data-locale|='ja'] .change {
+.change[data-locale|='zh'],
+.change[data-locale|='ja'] {
   --color-positive: #ff4136;
   --color-negative: #2ecc40;
 }
 
-[data-locale|='ko'] .change {
+.change[data-locale|='ko'] {
   --color-positive: #0074d9;
   --color-negative: #2ecc40;
 }
diff --git a/features/prices/components/Price/PriceChange.tsx b/features/prices/components/Price/PriceChange.tsx
index 15947a4..65a4313 100644
--- a/features/prices/components/Price/PriceChange.tsx
+++ b/features/prices/components/Price/PriceChange.tsx
@@ -1,11 +1,26 @@
+'use client'
+
 import { TriangleUpIcon, TriangleDownIcon } from '@radix-ui/react-icons'
 import styles from './PriceChange.module.css'
+import { useEffect, useState } from 'react'
 
 export function PriceChange({ priceChange }: { priceChange: number }) {
+  const [locale, setLocale] = useState('en-US')
   const styleClasses = priceChange > 0 ? styles.positive : styles.negative
 
+  useEffect(() => {
+    const userLocale = navigator?.languages?.length
+      ? navigator.languages[0]
+      : navigator.language
+    setLocale(userLocale)
+  }, [])
+
   return (
-    <span className={`${styles.change} ${styleClasses}`} title="24h change">
+    <span
+      className={`${styles.change} ${styleClasses}`}
+      title="24h change"
+      data-locale={locale}
+    >
       {priceChange > 0 ? <TriangleUpIcon /> : <TriangleDownIcon />}
       {Math.abs(priceChange).toFixed(1)}%
     </span>
diff --git a/features/prices/components/index.ts b/features/prices/components/index.ts
new file mode 100644
index 0000000..ef05ab9
--- /dev/null
+++ b/features/prices/components/index.ts
@@ -0,0 +1,2 @@
+export * from './MarketData'
+export * from './Price'
diff --git a/features/prices/hooks/use-prices.tsx b/features/prices/hooks/use-prices.tsx
index 717a5a4..a9b1823 100644
--- a/features/prices/hooks/use-prices.tsx
+++ b/features/prices/hooks/use-prices.tsx
@@ -6,23 +6,16 @@ import useSWR from 'swr'
 
 const tokenAddresses = tokens.map((token) => token.address).toString()
 
+export type PriceCoingecko = {
+  usd: number
+  usd_24h_change: number
+}
+
 export type Prices = {
-  ocean: {
-    usd: number
-    usd_24h_change: number
-  }
-  fet: {
-    usd: number
-    usd_24h_change: number
-  }
-  agix: {
-    usd: number
-    usd_24h_change: number
-  }
-  asi: {
-    usd: number
-    usd_24h_change: number
-  }
+  ocean: PriceCoingecko
+  fet: PriceCoingecko
+  agix: PriceCoingecko
+  asi: PriceCoingecko
 }
 
 export function usePrices(): {
diff --git a/features/prices/index.tsx b/features/prices/index.tsx
index 0203c73..7aea380 100644
--- a/features/prices/index.tsx
+++ b/features/prices/index.tsx
@@ -1,2 +1,2 @@
-export * from './components/MarketData'
+export * from './components'
 export * from './hooks'
diff --git a/features/strategies/components/Swap/Swap.tsx b/features/strategies/components/Swap/Swap.tsx
index 0121a98..5ae6f46 100644
--- a/features/strategies/components/Swap/Swap.tsx
+++ b/features/strategies/components/Swap/Swap.tsx
@@ -4,9 +4,8 @@ import { useState } from 'react'
 import { useDebounce } from 'use-debounce'
 import { SwapResults } from './Results'
 import { TokenSymbol } from '@/types'
-import { FormAmount, FormMarket } from '@/features/strategies/components'
+import { type Market, FormAmount, FormMarket } from '@/features/strategies'
 import stylesShared from '@/features/strategies/styles/shared.module.css'
-import { type Market } from '@/features/strategies'
 
 export function Swap() {
   const [amount, setAmount] = useState(100)
diff --git a/middleware.ts b/middleware.ts
deleted file mode 100644
index 7eba1cb..0000000
--- a/middleware.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NextResponse, type NextRequest } from 'next/server'
-
-export function middleware(request: NextRequest) {
-  // add x-locale header to all responses
-  const locale =
-    request.headers.get('accept-language')?.split(',')?.[0] || 'en-US'
-  const response = NextResponse.next()
-  response.headers.set('x-locale', locale)
-
-  return response
-}
