diff --git a/frontend/src/assets/img/DarkWood.jpg b/frontend/src/assets/img/DarkWood.jpg
deleted file mode 100644
index d3b6c8e..0000000
Binary files a/frontend/src/assets/img/DarkWood.jpg and /dev/null differ
diff --git a/frontend/src/assets/img/LOTRIcon.png b/frontend/src/assets/img/LOTRIcon.png
deleted file mode 100644
index 56a3b05..0000000
Binary files a/frontend/src/assets/img/LOTRIcon.png and /dev/null differ
diff --git a/frontend/src/assets/img/Landing_Page.png b/frontend/src/assets/img/Landing_Page.png
deleted file mode 100644
index 3d7d7f7..0000000
Binary files a/frontend/src/assets/img/Landing_Page.png and /dev/null differ
diff --git a/frontend/src/assets/img/Landing_Page.webp b/frontend/src/assets/img/Landing_Page.webp
new file mode 100644
index 0000000..cbb618a
Binary files /dev/null and b/frontend/src/assets/img/Landing_Page.webp differ
diff --git a/frontend/src/assets/img/MiddleEarthBlanco.webp b/frontend/src/assets/img/MiddleEarthBlanco.webp
new file mode 100644
index 0000000..bc452bc
Binary files /dev/null and b/frontend/src/assets/img/MiddleEarthBlanco.webp differ
diff --git a/frontend/src/assets/img/map_pin.svg b/frontend/src/assets/img/map_pin.svg
deleted file mode 100644
index 6e9e8bd..0000000
--- a/frontend/src/assets/img/map_pin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92.25 122.88" style="enable-background:new 0 0 92.25 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M68.51,106.28c-5.59,6.13-12.1,11.62-19.41,16.06c-0.9,0.66-2.12,0.74-3.12,0.1 c-10.8-6.87-19.87-15.12-27-24.09C9.14,86.01,2.95,72.33,0.83,59.15c-2.16-13.36-0.14-26.22,6.51-36.67 c2.62-4.13,5.97-7.89,10.05-11.14C26.77,3.87,37.48-0.08,48.16,0c10.28,0.08,20.43,3.91,29.2,11.92c3.08,2.8,5.67,6.01,7.79,9.49 c7.15,11.78,8.69,26.8,5.55,42.02c-3.1,15.04-10.8,30.32-22.19,42.82V106.28L68.51,106.28z M46.12,23.76 c12.68,0,22.95,10.28,22.95,22.95c0,12.68-10.28,22.95-22.95,22.95c-12.68,0-22.95-10.27-22.95-22.95 C23.16,34.03,33.44,23.76,46.12,23.76L46.12,23.76z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/img/parchment.jpg b/frontend/src/assets/img/parchment.jpg
deleted file mode 100644
index 9747517..0000000
Binary files a/frontend/src/assets/img/parchment.jpg and /dev/null differ
diff --git a/frontend/src/assets/img/pushpin.png b/frontend/src/assets/img/pushpin.png
index 89a132f..91e0f9f 100644
Binary files a/frontend/src/assets/img/pushpin.png and b/frontend/src/assets/img/pushpin.png differ
diff --git a/frontend/src/assets/less/App.less b/frontend/src/assets/less/App.less
index 0c4f920..b3dd12d 100644
--- a/frontend/src/assets/less/App.less
+++ b/frontend/src/assets/less/App.less
@@ -73,7 +73,7 @@ body {
 }
 
 #mapBackground {
-  background-image: url('../img/Landing_Page.png');
+  background-image: url('../img/Landing_Page.webp');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
@@ -120,6 +120,7 @@ body {
 .leaflet-marker-icon:hover {
   filter: brightness(1.5);
   filter: saturate(1.5);
+  filter: drop-shadow(5px 5px 5px #000000);
 }
 
 .ant-menu.ant-menu-dark {
diff --git a/frontend/src/components/pages/Map.tsx b/frontend/src/components/pages/Map.tsx
index d7652ae..e40461e 100644
--- a/frontend/src/components/pages/Map.tsx
+++ b/frontend/src/components/pages/Map.tsx
@@ -1,5 +1,5 @@
 import { ImageOverlay, MapContainer, Marker, Popup } from 'react-leaflet';
-import L, { CRS, LatLngBounds, LatLngBoundsExpression } from 'leaflet';
+import L, { CRS, LatLng, LatLngBounds, LatLngBoundsExpression } from 'leaflet';
 import { useCallback, useState } from 'react';
 import './../../assets/less/App.less';
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
@@ -14,19 +14,8 @@ import { getMapMarkers, getXyCoords, log, } from '../../lib/utils';
 import { MapLocation } from '../../lib/interfaces';
 
 const mapBounds: LatLngBoundsExpression = new LatLngBounds([0, 0], [MAP_Y, MAP_X]);
-
-// Function to update marker position
-const updateMarkerPosition = (
-    mapMarkers: MapLocation[],
-    markerToUpdate: MapLocation,
-    newPosition: L.LatLngExpression
-): MapLocation[] => {
-    return mapMarkers.map(marker =>
-        marker === markerToUpdate
-            ? { ...marker, location: newPosition }
-            : marker
-    );
-};
+const mapCenter: LatLng = new LatLng(1953,4930);
+const defaultZoom = 0.1;
 
 export const LOTRMap = (props: any) => {
     const [mapIsLoaded, setMapIsLoaded] = useState(false);
@@ -43,6 +32,19 @@ export const LOTRMap = (props: any) => {
         MAP_URL = NEW_MAP_URL;
     }
 
+    // Function to update marker position
+    const updateMarkerPosition = (
+        markers: MapLocation[],
+        markerToUpdate: MapLocation,
+        newPosition: L.LatLngExpression
+    ): MapLocation[] => {
+        return markers.map(marker =>
+            marker === markerToUpdate
+                ? { ...marker, location: newPosition }
+                : marker
+        );
+    };
+
     const exportMapMarkers = () => {
         const jsonOutput = {
             locations: mapMarkers
@@ -135,23 +137,24 @@ export const LOTRMap = (props: any) => {
             />
 
             <div id="mapContainer">
-                <button onClick={exportMapMarkers}>Export Markers</button>
+                {/* <button onClick={exportMapMarkers}>Export Markers</button> */}
                 <MapContainer
                     zoomControl={false}
                     id="lotrMap"
+                    fadeAnimation={true}
                     bounds={mapBounds}
                     maxBounds={mapBounds}
                     maxBoundsViscosity={100}
                     scrollWheelZoom={true}
                     zoomAnimation={true}
-                    center={mapBounds.getCenter()}
-                    // zoomSnap={0.5}
+                    center={mapCenter}
+                    zoom={defaultZoom}
+                    zoomSnap={0.5}
                     zoomDelta={0.1}
                     maxZoom={3}
                     minZoom={-3}
-                    zoom={0.5}
-                    // wheelDebounceTime={0}
-                    // wheelPxPerZoomLevel={360}
+                    wheelDebounceTime={0}
+                    wheelPxPerZoomLevel={360}
                     ref={async (map) => {
                         if(map) {
                             setMapReference(map);
@@ -180,11 +183,11 @@ export const LOTRMap = (props: any) => {
                                 alt={marker.name}
                                 riseOnHover={true}
                                 icon={iconLOTR}
-                                draggable={true}
+                                // draggable={true}
                                 position={marker.location}
-                                eventHandlers={{
-                                    dragend: handleMarkerDrag(marker)
-                                }}
+                                // eventHandlers={{
+                                //     dragend: handleMarkerDrag(marker)
+                                // }}
                             >
                                 <Popup
                                     className='video-popup'
diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts
index 539a836..c111579 100644
--- a/frontend/src/lib/constants.ts
+++ b/frontend/src/lib/constants.ts
@@ -1,7 +1,7 @@
 // Leaflet Map
 // export const MAP_URL = 'https://sounds-of-middle-earth.s3.eu-west-1.amazonaws.com/MiddleEarthUpscaled.webp';
 export const OG_MAP_URL = 'https://i.imgur.com/22R6mSA.jpg';
-export const NEW_MAP_URL = '../assets/img/MiddleEarthBlanco.jpg';
+export const NEW_MAP_URL = '../assets/img/MiddleEarthBlanco.webp';
 export const MAP_Y = 5656;
 export const MAP_X = 8000;
 export const BASE_URL = 'https://fdn17wuw0h.execute-api.eu-west-1.amazonaws.com/dev/api/v1';
\ No newline at end of file