1 files changed, 20 insertions, 1 deletions
diff --git a/apps/web/components/dashboard/preview/ReaderView.tsx b/apps/web/components/dashboard/preview/ReaderView.tsx
index d096c6a3..76070534 100644
--- a/apps/web/components/dashboard/preview/ReaderView.tsx
+++ b/apps/web/components/dashboard/preview/ReaderView.tsx
@@ -1,6 +1,8 @@
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { toast } from "@/components/ui/sonner";
+import { useTranslation } from "@/lib/i18n/client";
 import { useQuery } from "@tanstack/react-query";
+import { FileX } from "lucide-react";
 
 import {
   useCreateHighlight,
@@ -23,6 +25,7 @@ export default function ReaderView({
   style?: React.CSSProperties;
   readOnly: boolean;
 }) {
+  const { t } = useTranslation();
   const api = useTRPC();
   const { data: highlights } = useQuery(
     api.highlights.getForBookmark.queryOptions({
@@ -91,7 +94,23 @@ export default function ReaderView({
     content = <FullPageSpinner />;
   } else if (!cachedContent) {
     content = (
-      <div className="text-destructive">Failed to fetch link content ...</div>
+      <div className="flex h-full w-full items-center justify-center p-4">
+        <div className="max-w-sm space-y-4 text-center">
+          <div className="flex justify-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+              <FileX className="h-8 w-8 text-muted-foreground" />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium text-foreground">
+              {t("preview.fetch_error_title")}
+            </h3>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              {t("preview.fetch_error_description")}
+            </p>
+          </div>
+        </div>
+      </div>
     );
   } else {
     content = (