diff --git a/src/components/AboutCommunity.svelte b/src/components/AboutCommunity.svelte
index f7ca35e6..4c5ea02a 100644
--- a/src/components/AboutCommunity.svelte
+++ b/src/components/AboutCommunity.svelte
@@ -18,7 +18,7 @@
 		alt="avatar"
 		class="h-24 w-24 rounded-full object-cover"
 		on:error={function () {
-			this.src = '/images/communities/bitcoin.svg';
+			this.src = '/images/bitcoin.svg';
 		}}
 	/>
 </a>
diff --git a/src/components/AboutIntegration.svelte b/src/components/AboutIntegration.svelte
index d97a5bf8..c5fcc623 100644
--- a/src/components/AboutIntegration.svelte
+++ b/src/components/AboutIntegration.svelte
@@ -16,7 +16,7 @@
 			alt="logo"
 			class="mx-auto h-24 w-24 rounded-full object-cover"
 			on:error={function () {
-				this.src = '/images/communities/bitcoin.svg';
+				this.src = '/images/bitcoin.svg';
 			}}
 		/>
 
diff --git a/src/components/AreaLeaderboard.svelte b/src/components/AreaLeaderboard.svelte
new file mode 100644
index 00000000..c5898c47
--- /dev/null
+++ b/src/components/AreaLeaderboard.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { AreaLeaderboardItem, AreaLeaderboardSkeleton, GradeTable, TopButton } from '$lib/comp';
+	import { areaError, areas, reportError, reports, syncStatus } from '$lib/store';
+	import type { Area, AreaType, LeaderboardArea, Report } from '$lib/types';
+	import { errToast, getGrade, validateContinents } from '$lib/utils';
+	import tippy from 'tippy.js';
+
+	export let type: AreaType;
+
+	// alert for area errors
+	$: $areaError && errToast($areaError);
+
+	// alert for report errors
+	$: $reportError && errToast($reportError);
+
+	$: areasFiltered =
+		$reports && $reports.length
+			? $areas.filter((area) => {
+					if (type === 'community') {
+						return (
+							area.tags.type === 'community' &&
+							area.tags.geo_json &&
+							area.tags.name &&
+							area.tags['icon:square'] &&
+							area.tags.continent &&
+							Object.keys(area.tags).find((key) => key.includes('contact')) &&
+							$reports.find((report) => report.area_id === area.id)
+						);
+					} else {
+						return (
+							area.tags.type === 'country' &&
+							area.id.length === 2 &&
+							area.tags.geo_json &&
+							area.tags.name &&
+							area.tags.continent &&
+							validateContinents(area.tags.continent)
+						);
+					}
+				})
+			: [];
+	$: areaReports =
+		areasFiltered && areasFiltered.length
+			? $reports
+					.filter((report) => areasFiltered.find((area) => area.id === report.area_id))
+					.sort((a, b) => Date.parse(b['created_at']) - Date.parse(a['created_at']))
+			: [];
+	let leaderboard: LeaderboardArea[];
+	let loading: boolean;
+
+	let upToDateTooltip: HTMLButtonElement;
+	let upToDateTooltipMobile: HTMLButtonElement;
+	let gradeTooltip: HTMLButtonElement;
+	let gradeTooltipMobile: HTMLButtonElement;
+
+	const score = (report: Report): number => {
+		return Math.max(report.tags.total_elements - report.tags.outdated_elements * 5, 0);
+	};
+
+	const populateLeaderboard = (status: boolean, areasFiltered: Area[], areasReports: Report[]) => {
+		if (areasFiltered.length && areasReports.length && !status) {
+			loading = true;
+			leaderboard = [];
+
+			areasFiltered.forEach((area) => {
+				let areaReport = areasReports.find((report) => report.area_id === area.id);
+
+				if (areaReport) {
+					const grade = getGrade(areaReport.tags.up_to_date_percent);
+
+					leaderboard.push({ ...area, report: areaReport, grade });
+				}
+			});
+
+			leaderboard.sort((a, b) => {
+				const aScore = score(a.report);
+				const bScore = score(b.report);
+
+				if (bScore === aScore) {
+					return b.report.tags.total_elements - a.report.tags.total_elements;
+				} else {
+					return bScore - aScore;
+				}
+			});
+
+			leaderboard = leaderboard;
+			loading = false;
+		}
+	};
+
+	$: populateLeaderboard($syncStatus, areasFiltered, areaReports);
+
+	let leaderboardCount = 50;
+	$: leaderboardPaginated =
+		leaderboard && leaderboard.length && !loading ? leaderboard.slice(0, leaderboardCount) : [];
+
+	const headings = ['Position', 'Name', 'Up-To-Date', 'Total Locations', 'Grade'];
+
+	const setTooltips = () => {
+		tippy([upToDateTooltip, upToDateTooltipMobile], {
+			content: `Locations that have been verified within one year.`,
+			allowHTML: true
+		});
+
+		tippy([gradeTooltip, gradeTooltipMobile], {
+			content: GradeTable,
+			allowHTML: true
+		});
+	};
+
+	$: upToDateTooltip &&
+		upToDateTooltipMobile &&
+		gradeTooltip &&
+		gradeTooltipMobile &&
+		setTooltips();
+</script>
+
+<section id="leaderboard" class="dark:lg:rounded dark:lg:bg-white/10 dark:lg:py-8">
+	<div class="mb-5 hidden grid-cols-5 text-center lg:grid">
+		{#each headings as heading}
+			<h3 class="text-lg font-semibold text-primary dark:text-white">
+				{heading}
+				{#if heading === 'Up-To-Date'}
+					<button bind:this={upToDateTooltip}>
+						<i class="fa-solid fa-circle-info text-sm" />
+					</button>
+				{:else if heading === 'Grade'}
+					<button bind:this={gradeTooltip}>
+						<i class="fa-solid fa-circle-info text-sm" />
+					</button>
+				{/if}
+			</h3>
+		{/each}
+	</div>
+	<div
+		class="mb-5 space-y-1 text-center text-lg font-semibold text-primary dark:text-white lg:hidden"
+	>
+		<h3>
+			Up-To-Date <button bind:this={upToDateTooltipMobile}>
+				<i class="fa-solid fa-circle-info" />
+			</button>
+		</h3>
+		<h3>
+			Grade <button bind:this={gradeTooltipMobile}>
+				<i class="fa-solid fa-circle-info" />
+			</button>
+		</h3>
+	</div>
+
+	<div>
+		{#if leaderboard && leaderboard.length && !loading}
+			{#each leaderboardPaginated as item, index}
+				<AreaLeaderboardItem
+					{type}
+					position={index + 1}
+					avatar={type === 'community'
+						? item.tags['icon:square']
+						: `https://static.btcmap.org/images/countries/${item.id}.svg`}
+					name={item.tags.name}
+					sponsor={item.tags.sponsor ? true : false}
+					id={item.id}
+					upToDate={item.report.tags.up_to_date_percent}
+					total={item.report.tags.total_elements}
+					grade={item.grade}
+				/>
+			{/each}
+
+			{#if leaderboardPaginated.length !== leaderboard.length}
+				<button
+					class="!my-5 mx-auto block text-xl font-semibold text-link transition-colors hover:text-hover"
+					on:click={() => (leaderboardCount = leaderboardCount + 50)}>Load More</button
+				>
+			{/if}
+		{:else}
+			<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+			{#each Array(50) as skeleton}
+				<AreaLeaderboardSkeleton />
+			{/each}
+		{/if}
+	</div>
+
+	<p class="text-center text-sm text-body dark:text-white">
+		*Data is weighted by Up-To-Date locations and then sorted by Total Locations.
+		<br />
+		*Leaderboard updated once every 24 hours.
+	</p>
+
+	<div class="mt-10 flex justify-center">
+		<TopButton />
+	</div>
+</section>
diff --git a/src/components/CommunityLeaderboardItem.svelte b/src/components/AreaLeaderboardItem.svelte
similarity index 89%
rename from src/components/CommunityLeaderboardItem.svelte
rename to src/components/AreaLeaderboardItem.svelte
index 7d157bca..4bba6d51 100644
--- a/src/components/CommunityLeaderboardItem.svelte
+++ b/src/components/AreaLeaderboardItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	export let type: AreaType;
 	export let position: number;
 	export let avatar: string;
 	export let name: string;
@@ -9,7 +10,7 @@
 	export let grade: Grade;
 
 	import { SponsorBadge } from '$lib/comp';
-	import type { Grade } from '$lib/types';
+	import type { AreaType, Grade } from '$lib/types';
 
 	$: stats = [
 		{ stat: upToDate, title: 'Up-To-Date' },
@@ -39,16 +40,18 @@
 
 	<div class="my-5 lg:my-0">
 		<img
-			src={`https://btcmap.org/.netlify/images?url=${avatar}&fit=cover&w=256&h=256`}
+			src={type === 'community'
+				? `https://btcmap.org/.netlify/images?url=${avatar}&fit=cover&w=256&h=256`
+				: avatar}
 			alt="avatar"
 			class="mx-auto mb-2 h-20 w-20 rounded-full object-cover lg:h-14 lg:w-14"
 			on:error={function () {
-				this.src = '/images/communities/bitcoin.svg';
+				this.src = '/images/bitcoin.svg';
 			}}
 		/>
 
 		<a
-			href="/community/{id}"
+			href="/{type}/{id}"
 			class="hover:text-hover {name.match('([^ ]{21})')
 				? 'break-all'
 				: ''} mb-1 inline-block transition-colors">{name}</a
diff --git a/src/components/CommunityLeaderboardSkeleton.svelte b/src/components/AreaLeaderboardSkeleton.svelte
similarity index 100%
rename from src/components/CommunityLeaderboardSkeleton.svelte
rename to src/components/AreaLeaderboardSkeleton.svelte
diff --git a/src/components/AreaPage.svelte b/src/components/AreaPage.svelte
new file mode 100644
index 00000000..e5f63566
--- /dev/null
+++ b/src/components/AreaPage.svelte
@@ -0,0 +1,1419 @@
+<script lang="ts">
+	export let type: AreaType;
+	export let data: AreaPageProps;
+
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import {
+		GradeTable,
+		InfoTooltip,
+		IssuesTable,
+		LatestTagger,
+		MapLoadingEmbed,
+		OpenTicket,
+		OrgBadge,
+		ProfileStat,
+		Socials,
+		SponsorBadge,
+		TaggerSkeleton,
+		Tip,
+		TopButton
+	} from '$lib/comp';
+	import {
+		attribution,
+		calcVerifiedDate,
+		changeDefaultIcons,
+		generateIcon,
+		generateMarker,
+		geolocate,
+		latCalc,
+		layers,
+		longCalc,
+		toggleMapButtons,
+		verifiedArr
+	} from '$lib/map/setup';
+	import {
+		areaError,
+		areas,
+		elementError,
+		elements,
+		eventError,
+		events,
+		reportError,
+		reports,
+		theme,
+		userError,
+		users
+	} from '$lib/store';
+	import {
+		TipType,
+		type ActivityEvent,
+		type AreaPageProps,
+		type AreaType,
+		type BaseMaps,
+		type Continents,
+		type DomEventType,
+		type Element,
+		type Event,
+		type Grade,
+		type Issues,
+		type Leaflet,
+		type User
+	} from '$lib/types.js';
+	import {
+		detectTheme,
+		errToast,
+		formatElementID,
+		getGrade,
+		getIssues,
+		updateChartThemes,
+		validateContinents
+	} from '$lib/utils';
+	// @ts-expect-error
+	import rewind from '@mapbox/geojson-rewind';
+	import Chart from 'chart.js/auto';
+	import { geoContains } from 'd3-geo';
+	import type { Map } from 'leaflet';
+	import { onDestroy, onMount } from 'svelte';
+	import tippy from 'tippy.js';
+
+	// alert for user errors
+	$: $userError && errToast($userError);
+	// alert for event errors
+	$: $eventError && errToast($eventError);
+	// alert for element errors
+	$: $elementError && errToast($elementError);
+	// alert for area errors
+	$: $areaError && errToast($areaError);
+	// alert for report errors
+	$: $reportError && errToast($reportError);
+
+	let initialRenderComplete = false;
+	let dataInitialized = false;
+
+	const initializeData = () => {
+		if (dataInitialized) return;
+
+		const areaFound = $areas.find((area) => {
+			if (type === 'community') {
+				return (
+					area.id == data.id &&
+					area.tags.type === 'community' &&
+					area.tags.geo_json &&
+					area.tags.name &&
+					area.tags['icon:square'] &&
+					area.tags.continent &&
+					Object.keys(area.tags).find((key) => key.includes('contact'))
+				);
+			} else {
+				return (
+					area.id == data.id &&
+					area.tags.type === 'country' &&
+					area.id.length === 2 &&
+					area.tags.geo_json &&
+					area.tags.name &&
+					area.tags.continent &&
+					validateContinents(area.tags.continent)
+				);
+			}
+		});
+
+		if (!areaFound) {
+			console.log(`Could not find ${type}, please try again or contact BTC Map.`);
+			goto('/404');
+			return;
+		}
+
+		const areaReports = $reports
+			.filter((report) => report.area_id === data.id)
+			.sort((a, b) => Date.parse(b['created_at']) - Date.parse(a['created_at']));
+
+		if (!areaReports.length) {
+			console.log(
+				`Could not find any ${type} reports, please try again tomorrow or contact BTC Map.`
+			);
+			goto('/404');
+			return;
+		}
+
+		const area = areaFound.tags;
+
+		avatar =
+			type === 'community'
+				? `https://btcmap.org/.netlify/images?url=${area['icon:square']}&fit=cover&w=256&h=256`
+				: `https://static.btcmap.org/images/countries/${areaFound.id}.svg`;
+		continent = area.continent;
+
+		if (type === 'community') {
+			org = area.organization;
+			sponsor = area.sponsor;
+			website = area['contact:website'];
+			email = area['contact:email'];
+			nostr = area['contact:nostr'];
+			twitter = area['contact:twitter'];
+			secondTwitter = area['contact:second_twitter'];
+			meetup = area['contact:meetup'];
+			eventbrite = area['contact:eventbrite'];
+			telegram = area['contact:telegram'];
+			discord = area['contact:discord'];
+			youtube = area['contact:youtube'];
+			github = area['contact:github'];
+			reddit = area['contact:reddit'];
+			instagram = area['contact:instagram'];
+			whatsapp = area['contact:whatsapp'];
+			facebook = area['contact:facebook'];
+			linkedin = area['contact:linkedin'];
+			rss = area['contact:rss'];
+			signal = area['contact:signal'];
+
+			if (area['tips:lightning_address']) {
+				lightning = {
+					destination: area['tips:lightning_address'],
+					type: TipType.Address
+				};
+			} else if (area['tips:url']) {
+				lightning = { destination: area['tips:url'], type: TipType.Url };
+			}
+		}
+
+		const rewoundPoly = rewind(area.geo_json, true);
+
+		// filter elements within area
+		const filteredElements: Element[] = $elements.filter((element) => {
+			let lat = latCalc(element['osm_json']);
+			let long = longCalc(element['osm_json']);
+
+			if (geoContains(rewoundPoly, [long, lat])) {
+				return true;
+			} else {
+				return false;
+			}
+		});
+
+		const areaEvents = $events.filter((event) =>
+			filteredElements.find((element) => element.id === event.element_id)
+		);
+
+		areaEvents.sort((a, b) => Date.parse(b['created_at']) - Date.parse(a['created_at']));
+
+		const findUser = (tagger: Event) => {
+			let foundUser = $users.find((user) => user.id == tagger['user_id']);
+
+			if (foundUser) {
+				if (!taggers.find((tagger) => tagger.id === foundUser?.id)) {
+					taggers.push(foundUser);
+				}
+
+				return foundUser;
+			} else {
+				return undefined;
+			}
+		};
+
+		areaEvents.forEach((event) => {
+			let elementMatch = filteredElements.find((element) => element.id === event['element_id']);
+
+			let location = elementMatch?.['osm_json'].tags?.name || undefined;
+
+			let tagger = findUser(event);
+
+			eventElements.push({
+				...event,
+				location: location || formatElementID(event['element_id']),
+				merchantId: event['element_id'],
+				tagger
+			});
+		});
+
+		eventElements = eventElements;
+		taggers = taggers;
+
+		const populateMap = () => {
+			// add map
+			map = leaflet.map(mapElement, { attributionControl: false });
+
+			// add tiles and basemaps
+			baseMaps = layers(leaflet, map);
+
+			// change broken marker image path in prod
+			leaflet.Icon.Default.prototype.options.imagePath = '/icons/';
+
+			// add OSM attribution
+			attribution(leaflet, map);
+
+			// create marker cluster groups
+			/* eslint-disable no-undef */
+			// @ts-expect-error
+			let markers = L.markerClusterGroup();
+			/* eslint-enable no-undef */
+			let upToDateLayer = leaflet.featureGroup.subGroup(markers);
+			let outdatedLayer = leaflet.featureGroup.subGroup(markers);
+			let legacyLayer = leaflet.featureGroup.subGroup(markers);
+
+			let overlayMaps = {
+				'Up-To-Date': upToDateLayer,
+				Outdated: outdatedLayer,
+				Legacy: legacyLayer
+			};
+
+			leaflet.control.layers(baseMaps, overlayMaps).addTo(map);
+
+			// add locate button to map
+			geolocate(leaflet, map);
+
+			// change default icons
+			changeDefaultIcons(true, leaflet, mapElement, DomEvent);
+
+			// get date from 1 year ago to add verified check if survey is current
+			let verifiedDate = calcVerifiedDate();
+
+			// add area poly to map
+			if (area.geo_json) {
+				leaflet.geoJSON(area.geo_json, { style: { fill: false } }).addTo(map);
+			}
+
+			// add elements to map
+			filteredElements.forEach((element) => {
+				let icon = element.tags['icon:android'];
+				let payment = element.tags['payment:uri']
+					? { type: 'uri', url: element.tags['payment:uri'] }
+					: element.tags['payment:pouch']
+						? { type: 'pouch', username: element.tags['payment:pouch'] }
+						: element.tags['payment:coinos']
+							? { type: 'coinos', username: element.tags['payment:coinos'] }
+							: undefined;
+				let boosted =
+					element.tags['boost:expires'] && Date.parse(element.tags['boost:expires']) > Date.now()
+						? element.tags['boost:expires']
+						: undefined;
+
+				const elementOSM = element['osm_json'];
+
+				const lat = latCalc(elementOSM);
+				const long = longCalc(elementOSM);
+
+				let divIcon = generateIcon(leaflet, icon, boosted ? true : false);
+
+				let marker = generateMarker(
+					lat,
+					long,
+					divIcon,
+					elementOSM,
+					payment,
+					leaflet,
+					verifiedDate,
+					true,
+					boosted
+				);
+
+				let verified = verifiedArr(elementOSM);
+
+				if (verified.length && Date.parse(verified[0]) > verifiedDate) {
+					upToDateLayer.addLayer(marker);
+
+					if (upToDate === undefined) {
+						upToDate = 1;
+					} else {
+						upToDate++;
+					}
+				} else {
+					outdatedLayer.addLayer(marker);
+
+					if (outdated === undefined) {
+						outdated = 1;
+					} else {
+						outdated++;
+					}
+				}
+
+				if (elementOSM.tags && elementOSM.tags['payment:bitcoin']) {
+					legacyLayer.addLayer(marker);
+
+					if (legacy === undefined) {
+						legacy = 1;
+					} else {
+						legacy++;
+					}
+				}
+
+				if (total === undefined) {
+					total = 1;
+				} else {
+					total++;
+				}
+			});
+
+			map.addLayer(markers);
+			map.addLayer(upToDateLayer);
+			map.addLayer(outdatedLayer);
+			map.addLayer(legacyLayer);
+
+			map.fitBounds(leaflet.geoJSON(area.geo_json).getBounds());
+
+			mapLoaded = true;
+		};
+
+		populateMap();
+
+		if (!upToDate) {
+			upToDate = 0;
+		}
+
+		if (!outdated) {
+			outdated = 0;
+		}
+
+		if (!legacy) {
+			legacy = 0;
+		}
+
+		if (!total) {
+			total = 0;
+		}
+
+		upToDatePercent = upToDate ? (upToDate / (total / 100)).toFixed(0) : '0';
+
+		outdatedPercent = outdated ? (outdated / (total / 100)).toFixed(0) : '0';
+
+		legacyPercent = legacy ? (legacy / (total / 100)).toFixed(0) : '0';
+
+		grade = getGrade(Number(upToDatePercent));
+
+		issues = getIssues(filteredElements);
+
+		const populateCharts = () => {
+			const chartsReports = [...areaReports].sort(
+				(a, b) => Date.parse(a['created_at']) - Date.parse(b['created_at'])
+			);
+
+			const today = new Date();
+			const latestReport = chartsReports[chartsReports.length - 1];
+			const latestReportDate = new Date(latestReport.created_at);
+			const reportIsCurrent =
+				today.getDate() === latestReportDate.getDate() &&
+				today.getMonth() === latestReportDate.getMonth() &&
+				today.getFullYear() === latestReportDate.getFullYear();
+
+			if (!reportIsCurrent) {
+				chartsReports.push({
+					...latestReport,
+					id: latestReport.id + 1,
+					date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,
+					created_at: today.toISOString(),
+					updated_at: today.toISOString()
+				});
+			}
+
+			const theme = detectTheme();
+
+			updatedChart = new Chart(updatedChartCanvas, {
+				type: 'pie',
+				data: {
+					labels: ['Up-To-Date', 'Outdated'],
+					datasets: [
+						{
+							label: 'Locations',
+							data: [upToDate, outdated],
+							backgroundColor: ['rgb(16, 183, 145)', 'rgb(235, 87, 87)'],
+							hoverOffset: 4
+						}
+					]
+				},
+				options: {
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							labels: {
+								font: {
+									weight: 600
+								}
+							}
+						}
+					}
+				}
+			});
+
+			let percents = chartsReports.filter((report) => report.tags.up_to_date_percent);
+
+			upToDateChart = new Chart(upToDateChartCanvas, {
+				type: 'line',
+				data: {
+					labels: percents.map(({ date }) => date),
+					datasets: [
+						{
+							label: 'Up-To-Date Percent',
+							data: percents.map(({ tags: { up_to_date_percent } }) => up_to_date_percent),
+							fill: {
+								target: 'origin',
+								above: 'rgba(11, 144, 114, 0.2)'
+							},
+							borderColor: 'rgb(11, 144, 114)',
+							tension: 0.1,
+							pointStyle: false
+						}
+					]
+				},
+				options: {
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							labels: {
+								font: {
+									weight: 600
+								}
+							}
+						}
+					},
+					scales: {
+						x: {
+							ticks: {
+								maxTicksLimit: 5,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						},
+						y: {
+							min: 0,
+							max: 100,
+							ticks: {
+								precision: 0,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						}
+					},
+					interaction: {
+						intersect: false
+					}
+				}
+			});
+
+			totalChart = new Chart(totalChartCanvas, {
+				type: 'line',
+				data: {
+					labels: chartsReports.map(({ date }) => date),
+					datasets: [
+						{
+							label: 'Total Locations',
+							data: chartsReports.map(({ tags: { total_elements } }) => total_elements),
+							fill: {
+								target: 'origin',
+								above: 'rgba(0, 153, 175, 0.2)'
+							},
+							borderColor: 'rgb(0, 153, 175)',
+							tension: 0.1,
+							pointStyle: false
+						}
+					]
+				},
+				options: {
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							labels: {
+								font: {
+									weight: 600
+								}
+							}
+						}
+					},
+					scales: {
+						x: {
+							ticks: {
+								maxTicksLimit: 5,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						},
+						y: {
+							min: 0,
+							grace: '5%',
+							ticks: {
+								precision: 0,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						}
+					},
+					interaction: {
+						intersect: false
+					}
+				}
+			});
+
+			legacyChart = new Chart(legacyChartCanvas, {
+				type: 'line',
+				data: {
+					labels: chartsReports.map(({ date }) => date),
+					datasets: [
+						{
+							label: 'Legacy Locations',
+							data: chartsReports.map(({ tags: { legacy_elements } }) => legacy_elements),
+							fill: {
+								target: 'origin',
+								above: 'rgba(235, 87, 87, 0.2)'
+							},
+							borderColor: 'rgb(235, 87, 87)',
+							tension: 0.1,
+							pointStyle: false
+						}
+					]
+				},
+				options: {
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							labels: {
+								font: {
+									weight: 600
+								}
+							}
+						}
+					},
+					scales: {
+						x: {
+							ticks: {
+								maxTicksLimit: 5,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						},
+						y: {
+							min: 0,
+							grace: '5%',
+							ticks: {
+								precision: 0,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						}
+					},
+					interaction: {
+						intersect: false
+					}
+				}
+			});
+
+			paymentMethodChart = new Chart(paymentMethodChartCanvas, {
+				type: 'line',
+				data: {
+					labels: chartsReports.map(({ date }) => date),
+					datasets: [
+						{
+							label: 'On-chain',
+							data: chartsReports.map(
+								({ tags: { total_elements_onchain } }) => total_elements_onchain
+							),
+							fill: false,
+							borderColor: 'rgb(247, 147, 26)',
+							tension: 0.1,
+							pointStyle: false
+						},
+						{
+							label: 'Lightning',
+							data: chartsReports.map(
+								({ tags: { total_elements_lightning } }) => total_elements_lightning
+							),
+							fill: false,
+							borderColor: 'rgb(249, 193, 50)',
+							tension: 0.1,
+							pointStyle: false
+						},
+						{
+							label: 'Contactless',
+							data: chartsReports.map(
+								({ tags: { total_elements_lightning_contactless } }) =>
+									total_elements_lightning_contactless
+							),
+							fill: false,
+							borderColor: 'rgb(102, 16, 242)',
+							tension: 0.1,
+							pointStyle: false
+						}
+					]
+				},
+				options: {
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							labels: {
+								font: {
+									weight: 600
+								}
+							}
+						}
+					},
+					scales: {
+						x: {
+							ticks: {
+								maxTicksLimit: 5,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						},
+						y: {
+							min: 0,
+							grace: '5%',
+							ticks: {
+								precision: 0,
+								font: {
+									weight: 600
+								}
+							},
+							grid: {
+								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
+							}
+						}
+					},
+					interaction: {
+						intersect: false
+					}
+				}
+			});
+
+			chartsLoading = false;
+		};
+
+		populateCharts();
+
+		dataInitialized = true;
+	};
+
+	$: $users &&
+		$users.length &&
+		$events &&
+		$events.length &&
+		$elements &&
+		$elements.length &&
+		$areas &&
+		$areas.length &&
+		$reports &&
+		$reports.length &&
+		initialRenderComplete &&
+		!dataInitialized &&
+		initializeData();
+
+	const ticketTypes = ['Add', 'Verify'];
+	let showType = 'Add';
+
+	const tickets = data.tickets;
+	const ticketError = tickets === 'error' ? true : false;
+
+	$: ticketError && errToast('Could not load open tickets, please try again or contact BTC Map.');
+
+	const add =
+		tickets && tickets.length && !ticketError
+			? // @ts-expect-error
+				tickets.filter((issue: any) =>
+					issue.labels.find((label: any) => label.name === 'location-submission')
+				)
+			: [];
+	const verify =
+		tickets && tickets.length && !ticketError
+			? // @ts-expect-error
+				tickets.filter((issue: any) =>
+					issue.labels.find((label: any) => label.name === 'verify-submission')
+				)
+			: [];
+
+	const totalTickets = add.length + verify.length;
+
+	const getContinentIcon = (continent: Continents) => {
+		switch (continent) {
+			case 'africa':
+			case 'Africa':
+				return 'africa';
+
+			case 'asia':
+			case 'Asia':
+				return 'asia';
+
+			case 'europe':
+			case 'Europe':
+				return 'europe';
+
+			case 'north-america':
+			case 'North America':
+				return 'americas';
+
+			case 'oceania':
+			case 'Oceania':
+				return 'oceania';
+
+			case 'south-america':
+			case 'South America':
+				return 'americas';
+		}
+	};
+
+	let avatar: string;
+	const name = data.name;
+	let continent: Continents;
+	let org: string | undefined;
+	let sponsor: boolean | undefined;
+	let website: string | undefined;
+	let email: string | undefined;
+	let nostr: string | undefined;
+	let twitter: string | undefined;
+	let secondTwitter: string | undefined;
+	let meetup: string | undefined;
+	let eventbrite: string | undefined;
+	let telegram: string | undefined;
+	let discord: string | undefined;
+	let youtube: string | undefined;
+	let github: string | undefined;
+	let reddit: string | undefined;
+	let instagram: string | undefined;
+	let whatsapp: string | undefined;
+	let facebook: string | undefined;
+	let linkedin: string | undefined;
+	let rss: string | undefined;
+	let signal: string | undefined;
+	let lightning: { destination: string; type: TipType } | undefined;
+
+	let total: number | undefined;
+	let upToDate: number | undefined;
+	let outdated: number | undefined;
+	let legacy: number | undefined;
+	let grade: Grade;
+
+	let gradeTooltip: HTMLButtonElement;
+
+	$: gradeTooltip &&
+		tippy([gradeTooltip], {
+			content: GradeTable,
+			allowHTML: true
+		});
+
+	let upToDatePercent: string | undefined;
+	let outdatedPercent: string | undefined;
+	let legacyPercent: string | undefined;
+
+	let updatedChartCanvas: HTMLCanvasElement;
+	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+	let updatedChart;
+
+	let hideArrow = false;
+	let activityDiv: HTMLDivElement;
+	let eventElements: ActivityEvent[] = [];
+
+	let eventCount = 50;
+	$: eventElementsPaginated = eventElements.slice(0, eventCount);
+
+	let taggers: User[] = [];
+	let taggerCount = 50;
+	$: taggersPaginated = taggers.slice(0, taggerCount);
+	let taggerDiv: HTMLDivElement;
+
+	let mapElement: HTMLDivElement;
+	let map: Map;
+	let mapLoaded = false;
+
+	let baseMaps: BaseMaps;
+
+	let issues: Issues = [];
+
+	let chartsLoading = true;
+	let upToDateChartCanvas: HTMLCanvasElement;
+	let upToDateChart: Chart<'line', number[], string>;
+	let totalChartCanvas: HTMLCanvasElement;
+	let totalChart: Chart<'line', number[], string>;
+	let legacyChartCanvas: HTMLCanvasElement;
+	let legacyChart: Chart<'line', number[], string>;
+	let paymentMethodChartCanvas: HTMLCanvasElement;
+	let paymentMethodChart: Chart<'line', number[], string>;
+
+	$: $theme !== undefined &&
+		!chartsLoading &&
+		updateChartThemes([upToDateChart, totalChart, legacyChart, paymentMethodChart]);
+
+	let leaflet: Leaflet;
+	let DomEvent: DomEventType;
+
+	onMount(async () => {
+		if (browser) {
+			// setup charts
+			updatedChartCanvas.getContext('2d');
+			upToDateChartCanvas.getContext('2d');
+			totalChartCanvas.getContext('2d');
+			legacyChartCanvas.getContext('2d');
+			paymentMethodChartCanvas.getContext('2d');
+
+			//import packages
+			leaflet = await import('leaflet');
+			// @ts-expect-error
+			DomEvent = await import('leaflet/src/dom/DomEvent');
+			/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
+			const leafletMarkerCluster = await import('leaflet.markercluster');
+			const leafletFeaturegroupSubgroup = await import('leaflet.featuregroup.subgroup');
+			const leafletLocateControl = await import('leaflet.locatecontrol');
+			/* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */
+
+			initialRenderComplete = true;
+		}
+	});
+
+	$: $theme !== undefined && mapLoaded && toggleMapButtons();
+
+	const closePopup = () => {
+		map.closePopup();
+	};
+
+	$: $theme !== undefined && mapLoaded && closePopup();
+
+	const toggleTheme = () => {
+		if ($theme === 'dark') {
+			baseMaps['OSM Bright'].remove();
+			baseMaps['Alidade Smooth Dark'].addTo(map);
+		} else {
+			baseMaps['Alidade Smooth Dark'].remove();
+			baseMaps['OSM Bright'].addTo(map);
+		}
+	};
+
+	$: $theme !== undefined && mapLoaded && toggleTheme();
+
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+</script>
+
+<svelte:head>
+	{#if type === 'community'}
+		{#if lightning && lightning.type === 'address'}
+			<meta name="lightning" content="lnurlp:{lightning.destination}" />
+			<meta property="alby:image" content={avatar} />
+			<meta property="alby:name" content={name} />
+		{:else}
+			<meta
+				name="lightning"
+				content="lnurlp:LNURL1DP68GURN8GHJ7CM0WFJJUCN5VDKKZUPWDAEXWTMVDE6HYMRS9ARKXVN4W5EQPSYZ34"
+			/>
+			<meta property="alby:image" content="/images/logo.svg" />
+			<meta property="alby:name" content="BTC Map" />
+		{/if}
+	{/if}
+</svelte:head>
+
+<main class="my-10 space-y-16 text-center md:my-20">
+	<section id="profile" class="space-y-8">
+		<div class="space-y-2">
+			{#if avatar}
+				<img
+					src={avatar}
+					alt="avatar"
+					class="mx-auto h-32 w-32 rounded-full object-cover"
+					on:error={function () {
+						this.src = '/images/bitcoin.svg';
+					}}
+				/>
+			{:else}
+				<div class="mx-auto h-32 w-32 animate-pulse rounded-full bg-link/50" />
+			{/if}
+			<h1 class="text-4xl font-semibold !leading-tight text-primary dark:text-white">
+				{name || 'BTC Map Area'}
+			</h1>
+			{#if org}
+				<OrgBadge {org} />
+			{/if}
+			{#if sponsor}
+				<SponsorBadge />
+			{/if}
+			{#if continent}
+				<h2 class="text-xl uppercase text-primary dark:text-white">
+					{continent.replace('-', ' ')}
+					<i class="fa-solid fa-earth-{getContinentIcon(continent)}" />
+				</h2>
+			{:else}
+				<div class="mx-auto h-7 w-24 animate-pulse rounded bg-link/50" />
+			{/if}
+			{#if data.id && type === 'community'}
+				<a
+					href={`/communities/map?community=${data.id}`}
+					class="inline-flex items-center justify-center text-xs text-link transition-colors hover:text-hover"
+					>View on community map <svg
+						class="ml-1 w-3"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M3 13L13 3M13 3H5.5M13 3V10.5"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg></a
+				>
+			{/if}
+		</div>
+
+		{#if type === 'community'}
+			{#if dataInitialized}
+				<Socials
+					{website}
+					{email}
+					{nostr}
+					{twitter}
+					{secondTwitter}
+					{meetup}
+					{eventbrite}
+					{telegram}
+					{discord}
+					{youtube}
+					{github}
+					{reddit}
+					{instagram}
+					{whatsapp}
+					{facebook}
+					{linkedin}
+					{rss}
+					{signal}
+				/>
+			{:else}
+				<div class="flex flex-wrap items-center justify-center">
+					<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+					{#each Array(3) as skeleton}
+						<div class="m-1 h-10 w-10 animate-pulse rounded-full bg-link/50" />
+					{/each}
+				</div>
+			{/if}
+
+			{#if lightning}
+				<Tip destination={lightning.destination} type={lightning.type} user={name} />
+			{/if}
+		{/if}
+	</section>
+
+	<section id="map-section">
+		<h3
+			class="rounded-t-3xl border border-b-0 border-statBorder p-5 text-center text-lg font-semibold text-primary dark:bg-white/10 dark:text-white md:text-left"
+		>
+			{name || 'BTC Map Area'} Map
+			<div class="flex items-center space-x-1 text-link">
+				{#if dataInitialized}
+					<div class="flex items-center space-x-1">
+						<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+						{#each Array(grade) as star}
+							<i class="fa-solid fa-star" />
+						{/each}
+					</div>
+
+					<div class="flex items-center space-x-1">
+						<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+						{#each Array(5 - grade) as star}
+							<i class="fa-solid fa-star opacity-25" />
+						{/each}
+					</div>
+				{:else}
+					<div class="flex items-center space-x-1">
+						<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+						{#each Array(5) as star}
+							<i class="fa-solid fa-star animate-pulse text-link/50" />
+						{/each}
+					</div>
+				{/if}
+
+				<button bind:this={gradeTooltip}>
+					<i class="fa-solid fa-circle-info text-sm" />
+				</button>
+			</div>
+		</h3>
+
+		<div class="relative">
+			<div
+				bind:this={mapElement}
+				class="z-10 h-[300px] rounded-b-3xl border border-statBorder !bg-teal text-left dark:!bg-[#202f33] md:h-[600px]"
+			/>
+			{#if !mapLoaded}
+				<MapLoadingEmbed style="h-[300px] md:h-[600px] border border-statBorder rounded-b-3xl" />
+			{/if}
+		</div>
+	</section>
+
+	<section id="stats">
+		<div
+			class="border border-statBorder dark:bg-white/10 {total === 0
+				? 'rounded-3xl'
+				: 'rounded-t-3xl'} grid md:grid-cols-2 xl:grid-cols-4"
+		>
+			<ProfileStat
+				title="Total Locations"
+				stat={total}
+				border="border-b xl:border-b-0 md:border-r border-statBorder"
+			/>
+			<ProfileStat
+				title="Up-To-Date"
+				stat={upToDate}
+				percent={total && total > 0 ? upToDatePercent : undefined}
+				border="border-b xl:border-b-0 xl:border-r border-statBorder"
+				tooltip="Locations that have been verified within one year."
+			/>
+			<ProfileStat
+				title="Outdated"
+				stat={outdated}
+				percent={total && total > 0 ? outdatedPercent : undefined}
+				border="border-b md:border-b-0 md:border-r border-statBorder"
+			/>
+			<ProfileStat
+				title="Legacy"
+				stat={legacy}
+				percent={total && total > 0 ? legacyPercent : undefined}
+				tooltip="Locations with a <em>payment:bitcoin</em> tag instead of the
+					<em>currency:XBT</em> tag."
+			/>
+		</div>
+
+		<div
+			class="{total === 0
+				? 'hidden'
+				: ''} relative rounded-b-3xl border border-t-0 border-statBorder p-5 dark:bg-white/10"
+		>
+			{#if chartsLoading}
+				<div>
+					<i
+						class="fa-solid fa-chart-pie absolute left-1/2 top-1/2 h-52 w-52 -translate-x-1/2 -translate-y-1/2 animate-pulse text-link/50 md:h-60 md:w-60"
+					/>
+				</div>
+			{/if}
+
+			<canvas bind:this={updatedChartCanvas} width="100%" height="250" />
+		</div>
+	</section>
+
+	<section id="taggers">
+		<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
+			<h3
+				class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
+			>
+				{name || 'BTC Map Area'} Supertaggers
+			</h3>
+			<div bind:this={taggerDiv} class="hide-scroll max-h-[375px] overflow-scroll p-1">
+				{#if taggers && taggers.length}
+					<div class="flex flex-wrap items-center justify-center">
+						{#each taggersPaginated as tagger}
+							<div class="m-4 space-y-1 transition-transform hover:scale-110">
+								<a href="/tagger/{tagger.id}">
+									<img
+										src={tagger.osm_json.img
+											? tagger.osm_json.img.href
+											: '/images/satoshi-nakamoto.png'}
+										alt="avatar"
+										class="mx-auto h-20 w-20 rounded-full object-cover"
+										on:error={function () {
+											this.src = '/images/satoshi-nakamoto.png';
+										}}
+									/>
+									<p class="text-center font-semibold text-body dark:text-white">
+										{tagger.osm_json.display_name.length > 21
+											? tagger.osm_json.display_name.slice(0, 18) + '...'
+											: tagger.osm_json.display_name}
+									</p>
+								</a>
+							</div>
+						{/each}
+					</div>
+
+					{#if taggersPaginated.length !== taggers.length}
+						<button
+							class="mx-auto !mb-4 block text-xl font-semibold text-link transition-colors hover:text-hover"
+							on:click={() => (taggerCount = taggerCount + 50)}>Load More</button
+						>
+					{/if}
+				{:else if !dataInitialized}
+					<div class="flex flex-wrap items-center justify-center">
+						<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+						{#each Array(5) as tagger}
+							<div class="m-4 space-y-1 transition-transform hover:scale-110">
+								<p class="mx-auto h-20 w-20 animate-pulse rounded-full bg-link/50" />
+								<p class="mx-auto h-5 w-28 animate-pulse rounded bg-link/50" />
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<p class="p-5 text-center text-body dark:text-white">No supertaggers to display.</p>
+				{/if}
+			</div>
+		</div>
+	</section>
+
+	<section id="activity">
+		<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
+			<h3
+				class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
+			>
+				{name || 'BTC Map Area'} Activity
+			</h3>
+
+			<div
+				bind:this={activityDiv}
+				class="hide-scroll relative max-h-[375px] space-y-2 overflow-y-scroll"
+				on:scroll={() => {
+					if (dataInitialized && !hideArrow) {
+						hideArrow = true;
+					}
+				}}
+			>
+				{#if eventElements && eventElements.length}
+					{#each eventElementsPaginated as event}
+						<LatestTagger
+							location={event.location}
+							action={event.type}
+							user={event.tagger}
+							time={event['created_at']}
+							latest={event === eventElements[0] ? true : false}
+							merchantId={event.merchantId}
+						/>
+					{/each}
+
+					{#if eventElementsPaginated.length !== eventElements.length}
+						<button
+							class="mx-auto !mb-5 block text-xl font-semibold text-link transition-colors hover:text-hover"
+							on:click={() => (eventCount = eventCount + 50)}>Load More</button
+						>
+					{:else if eventElements.length > 10}
+						<TopButton scroll={activityDiv} style="!mb-5" />
+					{/if}
+
+					{#if !hideArrow && eventElements.length > 5}
+						<svg
+							class="absolute bottom-4 left-[calc(50%-8px)] z-20 h-4 w-4 animate-bounce text-primary dark:text-white"
+							fill="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 512 512"
+							><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+								d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+							/></svg
+						>
+					{/if}
+				{:else if !dataInitialized}
+					<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+					{#each Array(5) as skeleton}
+						<TaggerSkeleton />
+					{/each}
+				{:else}
+					<p class="p-5 text-body dark:text-white">No activity to display.</p>
+				{/if}
+			</div>
+		</div>
+	</section>
+
+	<IssuesTable
+		title="{name || 'BTC Map Area'} Tagging Issues"
+		{issues}
+		loading={!dataInitialized}
+	/>
+
+	<section id="tickets">
+		<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
+			<div class="p-5 text-lg font-semibold text-primary dark:text-white">
+				<h3 class="mb-2 text-center md:text-left">
+					{name || 'BTC Map Area'} Tickets
+					{#if tickets && !ticketError}
+						<span class="text-base">({totalTickets})</span>
+					{/if}
+					<InfoTooltip
+						tooltip="Tickets up for grabs from our noob forms! Anybody can help add or verify submissions on OpenStreetMap."
+					/>
+				</h3>
+
+				{#each ticketTypes as type}
+					<button
+						class="mx-auto block w-40 border border-link py-2 text-center md:inline {type === 'Add'
+							? 'rounded-t md:rounded-l md:rounded-tr-none'
+							: type === 'Verify'
+								? 'rounded-b md:rounded-r md:rounded-bl-none'
+								: ''} {showType === type ? 'bg-link text-white' : ''} transition-colors"
+						on:click={() => (showType = type)}
+						disabled={!tickets || ticketError}
+					>
+						{type}
+					</button>
+				{/each}
+			</div>
+
+			{#if tickets && !ticketError}
+				{#if showType === 'Add'}
+					{#if add.length}
+						{#each add as ticket}
+							<OpenTicket
+								assignees={ticket.assignees}
+								comments={ticket.comments}
+								created={ticket.created_at}
+								url={ticket.html_url}
+								labels={ticket.labels}
+								id={ticket.number}
+								name={ticket.title}
+								user={ticket.user}
+							/>
+						{/each}
+					{:else}
+						<p class="border-t border-statBorder p-5 text-center text-body dark:text-white">
+							No open <strong>add</strong> tickets.
+						</p>
+					{/if}
+				{:else if showType === 'Verify'}
+					{#if verify.length}
+						{#each verify as ticket}
+							<OpenTicket
+								assignees={ticket.assignees}
+								comments={ticket.comments}
+								created={ticket.created_at}
+								url={ticket.html_url}
+								labels={ticket.labels}
+								id={ticket.number}
+								name={ticket.title}
+								user={ticket.user}
+							/>
+						{/each}
+					{:else}
+						<p class="border-t border-statBorder p-5 text-center text-body dark:text-white">
+							No open <strong>verify</strong> tickets.
+						</p>
+					{/if}
+				{/if}
+
+				{#if tickets?.length === 100}
+					<p
+						class="border-t border-statBorder p-5 text-center font-semibold text-primary dark:text-white"
+					>
+						View all open tickets directly on <a
+							href="https://github.com/teambtcmap/btcmap-data/issues?q=is%3Aopen+is%3Aissue+label%3A%22{name.replaceAll(
+								' ',
+								'+'
+							)}%22"
+							target="_blank"
+							rel="noreferrer"
+							class="text-link transition-colors hover:text-hover">GitHub</a
+						>.
+					</p>
+				{/if}
+			{:else}
+				<p class="border-t border-statBorder p-5 text-center text-body dark:text-white">
+					Error fetching tickets.
+				</p>
+			{/if}
+		</div>
+	</section>
+
+	<section id="charts" class="space-y-10">
+		<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
+			<h3
+				class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
+			>
+				{name || 'BTC Map Area'} Charts
+			</h3>
+			<div class="border-b border-statBorder p-5">
+				<div class="relative">
+					{#if chartsLoading}
+						<div
+							class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+						>
+							<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+						</div>
+					{/if}
+					<canvas bind:this={upToDateChartCanvas} width="100%" height="400" />
+				</div>
+				<p class="mt-1 text-center text-sm text-body dark:text-white">
+					*Locations with a <em>survey:date</em>, <em>check_date</em>, or
+					<em>check_date:currency:XBT</em> tag less than one year old.
+				</p>
+			</div>
+
+			<div class="border-b border-statBorder p-5">
+				<div class="relative">
+					{#if chartsLoading}
+						<div
+							class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+						>
+							<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+						</div>
+					{/if}
+					<canvas bind:this={totalChartCanvas} width="100%" height="400" />
+				</div>
+				<p class="mt-1 text-center text-sm text-body dark:text-white">
+					*Locations accepting any bitcoin payment method.
+				</p>
+			</div>
+
+			<div class="border-b border-statBorder p-5">
+				<div class="relative">
+					{#if chartsLoading}
+						<div
+							class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+						>
+							<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+						</div>
+					{/if}
+					<canvas bind:this={legacyChartCanvas} width="100%" height="400" />
+				</div>
+				<p class="mt-1 text-center text-sm text-body dark:text-white">
+					*Locations with a <em>payment:bitcoin</em> tag instead of the
+					<em>currency:XBT</em> tag.
+				</p>
+			</div>
+
+			<div class="p-5">
+				<div class="relative">
+					{#if chartsLoading}
+						<div
+							class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
+						>
+							<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
+						</div>
+					{/if}
+					<canvas bind:this={paymentMethodChartCanvas} width="100%" height="400" />
+				</div>
+				<p class="mt-1 text-center text-sm text-body dark:text-white">
+					*Locations with <em>payment:onchain</em>, <em>payment:lightning</em> and
+					<em>payment:lightning_contactless</em> tags.
+				</p>
+			</div>
+		</div>
+	</section>
+
+	<p class="text-center text-sm text-body dark:text-white md:text-left">
+		*More information on bitcoin mapping tags can be found <a
+			href="https://wiki.btcmap.org/general/tagging-instructions.html#tagging-guidance"
+			target="_blank"
+			rel="noreferrer"
+			class="text-link transition-colors hover:text-hover">here</a
+		>.
+		<br />
+		*Chart data updated once every 24 hours.
+	</p>
+</main>
diff --git a/src/components/CommunityCard.svelte b/src/components/CommunityCard.svelte
index 3768692f..25ce08b9 100644
--- a/src/components/CommunityCard.svelte
+++ b/src/components/CommunityCard.svelte
@@ -40,11 +40,11 @@
 			<img
 				src={image
 					? `https://btcmap.org/.netlify/images?url=${image}&fit=cover&w=256&h=256`
-					: '/images/communities/bitcoin.svg'}
+					: '/images/bitcoin.svg'}
 				alt={tags.name}
 				class="mx-auto h-20 w-20 rounded-full object-cover"
 				on:error={function () {
-					this.src = '/images/communities/bitcoin.svg';
+					this.src = '/images/bitcoin.svg';
 				}}
 			/>
 
diff --git a/src/components/CountryCard.svelte b/src/components/CountryCard.svelte
new file mode 100644
index 00000000..bc71f08d
--- /dev/null
+++ b/src/components/CountryCard.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let id: string;
+	export let name: string;
+</script>
+
+<div
+	class="rounded-3xl border border-statBorder shadow transition-shadow hover:shadow-2xl dark:bg-white/10"
+>
+	<div class="my-4 space-y-2 p-4">
+		<a href="/country/{id}" class="space-y-2 text-link transition-colors hover:text-hover">
+			<img
+				src={`https://static.btcmap.org/images/countries/${id}.svg`}
+				alt={name}
+				class="mx-auto h-20 w-20 rounded-full object-cover"
+				on:error={function () {
+					this.src = '/images/bitcoin.svg';
+				}}
+			/>
+
+			<span class="block text-center text-lg font-semibold">{name}</span>
+		</a>
+	</div>
+</div>
diff --git a/src/components/CountrySection.svelte b/src/components/CountrySection.svelte
new file mode 100644
index 00000000..af291a74
--- /dev/null
+++ b/src/components/CountrySection.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let countries: Area[] | undefined;
+
+	import { CountryCard, CountrySkeleton } from '$lib/comp';
+	import type { Area } from '$lib/types';
+</script>
+
+<section>
+	<div class="grid gap-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+		{#if countries && countries.length}
+			{#each countries as country}
+				<CountryCard id={country.id} name={country.tags.name} />
+			{/each}
+		{:else}
+			<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
+			{#each Array(4) as skeleton}
+				<CountrySkeleton />
+			{/each}
+		{/if}
+	</div>
+</section>
diff --git a/src/components/CountrySkeleton.svelte b/src/components/CountrySkeleton.svelte
new file mode 100644
index 00000000..8bb59f29
--- /dev/null
+++ b/src/components/CountrySkeleton.svelte
@@ -0,0 +1,11 @@
+<div
+	class="animate-pulse rounded-3xl border border-link/50 shadow transition-shadow hover:shadow-2xl"
+>
+	<div class="my-4 space-y-2 p-4">
+		<!-- avatar placeholder -->
+		<div class="mx-auto h-20 w-20 animate-pulse rounded-full bg-link/50" />
+
+		<!-- name placeholder -->
+		<div class="mx-auto h-[28px] w-[200px] animate-pulse rounded-xl bg-link/50" />
+	</div>
+</div>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index cb2c9ebf..d59c6f83 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -6,7 +6,7 @@
 		{ title: 'Apps', url: '/apps', icon: 'apps' },
 		{ title: 'Contribute', url: '', icon: 'contribute' },
 		{ title: 'Stats', url: '', icon: 'stats' },
-		{ title: 'Communities', url: '', icon: 'communities' },
+		{ title: 'Areas', url: '', icon: 'areas' },
 		{
 			title: 'Wiki',
 			url: '',
@@ -28,9 +28,9 @@
 		{ title: 'Leaderboard', url: '/leaderboard', icon: 'leader' }
 	];
 
-	const communitiesDropdownLinks = [
-		{ title: 'Directory', url: '/communities', icon: 'directory' },
-		{ title: 'Leaderboard', url: '/communities/leaderboard', icon: 'leader' }
+	const areasDropdownLinks = [
+		{ title: 'Communities', url: '/communities', icon: 'communities' },
+		{ title: 'Countries', url: '/countries', icon: 'countries' }
 	];
 
 	const wikiDropdownLinks = [
@@ -78,12 +78,12 @@
 				/>
 
 				<!-- dropdown menu -->
-			{:else if link.title === 'Communities'}
+			{:else if link.title === 'Areas'}
 				<NavDropdownDesktop
 					title={link.title}
-					links={communitiesDropdownLinks}
-					top="directory"
-					bottom="leader"
+					links={areasDropdownLinks}
+					top="communities"
+					bottom="countries"
 				/>
 
 				<!-- dropdown menu -->
@@ -150,8 +150,8 @@
 				<NavDropdownMobile title={link.title} icon={link.icon} links={statsDropdownLinks} />
 
 				<!-- dropdown menu -->
-			{:else if link.title === 'Communities'}
-				<NavDropdownMobile title={link.title} icon={link.icon} links={communitiesDropdownLinks} />
+			{:else if link.title === 'Areas'}
+				<NavDropdownMobile title={link.title} icon={link.icon} links={areasDropdownLinks} />
 
 				<!-- dropdown menu -->
 			{:else if link.title === 'Wiki'}
diff --git a/src/lib/comp.ts b/src/lib/comp.ts
index 045570c3..92c7139f 100644
--- a/src/lib/comp.ts
+++ b/src/lib/comp.ts
@@ -7,16 +7,21 @@ export { default as AboutMerchant } from '../components/AboutMerchant.svelte';
 export { default as AboutPlus } from '../components/AboutPlus.svelte';
 export { default as AboutTagger } from '../components/AboutTagger.svelte';
 export { default as AppCard } from '../components/AppCard.svelte';
+export { default as AreaLeaderboard } from '../components/AreaLeaderboard.svelte';
+export { default as AreaLeaderboardItem } from '../components/AreaLeaderboardItem.svelte';
+export { default as AreaLeaderboardSkeleton } from '../components/AreaLeaderboardSkeleton.svelte';
+export { default as AreaPage } from '../components/AreaPage.svelte';
 export { default as BadgeCard } from '../components/BadgeCard.svelte';
 export { default as Boost } from '../components/Boost.svelte';
 export { default as CloseButton } from '../components/CloseButton.svelte';
 export { default as CommunityCard } from '../components/CommunityCard.svelte';
-export { default as CommunityLeaderboardItem } from '../components/CommunityLeaderboardItem.svelte';
-export { default as CommunityLeaderboardSkeleton } from '../components/CommunityLeaderboardSkeleton.svelte';
 export { default as CommunitySection } from '../components/CommunitySection.svelte';
 export { default as CommunitySkeleton } from '../components/CommunitySkeleton.svelte';
 export { default as CopyButton } from '../components/CopyButton.svelte';
 export { default as Countdown } from '../components/Countdown.svelte';
+export { default as CountryCard } from '../components/CountryCard.svelte';
+export { default as CountrySection } from '../components/CountrySection.svelte';
+export { default as CountrySkeleton } from '../components/CountrySkeleton.svelte';
 export { default as DashboardStat } from '../components/DashboardStat.svelte';
 export { default as DonationOption } from '../components/DonationOption.svelte';
 export { default as Footer } from '../components/Footer.svelte';
@@ -57,3 +62,34 @@ export { default as ThemeToggle } from '../components/ThemeToggle.svelte';
 export { default as TicketLabel } from '../components/TicketLabel.svelte';
 export { default as Tip } from '../components/Tip.svelte';
 export { default as TopButton } from '../components/TopButton.svelte';
+
+export const GradeTable = `<table>
+<thead>
+    <tr>
+        <th class='mr-1 inline-block'>Up-To-Date</th>
+        <th>Grade</th>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td>95-100%</td>
+        <td>5 Star</td>
+    </tr>
+    <tr>
+        <td>75-95%</td>
+        <td>4 Star</td>
+    </tr>
+    <tr>
+        <td>50-75%</td>
+        <td>3 Star</td>
+    </tr>
+    <tr>
+        <td>25-50%</td>
+        <td>2 Star</td>
+    </tr>
+    <tr>
+        <td>0-25%</td>
+        <td>1 Star</td>
+    </tr>
+</tbody>
+</table>`;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index e75a0722..943d7384 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -13,12 +13,12 @@ export type Area = {
 };
 
 export type AreaTags = {
-	type: 'community' | 'country';
+	type: AreaType;
 	name: string;
 	continent: Continents;
 	url_alias: string;
 	geo_json: GeoJSON;
-	['icon:square']: string;
+	['icon:square']: string; // countries don't have this tag yet
 	organization?: string;
 	language?: string;
 	population?: string;
@@ -50,13 +50,21 @@ export type AreaTags = {
 	['box:west']?: string;
 };
 
+export type AreaType = 'community' | 'country';
+
 export type Continents =
 	| 'africa'
 	| 'asia'
 	| 'europe'
 	| 'north-america'
 	| 'oceania'
-	| 'south-america';
+	| 'south-america'
+	| 'Africa'
+	| 'Asia'
+	| 'Europe'
+	| 'North America'
+	| 'Oceania'
+	| 'South America';
 
 export type Element = {
 	id: string;
@@ -266,3 +274,5 @@ export type DonationType = 'On-chain' | 'Lightning';
 export type DropdownLink = { url: string; external?: boolean; icon: string; title: string };
 
 export type ChartHistory = '7D' | '1M' | '3M' | '6M' | 'YTD' | '1Y' | 'ALL';
+
+export type AreaPageProps = { id: string; name: string; tickets: [] | 'error' };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 9e4fda14..8af56f5b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,5 @@
 import { theme } from '$lib/store';
-import type { Element, Grade, IssueIcon, IssueType, Issues } from '$lib/types';
+import type { Continents, Element, Grade, IssueIcon, IssueType, Issues } from '$lib/types';
 import { toast } from '@zerodevx/svelte-toast';
 import type { Chart } from 'chart.js';
 import { get } from 'svelte/store';
@@ -146,3 +146,19 @@ export function debounce(func: (e?: any) => void, timeout = 500) {
 		}, timeout);
 	};
 }
+
+export const validateContinents = (continent: Continents) =>
+	[
+		'africa',
+		'asia',
+		'europe',
+		'north-america',
+		'oceania',
+		'south-america',
+		'Africa',
+		'Asia',
+		'Europe',
+		'North America',
+		'Oceania',
+		'South America'
+	].includes(continent);
diff --git a/src/routes/communities/+page.svelte b/src/routes/communities/+page.svelte
index 64b76e4e..ef46ae4e 100644
--- a/src/routes/communities/+page.svelte
+++ b/src/routes/communities/+page.svelte
@@ -263,7 +263,7 @@
 			continentChartCanvas.getContext('2d');
 
 			if (location.hash) {
-				section = decodeURI(location.hash).slice(1);
+				section = decodeURIComponent(location.hash).slice(1);
 			} else {
 				section = 'Africa';
 			}
@@ -302,17 +302,25 @@
 				and have fun!
 			</h2>
 
-			<div class="items-center justify-center space-y-5 md:flex md:space-x-5 md:space-y-0">
-				<PrimaryButton
-					text="Add community"
-					style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
-					link="/communities/add"
-				/>
+			<div>
 				<PrimaryButton
-					text="View community map"
-					style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
-					link="/communities/map"
+					text="Leaderboard"
+					style="md:w-[200px] mx-auto py-3 rounded-xl mb-5"
+					link="/communities/leaderboard"
 				/>
+
+				<div class="items-center justify-center space-y-5 md:flex md:space-x-5 md:space-y-0">
+					<PrimaryButton
+						text="Add community"
+						style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
+						link="/communities/add"
+					/>
+					<PrimaryButton
+						text="View community map"
+						style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
+						link="/communities/map"
+					/>
+				</div>
 			</div>
 
 			<div class="relative">
@@ -338,17 +346,17 @@
 						<h2
 							class="mb-2 text-3xl font-semibold text-primary dark:text-white md:mb-0 md:text-left"
 						>
-							<a href="/communities#{section.replaceAll(' ', '%20')}">{section}</a>
+							<a href="/communities#{encodeURIComponent(section)}">{section}</a>
 						</h2>
 
 						<select
-							class="rounded-2xl border-2 border-input bg-white px-2 py-3 text-primary transition-all focus:outline-link dark:bg-white/[0.15] dark:text-white"
+							class="w-full rounded-2xl border-2 border-input bg-white px-2 py-3 text-primary transition-all focus:outline-link dark:bg-white/[0.15] dark:text-white md:w-auto"
 							bind:value={section}
 							on:change={(e) => {
 								// @ts-expect-error
 								section = e.target?.value;
 								// @ts-expect-error
-								location.hash = e.target?.value;
+								location.hash = encodeURIComponent(e.target?.value);
 							}}
 						>
 							{#each sections as option}
diff --git a/src/routes/communities/leaderboard/+page.svelte b/src/routes/communities/leaderboard/+page.svelte
index f959f56d..90c23d17 100644
--- a/src/routes/communities/leaderboard/+page.svelte
+++ b/src/routes/communities/leaderboard/+page.svelte
@@ -1,144 +1,7 @@
 <script lang="ts">
-	import {
-		CommunityLeaderboardItem,
-		CommunityLeaderboardSkeleton,
-		Footer,
-		Header,
-		HeaderPlaceholder,
-		PrimaryButton,
-		TopButton
-	} from '$lib/comp';
-	import { areaError, areas, reportError, reports, syncStatus, theme } from '$lib/store';
-	import type { Area, LeaderboardArea, Report } from '$lib/types';
-	import { detectTheme, errToast, getGrade } from '$lib/utils';
-	import tippy from 'tippy.js';
-
-	// alert for area errors
-	$: $areaError && errToast($areaError);
-
-	// alert for report errors
-	$: $reportError && errToast($reportError);
-
-	$: communities =
-		$reports && $reports.length
-			? $areas.filter(
-					(area) =>
-						area.tags.type === 'community' &&
-						area.tags.geo_json &&
-						area.tags.name &&
-						area.tags['icon:square'] &&
-						area.tags.continent &&
-						Object.keys(area.tags).find((key) => key.includes('contact')) &&
-						$reports.find((report) => report.area_id === area.id)
-				)
-			: [];
-	$: communityReports =
-		communities && communities.length
-			? $reports
-					.filter((report) => communities.find((community) => community.id === report.area_id))
-					.sort((a, b) => Date.parse(b['created_at']) - Date.parse(a['created_at']))
-			: [];
-	let leaderboard: LeaderboardArea[];
-	let loading: boolean;
-
-	let upToDateTooltip: HTMLButtonElement;
-	let upToDateTooltipMobile: HTMLButtonElement;
-	let gradeTooltip: HTMLButtonElement;
-	let gradeTooltipMobile: HTMLButtonElement;
-
-	const score = (report: Report): number => {
-		return Math.max(report.tags.total_elements - report.tags.outdated_elements * 5, 0);
-	};
-
-	const populateLeaderboard = (
-		status: boolean,
-		communities: Area[],
-		communityReports: Report[]
-	) => {
-		if (communities.length && communityReports.length && !status) {
-			loading = true;
-			leaderboard = [];
-
-			communities.forEach((community) => {
-				let communityReport = communityReports.find((report) => report.area_id === community.id);
-
-				if (communityReport) {
-					const grade = getGrade(communityReport.tags.up_to_date_percent);
-
-					leaderboard.push({ ...community, report: communityReport, grade });
-				}
-			});
-
-			leaderboard.sort((a, b) => {
-				const aScore = score(a.report);
-				const bScore = score(b.report);
-
-				if (bScore === aScore) {
-					return b.report.tags.total_elements - a.report.tags.total_elements;
-				} else {
-					return bScore - aScore;
-				}
-			});
-
-			leaderboard = leaderboard;
-			loading = false;
-		}
-	};
-
-	$: populateLeaderboard($syncStatus, communities, communityReports);
-
-	let leaderboardCount = 50;
-	$: leaderboardPaginated =
-		leaderboard && leaderboard.length && !loading ? leaderboard.slice(0, leaderboardCount) : [];
-
-	const headings = ['Position', 'Name', 'Up-To-Date', 'Total Locations', 'Grade'];
-
-	const setTooltips = () => {
-		tippy([upToDateTooltip, upToDateTooltipMobile], {
-			content: `Locations that have been verified within one year.`,
-			allowHTML: true
-		});
-
-		tippy([gradeTooltip, gradeTooltipMobile], {
-			content: `<table>
-	<thead>
-		<tr>
-			<th class='mr-1 inline-block'>Up-To-Date</th>
-			<th>Grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>95-100%</td>
-			<td>5 Star</td>
-		</tr>
-		<tr>
-			<td>75-95%</td>
-			<td>4 Star</td>
-		</tr>
-		<tr>
-			<td>50-75%</td>
-			<td>3 Star</td>
-		</tr>
-		<tr>
-			<td>25-50%</td>
-			<td>2 Star</td>
-		</tr>
-		<tr>
-			<td>0-25%</td>
-			<td>1 Star</td>
-		</tr>
-	</tbody>
-</table>`,
-			allowHTML: true
-		});
-	};
-
-	$: upToDateTooltip &&
-		upToDateTooltipMobile &&
-		gradeTooltip &&
-		gradeTooltipMobile &&
-		setTooltips();
+	import { AreaLeaderboard, Footer, Header, HeaderPlaceholder, PrimaryButton } from '$lib/comp';
+	import { theme } from '$lib/store';
+	import { detectTheme } from '$lib/utils';
 </script>
 
 <svelte:head>
@@ -172,90 +35,28 @@
 				accurate information. They also help onboard new merchants in their area!
 			</h2>
 
-			<div class="items-center justify-center space-y-5 md:flex md:space-x-5 md:space-y-0">
+			<div>
 				<PrimaryButton
-					text="Add community"
-					style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
-					link="/communities/add"
+					text="Directory"
+					style="md:w-[200px] mx-auto py-3 rounded-xl mb-5"
+					link="/communities"
 				/>
-				<PrimaryButton
-					text="View community map"
-					style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
-					link="/communities/map"
-				/>
-			</div>
-
-			<section id="leaderboard" class="dark:lg:rounded dark:lg:bg-white/10 dark:lg:py-8">
-				<div class="mb-5 hidden grid-cols-5 text-center lg:grid">
-					{#each headings as heading}
-						<h3 class="text-lg font-semibold text-primary dark:text-white">
-							{heading}
-							{#if heading === 'Up-To-Date'}
-								<button bind:this={upToDateTooltip}>
-									<i class="fa-solid fa-circle-info text-sm" />
-								</button>
-							{:else if heading === 'Grade'}
-								<button bind:this={gradeTooltip}>
-									<i class="fa-solid fa-circle-info text-sm" />
-								</button>
-							{/if}
-						</h3>
-					{/each}
-				</div>
-				<div
-					class="mb-5 space-y-1 text-center text-lg font-semibold text-primary dark:text-white lg:hidden"
-				>
-					<h3>
-						Up-To-Date <button bind:this={upToDateTooltipMobile}>
-							<i class="fa-solid fa-circle-info" />
-						</button>
-					</h3>
-					<h3>
-						Grade <button bind:this={gradeTooltipMobile}>
-							<i class="fa-solid fa-circle-info" />
-						</button>
-					</h3>
-				</div>
-
-				<div>
-					{#if leaderboard && leaderboard.length && !loading}
-						{#each leaderboardPaginated as item, index}
-							<CommunityLeaderboardItem
-								position={index + 1}
-								avatar={item.tags['icon:square']}
-								name={item.tags.name}
-								sponsor={item.tags.sponsor ? true : false}
-								id={item.id}
-								upToDate={item.report.tags.up_to_date_percent}
-								total={item.report.tags.total_elements}
-								grade={item.grade}
-							/>
-						{/each}
 
-						{#if leaderboardPaginated.length !== leaderboard.length}
-							<button
-								class="!my-5 mx-auto block text-xl font-semibold text-link transition-colors hover:text-hover"
-								on:click={() => (leaderboardCount = leaderboardCount + 50)}>Load More</button
-							>
-						{/if}
-					{:else}
-						<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
-						{#each Array(50) as skeleton}
-							<CommunityLeaderboardSkeleton />
-						{/each}
-					{/if}
+				<div class="items-center justify-center space-y-5 md:flex md:space-x-5 md:space-y-0">
+					<PrimaryButton
+						text="Add community"
+						style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
+						link="/communities/add"
+					/>
+					<PrimaryButton
+						text="View community map"
+						style="md:w-[200px] mx-auto md:mx-0 py-3 rounded-xl"
+						link="/communities/map"
+					/>
 				</div>
+			</div>
 
-				<p class="text-center text-sm text-body dark:text-white">
-					*Data is weighted by Up-To-Date locations and then sorted by Total Locations.
-					<br />
-					*Leaderboard updated once every 24 hours.
-				</p>
-
-				<div class="mt-10 flex justify-center">
-					<TopButton />
-				</div>
-			</section>
+			<AreaLeaderboard type="community" />
 
 			<Footer />
 		</div>
diff --git a/src/routes/communities/map/+page.svelte b/src/routes/communities/map/+page.svelte
index 45322940..56140839 100644
--- a/src/routes/communities/map/+page.svelte
+++ b/src/routes/communities/map/+page.svelte
@@ -78,7 +78,7 @@
 
 			popupContainer.innerHTML = `
 				<div class='text-center space-y-2'>
-					<img loading='lazy' src=${`https://btcmap.org/.netlify/images?url=${community.tags['icon:square']}&fit=cover&w=256&h=256`} alt='avatar' class='w-24 h-24 rounded-full mx-auto' title='Community icon' onerror="this.src='/images/communities/bitcoin.svg'" />
+					<img loading='lazy' src=${`https://btcmap.org/.netlify/images?url=${community.tags['icon:square']}&fit=cover&w=256&h=256`} alt='avatar' class='w-24 h-24 rounded-full mx-auto' title='Community icon' onerror="this.src='/images/bitcoin.svg'" />
 
 					<span class='text-primary dark:text-white font-semibold text-xl' title='Community name'>${
 						community.tags.name
diff --git a/src/routes/community/[area]/+page.svelte b/src/routes/community/[area]/+page.svelte
index 8a4df53c..0b45c0ac 100644
--- a/src/routes/community/[area]/+page.svelte
+++ b/src/routes/community/[area]/+page.svelte
@@ -1,889 +1,10 @@
 <script lang="ts">
-	export let data;
+	export let data: AreaPageProps;
 
-	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
-	import {
-		Footer,
-		Header,
-		InfoTooltip,
-		IssuesTable,
-		LatestTagger,
-		MapLoadingEmbed,
-		OpenTicket,
-		OrgBadge,
-		ProfileStat,
-		Socials,
-		SponsorBadge,
-		TaggerSkeleton,
-		Tip,
-		TopButton
-	} from '$lib/comp';
-	import {
-		attribution,
-		calcVerifiedDate,
-		changeDefaultIcons,
-		generateIcon,
-		generateMarker,
-		geolocate,
-		latCalc,
-		layers,
-		longCalc,
-		toggleMapButtons,
-		verifiedArr
-	} from '$lib/map/setup';
-	import {
-		areaError,
-		areas,
-		elementError,
-		elements,
-		eventError,
-		events,
-		reportError,
-		reports,
-		theme,
-		userError,
-		users
-	} from '$lib/store';
-	import {
-		TipType,
-		type ActivityEvent,
-		type BaseMaps,
-		type Continents,
-		type DomEventType,
-		type Element,
-		type Event,
-		type Grade,
-		type Issues,
-		type Leaflet,
-		type User
-	} from '$lib/types.js';
-	import {
-		detectTheme,
-		errToast,
-		formatElementID,
-		getGrade,
-		getIssues,
-		updateChartThemes
-	} from '$lib/utils';
-	// @ts-expect-error
-	import rewind from '@mapbox/geojson-rewind';
-	import Chart from 'chart.js/auto';
-	import { geoContains } from 'd3-geo';
-	import type { Map } from 'leaflet';
-	import { onDestroy, onMount } from 'svelte';
-	import tippy from 'tippy.js';
+	import { AreaPage, Footer, Header } from '$lib/comp';
+	import type { AreaPageProps } from '$lib/types';
 
-	// alert for user errors
-	$: $userError && errToast($userError);
-	// alert for event errors
-	$: $eventError && errToast($eventError);
-	// alert for element errors
-	$: $elementError && errToast($elementError);
-	// alert for area errors
-	$: $areaError && errToast($areaError);
-	// alert for report errors
-	$: $reportError && errToast($reportError);
-
-	let initialRenderComplete = false;
-	let dataInitialized = false;
-
-	const initializeData = () => {
-		if (dataInitialized) return;
-
-		const communityFound = $areas.find(
-			(area) =>
-				area.id == data.id &&
-				area.tags.type === 'community' &&
-				area.tags.geo_json &&
-				area.tags.name &&
-				area.tags['icon:square'] &&
-				area.tags.continent &&
-				Object.keys(area.tags).find((key) => key.includes('contact'))
-		);
-
-		if (!communityFound) {
-			console.log('Could not find community, please try again or contact BTC Map.');
-			goto('/404');
-			return;
-		}
-
-		const communityReports = $reports
-			.filter((report) => report.area_id === data.id)
-			.sort((a, b) => Date.parse(b['created_at']) - Date.parse(a['created_at']));
-
-		if (!communityReports.length) {
-			console.log(
-				'Could not find any community reports, please try again tomorrow or contact BTC Map.'
-			);
-			goto('/404');
-			return;
-		}
-
-		const community = communityFound.tags;
-
-		avatar = `https://btcmap.org/.netlify/images?url=${community['icon:square']}&fit=cover&w=256&h=256`;
-		org = community.organization;
-		sponsor = community.sponsor;
-		continent = community.continent;
-		website = community['contact:website'];
-		email = community['contact:email'];
-		nostr = community['contact:nostr'];
-		twitter = community['contact:twitter'];
-		secondTwitter = community['contact:second_twitter'];
-		meetup = community['contact:meetup'];
-		eventbrite = community['contact:eventbrite'];
-		telegram = community['contact:telegram'];
-		discord = community['contact:discord'];
-		youtube = community['contact:youtube'];
-		github = community['contact:github'];
-		reddit = community['contact:reddit'];
-		instagram = community['contact:instagram'];
-		whatsapp = community['contact:whatsapp'];
-		facebook = community['contact:facebook'];
-		linkedin = community['contact:linkedin'];
-		rss = community['contact:rss'];
-		signal = community['contact:signal'];
-
-		if (community['tips:lightning_address']) {
-			lightning = {
-				destination: community['tips:lightning_address'],
-				type: TipType.Address
-			};
-		} else if (community['tips:url']) {
-			lightning = { destination: community['tips:url'], type: TipType.Url };
-		}
-
-		const rewoundPoly = rewind(community.geo_json, true);
-
-		// filter elements within community
-		const filteredElements: Element[] = $elements.filter((element) => {
-			let lat = latCalc(element['osm_json']);
-			let long = longCalc(element['osm_json']);
-
-			if (geoContains(rewoundPoly, [long, lat])) {
-				return true;
-			} else {
-				return false;
-			}
-		});
-
-		const communityEvents = $events.filter((event) =>
-			filteredElements.find((element) => element.id === event.element_id)
-		);
-
-		communityEvents.sort((a, b) => Date.parse(b['created_at']) - Date.parse(a['created_at']));
-
-		const findUser = (tagger: Event) => {
-			let foundUser = $users.find((user) => user.id == tagger['user_id']);
-
-			if (foundUser) {
-				if (!taggers.find((tagger) => tagger.id === foundUser?.id)) {
-					taggers.push(foundUser);
-				}
-
-				return foundUser;
-			} else {
-				return undefined;
-			}
-		};
-
-		communityEvents.forEach((event) => {
-			let elementMatch = filteredElements.find((element) => element.id === event['element_id']);
-
-			let location = elementMatch?.['osm_json'].tags?.name || undefined;
-
-			let tagger = findUser(event);
-
-			eventElements.push({
-				...event,
-				location: location || formatElementID(event['element_id']),
-				merchantId: event['element_id'],
-				tagger
-			});
-		});
-
-		eventElements = eventElements;
-		taggers = taggers;
-
-		const populateMap = () => {
-			// add map
-			map = leaflet.map(mapElement, { attributionControl: false });
-
-			// add tiles and basemaps
-			baseMaps = layers(leaflet, map);
-
-			// change broken marker image path in prod
-			leaflet.Icon.Default.prototype.options.imagePath = '/icons/';
-
-			// add OSM attribution
-			attribution(leaflet, map);
-
-			// create marker cluster groups
-			/* eslint-disable no-undef */
-			// @ts-expect-error
-			let markers = L.markerClusterGroup();
-			/* eslint-enable no-undef */
-			let upToDateLayer = leaflet.featureGroup.subGroup(markers);
-			let outdatedLayer = leaflet.featureGroup.subGroup(markers);
-			let legacyLayer = leaflet.featureGroup.subGroup(markers);
-
-			let overlayMaps = {
-				'Up-To-Date': upToDateLayer,
-				Outdated: outdatedLayer,
-				Legacy: legacyLayer
-			};
-
-			leaflet.control.layers(baseMaps, overlayMaps).addTo(map);
-
-			// add locate button to map
-			geolocate(leaflet, map);
-
-			// change default icons
-			changeDefaultIcons(true, leaflet, mapElement, DomEvent);
-
-			// get date from 1 year ago to add verified check if survey is current
-			let verifiedDate = calcVerifiedDate();
-
-			// add community area poly to map
-			if (community.geo_json) {
-				leaflet.geoJSON(community.geo_json, { style: { fill: false } }).addTo(map);
-			}
-
-			// add elements to map
-			filteredElements.forEach((element) => {
-				let icon = element.tags['icon:android'];
-				let payment = element.tags['payment:uri']
-					? { type: 'uri', url: element.tags['payment:uri'] }
-					: element.tags['payment:pouch']
-						? { type: 'pouch', username: element.tags['payment:pouch'] }
-						: element.tags['payment:coinos']
-							? { type: 'coinos', username: element.tags['payment:coinos'] }
-							: undefined;
-				let boosted =
-					element.tags['boost:expires'] && Date.parse(element.tags['boost:expires']) > Date.now()
-						? element.tags['boost:expires']
-						: undefined;
-
-				const elementOSM = element['osm_json'];
-
-				const lat = latCalc(elementOSM);
-				const long = longCalc(elementOSM);
-
-				let divIcon = generateIcon(leaflet, icon, boosted ? true : false);
-
-				let marker = generateMarker(
-					lat,
-					long,
-					divIcon,
-					elementOSM,
-					payment,
-					leaflet,
-					verifiedDate,
-					true,
-					boosted
-				);
-
-				let verified = verifiedArr(elementOSM);
-
-				if (verified.length && Date.parse(verified[0]) > verifiedDate) {
-					upToDateLayer.addLayer(marker);
-
-					if (upToDate === undefined) {
-						upToDate = 1;
-					} else {
-						upToDate++;
-					}
-				} else {
-					outdatedLayer.addLayer(marker);
-
-					if (outdated === undefined) {
-						outdated = 1;
-					} else {
-						outdated++;
-					}
-				}
-
-				if (elementOSM.tags && elementOSM.tags['payment:bitcoin']) {
-					legacyLayer.addLayer(marker);
-
-					if (legacy === undefined) {
-						legacy = 1;
-					} else {
-						legacy++;
-					}
-				}
-
-				if (total === undefined) {
-					total = 1;
-				} else {
-					total++;
-				}
-			});
-
-			map.addLayer(markers);
-			map.addLayer(upToDateLayer);
-			map.addLayer(outdatedLayer);
-			map.addLayer(legacyLayer);
-
-			map.fitBounds(leaflet.geoJSON(community.geo_json).getBounds());
-
-			mapLoaded = true;
-		};
-
-		populateMap();
-
-		if (!upToDate) {
-			upToDate = 0;
-		}
-
-		if (!outdated) {
-			outdated = 0;
-		}
-
-		if (!legacy) {
-			legacy = 0;
-		}
-
-		if (!total) {
-			total = 0;
-		}
-
-		upToDatePercent = upToDate ? (upToDate / (total / 100)).toFixed(0) : '0';
-
-		outdatedPercent = outdated ? (outdated / (total / 100)).toFixed(0) : '0';
-
-		legacyPercent = legacy ? (legacy / (total / 100)).toFixed(0) : '0';
-
-		grade = getGrade(Number(upToDatePercent));
-
-		issues = getIssues(filteredElements);
-
-		const populateCharts = () => {
-			const chartsReports = [...communityReports].sort(
-				(a, b) => Date.parse(a['created_at']) - Date.parse(b['created_at'])
-			);
-
-			const today = new Date();
-			const latestReport = chartsReports[chartsReports.length - 1];
-			const latestReportDate = new Date(latestReport.created_at);
-			const reportIsCurrent =
-				today.getDate() === latestReportDate.getDate() &&
-				today.getMonth() === latestReportDate.getMonth() &&
-				today.getFullYear() === latestReportDate.getFullYear();
-
-			if (!reportIsCurrent) {
-				chartsReports.push({
-					...latestReport,
-					id: latestReport.id + 1,
-					date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,
-					created_at: today.toISOString(),
-					updated_at: today.toISOString()
-				});
-			}
-
-			const theme = detectTheme();
-
-			updatedChart = new Chart(updatedChartCanvas, {
-				type: 'pie',
-				data: {
-					labels: ['Up-To-Date', 'Outdated'],
-					datasets: [
-						{
-							label: 'Locations',
-							data: [upToDate, outdated],
-							backgroundColor: ['rgb(16, 183, 145)', 'rgb(235, 87, 87)'],
-							hoverOffset: 4
-						}
-					]
-				},
-				options: {
-					maintainAspectRatio: false,
-					plugins: {
-						legend: {
-							labels: {
-								font: {
-									weight: 600
-								}
-							}
-						}
-					}
-				}
-			});
-
-			let percents = chartsReports.filter((report) => report.tags.up_to_date_percent);
-
-			upToDateChart = new Chart(upToDateChartCanvas, {
-				type: 'line',
-				data: {
-					labels: percents.map(({ date }) => date),
-					datasets: [
-						{
-							label: 'Up-To-Date Percent',
-							data: percents.map(({ tags: { up_to_date_percent } }) => up_to_date_percent),
-							fill: {
-								target: 'origin',
-								above: 'rgba(11, 144, 114, 0.2)'
-							},
-							borderColor: 'rgb(11, 144, 114)',
-							tension: 0.1,
-							pointStyle: false
-						}
-					]
-				},
-				options: {
-					maintainAspectRatio: false,
-					plugins: {
-						legend: {
-							labels: {
-								font: {
-									weight: 600
-								}
-							}
-						}
-					},
-					scales: {
-						x: {
-							ticks: {
-								maxTicksLimit: 5,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						},
-						y: {
-							min: 0,
-							max: 100,
-							ticks: {
-								precision: 0,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						}
-					},
-					interaction: {
-						intersect: false
-					}
-				}
-			});
-
-			totalChart = new Chart(totalChartCanvas, {
-				type: 'line',
-				data: {
-					labels: chartsReports.map(({ date }) => date),
-					datasets: [
-						{
-							label: 'Total Locations',
-							data: chartsReports.map(({ tags: { total_elements } }) => total_elements),
-							fill: {
-								target: 'origin',
-								above: 'rgba(0, 153, 175, 0.2)'
-							},
-							borderColor: 'rgb(0, 153, 175)',
-							tension: 0.1,
-							pointStyle: false
-						}
-					]
-				},
-				options: {
-					maintainAspectRatio: false,
-					plugins: {
-						legend: {
-							labels: {
-								font: {
-									weight: 600
-								}
-							}
-						}
-					},
-					scales: {
-						x: {
-							ticks: {
-								maxTicksLimit: 5,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						},
-						y: {
-							min: 0,
-							grace: '5%',
-							ticks: {
-								precision: 0,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						}
-					},
-					interaction: {
-						intersect: false
-					}
-				}
-			});
-
-			legacyChart = new Chart(legacyChartCanvas, {
-				type: 'line',
-				data: {
-					labels: chartsReports.map(({ date }) => date),
-					datasets: [
-						{
-							label: 'Legacy Locations',
-							data: chartsReports.map(({ tags: { legacy_elements } }) => legacy_elements),
-							fill: {
-								target: 'origin',
-								above: 'rgba(235, 87, 87, 0.2)'
-							},
-							borderColor: 'rgb(235, 87, 87)',
-							tension: 0.1,
-							pointStyle: false
-						}
-					]
-				},
-				options: {
-					maintainAspectRatio: false,
-					plugins: {
-						legend: {
-							labels: {
-								font: {
-									weight: 600
-								}
-							}
-						}
-					},
-					scales: {
-						x: {
-							ticks: {
-								maxTicksLimit: 5,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						},
-						y: {
-							min: 0,
-							grace: '5%',
-							ticks: {
-								precision: 0,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						}
-					},
-					interaction: {
-						intersect: false
-					}
-				}
-			});
-
-			paymentMethodChart = new Chart(paymentMethodChartCanvas, {
-				type: 'line',
-				data: {
-					labels: chartsReports.map(({ date }) => date),
-					datasets: [
-						{
-							label: 'On-chain',
-							data: chartsReports.map(
-								({ tags: { total_elements_onchain } }) => total_elements_onchain
-							),
-							fill: false,
-							borderColor: 'rgb(247, 147, 26)',
-							tension: 0.1,
-							pointStyle: false
-						},
-						{
-							label: 'Lightning',
-							data: chartsReports.map(
-								({ tags: { total_elements_lightning } }) => total_elements_lightning
-							),
-							fill: false,
-							borderColor: 'rgb(249, 193, 50)',
-							tension: 0.1,
-							pointStyle: false
-						},
-						{
-							label: 'Contactless',
-							data: chartsReports.map(
-								({ tags: { total_elements_lightning_contactless } }) =>
-									total_elements_lightning_contactless
-							),
-							fill: false,
-							borderColor: 'rgb(102, 16, 242)',
-							tension: 0.1,
-							pointStyle: false
-						}
-					]
-				},
-				options: {
-					maintainAspectRatio: false,
-					plugins: {
-						legend: {
-							labels: {
-								font: {
-									weight: 600
-								}
-							}
-						}
-					},
-					scales: {
-						x: {
-							ticks: {
-								maxTicksLimit: 5,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						},
-						y: {
-							min: 0,
-							grace: '5%',
-							ticks: {
-								precision: 0,
-								font: {
-									weight: 600
-								}
-							},
-							grid: {
-								color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'
-							}
-						}
-					},
-					interaction: {
-						intersect: false
-					}
-				}
-			});
-
-			chartsLoading = false;
-		};
-
-		populateCharts();
-
-		dataInitialized = true;
-	};
-
-	$: $users &&
-		$users.length &&
-		$events &&
-		$events.length &&
-		$elements &&
-		$elements.length &&
-		$areas &&
-		$areas.length &&
-		$reports &&
-		$reports.length &&
-		initialRenderComplete &&
-		!dataInitialized &&
-		initializeData();
-
-	const ticketTypes = ['Add', 'Verify'];
-	let showType = 'Add';
-
-	const tickets = data.tickets;
-	const ticketError = tickets === 'error' ? true : false;
-
-	$: ticketError && errToast('Could not load open tickets, please try again or contact BTC Map.');
-
-	const add =
-		tickets && tickets.length && !ticketError
-			? tickets.filter((issue: any) =>
-					issue.labels.find((label: any) => label.name === 'location-submission')
-				)
-			: [];
-	const verify =
-		tickets && tickets.length && !ticketError
-			? tickets.filter((issue: any) =>
-					issue.labels.find((label: any) => label.name === 'verify-submission')
-				)
-			: [];
-
-	const totalTickets = add.length + verify.length;
-
-	let avatar: string;
-	const name = data.name;
-	let org: string | undefined;
-	let sponsor: boolean | undefined;
-	let continent: Continents;
-	let website: string | undefined;
-	let email: string | undefined;
-	let nostr: string | undefined;
-	let twitter: string | undefined;
-	let secondTwitter: string | undefined;
-	let meetup: string | undefined;
-	let eventbrite: string | undefined;
-	let telegram: string | undefined;
-	let discord: string | undefined;
-	let youtube: string | undefined;
-	let github: string | undefined;
-	let reddit: string | undefined;
-	let instagram: string | undefined;
-	let whatsapp: string | undefined;
-	let facebook: string | undefined;
-	let linkedin: string | undefined;
-	let rss: string | undefined;
-	let signal: string | undefined;
-	let lightning: { destination: string; type: TipType } | undefined;
-
-	let total: number | undefined;
-	let upToDate: number | undefined;
-	let outdated: number | undefined;
-	let legacy: number | undefined;
-	let grade: Grade;
-
-	let gradeTooltip: HTMLButtonElement;
-
-	$: gradeTooltip &&
-		tippy([gradeTooltip], {
-			content: `<table>
-	<thead>
-		<tr>
-			<th class='mr-1 inline-block'>Up-To-Date</th>
-			<th>Grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>95-100%</td>
-			<td>5 Star</td>
-		</tr>
-		<tr>
-			<td>75-95%</td>
-			<td>4 Star</td>
-		</tr>
-		<tr>
-			<td>50-75%</td>
-			<td>3 Star</td>
-		</tr>
-		<tr>
-			<td>25-50%</td>
-			<td>2 Star</td>
-		</tr>
-		<tr>
-			<td>0-25%</td>
-			<td>1 Star</td>
-		</tr>
-	</tbody>
-</table>`,
-			allowHTML: true
-		});
-
-	let upToDatePercent: string | undefined;
-	let outdatedPercent: string | undefined;
-	let legacyPercent: string | undefined;
-
-	let updatedChartCanvas: HTMLCanvasElement;
-	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-	let updatedChart;
-
-	let hideArrow = false;
-	let activityDiv: HTMLDivElement;
-	let eventElements: ActivityEvent[] = [];
-
-	let eventCount = 50;
-	$: eventElementsPaginated = eventElements.slice(0, eventCount);
-
-	let taggers: User[] = [];
-	let taggerCount = 50;
-	$: taggersPaginated = taggers.slice(0, taggerCount);
-	let taggerDiv: HTMLDivElement;
-
-	let mapElement: HTMLDivElement;
-	let map: Map;
-	let mapLoaded = false;
-
-	let baseMaps: BaseMaps;
-
-	let issues: Issues = [];
-
-	let chartsLoading = true;
-	let upToDateChartCanvas: HTMLCanvasElement;
-	let upToDateChart: Chart<'line', number[], string>;
-	let totalChartCanvas: HTMLCanvasElement;
-	let totalChart: Chart<'line', number[], string>;
-	let legacyChartCanvas: HTMLCanvasElement;
-	let legacyChart: Chart<'line', number[], string>;
-	let paymentMethodChartCanvas: HTMLCanvasElement;
-	let paymentMethodChart: Chart<'line', number[], string>;
-
-	$: $theme !== undefined &&
-		!chartsLoading &&
-		updateChartThemes([upToDateChart, totalChart, legacyChart, paymentMethodChart]);
-
-	let leaflet: Leaflet;
-	let DomEvent: DomEventType;
-
-	onMount(async () => {
-		if (browser) {
-			// setup charts
-			updatedChartCanvas.getContext('2d');
-			upToDateChartCanvas.getContext('2d');
-			totalChartCanvas.getContext('2d');
-			legacyChartCanvas.getContext('2d');
-			paymentMethodChartCanvas.getContext('2d');
-
-			//import packages
-			leaflet = await import('leaflet');
-			// @ts-expect-error
-			DomEvent = await import('leaflet/src/dom/DomEvent');
-			/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
-			const leafletMarkerCluster = await import('leaflet.markercluster');
-			const leafletFeaturegroupSubgroup = await import('leaflet.featuregroup.subgroup');
-			const leafletLocateControl = await import('leaflet.locatecontrol');
-			/* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */
-
-			initialRenderComplete = true;
-		}
-	});
-
-	$: $theme !== undefined && mapLoaded && toggleMapButtons();
-
-	const closePopup = () => {
-		map.closePopup();
-	};
-
-	$: $theme !== undefined && mapLoaded && closePopup();
-
-	const toggleTheme = () => {
-		if ($theme === 'dark') {
-			baseMaps['OSM Bright'].remove();
-			baseMaps['Alidade Smooth Dark'].addTo(map);
-		} else {
-			baseMaps['Alidade Smooth Dark'].remove();
-			baseMaps['OSM Bright'].addTo(map);
-		}
-	};
-
-	$: $theme !== undefined && mapLoaded && toggleTheme();
-
-	onDestroy(async () => {
-		if (map) {
-			console.log('Unloading Leaflet map.');
-			map.remove();
-		}
-	});
+	const { name } = data;
 </script>
 
 <svelte:head>
@@ -891,530 +12,12 @@
 	<meta property="og:image" content="https://btcmap.org/images/og/communities.png" />
 	<meta property="twitter:title" content="{name ? name + ' - ' : ''}BTC Map Community" />
 	<meta property="twitter:image" content="https://btcmap.org/images/og/communities.png" />
-
-	{#if lightning && lightning.type === 'address'}
-		<meta name="lightning" content="lnurlp:{lightning.destination}" />
-		<meta property="alby:image" content={avatar} />
-		<meta property="alby:name" content={name} />
-	{:else}
-		<meta
-			name="lightning"
-			content="lnurlp:LNURL1DP68GURN8GHJ7CM0WFJJUCN5VDKKZUPWDAEXWTMVDE6HYMRS9ARKXVN4W5EQPSYZ34"
-		/>
-		<meta property="alby:image" content="/images/logo.svg" />
-		<meta property="alby:name" content="BTC Map" />
-	{/if}
 </svelte:head>
 
 <div class="bg-teal dark:bg-dark">
 	<Header />
 	<div class="mx-auto w-10/12 xl:w-[1200px]">
-		<main class="my-10 space-y-16 text-center md:my-20">
-			<section id="profile" class="space-y-8">
-				<div class="space-y-2">
-					{#if avatar}
-						<img
-							src={avatar}
-							alt="avatar"
-							class="mx-auto h-32 w-32 rounded-full object-cover"
-							on:error={function () {
-								this.src = '/images/communities/bitcoin.svg';
-							}}
-						/>
-					{:else}
-						<div class="mx-auto h-32 w-32 animate-pulse rounded-full bg-link/50" />
-					{/if}
-					<h1 class="text-4xl font-semibold !leading-tight text-primary dark:text-white">
-						{name || 'BTC Map Community'}
-					</h1>
-					{#if org}
-						<OrgBadge {org} />
-					{/if}
-					{#if sponsor}
-						<SponsorBadge />
-					{/if}
-					{#if continent}
-						<h2 class="text-xl uppercase text-primary dark:text-white">
-							{continent.replace('-', ' ')}
-							<i
-								class="fa-solid fa-earth-{continent === 'africa'
-									? 'africa'
-									: continent === 'asia'
-										? 'asia'
-										: continent === 'europe'
-											? 'europe'
-											: continent === 'north-america'
-												? 'americas'
-												: continent === 'oceania'
-													? 'oceania'
-													: continent === 'south-america'
-														? 'americas'
-														: ''}"
-							/>
-						</h2>
-					{:else}
-						<div class="mx-auto h-7 w-24 animate-pulse rounded bg-link/50" />
-					{/if}
-					{#if data.id}
-						<a
-							href={`/communities/map?community=${data.id}`}
-							class="inline-flex items-center justify-center text-xs text-link transition-colors hover:text-hover"
-							>View on community map <svg
-								class="ml-1 w-3"
-								width="16"
-								height="16"
-								viewBox="0 0 16 16"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M3 13L13 3M13 3H5.5M13 3V10.5"
-									stroke="currentColor"
-									stroke-width="1.5"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-							</svg></a
-						>
-					{/if}
-				</div>
-
-				{#if dataInitialized}
-					<Socials
-						{website}
-						{email}
-						{nostr}
-						{twitter}
-						{secondTwitter}
-						{meetup}
-						{eventbrite}
-						{telegram}
-						{discord}
-						{youtube}
-						{github}
-						{reddit}
-						{instagram}
-						{whatsapp}
-						{facebook}
-						{linkedin}
-						{rss}
-						{signal}
-					/>
-				{:else}
-					<div class="flex flex-wrap items-center justify-center">
-						<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
-						{#each Array(3) as skeleton}
-							<div class="m-1 h-10 w-10 animate-pulse rounded-full bg-link/50" />
-						{/each}
-					</div>
-				{/if}
-
-				{#if lightning}
-					<Tip destination={lightning.destination} type={lightning.type} user={name} />
-				{/if}
-			</section>
-
-			<section id="map-section">
-				<h3
-					class="rounded-t-3xl border border-b-0 border-statBorder p-5 text-center text-lg font-semibold text-primary dark:bg-white/10 dark:text-white md:text-left"
-				>
-					{name || 'BTC Map Community'} Map
-					<div class="flex items-center space-x-1 text-link">
-						{#if dataInitialized}
-							<div class="flex items-center space-x-1">
-								<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
-								{#each Array(grade) as star}
-									<i class="fa-solid fa-star" />
-								{/each}
-							</div>
-
-							<div class="flex items-center space-x-1">
-								<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
-								{#each Array(5 - grade) as star}
-									<i class="fa-solid fa-star opacity-25" />
-								{/each}
-							</div>
-						{:else}
-							<div class="flex items-center space-x-1">
-								<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
-								{#each Array(5) as star}
-									<i class="fa-solid fa-star animate-pulse text-link/50" />
-								{/each}
-							</div>
-						{/if}
-
-						<button bind:this={gradeTooltip}>
-							<i class="fa-solid fa-circle-info text-sm" />
-						</button>
-					</div>
-				</h3>
-
-				<div class="relative">
-					<div
-						bind:this={mapElement}
-						class="z-10 h-[300px] rounded-b-3xl border border-statBorder !bg-teal text-left dark:!bg-[#202f33] md:h-[600px]"
-					/>
-					{#if !mapLoaded}
-						<MapLoadingEmbed
-							style="h-[300px] md:h-[600px] border border-statBorder rounded-b-3xl"
-						/>
-					{/if}
-				</div>
-			</section>
-
-			<section id="stats">
-				<div
-					class="border border-statBorder dark:bg-white/10 {total === 0
-						? 'rounded-3xl'
-						: 'rounded-t-3xl'} grid md:grid-cols-2 xl:grid-cols-4"
-				>
-					<ProfileStat
-						title="Total Locations"
-						stat={total}
-						border="border-b xl:border-b-0 md:border-r border-statBorder"
-					/>
-					<ProfileStat
-						title="Up-To-Date"
-						stat={upToDate}
-						percent={total && total > 0 ? upToDatePercent : undefined}
-						border="border-b xl:border-b-0 xl:border-r border-statBorder"
-						tooltip="Locations that have been verified within one year."
-					/>
-					<ProfileStat
-						title="Outdated"
-						stat={outdated}
-						percent={total && total > 0 ? outdatedPercent : undefined}
-						border="border-b md:border-b-0 md:border-r border-statBorder"
-					/>
-					<ProfileStat
-						title="Legacy"
-						stat={legacy}
-						percent={total && total > 0 ? legacyPercent : undefined}
-						tooltip="Locations with a <em>payment:bitcoin</em> tag instead of the
-					<em>currency:XBT</em> tag."
-					/>
-				</div>
-
-				<div
-					class="{total === 0
-						? 'hidden'
-						: ''} relative rounded-b-3xl border border-t-0 border-statBorder p-5 dark:bg-white/10"
-				>
-					{#if chartsLoading}
-						<div>
-							<i
-								class="fa-solid fa-chart-pie absolute left-1/2 top-1/2 h-52 w-52 -translate-x-1/2 -translate-y-1/2 animate-pulse text-link/50 md:h-60 md:w-60"
-							/>
-						</div>
-					{/if}
-
-					<canvas bind:this={updatedChartCanvas} width="100%" height="250" />
-				</div>
-			</section>
-
-			<section id="taggers">
-				<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
-					<h3
-						class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
-					>
-						{name || 'BTC Map Community'} Supertaggers
-					</h3>
-					<div bind:this={taggerDiv} class="hide-scroll max-h-[375px] overflow-scroll p-1">
-						{#if taggers && taggers.length}
-							<div class="flex flex-wrap items-center justify-center">
-								{#each taggersPaginated as tagger}
-									<div class="m-4 space-y-1 transition-transform hover:scale-110">
-										<a href="/tagger/{tagger.id}">
-											<img
-												src={tagger.osm_json.img
-													? tagger.osm_json.img.href
-													: '/images/satoshi-nakamoto.png'}
-												alt="avatar"
-												class="mx-auto h-20 w-20 rounded-full object-cover"
-												on:error={function () {
-													this.src = '/images/satoshi-nakamoto.png';
-												}}
-											/>
-											<p class="text-center font-semibold text-body dark:text-white">
-												{tagger.osm_json.display_name.length > 21
-													? tagger.osm_json.display_name.slice(0, 18) + '...'
-													: tagger.osm_json.display_name}
-											</p>
-										</a>
-									</div>
-								{/each}
-							</div>
-
-							{#if taggersPaginated.length !== taggers.length}
-								<button
-									class="mx-auto !mb-4 block text-xl font-semibold text-link transition-colors hover:text-hover"
-									on:click={() => (taggerCount = taggerCount + 50)}>Load More</button
-								>
-							{/if}
-						{:else if !dataInitialized}
-							<div class="flex flex-wrap items-center justify-center">
-								<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
-								{#each Array(5) as tagger}
-									<div class="m-4 space-y-1 transition-transform hover:scale-110">
-										<p class="mx-auto h-20 w-20 animate-pulse rounded-full bg-link/50" />
-										<p class="mx-auto h-5 w-28 animate-pulse rounded bg-link/50" />
-									</div>
-								{/each}
-							</div>
-						{:else}
-							<p class="p-5 text-center text-body dark:text-white">No supertaggers to display.</p>
-						{/if}
-					</div>
-				</div>
-			</section>
-
-			<section id="activity">
-				<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
-					<h3
-						class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
-					>
-						{name || 'BTC Map Community'} Activity
-					</h3>
-
-					<div
-						bind:this={activityDiv}
-						class="hide-scroll relative max-h-[375px] space-y-2 overflow-y-scroll"
-						on:scroll={() => {
-							if (dataInitialized && !hideArrow) {
-								hideArrow = true;
-							}
-						}}
-					>
-						{#if eventElements && eventElements.length}
-							{#each eventElementsPaginated as event}
-								<LatestTagger
-									location={event.location}
-									action={event.type}
-									user={event.tagger}
-									time={event['created_at']}
-									latest={event === eventElements[0] ? true : false}
-									merchantId={event.merchantId}
-								/>
-							{/each}
-
-							{#if eventElementsPaginated.length !== eventElements.length}
-								<button
-									class="mx-auto !mb-5 block text-xl font-semibold text-link transition-colors hover:text-hover"
-									on:click={() => (eventCount = eventCount + 50)}>Load More</button
-								>
-							{:else if eventElements.length > 10}
-								<TopButton scroll={activityDiv} style="!mb-5" />
-							{/if}
-
-							{#if !hideArrow && eventElements.length > 5}
-								<svg
-									class="absolute bottom-4 left-[calc(50%-8px)] z-20 h-4 w-4 animate-bounce text-primary dark:text-white"
-									fill="currentColor"
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 512 512"
-									><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
-										d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
-									/></svg
-								>
-							{/if}
-						{:else if !dataInitialized}
-							<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
-							{#each Array(5) as skeleton}
-								<TaggerSkeleton />
-							{/each}
-						{:else}
-							<p class="p-5 text-body dark:text-white">No activity to display.</p>
-						{/if}
-					</div>
-				</div>
-			</section>
-
-			<IssuesTable
-				title="{name || 'BTC Map Community'} Tagging Issues"
-				{issues}
-				loading={!dataInitialized}
-			/>
-
-			<section id="tickets">
-				<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
-					<div class="p-5 text-lg font-semibold text-primary dark:text-white">
-						<h3 class="mb-2 text-center md:text-left">
-							{name || 'BTC Map Community'} Tickets
-							{#if tickets && !ticketError}
-								<span class="text-base">({totalTickets})</span>
-							{/if}
-							<InfoTooltip
-								tooltip="Tickets up for grabs from our noob forms! Anybody can help add or verify submissions on OpenStreetMap."
-							/>
-						</h3>
-
-						{#each ticketTypes as type}
-							<button
-								class="mx-auto block w-40 border border-link py-2 text-center md:inline {type ===
-								'Add'
-									? 'rounded-t md:rounded-l md:rounded-tr-none'
-									: type === 'Verify'
-										? 'rounded-b md:rounded-r md:rounded-bl-none'
-										: ''} {showType === type ? 'bg-link text-white' : ''} transition-colors"
-								on:click={() => (showType = type)}
-								disabled={!tickets || ticketError}
-							>
-								{type}
-							</button>
-						{/each}
-					</div>
-
-					{#if tickets && !ticketError}
-						{#if showType === 'Add'}
-							{#if add.length}
-								{#each add as ticket}
-									<OpenTicket
-										assignees={ticket.assignees}
-										comments={ticket.comments}
-										created={ticket.created_at}
-										url={ticket.html_url}
-										labels={ticket.labels}
-										id={ticket.number}
-										name={ticket.title}
-										user={ticket.user}
-									/>
-								{/each}
-							{:else}
-								<p class="border-t border-statBorder p-5 text-center text-body dark:text-white">
-									No open <strong>add</strong> tickets.
-								</p>
-							{/if}
-						{:else if showType === 'Verify'}
-							{#if verify.length}
-								{#each verify as ticket}
-									<OpenTicket
-										assignees={ticket.assignees}
-										comments={ticket.comments}
-										created={ticket.created_at}
-										url={ticket.html_url}
-										labels={ticket.labels}
-										id={ticket.number}
-										name={ticket.title}
-										user={ticket.user}
-									/>
-								{/each}
-							{:else}
-								<p class="border-t border-statBorder p-5 text-center text-body dark:text-white">
-									No open <strong>verify</strong> tickets.
-								</p>
-							{/if}
-						{/if}
-
-						{#if tickets?.length === 100}
-							<p
-								class="border-t border-statBorder p-5 text-center font-semibold text-primary dark:text-white"
-							>
-								View all open tickets directly on <a
-									href="https://github.com/teambtcmap/btcmap-data/issues?q=is%3Aopen+is%3Aissue+label%3A%22{name.replaceAll(
-										' ',
-										'+'
-									)}%22"
-									target="_blank"
-									rel="noreferrer"
-									class="text-link transition-colors hover:text-hover">GitHub</a
-								>.
-							</p>
-						{/if}
-					{:else}
-						<p class="border-t border-statBorder p-5 text-center text-body dark:text-white">
-							Error fetching tickets.
-						</p>
-					{/if}
-				</div>
-			</section>
-
-			<section id="charts" class="space-y-10">
-				<div class="w-full rounded-3xl border border-statBorder dark:bg-white/10">
-					<h3
-						class="border-b border-statBorder p-5 text-center text-lg font-semibold text-primary dark:text-white md:text-left"
-					>
-						{name || 'BTC Map Community'} Charts
-					</h3>
-					<div class="border-b border-statBorder p-5">
-						<div class="relative">
-							{#if chartsLoading}
-								<div
-									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
-								>
-									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
-								</div>
-							{/if}
-							<canvas bind:this={upToDateChartCanvas} width="100%" height="400" />
-						</div>
-						<p class="mt-1 text-center text-sm text-body dark:text-white">
-							*Locations with a <em>survey:date</em>, <em>check_date</em>, or
-							<em>check_date:currency:XBT</em> tag less than one year old.
-						</p>
-					</div>
-
-					<div class="border-b border-statBorder p-5">
-						<div class="relative">
-							{#if chartsLoading}
-								<div
-									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
-								>
-									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
-								</div>
-							{/if}
-							<canvas bind:this={totalChartCanvas} width="100%" height="400" />
-						</div>
-						<p class="mt-1 text-center text-sm text-body dark:text-white">
-							*Locations accepting any bitcoin payment method.
-						</p>
-					</div>
-
-					<div class="border-b border-statBorder p-5">
-						<div class="relative">
-							{#if chartsLoading}
-								<div
-									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
-								>
-									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
-								</div>
-							{/if}
-							<canvas bind:this={legacyChartCanvas} width="100%" height="400" />
-						</div>
-						<p class="mt-1 text-center text-sm text-body dark:text-white">
-							*Locations with a <em>payment:bitcoin</em> tag instead of the
-							<em>currency:XBT</em> tag.
-						</p>
-					</div>
-
-					<div class="p-5">
-						<div class="relative">
-							{#if chartsLoading}
-								<div
-									class="absolute left-0 top-0 flex h-[400px] w-full animate-pulse items-center justify-center rounded-3xl border border-link/50"
-								>
-									<i class="fa-solid fa-chart-area h-24 w-24 animate-pulse text-link/50" />
-								</div>
-							{/if}
-							<canvas bind:this={paymentMethodChartCanvas} width="100%" height="400" />
-						</div>
-						<p class="mt-1 text-center text-sm text-body dark:text-white">
-							*Locations with <em>payment:onchain</em>, <em>payment:lightning</em> and
-							<em>payment:lightning_contactless</em> tags.
-						</p>
-					</div>
-				</div>
-			</section>
-
-			<p class="text-center text-sm text-body dark:text-white md:text-left">
-				*More information on bitcoin mapping tags can be found <a
-					href="https://wiki.btcmap.org/general/tagging-instructions.html#tagging-guidance"
-					target="_blank"
-					rel="noreferrer"
-					class="text-link transition-colors hover:text-hover">here</a
-				>.
-				<br />
-				*Chart data updated once every 24 hours.
-			</p>
-		</main>
+		<AreaPage type="community" {data} />
 
 		<Footer />
 	</div>
diff --git a/src/routes/countries/+page.svelte b/src/routes/countries/+page.svelte
new file mode 100644
index 00000000..94ddc806
--- /dev/null
+++ b/src/routes/countries/+page.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { CountrySection, Footer, Header, HeaderPlaceholder, PrimaryButton } from '$lib/comp';
+	import { areaError, areas, theme } from '$lib/store';
+	import { detectTheme, errToast, validateContinents } from '$lib/utils';
+	import { onMount } from 'svelte';
+
+	// alert for area errors
+	$: $areaError && errToast($areaError);
+
+	$: countries =
+		$areas && $areas.length
+			? $areas
+					.filter(
+						(area) =>
+							area.tags.type === 'country' &&
+							area.id.length === 2 &&
+							area.tags.geo_json &&
+							area.tags.name &&
+							area.tags.continent &&
+							validateContinents(area.tags.continent)
+					)
+					.sort((a, b) => {
+						const nameA = a.tags.name.toUpperCase(); // ignore upper and lowercase
+						const nameB = b.tags.name.toUpperCase(); // ignore upper and lowercase
+						if (nameA < nameB) {
+							return -1;
+						}
+						if (nameA > nameB) {
+							return 1;
+						}
+						// names must be equal
+						return 0;
+					})
+			: undefined;
+
+	$: africa = countries && countries.filter((country) => country.tags.continent === 'Africa');
+	$: asia = countries && countries.filter((country) => country.tags.continent === 'Asia');
+	$: europe = countries && countries.filter((country) => country.tags.continent === 'Europe');
+	$: northAmerica =
+		countries && countries.filter((country) => country.tags.continent === 'North America');
+	$: oceania = countries && countries.filter((country) => country.tags.continent === 'Oceania');
+	$: southAmerica =
+		countries && countries.filter((country) => country.tags.continent === 'South America');
+
+	let section: string;
+	const sections = [
+		'--Continents--',
+		'Africa',
+		'Asia',
+		'Europe',
+		'North America',
+		'Oceania',
+		'South America'
+	];
+	$: countrySections = [
+		{
+			section: 'Africa',
+			countries: africa
+		},
+		{
+			section: 'Asia',
+			countries: asia
+		},
+		{
+			section: 'Europe',
+			countries: europe
+		},
+		{
+			section: 'North America',
+			countries: northAmerica
+		},
+		{
+			section: 'Oceania',
+			countries: oceania
+		},
+		{
+			section: 'South America',
+			countries: southAmerica
+		}
+	];
+
+	onMount(async () => {
+		if (browser) {
+			if (location.hash) {
+				section = decodeURIComponent(location.hash).slice(1);
+			} else {
+				section = 'Africa';
+			}
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>BTC Map - Countries</title>
+	<meta property="og:image" content="https://btcmap.org/images/og/countries.png" />
+	<meta property="twitter:title" content="BTC Map - Countries" />
+	<meta property="twitter:image" content="https://btcmap.org/images/og/countries.png" />
+</svelte:head>
+
+<div class="bg-teal dark:bg-dark">
+	<Header />
+	<div class="mx-auto w-10/12 xl:w-[1200px]">
+		<main class="my-10 space-y-10 text-center md:my-20">
+			{#if typeof window !== 'undefined'}
+				<h1
+					class="{detectTheme() === 'dark' || $theme === 'dark'
+						? 'text-white'
+						: 'gradient'} text-4xl font-semibold !leading-tight md:text-5xl"
+				>
+					Bitcoin adoption by countries.
+				</h1>
+			{:else}
+				<HeaderPlaceholder />
+			{/if}
+
+			<h2 class="mx-auto w-full text-xl font-semibold text-primary dark:text-white lg:w-[800px]">
+				Your country? Your map!
+			</h2>
+
+			<PrimaryButton
+				text="View leaderboard"
+				style="md:w-[200px] mx-auto py-3 rounded-xl"
+				link="/countries/leaderboard"
+			/>
+
+			<div>
+				<div class="mb-5 justify-between md:flex">
+					{#if section}
+						<h2
+							class="mb-2 text-3xl font-semibold text-primary dark:text-white md:mb-0 md:text-left"
+						>
+							<a href="/countries#{encodeURIComponent(section)}">{section}</a>
+						</h2>
+
+						<select
+							class="w-full rounded-2xl border-2 border-input bg-white px-2 py-3 text-primary transition-all focus:outline-link dark:bg-white/[0.15] dark:text-white md:w-auto"
+							bind:value={section}
+							on:change={(e) => {
+								// @ts-expect-error
+								section = e.target?.value;
+								// @ts-expect-error
+								location.hash = encodeURIComponent(e.target?.value);
+							}}
+						>
+							{#each sections as option}
+								<option disabled={option.startsWith('--')} value={option}>{option}</option>
+							{/each}
+						</select>
+					{/if}
+				</div>
+
+				{#each countrySections as item}
+					{#if section === item.section}
+						<CountrySection countries={item.countries} />
+					{/if}
+				{/each}
+			</div>
+		</main>
+
+		<Footer />
+	</div>
+</div>
+
+{#if typeof window !== 'undefined'}
+	{#if detectTheme() === 'dark' || $theme === 'dark'}
+		<style>
+			select option {
+				--tw-bg-opacity: 1;
+				background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+			}
+		</style>
+	{/if}
+{/if}
diff --git a/src/routes/countries/leaderboard/+page.svelte b/src/routes/countries/leaderboard/+page.svelte
new file mode 100644
index 00000000..d661e79b
--- /dev/null
+++ b/src/routes/countries/leaderboard/+page.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { AreaLeaderboard, Footer, Header, HeaderPlaceholder, PrimaryButton } from '$lib/comp';
+	import { theme } from '$lib/store';
+	import { detectTheme } from '$lib/utils';
+</script>
+
+<svelte:head>
+	<title>BTC Map - Countries Leaderboard</title>
+	<meta property="og:image" content="https://btcmap.org/images/og/top-countries.png" />
+	<meta property="twitter:title" content="BTC Map - Countries Leaderboard" />
+	<meta property="twitter:image" content="https://btcmap.org/images/og/top-countries.png" />
+</svelte:head>
+
+<div class="bg-teal dark:bg-dark">
+	<Header />
+
+	<main class="mt-10">
+		<div class="mx-auto w-10/12 space-y-10 xl:w-[1200px]">
+			{#if typeof window !== 'undefined'}
+				<h1
+					class="{detectTheme() === 'dark' || $theme === 'dark'
+						? 'text-white'
+						: 'gradient'} text-center text-4xl font-semibold !leading-tight md:text-5xl"
+				>
+					Top Countries
+				</h1>
+			{:else}
+				<HeaderPlaceholder />
+			{/if}
+
+			<h2
+				class="mx-auto w-full text-center text-xl font-semibold text-primary dark:text-white lg:w-[800px]"
+			>
+				Insights into bitcoin adoption worldwide!
+			</h2>
+
+			<PrimaryButton
+				text="View directory"
+				style="md:w-[200px] mx-auto py-3 rounded-xl"
+				link="/countries"
+			/>
+
+			<AreaLeaderboard type="country" />
+
+			<Footer />
+		</div>
+	</main>
+</div>
diff --git a/src/routes/country/[area]/+page.server.ts b/src/routes/country/[area]/+page.server.ts
new file mode 100644
index 00000000..559dd5ed
--- /dev/null
+++ b/src/routes/country/[area]/+page.server.ts
@@ -0,0 +1,42 @@
+import { GITHUB_API_KEY } from '$env/static/private';
+import { error } from '@sveltejs/kit';
+import axios from 'axios';
+import axiosRetry from 'axios-retry';
+import type { PageServerLoad } from './$types';
+
+axiosRetry(axios, { retries: 3, retryDelay: axiosRetry.exponentialDelay });
+
+export const load: PageServerLoad = async ({ params }) => {
+	const { area } = params;
+	try {
+		const response = await axios.get(`https://api.btcmap.org/v2/areas/${area}`);
+
+		const data = response.data;
+
+		if (data && data.id && data.tags && data.tags.name) {
+			const headers = {
+				Authorization: `Bearer ${GITHUB_API_KEY}`,
+				Accept: 'application/vnd.github+json'
+			};
+
+			const issues = await axios
+				.get(
+					`https://api.github.com/repos/teambtcmap/btcmap-data/issues?per_page=100&labels=${data.tags.name}`,
+					{ headers }
+				)
+				.then(function (response) {
+					// handle success
+					return response.data;
+				})
+				.catch(function (error) {
+					// handle error
+					console.log(error);
+					return 'error';
+				});
+
+			return { id: data.id, name: data.tags.name, tickets: issues };
+		}
+	} catch (err) {
+		error(404, 'Country Not Found');
+	}
+};
diff --git a/src/routes/country/[area]/+page.svelte b/src/routes/country/[area]/+page.svelte
new file mode 100644
index 00000000..3b8b0c27
--- /dev/null
+++ b/src/routes/country/[area]/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let data: AreaPageProps;
+
+	import { AreaPage, Footer, Header } from '$lib/comp';
+	import type { AreaPageProps } from '$lib/types';
+
+	const { name } = data;
+</script>
+
+<svelte:head>
+	<title>{name ? name + ' - ' : ''}BTC Map Country</title>
+	<meta property="og:image" content="https://btcmap.org/images/og/countries.png" />
+	<meta property="twitter:title" content="{name ? name + ' - ' : ''}BTC Map Country" />
+	<meta property="twitter:image" content="https://btcmap.org/images/og/countries.png" />
+</svelte:head>
+
+<div class="bg-teal dark:bg-dark">
+	<Header />
+	<div class="mx-auto w-10/12 xl:w-[1200px]">
+		<AreaPage type="country" {data} />
+
+		<Footer />
+	</div>
+</div>
diff --git a/src/routes/media/+page.svelte b/src/routes/media/+page.svelte
index 01e03062..43c0d67e 100644
--- a/src/routes/media/+page.svelte
+++ b/src/routes/media/+page.svelte
@@ -15,6 +15,7 @@
 		{ link: '/images/og/add-community.png', name: 'Add Community' },
 		{ link: '/images/og/add.png', name: 'Add Location' },
 		{ link: '/images/og/communities.png', name: 'Communities' },
+		{ link: '/images/og/countries.png', name: 'Countries' },
 		{ link: '/images/og/apps.png', name: 'Download Apps' },
 		{ link: '/images/og/badges.png', name: 'Earn Badges' },
 		{ link: '/images/og/home.png', name: 'Main' },
@@ -25,6 +26,7 @@
 		{ link: '/images/og/supertagger.png', name: 'Supertagger Profile' },
 		{ link: '/images/og/support.png', name: 'Support Us' },
 		{ link: '/images/og/top-communities.png', name: 'Top Communities' },
+		{ link: '/images/og/top-countries.png', name: 'Top Countries' },
 		{ link: '/images/og/verify.png', name: 'Verify Locations' }
 	];
 
diff --git a/src/routes/merchant/[id]/+page.svelte b/src/routes/merchant/[id]/+page.svelte
index e85fbb17..15dac309 100644
--- a/src/routes/merchant/[id]/+page.svelte
+++ b/src/routes/merchant/[id]/+page.svelte
@@ -853,7 +853,7 @@
 											alt="logo"
 											class="mx-auto h-20 w-20 rounded-full object-cover"
 											on:error={function () {
-												this.src = '/images/communities/bitcoin.svg';
+												this.src = '/images/bitcoin.svg';
 											}}
 										/>
 										<p class="text-center font-semibold text-body dark:text-white">
diff --git a/static/btcmap.webmanifest b/static/btcmap.webmanifest
index cc9a3e18..4774a3db 100644
--- a/static/btcmap.webmanifest
+++ b/static/btcmap.webmanifest
@@ -634,6 +634,20 @@
 				}
 			]
 		},
+		{
+			"name": "Countries",
+			"short_name": "Countries",
+			"description": "Bitcoin adoption by countries",
+			"url": "/countries",
+			"icons": [
+				{
+					"src": "/icons/pwa/maskable/maskable_icon_x96.png",
+					"sizes": "96x96",
+					"type": "image/png",
+					"purpose": "maskable"
+				}
+			]
+		},
 		{
 			"name": "Support Us",
 			"short_name": "Support",
diff --git a/static/icons/mobile-nav/spritesheet.svg b/static/icons/mobile-nav/spritesheet.svg
index c70212c5..1b996453 100644
--- a/static/icons/mobile-nav/spritesheet.svg
+++ b/static/icons/mobile-nav/spritesheet.svg
@@ -13,6 +13,12 @@
     <path opacity="0.12" d="M5 5.2C5 4.0799 5 3.51984 5.21799 3.09202C5.40973 2.71569 5.71569 2.40973 6.09202 2.21799C6.51984 2 7.0799 2 8.2 2H15.8C16.9201 2 17.4802 2 17.908 2.21799C18.2843 2.40973 18.5903 2.71569 18.782 3.09202C19 3.51984 19 4.07989 19 5.2V18.8C19 19.9201 19 20.4802 18.782 20.908C18.5903 21.2843 18.2843 21.5903 17.908 21.782C17.4802 22 16.9201 22 15.8 22H8.2C7.0799 22 6.51984 22 6.09202 21.782C5.71569 21.5903 5.40973 21.2843 5.21799 20.908C5 20.4802 5 19.9201 5 18.8V5.2Z" fill="#0099AF"></path>
     <path d="M12 17.5H12.01M8.2 22H15.8C16.9201 22 17.4802 22 17.908 21.782C18.2843 21.5903 18.5903 21.2843 18.782 20.908C19 20.4802 19 19.9201 19 18.8V5.2C19 4.07989 19 3.51984 18.782 3.09202C18.5903 2.71569 18.2843 2.40973 17.908 2.21799C17.4802 2 16.9201 2 15.8 2H8.2C7.0799 2 6.51984 2 6.09202 2.21799C5.71569 2.40973 5.40973 2.71569 5.21799 3.09202C5 3.51984 5 4.0799 5 5.2V18.8C5 19.9201 5 20.4802 5.21799 20.908C5.40973 21.2843 5.71569 21.5903 6.09202 21.782C6.51984 22 7.07989 22 8.2 22ZM12.5 17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5C11.5 17.2239 11.7239 17 12 17C12.2761 17 12.5 17.2239 12.5 17.5Z" stroke="#0099AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
   </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="areas">
+    <path d="M96 151.4V360.6c9.7 5.6 17.8 13.7 23.4 23.4H328.6c0-.1 .1-.2 .1-.3l-4.5-7.9-32-56 0 0c-1.4 .1-2.8 .1-4.2 .1c-35.3 0-64-28.7-64-64s28.7-64 64-64c1.4 0 2.8 0 4.2 .1l0 0 32-56 4.5-7.9-.1-.3H119.4c-5.6 9.7-13.7 17.8-23.4 23.4zM384.3 352c35.2 .2 63.7 28.7 63.7 64c0 35.3-28.7 64-64 64c-23.7 0-44.4-12.9-55.4-32H119.4c-11.1 19.1-31.7 32-55.4 32c-35.3 0-64-28.7-64-64c0-23.7 12.9-44.4 32-55.4V151.4C12.9 140.4 0 119.7 0 96C0 60.7 28.7 32 64 32c23.7 0 44.4 12.9 55.4 32H328.6c11.1-19.1 31.7-32 55.4-32c35.3 0 64 28.7 64 64c0 35.3-28.5 63.8-63.7 64l-4.5 7.9-32 56-2.3 4c4.2 8.5 6.5 18 6.5 28.1s-2.3 19.6-6.5 28.1l2.3 4 32 56 4.5 7.9z" fill="#0099AF"></path>
+  </symbol>
+    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="areas-highlight">
+    <path d="M96 151.4V360.6c9.7 5.6 17.8 13.7 23.4 23.4H328.6c0-.1 .1-.2 .1-.3l-4.5-7.9-32-56 0 0c-1.4 .1-2.8 .1-4.2 .1c-35.3 0-64-28.7-64-64s28.7-64 64-64c1.4 0 2.8 0 4.2 .1l0 0 32-56 4.5-7.9-.1-.3H119.4c-5.6 9.7-13.7 17.8-23.4 23.4zM384.3 352c35.2 .2 63.7 28.7 63.7 64c0 35.3-28.7 64-64 64c-23.7 0-44.4-12.9-55.4-32H119.4c-11.1 19.1-31.7 32-55.4 32c-35.3 0-64-28.7-64-64c0-23.7 12.9-44.4 32-55.4V151.4C12.9 140.4 0 119.7 0 96C0 60.7 28.7 32 64 32c23.7 0 44.4 12.9 55.4 32H328.6c11.1-19.1 31.7-32 55.4-32c35.3 0 64 28.7 64 64c0 35.3-28.5 63.8-63.7 64l-4.5 7.9-32 56-2.3 4c4.2 8.5 6.5 18 6.5 28.1s-2.3 19.6-6.5 28.1l2.3 4 32 56 4.5 7.9z" fill="#144046"></path>
+  </symbol>
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 12" id="bars">
     <rect width="34" height="3" fill="currentColor"></rect>
     <rect y="9" width="34" height="3" fill="currentColor"></rect>
@@ -24,14 +30,14 @@
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="communities">
     <path d="M17.9999 18.7191C18.2474 18.7396 18.4978 18.75 18.7506 18.75C19.7989 18.75 20.8054 18.5708 21.741 18.2413C21.7473 18.1617 21.7506 18.0812 21.7506 18C21.7506 16.3431 20.4074 15 18.7506 15C18.123 15 17.5403 15.1927 17.0587 15.5222M17.9999 18.7191C18 18.7294 18 18.7397 18 18.75C18 18.975 17.9876 19.1971 17.9635 19.4156C16.2067 20.4237 14.1707 21 12 21C9.82933 21 7.79327 20.4237 6.03651 19.4156C6.01238 19.1971 6 18.975 6 18.75C6 18.7397 6.00003 18.7295 6.00008 18.7192M17.9999 18.7191C17.994 17.5426 17.6494 16.4461 17.0587 15.5222M17.0587 15.5222C15.9928 13.8552 14.1255 12.75 12 12.75C9.87479 12.75 8.00765 13.8549 6.94169 15.5216M6.94169 15.5216C6.46023 15.1925 5.87796 15 5.25073 15C3.59388 15 2.25073 16.3431 2.25073 18C2.25073 18.0812 2.25396 18.1617 2.26029 18.2413C3.19593 18.5708 4.2024 18.75 5.25073 18.75C5.50307 18.75 5.75299 18.7396 6.00008 18.7192M6.94169 15.5216C6.35071 16.4457 6.00598 17.5424 6.00008 18.7192M15 6.75C15 8.40685 13.6569 9.75 12 9.75C10.3431 9.75 9 8.40685 9 6.75C9 5.09315 10.3431 3.75 12 3.75C13.6569 3.75 15 5.09315 15 6.75ZM21 9.75C21 10.9926 19.9926 12 18.75 12C17.5074 12 16.5 10.9926 16.5 9.75C16.5 8.50736 17.5074 7.5 18.75 7.5C19.9926 7.5 21 8.50736 21 9.75ZM7.5 9.75C7.5 10.9926 6.49264 12 5.25 12C4.00736 12 3 10.9926 3 9.75C3 8.50736 4.00736 7.5 5.25 7.5C6.49264 7.5 7.5 8.50736 7.5 9.75Z" stroke="#0099AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
   </symbol>
-  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="communities-highlight">
-    <path d="M17.9999 18.7191C18.2474 18.7396 18.4978 18.75 18.7506 18.75C19.7989 18.75 20.8054 18.5708 21.741 18.2413C21.7473 18.1617 21.7506 18.0812 21.7506 18C21.7506 16.3431 20.4074 15 18.7506 15C18.123 15 17.5403 15.1927 17.0587 15.5222M17.9999 18.7191C18 18.7294 18 18.7397 18 18.75C18 18.975 17.9876 19.1971 17.9635 19.4156C16.2067 20.4237 14.1707 21 12 21C9.82933 21 7.79327 20.4237 6.03651 19.4156C6.01238 19.1971 6 18.975 6 18.75C6 18.7397 6.00003 18.7295 6.00008 18.7192M17.9999 18.7191C17.994 17.5426 17.6494 16.4461 17.0587 15.5222M17.0587 15.5222C15.9928 13.8552 14.1255 12.75 12 12.75C9.87479 12.75 8.00765 13.8549 6.94169 15.5216M6.94169 15.5216C6.46023 15.1925 5.87796 15 5.25073 15C3.59388 15 2.25073 16.3431 2.25073 18C2.25073 18.0812 2.25396 18.1617 2.26029 18.2413C3.19593 18.5708 4.2024 18.75 5.25073 18.75C5.50307 18.75 5.75299 18.7396 6.00008 18.7192M6.94169 15.5216C6.35071 16.4457 6.00598 17.5424 6.00008 18.7192M15 6.75C15 8.40685 13.6569 9.75 12 9.75C10.3431 9.75 9 8.40685 9 6.75C9 5.09315 10.3431 3.75 12 3.75C13.6569 3.75 15 5.09315 15 6.75ZM21 9.75C21 10.9926 19.9926 12 18.75 12C17.5074 12 16.5 10.9926 16.5 9.75C16.5 8.50736 17.5074 7.5 18.75 7.5C19.9926 7.5 21 8.50736 21 9.75ZM7.5 9.75C7.5 10.9926 6.49264 12 5.25 12C4.00736 12 3 10.9926 3 9.75C3 8.50736 4.00736 7.5 5.25 7.5C6.49264 7.5 7.5 8.50736 7.5 9.75Z" stroke="#144046" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-  </symbol>
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="contribute">
     <path d="M14.3179 21.8659C14.4251 22.266 14.8363 22.5035 15.2364 22.3963C15.6365 22.289 15.874 21.8778 15.7668 21.4777L14.3179 21.8659ZM13.6835 16.6007L13.8339 15.8659C13.6026 15.8186 13.3625 15.8829 13.1859 16.0396L13.6835 16.6007ZM11.1741 18.826L10.4254 18.7811C10.4073 19.0839 10.5733 19.3678 10.8461 19.5005C11.1189 19.6332 11.4448 19.5884 11.6717 19.3872L11.1741 18.826ZM11.7425 9.35623L12.3684 8.94299C12.1905 8.67359 11.8602 8.54824 11.5484 8.63179C11.2366 8.71534 11.0132 8.98905 10.9939 9.3113L11.7425 9.35623ZM16.9697 17.2731L16.8193 18.0079C17.1165 18.0687 17.421 17.9445 17.591 17.6932C17.7609 17.4419 17.7627 17.113 17.5955 16.8599L16.9697 17.2731ZM5.63604 16.864C5.92893 17.1569 6.40381 17.1569 6.6967 16.864C6.98959 16.5711 6.98959 16.0962 6.6967 15.8033L5.63604 16.864ZM19.5 10.4999C19.5 10.9141 19.8358 11.2499 20.25 11.2499C20.6642 11.2498 21 10.9141 21 10.4998L19.5 10.4999ZM7.75736 14.7426C8.05025 15.0355 8.52513 15.0355 8.81802 14.7426C9.11091 14.4497 9.11091 13.9749 8.81802 13.682L7.75736 14.7426ZM16.5 10.4999C16.5 10.9142 16.8358 11.2499 17.25 11.2499C17.6642 11.2499 18 10.9141 18 10.4999L16.5 10.4999ZM15.7668 21.4777L14.408 16.4066L12.9591 16.7948L14.3179 21.8659L15.7668 21.4777ZM13.1859 16.0396L10.6765 18.2649L11.6717 19.3872L14.1811 17.1618L13.1859 16.0396ZM11.9228 18.871L12.4912 9.40117L10.9939 9.3113L10.4254 18.7811L11.9228 18.871ZM11.1166 9.76948L16.3438 17.6864L17.5955 16.8599L12.3684 8.94299L11.1166 9.76948ZM17.12 16.5383L13.8339 15.8659L13.5332 17.3355L16.8193 18.0079L17.12 16.5383ZM6.6967 15.8033C3.76777 12.8744 3.76777 8.12563 6.6967 5.1967L5.63604 4.13604C2.12132 7.65076 2.12132 13.3492 5.63604 16.864L6.6967 15.8033ZM6.6967 5.1967C9.62563 2.26777 14.3744 2.26777 17.3033 5.1967L18.364 4.13604C14.8492 0.62132 9.15076 0.62132 5.63604 4.13604L6.6967 5.1967ZM17.3033 5.1967C18.7679 6.66128 19.5 8.57933 19.5 10.4999L21 10.4998C21 8.19775 20.1211 5.89321 18.364 4.13604L17.3033 5.1967ZM8.81802 13.682C7.06066 11.9246 7.06066 9.07538 8.81802 7.31802L7.75736 6.25736C5.41421 8.60051 5.41421 12.3995 7.75736 14.7426L8.81802 13.682ZM8.81802 7.31802C10.5754 5.56066 13.4246 5.56066 15.182 7.31802L16.2426 6.25736C13.8995 3.91421 10.1005 3.91421 7.75736 6.25736L8.81802 7.31802ZM15.182 7.31802C16.0608 8.19683 16.5 9.34715 16.5 10.4999L18 10.4999C18 8.96558 17.414 7.42877 16.2426 6.25736L15.182 7.31802Z" fill="#0099AF"></path>
   </symbol>
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="contribute-highlight">
     <path d="M14.3179 21.8659C14.4251 22.266 14.8363 22.5035 15.2364 22.3963C15.6365 22.289 15.874 21.8778 15.7668 21.4777L14.3179 21.8659ZM13.6835 16.6007L13.8339 15.8659C13.6026 15.8186 13.3625 15.8829 13.1859 16.0396L13.6835 16.6007ZM11.1741 18.826L10.4254 18.7811C10.4073 19.0839 10.5733 19.3678 10.8461 19.5005C11.1189 19.6332 11.4448 19.5884 11.6717 19.3872L11.1741 18.826ZM11.7425 9.35623L12.3684 8.94299C12.1905 8.67359 11.8602 8.54824 11.5484 8.63179C11.2366 8.71534 11.0132 8.98905 10.9939 9.3113L11.7425 9.35623ZM16.9697 17.2731L16.8193 18.0079C17.1165 18.0687 17.421 17.9445 17.591 17.6932C17.7609 17.4419 17.7627 17.113 17.5955 16.8599L16.9697 17.2731ZM5.63604 16.864C5.92893 17.1569 6.40381 17.1569 6.6967 16.864C6.98959 16.5711 6.98959 16.0962 6.6967 15.8033L5.63604 16.864ZM19.5 10.4999C19.5 10.9141 19.8358 11.2499 20.25 11.2499C20.6642 11.2498 21 10.9141 21 10.4998L19.5 10.4999ZM7.75736 14.7426C8.05025 15.0355 8.52513 15.0355 8.81802 14.7426C9.11091 14.4497 9.11091 13.9749 8.81802 13.682L7.75736 14.7426ZM16.5 10.4999C16.5 10.9142 16.8358 11.2499 17.25 11.2499C17.6642 11.2499 18 10.9141 18 10.4999L16.5 10.4999ZM15.7668 21.4777L14.408 16.4066L12.9591 16.7948L14.3179 21.8659L15.7668 21.4777ZM13.1859 16.0396L10.6765 18.2649L11.6717 19.3872L14.1811 17.1618L13.1859 16.0396ZM11.9228 18.871L12.4912 9.40117L10.9939 9.3113L10.4254 18.7811L11.9228 18.871ZM11.1166 9.76948L16.3438 17.6864L17.5955 16.8599L12.3684 8.94299L11.1166 9.76948ZM17.12 16.5383L13.8339 15.8659L13.5332 17.3355L16.8193 18.0079L17.12 16.5383ZM6.6967 15.8033C3.76777 12.8744 3.76777 8.12563 6.6967 5.1967L5.63604 4.13604C2.12132 7.65076 2.12132 13.3492 5.63604 16.864L6.6967 15.8033ZM6.6967 5.1967C9.62563 2.26777 14.3744 2.26777 17.3033 5.1967L18.364 4.13604C14.8492 0.62132 9.15076 0.62132 5.63604 4.13604L6.6967 5.1967ZM17.3033 5.1967C18.7679 6.66128 19.5 8.57933 19.5 10.4999L21 10.4998C21 8.19775 20.1211 5.89321 18.364 4.13604L17.3033 5.1967ZM8.81802 13.682C7.06066 11.9246 7.06066 9.07538 8.81802 7.31802L7.75736 6.25736C5.41421 8.60051 5.41421 12.3995 7.75736 14.7426L8.81802 13.682ZM8.81802 7.31802C10.5754 5.56066 13.4246 5.56066 15.182 7.31802L16.2426 6.25736C13.8995 3.91421 10.1005 3.91421 7.75736 6.25736L8.81802 7.31802ZM15.182 7.31802C16.0608 8.19683 16.5 9.34715 16.5 10.4999L18 10.4999C18 8.96558 17.414 7.42877 16.2426 6.25736L15.182 7.31802Z" fill="#144046"></path>
+  </symbol>
+    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="countries">
+    <path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V64 350.5 400v88c0 13.3 10.7 24 24 24s24-10.7 24-24V388l80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L48 52V24zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8c54.9 27.4 118.7 29.7 175 6.8V334.7l-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4c-48.2-24.1-103.3-30.1-155.6-17.1L48 338.5v-237z" fill="#0099AF"></path>
   </symbol>
   <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="dash">
     <path opacity="0.12" d="M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9V3Z" fill="#0099AF"></path>
diff --git a/static/images/communities/bitcoin.svg b/static/images/bitcoin.svg
similarity index 100%
rename from static/images/communities/bitcoin.svg
rename to static/images/bitcoin.svg
diff --git a/static/images/og/countries.png b/static/images/og/countries.png
new file mode 100644
index 00000000..28c4e7c2
Binary files /dev/null and b/static/images/og/countries.png differ
diff --git a/static/images/og/top-countries.png b/static/images/og/top-countries.png
new file mode 100644
index 00000000..136547b9
Binary files /dev/null and b/static/images/og/top-countries.png differ