diff --git a/src/lib/components/maps/US.svelte b/src/lib/components/maps/US.svelte
index c1dd7bc..7b24e5d 100644
--- a/src/lib/components/maps/US.svelte
+++ b/src/lib/components/maps/US.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
     function handleStateClick(stateCode: String) {
         console.log(`Clicked on ${stateCode}`);
+        dispatch("marked", stateCode);
     }
 </script>
 
@@ -12,6 +15,7 @@
     version="1.1"
     width="1200"
     height="600"
+    fill="#ffffff"
 >
     <defs id="defs282" />
     <g id="viewport">
diff --git a/src/routes/worldtravel/[countrycode]/+page.svelte b/src/routes/worldtravel/[countrycode]/+page.svelte
index cb7f916..bbafcdc 100644
--- a/src/routes/worldtravel/[countrycode]/+page.svelte
+++ b/src/routes/worldtravel/[countrycode]/+page.svelte
@@ -5,6 +5,7 @@
     import { getFlag } from "$lib";
     import { goto } from "$app/navigation";
     import { onMount } from "svelte";
+    import Us from "$lib/components/maps/US.svelte";
 
     let viewType: String = "cards";
 
@@ -100,4 +101,8 @@
     </div>
 {/if}
 
-{#if viewType == "map"}{/if}
+{#if viewType == "map"}
+    {#if data.countrycode.toLowerCase() == "us"}
+        <Us on:marked={markVisited} />
+    {/if}
+{/if}