diff --git a/next.config.js b/next.config.js
index e2c68f5b..63d0bc83 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,7 +3,7 @@ const { i18n } = require('./next-i18next.config');
 const { cronJob } = require('./src/services/crons');
 const { queueReceiver } = require('./src/services/queue');
 const { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_SERVER } = require('next/constants');
-const isLocal = process.env.NEXT_PUBLIC_BUILD_ENV === 'local';
+const isProduction = process.env.NEXT_PUBLIC_BUILD_ENV === 'production';
 
 const nextConfig = {
   reactStrictMode: true,
@@ -15,7 +15,7 @@ module.exports = async (phase, { defaultConfig }) => {
   console.log('Quickshare is starting...');
 
   let shouldRunQueue = phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_SERVER;
-  if (!isLocal) shouldRunQueue = false;
+  if (isProduction) shouldRunQueue = false;
   if (process.env.NEXT_PUBLIC_SHORT_DOMAIN === 'true') shouldRunQueue = false;
   if (shouldRunQueue) {
     queueReceiver();
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index b55de87b..f6412e4d 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -116,5 +116,8 @@
     "p2-head": "Shortening, tracking and sharing"
   },
   "signInLink": "Or click here to continue.",
-  "usePasswordToShortenedLink": "Also use this password for shortened URL"
+  "usePasswordToShortenedLink": "Also use this password for shortened URL",
+  "clicks": "Clicks",
+  "clicksByCountry": "Clicks by Country",
+  "otherCountry": "Others"
 }
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index 5d0064d9..dcfc4b2a 100644
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -117,5 +117,8 @@
     "card3-content": "Tous les accès aux liens raccourcis, y compris les bots et les utilisateurs, sont enregistrés. Les détails de suivi incluent la chaîne complète de l'agent utilisateur, l'adresse IP et les informations sur l'appareil."
   },
   "signInLink": "Ou cliquez ici pour continuer.",
-  "usePasswordToShortenedLink": "Utilisez également ce mot de passe pour l'URL raccourcie"
+  "usePasswordToShortenedLink": "Utilisez également ce mot de passe pour l'URL raccourcie",
+  "clicks": "Clics",
+  "clicksByCountry": "Clics par pays",
+  "otherCountry": "Autres"
 }
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
index 4bd4dc90..5c36a292 100644
--- a/public/locales/hi/common.json
+++ b/public/locales/hi/common.json
@@ -114,8 +114,11 @@
     "card2": "आपका डेटा सुरक्षित है",
     "card2-content": "आपके मूल लिंक क्विकशेयर के माध्यम से एनोनाइमाइज़ किए जाते हैं। शॉर्ट URL सर्च इंजन परिणामों में नहीं दिखाई देंगे। आप लिंक ट्रैकिंग सेक्शन में अपने शॉर्ट URL को पासवर्ड प्रोटेक्ट भी कर सकते हैं।",
     "card3": "लिंक ट्रैकिंग पारदर्शी है",
-    "card3-content": "बॉट्स और यूज़र्स सहित शॉर्ट URL तक सभी एक्सेस रिकॉर्ड किए जाते हैं। ट्रैकिंग डिटेल में पूरा यूज़र एजेंट स्ट्रिंग, आईपी एड्रेस और डिवाइस की जानकारी शामिल होती है।",
-    "signInLink": "या जारी रखने के लिए यहां क्लिक करें।",
-    "usePasswordToShortenedLink": "इस पासवर्ड का उपयोग शॉर्ट URL के लिए भी करें"
-  }
+    "card3-content": "बॉट्स और यूज़र्स सहित शॉर्ट URL तक सभी एक्सेस रिकॉर्ड किए जाते हैं। ट्रैकिंग डिटेल में पूरा यूज़र एजेंट स्ट्रिंग, आईपी एड्रेस और डिवाइस की जानकारी शामिल होती है।"
+  },
+  "signInLink": "या जारी रखने के लिए यहां क्लिक करें।",
+  "usePasswordToShortenedLink": "इस पासवर्ड का उपयोग शॉर्ट URL के लिए भी करें",
+  "clicks": "क्लिक्स",
+  "clicksByCountry": "देश के हिसाब से क्लिक्स",
+  "otherCountry": "अन्य"
 }
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index ac7b1198..8406e088 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -117,5 +117,8 @@
     "card3-content": "ボットやユーザーを含む、短縮URLへの全アクセスが記録されます。トラッキング情報にはユーザーエージェント文字列、IPアドレス、デバイス情報が全て含まれます。"
   },
   "signInLink": "またはここをクリックして続行。",
-  "usePasswordToShortenedLink": "このパスワードを短縮URLにも使用する"
+  "usePasswordToShortenedLink": "このパスワードを短縮URLにも使用する",
+  "clicks": "クリック数",
+  "clicksByCountry": "国別クリック数",
+  "otherCountry": "その他"
 }
diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json
index bf275691..9672be7b 100644
--- a/public/locales/vi/common.json
+++ b/public/locales/vi/common.json
@@ -117,5 +117,8 @@
     "card3-content": "Tất cả truy cập vào link rút gọn, kể cả bot hay người dùng đều được ghi lại. Thông tin theo dõi bao gồm đầy đủ User Agent, địa chỉ IP và thông tin thiết bị."
   },
   "signInLink": "Hoặc bạn có thể click vào đây để tiếp tục.",
-  "usePasswordToShortenedLink": "Áp dụng mật khẩu cho link rút gọn"
+  "usePasswordToShortenedLink": "Áp dụng mật khẩu cho link rút gọn",
+  "clicks": "Clicks",
+  "clicksByCountry": "Clicks theo quốc gia",
+  "otherCountry": "Khác"
 }
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
index 2e70dcb7..a710a1a7 100644
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@@ -117,5 +117,8 @@
     "card3-content": "所有对缩短链接的访问,包括机器人和用户,都会被记录。跟踪信息包括完整的用户代理字符串、IP 地址和设备信息。"
   },
   "signInLink": "或者点击这里继续。",
-  "usePasswordToShortenedLink": "也为缩短网址使用这个密码"
+  "usePasswordToShortenedLink": "也为缩短网址使用这个密码",
+  "clicks": "点击次数",
+  "clicksByCountry": "各国点击量",
+  "otherCountry": "其他"
 }
diff --git a/src/components/atoms/BarChart.tsx b/src/components/atoms/BarChart.tsx
new file mode 100644
index 00000000..9a9d90d4
--- /dev/null
+++ b/src/components/atoms/BarChart.tsx
@@ -0,0 +1,62 @@
+import Script from 'next/script';
+import { useEffect, useState } from 'react';
+import { Window } from 'types/constants';
+
+interface Props {
+  label: any[];
+  value: (string | number | null)[][];
+  title?: string;
+  className?: string;
+}
+
+export const BarChart = (props: Props) => {
+  const { className, title, label, value } = props;
+  const [loaded, setLoaded] = useState(false);
+  const google = Window().google;
+
+  useEffect(() => {
+    if (!google) return;
+
+    google.charts.load('current', { packages: ['corechart', 'bar'] });
+    google.charts.setOnLoadCallback(drawBasic);
+
+    function drawBasic() {
+      var data = google.visualization.arrayToDataTable([label, ...value]);
+
+      var options = {
+        title,
+        backgroundColor: '#fcfcfd',
+        hAxis: {
+          minValue: 0,
+        },
+        fontName: 'Roboto Slab',
+        fontSize: 12,
+        legend: 'none',
+      };
+
+      var chart = new google.visualization.BarChart(document.getElementById('bar-div'));
+
+      chart.draw(data, options);
+
+      return () => {
+        chart.clearChart();
+      };
+    }
+  }, [loaded, google]);
+
+  if (value.length === 0) return null;
+
+  return (
+    <>
+      <Script
+        onLoad={() => {
+          setLoaded(true);
+        }}
+        type="text/javascript"
+        src="https://www.gstatic.com/charts/loader.js"
+      />
+
+      <div id="bar-div" className={className}></div>
+    </>
+  );
+};
diff --git a/src/components/atoms/GeoChart.tsx b/src/components/atoms/GeoChart.tsx
new file mode 100644
index 00000000..b7bcea8c
--- /dev/null
+++ b/src/components/atoms/GeoChart.tsx
@@ -0,0 +1,63 @@
+import Script from 'next/script';
+import { useCallback, useEffect, useState } from 'react';
+import { Window } from 'types/constants';
+
+interface Props {
+  label: (string | number | null)[];
+  value: (string | number | null)[][];
+  className?: string;
+}
+
+export const GeoChart = (props: Props) => {
+  const { className, label, value } = props;
+  const [loaded, setLoaded] = useState(false);
+  const google = Window().google;
+  const id = 'regions_div';
+
+  const drawRegionsMap = useCallback(
+    function () {
+      const element = document.getElementById(id);
+
+      var data = google.visualization.arrayToDataTable([label, ...value]);
+
+      var options = {
+        legend: 'none',
+        backgroundColor: '#fcfcfd',
+        tooltip: {
+          textStyle: {
+            fontName: 'Roboto Slab',
+            fontSize: 12,
+          },
+        },
+        colorAxis: { minValue: 0, colors: ['#9d8ed1', '#6644de'] },
+      };
+
+      const chart = new google.visualization.GeoChart(element);
+
+      chart.draw(data, options);
+    },
+    [loaded, google],
+  );
+
+  useEffect(() => {
+    if (!google) return;
+    google.charts.load('current', {
+      packages: ['geochart'],
+    });
+    google.charts.setOnLoadCallback(drawRegionsMap);
+  }, [loaded, google]);
+
+  return (
+    <>
+      <Script
+        onLoad={() => {
+          setLoaded(true);
+        }}
+        type="text/javascript"
+        src="https://www.gstatic.com/charts/loader.js"
+      />
+
+      <div id={id} className={className}></div>
+    </>
+  );
+};
diff --git a/src/components/screens/URLTracking/HistoryByCountry.tsx b/src/components/screens/URLTracking/HistoryByCountry.tsx
new file mode 100644
index 00000000..0523d2de
--- /dev/null
+++ b/src/components/screens/URLTracking/HistoryByCountry.tsx
@@ -0,0 +1,94 @@
+import clsx from 'clsx';
+import { BarChart } from 'components/atoms/BarChart';
+import { GeoChart } from 'components/atoms/GeoChart';
+import { useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { useQuery } from 'react-query';
+import { getStatsGeo } from 'requests';
+import { HistoryGeoItem } from 'types/stats';
+import { getCountryName } from 'utils/country';
+import { useDimensionWindow } from 'utils/dom';
+import { useTrans } from 'utils/i18next';
+import { parseIntSafe } from 'utils/number';
+import { QueryKey, strictRefetch } from 'utils/requests';
+
+const color = '#7354e5';
+
+interface Props {
+  hash: string;
+  className?: string;
+}
+
+export const HistoryByCountry = (props: Props) => {
+  const { hash } = props;
+  const { t, locale } = useTrans();
+  const [rerender, setRerender] = useState(0);
+  const { width } = useDimensionWindow();
+  const fetchStatsGeo = useQuery({
+    queryKey: QueryKey.STATS_GEO,
+    queryFn: async () => getStatsGeo({ hash }),
+    ...strictRefetch,
+    onSuccess(data) {
+      if (data.history) setData(data.history);
+    },
+    onError(error) {
+      console.error(error);
+      toast.error(t('errorNoTracking'));
+    },
+  });
+
+  const [data, setData] = useState<HistoryGeoItem[]>(fetchStatsGeo.data?.history || []);
+
+  const chartDataGeo = useMemo(() => {
+    if (!data) return [];
+    return data.map((data) => [getCountryName(data.countryCode || '') || 'world', data._count.countryCode]);
+  }, [data]);
+
+  const chartDataBar = useMemo(() => {
+    if (!data) return [];
+    let total = data.map((data) => [
+      getCountryName(data.countryCode || '') || t('unknown'),
+      data._count.countryCode,
+      `color: ${color}`,
+    ]);
+    if (total.length > 3) {
+      const others = total.slice(3);
+      total = [
+        ...total.slice(0, 3),
+        others.reduce((prev, cur) => [
+          t('otherCountry'),
+          parseIntSafe(prev[1]) + parseIntSafe(cur[1]),
+          `color: ${color}`,
+        ]),
+      ];
+    }
+    return total;
+  }, [data]);
+
+  useEffect(() => {
+    setRerender((_) => _ + 1);
+  }, [width, locale]);
+
+  if (!fetchStatsGeo.data) return null;
+
+  return (
+    <div>
+      <div
+        className={clsx('flex h-full w-full flex-col items-center justify-center gap-4 lg:flex-row', props.className)}>
+        <GeoChart
+          key={`geo-${rerender}`}
+          label={['Country', t('totalClick')]}
+          value={chartDataGeo}
+          className="h-[240px] w-full sm:w-[400px] lg:h-[300px] lg:w-[500px]"
+        />
+        <BarChart
+          key={`bar-${rerender}`}
+          label={['Country', t('totalClick'), { role: 'style' }]}
+          value={chartDataBar}
+          className="w-full sm:w-[400px] md:w-[600px]"
+        />
+      </div>
+      {chartDataGeo.length === 0 && <p className="mt-4 text-center text-base text-gray-500">{t('noData')}</p>}
+    </div>
+  );
+};
diff --git a/src/components/screens/URLTracking/HistoryTable.tsx b/src/components/screens/URLTracking/HistoryTable.tsx
new file mode 100644
index 00000000..640fcc89
--- /dev/null
+++ b/src/components/screens/URLTracking/HistoryTable.tsx
@@ -0,0 +1,198 @@
+import { Calendar, Copy, Globe, MapPin, Search, Sliders, UserCheck, UserX } from '@styled-icons/feather';
+import clsx from 'clsx';
+import { Button } from 'components/atoms/Button';
+import { Popover } from 'components/atoms/Popover';
+import isbot from 'isbot';
+import mixpanel from 'mixpanel-browser';
+import { Dispatch, SetStateAction, useState } from 'react';
+import toast from 'react-hot-toast';
+import { UrlHistoryWithMeta } from 'types/stats';
+import { MIXPANEL_EVENT } from 'types/utils';
+import { UAParser } from 'ua-parser-js';
+import { getCountryName } from 'utils/country';
+import date, { DATE_FULL_FORMAT } from 'utils/date';
+import { useTrans } from 'utils/i18next';
+import { PAGE_SIZE } from 'utils/requests';
+import { capitalize } from 'utils/text';
+
+interface Props {
+  history?: UrlHistoryWithMeta;
+  noBot: boolean;
+  setNoBot: Dispatch<SetStateAction<boolean>>;
+  refetch: any;
+  statsMore: any;
+  getMoreUA: any;
+}
+
+export const HistoryTable = (props: Props) => {
+  const { history, noBot, setNoBot, statsMore, getMoreUA, refetch } = props;
+  const { t, locale } = useTrans();
+
+  const [qc, setQc] = useState<number | undefined>(0);
+
+  const handleClickBot = () => {
+    setNoBot((state: any) => !state);
+    setTimeout(() => {
+      refetch();
+    });
+  };
+
+  const onLoadMore = () => {
+    setQc((_) => {
+      const _qc = history?.UrlForwardMeta?.at(-1)?.id;
+      if (!statsMore.isLoading) {
+        statsMore.mutate({ hash: history?.hash, noBot, queryCursor: _qc });
+      }
+      return _qc;
+    });
+  };
+
+  const hasData = !!history?.UrlForwardMeta?.length;
+  const hasMore = hasData && (history?.UrlForwardMeta?.length || 0) % PAGE_SIZE === 0;
+
+  return (
+    <div className="relative shadow-md">
+      <div className="h-[300px] overflow-auto border border-gray-200 sm:rounded-lg lg:h-[400px] 2xl:h-[600px]">
+        <table className="w-full text-left text-sm text-gray-500">
+          <thead className="bg-gray-50 text-xs uppercase text-gray-700">
+            <tr>
+              <th className="px-6 py-3">
+                <span className="">{t('country')}</span>
+              </th>
+              <th className="px-6 py-3">
+                <span className="">{t('userAgent')}</span>
+              </th>
+              <th className="px-6 py-3">
+                <span className="">{`IP`}</span>
+              </th>
+              <th className="px-6 py-3">
+                <span className="">{t('date')}</span>
+              </th>
+              <th className="px-6 py-3">
+                <div className="flex items-center justify-end gap-2">
+                  <span className="float-right block w-max">{t('clickedByHuman')}</span>
+                  <button>
+                    <Popover
+                      id="tracking-filter"
+                      closed={noBot}
+                      Classname={{
+                        Content: 'translate-y-[-20%] translate-x-[-110%]',
+                        Button: 'text-gray-500 hover:text-gray-900 transition-colors',
+                      }}
+                      Button={<Sliders className="w-4" />}
+                      Content={
+                        <div className="w-max">
+                          <ul className="flex flex-col items-start gap-2">
+                            <li
+                              className="flex w-full items-center gap-2 p-4 hover:rounded-lg hover:bg-gray-200"
+                              onClick={handleClickBot}>
+                              {!noBot ? (
+                                <UserX className={clsx('h-4 w-4 stroke-2 text-red-500')} />
+                              ) : (
+                                <UserCheck className={clsx('h-4 w-4 stroke-2 text-green-500')} />
+                              )}
+                              <span className="ml-2 max-sm:hidden">{t('filterBot')}</span>
+                            </li>
+                          </ul>
+                        </div>
+                      }
+                    />
+                  </button>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {history?.UrlForwardMeta?.map((m, j) => {
+              const UA = m.userAgent ? new UAParser(m.userAgent) : undefined;
+              const ref = m.userAgent ? isbot.find(m.userAgent) : undefined;
+              return (
+                <tr key={`meta-${j}`} className="border-b bg-white">
+                  <td className="whitespace-nowrap px-6 py-4 font-medium text-gray-900">
+                    <MapPin className="mr-1 w-4" />
+                    {m.countryCode ? getCountryName(m.countryCode, locale) : t('unknown')}
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 font-medium text-gray-900">
+                    {UA ? (
+                      <div>
+                        <p>
+                          Device: {capitalize(UA?.getDevice().type) || t('unknown')} {UA?.getDevice().vendor}{' '}
+                          {UA?.getDevice().model}
+                        </p>
+                        <p>OS: {UA?.getOS().name || t('unknown')}</p>
+                        <p>Browser: {UA?.getBrowser().name || t('unknown')}</p>
+                        {m.userAgent && (
+                          <p
+                            data-te-toggle="modal"
+                            data-te-target="#parsedUA"
+                            className="cursor-pointer text-gray-500 underline hover:text-cyan-500"
+                            onClick={() => {
+                              getMoreUA.mutate(m.userAgent!);
+                            }}>
+                            {t('advancedView')} <Globe className="mb-2 w-3" />
+                          </p>
+                        )}
+
+                        <p
+                          data-clipboard-text={m.userAgent || t('unknown')}
+                          className="btn-copy cursor-pointer text-gray-500 hover:text-cyan-500 hover:underline"
+                          onClick={() => {
+                            mixpanel.track(MIXPANEL_EVENT.USER_AGENT_COPY, {
+                              data: m,
+                            });
+                            toast.success('Copied');
+                          }}>
+                          {t('copyRawInfo')} <Copy className="mb-2 w-3" />
+                        </p>
+                      </div>
+                    ) : (
+                      t('unknown')
+                    )}
+                  </td>
+                  <td className="cursor-pointer whitespace-nowrap px-6 py-4 font-medium text-gray-900 hover:text-cyan-500 hover:underline">
+                    <a
+                      href={`https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/${m.ip}`}
+                      target="_blank">
+                      {m.ip || t('unknown')}
+                      <Search className="relative w-3 -translate-y-2 translate-x-[0.8px]" />
+                    </a>
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 font-medium text-gray-900">
+                    <Calendar className="mr-1 w-4" />
+                    {m.updatedAt ? date(m.updatedAt).locale(locale).format(DATE_FULL_FORMAT) : t('unknown')}
+                  </td>
+                  <td className="whitespace-nowrap px-6 py-4 text-right font-medium text-gray-900">
+                    {m.fromClientSide ? (
+                      <UserCheck className="mr-1 w-6 stroke-2 text-green-500" />
+                    ) : (
+                      <>
+                        <UserX className="mr-1 w-6 stroke-2 text-red-500" />
+                        {ref && <p>{ref}</p>}
+                      </>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+            {hasMore && (
+              <tr>
+                <td colSpan={5}>
+                  <div className="flex justify-center py-4">
+                    <Button text={t('loadMore')} onClick={onLoadMore} loading={statsMore.isLoading} />
+                  </div>
+                </td>
+              </tr>
+            )}
+            {!hasData && (
+              <tr>
+                <td className="h-[200px] text-center text-base" colSpan={5}>
+                  {t('noData')}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/screens/URLTracking/TrackingClick.tsx b/src/components/screens/URLTracking/TrackingClick.tsx
index d51f8be3..d67c46de 100644
--- a/src/components/screens/URLTracking/TrackingClick.tsx
+++ b/src/components/screens/URLTracking/TrackingClick.tsx
@@ -1,37 +1,37 @@
-import { Calendar, Copy, Globe, MapPin, RefreshCw, Search, Sliders, UserCheck, UserX } from '@styled-icons/feather';
-import clsx from 'clsx';
-import { Button } from 'components/atoms/Button';
+import { RefreshCw } from '@styled-icons/feather';
 import { Modal } from 'components/atoms/Modal';
-import { Popover } from 'components/atoms/Popover';
-import isbot from 'isbot';
+import { Tab, Tabs } from 'components/atoms/Tabs';
 import mixpanel from 'mixpanel-browser';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { toast } from 'react-hot-toast';
 import { useMutation, useQuery } from 'react-query';
 import { getStats, parseUA } from 'requests';
 import { useBearStore } from 'store';
 import { BASE_URL_SHORT, Window } from 'types/constants';
 import { UrlHistoryWithMeta } from 'types/stats';
 import { MIXPANEL_EVENT } from 'types/utils';
-import { UAParser } from 'ua-parser-js';
-import { getCountryName } from 'utils/country';
 import date, { DATE_FULL_FORMAT } from 'utils/date';
 import { useTrans } from 'utils/i18next';
-import { PAGE_SIZE, QueryKey, strictRefetch } from 'utils/requests';
-import { capitalize, truncateMiddle } from 'utils/text';
+import { QueryKey, strictRefetch } from 'utils/requests';
+import { truncateMiddle } from 'utils/text';
+import { HistoryByCountry } from './HistoryByCountry';
+import { HistoryTable } from './HistoryTable';
 import { SetPassword } from './SetPassword';
 import { ValidatePassword } from './ValidatePassword';
 
+const tabs = (t: any): Tab[] => [
+  { content: t('clicks'), key: 'table' },
+  { content: t('clicksByCountry'), key: 'geo' },
+];
 const JsonViewer = dynamic(() => import('@textea/json-viewer').then((c) => c.JsonViewer));
 
 export const TrackingClick = ({ hash }: { hash: string }) => {
   const { t, locale } = useTrans();
   const router = useRouter();
+  const [tab, setTab] = useState<string>('table');
   const [needValidate, setNeedValidate] = useState<boolean>();
   const [parsedUA, setParsedUA] = useState();
-  const [qc, setQc] = useState<number | undefined>(0);
   const [noBot, setNoBot] = useState(false);
   const [history, setHistory] = useState<UrlHistoryWithMeta | undefined>(undefined);
   const getStatsQuery = useCallback(async () => getStats({ hash, noBot }), [hash, noBot]);
@@ -94,23 +94,6 @@ export const TrackingClick = ({ hash }: { hash: string }) => {
     },
   });
 
-  const onLoadMore = () => {
-    setQc((_) => {
-      const _qc = history?.UrlForwardMeta?.at(-1)?.id;
-      if (!statsMore.isLoading) {
-        statsMore.mutate({ hash, noBot, queryCursor: _qc });
-      }
-      return _qc;
-    });
-  };
-
-  const handleClickBot = () => {
-    setNoBot((state) => !state);
-    setTimeout(() => {
-      refetch();
-    });
-  };
-
   useEffect(() => {
     if (isSuccess && !data?.record && !data?.history) {
       router.replace('/');
@@ -125,9 +108,7 @@ export const TrackingClick = ({ hash }: { hash: string }) => {
     return null;
   }
 
-  const hasData = !!history?.UrlForwardMeta?.length;
   const hasPassword = history?.password !== null;
-  const hasMore = hasData && (history?.UrlForwardMeta?.length || 0) % PAGE_SIZE === 0;
   const clickableUrl = history ? (history.url.startsWith('http') ? history.url : `//${history.url}`) : '';
 
   return (
@@ -173,163 +154,35 @@ export const TrackingClick = ({ hash }: { hash: string }) => {
             </div>
             {!hasPassword && <SetPassword hash={hash} />}
           </div>
-          <div className={clsx('flex items-end justify-between text-sm text-gray-500 sm:mt-2')}>
-            <div>
-              <p className="text-lg capitalize text-cyan-500">
-                {`${t('totalClick')}: `}{' '}
-                <span className="text-3xl font-bold">{(history as any)?._count?.UrlForwardMeta}</span>
-              </p>
-              <button
-                className={'mt-2 transition-all hover:text-cyan-500 sm:mt-4'}
-                onClick={() => Window()?.location.reload()}>
+          <p className="mt-2 text-lg capitalize text-cyan-500">
+            {`${t('totalClick')}: `}{' '}
+            <span className="text-3xl font-bold">{(history as any)?._count?.UrlForwardMeta}</span>
+          </p>
+          <div
+            className={
+              'my-2 flex flex-col items-start justify-between gap-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:pr-4'
+            }>
+            <Tabs className="border-none" tabs={tabs(t)} selectedKey={tab} setSelectedKey={setTab} />
+            {tab === 'table' && (
+              <button className={'transition-all hover:text-cyan-500'} onClick={() => Window()?.location.reload()}>
                 <span className={'text-sm text-cyan-500'}>•</span>{' '}
                 <span className={'hover:underline'}>{t('lastUpdate') + ' ' + lastUpdate}</span>
                 <RefreshCw className="absolute ml-1 mt-1 w-3" />
               </button>
-            </div>
+            )}
           </div>
-          <div className="relative mt-2 shadow-md">
-            <div className="h-[300px] overflow-auto border border-gray-200 sm:rounded-lg lg:h-[400px] 2xl:h-[600px]">
-              <table className="w-full text-left text-sm text-gray-500">
-                <thead className="bg-gray-50 text-xs uppercase text-gray-700">
-                  <tr>
-                    <th className="px-6 py-3">
-                      <span className="">{t('country')}</span>
-                    </th>
-                    <th className="px-6 py-3">
-                      <span className="">{t('userAgent')}</span>
-                    </th>
-                    <th className="px-6 py-3">
-                      <span className="">{`IP`}</span>
-                    </th>
-                    <th className="px-6 py-3">
-                      <span className="">{t('date')}</span>
-                    </th>
-                    <th className="px-6 py-3">
-                      <div className="flex items-center justify-end gap-2">
-                        <span className="float-right block w-max">{t('clickedByHuman')}</span>
-                        <button>
-                          <Popover
-                            id="tracking-filter"
-                            closed={noBot}
-                            Classname={{
-                              Content: 'translate-y-[-20%] translate-x-[-110%]',
-                              Button: 'text-gray-500 hover:text-gray-900 transition-colors',
-                            }}
-                            Button={<Sliders className="w-4" />}
-                            Content={
-                              <div className="w-max">
-                                <ul className="flex flex-col items-start gap-2">
-                                  <li
-                                    className="flex w-full items-center gap-2 p-4 hover:rounded-lg hover:bg-gray-200"
-                                    onClick={handleClickBot}>
-                                    {!noBot ? (
-                                      <UserX className={clsx('h-4 w-4 stroke-2 text-red-500')} />
-                                    ) : (
-                                      <UserCheck className={clsx('h-4 w-4 stroke-2 text-green-500')} />
-                                    )}
-                                    <span className="ml-2 max-sm:hidden">{t('filterBot')}</span>
-                                  </li>
-                                </ul>
-                              </div>
-                            }
-                          />
-                        </button>
-                      </div>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {history?.UrlForwardMeta?.map((m, j) => {
-                    const UA = m.userAgent ? new UAParser(m.userAgent) : undefined;
-                    const ref = m.userAgent ? isbot.find(m.userAgent) : undefined;
-                    return (
-                      <tr key={`meta-${j}`} className="border-b bg-white">
-                        <td className="whitespace-nowrap px-6 py-4 font-medium text-gray-900">
-                          <MapPin className="mr-1 w-4" />
-                          {m.countryCode ? getCountryName(m.countryCode) : t('unknown')}
-                        </td>
-                        <td className="whitespace-nowrap px-6 py-4 font-medium text-gray-900">
-                          {UA ? (
-                            <div>
-                              <p>
-                                Device: {capitalize(UA?.getDevice().type) || t('unknown')} {UA?.getDevice().vendor}{' '}
-                                {UA?.getDevice().model}
-                              </p>
-                              <p>OS: {UA?.getOS().name || t('unknown')}</p>
-                              <p>Browser: {UA?.getBrowser().name || t('unknown')}</p>
-                              {m.userAgent && (
-                                <p
-                                  data-te-toggle="modal"
-                                  data-te-target="#parsedUA"
-                                  className="cursor-pointer text-gray-500 underline hover:text-cyan-500"
-                                  onClick={() => {
-                                    getMoreUA.mutate(m.userAgent!);
-                                  }}>
-                                  {t('advancedView')} <Globe className="mb-2 w-3" />
-                                </p>
-                              )}
-
-                              <p
-                                data-clipboard-text={m.userAgent || t('unknown')}
-                                className="btn-copy cursor-pointer text-gray-500 hover:text-cyan-500 hover:underline"
-                                onClick={() => {
-                                  mixpanel.track(MIXPANEL_EVENT.USER_AGENT_COPY, {
-                                    data: m,
-                                  });
-                                  toast.success('Copied');
-                                }}>
-                                {t('copyRawInfo')} <Copy className="mb-2 w-3" />
-                              </p>
-                            </div>
-                          ) : (
-                            t('unknown')
-                          )}
-                        </td>
-                        <td className="cursor-pointer whitespace-nowrap px-6 py-4 font-medium text-gray-900 hover:text-cyan-500 hover:underline">
-                          <a
-                            href={`https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/${m.ip}`}
-                            target="_blank">
-                            {m.ip || t('unknown')}
-                            <Search className="relative w-3 -translate-y-2 translate-x-[0.8px]" />
-                          </a>
-                        </td>
-                        <td className="whitespace-nowrap px-6 py-4 font-medium text-gray-900">
-                          <Calendar className="mr-1 w-4" />
-                          {m.updatedAt ? date(m.updatedAt).locale(locale).format(DATE_FULL_FORMAT) : t('unknown')}
-                        </td>
-                        <td className="whitespace-nowrap px-6 py-4 text-right font-medium text-gray-900">
-                          {m.fromClientSide ? (
-                            <UserCheck className="mr-1 w-6 stroke-2 text-green-500" />
-                          ) : (
-                            <>
-                              <UserX className="mr-1 w-6 stroke-2 text-red-500" />
-                              {ref && <p>{ref}</p>}
-                            </>
-                          )}
-                        </td>
-                      </tr>
-                    );
-                  })}
-                  {hasMore && (
-                    <tr>
-                      <td colSpan={5}>
-                        <div className="flex justify-center py-4">
-                          <Button text={t('loadMore')} onClick={onLoadMore} loading={statsMore.isLoading} />
-                        </div>
-                      </td>
-                    </tr>
-                  )}
-                  {!hasData && (
-                    <tr>
-                      <td className="h-[200px] text-center text-base" colSpan={5}>
-                        {t('noData')}
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
+          <div className="my-2">
+            {tab === 'geo' && <HistoryByCountry className="my-8" hash={hash} />}
+            {tab === 'table' && (
+              <HistoryTable
+                refetch={refetch}
+                noBot={noBot}
+                setNoBot={setNoBot}
+                history={history}
+                statsMore={statsMore}
+                getMoreUA={getMoreUA}
+              />
+            )}
           </div>
         </>
       )}
diff --git a/src/components/screens/URLTracking/index.tsx b/src/components/screens/URLTracking/index.tsx
index 423591c7..d3240f3d 100644
--- a/src/components/screens/URLTracking/index.tsx
+++ b/src/components/screens/URLTracking/index.tsx
@@ -4,12 +4,16 @@ import { LayoutMain } from 'components/layouts/LayoutMain';
 import { FeedbackLink, FeedbackTemplate } from 'components/sections/FeedbackLink';
 import { URLAdvancedSetting } from 'components/sections/URLAdvancedSetting';
 import mixpanel from 'mixpanel-browser';
+import Head from 'next/head';
 import { useEffect } from 'react';
 import { useBearStore } from 'store';
+import { isProduction } from 'types/constants';
 import { MIXPANEL_EVENT } from 'types/utils';
+import { useTrans } from 'utils/i18next';
 import { TrackingClick } from './TrackingClick';
 
 export const URLTracking = ({ hash }: { hash: string }) => {
+  const { t } = useTrans();
   const { shortenSlice } = useBearStore();
   const [shortenHistory, shortenUrl] = shortenSlice((state) => [state.shortenHistory, state.getShortenUrl()]);
 
@@ -19,6 +23,7 @@ export const URLTracking = ({ hash }: { hash: string }) => {
 
   return (
     <LayoutMain featureTab={false}>
+      <Head>{isProduction && <title>{`${t('trackingLink')} | ${hash}`}</title>}</Head>
       <TrackingClick hash={hash} />
       {shortenHistory?.id && (
         <>
diff --git a/src/controllers/shorten/update.ts b/src/controllers/shorten/update.ts
index 8d36bb3a..93b5bf4d 100644
--- a/src/controllers/shorten/update.ts
+++ b/src/controllers/shorten/update.ts
@@ -1,5 +1,6 @@
 import { shortenCacheService } from '../../services/cache/shorten.service';
 import prisma from '../../services/db/prisma';
+import { shortenService } from '../../services/shorten';
 import { ShortenUrl } from '../../types/shorten';
 import { api, badRequest, errorHandler, successHandler } from '../../utils/axios';
 import { cloudinaryInstance } from '../../utils/cloudinary';
@@ -32,7 +33,7 @@ export const handler = api<ShortenUrl>(
       if (!media) return badRequest(res);
     }
 
-    const history = await prisma.urlShortenerHistory.findUnique({ where: { hash } });
+    const history = await shortenService.getUniqueShortenHistory(hash);
     if (!history) return badRequest(res, "No URL was found on your request. Let's shorten one!");
 
     if (history.password) {
diff --git a/src/controllers/stats/geo.ts b/src/controllers/stats/geo.ts
new file mode 100644
index 00000000..f2e0cea0
--- /dev/null
+++ b/src/controllers/stats/geo.ts
@@ -0,0 +1,38 @@
+import requestIp from 'request-ip';
+import prisma from '../../services/db/prisma';
+import { shortenService } from '../../services/shorten';
+import { HASH } from '../../types/constants';
+import { StatsGeo } from '../../types/stats';
+import { api, badRequest, successHandler } from '../../utils/axios';
+import { validateStatsSchema } from '../../utils/validateMiddleware';
+
+export const handler = api<StatsGeo>(
+  async (req, res) => {
+    const ip = requestIp.getClientIp(req) as string;
+    await validateStatsSchema.parseAsync({
+      query: { ...req.query, ip },
+    });
+    const hash = req.query.h as string;
+    if (!hash || hash.trim().length < HASH.Length) {
+      return badRequest(res, "No URL was found on your request. Let's shorten one!");
+    }
+
+    let history;
+
+    history = await shortenService.getUniqueShortenHistory(hash);
+    if (!history) return badRequest(res, "No URL was found on your request. Let's shorten one!");
+
+    // get stats with hash
+    history = await prisma.urlForwardMeta.groupBy({
+      by: ['countryCode'],
+      where: {
+        urlShortenerHistoryId: history.id,
+      },
+      _count: { countryCode: true },
+      orderBy: { _count: { countryCode: 'desc' } },
+    });
+
+    return successHandler(res, { history });
+  },
+  ['GET'],
+);
diff --git a/src/controllers/stats/index.ts b/src/controllers/stats/index.ts
index 1fa78d6a..22b16089 100644
--- a/src/controllers/stats/index.ts
+++ b/src/controllers/stats/index.ts
@@ -1,6 +1,7 @@
-import { Prisma } from '@prisma/client';
+import { Prisma, UrlShortenerHistory, UrlShortenerRecord } from '@prisma/client';
 import requestIp from 'request-ip';
 import prisma from '../../services/db/prisma';
+import { shortenService } from '../../services/shorten';
 import { LIMIT_RECENT_HISTORY } from '../../types/constants';
 import { Stats } from '../../types/stats';
 import { api, errorHandler, successHandler } from '../../utils/axios';
@@ -19,7 +20,7 @@ export const handler = api<Stats>(
     const queryCursor = req.query.qc ? parseIntSafe(req.query.qc as string) : undefined;
     const notShowBot = (req.query.noBot as string) === 'true';
     let record;
-    let history;
+    let history: (UrlShortenerHistory & { UrlShortenerRecord: UrlShortenerRecord }) | null = null;
     if (!hash) {
       // get recent with ip
       record = await prisma.urlShortenerRecord.findFirst({
@@ -37,22 +38,18 @@ export const handler = api<Stats>(
       return successHandler(res, { record: record });
     }
     // get stats with hash
-    history = await prisma.urlShortenerHistory.findUnique({
-      where: {
-        hash,
-      },
-      include: {
-        UrlForwardMeta: {
-          ...(notShowBot ? { where: { fromClientSide: true } } : null),
-          orderBy: {
-            updatedAt: Prisma.SortOrder.desc,
-          },
-          ...withQueryCursor(queryCursor),
+    history = (await shortenService.getUniqueShortenHistory(hash, {
+      UrlForwardMeta: {
+        ...(notShowBot ? { where: { fromClientSide: true } } : null),
+        orderBy: {
+          updatedAt: Prisma.SortOrder.desc,
         },
-        _count: true,
-        UrlShortenerRecord: true,
+        ...withQueryCursor(queryCursor),
       },
-    });
+      _count: true,
+      UrlShortenerRecord: true,
+    })) as any;
+
     if (history && history?.password) {
       let valid = false;
       const token = req.headers['X-Platform-Auth'.toLowerCase()] as string;
@@ -70,3 +67,5 @@ export const handler = api<Stats>(
   },
   ['GET'],
 );
+
+export * as geo from './geo';
diff --git a/src/pages/api/stats/geo.ts b/src/pages/api/stats/geo.ts
new file mode 100644
index 00000000..e71274fc
--- /dev/null
+++ b/src/pages/api/stats/geo.ts
@@ -0,0 +1,3 @@
+import { stats } from 'controllers';
+
+export default stats.geo.handler;
diff --git a/src/pages/v/[...hash].tsx b/src/pages/v/[...hash].tsx
index 3af45541..ab119248 100644
--- a/src/pages/v/[...hash].tsx
+++ b/src/pages/v/[...hash].tsx
@@ -1,10 +1,13 @@
-import { URLTracking } from 'components/screens/URLTracking';
 import { GetServerSidePropsContext } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import dynamic from 'next/dynamic';
 import PageNotFound from 'pages/404';
 import { Locale } from 'types/locale';
 import { pgFullDomain } from 'utils/guards';
 
+const URLTracking = dynamic(() => import('../../components/screens/URLTracking').then((c) => c.URLTracking), {
+  ssr: false,
+});
 const Component = (props: any) => (props.errors ? <PageNotFound /> : <URLTracking hash={props.hash} />);
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
diff --git a/src/requests/index.ts b/src/requests/index.ts
index e047a98b..cb058332 100644
--- a/src/requests/index.ts
+++ b/src/requests/index.ts
@@ -4,7 +4,7 @@ import { Forward } from 'types/forward';
 import { Locale } from 'types/locale';
 import { NoteRs } from 'types/note';
 import { ShortenUrl } from 'types/shorten';
-import { Stats } from 'types/stats';
+import { Stats, StatsGeo } from 'types/stats';
 import {
   ForwardSchema,
   NoteSchema,
@@ -91,6 +91,15 @@ export const getStats = async ({
   return data as Stats;
 };
 
+export const getStatsGeo = async ({ hash }: { hash: string }) => {
+  const q = stringify({
+    h: hash,
+  });
+  const rs = await API.get(`/api/stats/geo?${q}`);
+  const data = rs.data;
+  return data as StatsGeo;
+};
+
 export const setPasswordRequest = async (payload: PasswordSchema) => {
   const rs = await API.post(`/api/password`, payload);
 };
diff --git a/src/services/shorten/index.ts b/src/services/shorten/index.ts
index fb46b3df..965ad454 100644
--- a/src/services/shorten/index.ts
+++ b/src/services/shorten/index.ts
@@ -3,6 +3,9 @@ import { decryptS } from '../../utils/crypto';
 import prisma from '../db/prisma';
 
 export class ShortenService {
+  async getUniqueShortenHistory(hash: string, include?: Prisma.UrlShortenerHistoryInclude) {
+    return prisma.urlShortenerHistory.findUnique({ where: { hash }, include });
+  }
   async getShortenHistory(hash: string, args?: Prisma.UrlShortenerHistoryFindFirstArgs) {
     return prisma.urlShortenerHistory.findFirst({
       where: {
diff --git a/src/types/stats.ts b/src/types/stats.ts
index 2d675d1c..fe1c5f37 100644
--- a/src/types/stats.ts
+++ b/src/types/stats.ts
@@ -7,3 +7,14 @@ export type Stats = Response & {
   record?: (UrlShortenerRecord & { history?: { url: string; hash: string }[] }) | null;
   history?: UrlHistoryWithMeta[] | null;
 };
+
+export interface HistoryGeoItem {
+  _count: {
+    countryCode: number;
+  };
+  countryCode: string | null;
+}
+
+export type StatsGeo = Response & {
+  history?: HistoryGeoItem[];
+};
diff --git a/src/utils/country.ts b/src/utils/country.ts
index 386e9ad8..942d3b8b 100644
--- a/src/utils/country.ts
+++ b/src/utils/country.ts
@@ -1,10 +1,13 @@
-const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
-export const getCountryName = (code: string) => {
+import { Locale } from 'types/locale';
+
+export const getCountryName = (code: string, locale: Locale = Locale.English) => {
+  const regionNames = new Intl.DisplayNames([locale], { type: 'region' });
   let countryName: string | undefined = '';
   try {
     countryName = regionNames.of(code.toUpperCase());
   } catch (error) {
     console.error('GET COUNTRY NAME ERROR', error);
+    return '';
   }
   return countryName;
 };
diff --git a/src/utils/dom.ts b/src/utils/dom.tsx
similarity index 61%
rename from src/utils/dom.ts
rename to src/utils/dom.tsx
index ca358daa..31452473 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.tsx
@@ -1,4 +1,7 @@
 import { load } from 'cheerio';
+import { useEffect, useState } from 'react';
+import { Window } from '../types/constants';
+import { debounce } from './data';
 
 export function extractBaseUrl(url: string): string {
   try {
@@ -35,3 +38,23 @@ export function extractOgMetaTags(htmlString: string, baseUrl?: string): Record<
 
   return ogMetaTags;
 }
+
+export const useDimensionWindow = () => {
+  const [width, setWidth] = useState(Window().innerWidth);
+  const [height, setHeight] = useState(Window().innerHeight);
+
+  const debouncedWidth = debounce(setWidth, 200);
+  const debouncedHeight = debounce(setHeight, 200);
+
+  useEffect(() => {
+    const handleResize = () => {
+      debouncedWidth(Window().innerWidth);
+      debouncedHeight(Window().innerHeight);
+    };
+    Window().addEventListener('resize', handleResize);
+    return () => {
+      Window().removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return { width, height };
+};
diff --git a/src/utils/requests.ts b/src/utils/requests.ts
index ee16ca46..e5587b0e 100644
--- a/src/utils/requests.ts
+++ b/src/utils/requests.ts
@@ -18,6 +18,7 @@ export const QueryKey = {
   FORWARD: 'FORWARD',
   SET_PASSWORD: 'SET_PASSWORD',
   STATS: 'STATS',
+  STATS_GEO: 'STATS_GEO',
   STATS_MORE: 'STATS_MORE',
   RECORD: 'RECORD',
   SHORTEN: 'SHORTEN',