diff --git a/frontend/components/core/left-panel/main.tsx b/frontend/components/core/left-panel/main.tsx
index 809f69a4..44e6a045 100644
--- a/frontend/components/core/left-panel/main.tsx
+++ b/frontend/components/core/left-panel/main.tsx
@@ -4,8 +4,8 @@ import { useEffect } from "react"
 import Image from "next/image"
 import TrawlWatchLogo from "@/public/trawlwatch.svg"
 import { ChartBarIcon } from "@heroicons/react/24/outline"
-import { motion, useAnimationControls } from "framer-motion"
 import { ChevronRightIcon } from "lucide-react"
+import { motion, useAnimationControls } from "motion/react"
 import { useShallow } from "zustand/react/shallow"
 
 import { useLoaderStore } from "@/libs/stores/loader-store"
@@ -14,8 +14,8 @@ import NavigationLink from "@/components/ui/navigation-link"
 import { VesselFinderDemo } from "@/components/core/command/vessel-finder"
 
 import Spinner from "../../ui/custom/spinner"
-import TrackedVesselsPanel from "./tracked-vessel/tracked-vessels-panel"
 import PartnerCredits from "../map/partner-credits"
+import TrackedVesselsPanel from "./tracked-vessel/tracked-vessels-panel"
 
 const containerVariants = {
   close: {
@@ -93,7 +93,7 @@ export default function LeftPanel() {
         initial="close"
         className="absolute left-0 top-0 z-10 flex max-h-screen flex-col gap-3 rounded-br-lg bg-color-3 shadow-lg"
       >
-        <div className="flex w-full flex-row place-items-center p-5 gap-5">
+        <div className="flex w-full flex-row place-items-center gap-5 p-5">
           <a href="/dashboard" className="flex items-center gap-3">
             <Image
               src={TrawlWatchLogo}
diff --git a/frontend/components/core/map/layers/use-zones-layer.ts b/frontend/components/core/map/layers/use-zones-layer.ts
index 1c5de578..24d1f044 100644
--- a/frontend/components/core/map/layers/use-zones-layer.ts
+++ b/frontend/components/core/map/layers/use-zones-layer.ts
@@ -38,11 +38,6 @@ export const useZonesLayer = ({
     ? true
     : displayedZones.includes(ZoneCategory.FISHING_COASTAL_WATERS)
 
-  console.log("zones", zones)
-  console.log("isAmpDisplayed", isAmpDisplayed)
-  console.log("isTerritorialDisplayed", isTerritorialDisplayed)
-  console.log("isFishingDisplayed", isFishingDisplayed)
-
   const ampMultiZones = useMemo(() => {
     const filteredZones = isAmpDisplayed
       ? zones
diff --git a/frontend/components/core/map/position-preview.tsx b/frontend/components/core/map/position-preview.tsx
index ad5d2200..3f8815eb 100644
--- a/frontend/components/core/map/position-preview.tsx
+++ b/frontend/components/core/map/position-preview.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion } from "motion/react"
 
 import { useMapStore } from "@/libs/stores/map-store"
 import PreviewCard from "@/components/core/map/preview-card"
diff --git a/frontend/components/ui/custom/sidebar-expander.tsx b/frontend/components/ui/custom/sidebar-expander.tsx
index eb1f2da5..0736200b 100644
--- a/frontend/components/ui/custom/sidebar-expander.tsx
+++ b/frontend/components/ui/custom/sidebar-expander.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react"
-import { motion, useAnimationControls } from "framer-motion"
 import { ChevronUpIcon } from "lucide-react"
+import { motion, useAnimationControls } from "motion/react"
 
 function SidebarExpanderHeader({
   disabled = false,
diff --git a/frontend/package.json b/frontend/package.json
index 0bb593f8..7ef7e416 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -39,11 +39,11 @@
     "country-iso-3-to-2": "^1.1.1",
     "date-fns": "^3.6.0",
     "deck.gl": "^9.0.36",
-    "framer-motion": "^11.1.3",
     "jotai": "^2.8.0",
     "jotai-zustand": "^0.3.0",
     "lucide-react": "^0.371.0",
     "maplibre-gl": "^4.1.1",
+    "motion": "^12.5.0",
     "next": "^13.5.7",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
@@ -74,4 +74,4 @@
     "tailwindcss": "^3.3.2",
     "typescript": "^4.9.5"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/services/backend-rest-client.ts b/frontend/services/backend-rest-client.ts
index 58293271..32a3e4e1 100644
--- a/frontend/services/backend-rest-client.ts
+++ b/frontend/services/backend-rest-client.ts
@@ -159,7 +159,6 @@ export async function getZoneDetails(
   const url = `${BASE_URL}/metrics/zones/${zoneId}/visiting-time-by-vessel?start_at=${startAt}&end_at=${endAt}&order=DESC&limit=10`
   console.log(`GET ${url}`)
   const response = await axios.get<ZoneVesselMetrics[]>(url)
-  console.log(response)
   return response
 }
 
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index f8972062..7da3e5f9 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -10,11 +11,9 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
-    // "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]