diff --git a/.nvmrc b/.nvmrc
index 0828ab7..3f430af 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v18
\ No newline at end of file
+v18
diff --git a/package-lock.json b/package-lock.json
index 488de30..2b90492 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@vercel/speed-insights": "^1.0.2",
         "axios": "^1.7.7",
         "bcrypt": "^5.1.1",
+        "chart.js": "^4.4.6",
         "cheerio": "^1.0.0",
         "crypto-random-string": "^5.0.0",
         "cssnano": "^6.0.3",
@@ -35,6 +36,7 @@
         "nodemailer": "^6.9.12",
         "openai": "^4.73.0",
         "stripe": "^17.3.1",
+        "svelte-chartjs": "^3.1.5",
         "svelteship-soen-343": "file:",
         "three": "^0.170.0",
         "ws": "^8.16.0",
@@ -863,6 +865,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+    },
     "node_modules/@mapbox/corslite": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/@mapbox/corslite/-/corslite-0.0.7.tgz",
@@ -2733,6 +2740,17 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
+      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
@@ -7902,6 +7920,15 @@
         "node": ">=16"
       }
     },
+    "node_modules/svelte-chartjs": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/svelte-chartjs/-/svelte-chartjs-3.1.5.tgz",
+      "integrity": "sha512-ka2zh7v5FiwfAX1oMflZ0HkNkgjHjFqANgRyC+vNYXfxtx2ku68Zo+2KgbKeBH2nS1ThDqkIACPzGxy4T0UaoA==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0 || ^4.0.0",
+        "svelte": "^4.0.0"
+      }
+    },
     "node_modules/svelte-check": {
       "version": "3.8.6",
       "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.8.6.tgz",
diff --git a/package.json b/package.json
index fa6f0a2..62fcbd6 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "@vercel/speed-insights": "^1.0.2",
     "axios": "^1.7.7",
     "bcrypt": "^5.1.1",
+    "chart.js": "^4.4.6",
     "cheerio": "^1.0.0",
     "crypto-random-string": "^5.0.0",
     "cssnano": "^6.0.3",
@@ -89,6 +90,7 @@
     "nodemailer": "^6.9.12",
     "openai": "^4.73.0",
     "stripe": "^17.3.1",
+    "svelte-chartjs": "^3.1.5",
     "svelteship-soen-343": "file:",
     "three": "^0.170.0",
     "ws": "^8.16.0",
diff --git a/prisma/seed.ts b/prisma/seed.ts
index dd06182..ac68205 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -9,7 +9,6 @@ async function seedAll() {
     where: { id: 1 },
     update: {},
     create: {
-      id: 1,
       email: "admin@svelteship.test",
       name: "Joe Admin",
       comment: "Created from the Prisma seed file",
@@ -22,7 +21,6 @@ async function seedAll() {
     where: { id: 2 },
     update: {},
     create: {
-      id: 2,
       email: "customer@svelteship.test",
       name: "First Customer",
       comment: "Created from the Prisma seed file",
@@ -35,7 +33,6 @@ async function seedAll() {
     where: { id: 1 },
     update: {},
     create: {
-      id: 1,
       heightCm: 50,
       widthCm: 40,
       depthCm: 30,
@@ -47,7 +44,6 @@ async function seedAll() {
     where: { id: 1 },
     update: {},
     create: {
-      id: 1,
       address1: "1455 boul de Maisonneuve O",
       city: "Montreal",
       administartiveArea: "QC",
@@ -62,7 +58,6 @@ async function seedAll() {
     where: { id: 2 },
     update: {},
     create: {
-      id: 2,
       address1: "7141 rue Sherbrooke O",
       city: "Montreal",
       administartiveArea: "QC",
@@ -77,7 +72,6 @@ async function seedAll() {
     where: { id: 1 },
     update: {},
     create: {
-      id: 1,
       originId: concordia.id,
       destinationId: loyola.id,
       amountQuotedCents: 2000,
@@ -90,7 +84,6 @@ async function seedAll() {
     where: { id: 2 },
     update: {},
     create: {
-      id: 2,
       originId: concordia.id,
       destinationId: loyola.id,
       amountQuotedCents: 2000,
@@ -102,7 +95,6 @@ async function seedAll() {
     where: { id: 3 },
     update: {},
     create: {
-      id: 3,
       originId: concordia.id,
       destinationId: loyola.id,
       amountQuotedCents: 2000,
@@ -114,7 +106,6 @@ async function seedAll() {
     where: { id: 1 },
     update: {},
     create: {
-      id: 1,
       trackingNumber: "111111111111",
       quotationId: quote.id,
       transactionType: TransactionType.MANUAL,
@@ -127,7 +118,6 @@ async function seedAll() {
     where: { id: 1 },
     update: {},
     create: {
-      id: 1,
       type: TrackingStatus.PICKED_UP_AT_ORIGIN,
       locationId: concordia.id,
       shipmentTransactionId: shipment.id,
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 9fcfa04..1af0319 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -15,13 +15,16 @@
   flex="flex-1 lg:flex-none justify-center"
   rounded=""
   border=""
-  class="bg-surface-100-800-token hidden h-full md:block ">
+  class="bg-surface-100-800-token hidden h-full md:block">
   {#each links as link (link.name)}
-    <TabAnchor href={link.href} selected={$page.url.pathname === link.href}>
-      <svelte:fragment slot="lead"
-        ><div class="flex justify-center">
+    <TabAnchor
+      on:click={() => (window.location.href = link.href)}
+      selected={$page.url.pathname === link.href}>
+      <svelte:fragment slot="lead">
+        <div class="flex justify-center">
           <svelte:component this={link.icon} />
-        </div></svelte:fragment>
+        </div>
+      </svelte:fragment>
       <span>{link.name}</span>
     </TabAnchor>
   {/each}
diff --git a/src/lib/components/map/map.svelte b/src/lib/components/map/map.svelte
index 4fe20f0..63dd130 100644
--- a/src/lib/components/map/map.svelte
+++ b/src/lib/components/map/map.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-  import { onMount, setContext } from "svelte";
+  import { onDestroy, onMount, setContext } from "svelte";
   import type L from "leaflet";
   import { key } from "$lib/components/map";
   import { modeCurrent } from "@skeletonlabs/skeleton";
 
-  import "leaflet/dist/leaflet.css";
-
   export let mapLat: number;
   export let mapLon: number;
   export let zoom: number;
@@ -14,6 +12,7 @@
   let leafletMap: L.Map;
   let mapEl: HTMLDivElement;
   let baseLayer: L.TileLayer;
+  let observer: MutationObserver;
 
   setContext(key, {
     getLeaflet: () => leaflet,
@@ -22,17 +21,16 @@
 
   const baseLayers = {
     light: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-    dark: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png",
+    dark: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
   };
 
   const baseLayerAttribution = {
     light:
       '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    dark: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a>, &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    dark: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   };
 
   $: if (leafletMap && baseLayer) {
-    // Update the base layer reactively based on current Skeleton theme value
     const currentTheme = $modeCurrent === false ? "dark" : "light";
     const url = baseLayers[currentTheme];
     const attribution = baseLayerAttribution[currentTheme];
@@ -51,13 +49,22 @@
     styleZoomControls();
   }
 
+  /**
+   * Styles the Leaflet zoom control buttons based on the current theme.
+   *
+   * - Applies background color, text color, and border styles dynamically
+   *   depending on whether dark mode or light mode is active.
+   * - Ensures buttons and their container have consistent styling for usability
+   *   and theme alignment.
+   * - Runs after a short timeout to ensure the DOM elements are available
+   *   for manipulation.
+   */
   function styleZoomControls() {
     setTimeout(() => {
       const zoomControls = document.querySelectorAll(".leaflet-control-zoom");
 
       zoomControls.forEach((control) => {
         if (control instanceof HTMLElement) {
-          // Apply the theme-specific styles
           const isDarkMode = $modeCurrent === false;
           control.style.backgroundColor = isDarkMode
             ? "rgba(50, 50, 50, 0.8)"
@@ -88,15 +95,74 @@
     }, 0);
   }
 
+  /**
+   * Applies a dark theme filter to Leaflet map tiles based on the current theme.
+   *
+   * - Adds a CSS filter to map tiles for dark mode to invert colors and adjust hue.
+   * - Restores default appearance for tiles in light mode.
+   * - Targets all elements with the `.leaflet-tile` class within the map container.
+   */
+  function applyTileFilter() {
+    const isDarkMode = $modeCurrent === false;
+    const mapTiles = document.querySelectorAll(".leaflet-tile");
+
+    mapTiles.forEach((tile) => {
+      if (tile instanceof HTMLElement) {
+        tile.style.filter = isDarkMode
+          ? "hue-rotate(185deg) invert(100%)"
+          : "none";
+      }
+    });
+  }
+
+  /**
+   * Observes changes to the map container's DOM and applies the theme filter
+   * to newly added map tiles.
+   *
+   * - Monitors for new `.leaflet-tile` elements being added or removed.
+   * - Ensures the dark theme filter is applied to any dynamically loaded tiles.
+   * - Disconnects any previous observer before starting a new one to avoid duplication.
+   */
+  function observeTileChanges() {
+    if (observer) observer.disconnect(); // Clean up previous observer, if any
+
+    observer = new MutationObserver(() => {
+      applyTileFilter(); // Apply the filter whenever a new tile is added
+    });
+
+    observer.observe(mapEl, {
+      childList: true,
+      subtree: true, // Observe `.leaflet-tile` changes within the map
+    });
+  }
+
+  $: {
+    if (leafletMap) {
+      applyTileFilter();
+      observeTileChanges();
+      styleZoomControls();
+    }
+  }
+
   onMount(async () => {
     leaflet = await import("leaflet");
 
     leafletMap = leaflet
       .map(mapEl, {
+        maxBoundsViscosity: 1.0,
         zoomControl: true,
       })
       .setView([mapLat, mapLon], zoom);
 
+    var southWest = leaflet.latLng(-89.98155760646617, -180),
+      northEast = leaflet.latLng(89.99346179538875, 180);
+    var bounds = leaflet.latLngBounds(southWest, northEast);
+
+    leafletMap.setMaxBounds(bounds);
+    leafletMap.on("drag", function () {
+      leafletMap.panInsideBounds(bounds, { animate: false });
+    });
+
     const initialTheme = $modeCurrent === false ? "dark" : "light";
     baseLayer = leaflet.tileLayer(baseLayers[initialTheme], {
       minZoom: 2,
@@ -109,6 +175,11 @@
 
     styleZoomControls(); // Style the zoom controls after mounting
   });
+
+  // Clean up observer when the component is destroyed
+  onDestroy(() => {
+    if (observer) observer.disconnect();
+  });
 </script>
 
 <div bind:this={mapEl} class="map" />
@@ -118,6 +189,8 @@
 {/if}
 
 <style scoped>
+  @import "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css";
+
   .map {
     position: absolute;
     top: 0;
diff --git a/src/lib/components/map/routingMachine.svelte b/src/lib/components/map/routingMachine.svelte
index 1529c78..d2407aa 100644
--- a/src/lib/components/map/routingMachine.svelte
+++ b/src/lib/components/map/routingMachine.svelte
@@ -2,10 +2,11 @@
   import { onMount } from "svelte";
   import { getContext } from "svelte";
   import { key, type MapContext } from "$lib/components/map";
-  import senderIconURL from "$lib/icons/map/sender-marker-icon.png";
-  import receiverIconURL from "$lib/icons/map/receiver-marker-icon.png";
-  import trackingEventIconURL from "$lib/icons/map/tracking-event-icon.png";
   import type { LatLngLiteral } from "leaflet";
+  import markerIconUrl from "$lib/icons/map/marker-icon.png";
+  import shadowMarkerIconUrl from "$lib/icons/map/marker-shadow.png";
+  import retinaMarkerIconUrl from "$lib/icons/map/marker-icon-2x.png";
+  import { formatTrackingStatus } from "$lib/utils";
 
   export let senderLat: number;
   export let senderLon: number;
@@ -20,39 +21,26 @@
   const map = getMap();
   const leaflet = getLeaflet();
 
-  const senderIcon = leaflet.icon({
-    iconUrl: senderIconURL,
-    iconSize: [50, 80],
-    iconAnchor: [25, 80],
-    popupAnchor: [0, -40],
-  });
-
-  const receiverIcon = leaflet.icon({
-    iconUrl: receiverIconURL,
-    iconSize: [50, 80],
-    iconAnchor: [25, 80],
-    popupAnchor: [0, -40],
-  });
-
-  const deliveryIcon = leaflet.icon({
-    iconUrl: trackingEventIconURL,
-    iconSize: [50, 80],
-    iconAnchor: [25, 80],
-    popupAnchor: [0, -40],
+  const defIcon = leaflet.icon({
+    iconUrl: markerIconUrl,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [0, -41],
+    shadowUrl: shadowMarkerIconUrl,
+    shadowSize: [41, 41],
+    shadowAnchor: [12, 41],
+    iconRetinaUrl: retinaMarkerIconUrl,
   });
 
   /**
    * Calculate the position of the delivery marker based on the tracking status.
-   * @param coordinates - Array of route coordinates.
-   * @param trackingStatus - The current tracking status.
-   * @returns {LatLngLiteral} The calculated coordinates for the delivery marker.
    */
   const getRoutePositionByStatus = (
     coordinates: LatLngLiteral[],
     trackingStatus: string,
   ): LatLngLiteral => {
     let percentage: number;
-    switch (trackingStatus) {
+    switch (trackingStatus.toUpperCase()) {
       case "PICKED_UP_AT_ORIGIN":
         percentage = 0.1;
         break;
@@ -60,23 +48,25 @@
         percentage = 0.5;
         break;
       case "OUT_FOR_DELIVERY":
-        percentage = 0.9;
+        percentage = 0.8;
         break;
       case "DELIVERED":
         return coordinates[coordinates.length - 1]; // Receiver's location
       default:
         percentage = 0.1;
     }
+
     const index = Math.floor(percentage * (coordinates.length - 1));
+
     return coordinates[index];
   };
 
   /**
    * Lifecycle hook: Runs when the component is mounted to the DOM.
-   * Makes sure the map is initialized, calculates the route, and places markers.
    */
   onMount(async () => {
     const L = (await import("leaflet")).default;
+
     await import("leaflet-routing-machine");
 
     const routingControl = L.Routing.control({
@@ -86,11 +76,13 @@
         L.latLng(senderLat, senderLon),
         L.latLng(receiverLat, receiverLon),
       ],
-      //@ts-expect-error Object literal may only specify known properties, and 'draggableWaypoints' does not exist in type 'RoutingControlOptions'.ts(2353)
+      //@ts-expect-error Ignore specific TypeScript error
       draggableWaypoints: false,
       routeWhileDragging: false,
       addWaypoints: false,
-      createMarker: () => null, // Disable default markers
+      createMarker: function () {
+        return null;
+      },
     }).addTo(map);
 
     routingControl.on("routesfound", (e) => {
@@ -102,24 +94,37 @@
         trackingStatus,
       );
 
-      // Add the markers with custom icons after the route has been generated
-      leaflet
-        .marker([senderLat, senderLon], { icon: senderIcon })
-        .addTo(map)
+      // Add sender marker
+      const senderMarker = leaflet
+        .marker([senderLat, senderLon], { icon: defIcon })
         .bindPopup(`${senderMarkerLabel}`);
-      leaflet
-        .marker([receiverLat, receiverLon], { icon: receiverIcon })
-        .addTo(map)
+
+      senderMarker.addTo(map);
+
+      // Add receiver marker
+      const receiverMarker = leaflet
+        .marker([receiverLat, receiverLon], { icon: defIcon })
         .bindPopup(`${receiverMarkerLabel}`);
-      leaflet
+
+      receiverMarker.addTo(map);
+
+      // Add delivery marker
+      const deliveryMarker = leaflet
         .marker([deliveryCoords.lat, deliveryCoords.lng], {
-          icon: deliveryIcon,
+          icon: defIcon,
         })
-        .addTo(map)
-        .bindPopup(`Delivery Status: ${trackingStatus}`);
+        .bindPopup(`Delivery Status: ${formatTrackingStatus(trackingStatus)}`);
+
+      deliveryMarker.addTo(map);
+
+      // there is an issue related to rendering Leaflet markers in production: https://github.com/Leaflet/Leaflet/issues/4968
+      // a workaround for this is to add the image URLs from a different path
+      // and (for an unknown reason) render a marker w/o an icon specified (it's placed out of map bounds to "hide" it)
+      const foo = leaflet.marker([90.99346179538875, 181]);
+      foo.addTo(map);
     });
 
-    // Hide routing container
+    // Hide leaflet-routing-machine routing container
     setTimeout(() => {
       const routingContainer = document.querySelector(
         ".leaflet-routing-container",
diff --git a/src/lib/domain/ShipmentTransactionRepository.ts b/src/lib/domain/ShipmentTransactionRepository.ts
index 01a85ca..5bd6048 100644
--- a/src/lib/domain/ShipmentTransactionRepository.ts
+++ b/src/lib/domain/ShipmentTransactionRepository.ts
@@ -94,4 +94,132 @@ export class ShipmentTransactionRepository {
     }
     return [];
   }
+
+  static async getTotalPackages(daysBack: number): Promise<number> {
+    const count = await prisma.shipmentTransaction.count({
+      where: {
+        createdAt: {
+          gte: new Date(new Date().setDate(new Date().getDate() - daysBack)),
+        },
+      },
+    });
+    return count;
+  }
+
+  static async getTotalRevenue(daysBack: number): Promise<number> {
+    // There's no way to do a .aggregate() across a relational boundary
+    let sum = 0;
+    const transactions = await prisma.shipmentTransaction.findMany({
+      select: {
+        quotation: {
+          select: {
+            amountQuotedCents: true,
+          },
+        },
+      },
+      where: {
+        createdAt: {
+          gte: new Date(new Date().setDate(new Date().getDate() - daysBack)),
+        },
+      },
+    });
+    for (const transaction of transactions) {
+      sum += transaction.quotation.amountQuotedCents;
+    }
+    return sum;
+  }
+
+  static async findByCreatedSince(
+    daysBack: number,
+  ): Promise<ShipmentTransaction[]> {
+    const packageObjects: ShipmentTransaction[] = [];
+    const dbResult = await prisma.shipmentTransaction.findMany({
+      select: { id: true },
+      where: {
+        createdAt: {
+          gte: new Date(new Date().setDate(new Date().getDate() - daysBack)),
+        },
+      },
+    });
+    for (const result of dbResult) {
+      const packageObject = await this.findById(result.id);
+      if (packageObject) packageObjects.push(packageObject);
+    }
+    return packageObjects;
+  }
+
+  // Used for the following methods
+  static getDatesSince(daysBack: number): Date[] {
+    const endDate = new Date();
+    const startDate = new Date(
+      new Date().setDate(endDate.getDate() - daysBack),
+    );
+    const dateList = [];
+    const index = new Date(startDate.getTime());
+    while (index <= endDate) {
+      dateList.push(new Date(index));
+      index.setDate(index.getDate() + 1);
+    }
+    return dateList;
+  }
+
+  static async getDailyPackageCount(
+    daysBack: number,
+  ): Promise<{ date: string; count: number }[]> {
+    const dateList = this.getDatesSince(daysBack);
+    const returnData: { date: string; count: number }[] = [];
+
+    for (const date of dateList) {
+      const count = await prisma.shipmentTransaction.count({
+        where: {
+          createdAt: {
+            gt: new Date(new Date().setDate(date.getDate() - 1)),
+            lte: date,
+          },
+        },
+      });
+      returnData.push({
+        date: date.toISOString().split("T")[0],
+        count: count,
+      });
+    }
+
+    return returnData;
+  }
+
+  static async getDailyRevenue(
+    daysBack: number,
+  ): Promise<{ date: string; revenue: number }[]> {
+    const dateList = this.getDatesSince(daysBack);
+    const returnData: { date: string; revenue: number }[] = [];
+
+    for (const date of dateList) {
+      // There's no way to do a .aggregate() across a relational boundary
+      let sum = 0;
+      const transactions = await prisma.shipmentTransaction.findMany({
+        select: {
+          quotation: {
+            select: {
+              amountQuotedCents: true,
+            },
+          },
+        },
+        where: {
+          createdAt: {
+            gt: new Date(new Date().setDate(date.getDate() - 1)),
+            lte: date,
+          },
+        },
+      });
+      for (const transaction of transactions) {
+        sum += transaction.quotation.amountQuotedCents;
+      }
+      returnData.push({
+        date: date.toISOString().split("T")[0],
+        revenue: sum,
+      });
+    }
+
+    return returnData;
+  }
 }
diff --git a/src/lib/domain/TrackingEventRepository.ts b/src/lib/domain/TrackingEventRepository.ts
index fca577e..d603402 100644
--- a/src/lib/domain/TrackingEventRepository.ts
+++ b/src/lib/domain/TrackingEventRepository.ts
@@ -10,11 +10,18 @@ export class TrackingEventRepository {
       shipmentTransactionId: trackingEvent.shipmentTransactionId,
     };
 
-    const savedTrackingEvent = await prisma.trackingEvent.upsert({
-      where: { id: trackingEvent.id },
-      update: dataFields,
-      create: dataFields,
-    });
+    let savedTrackingEvent;
+    if (trackingEvent.id) {
+      savedTrackingEvent = await prisma.trackingEvent.upsert({
+        where: { id: trackingEvent.id },
+        update: dataFields,
+        create: dataFields,
+      });
+    } else {
+      savedTrackingEvent = await prisma.trackingEvent.create({
+        data: dataFields,
+      });
+    }
 
     trackingEvent.id = savedTrackingEvent.id;
     trackingEvent.createdAt = savedTrackingEvent.createdAt;
diff --git a/src/lib/icons/LocationPinIcon.svelte b/src/lib/icons/LocationPinIcon.svelte
new file mode 100644
index 0000000..138e0af
--- /dev/null
+++ b/src/lib/icons/LocationPinIcon.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let invertColor = false;
+  export let constColor = false;
+  let colorClass: string;
+  if (constColor) {
+    colorClass = invertColor ? "text-gray-800" : "text-white";
+  } else {
+    colorClass = invertColor
+      ? "text-white dark:text-gray-800"
+      : "text-gray-800 dark:text-white";
+  }
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="h-4 w-4 {colorClass}"
+  aria-hidden="true"
+  width="24"
+  height="24"
+  fill="currentColor"
+  viewBox="0 0 384 512">
+  <path
+    d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
+</svg>
diff --git a/src/lib/icons/map/marker-icon-2x.png b/src/lib/icons/map/marker-icon-2x.png
new file mode 100644
index 0000000..e163f4f
Binary files /dev/null and b/src/lib/icons/map/marker-icon-2x.png differ
diff --git a/src/lib/icons/map/marker-icon.png b/src/lib/icons/map/marker-icon.png
new file mode 100644
index 0000000..ceeb307
Binary files /dev/null and b/src/lib/icons/map/marker-icon.png differ
diff --git a/src/lib/icons/map/marker-shadow.png b/src/lib/icons/map/marker-shadow.png
new file mode 100644
index 0000000..9fd2979
Binary files /dev/null and b/src/lib/icons/map/marker-shadow.png differ
diff --git a/src/lib/icons/map/receiver-marker-icon.png b/src/lib/icons/map/receiver-marker-icon.png
deleted file mode 100644
index b3cc785..0000000
Binary files a/src/lib/icons/map/receiver-marker-icon.png and /dev/null differ
diff --git a/src/lib/icons/map/sender-marker-icon.png b/src/lib/icons/map/sender-marker-icon.png
deleted file mode 100644
index a999650..0000000
Binary files a/src/lib/icons/map/sender-marker-icon.png and /dev/null differ
diff --git a/src/lib/icons/map/tracking-event-icon.png b/src/lib/icons/map/tracking-event-icon.png
deleted file mode 100644
index fb93ff4..0000000
Binary files a/src/lib/icons/map/tracking-event-icon.png and /dev/null differ
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7c4cf2b..3749a18 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -54,6 +54,8 @@
   import Dollar from "$lib/icons/Dollar.svelte";
   import Truck from "$lib/icons/Truck.svelte";
   import Star from "$lib/icons/Star.svelte";
+  import { UserRole } from "@prisma/client";
+  import UserSettingsIcon from "$lib/icons/UserSettingsIcon.svelte";
 
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -115,6 +117,14 @@
     isChatbotOpen.update((open) => !open);
   }
 
+  if (data?.user?.role === UserRole.ADMIN) {
+    links.push({
+      name: "Admin",
+      href: "/admin",
+      icon: UserSettingsIcon as SvelteComponent,
+    });
+  }
+
   const currentYear: number = new Date().getFullYear();
   const startingYear: number = 2024;
   const yearDisplay: string =
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6766c3c..c5a7ee7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,6 @@
   import { T } from "@threlte/core";
   import { onMount } from "svelte";
   import { tweened } from "svelte/motion";
-  import { fade } from "svelte/transition";
   import type { TypedArray } from "three";
   import { get, writable } from "svelte/store";
   import { modeCurrent } from "@skeletonlabs/skeleton";
@@ -284,15 +283,12 @@
     data-section="0">
     <div
       class="relative flex h-5/6 flex-col items-center justify-center space-y-6">
-      <div
-        transition:fade={{ delay: 250, duration: 300 }}
-        class="text-center text-7xl font-extrabold">
+      <div class="text-center text-7xl font-extrabold">
         Welcome to SvelteShip Solutions
       </div>
 
       <button
         on:click={scrollToSection}
-        transition:fade={{ delay: 250, duration: 300 }}
         class="variant-filled-primary btn mx-auto block"
         style="z-index: 3;">
         Begin
diff --git a/src/routes/about/helpers.ts b/src/routes/about/helpers.ts
index 2041745..1dd95db 100644
--- a/src/routes/about/helpers.ts
+++ b/src/routes/about/helpers.ts
@@ -15,6 +15,13 @@ export const attributionsData: Attribution[] = [
     license: "Apache License 2.0",
     licenseUrl: "https://github.com/moby/moby/blob/master/LICENSE",
   },
+  {
+    name: "Font Awesome",
+    resourceUrl: "https://fontawesome.com/",
+    description: "A font and icon toolkit based on CSS and Less.",
+    license: "SIL Open Font License 1.1, MIT License, and CC BY 4.0 License",
+    licenseUrl: "https://fontawesome.com/license",
+  },
   {
     name: "GIMP",
     resourceUrl: "https://www.gimp.org/",
@@ -106,6 +113,16 @@ export const attributionsData: Attribution[] = [
     license: "Stripe Services Agreement",
     licenseUrl: "https://stripe.com/en-ca/legal/ssa",
   },
+  {
+    name: "Svelte Google Places Autocomplete",
+    resourceUrl:
+      "https://github.com/silinternational/svelte-google-places-autocomplete",
+    description:
+      "A Svelte component for using the Google Places Autocomplete API.",
+    license: "MIT License",
+    licenseUrl:
+      "https://github.com/silinternational/svelte-google-places-autocomplete/blob/master/LICENSE",
+  },
   {
     name: "SvelteKit",
     resourceUrl: "https://svelte.dev/",
diff --git a/src/routes/admin/+page.server.ts b/src/routes/admin/+page.server.ts
index cc4ecbf..73c355d 100644
--- a/src/routes/admin/+page.server.ts
+++ b/src/routes/admin/+page.server.ts
@@ -1,9 +1,58 @@
 import { error } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
-import { UserRole } from "@prisma/client";
+import { TrackingStatus, UserRole } from "@prisma/client";
+import { ShipmentTransactionRepository } from "$lib/domain/ShipmentTransactionRepository";
+import { TrackingEventRepository } from "$lib/domain/TrackingEventRepository";
 
 export const load: PageServerLoad = async ({ locals }) => {
   if (!locals.user || locals.user.role !== UserRole.ADMIN) {
     return error(401, "Only Admins can access this page.");
   }
+
+  const totalPackages30Days =
+    await ShipmentTransactionRepository.getTotalPackages(30);
+  const totalRevenue30Days =
+    await ShipmentTransactionRepository.getTotalRevenue(30);
+
+  // Get all the packages in 30 days and figure out % delivered, % not picked up
+  // at origin, % in system.
+  const allPackagesLast30Days =
+    await ShipmentTransactionRepository.findByCreatedSince(30);
+  let deliveredCount = 0;
+  let notPickedUpCount = 0;
+  let inSystemCount = 0;
+  for (const transaction of allPackagesLast30Days) {
+    if (!transaction.id) continue;
+    const trackingEvents =
+      await TrackingEventRepository.findByShipmentTransactionId(
+        transaction.id!,
+      );
+    if (!trackingEvents || trackingEvents.length == 0) {
+      notPickedUpCount++;
+      continue;
+    }
+    if (trackingEvents.find((e) => e.type === TrackingStatus.DELIVERED)) {
+      deliveredCount++;
+      continue;
+    }
+    inSystemCount++;
+  }
+  const totalCount = deliveredCount + notPickedUpCount + inSystemCount;
+
+  const dailyCountData =
+    await ShipmentTransactionRepository.getDailyPackageCount(30);
+  const dailyRevenueData =
+    await ShipmentTransactionRepository.getDailyRevenue(30);
+
+  return {
+    user: locals.user,
+    totalPackages30Days,
+    totalRevenue30Days,
+    totalCount,
+    deliveredCount,
+    notPickedUpCount,
+    inSystemCount,
+    dailyCountData,
+    dailyRevenueData,
+  };
 };
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index e84125d..3818fdc 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1 +1,121 @@
-<h1>Admin Dashboard</h1>
+<script lang="ts">
+  import { formatAmount } from "$lib/utils";
+  import { Pie, Line } from "svelte-chartjs";
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    CategoryScale,
+    LinearScale,
+    LineElement,
+    PointElement,
+  } from "chart.js";
+
+  export let data;
+
+  // Referencing theme colours in this file turned out to be too much of a PITA
+
+  const dailyCountDateList: string[] = [];
+  const dailyCountValueList: number[] = [];
+  for (const dailyPair of data.dailyCountData) {
+    dailyCountDateList.push(dailyPair.date);
+    dailyCountValueList.push(dailyPair.count);
+  }
+  export let dailyCountData = {
+    labels: dailyCountDateList,
+    datasets: [
+      {
+        label: "Daily package volume",
+        lineTension: 0.3,
+        borderColor: "#0fba81",
+        pointBorderColor: "#0fba81",
+        pointBorderWidth: 10,
+        pointRadius: 1,
+        pointHitRadius: 10,
+        data: dailyCountValueList,
+      },
+    ],
+  };
+
+  const dailyRevenueDateList: string[] = [];
+  const dailyRevenueValueList: number[] = [];
+  for (const dailyPair of data.dailyRevenueData) {
+    dailyRevenueDateList.push(dailyPair.date);
+    dailyRevenueValueList.push(dailyPair.revenue / 100);
+  }
+  export let dailyRevenueData = {
+    labels: dailyRevenueDateList,
+    datasets: [
+      {
+        label: "Daily revenue",
+        lineTension: 0.3,
+        borderColor: "#4f46e5",
+        pointBorderColor: "#4f46e5",
+        pointBorderWidth: 10,
+        pointRadius: 1,
+        pointHitRadius: 10,
+        data: dailyRevenueValueList,
+      },
+    ],
+  };
+
+  export let statusPieData = {
+    labels: ["Not yet picked up", "In system", "Delivered"],
+    datasets: [
+      {
+        data: [data.notPickedUpCount, data.inSystemCount, data.deliveredCount],
+        backgroundColor: ["#eab308", "#d31976", "#84cc16"],
+        hoverBackgroundColor: ["#f0ca52", "#e15e9f", "#a9db5c"],
+      },
+    ],
+  };
+
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    LinearScale,
+    PointElement,
+    ArcElement,
+    CategoryScale,
+  );
+</script>
+
+<div class="container mx-auto py-10">
+  <h1 class="mb-6 text-center text-3xl font-bold">Track</h1>
+
+  <div class="grid grid-cols-2 gap-4">
+    <div class="card p-4">
+      <h2 class="mb-6 text-2xl font-bold">30-day Totals</h2>
+      <div class="text-center">
+        <h3 class="mb-4 text-2xl font-bold">{data.totalPackages30Days}</h3>
+        <div class="mb-4">packages in the last 30 days</div>
+        <h3 class="mb-4 text-2xl font-bold">
+          {formatAmount(data.totalRevenue30Days)}
+        </h3>
+        <div class="mb-4">revenue in the last 30 days</div>
+      </div>
+    </div>
+
+    <div class="card p-4">
+      <h2 class="mb-6 text-2xl font-bold">Daily Package Volume</h2>
+      <Line data={dailyCountData} options={{ responsive: true }} class="p-6" />
+    </div>
+
+    <div class="card p-4">
+      <h2 class="mb-6 text-2xl font-bold">Daily Revenue</h2>
+      <Line
+        data={dailyRevenueData}
+        options={{ responsive: true }}
+        class="p-6" />
+    </div>
+
+    <div class="card p-4">
+      <h2 class="mb-6 text-2xl font-bold">30-day Package Status</h2>
+      <Pie data={statusPieData} options={{ responsive: true }} class="p-12" />
+    </div>
+  </div>
+</div>
diff --git a/src/routes/admin/update-tracking/+page.server.ts b/src/routes/admin/update-tracking/+page.server.ts
new file mode 100644
index 0000000..f94d3c1
--- /dev/null
+++ b/src/routes/admin/update-tracking/+page.server.ts
@@ -0,0 +1,73 @@
+import { error, fail, redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+import { TrackingStatus, UserRole } from "@prisma/client";
+import { z } from "zod";
+import { ShipmentTransactionRepository } from "$lib/domain/ShipmentTransactionRepository";
+import { TrackingEvent } from "$lib/domain/TrackingEvent";
+import { EarthLocationRepository } from "$lib/domain/EarthLocationRepository";
+import { QuotationRepository } from "$lib/domain/QuotationRepository";
+import { EarthLocation } from "$lib/domain/EarthLocation";
+import { TrackingEventRepository } from "$lib/domain/TrackingEventRepository";
+
+export const load: PageServerLoad = async ({ locals }) => {
+  if (!locals.user || locals.user.role !== UserRole.ADMIN) {
+    return error(401, "Only Admins can access this page.");
+  }
+};
+
+const UpdateTrackingSchema = z.object({
+  trackingNumber: z.string(),
+  status: z.nativeEnum(TrackingStatus),
+  locationInputType: z.enum(["origin", "destination", "input"]),
+  coords: z.string().optional(),
+});
+
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    const result = UpdateTrackingSchema.safeParse(Object.fromEntries(formData));
+    if (!result.success)
+      return fail(400, { errorMessage: "Invalid form data" });
+
+    // Get the transaction
+    const transaction =
+      await ShipmentTransactionRepository.findByTrackingNumber(
+        result.data?.trackingNumber,
+      );
+    if (!transaction || !transaction.id)
+      return fail(400, { errorMessage: "Transaction not found" });
+    const quotation = await QuotationRepository.findById(transaction.id);
+    if (!quotation || !quotation.id)
+      return fail(400, { errorMessage: "Inconsistent transaction" });
+
+    // Get the location
+    let location;
+    if (result.data?.locationInputType === "origin") {
+      location = await EarthLocationRepository.findById(quotation.originId);
+    } else if (result.data?.locationInputType === "destination") {
+      location = await EarthLocationRepository.findById(
+        quotation.destinationId,
+      );
+    } else {
+      const splitCoords = result.data?.coords?.split(",");
+      if (!splitCoords || splitCoords.length !== 2)
+        return fail(400, { errorMessage: "Invalid coordinates" });
+      location = new EarthLocation({
+        lat: Number(splitCoords[0]),
+        lng: Number(splitCoords[1]),
+      });
+      await EarthLocationRepository.save(location);
+    }
+    if (!location || !location.id)
+      return fail(400, { errorMessage: "Could not save location to db" });
+
+    // Create a new tracking event
+    const trackingEvent = new TrackingEvent({
+      type: result.data?.status,
+      locationId: location.id,
+      shipmentTransactionId: transaction.id,
+    });
+    await TrackingEventRepository.save(trackingEvent);
+    return redirect(302, `/track/${transaction.trackingNumber}`);
+  },
+};
diff --git a/src/routes/admin/update-tracking/+page.svelte b/src/routes/admin/update-tracking/+page.svelte
new file mode 100644
index 0000000..9c24e04
--- /dev/null
+++ b/src/routes/admin/update-tracking/+page.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import LocationPinIcon from "$lib/icons/LocationPinIcon.svelte";
+  import { page } from "$app/stores";
+
+  const initialTrackingNumber = $page.url.searchParams.get("trackingNumber");
+
+  let selectedStatus = "PICKED_UP_AT_ORIGIN";
+  let selectedLocationInputType = "origin";
+
+  function updateLocationInputFromStatus() {
+    switch (selectedStatus) {
+      case "PICKED_UP_AT_ORIGIN":
+        selectedLocationInputType = "origin";
+        break;
+      case "FACILITY_TRANSIT":
+      case "OUT_FOR_DELIVERY":
+        selectedLocationInputType = "input";
+        break;
+      case "DELIVERED":
+        selectedLocationInputType = "destination";
+        break;
+    }
+    enableDisableLocationInput();
+  }
+
+  let locationInputsDiv: HTMLElement;
+
+  function enableDisableLocationInput() {
+    switch (selectedLocationInputType) {
+      case "origin":
+      case "destination":
+        // Disable the form
+        locationInputsDiv.classList.add("hidden");
+        break;
+      case "input":
+        // Enable the form
+        locationInputsDiv.classList.remove("hidden");
+        break;
+    }
+  }
+
+  let coordsValue = "";
+
+  // GeolocationPosition trips up eslint, it's a spec object
+  // eslint-disable-next-line no-undef
+  async function updateFromGeolocation(position: GeolocationPosition) {
+    coordsValue = `${position.coords.latitude}, ${position.coords.longitude}`;
+  }
+</script>
+
+<div class="flex flex-col items-center justify-center gap-4">
+  <div style="min-width: 36em;" class="card min-w-fit flex-grow">
+    <header class="text4xl card-header flex justify-center font-bold">
+      <h1 class="text-4xl">Update Tracking</h1>
+    </header>
+
+    <section class="p-4">
+      <form method="POST" class="flex flex-col gap-3">
+        <label class="label">
+          <span>Tracking number</span>
+          <input
+            class="input"
+            type="text"
+            placeholder="111111111111"
+            name="trackingNumber"
+            value={initialTrackingNumber} />
+        </label>
+
+        <label class="label">
+          <span>Status</span>
+          <select
+            name="status"
+            class="select"
+            bind:value={selectedStatus}
+            on:change={updateLocationInputFromStatus}>
+            <option value="PICKED_UP_AT_ORIGIN">Picked up at origin</option>
+            <option value="FACILITY_TRANSIT">Transit through facility</option>
+            <option value="OUT_FOR_DELIVERY">Out for delivery</option>
+            <option value="DELIVERED">Delivered</option>
+          </select>
+        </label>
+
+        <label class="label">
+          <span>Location</span>
+          <select
+            name="locationInputType"
+            id="locationInputType"
+            class="select"
+            bind:value={selectedLocationInputType}
+            on:change={enableDisableLocationInput}>
+            <option value="origin">Use shipment origin location</option>
+            <option value="destination"
+              >Use shipment destination location</option>
+            <option value="input">Enter location...</option>
+          </select>
+        </label>
+
+        <div id="locationInputs" bind:this={locationInputsDiv} class="hidden">
+          <label class="label">
+            <span>Coordinates</span>
+            <div
+              class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
+              <div class="input-group-shim">
+                <LocationPinIcon></LocationPinIcon>
+              </div>
+              <input
+                type="text"
+                name="coords"
+                placeholder="45.49727, -73.57893"
+                bind:value={coordsValue} />
+              <button
+                type="button"
+                class="variant-filled-secondary"
+                on:click={() =>
+                  navigator.geolocation.getCurrentPosition(
+                    updateFromGeolocation,
+                  )}>Locate Me</button>
+            </div>
+          </label>
+        </div>
+
+        <button class="variant-filled-primary btn mt-4" type="submit"
+          >Update</button>
+      </form>
+    </section>
+  </div>
+</div>
diff --git a/src/routes/track/[trackingNumber]/+page.server.ts b/src/routes/track/[trackingNumber]/+page.server.ts
index 0d29659..34a290c 100644
--- a/src/routes/track/[trackingNumber]/+page.server.ts
+++ b/src/routes/track/[trackingNumber]/+page.server.ts
@@ -14,12 +14,8 @@ export const load: PageServerLoad = async ({ params, locals }) => {
 
   if (!transaction) error(404, "Parcel not found");
 
-  console.log(params.trackingNumber);
-
   const quotation = await QuotationRepository.findById(transaction.id!);
 
-  console.log(quotation);
-
   const origin = await EarthLocationRepository.findById(quotation!.originId);
   const destination = await EarthLocationRepository.findById(
     quotation!.destinationId,
diff --git a/src/routes/track/[trackingNumber]/+page.svelte b/src/routes/track/[trackingNumber]/+page.svelte
index 1dd46aa..da330c1 100644
--- a/src/routes/track/[trackingNumber]/+page.svelte
+++ b/src/routes/track/[trackingNumber]/+page.svelte
@@ -3,6 +3,7 @@
   import { formatDbReservationDate, formatTrackingStatus } from "$lib/utils.js";
   import GameFacade from "$lib/components/Game/GameFacade.svelte";
   import { onMount } from "svelte";
+  import { UserRole } from "@prisma/client";
   import RoutingMachine from "$lib/components/map/routingMachine.svelte";
   import { calculateZoomLevel, getDistance } from "./helpers.js";
 
@@ -35,7 +36,7 @@
   </h2>
 
   <!-- Information about origin, destination, and status -->
-  <div class="mb-6 columns-3">
+  <div class="mb-6 grid grid-cols-3 gap-4">
     <div class="card p-4">
       <h3 class="text-xl font-bold">Origin</h3>
       {data.origin?.address1 || ""}{#if data.origin?.address1}<br />{/if}
@@ -44,7 +45,6 @@
       {data.origin?.administrativeArea || ""}
       {data.origin?.postalCode || ""}{#if data.origin?.city}<br />{/if}
       {data.origin?.countryCode || ""}
-      <br /><br />
     </div>
     <div class="card p-4">
       <h3 class="text-xl font-bold">Destination</h3>
@@ -57,7 +57,6 @@
       {data.destination?.postalCode ||
         ""}{#if data.destination?.city}<br />{/if}
       {data.destination?.countryCode || ""}
-      <br /><br />
     </div>
     <div class="card p-4">
       <div class="text-xl font-bold">Status</div>
@@ -134,11 +133,20 @@
             senderMarkerLabel={data.origin?.address1 ?? "Sender"}
             receiverMarkerLabel={data.destination?.address1 ?? "Receiver"}
             trackingStatus={latestEvent
-              ? formatTrackingStatus(latestEvent.type)
+              ? latestEvent.type
               : "PICKED_UP_AT_ORIGIN"} />
         </Map>
       </div>
     </div>
     <GameFacade />
   </div>
+
+  {#if data.user?.role == UserRole.ADMIN}
+    <div class="m-4 text-center">
+      <a
+        class="underline"
+        href="/admin/update-tracking?trackingNumber={data.transaction
+          .trackingNumber}">Update tracking</a>
+    </div>
+  {/if}
 </div>
diff --git a/vite.config.ts b/vite.config.ts
index fb0dcc6..788f0cd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,12 @@ import { defineConfig } from "vitest/config";
 import { purgeCss } from "vite-plugin-tailwind-purgecss";
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      ".prisma/client/index-browser":
+        "./node_modules/.prisma/client/index-browser.js",
+    },
+  },
   plugins: [
     sveltekit(),
     purgeCss({