diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimePage.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimePage.tsx
index 6220c6957..d9933d0e6 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimePage.tsx
@@ -50,7 +50,7 @@ export function RealtimePage({ websiteId }: { websiteId: string }) {
           <RealtimeCountries data={countries} />
         </Panel>
         <Panel gridColumn={isMobile ? null : 'span 2'} padding="0">
-          <WorldMap data={countries} />
+          <WorldMap data={countries} allowFilter={false} />
         </Panel>
       </GridRow>
     </Grid>
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index 3c8fadb80..a52af6aed 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -6,6 +6,7 @@ import {
   useCountryNames,
   useLocale,
   useMessages,
+  useNavigation,
   useWebsiteMetricsQuery,
 } from '@/components/hooks';
 import { getThemeColors } from '@/lib/colors';
@@ -16,15 +17,17 @@ import { formatLongNumber } from '@/lib/format';
 export interface WorldMapProps extends ColumnProps {
   websiteId?: string;
   data?: any[];
+  allowFilter?: boolean;
 }
 
-export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
+export function WorldMap({ websiteId, data, allowFilter = true, ...props }: WorldMapProps) {
   const [tooltip, setTooltipPopup] = useState();
   const { theme } = useTheme();
   const { colors } = getThemeColors(theme);
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
   const { countryNames } = useCountryNames(locale);
+  const { router, updateParams, query } = useNavigation();
   const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
   const unknownLabel = formatMessage(labels.unknown);
 
@@ -37,10 +40,19 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
     [data, mapData],
   );
 
+  const isSelected = (code: string) => allowFilter && query.country === `eq.${code}`;
+
+  const isClickable = (code: string) =>
+    allowFilter && code && code !== 'AQ' && metrics?.some(({ x }) => x === code);
+
   const getFillColor = (code: string) => {
     if (code === 'AQ') return;
     const country = metrics?.find(({ x }) => x === code);
 
+    if (isSelected(code)) {
+      return colors.map.baseColor;
+    }
+
     if (!country) {
       return colors.map.fillColor;
     }
@@ -64,6 +76,12 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
     );
   };
 
+  const handleClick = (code: string) => {
+    if (!isClickable(code)) return;
+
+    router.replace(updateParams({ country: isSelected(code) ? undefined : `eq.${code}` }));
+  };
+
   return (
     <Column
       {...props}
@@ -86,12 +104,17 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
                     stroke={colors.map.strokeColor}
                     opacity={getOpacity(code)}
                     style={{
-                      default: { outline: 'none' },
-                      hover: { outline: 'none', fill: colors.map.hoverColor },
+                      default: { outline: 'none', cursor: isClickable(code) ? 'pointer' : null },
+                      hover: {
+                        outline: 'none',
+                        fill: colors.map.hoverColor,
+                        cursor: isClickable(code) ? 'pointer' : null,
+                      },
                       pressed: { outline: 'none' },
                     }}
                     onMouseOver={() => handleHover(code)}
                     onMouseOut={() => setTooltipPopup(null)}
+                    onClick={() => handleClick(code)}
                   />
                 );
               });