diff --git a/src/app/demand/error.tsx b/src/app/demand/error.tsx
new file mode 100644
index 0000000..6163727
--- /dev/null
+++ b/src/app/demand/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function DemandError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Demand data failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading demand analysis.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..6eb1a90
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function DashboardError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Something went wrong
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading the dashboard.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/generation/error.tsx b/src/app/generation/error.tsx
new file mode 100644
index 0000000..b197b0b
--- /dev/null
+++ b/src/app/generation/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function GenerationError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Generation data failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading generation mix data.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/map/error.tsx b/src/app/map/error.tsx
new file mode 100644
index 0000000..c008a2c
--- /dev/null
+++ b/src/app/map/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function MapError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Map failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading the map.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/trends/error.tsx b/src/app/trends/error.tsx
new file mode 100644
index 0000000..ca3b4f2
--- /dev/null
+++ b/src/app/trends/error.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function TrendsError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Trends failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading price trends.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}