diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 0a1b25d..735f52e 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -23,6 +23,7 @@ module.exports = {
     "import/order": "error",
     "import/newline-after-import": "error",
     "import/no-unused-modules": ["warn", { unusedExports: true }],
+    "@typescript-eslint/no-explicit-any": "warn",
     "import/no-useless-path-segments": [
       "error",
       {
diff --git a/src/App.tsx b/src/App.tsx
index 211c4fa..4441b4e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { MapContainer, TileLayer } from "react-leaflet";
 import "./App.css";
 import polyline from "@mapbox/polyline";
@@ -22,13 +22,14 @@ function App() {
   const { data: shapeData } = useShapeData(tripData);
   const { data: routeData } = useRouteData(busData);
   const { data: stopData } = useStopData(busData);
+  const [zoom, setZoom] = useState(14);
 
   const { status, routeId, stopName } = getInfo(busData, routeData, stopData);
 
   const formattedPolyline = useMemo(() => {
     if (shapeData?.data) {
       const decodedPolyline = polyline.decode(
-        shapeData.data.attributes.polyline
+        shapeData.data.attributes.polyline,
       );
       const totalLength = decodedPolyline.length;
 
@@ -55,7 +56,7 @@ function App() {
       busData?.data.attributes.latitude,
       busData?.data.attributes.longitude,
       busStatus,
-    ]
+    ],
   );
 
   return (
@@ -63,13 +64,13 @@ function App() {
       <Title />
       <div className="flex h-screen flex-col bg-stone-100">
         <MapContainer
-          zoom={14}
+          zoom={zoom}
           center={center}
           scrollWheelZoom={false}
           style={{ height: "100%", width: "100%" }}
           dragging={true}
         >
-          <ChangeView center={center} zoom={14} />
+          <ChangeView center={center} zoom={zoom} />
           <Element name="center">
             <TileLayer
               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -77,6 +78,7 @@ function App() {
             />
             {busStatus === "success" && busData.data && (
               <MapLayers
+                setZoom={setZoom}
                 formattedPolyline={formattedPolyline}
                 position={[
                   busData?.data.attributes.latitude,
diff --git a/src/MapLayers.tsx b/src/MapLayers.tsx
index 7a1fb56..93f0def 100644
--- a/src/MapLayers.tsx
+++ b/src/MapLayers.tsx
@@ -1,17 +1,26 @@
 import { LatLngTuple } from "leaflet";
 import { useEffect } from "react";
-import { useMap } from "react-leaflet";
+import { useMap, useMapEvent } from "react-leaflet";
 import { Hotline } from "react-leaflet-hotline";
 import { MarkerLayer, Marker } from "react-leaflet-marker";
 
 interface MapLayersProps {
   formattedPolyline: [{ lat: string; lng: string; value: number }];
   position: LatLngTuple;
+  setZoom: (zoom: number) => void;
 }
 
-export const MapLayers = ({ formattedPolyline, position }: MapLayersProps) => {
+export const MapLayers = ({
+  formattedPolyline,
+  position,
+  setZoom,
+}: MapLayersProps) => {
   const map = useMap();
 
+  useMapEvent("zoom", (event) => {
+    setZoom(event.target.getZoom());
+  });
+
   useEffect(() => {
     // Create a custom pane with a high zIndex
     const pane = map.createPane("markerPane");
diff --git a/src/api.ts b/src/api.ts
index 08bae0c..884565f 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -17,7 +17,7 @@ const useDataQuery = (
   key: string,
   id: string | undefined,
   endpoint: string,
-  enabled: boolean = true
+  enabled: boolean = true,
 ) =>
   useQuery({
     queryKey: [key, id],
@@ -37,7 +37,7 @@ export const useTripData = (busData: any) =>
     "trips",
     busData?.data?.relationships?.trip?.data?.id,
     "trip",
-    !!busData?.data
+    !!busData?.data,
   );
 
 export const useRouteData = (busData: any) =>
@@ -45,7 +45,7 @@ export const useRouteData = (busData: any) =>
     "route",
     busData?.data?.relationships?.route?.data?.id,
     "route",
-    !!busData?.data
+    !!busData?.data,
   );
 
 export const useStopData = (busData: any) =>
@@ -53,7 +53,7 @@ export const useStopData = (busData: any) =>
     "stop",
     busData?.data?.relationships?.stop?.data?.id,
     "stop",
-    !!busData?.data
+    !!busData?.data,
   );
 
 export const useShapeData = (tripData: any) =>
@@ -61,5 +61,5 @@ export const useShapeData = (tripData: any) =>
     "shapes",
     tripData?.data?.relationships?.shape?.data?.id,
     "shape",
-    !!tripData?.data
+    !!tripData?.data,
   );
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
index 8fbd6d9..d7f0c58 100644
--- a/src/components/Title.tsx
+++ b/src/components/Title.tsx
@@ -6,7 +6,7 @@ import { Link } from "react-scroll";
 
 export const Title = () => {
   return (
-    <div className=" flex h-screen w-full flex-col items-center justify-center gap-4 bg-stone-100 bg-gradient">
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-4 bg-stone-100 bg-gradient p-4">
       <h1 className="text-center text-3xl font-bold uppercase italic text-grey-100 sm:text-5xl lg:text-6xl">
         Mbta <span className="gradient-text drop-shadow-2xl">pride</span> bus
         tracker