diff --git a/api/README.md b/api/README.md
index bde4e858..b0551e48 100644
--- a/api/README.md
+++ b/api/README.md
@@ -167,5 +167,12 @@ firebase deploy --only functions:createStripeCustomer,functions:createOrRetrieve
 See [the docs](https://firebase.google.com/docs/rules/manage-deploy#deploy_your_updates).
 
 ```
+# For Firestore
 firebase deploy --only firestore:rules
+
+# For Storage
+firebase deploy --only storage
+
+# Both
+firebase deploy --only firestore:rules,storage
 ```
diff --git a/firestore.rules b/firestore.rules
index 71375b63..25c92e23 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -32,6 +32,10 @@ service cloud.firestore {
       return request.auth.token.admin;
     }
 
+    function isMember() {
+      return get(/databases/$(database)/documents/users/$(requesterId())).data.superfan == true;
+    }
+
     function requesterId() {
       return request.auth.uid;
     }
@@ -90,6 +94,17 @@ service cloud.firestore {
         && !request.resource.data.diff(resource.data).affectedKeys().hasAny(['stripeCustomerId', 'stripeSubscription', 'sendgridId', 'oldEmail', 'newEmail'])
     }
 
+    function validateTrailState(trail) {
+      return isNonEmptyString(trail.originalFileName) 
+        && isNonEmptyString(trail.md5Hash)
+        && trail.visible is bool
+    }
+
+    function isValidTrailAccess(userId) {
+      // Only superfans (members) can access trails
+      return isSignedIn() && isOwner(userId) && isMember()
+    }
+
     match /users-private/{userId} {
       // users-private documents are always created by firebase-admin.
       allow read: if isOwner(userId);
@@ -97,6 +112,16 @@ service cloud.firestore {
       if isSignedIn() &&
       isOwner(userId) &&
       validateUserPrivateState(request.resource.data)
+      match /trails/{trailId} {
+        allow read: if isValidTrailAccess(userId);
+        allow create: if isValidTrailAccess(userId)
+          && validateTrailState(incomingData())
+        allow update: if isValidTrailAccess(userId)
+        // Only the visibility should be updateable by the user, once the trail is created.
+          && incomingData().diff(existingData()).affectedKeys().hasOnly(['visible'])
+          && incomingData().visible is bool; 
+        allow delete: if isValidTrailAccess(userId);
+      }
     }
 
     // Garden functions
@@ -251,7 +276,7 @@ service cloud.firestore {
       // The first user in the participating `users` array must be the chat creator (first message sender)
         && incomingData().users[0] == requesterId()
       // Only superfans (members) can create chats
-        && get(/databases/$(database)/documents/users/$(requesterId())).data.superfan == true
+        && isMember()
       // Both participants exist
         && userExists(incomingData().users[0])
         && userExists(incomingData().users[1])
@@ -299,9 +324,7 @@ service cloud.firestore {
       }
     }
 
-    match /tmp-users/{userId} {
-      allow read, write: if false
-    }
+    // Stats
 
     match /stats/{type} {
       allow read: if isSignedIn() && isAdmin();
@@ -315,5 +338,6 @@ service cloud.firestore {
     match /stats/campsites {
       allow read: if true;
     }
+
   }
 }
diff --git a/package.json b/package.json
index 07f5161f..178e9d62 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@tmcw/togeojson": "^5.5.0",
     "@turf/turf": "^6.5.0",
     "@types/lodash-es": "^4.17.7",
+    "@types/md5": "^2.3.2",
     "@types/nprogress": "^0.2.0",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
@@ -51,6 +52,7 @@
     "iso-639-1": "^2.1.9",
     "lodash-es": "^4.17.21",
     "maplibre-gl": "^1",
+    "md5": "^2.3.0",
     "nprogress": "^0.2.0",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.10.1",
diff --git a/src/lib/api/collections.ts b/src/lib/api/collections.ts
index b40996aa..77458e6b 100644
--- a/src/lib/api/collections.ts
+++ b/src/lib/api/collections.ts
@@ -4,3 +4,4 @@ export const STATS = 'stats';
 export const USERS = 'users';
 export const USERS_PRIVATE = 'users-private';
 export const MESSAGES = 'messages';
+export const TRAILS = 'trails';
diff --git a/src/lib/api/trail.ts b/src/lib/api/trail.ts
new file mode 100644
index 00000000..07a49437
--- /dev/null
+++ b/src/lib/api/trail.ts
@@ -0,0 +1,151 @@
+import { deleteObject, getDownloadURL, ref, uploadString } from 'firebase/storage';
+import { db, storage } from './firebase';
+import { getUser } from '$lib/stores/auth';
+import type GeoJSON from 'geojson';
+import {
+  CollectionReference,
+  DocumentReference,
+  collection,
+  deleteDoc,
+  doc,
+  onSnapshot,
+  query,
+  setDoc,
+  updateDoc
+} from 'firebase/firestore';
+import { TRAILS, USERS_PRIVATE } from './collections';
+import type { FirebaseTrail, LocalTrail } from '$lib/types/Trail';
+import md5 from 'md5';
+import {
+  addFileDataLayers,
+  findFileDataLayer,
+  findFileDataLayerByMD5Hash,
+  removeFileDataLayers,
+  updateFileDataLayers
+} from '$lib/stores/file';
+
+const getFileRef = (fileId: string) => ref(storage(), `trails/${getUser().uid}/${fileId}`);
+
+export const createTrailObserver = () => {
+  const q = query(
+    collection(db(), USERS_PRIVATE, getUser().id, TRAILS) as CollectionReference<FirebaseTrail>
+  );
+
+  return onSnapshot(q, async (querySnapshot) => {
+    const changes = querySnapshot.docChanges();
+    changes.map(async (change) => {
+      const trail: LocalTrail = {
+        id: change.doc.id,
+        animate: false,
+        ...change.doc.data()
+      };
+      if (change.type === 'added') {
+        const existingLocalLayer = findFileDataLayer(trail.id);
+        if (!existingLocalLayer) {
+          // Sync a *remote* addition to the local cache
+          // Locally added files are added before they are uploaded (see `createTrail()`).
+          //
+          // Download the trail file
+          const ref = getFileRef(trail.id);
+          const geoJson = await getDownloadURL(ref)
+            .then((url) => fetch(url))
+            .then((r) => r.json());
+          addFileDataLayers({
+            ...trail,
+            geoJson
+          });
+        }
+      } else if (change.type === 'removed') {
+        // Sync the deletion to the local cache
+        const existingLocalLayer = findFileDataLayer(trail.id);
+        if (existingLocalLayer) {
+          removeFileDataLayers(trail.id);
+        }
+      } else if (change.type === 'modified') {
+        // For now, only the visiblity can be modified
+        updateFileDataLayers(trail.id, trail);
+      }
+    });
+  });
+};
+
+export const createTrail = async ({
+  /**
+   * Original file name
+   */
+  name,
+  geoJson
+}: {
+  name: string;
+  geoJson: GeoJSON.FeatureCollection | GeoJSON.Feature;
+}) => {
+  const uid = getUser().id;
+
+  // Calculate the file's MD5 checksum
+  const jsonString = JSON.stringify(geoJson);
+  const md5Hash = md5(jsonString);
+
+  // Check if the file already exists
+  const existingFile = findFileDataLayerByMD5Hash(md5Hash);
+  if (existingFile) {
+    console.error('This file already exists');
+    return;
+  }
+
+  // First, create a local Firestore doc reference explicitly, so it's ID can be used
+  const docRef = doc(
+    collection(db(), USERS_PRIVATE, uid, TRAILS)
+  ) as DocumentReference<FirebaseTrail>;
+
+  // Immediately show the file locally
+  addFileDataLayers({
+    id: docRef.id,
+    originalFileName: name,
+    geoJson,
+    md5Hash,
+    visible: true,
+    animate: true
+  });
+
+  // Next, upload the file for persistence
+  const fileRef = getFileRef(docRef.id);
+  await uploadString(fileRef, jsonString, undefined, {
+    // TODO: should we rename extensions to .geojson?
+    contentType: 'application/geo+json',
+    customMetadata: {
+      originalFileName: name
+    }
+  });
+
+  // Set the remote document content
+  await setDoc(docRef, {
+    originalFileName: name,
+    // Default
+    md5Hash,
+    visible: true
+  });
+};
+
+export const toggleTrailVisibility = async (id: string) => {
+  const existingFile = findFileDataLayer(id);
+  if (!existingFile) {
+    console.error('The visibility of this trail can not be changed');
+    return;
+  }
+  const ref = doc(db(), USERS_PRIVATE, getUser().id, TRAILS, id);
+  await updateDoc(ref, { visible: !existingFile.visible });
+};
+
+export const deleteTrail = async (id: string) => {
+  const existingFile = findFileDataLayer(id);
+  if (!existingFile) {
+    console.error('This trail does not exist');
+    return;
+  }
+
+  const ref = getFileRef(id);
+  // Delete the storage object
+  await deleteObject(ref);
+  // Delete the metadata
+  await deleteDoc(doc(db(), USERS_PRIVATE, getUser().id, TRAILS, id));
+};
diff --git a/src/lib/components/LayersAndTools/TrailsTool.svelte b/src/lib/components/LayersAndTools/TrailsTool.svelte
index 5183ea62..c1a0083c 100644
--- a/src/lib/components/LayersAndTools/TrailsTool.svelte
+++ b/src/lib/components/LayersAndTools/TrailsTool.svelte
@@ -3,13 +3,10 @@
 
   import { LabeledCheckbox, MultiActionLabel, Button, Icon } from '$lib/components/UI';
   import { cyclistIcon, hikerIcon, routesIcon } from '$lib/images/icons';
-  import {
-    fileDataLayers,
-    removeFileDataLayers,
-    toggleVisibilityFileDataLayers
-  } from '$lib/stores/file';
+  import { fileDataLayers } from '$lib/stores/file';
   import { cleanName } from '$lib/util/slugify';
   import { onDestroy } from 'svelte';
+  import { deleteTrail, toggleTrailVisibility } from '$lib/api/trail';
 
   export let showHiking: boolean;
   export let showCycling: boolean;
@@ -41,14 +38,10 @@
     <MultiActionLabel
       icon={routesIcon}
       name={layer.id}
-      label={cleanName(layer.name)}
+      label={cleanName(layer.originalFileName)}
       checked={layer.visible}
-      on:change={() => {
-        toggleVisibilityFileDataLayers(layer.id);
-      }}
-      on:secondary={() => {
-        removeFileDataLayers(layer.id);
-      }}
+      on:change={() => toggleTrailVisibility(layer.id)}
+      on:secondary={() => deleteTrail(layer.id)}
     />
   {/each}
 </div>
diff --git a/src/lib/components/Map/FileTrailModal.svelte b/src/lib/components/Map/FileTrailModal.svelte
index 71aa4078..fbeab433 100644
--- a/src/lib/components/Map/FileTrailModal.svelte
+++ b/src/lib/components/Map/FileTrailModal.svelte
@@ -5,7 +5,6 @@
   import { keyboardEvent } from '$lib/stores/keyboardEvent';
   import { VALID_FILETYPE_EXTENSIONS } from '$lib/constants';
   import { getFileExtension } from '$lib/util';
-  import { addFileDataLayers } from '$lib/stores/file';
   import Icon from '$lib/components/UI/Icon.svelte';
   import { crossIcon, uploadCloudIcon } from '$lib/images/icons';
   import Text from '$lib/components/UI/Text.svelte';
@@ -14,6 +13,7 @@
   import notification from '$lib/stores/notification';
   import trackEvent from '$lib/util/track-plausible';
   import { PlausibleEvent } from '$lib/types/Plausible';
+  import { createTrail } from '$lib/api/trail';
 
   export let show = false;
   let files: File[] = [];
@@ -43,10 +43,7 @@
         try {
           const geoJson = await fileToGeoJson(file);
 
-          addFileDataLayers({
-            name: file.name,
-            geoJson: geoJson
-          });
+          createTrail({ name: file.name, geoJson });
           return true;
         } catch (error) {
           notification.warning('Error while processing file', 5000);
diff --git a/src/lib/components/Map/FileTrails.svelte b/src/lib/components/Map/FileTrails.svelte
index ea2d607b..d5623115 100644
--- a/src/lib/components/Map/FileTrails.svelte
+++ b/src/lib/components/Map/FileTrails.svelte
@@ -6,6 +6,7 @@
   import bbox from '@turf/bbox';
   import key from './mapbox-context.js';
   import { ZOOM_LEVELS } from '$lib/constants.js';
+  import type { FileDataLayer } from '$lib/types/DataLayer';
 
   type SourceData =
     | string
@@ -24,23 +25,27 @@
     }
   };
 
-  const addTrail = (geoJson: SourceData, id: string) => {
-    try {
-      const bboxBounds = <[number, number, number, number]>bbox(geoJson).slice(0, 4);
-      map.fitBounds(bboxBounds, {
-        padding: {
-          top: 150,
-          bottom: 150,
-          left: 50,
-          right: 50
-        },
-        maxZoom: ZOOM_LEVELS.ROAD,
-        linear: true
-      });
-    } catch (error) {
-      console.error(error);
+  const addTrail = ({ geoJson, id, animate }: FileDataLayer) => {
+    // Zoom & pan the map to show the trail, but only if we added the route locally.
+    if (animate) {
+      try {
+        const bboxBounds = <[number, number, number, number]>bbox(geoJson).slice(0, 4);
+        map.fitBounds(bboxBounds, {
+          padding: {
+            top: 150,
+            bottom: 150,
+            left: 50,
+            right: 50
+          },
+          maxZoom: ZOOM_LEVELS.ROAD,
+          linear: true
+        });
+      } catch (error) {
+        console.error(error);
+      }
     }
 
+    // Add/update layer data
     if (map.getSource(id)) {
       map.getSource(id).setData(geoJson);
     } else {
@@ -50,6 +55,7 @@
       });
     }
 
+    // Add a presentation if not existing yet
     if (!map.getLayer(id)) {
       map.addLayer({
         id,
@@ -142,7 +148,7 @@
     // Add new layers
     idsToAdd.map((id) => {
       const fileDataLayer = fileDataLayers.find((fileDataLayer) => fileDataLayer.id === id);
-      if (fileDataLayer) addTrail(fileDataLayer.geoJson, id);
+      if (fileDataLayer) addTrail(fileDataLayer);
     });
 
     // Remove old layers
diff --git a/src/lib/components/UI/LabelWithIcon.svelte b/src/lib/components/UI/LabelWithIcon.svelte
index 0342dd77..980ebdf4 100644
--- a/src/lib/components/UI/LabelWithIcon.svelte
+++ b/src/lib/components/UI/LabelWithIcon.svelte
@@ -4,6 +4,9 @@
   export let labelFor: undefined | string = undefined;
   export let ellipsis = false;
   export let compact = false;
+  // Intended for hover states when ellipsis is enabled.
+  // TODO: This could be made more accessible.
+  export let title: undefined | string = undefined;
 </script>
 
 <label for={labelFor} class:compact>
@@ -12,7 +15,7 @@
       <Icon {icon} />
     </div>
   {/if}
-  <span class="label" class:ellipsis><slot /></span>
+  <span class="label" title={ellipsis ? title : undefined} class:ellipsis><slot /></span>
 </label>
 
 <style>
@@ -23,6 +26,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    min-width: 0;
   }
 
   .label {
diff --git a/src/lib/components/UI/LabeledCheckbox.svelte b/src/lib/components/UI/LabeledCheckbox.svelte
index acbf65dd..6a747b39 100644
--- a/src/lib/components/UI/LabeledCheckbox.svelte
+++ b/src/lib/components/UI/LabeledCheckbox.svelte
@@ -9,6 +9,7 @@
   export let disabled = false;
   export let ellipsis = false;
   export let compact = false;
+  export let title: undefined | string = undefined;
 
   import LabelWithIcon from './LabelWithIcon.svelte';
 </script>
@@ -17,7 +18,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click|stopPropagation class:compact class="checkbox-container">
   <input id={name} type="checkbox" {disabled} {name} on:input bind:checked on:change />
-  <LabelWithIcon {ellipsis} {compact} labelFor={name} {icon}>{label ?? ''}<slot /></LabelWithIcon>
+  <LabelWithIcon {ellipsis} {compact} title={label} labelFor={name} {icon}
+    >{label ?? ''}<slot /></LabelWithIcon
+  >
 </div>
 
 <style>
@@ -26,6 +29,8 @@
     align-items: center;
     margin: 0.1rem 0;
     font-size: var(--controls-font-size);
+    /* Make sure that titles that are too long can get collapsed */
+    min-width: 0;
   }
 
   input {
diff --git a/src/lib/components/UI/MultiActionLabel.svelte b/src/lib/components/UI/MultiActionLabel.svelte
index 7f9e3b01..de1e82e9 100644
--- a/src/lib/components/UI/MultiActionLabel.svelte
+++ b/src/lib/components/UI/MultiActionLabel.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div class="multi-action-label">
-  <LabeledCheckbox ellipsis {icon} {name} {label} {disabled} on:input bind:checked on:change />
+  <LabeledCheckbox ellipsis {name} {label} {disabled} on:input bind:checked on:change />
   <button
     class="button-unstyle secondary"
     on:click|preventDefault|stopPropagation={(e) => dispatch('secondary', e)}
@@ -36,7 +36,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
+    min-width: 2rem;
     height: 2rem;
     color: var(--color-text);
   }
diff --git a/src/lib/stores/file.ts b/src/lib/stores/file.ts
index 72dbd3a7..0b74bd26 100644
--- a/src/lib/stores/file.ts
+++ b/src/lib/stores/file.ts
@@ -1,47 +1,44 @@
+/**
+ * Data stores for trail/track files
+ */
 import { get, writable } from 'svelte/store';
 import type { FileDataLayer } from '../types/DataLayer';
-import { slugify } from '../util';
-
 export const prefix = 'fileDataLayer-';
 
 export const fileDataLayers = writable<FileDataLayer[]>([]);
 
-export const addFileDataLayers = ({
-  name,
-  geoJson
-}: {
-  name: string;
-  geoJson: GeoJSON.FeatureCollection | GeoJSON.Feature;
-}) => {
-  const id = prefix + slugify(name ? name : (Math.random() + 1).toString(36).substring(7));
-
-  const checkIndex = get(fileDataLayers).findIndex((layer) => layer.id === id);
-
-  if (checkIndex !== -1) throw new Error('FileDataLayer with id ' + id + ' already exists');
-  else
-    fileDataLayers.update((layers) => [
-      ...layers,
-      <FileDataLayer>{
-        name,
-        id,
-        geoJson,
-        visible: true
-      }
-    ]);
+export const findFileDataLayer = (id: string) =>
+  get(fileDataLayers).find((layer) => layer.id === id);
+
+/**
+ * @param md5Hash the hex string of the MD5 hash of the file
+ */
+export const findFileDataLayerByMD5Hash = (md5Hash: string) =>
+  get(fileDataLayers).find((layer) => layer.md5Hash === md5Hash);
+
+export const addFileDataLayers = async (trail: FileDataLayer) => {
+  const checkIndex = get(fileDataLayers).findIndex((layer) => layer.id === trail.id);
+
+  if (checkIndex !== -1) {
+    throw new Error('FileDataLayer with id ' + trail.id + ' already exists');
+  } else {
+    fileDataLayers.update((layers) => [...layers, trail]);
+  }
 };
 
-export const removeFileDataLayers = (id: string) => {
+export const removeFileDataLayers = async (id: string) => {
+  // Remove the local file in any case
   fileDataLayers.update((layers) => layers.filter((layer) => layer.id !== id));
 };
 
-export const updateFileDataLayers = (id: string, fileDataLayer: FileDataLayer) => {
+export const updateFileDataLayers = (id: string, fileDataLayer: Partial<FileDataLayer>) => {
   fileDataLayers.update((layers) =>
     layers.map((layer) => (layer.id === id ? { ...layer, ...fileDataLayer } : layer))
   );
 };
 
-export const toggleVisibilityFileDataLayers = (id: string) => {
+export const removeTrailAnimations = () => {
   fileDataLayers.update((layers) =>
-    layers.map((layer) => (layer.id === id ? { ...layer, visible: !layer.visible } : layer))
+    layers.map((layer) => (layer.animate ? { ...layer, animate: false } : layer))
   );
 };
diff --git a/src/lib/types/DataLayer.ts b/src/lib/types/DataLayer.ts
index 3e053197..1ce2ec58 100644
--- a/src/lib/types/DataLayer.ts
+++ b/src/lib/types/DataLayer.ts
@@ -1,8 +1,13 @@
+import type { LocalTrail } from './Trail';
+
 type DataLayer = {
   id: string;
   visible?: boolean;
 };
 
+/**
+ * TODO: this is unused, and may be broken now
+ */
 export type OriginStation = {
   location: { longitude: number; latitude: number };
   name: string;
@@ -13,7 +18,6 @@ export type TrainconnectionsDataLayer = DataLayer & {
   originStation: OriginStation;
 };
 
-export type FileDataLayer = DataLayer & {
-  name: string;
+export type FileDataLayer = LocalTrail & {
   geoJson: GeoJSON.FeatureCollection | GeoJSON.Feature;
 };
diff --git a/src/lib/types/Trail.ts b/src/lib/types/Trail.ts
new file mode 100644
index 00000000..6f580602
--- /dev/null
+++ b/src/lib/types/Trail.ts
@@ -0,0 +1,26 @@
+// Types trails
+
+/** Trail as stored in Firebase */
+export type FirebaseTrail = {
+  /** slugified ID, used to find the Storage paht of the GeoJSON file */
+  originalFileName: string;
+  /**
+   * Checksum for the referenced file.
+   *
+   * CRC32-C checksums are recommended by Cloud Storage, but the Firebase Metadata API
+   * only includes MD5 hashes; so we're using/caching that here for consistency.
+   * https://cloud.google.com/storage/docs/hashes-etags
+   * https://firebase.google.com/docs/reference/js/storage.uploadmetadata.md#uploadmetadata_interface
+   */
+  md5Hash: string;
+  visible: boolean;
+};
+
+/**
+ * Local representation of a Trail
+ */
+export type LocalTrail = FirebaseTrail & {
+  id: string;
+  /** Whether the map should zoom in on this trail when it is added */
+  animate: boolean;
+};
diff --git a/src/routes/explore/+layout.svelte b/src/routes/explore/+layout.svelte
index 602f8c6a..99f62ce4 100644
--- a/src/routes/explore/+layout.svelte
+++ b/src/routes/explore/+layout.svelte
@@ -28,6 +28,10 @@
   import { PlausibleEvent } from '$lib/types/Plausible';
   import { setExpiringCookie } from '$lib/util/set-cookie';
   import ZoomRestrictionNotice from '$lib/components/Map/ZoomRestrictionNotice.svelte';
+  import { createTrailObserver } from '$lib/api/trail';
+  import { user } from '$lib/stores/auth';
+  import type { Unsubscribe } from 'firebase/firestore';
+  import { fileDataLayers, removeTrailAnimations } from '$lib/stores/file';
 
   let fallbackLocation = { longitude: 4.5, latitude: 50.5 };
   let geolocationIsLoaded = false;
@@ -58,6 +62,23 @@
     trackEvent(PlausibleEvent.SHOW_TRAIN_NETWORK);
   }
 
+  let unsubscribeFromTrailObserver: null | Unsubscribe = null;
+  $: if ($user && $user.superfan) {
+    // Combining this conditions with the above one somehow doesn't work.
+    if (!unsubscribeFromTrailObserver) {
+      unsubscribeFromTrailObserver = createTrailObserver();
+    }
+  }
+
+  // If the user is not a Superfan anymore, but trails are being listened for, then clear the trails + listener.
+  $: if ($user && !$user.superfan) {
+    if (unsubscribeFromTrailObserver) {
+      fileDataLayers.set([]);
+      unsubscribeFromTrailObserver();
+      unsubscribeFromTrailObserver = null;
+    }
+  }
+
   // true when visiting the link to a garden directly, used to increase zoom level
   // TODO check this: It looks like there is no need for a subscribe on page
   let usingGardenLink = !!$page.params.gardenId;
@@ -110,7 +131,7 @@
       try {
         await getAllListedGardens();
       } catch (ex) {
-        console.log(ex);
+        console.error(ex);
         isFetchingGardens.set(false);
       }
     }
@@ -132,6 +153,11 @@
   onDestroy(() => {
     isFetchingGardens.set(false);
     unsubscribeFromSavedGardens();
+    if (unsubscribeFromTrailObserver) {
+      unsubscribeFromTrailObserver();
+    }
+    // On SPA navigation, when coming back, don't animate to an added trail anymore
+    removeTrailAnimations();
   });
 </script>
 
diff --git a/storage.rules b/storage.rules
index f5074da7..227b165f 100644
--- a/storage.rules
+++ b/storage.rules
@@ -1,9 +1,34 @@
 rules_version = '2';
 service firebase.storage {
+
   match /b/{bucket}/o {
+    function isOwner(userId) {
+      return request.auth.uid == userId
+    }
+
+    function isSignedIn() {
+      return request.auth != null;
+    }
+
+    function requesterId() {
+      return request.auth.uid;
+    }
     match /gardens/{userId}/{allPaths=**} {
       allow read;
       allow write: if request.auth != null && request.auth.uid == userId;
     }
+
+    function isValidTrailAccess(userId) {
+      return isSignedIn() && isOwner(userId)
+        && firestore.get(/databases/(default)/documents/users/$(requesterId())).data.superfan == true;
+    }
+
+    match /trails/{userId}/{singlePath} {
+      // Only superfans (members) can upload and see trails
+      allow read: if isValidTrailAccess(userId);
+      allow create: if isValidTrailAccess(userId);      
+      allow delete: if isValidTrailAccess(userId);
+      // Updates are NOT allowed
+    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a9e0bf09..fecb6b9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2797,6 +2797,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/md5@npm:^2.3.2":
+  version: 2.3.2
+  resolution: "@types/md5@npm:2.3.2"
+  checksum: ce59779c5aa9bcafe6e089f7a0be2f25fb4661d437809dd7e895e13e9369855aeee8521a0a954bb38468cd8ed2d7c84d5dbb3ba37544f5a11c8a199e5a8561b6
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*, @types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
   version: 18.11.18
   resolution: "@types/node@npm:18.11.18"
@@ -3357,6 +3364,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"charenc@npm:0.0.2":
+  version: 0.0.2
+  resolution: "charenc@npm:0.0.2"
+  checksum: 81dcadbe57e861d527faf6dd3855dc857395a1c4d6781f4847288ab23cffb7b3ee80d57c15bba7252ffe3e5e8019db767757ee7975663ad2ca0939bb8fcaf2e5
+  languageName: node
+  linkType: hard
+
 "check-error@npm:^1.0.2":
   version: 1.0.2
   resolution: "check-error@npm:1.0.2"
@@ -3548,6 +3562,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crypt@npm:0.0.2":
+  version: 0.0.2
+  resolution: "crypt@npm:0.0.2"
+  checksum: baf4c7bbe05df656ec230018af8cf7dbe8c14b36b98726939cef008d473f6fe7a4fad906cfea4062c93af516f1550a3f43ceb4d6615329612c6511378ed9fe34
+  languageName: node
+  linkType: hard
+
 "css-tree@npm:^2.3.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
@@ -4898,6 +4919,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-buffer@npm:~1.1.6":
+  version: 1.1.6
+  resolution: "is-buffer@npm:1.1.6"
+  checksum: 4a186d995d8bbf9153b4bd9ff9fd04ae75068fe695d29025d25e592d9488911eeece84eefbd8fa41b8ddcc0711058a71d4c466dcf6f1f6e1d83830052d8ca707
+  languageName: node
+  linkType: hard
+
 "is-core-module@npm:^2.9.0":
   version: 2.11.0
   resolution: "is-core-module@npm:2.11.0"
@@ -5277,6 +5305,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"md5@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "md5@npm:2.3.0"
+  dependencies:
+    charenc: 0.0.2
+    crypt: 0.0.2
+    is-buffer: ~1.1.6
+  checksum: a63cacf4018dc9dee08c36e6f924a64ced735b37826116c905717c41cebeb41a522f7a526ba6ad578f9c80f02cb365033ccd67fe186ffbcc1a1faeb75daa9b6e
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.30":
   version: 2.0.30
   resolution: "mdn-data@npm:2.0.30"
@@ -7352,6 +7391,7 @@ __metadata:
     "@tmcw/togeojson": ^5.5.0
     "@turf/turf": ^6.5.0
     "@types/lodash-es": ^4.17.7
+    "@types/md5": ^2.3.2
     "@types/nprogress": ^0.2.0
     "@types/smoothscroll-polyfill": ^0.3.1
     "@typescript-eslint/eslint-plugin": ^5.27.0
@@ -7368,6 +7408,7 @@ __metadata:
     iso-639-1: ^2.1.9
     lodash-es: ^4.17.21
     maplibre-gl: ^1
+    md5: ^2.3.0
     nprogress: ^0.2.0
     prettier: ^2.6.2
     prettier-plugin-svelte: ^2.10.1