diff --git a/deno.lock b/deno.lock
index f607555..47a014f 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,6 +1,7 @@
 {
   "version": "5",
   "specifiers": {
+    "npm:@solid-primitives/resource@~0.4.2": "0.4.2_solid-js@1.9.9__seroval@1.3.2",
     "npm:@tailwindcss/vite@^4.1.13": "4.1.13_vite@7.1.5__picomatch@4.0.3",
     "npm:solid-devtools@~0.34.3": "0.34.3_solid-js@1.9.9__seroval@1.3.2_vite@7.1.5__picomatch@4.0.3_@babel+core@7.28.4",
     "npm:solid-js@^1.9.9": "1.9.9_seroval@1.3.2",
@@ -534,6 +535,12 @@
         "solid-js"
       ]
     },
+    "@solid-primitives/resource@0.4.2_solid-js@1.9.9__seroval@1.3.2": {
+      "integrity": "sha512-NY3M4adgLUS/jZLbLOT8N61oIWlCg2XlOBVvRMjNc61JyrzKTiiy9Khurjikxetjm0nt0PZv4R83lwAkbFjRkw==",
+      "dependencies": [
+        "solid-js"
+      ]
+    },
     "@solid-primitives/rootless@1.5.2_solid-js@1.9.9__seroval@1.3.2": {
       "integrity": "sha512-9HULb0QAzL2r47CCad0M+NKFtQ+LrGGNHZfteX/ThdGvKIg2o2GYhBooZubTCd/RTu2l2+Nw4s+dEfiDGvdrrQ==",
       "dependencies": [
@@ -1158,6 +1165,7 @@
   "workspace": {
     "packageJson": {
       "dependencies": [
+        "npm:@solid-primitives/resource@~0.4.2",
         "npm:@tailwindcss/vite@^4.1.13",
         "npm:solid-devtools@~0.34.3",
         "npm:solid-js@^1.9.9",
diff --git a/package.json b/package.json
index e57b189..a863a25 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "vite-plugin-solid": "^2.11.8"
   },
   "dependencies": {
+    "@solid-primitives/resource": "^0.4.2",
     "solid-js": "^1.9.9"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 5bb26b3..c5e174c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+import { makeCache } from "@solid-primitives/resource";
 import {
 	type Component,
 	createResource,
@@ -17,13 +18,26 @@ export default () => {
 		username: "karitham",
 		range: "all_time",
 	});
-	const [artistRes] = createResource<ArtistStats, Settings>(settings, (set) =>
-		artists(set.username, undefined, set.range),
+	const [artistFetcher] = makeCache(
+		(set: Settings) => artists(set.username, undefined, set.range),
+		{
+			storage: localStorage,
+			sourceHash(source) {
+				return `artists-${JSON.stringify(source)}`;
+			},
+		},
 	);
-	const [groupsRes] = createResource<ReleaseGroupsStats, Settings>(
-		settings,
-		(set) => releaseGroups(set.username, undefined, set.range),
+	const [artistRes] = createResource(settings, artistFetcher);
+	const [groupsFetcher] = makeCache(
+		(set: Settings) => releaseGroups(set.username, undefined, set.range),
+		{
+			storage: localStorage,
+			sourceHash(source) {
+				return `groups-${JSON.stringify(source)}`;
+			},
+		},
 	);
+	const [groupsRes] = createResource(settings, groupsFetcher);
 
 	return (
 		<div class="bg-black min-h-screen text-white p-8">
@@ -79,15 +93,21 @@ const Artists: Component<{ artists: ArtistStatsArtist[] }> = (props) => {
 };
 
 const ArtistsItem: Component<{ artist: ArtistStatsArtist }> = (props) => {
-	const [image] = createResource(async () => {
-		if (!props.artist.artist_mbid) {
-			return null;
-		}
-
-		return await getWikidataURL(props.artist.artist_mbid).then((s) =>
-			s ? getWikidataThumbnail(s) : null,
-		);
-	});
+	const [imageFetcher] = makeCache(
+		async (artist: ArtistStatsArtist) => {
+			if (!artist.artist_mbid) {
+				return null;
+			}
+
+			return await getWikidataURL(artist.artist_mbid).then((s) =>
+				s ? getWikidataThumbnail(s) : null,
+			);
+		},
+		{
+			storage: localStorage,
+		},
+	);
+	const [image] = createResource(props.artist, imageFetcher);
 
 	return (
 		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">
@@ -127,16 +147,22 @@ const ReleaseGroups: Component<{ groups: ReleaseGroupsGroup[] }> = (props) => {
 };
 
 const ReleaseGroupItem: Component<{ group: ReleaseGroupsGroup }> = (props) => {
-	const [image] = createResource(async () => {
-		if (!props.group.caa_release_mbid) {
-			return null;
-		}
-		const result = await getReleaseImageURL(
-			"release",
-			props.group.caa_release_mbid,
-		);
-		return result[0]?.image.replace("http://", "https://");
-	});
+	const [imageFetcher] = makeCache(
+		async (group: ReleaseGroupsGroup) => {
+			if (!group.caa_release_mbid) {
+				return null;
+			}
+			const result = await getReleaseImageURL(
+				"release",
+				group.caa_release_mbid,
+			);
+			return result[0]?.image.replace("http://", "https://");
+		},
+		{
+			storage: localStorage,
+		},
+	);
+	const [image] = createResource(props.group, imageFetcher);
 
 	return (
 		<div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer">