diff --git a/package-lock.json b/package-lock.json
index d2365c8..566ab5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,8 @@
 			"name": "travel-app",
 			"version": "0.0.1",
 			"dependencies": {
+				"@googlemaps/js-api-loader": "^1.16.8",
 				"d3": "^7.9.0",
-				"places-autocomplete-svelte": "^2.2.10",
 				"topojson-client": "^3.1.0",
 				"topojson-server": "^3.0.1"
 			},
@@ -18,6 +18,7 @@
 				"@sveltejs/kit": "^2.16.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
 				"@types/d3": "^7.4.3",
+				"@types/google.maps": "^3.58.1",
 				"@types/topojson-client": "^3.1.5",
 				"@types/topojson-server": "^3.0.4",
 				"nodemon": "^3.1.10",
@@ -31,6 +32,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -475,6 +477,7 @@
 			"version": "0.3.8",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
 			"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
@@ -489,6 +492,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -498,6 +502,7 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -507,12 +512,14 @@
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
 			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -810,6 +817,7 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
 			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
+			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
@@ -1192,6 +1200,7 @@
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
 			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/geojson": {
@@ -1201,6 +1210,13 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/google.maps": {
+			"version": "3.58.1",
+			"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+			"integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@types/topojson-client": {
 			"version": "3.1.5",
 			"resolved": "https://registry.npmjs.org/@types/topojson-client/-/topojson-client-3.1.5.tgz",
@@ -1237,6 +1253,7 @@
 			"version": "8.14.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
 			"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -1276,6 +1293,7 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1285,6 +1303,7 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1354,6 +1373,7 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -1875,12 +1895,14 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/esrap": {
 			"version": "1.4.6",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.6.tgz",
 			"integrity": "sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2030,6 +2052,7 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -2049,12 +2072,14 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/magic-string": {
 			"version": "0.30.17",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
 			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
@@ -2229,18 +2254,6 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
-		"node_modules/places-autocomplete-svelte": {
-			"version": "2.2.10",
-			"resolved": "https://registry.npmjs.org/places-autocomplete-svelte/-/places-autocomplete-svelte-2.2.10.tgz",
-			"integrity": "sha512-P/+4m0lF1nzqH+fUVmxobVPODNapIXzKxEBHS3gj+FAuDyBZdsCi9z2fy+vpbjwMRualklFFB59nET93r4hWDw==",
-			"license": "MIT",
-			"dependencies": {
-				"@googlemaps/js-api-loader": "^1.16.8"
-			},
-			"peerDependencies": {
-				"svelte": "^5.1.4"
-			}
-		},
 		"node_modules/postcss": {
 			"version": "8.5.3",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -2437,6 +2450,7 @@
 			"version": "5.33.2",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.33.2.tgz",
 			"integrity": "sha512-uiyusx2rUa9NmVMaIcShnZyDhOfFXxgkn5eXOcgjDBL3RYQGR1+7TctPcI6AWNbu4gHWF5xZ/TlFM7nnw5H+JQ==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
@@ -2689,6 +2703,7 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+			"dev": true,
 			"license": "MIT"
 		}
 	}
diff --git a/package.json b/package.json
index bce96d5..62e5a3a 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@types/d3": "^7.4.3",
+		"@types/google.maps": "^3.58.1",
 		"@types/topojson-client": "^3.1.5",
 		"@types/topojson-server": "^3.0.4",
 		"nodemon": "^3.1.10",
@@ -25,8 +26,8 @@
 		"vite": "^6.2.6"
 	},
 	"dependencies": {
+		"@googlemaps/js-api-loader": "^1.16.8",
 		"d3": "^7.9.0",
-		"places-autocomplete-svelte": "^2.2.10",
 		"topojson-client": "^3.1.0",
 		"topojson-server": "^3.0.1"
 	}
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 589d630..827d2d0 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,5 +1,5 @@
 <script>
-    // import '../../app.css';
+    import '../../app.css';
     export let text = 'Button';
     export let type = 'single';
     export let onClick = () => {};
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index b8febc8..638f0d5 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -1,11 +1,15 @@
-<script lang="ts">
+<script lang>
     import { Colors } from '$lib/constants/Colors';
     import { goto } from '$app/navigation';
 
     let title = "Travel App";
     export let activeTab = "Home";
 
-    function handleNavigation(tab: "Home" | "Planner" | "Memory") {
+    /**
+     * 
+     * @param tab {string}
+     */
+    function handleNavigation(tab) {
         activeTab = tab;
         if (tab === 'Home') {
             goto('/');
diff --git a/src/routes/itinerary/+page.svelte b/src/routes/itinerary/+page.svelte
index 2b5d1cc..1668edc 100644
--- a/src/routes/itinerary/+page.svelte
+++ b/src/routes/itinerary/+page.svelte
@@ -3,11 +3,15 @@
     import { goto } from '$app/navigation';
     import { slide } from 'svelte/transition';
     import { quintOut } from 'svelte/easing';
+    import { page } from '$app/state';
+    import { onMount } from 'svelte';
+    import { Loader } from '@googlemaps/js-api-loader';
     import ProfilePicture from '$lib/components/ProfilePicture.svelte';
     import BottomBar from '$lib/components/BottomBar.svelte';
     import Button from '$lib/components/Button.svelte';
     import ItineraryDate from '$lib/components/ItineraryDate.svelte';
-    import { page } from '$app/state';
+    import { browser } from '$app/environment';
+
 
     // Placeholder data obtained from the popup
     let destination = "Taiwan";
@@ -17,6 +21,36 @@
     let places: string[] = [];
     const place_placeholder = { name: 'Somewhere'}
     const places_placeholder = Array(3).fill(place_placeholder);
+
+    const GOOGLE_PLACES_API_KEY = import.meta.env.VITE_GOOGLE_PLACES_API_KEY;
+    let mapContainer: HTMLDivElement;
+
+    onMount(async () => {
+        if (!browser) return;
+        
+        if (!GOOGLE_PLACES_API_KEY) {
+            console.error('Google Places API key is missing');
+            return;
+        }
+        
+        const loader = new Loader({
+            apiKey: GOOGLE_PLACES_API_KEY,
+            version: "weekly",
+            libraries: ["places"],
+            language: 'en'
+        });
+
+        try {
+            await loader.importLibrary("maps");
+
+            const map = new google.maps.Map(mapContainer, {
+                center: { lat: 23.5, lng: 121 }, // Taiwan's coordinates
+                zoom: 8,
+            });
+        } catch (error) {
+            console.error('Error loading Google Maps:', error);
+        }
+    });
     
     // Array of dates between startDate to endDate
     let tripDates = ["27/04/2025", "28/04/2025", "29/04/2025", "30/04/2025"];
@@ -148,7 +182,7 @@
     </div>
 
     <div class="map-section">
-        <div class="map"></div>
+        <div class="map-container" bind:this={mapContainer}></div>
         <BottomBar title="Past Trips" desc={desc} onClick={handlePastTrip} />
     </div>
 </main>
@@ -175,10 +209,10 @@
         display: flex;
         flex-direction: column;
         height: 100vh;
-        background-color: var(--gray-50);
+        background-color: #84D7EB;
     }
 
-    .map {
+    .map-container {
         flex: 1;
         position: relative;
     }
@@ -189,7 +223,6 @@
         align-items: center;
         gap: 1rem;
         padding: 0 2rem 1.5rem 1rem;
-        margin-bottom: 1rem;
         border-bottom: 1px solid var(--gray-100);
     }
 
@@ -238,7 +271,7 @@
     }
 
     .content {
-        padding: 0 1.5rem 0 1.5rem;
+        padding: 1rem 1.5rem 0 1.5rem;
         flex: 1;
         display: flex;
         flex-direction: column;
diff --git a/vite.config.ts b/vite.config.ts
index bbf8c7d..261a12f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	ssr: {
+        noExternal: ['@googlemaps/js-api-loader']
+    }
 });