diff --git a/plugins/favorite-tiles.client.ts b/plugins/favorite-tiles.client.ts
deleted file mode 100644
index 318fb70..0000000
--- a/plugins/favorite-tiles.client.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export default defineNuxtPlugin(() => {
-  const pocketBase = usePocketBase();
-  const favoriteTiles = useFavoriteTilesStore();
-
-  favoriteTiles.$subscribe(async (_, newFavoriteTiles) => {
-    if (!pocketBase.authStore.model) return;
-    try {
-      await pocketBase
-        .collection("users")
-        .update(pocketBase.authStore.model.id, {
-          favorite_tiles: JSON.stringify(newFavoriteTiles.favoriteTiles),
-        });
-      console.log("Uploaded favorite tiles");
-    } catch (e) {
-      console.log("Failed to upload favorite tiles", e);
-    }
-  });
-});
diff --git a/stores/favorite-tiles.ts b/stores/favorite-tiles.ts
index 58c1612..e6780fa 100644
--- a/stores/favorite-tiles.ts
+++ b/stores/favorite-tiles.ts
@@ -1,8 +1,11 @@
 import { defineStore } from "pinia";
+import type { UnsubscribeFunc } from "pocketbase";
 
 export const useFavoriteTilesStore = defineStore(
   "favorite-tiles",
   () => {
+    const pocketBase = usePocketBase();
+
     const favoriteTiles = ref<number[]>([]);
 
     function isFavorite(tile: number) {
@@ -12,13 +15,63 @@ export const useFavoriteTilesStore = defineStore(
     function toggleFavoriteTile(tile: number) {
       const index = favoriteTiles.value.indexOf(tile);
       if (index >= 0) {
-        favoriteTiles.value.splice(index, 1);
+        removeFavoriteTile(tile);
       } else {
-        favoriteTiles.value.push(tile);
+        addFavoriteTile(tile);
       }
     }
 
-    return { favoriteTiles, isFavorite, toggleFavoriteTile };
+    async function getCloudFavoriteTiles(): Promise<number[] | undefined> {
+      if (!pocketBase.authStore.model) return;
+      const user = await pocketBase
+        .collection("users")
+        .getOne(pocketBase.authStore.model.id);
+      if (!user) return;
+      return user.favorite_tiles;
+    }
+
+    async function setCloudFavoriteTiles(favoriteTiles: number[]) {
+      if (!pocketBase.authStore.model) return;
+      await pocketBase
+        .collection("users")
+        .update(pocketBase.authStore.model.id, {
+          favorite_tiles: JSON.stringify(favoriteTiles),
+        });
+      console.log("Updated favorite tiles in the cloud");
+    }
+
+    function addFavoriteTile(tile: number) {
+      favoriteTiles.value.push(tile);
+      getCloudFavoriteTiles().then((cloudFavoriteTiles) => {
+        if (!cloudFavoriteTiles) return;
+        if (!cloudFavoriteTiles.includes(tile)) {
+          setCloudFavoriteTiles([...cloudFavoriteTiles, tile]);
+        }
+      });
+    }
+
+    function removeFavoriteTile(tile: number) {
+      const index = favoriteTiles.value.indexOf(tile);
+      if (index >= 0) {
+        favoriteTiles.value.splice(index, 1);
+      }
+      getCloudFavoriteTiles().then((cloudFavoriteTiles) => {
+        if (!cloudFavoriteTiles) return;
+        const cloudIndex = cloudFavoriteTiles.indexOf(tile);
+        if (cloudIndex >= 0) {
+          cloudFavoriteTiles.splice(cloudIndex, 1);
+          setCloudFavoriteTiles(cloudFavoriteTiles);
+        }
+      });
+    }
+
+    return {
+      favoriteTiles,
+      isFavorite,
+      toggleFavoriteTile,
+      getCloudFavoriteTiles,
+      setCloudFavoriteTiles,
+    };
   },
   {
     persist: {
@@ -33,7 +86,7 @@ export const useFavoriteTilesStore = defineStore(
             const newFavoriteTiles: string = JSON.parse(vuex).favoriteTiles;
             localStorage.setItem(
               "favorite-tiles",
-              JSON.stringify({ favoriteTiles: newFavoriteTiles }),
+              JSON.stringify({ favoriteTiles: newFavoriteTiles })
             );
             localStorage.removeItem("vuex");
           } catch (e) {
@@ -42,5 +95,5 @@ export const useFavoriteTilesStore = defineStore(
         }
       },
     },
-  },
+  }
 );