diff --git a/src/components/explorer/ExplorerHeader.tsx b/src/components/explorer/ExplorerHeader.tsx
index 478d3726e..1fb1ae720 100644
--- a/src/components/explorer/ExplorerHeader.tsx
+++ b/src/components/explorer/ExplorerHeader.tsx
@@ -1,13 +1,17 @@
+import { buttonStyles } from 'components/common/button/buttonStyles';
 import { TokensOverlap } from 'components/common/tokensOverlap';
 import { getStrategyType } from 'components/strategies/common/utils';
 import { useContract } from 'hooks/useContract';
 import { useTokens } from 'hooks/useTokens';
 import { Strategy, useGetStrategList } from 'libs/queries';
-import { Trending, useTrending } from 'libs/queries/extApi/tradeCount';
-import { StrategyType } from 'libs/routing';
+import {
+  TradeCount,
+  Trending,
+  useTrending,
+} from 'libs/queries/extApi/tradeCount';
+import { Link, StrategyType } from 'libs/routing';
 import { Token } from 'libs/tokens';
-import { fetchTokenData } from 'libs/tokens/tokenHelperFn';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { prettifyNumber } from 'utils/helpers';
 
 interface TrendingPair {
@@ -17,30 +21,44 @@ interface TrendingPair {
   trades: number;
 }
 
+const typeLabel = {
+  disposable: 'Limit / Range',
+  recurring: 'Recurring',
+  overlapping: 'Concentrated',
+};
+
 const useTrendingPairs = (trending?: Trending) => {
   const [loading, setLoading] = useState(true);
   const { tokensMap, importToken } = useTokens();
   const { Token } = useContract();
 
-  useEffect(() => {
-    const missingTokens = new Set<string>();
-    for (const { token0, token1 } of trending?.tradeCount ?? []) {
-      if (!tokensMap.has(token0.toLowerCase())) missingTokens.add(token0);
-      if (!tokensMap.has(token1.toLowerCase())) missingTokens.add(token1);
-    }
-    if (!missingTokens.size) return;
-    const getTokens = Array.from(missingTokens).map((address) => {
-      return fetchTokenData(Token, address);
-    });
-    Promise.all(getTokens).then((tokens) => {
-      tokens.forEach((data) => importToken(data));
-      setLoading(false);
-    });
-  }, [Token, importToken, tokensMap, trending?.tradeCount]);
-  if (!trending || loading) return [];
+  // useEffect(() => {
+  //   const missingTokens = new Set<string>();
+  //   for (const { token0, token1 } of trending?.tradeCount ?? []) {
+  //     if (!tokensMap.has(token0.toLowerCase())) missingTokens.add(token0);
+  //     if (!tokensMap.has(token1.toLowerCase())) missingTokens.add(token1);
+  //   }
+  //   if (!missingTokens.size) return;
+  //   const getTokens = Array.from(missingTokens).map((address) => {
+  //     return fetchTokenData(Token, address);
+  //   });
+  //   Promise.all(getTokens).then((tokens) => {
+  //     console.log({ tokens });
+  //     tokens.forEach((data) => importToken(data));
+  //     setLoading(false);
+  //   });
+  // }, [Token, importToken, tokensMap, trending?.tradeCount]);
+  if (!trending) return { isLoading: true, data: [] };
+
+  const isMissingToken = (trade: TradeCount) => {
+    if (!tokensMap.has(trade.token0.toLowerCase())) return true;
+    if (!tokensMap.has(trade.token1.toLowerCase())) return true;
+    return false;
+  };
 
   const pairs: Record<string, { trades: number; trades_24h: number }> = {};
   for (const trade of trending.tradeCount) {
+    if (isMissingToken(trade)) continue;
     pairs[trade.pairAddresses] ||= { trades: 0, trades_24h: 0 };
     pairs[trade.pairAddresses].trades += trade.strategyTrades;
     pairs[trade.pairAddresses].trades_24h += trade.strategyTrades_24h;
@@ -49,8 +67,8 @@ const useTrendingPairs = (trending?: Trending) => {
     .filter(([, { trades_24h }]) => !!trades_24h)
     .map(([pairAddress, { trades }]) => ({
       pairAddress: pairAddress,
-      base: tokensMap.get(pairAddress.split('/').shift()!)!,
-      quote: tokensMap.get(pairAddress.split('/').pop()!)!,
+      base: tokensMap.get(pairAddress.split('/').shift()!.toLowerCase())!,
+      quote: tokensMap.get(pairAddress.split('/').pop()!.toLowerCase())!,
       trades,
     }))
     .sort((a, b) => b.trades - a.trades)
@@ -61,14 +79,19 @@ const useTrendingPairs = (trending?: Trending) => {
     const index = Math.floor(Math.random() * list.length);
     result[i] = list.splice(index, 1)[0];
   }
-  return result.sort((a, b) => b.trades - a.trades);
+  return {
+    isLoading: false,
+    data: result.sort((a, b) => b.trades - a.trades),
+  };
 };
 
 interface StrategyWithTradeCount extends Strategy {
   trades: number;
   type: StrategyType;
 }
-const useTrendStrategies = (trending?: Trending): StrategyWithTradeCount[] => {
+const useTrendStrategies = (
+  trending?: Trending
+): { isLoading: boolean; data: StrategyWithTradeCount[] } => {
   const list = (trending?.tradeCount ?? [])
     .filter((t) => !!t.strategyTrades_24h)
     .sort((a, b) => b.strategyTrades - a.strategyTrades)
@@ -81,67 +104,114 @@ const useTrendStrategies = (trending?: Trending): StrategyWithTradeCount[] => {
     record[item.id] = item.strategyTrades;
   }
   const query = useGetStrategList(Object.keys(record));
-  return (query.data ?? []).map((strategy) => ({
+  if (query.isLoading) {
+    return { isLoading: true, data: [] };
+  }
+  const data = (query.data ?? []).map((strategy) => ({
     ...strategy,
     type: getStrategyType(strategy),
     trades: record[strategy.id],
   }));
+  return { isLoading: false, data };
 };
 
 export const ExplorerHeader = () => {
   const { data: trending } = useTrending();
-  const strategies = useTrendStrategies(trending);
-  const pairs = useTrendingPairs(trending);
-  console.log({ strategies, pairs });
+  const trendingStrategies = useTrendStrategies(trending);
+  const trendingPairs = useTrendingPairs(trending);
+  const strategies = trendingStrategies.data;
+  const pairs = trendingPairs.data;
   return (
-    <header className="flex gap-32">
-      <article>
+    <header className="mb-42 flex gap-32">
+      <article className="flex flex-1 flex-col items-center justify-around gap-16 md:items-start">
         <h2>Total Trades</h2>
         <p className="text-36 font-weight-700 font-title">
-          {trending?.totalTradeCount}
+          {prettifyNumber(trending?.totalTradeCount ?? '0')}
         </p>
+        <div className="flex gap-16">
+          <Link to="/trade" className={buttonStyles({ variant: 'success' })}>
+            Trade
+          </Link>
+          <Link
+            to="/trade/disposable"
+            className={buttonStyles({ variant: 'white' })}
+          >
+            Create Strategy
+          </Link>
+        </div>
       </article>
-      <article className="border-background-800 rounded border-2 p-20">
+      <article className="border-background-800 hidden flex-1 rounded border-2 p-20 md:block">
         <h2>Populare Pairs</h2>
-        <table>
+        <table className="w-full">
           <thead>
             <tr>
               <td>Token Pair</td>
-              <td>Trades</td>
+              <td className="text-end">Trades</td>
             </tr>
           </thead>
           <tbody>
+            {trendingPairs.isLoading &&
+              [1, 2, 3].map((id) => (
+                <tr key={id}>
+                  <td>
+                    <Loading />
+                  </td>
+                  <td>
+                    <Loading />
+                  </td>
+                </tr>
+              ))}
             {pairs.map(({ pairAddress, base, quote, trades }) => (
               <tr key={pairAddress}>
                 <td>
-                  <TokensOverlap tokens={[base, quote]} size={18} />
-                  {base?.symbol}/{quote?.symbol}
+                  <div className="inline-flex items-center gap-8">
+                    <TokensOverlap tokens={[base, quote]} size={18} />
+                    <span>{base?.symbol}</span>
+                    <span className="text-white/60">/</span>
+                    <span>{quote?.symbol}</span>
+                  </div>
                 </td>
-                <td>{prettifyNumber(trades)}</td>
+                <td className="text-end">{prettifyNumber(trades)}</td>
               </tr>
             ))}
           </tbody>
         </table>
       </article>
-      <article className="border-background-800 rounded border-2 p-20">
+      <article className="border-background-800 hidden flex-1 rounded border-2 p-20 lg:block">
         <h2>Trending Strategies</h2>
-        <table>
+        <table className="w-full">
           <thead>
             <tr>
               <td>ID</td>
               <td>Types</td>
-              <td>Trades</td>
+              <td className="text-end">Trades</td>
             </tr>
           </thead>
           <tbody>
+            {trendingStrategies.isLoading &&
+              [1, 2, 3].map((id) => (
+                <tr key={id}>
+                  <td>
+                    <Loading />
+                  </td>
+                  <td>
+                    <Loading />
+                  </td>
+                  <td>
+                    <Loading />
+                  </td>
+                </tr>
+              ))}
             {strategies.map(({ id, idDisplay, base, quote, type, trades }) => (
               <tr key={id}>
                 <td>
-                  <TokensOverlap tokens={[base, quote]} size={18} />
-                  {idDisplay}
+                  <div className="bg-background-700 inline-flex gap-8 rounded px-8">
+                    <TokensOverlap tokens={[base, quote]} size={18} />
+                    {idDisplay}
+                  </div>
                 </td>
-                <td>{type}</td>
-                <td>{prettifyNumber(trades)}</td>
+                <td>{typeLabel[type]}</td>
+                <td className="text-end">{prettifyNumber(trades)}</td>
               </tr>
             ))}
           </tbody>
@@ -150,3 +220,9 @@ export const ExplorerHeader = () => {
     </header>
   );
 };
+
+const Loading = () => (
+  <div className="h-[30px] animate-pulse p-4">
+    <div className="bg-background-700 h-full rounded"></div>
+  </div>
+);
diff --git a/src/libs/queries/extApi/tradeCount.ts b/src/libs/queries/extApi/tradeCount.ts
index 2aa1ec037..cb7bfbf1c 100644
--- a/src/libs/queries/extApi/tradeCount.ts
+++ b/src/libs/queries/extApi/tradeCount.ts
@@ -3,7 +3,7 @@ import { QueryKey } from 'libs/queries/queryKey';
 import { ONE_HOUR_IN_MS } from 'utils/time';
 import { carbonApi } from 'utils/carbonApi';
 
-interface TradeCount {
+export interface TradeCount {
   id: string;
   strategyTrades: number;
   strategyTrades_24h: number;