diff --git a/design/src/styles/layout/main.css b/design/src/styles/layout/main.css
index 1edb0e8..3751ba9 100644
--- a/design/src/styles/layout/main.css
+++ b/design/src/styles/layout/main.css
@@ -16,7 +16,7 @@ a {
 }
 
 .container {
-	width: calc(100%-16px);
+	width: calc(100% - 16px);
 	/* height: 100vh; */
 	margin-left: auto;
 	margin-right: auto;
diff --git a/personal/package-lock.json b/personal/package-lock.json
index 2b5604f..fe79c83 100644
--- a/personal/package-lock.json
+++ b/personal/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "aaronczichon.de",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "aaronczichon.de",
-			"version": "1.0.0",
+			"version": "1.0.1",
 			"dependencies": {
 				"@astrojs/check": "^0.5.6",
 				"@astrojs/mdx": "^2.1.1",
@@ -21,6 +21,7 @@
 				"typescript": "^5.3.3"
 			},
 			"devDependencies": {
+				"@types/mapbox-gl": "^3.1.0",
 				"prettier": "^3.2.5",
 				"prettier-plugin-astro": "^0.13.0"
 			}
@@ -1449,6 +1450,12 @@
 				"@types/estree": "*"
 			}
 		},
+		"node_modules/@types/geojson": {
+			"version": "7946.0.14",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+			"integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+			"dev": true
+		},
 		"node_modules/@types/hast": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -1457,6 +1464,15 @@
 				"@types/unist": "*"
 			}
 		},
+		"node_modules/@types/mapbox-gl": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.1.0.tgz",
+			"integrity": "sha512-hI6cQDjw1bkJw7MC/eHMqq5TWUamLwsujnUUeiIX2KDRjxRNSYMjnHz07+LATz9I9XIsKumOtUz4gRYnZOJ/FA==",
+			"dev": true,
+			"dependencies": {
+				"@types/geojson": "*"
+			}
+		},
 		"node_modules/@types/mdast": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
diff --git a/personal/package.json b/personal/package.json
index a02b20c..1981c77 100644
--- a/personal/package.json
+++ b/personal/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "aaronczichon.de",
 	"type": "module",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Personal website of Aaron Czichon",
 	"scripts": {
 		"dev": "astro dev",
@@ -28,6 +28,7 @@
 		"typescript": "^5.3.3"
 	},
 	"devDependencies": {
+		"@types/mapbox-gl": "^3.1.0",
 		"prettier": "^3.2.5",
 		"prettier-plugin-astro": "^0.13.0"
 	}
diff --git a/personal/src/components/BlogEntryList.astro b/personal/src/components/BlogEntryList.astro
index cd6ed55..3202626 100644
--- a/personal/src/components/BlogEntryList.astro
+++ b/personal/src/components/BlogEntryList.astro
@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import { Image } from "astro:assets";
 const allPosts = await getCollection("blog");
 
 const dateOptions: object = {
diff --git a/personal/src/components/CVList.astro b/personal/src/components/CVList.astro
index 2d809c4..dc64059 100644
--- a/personal/src/components/CVList.astro
+++ b/personal/src/components/CVList.astro
@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import SkillList from "./SkillList.astro";
 import SkillBand from "./SkillBand.astro";
 const allCvEntries = await getCollection("cv");
 
diff --git a/personal/src/components/Nav.astro b/personal/src/components/Nav.astro
index 502eb87..4dc4a37 100644
--- a/personal/src/components/Nav.astro
+++ b/personal/src/components/Nav.astro
@@ -31,6 +31,11 @@ import { Image } from "astro:assets";
       class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a
     > -->
     <a href="/cv/" class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a>
+    <a
+      href="/visited-countries/"
+      class={currentPath.indexOf("visited-countries") > -1 ? "active" : ""}
+      >Visited Countries</a
+    >
     <!-- <a
       href="/pengiun"
       class={currentPath.indexOf("pengiun") > -1 ? "active" : ""}
diff --git a/personal/src/components/dynamic/CountryMap.jsx b/personal/src/components/dynamic/CountryMap.jsx
new file mode 100644
index 0000000..beefa7b
--- /dev/null
+++ b/personal/src/components/dynamic/CountryMap.jsx
@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'preact/hooks';
+
+import BasicMap from './BasicMap';
+import { addMapLayer } from './map.func';
+
+export default function CountryDynamicMap({zoom, center}) {
+  const [map, setMap] = useState(null);
+  useEffect(() => {
+    // Add route to map
+    if (map) {
+      map.on('load', () => {
+        addMapLayer(map);
+      });
+    }
+  }, [map]);
+
+  useEffect(() => {
+    if (map) {
+      map.setCenter(center);
+    }
+  })
+
+  return (
+    <BasicMap zoom={zoom} setMap={setMap} />
+  );
+}
\ No newline at end of file
diff --git a/personal/src/components/dynamic/PathMap.jsx b/personal/src/components/dynamic/PathMap.jsx
index 7a0b571..3710b0e 100644
--- a/personal/src/components/dynamic/PathMap.jsx
+++ b/personal/src/components/dynamic/PathMap.jsx
@@ -14,7 +14,7 @@ function parseGPX(gpxData) {
 
 export default function PathDynamicMap({gpxUrl, zoom, tooltip}) {
   const [map, setMap] = useState(null);
-  const [popup, setPopup] = useState(null);
+  const [popup, _setPopup] = useState(null);
   const [routeCoordinates, setRouteCoordinates] = useState(null);
 
   useEffect(() => {
diff --git a/personal/src/components/dynamic/map.func.ts b/personal/src/components/dynamic/map.func.ts
new file mode 100644
index 0000000..62b37f5
--- /dev/null
+++ b/personal/src/components/dynamic/map.func.ts
@@ -0,0 +1,45 @@
+import * as mapboxgl from 'mapbox-gl';
+
+export const addMapLayer = (map: mapboxgl.Map) => {
+  map.addSource('countries', {
+    type: 'vector',
+    url: 'mapbox://mapbox.country-boundaries-v1'
+});
+
+  map.addLayer(
+    {
+      id: 'country-boundaries',
+      source: 'countries',
+      'source-layer': 'country_boundaries',
+      type: 'fill',
+      paint: {
+        'fill-color': '#19bf32',
+        'fill-opacity': 0.7,
+      },
+    },
+    'country-label'
+  );
+
+  // ISO List: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3
+  map.setFilter('country-boundaries', [
+    "in",
+    "iso_3166_1_alpha_3",
+    'ITA',
+    'CAN',
+    'DEU',
+    'ESP',
+    'SVK',
+    'SVN',
+    'CZE',
+    'HRV',
+    'BEL',
+    'NOR',
+    'AUT',
+    'LTU',
+    'FIN',
+    'EST',
+    'USA',
+    'CHE',
+    'FRA'
+  ]);
+}
\ No newline at end of file
diff --git a/personal/src/content/config.ts b/personal/src/content/config.ts
index 885bd7e..82ddc8c 100644
--- a/personal/src/content/config.ts
+++ b/personal/src/content/config.ts
@@ -21,7 +21,7 @@ const blogCollection = defineCollection({
 
 const cvCollection = defineCollection({
 	type: 'content', // v2.5.0 and later
-	schema: ({ image }) =>
+	schema: () =>
 		z.object({
 			title: z.string(),
 			position: z.string(),
diff --git a/personal/src/pages/cv.astro b/personal/src/pages/cv.astro
index c67ba27..fbb246b 100644
--- a/personal/src/pages/cv.astro
+++ b/personal/src/pages/cv.astro
@@ -1,8 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import CVList from "../components/CVList.astro";
-
-const { frontmatter } = Astro.props;
 ---
 
 <Layout title="Aaron Czichon - CV">
diff --git a/personal/src/pages/visited-countries.astro b/personal/src/pages/visited-countries.astro
new file mode 100644
index 0000000..0cf44e2
--- /dev/null
+++ b/personal/src/pages/visited-countries.astro
@@ -0,0 +1,17 @@
+---
+import Layout from "../layouts/Layout.astro";
+import CountryMap from "../components/dynamic/CountryMap";
+---
+
+<Layout title="Aaron Czichon - Visited Countries">
+  <main class="container">
+    <h1>Visited Countries</h1>
+    <p>
+      I've already visited a bunch of countries in my life. I love to keep track
+      of such things.
+    </p>
+  </main>
+
+  <!-- Map Component here -->
+  <CountryMap client:visible zoom="3" center={[10.451526, 51.165691]} />
+</Layout>