diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..c40d0dd
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+.next
+build/
+node_modules/
+.github/
+.history/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..32114c3
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "useTabs": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/app/(routes)/page.tsx b/app/(routes)/page.tsx
index 989b2ee..15020c9 100644
--- a/app/(routes)/page.tsx
+++ b/app/(routes)/page.tsx
@@ -9,10 +9,10 @@ export default function Home() {
   const { connected } = useWallet();
 
   return (
-    <div className="h-screen flex flex-col justify-between overflow-y-auto">
+    <div className="flex h-screen flex-col justify-between overflow-y-auto">
       <Header totalPnL={connected ? 12847.32 : undefined} />
 
-      <main className="flex-1 flex items-center max-w-7xl mx-auto px-6 w-full py-8">
+      <main className="mx-auto flex w-full max-w-7xl flex-1 items-center px-6 py-8">
         <TradingTokens />
       </main>
 
diff --git a/app/components/About.tsx b/app/components/About.tsx
index a2710c3..0259341 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -22,9 +22,9 @@ export default function About({
 
   return (
     <section>
-      <h3 className="text-white/40 tracking-wider mb-3">About</h3>
+      <h3 className="mb-3 tracking-wider text-white/40">About</h3>
       {description && (
-        <p className="text-white/70 text-xs mb-3 leading-relaxed">
+        <p className="mb-3 text-xs leading-relaxed text-white/70">
           {description}
         </p>
       )}
@@ -35,7 +35,7 @@ export default function About({
             href={link}
             target="_blank"
             rel="noopener noreferrer"
-            className="px-2 py-1 bg-white/5 hover:bg-white/10 rounded-lg text-[10px] text-white/80 hover:text-white transition-colors border border-white/5 hover:border-white/10"
+            className="rounded-lg border border-white/5 bg-white/5 px-2 py-1 text-[10px] text-white/80 transition-colors hover:border-white/10 hover:bg-white/10 hover:text-white"
           >
             {label}
           </a>
diff --git a/app/components/BuyAmountDisplay.tsx b/app/components/BuyAmountDisplay.tsx
index a126e02..c1a8eb6 100644
--- a/app/components/BuyAmountDisplay.tsx
+++ b/app/components/BuyAmountDisplay.tsx
@@ -12,10 +12,10 @@ export default function BuyAmountDisplay({
   loading = false,
 }: BuyAmountDisplayProps) {
   return (
-    <div className="bg-black/20 rounded-lg p-4">
+    <div className="rounded-lg bg-black/20 p-4">
       <div className="flex items-center justify-between">
-        <span className="text-white/50 text-sm">{label}</span>
-        <span className="text-white font-semibold">
+        <span className="text-sm text-white/50">{label}</span>
+        <span className="font-semibold text-white">
           {loading ? "Loading..." : `${amount} ${token}`}
         </span>
       </div>
diff --git a/app/components/BuyPanel.tsx b/app/components/BuyPanel.tsx
index a1a923b..1fe343c 100644
--- a/app/components/BuyPanel.tsx
+++ b/app/components/BuyPanel.tsx
@@ -28,7 +28,7 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
 
   const { data: quote, isLoading: isLoadingQuote } = useBuyQuote(
     tokenAddress,
-    tokenInputAmount
+    tokenInputAmount,
   );
 
   const {
@@ -45,8 +45,8 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
   } = useBuyToken(quote);
 
   return (
-    <div className="bg-glass rounded-xl p-4 border border-white/5">
-      <h2 className="text-white font-bold text-lg mb-4">Buy</h2>
+    <div className="bg-glass rounded-xl border border-white/5 p-4">
+      <h2 className="mb-4 text-lg font-bold text-white">Buy</h2>
 
       <div className="space-y-4">
         <BuyAmountDisplay
@@ -55,7 +55,7 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
           token="SOL"
         />
 
-        <ArrowDown className="w-4 h-4 text-white/40 mx-auto" />
+        <ArrowDown className="mx-auto h-4 w-4 text-white/40" />
 
         <BuyAmountDisplay
           label="You receive"
@@ -74,16 +74,16 @@ export default function BuyPanel({ tokenAddress, outputToken }: BuyPanelProps) {
         <button
           onClick={() => buyToken()}
           disabled={isBuyingToken || !connected}
-          className="disabled:cursor-not-allowed cursor-pointer w-full px-6 py-3 text-black bg-primary hover:bg-primary/90 disabled:bg-white/10 disabled:text-white/40 rounded-lg font-semibold transition-all shadow-lg shadow-primary/20 disabled:hover:scale-100 disabled:shadow-none"
+          className="bg-primary hover:bg-primary/90 shadow-primary/20 w-full cursor-pointer rounded-lg px-6 py-3 font-semibold text-black shadow-lg transition-all disabled:cursor-not-allowed disabled:bg-white/10 disabled:text-white/40 disabled:shadow-none disabled:hover:scale-100"
         >
           {isBuyingToken
             ? "Processing..."
             : !connected
-            ? "Connect Wallet"
-            : "Buy"}
+              ? "Connect Wallet"
+              : "Buy"}
         </button>
 
-        <p className="text-white/40 text-2xs text-center">Powered by Jupiter</p>
+        <p className="text-2xs text-center text-white/40">Powered by Jupiter</p>
       </div>
     </div>
   );
diff --git a/app/components/BuyStatusMessage.tsx b/app/components/BuyStatusMessage.tsx
index b285377..49ceb0b 100644
--- a/app/components/BuyStatusMessage.tsx
+++ b/app/components/BuyStatusMessage.tsx
@@ -13,9 +13,8 @@ export default function BuyStatusMessage({
       : "bg-red-500/10 border-red-500/20 text-red-400";
 
   return (
-    <div className={`${styles} border rounded-lg p-3`}>
+    <div className={`${styles} rounded-lg border p-3`}>
       <p className="text-xs">{message}</p>
     </div>
   );
 }
-
diff --git a/app/components/Chart.tsx b/app/components/Chart.tsx
index e3059c0..df10527 100644
--- a/app/components/Chart.tsx
+++ b/app/components/Chart.tsx
@@ -17,5 +17,5 @@ export default function Chart({ data, timeRange }: ChartProps) {
 
   useBaselineSeries(chartRef, data, timeRange);
 
-  return <div ref={containerRef} className="w-full h-full" />;
+  return <div ref={containerRef} className="h-full w-full" />;
 }
diff --git a/app/components/ChartScale.tsx b/app/components/ChartScale.tsx
index d2dfa1c..84cb6f5 100644
--- a/app/components/ChartScale.tsx
+++ b/app/components/ChartScale.tsx
@@ -22,10 +22,10 @@ export default function ChartScale({
         <button
           key={label}
           onClick={() => setTimeRange(value)}
-          className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+          className={`rounded-md px-3 py-1.5 text-xs font-medium transition-all ${
             timeRange === value
-              ? "bg-primary/10 text-primary border border-primary/30"
-              : "text-white/60 hover:text-white hover:bg-white/5 border border-white/5"
+              ? "bg-primary/10 text-primary border-primary/30 border"
+              : "border border-white/5 text-white/60 hover:bg-white/5 hover:text-white"
           }`}
         >
           {label}
diff --git a/app/components/FloatingStars.tsx b/app/components/FloatingStars.tsx
index 9961cc7..beecc51 100644
--- a/app/components/FloatingStars.tsx
+++ b/app/components/FloatingStars.tsx
@@ -40,11 +40,11 @@ export default function FloatingStars() {
   }, []);
 
   return (
-    <div className="fixed inset-0 pointer-events-none z-0">
+    <div className="pointer-events-none fixed inset-0 z-0">
       {stars.map((star) => (
         <div
           key={star.id}
-          className="absolute rounded-full bg-white star-drift"
+          className="star-drift absolute rounded-full bg-white"
           style={{
             left: `${star.x}%`,
             top: `${star.y}%`,
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 235cb88..c4c3ba7 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -11,15 +11,17 @@ export const FOOTER_LINKS = [
 
 export default function Footer() {
   return (
-    <footer className="px-6 py-4 flex items-center justify-between text-white/40">
-      <p className="text-2xs">© 2025 @localtechboy. Solana trading platform.</p>
+    <footer className="flex items-center justify-between px-6 py-4 text-white/40">
+      <p className="text-2xs">
+        © 2025 @localtechboy. Solana trading platform.
+      </p>
       <nav className="flex gap-6 text-xs">
         {FOOTER_LINKS.map((link) => (
           <a
             key={link.label}
             href={link.href}
             target="_blank"
-            className="hover:text-white transition-colors"
+            className="transition-colors hover:text-white"
           >
             {link.label}
           </a>
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 792bc46..8a8f89d 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -23,15 +23,15 @@ export default function Header({ totalPnL, children: widget }: HeaderProps) {
 
   return (
     <header
-      className={`px-4 lg:px-6 py-4 gap-6 flex items-center justify-between min-h-[68px] ${
+      className={`flex min-h-[68px] items-center justify-between gap-6 px-4 py-4 lg:px-6 ${
         widget ? "justify-between" : "justify-end"
       }`}
     >
       {widget}
       <div className="flex items-center gap-4">
         {totalPnL && (
-          <nav className="items-center gap-2 hidden md:flex">
-            <span className="text-white/60 text-xs">Total P&L</span>
+          <nav className="hidden items-center gap-2 md:flex">
+            <span className="text-xs text-white/60">Total P&L</span>
             <span
               className={`text-sm ${
                 isPnLPositive ? "text-green-400" : "text-sell"
diff --git a/app/components/PreviewInfoTile.tsx b/app/components/PreviewInfoTile.tsx
index 410ef78..1fa02ab 100644
--- a/app/components/PreviewInfoTile.tsx
+++ b/app/components/PreviewInfoTile.tsx
@@ -19,8 +19,8 @@ export default function PreviewInfoTile({
   }, [direction]);
 
   return (
-    <div className="w-full bg-gradient-to-br from-black/30 to-black/10 border border-white/5 rounded-lg px-2 pb-2">
-      <span className="text-white/30 text-2xs uppercase tracking-wider mb-0.5">
+    <div className="w-full rounded-lg border border-white/5 bg-gradient-to-br from-black/30 to-black/10 px-2 pb-2">
+      <span className="text-2xs mb-0.5 tracking-wider text-white/30 uppercase">
         {label}
       </span>
       <span
@@ -28,9 +28,9 @@ export default function PreviewInfoTile({
       >
         {value}
         {direction === "up" ? (
-          <ArrowUp className="w-2.5 h-2.5" />
+          <ArrowUp className="h-2.5 w-2.5" />
         ) : direction === "down" ? (
-          <ArrowDown className="w-2.5 h-2.5" />
+          <ArrowDown className="h-2.5 w-2.5" />
         ) : null}
       </span>
     </div>
diff --git a/app/components/PricePreview.tsx b/app/components/PricePreview.tsx
index 7fb977f..a414402 100644
--- a/app/components/PricePreview.tsx
+++ b/app/components/PricePreview.tsx
@@ -9,20 +9,20 @@ interface PricePreviewProps {
 export default function PricePreview({ prices }: PricePreviewProps) {
   return (
     <section className="py-2">
-      <h3 className="text-white/40 tracking-wider mb-3 flex items-center gap-2">
-        <TrendingUp className="w-3.5 h-3.5" />
+      <h3 className="mb-3 flex items-center gap-2 tracking-wider text-white/40">
+        <TrendingUp className="h-3.5 w-3.5" />
         Price
       </h3>
       <div className="space-y-2">
         {prices.map(({ label, value }) => (
           <div
             key={label}
-            className="flex items-center justify-between p-2 rounded-lg bg-black/20"
+            className="flex items-center justify-between rounded-lg bg-black/20 p-2"
           >
-            <span className="text-white/50 text-xs">{label}</span>
+            <span className="text-xs text-white/50">{label}</span>
             <span
-              className={`font-semibold text-xs flex items-center gap-1 ${getColorIndicator(
-                value
+              className={`flex items-center gap-1 text-xs font-semibold ${getColorIndicator(
+                value,
               )}`}
             >
               {value >= 0 ? "↑" : "↓"}
diff --git a/app/components/TokenPreview.tsx b/app/components/TokenPreview.tsx
index 5480129..c1fdd36 100644
--- a/app/components/TokenPreview.tsx
+++ b/app/components/TokenPreview.tsx
@@ -42,22 +42,22 @@ export default function TokenPreview({ address }: TokenPreviewProps) {
   const formattedPriceChange1h = formatPercent(priceChange1hPercent);
 
   return (
-    <div className="flex flex-col gap-3 z-10">
+    <div className="z-10 flex flex-col gap-3">
       <Link
         href={`/trade/${address}`}
         title={name}
-        className="bg-glass rounded-xl p-5 md:p-6 border border-white/5 hover:border-white/10 transition-all hover:shadow-lg hover:shadow-black/20"
+        className="bg-glass rounded-xl border border-white/5 p-5 transition-all hover:border-white/10 hover:shadow-lg hover:shadow-black/20 md:p-6"
       >
-        <div className="flex items-start justify-between mb-6">
+        <div className="mb-6 flex items-start justify-between">
           <div className="flex items-center gap-4">
-            <div className="relative w-10 md:w-14 h-10 md:h-14 rounded-full overflow-hidden bg-white/5 ring-2 ring-white/10">
+            <div className="relative h-10 w-10 overflow-hidden rounded-full bg-white/5 ring-2 ring-white/10 md:h-14 md:w-14">
               <Image src={icon} alt={name} fill sizes="56px" />
             </div>
             <div>
-              <h3 className="md:text-lg font-semibold text-white truncate max-w-[150px]">
+              <h3 className="max-w-[150px] truncate font-semibold text-white md:text-lg">
                 {name}
               </h3>
-              <p className="text-white/50 text-sm">{ticker}</p>
+              <p className="text-sm text-white/50">{ticker}</p>
             </div>
           </div>
           <TokenPrice
diff --git a/app/components/TokenPrice.tsx b/app/components/TokenPrice.tsx
index ec86aa4..7fea3c7 100644
--- a/app/components/TokenPrice.tsx
+++ b/app/components/TokenPrice.tsx
@@ -16,7 +16,7 @@ export default function TokenPrice({
     <div className={size === "sm" ? "text-left" : "text-right"}>
       <p
         className={`font-bold text-white ${
-          size === "sm" ? "mt-0 text-sm" : "md:mt-1 text-xl"
+          size === "sm" ? "mt-0 text-sm" : "text-xl md:mt-1"
         }`}
       >
         {formatPrice(price)}
diff --git a/app/components/TokenStats.tsx b/app/components/TokenStats.tsx
index f1de4ca..acfcf0e 100644
--- a/app/components/TokenStats.tsx
+++ b/app/components/TokenStats.tsx
@@ -6,16 +6,16 @@ interface TokenStatsProps {
 }
 export default function TokenStats({ stats }: TokenStatsProps) {
   return (
-    <div className="w-full flex gap-8 items-center justify-center">
+    <div className="flex w-full items-center justify-center gap-8">
       {stats.map((stat) => (
         <div
           key={stat.label}
-          className="flex flex-row gap-2 items-center justify-center"
+          className="flex flex-row items-center justify-center gap-2"
         >
-          <span className="text-white/50 text-2xs uppercase tracking-wider">
+          <span className="text-2xs tracking-wider text-white/50 uppercase">
             {stat.label}
           </span>
-          <span className="text-white font-semibold text-xs">{stat.value}</span>
+          <span className="text-xs font-semibold text-white">{stat.value}</span>
         </div>
       ))}
     </div>
diff --git a/app/components/TradingTokenMetadata.tsx b/app/components/TradingTokenMetadata.tsx
index b61ea37..5747eed 100644
--- a/app/components/TradingTokenMetadata.tsx
+++ b/app/components/TradingTokenMetadata.tsx
@@ -33,11 +33,11 @@ export default function TradingTokenMetadata({
     <div className="flex items-center gap-16">
       <div className="flex items-center gap-4">
         <div className="flex items-center gap-3">
-          <div className="relative lg:w-9 lg:h-9 w-8 h-8 rounded-full overflow-hidden bg-white/5 ring-1 ring-white/10">
+          <div className="relative h-8 w-8 overflow-hidden rounded-full bg-white/5 ring-1 ring-white/10 lg:h-9 lg:w-9">
             <Image src={icon} alt={name} fill sizes="36px" />
           </div>
           <div>
-            <h1 className="text-sm lg:text-base font-bold text-white max-w-[50px] lg:max-w-[150px] truncate">
+            <h1 className="max-w-[50px] truncate text-sm font-bold text-white lg:max-w-[150px] lg:text-base">
               {name}
             </h1>
             <p className="text-xs text-white/50">{ticker}</p>
diff --git a/app/components/TradingTokens.tsx b/app/components/TradingTokens.tsx
index 1234ec0..c73e752 100644
--- a/app/components/TradingTokens.tsx
+++ b/app/components/TradingTokens.tsx
@@ -18,24 +18,24 @@ export const TOKEN_FILTERS: TokenFilter[] = [
 
 export default function TradingTokens() {
   const [selectedFilter, setSelectedFilter] = useState<TokenFilter>(
-    TOKEN_FILTERS[0]
+    TOKEN_FILTERS[0],
   );
 
   return (
     <div className="w-full space-y-6">
-      <nav className="flex gap-4 mb-3">
+      <nav className="mb-3 flex gap-4">
         {TOKEN_FILTERS.map((filter) => {
           const isSelected = selectedFilter.value === filter.value;
           return (
             <button
               key={filter.value}
-              className={`px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
+              className={`rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors ${
                 isSelected &&
                 !filter.disabled &&
                 "text-white/80 hover:text-white"
               } ${
                 filter.disabled
-                  ? "opacity-50 cursor-not-allowed"
+                  ? "cursor-not-allowed opacity-50"
                   : "cursor-pointer"
               }`}
               disabled={filter.disabled}
@@ -46,7 +46,7 @@ export default function TradingTokens() {
           );
         })}
       </nav>
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">
         {TOKENS.map((tokenAddress) => (
           <TokenPreview key={tokenAddress} address={tokenAddress} />
         ))}
diff --git a/app/components/TradingView.tsx b/app/components/TradingView.tsx
index 629d46c..b26b5ad 100644
--- a/app/components/TradingView.tsx
+++ b/app/components/TradingView.tsx
@@ -23,7 +23,7 @@ export default function TradingView({ address }: { address: string }) {
   const { data: tokenResponse, isLoading: tokenLoading } = useToken(address);
   const { data: chartResponse, isLoading: chartLoading } = useChartData(
     address,
-    timeRange
+    timeRange,
   );
 
   const { connected } = useWallet();
@@ -53,14 +53,14 @@ export default function TradingView({ address }: { address: string }) {
         <TradingTokenMetadata {...token} />
       </Header>
 
-      <main className="relative z-10 flex-1 flex flex-col lg:flex-row overflow-y-auto lg:overflow-hidden bg-gradient-to-b from-dark-200 to-dark-100">
-        <div className="flex-1 flex flex-col p-6">
+      <main className="from-dark-200 to-dark-100 relative z-10 flex flex-1 flex-col overflow-y-auto bg-gradient-to-b lg:flex-row lg:overflow-hidden">
+        <div className="flex flex-1 flex-col p-6">
           <ChartScale timeRange={timeRange} setTimeRange={setTimeRange} />
-          <div className="flex-1 min-h-[50vh]">
+          <div className="min-h-[50vh] flex-1">
             {chartLoading || !chartData ? (
-              <div className="h-full flex items-center justify-center flex-col">
+              <div className="flex h-full flex-col items-center justify-center">
                 <SpinLoader />
-                <p className="text-white/60 text-sm mt-3">Loading chart...</p>
+                <p className="mt-3 text-sm text-white/60">Loading chart...</p>
               </div>
             ) : (
               <Chart data={chartData} timeRange={timeRange} />
@@ -68,7 +68,7 @@ export default function TradingView({ address }: { address: string }) {
           </div>
         </div>
 
-        <aside className="w-full lg:w-92 flex flex-col p-4 space-y-4 lg:overflow-y-auto">
+        <aside className="flex w-full flex-col space-y-4 p-4 lg:w-92 lg:overflow-y-auto">
           <UserBalance
             balance={formattedBalance}
             tokenTicker={token.ticker}
diff --git a/app/components/UserBalance.tsx b/app/components/UserBalance.tsx
index d25b9df..866d32b 100644
--- a/app/components/UserBalance.tsx
+++ b/app/components/UserBalance.tsx
@@ -10,9 +10,9 @@ export default function UserBalance({
   loading,
 }: UserBalanceProps) {
   return (
-    <div className="flex flex-row items-center justify-between bg-black/20 rounded-lg p-4">
-      <span className="text-white/50 text-sm">Balance</span>
-      <p className="text-right text-white font-semibold text-sm">
+    <div className="flex flex-row items-center justify-between rounded-lg bg-black/20 p-4">
+      <span className="text-sm text-white/50">Balance</span>
+      <p className="text-right text-sm font-semibold text-white">
         {loading ? "Loading..." : `${balance} ${tokenTicker}`}
       </p>
     </div>
diff --git a/app/components/errors/TradingViewError.tsx b/app/components/errors/TradingViewError.tsx
index 36a5e46..df21704 100644
--- a/app/components/errors/TradingViewError.tsx
+++ b/app/components/errors/TradingViewError.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 export default function TradingViewError() {
   return (
-    <div className="h-screen flex items-center justify-center bg-gradient-to-b from-dark-200 to-dark-100 text-center">
+    <div className="from-dark-200 to-dark-100 flex h-screen items-center justify-center bg-gradient-to-b text-center">
       <p className="text-sell mb-2">Failed to load token data</p>
       <Link href="/" className="text-primary hover:text-primary/80 text-sm">
         ← Back to home
diff --git a/app/components/loaders/SpinLoader.tsx b/app/components/loaders/SpinLoader.tsx
index 384803b..55bef69 100644
--- a/app/components/loaders/SpinLoader.tsx
+++ b/app/components/loaders/SpinLoader.tsx
@@ -1,5 +1,5 @@
 export default function SpinLoader() {
   return (
-    <div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+    <div className="border-primary/20 border-t-primary h-10 w-10 animate-spin rounded-full border-4" />
   );
 }
diff --git a/app/components/loaders/TokenPreviewLoader.tsx b/app/components/loaders/TokenPreviewLoader.tsx
index a946396..98a362d 100644
--- a/app/components/loaders/TokenPreviewLoader.tsx
+++ b/app/components/loaders/TokenPreviewLoader.tsx
@@ -1,13 +1,13 @@
 function SkeletonBox({ className }: { className: string }) {
-  return <div className={`bg-white/5 rounded animate-pulse ${className}`} />;
+  return <div className={`animate-pulse rounded bg-white/5 ${className}`} />;
 }
 
 export default function TokenPreviewLoader() {
   return (
-    <div className="p-6 bg-glass rounded-xl border border-white/5 mb-6.5">
-      <div className="flex items-start justify-between mb-6">
+    <div className="bg-glass mb-6.5 rounded-xl border border-white/5 p-6">
+      <div className="mb-6 flex items-start justify-between">
         <div className="flex items-center gap-4">
-          <SkeletonBox className="w-14 h-14 rounded-full" />
+          <SkeletonBox className="h-14 w-14 rounded-full" />
           <div className="space-y-2">
             <SkeletonBox className="h-5 w-24" />
             <SkeletonBox className="h-4 w-16" />
@@ -15,7 +15,7 @@ export default function TokenPreviewLoader() {
         </div>
         <div className="space-y-2 text-right">
           <SkeletonBox className="h-6 w-24" />
-          <SkeletonBox className="h-4 w-16 ml-auto" />
+          <SkeletonBox className="ml-auto h-4 w-16" />
         </div>
       </div>
 
diff --git a/app/components/loaders/TradingViewLoader.tsx b/app/components/loaders/TradingViewLoader.tsx
index 877bbb9..ab63902 100644
--- a/app/components/loaders/TradingViewLoader.tsx
+++ b/app/components/loaders/TradingViewLoader.tsx
@@ -1,6 +1,6 @@
 export default function TradingViewLoader() {
   return (
-    <div className="h-screen flex items-center justify-center bg-gradient-to-b from-dark-200 to-dark-100">
+    <div className="from-dark-200 to-dark-100 flex h-screen items-center justify-center bg-gradient-to-b">
       <p className="text-white/60">Loading token data...</p>
     </div>
   );
diff --git a/app/hooks/useBaselineSeries.ts b/app/hooks/useBaselineSeries.ts
index 94598b0..8c4cc79 100644
--- a/app/hooks/useBaselineSeries.ts
+++ b/app/hooks/useBaselineSeries.ts
@@ -20,7 +20,7 @@ const DATA_SERIES_STYLE = {
 export function useBaselineSeries(
   chartRef: RefObject<IChartApi | null>,
   data: ChartData,
-  timeRange: TimeRange
+  timeRange: TimeRange,
 ) {
   const baselineSeriesConfig: Partial<BaselineStyleOptions> = useMemo(
     () => ({
@@ -28,7 +28,7 @@ export function useBaselineSeries(
       lineWidth: 2,
       baseValue: { type: "price", price: data[0].price },
     }),
-    [data]
+    [data],
   );
 
   useEffect(() => {
@@ -37,7 +37,7 @@ export function useBaselineSeries(
 
     const baselineSeries = chart.addSeries(
       BaselineSeries,
-      baselineSeriesConfig
+      baselineSeriesConfig,
     );
 
     const formattedData = mapDataForChart(data);
diff --git a/app/hooks/useBuyQuote.ts b/app/hooks/useBuyQuote.ts
index 677ef23..79e3da5 100644
--- a/app/hooks/useBuyQuote.ts
+++ b/app/hooks/useBuyQuote.ts
@@ -5,14 +5,14 @@ import { useQuery } from "@tanstack/react-query";
 const getBuyQuote = async (
   tokenAddress: string,
   amount: number,
-  slippageBps: number
+  slippageBps: number,
 ) => {
   const quote = await fetch(
     `${
       process.env.NEXT_PUBLIC_JUPITER_API_HOST
     }/quote?inputMint=${SOL_INPUT}&outputMint=${tokenAddress}&amount=${Math.floor(
-      amount * LAMPORTS_PER_SOL
-    )}&slippageBps=${slippageBps}&restrictIntermediateTokens=true`
+      amount * LAMPORTS_PER_SOL,
+    )}&slippageBps=${slippageBps}&restrictIntermediateTokens=true`,
   );
   return quote.json();
 };
@@ -20,7 +20,7 @@ const getBuyQuote = async (
 export function useBuyQuote(
   tokenAddress: string,
   amount: number,
-  slippageBps: number = DEFAULT_SLIPPAGE_BPS
+  slippageBps: number = DEFAULT_SLIPPAGE_BPS,
 ) {
   return useQuery({
     queryKey: ["buy-quote", tokenAddress, amount, slippageBps],
diff --git a/app/hooks/useBuyToken.ts b/app/hooks/useBuyToken.ts
index b238350..0fc4ebf 100644
--- a/app/hooks/useBuyToken.ts
+++ b/app/hooks/useBuyToken.ts
@@ -22,7 +22,7 @@ export function useBuyToken(quote: JupiterQuote) {
 
       const transaction = await prepareSwapTransaction(
         quote,
-        publicKey.toString()
+        publicKey.toString(),
       );
 
       return executeTransaction(transaction, signTransaction, connection);
diff --git a/app/hooks/useChartData.ts b/app/hooks/useChartData.ts
index 9416819..6bafe37 100644
--- a/app/hooks/useChartData.ts
+++ b/app/hooks/useChartData.ts
@@ -4,14 +4,14 @@ import { TimeRange } from "@/components/ChartScale";
 
 const getChartData = async (address: string, timeRange: string) => {
   const response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_HOST}/api/invest/token-chart-data?address=${address}&timeRange=${timeRange}`
+    `${process.env.NEXT_PUBLIC_API_HOST}/api/invest/token-chart-data?address=${address}&timeRange=${timeRange}`,
   );
   return response.json();
 };
 
 export default function useChartData(
   address: string,
-  timeRange: TimeRange = "24H"
+  timeRange: TimeRange = "24H",
 ) {
   return useQuery({
     queryKey: ["chart-data", address, timeRange],
diff --git a/app/hooks/useChartInstance.ts b/app/hooks/useChartInstance.ts
index 55506e3..845cf17 100644
--- a/app/hooks/useChartInstance.ts
+++ b/app/hooks/useChartInstance.ts
@@ -21,7 +21,7 @@ const CHART_STYLE = {
 };
 
 export function useChartInstance(
-  containerRef: RefObject<HTMLDivElement | null>
+  containerRef: RefObject<HTMLDivElement | null>,
 ) {
   const chartRef = useRef<IChartApi>(null);
 
diff --git a/app/hooks/useToken.ts b/app/hooks/useToken.ts
index 22329f8..27f5fce 100644
--- a/app/hooks/useToken.ts
+++ b/app/hooks/useToken.ts
@@ -4,7 +4,7 @@ import { TokenResponse } from "@/types/TokenResponse";
 
 const getToken = async (address: string) => {
   const response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_HOST}/api/invest/token-metrics/${address}`
+    `${process.env.NEXT_PUBLIC_API_HOST}/api/invest/token-metrics/${address}`,
   );
   return response.json();
 };
diff --git a/app/hooks/useTokenBalance.ts b/app/hooks/useTokenBalance.ts
index 9f3f22c..4f9ae25 100644
--- a/app/hooks/useTokenBalance.ts
+++ b/app/hooks/useTokenBalance.ts
@@ -15,7 +15,7 @@ export function useTokenBalance(tokenAddress: string) {
       const mint = new PublicKey(tokenAddress);
       const balance = await connection.getParsedTokenAccountsByOwner(
         publicKey,
-        { mint }
+        { mint },
       );
 
       return balance.value[0].account.data.parsed.info.tokenAmount.uiAmount;
diff --git a/app/icons/ArrowDown.tsx b/app/icons/ArrowDown.tsx
index 7ac77ef..de1a096 100644
--- a/app/icons/ArrowDown.tsx
+++ b/app/icons/ArrowDown.tsx
@@ -1,4 +1,8 @@
-export default function ArrowDown({ className = "w-4 h-4" }: { className?: string }) {
+export default function ArrowDown({
+  className = "w-4 h-4",
+}: {
+  className?: string;
+}) {
   return (
     <svg className={className} fill="currentColor" viewBox="0 0 20 20">
       <path
@@ -9,4 +13,3 @@ export default function ArrowDown({ className = "w-4 h-4" }: { className?: strin
     </svg>
   );
 }
-
diff --git a/app/icons/ArrowLeft.tsx b/app/icons/ArrowLeft.tsx
index 27a42e6..57033cd 100644
--- a/app/icons/ArrowLeft.tsx
+++ b/app/icons/ArrowLeft.tsx
@@ -1,8 +1,21 @@
-export default function ArrowLeft({ className = "w-4 h-4" }: { className?: string }) {
+export default function ArrowLeft({
+  className = "w-4 h-4",
+}: {
+  className?: string;
+}) {
   return (
-    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10 19l-7-7m0 0l7-7m-7 7h18"
+      />
     </svg>
   );
 }
-
diff --git a/app/icons/ArrowUp.tsx b/app/icons/ArrowUp.tsx
index f644d10..637c963 100644
--- a/app/icons/ArrowUp.tsx
+++ b/app/icons/ArrowUp.tsx
@@ -1,4 +1,8 @@
-export default function ArrowUp({ className = "w-4 h-4" }: { className?: string }) {
+export default function ArrowUp({
+  className = "w-4 h-4",
+}: {
+  className?: string;
+}) {
   return (
     <svg className={className} fill="currentColor" viewBox="0 0 20 20">
       <path
@@ -9,4 +13,3 @@ export default function ArrowUp({ className = "w-4 h-4" }: { className?: string
     </svg>
   );
 }
-
diff --git a/app/icons/TrendingUp.tsx b/app/icons/TrendingUp.tsx
index 49d10a8..560d024 100644
--- a/app/icons/TrendingUp.tsx
+++ b/app/icons/TrendingUp.tsx
@@ -1,8 +1,21 @@
-export default function TrendingUp({ className = "w-4 h-4" }: { className?: string }) {
+export default function TrendingUp({
+  className = "w-4 h-4",
+}: {
+  className?: string;
+}) {
   return (
-    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+      />
     </svg>
   );
 }
-
diff --git a/app/layout.tsx b/app/layout.tsx
index 97fd712..f918c8a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <html lang="en">
       <body className={geistSans.className}>
         <Providers>
-          <div className="h-screen flex flex-col bg-gradient-to-b from-dark-200 to-dark-100 overflow-hidden">
+          <div className="from-dark-200 to-dark-100 flex h-screen flex-col overflow-hidden bg-gradient-to-b">
             <FloatingStars />
             {children}
           </div>
diff --git a/app/utils/__tests__/format.test.ts b/app/utils/__tests__/format.test.ts
new file mode 100644
index 0000000..4effa40
--- /dev/null
+++ b/app/utils/__tests__/format.test.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect } from "vitest";
+import { formatPrice, formatPercent, formatBigNumber } from "../format";
+
+describe("formatPrice", () => {
+  it("should format very small prices with exponential notation", () => {
+    expect(formatPrice(0.0000005)).toBe(5e-7);
+    expect(formatPrice(0.00000012)).toBe(1.2e-7);
+  });
+
+  it("should format small prices (< 0.001) with 6 decimals", () => {
+    expect(formatPrice(0.0005)).toBe(0.0005);
+    expect(formatPrice(0.000123)).toBe(0.000123);
+  });
+
+  it("should format prices (< 0.01) with 5 decimals", () => {
+    expect(formatPrice(0.005)).toBe(0.005);
+    expect(formatPrice(0.00987)).toBe(0.00987);
+  });
+
+  it("should format regular prices with 4 decimals", () => {
+    expect(formatPrice(0.1444)).toBe(0.1444);
+    expect(formatPrice(1.5678)).toBe(1.5678);
+    expect(formatPrice(100.123456)).toBe(100.1235);
+  });
+});
+
+describe("formatPercent", () => {
+  it("should format positive percentages with + sign", () => {
+    expect(formatPercent(5.25)).toBe("+5.25%");
+    expect(formatPercent(0.5)).toBe("+0.50%");
+    expect(formatPercent(100)).toBe("+100.00%");
+  });
+
+  it("should format negative percentages with - sign", () => {
+    expect(formatPercent(-2.5)).toBe("-2.50%");
+    expect(formatPercent(-0.66)).toBe("-0.66%");
+    expect(formatPercent(-50)).toBe("-50.00%");
+  });
+
+  it("should round to 2 decimal places", () => {
+    expect(formatPercent(5.256)).toBe("+5.26%");
+    expect(formatPercent(-2.554)).toBe("-2.55%");
+  });
+
+  it("should handle very small numbers", () => {
+    expect(formatPercent(0.001)).toBe("+0.00%");
+    expect(formatPercent(-0.009)).toBe("-0.01%");
+  });
+});
+
+describe("formatBigNumber", () => {
+  it("should format billions with B suffix", () => {
+    expect(formatBigNumber(1000000000)).toBe("$1.00B");
+    expect(formatBigNumber(1500000000)).toBe("$1.50B");
+    expect(formatBigNumber(27792181403)).toBe("$27.79B");
+  });
+
+  it("should format millions with M suffix", () => {
+    expect(formatBigNumber(1000000)).toBe("$1.00M");
+    expect(formatBigNumber(48029742)).toBe("$48.03M");
+
+    // 0.5M should be formatted as 500.00K
+    expect(formatBigNumber(500000)).toBe("$500.00K");
+  });
+
+  it("should format thousands with K suffix", () => {
+    expect(formatBigNumber(1000)).toBe("$1.00K");
+    expect(formatBigNumber(5500)).toBe("$5.50K");
+    expect(formatBigNumber(111394)).toBe("$111.39K");
+  });
+
+  it("should format small numbers without suffix", () => {
+    expect(formatBigNumber(0)).toBe("0.00");
+    expect(formatBigNumber(50)).toBe("50.00");
+    expect(formatBigNumber(999.99)).toBe("999.99");
+  });
+
+  it("should handle edge cases at boundaries", () => {
+    expect(formatBigNumber(999)).toBe("999.00");
+    expect(formatBigNumber(1000)).toBe("$1.00K");
+    expect(formatBigNumber(999999)).toBe("$1000.00K");
+    expect(formatBigNumber(1000000)).toBe("$1.00M");
+    expect(formatBigNumber(999999999)).toBe("$1000.00M");
+    expect(formatBigNumber(1000000000)).toBe("$1.00B");
+  });
+
+  it("should round to 2 decimal places", () => {
+    expect(formatBigNumber(1234567)).toBe("$1.23M");
+    expect(formatBigNumber(1236567)).toBe("$1.24M");
+  });
+});
diff --git a/app/utils/transaction.ts b/app/utils/transaction.ts
index 7164265..ec7f7bc 100644
--- a/app/utils/transaction.ts
+++ b/app/utils/transaction.ts
@@ -4,7 +4,7 @@ import { JupiterQuote } from "@/types/JupiterQuote";
 
 export async function prepareSwapTransaction(
   quote: JupiterQuote,
-  publicKey: string
+  publicKey: string,
 ): Promise<VersionedTransaction> {
   const swapResponse = await fetch(
     `${process.env.NEXT_PUBLIC_JUPITER_API_HOST}/swap
@@ -19,21 +19,21 @@ export async function prepareSwapTransaction(
         dynamicComputeUnitLimit: true,
         prioritizationFeeLamports: "auto",
       }),
-    }
+    },
   );
 
   if (!swapResponse.ok) throw new Error("Failed to build swap transaction");
   const { swapTransaction } = await swapResponse.json();
 
   return VersionedTransaction.deserialize(
-    Buffer.from(swapTransaction, "base64")
+    Buffer.from(swapTransaction, "base64"),
   );
 }
 
 export async function executeTransaction(
   transaction: VersionedTransaction,
   signTransaction: (tx: VersionedTransaction) => Promise<VersionedTransaction>,
-  connection: Connection
+  connection: Connection,
 ): Promise<string> {
   const signed = await signTransaction(transaction);
 
@@ -44,12 +44,12 @@ export async function executeTransaction(
 
   const confirmation = await connection.confirmTransaction(
     signature,
-    "finalized"
+    "finalized",
   );
 
   if (confirmation.value.err) {
     throw new Error(
-      `Transaction failed: ${JSON.stringify(confirmation.value.err)}`
+      `Transaction failed: ${JSON.stringify(confirmation.value.err)}`,
     );
   }
 
diff --git a/package-lock.json b/package-lock.json
index 0e04f8b..c308f75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@tanstack/react-query": "^5.90.9",
         "lightweight-charts": "^5.0.9",
         "next": "16.0.3",
+        "prettier-plugin-tailwindcss": "^0.7.1",
         "react": "19.2.0",
         "react-dom": "19.2.0"
       },
@@ -16539,6 +16540,100 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz",
+      "integrity": "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
diff --git a/package.json b/package.json
index 9770372..64af0cb 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.90.9",
     "lightweight-charts": "^5.0.9",
     "next": "16.0.3",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },
diff --git a/vitest.config.ts b/vitest.config.ts
index 9750dd1..2602af8 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -15,4 +15,3 @@ export default defineConfig({
     },
   },
 });
-