bug fixes and improvements

backend/internal/api/og.go

···
 	height := 630
 	padding := 100
 
-	bgPrimary := color.RGBA{10, 10, 13, 255}
-	accent := color.RGBA{149, 122, 134, 255}
-	textPrimary := color.RGBA{234, 234, 238, 255}
-	textSecondary := color.RGBA{168, 164, 171, 255}
-	border := color.RGBA{42, 40, 46, 255}
+	bgColor := color.RGBA{9, 9, 11, 255}
+	primaryColor := color.RGBA{59, 130, 246, 255}
+	primaryLight := color.RGBA{96, 165, 250, 255}
+	textPrimary := color.RGBA{250, 250, 250, 255}
+	textSecondary := color.RGBA{161, 161, 170, 255}
+	borderColor := color.RGBA{63, 63, 70, 255}
+	cardBg := color.RGBA{24, 24, 27, 255}
 
 	img := image.NewRGBA(image.Rect(0, 0, width, height))
 
-	draw.Draw(img, img.Bounds(), &image.Uniform{bgPrimary}, image.Point{}, draw.Src)
-	draw.Draw(img, image.Rect(0, 0, width, 12), &image.Uniform{accent}, image.Point{}, draw.Src)
+	draw.Draw(img, img.Bounds(), &image.Uniform{bgColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(0, 0, width, 6), &image.Uniform{primaryColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, width-60, height-50), &image.Uniform{cardBg}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, width-60, 51), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, height-51, width-60, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, 61, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(width-61, 50, width-60, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
 
 	avatarSize := 64
 	avatarX := padding
···
 	if avatarImg != nil {
 		drawCircularAvatar(img, avatarImg, avatarX, avatarY, avatarSize)
 	} else {
-		drawDefaultAvatar(img, author, avatarX, avatarY, avatarSize, accent)
+		drawDefaultAvatar(img, author, avatarX, avatarY, avatarSize, primaryColor)
 	}
 	drawText(img, author, avatarX+avatarSize+24, avatarY+42, textSecondary, 28, false)
 
···
 		numLines := min(len(lines), maxQuoteLines)
 		barHeight := numLines * quoteLineHeight
 
-		draw.Draw(img, image.Rect(padding, yPos, padding+6, yPos+barHeight), &image.Uniform{accent}, image.Point{}, draw.Src)
+		draw.Draw(img, image.Rect(padding, yPos, padding+6, yPos+barHeight), &image.Uniform{primaryLight}, image.Point{}, draw.Src)
 
 		for i := 0; i < numLines; i++ {
 			line := lines[i]
···
 		yPos += barHeight + 40
 	}
 
-	draw.Draw(img, image.Rect(padding, yPos, width-padding, yPos+1), &image.Uniform{border}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(padding, yPos, width-padding, yPos+1), &image.Uniform{borderColor}, image.Point{}, draw.Src)
 	yPos += 40
 	drawText(img, source, padding, yPos+32, textSecondary, 24, false)
+
+	if logoImage != nil {
+		logoSize := 36
+		drawScaledImage(img, logoImage, width-padding-logoSize, height-80, logoSize, logoSize)
+		drawText(img, "margin.at", width-padding-logoSize-120, height-52, textSecondary, 22, true)
+	}
 
 	return img
 }
···
 	height := 630
 	padding := 120
 
-	bgPrimary := color.RGBA{10, 10, 13, 255}
-	accent := color.RGBA{149, 122, 134, 255}
-	textPrimary := color.RGBA{234, 234, 238, 255}
-	textSecondary := color.RGBA{168, 164, 171, 255}
-	textTertiary := color.RGBA{107, 103, 112, 255}
-	border := color.RGBA{42, 40, 46, 255}
+	bgColor := color.RGBA{9, 9, 11, 255}
+	primaryColor := color.RGBA{59, 130, 246, 255}
+	textPrimary := color.RGBA{250, 250, 250, 255}
+	textSecondary := color.RGBA{161, 161, 170, 255}
+	textTertiary := color.RGBA{113, 113, 122, 255}
+	borderColor := color.RGBA{63, 63, 70, 255}
+	cardBg := color.RGBA{24, 24, 27, 255}
 
 	img := image.NewRGBA(image.Rect(0, 0, width, height))
-
-	draw.Draw(img, img.Bounds(), &image.Uniform{bgPrimary}, image.Point{}, draw.Src)
-	draw.Draw(img, image.Rect(0, 0, width, 12), &image.Uniform{accent}, image.Point{}, draw.Src)
+	draw.Draw(img, img.Bounds(), &image.Uniform{bgColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(0, 0, width, 6), &image.Uniform{primaryColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, width-60, height-50), &image.Uniform{cardBg}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, width-60, 51), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, height-51, width-60, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, 61, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(width-61, 50, width-60, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
 
 	iconY := 120
 	var iconWidth int
···
 	}
 
 	yPos = 480
-	draw.Draw(img, image.Rect(padding, yPos, width-padding, yPos+1), &image.Uniform{border}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(padding, yPos, width-padding, yPos+1), &image.Uniform{borderColor}, image.Point{}, draw.Src)
 
 	avatarSize := 64
 	avatarX := padding
···
 	if avatarImg != nil {
 		drawCircularAvatar(img, avatarImg, avatarX, avatarY, avatarSize)
 	} else {
-		drawDefaultAvatar(img, author, avatarX, avatarY, avatarSize, accent)
+		drawDefaultAvatar(img, author, avatarX, avatarY, avatarSize, primaryColor)
 	}
 
 	handleX := avatarX + avatarSize + 24
 	drawText(img, author, handleX, avatarY+42, textTertiary, 28, false)
 
+	if logoImage != nil {
+		logoSize := 36
+		drawScaledImage(img, logoImage, width-padding-logoSize, height-80, logoSize, logoSize)
+		drawText(img, "margin.at", width-padding-logoSize-120, height-52, textSecondary, 22, true)
+	}
+
 	return img
 }
 
···
 	height := 630
 	padding := 100
 
-	bgPrimary := color.RGBA{10, 10, 13, 255}
-	accent := color.RGBA{149, 122, 134, 255}
-	textPrimary := color.RGBA{234, 234, 238, 255}
-	textSecondary := color.RGBA{168, 164, 171, 255}
-	border := color.RGBA{42, 40, 46, 255}
+	bgColor := color.RGBA{9, 9, 11, 255}
+	primaryColor := color.RGBA{59, 130, 246, 255}
+	primaryLight := color.RGBA{96, 165, 250, 255}
+	textPrimary := color.RGBA{250, 250, 250, 255}
+	textSecondary := color.RGBA{161, 161, 170, 255}
+	borderColor := color.RGBA{63, 63, 70, 255}
+	cardBg := color.RGBA{24, 24, 27, 255}
 
 	img := image.NewRGBA(image.Rect(0, 0, width, height))
 
-	draw.Draw(img, img.Bounds(), &image.Uniform{bgPrimary}, image.Point{}, draw.Src)
-	draw.Draw(img, image.Rect(0, 0, width, 12), &image.Uniform{accent}, image.Point{}, draw.Src)
+	draw.Draw(img, img.Bounds(), &image.Uniform{bgColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(0, 0, width, 6), &image.Uniform{primaryColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, width-60, height-50), &image.Uniform{cardBg}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, width-60, 51), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, height-51, width-60, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(60, 50, 61, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(width-61, 50, width-60, height-50), &image.Uniform{borderColor}, image.Point{}, draw.Src)
 
 	avatarSize := 64
 	avatarX := padding
···
 	if avatarImg != nil {
 		drawCircularAvatar(img, avatarImg, avatarX, avatarY, avatarSize)
 	} else {
-		drawDefaultAvatar(img, author, avatarX, avatarY, avatarSize, accent)
+		drawDefaultAvatar(img, author, avatarX, avatarY, avatarSize, primaryColor)
 	}
 	drawText(img, author, avatarX+avatarSize+24, avatarY+42, textSecondary, 28, false)
 
···
 		numLines := min(len(lines), maxLines)
 		barHeight := numLines * lineHeight
 
-		draw.Draw(img, image.Rect(padding, yPos, padding+8, yPos+barHeight), &image.Uniform{accent}, image.Point{}, draw.Src)
+		draw.Draw(img, image.Rect(padding, yPos, padding+8, yPos+barHeight), &image.Uniform{primaryLight}, image.Point{}, draw.Src)
 
 		for i := 0; i < numLines; i++ {
 			line := lines[i]
···
 		yPos += barHeight + 40
 	}
 
-	draw.Draw(img, image.Rect(padding, yPos, width-padding, yPos+1), &image.Uniform{border}, image.Point{}, draw.Src)
+	draw.Draw(img, image.Rect(padding, yPos, width-padding, yPos+1), &image.Uniform{borderColor}, image.Point{}, draw.Src)
 	yPos += 40
 
 	if pageTitle != "" {
···
 
 	if source != "" {
 		drawText(img, source, padding, yPos+80, textSecondary, 24, false)
+	}
+
+	if logoImage != nil {
+		logoSize := 36
+		drawScaledImage(img, logoImage, width-padding-logoSize, height-80, logoSize, logoSize)
+		drawText(img, "margin.at", width-padding-logoSize-120, height-52, textSecondary, 22, true)
 	}
 
 	return img

web/src/App.tsx

···
 } from "./routes/wrappers";
 import About from "./views/About";
 import AdminModeration from "./views/core/AdminModeration";
-import NotFound from "./views/NotFound";
 
 export default function App() {
   React.useEffect(() => {
···
           }
         />
 
-        <Route path="*" element={<NotFound />} />
+        <Route path="*" element={<Navigate to="/home" replace />} />
       </Routes>
     </BrowserRouter>
   );

web/src/components/navigation/RightSidebar.tsx

···
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Search } from "lucide-react";
-import { getTrendingTags, type Tag } from "../../api/client";
+import {
+  getTrendingTags,
+  searchActors,
+  type ActorSearchItem,
+  type Tag,
+} from "../../api/client";
+import { Avatar } from "../ui";
+
+function looksLikeUrl(query: string): boolean {
+  const q = query.trim().toLowerCase();
+  return (
+    q.startsWith("http://") ||
+    q.startsWith("https://") ||
+    /\.(com|org|net|io|dev|me|co|app|xyz|edu|gov)\b/.test(q)
+  );
+}
 
 export default function RightSidebar() {
   const navigate = useNavigate();
···
     return "other";
   });
   const [searchQuery, setSearchQuery] = useState("");
+  const [suggestions, setSuggestions] = useState<ActorSearchItem[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
 
-  const handleSearch = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && searchQuery.trim()) {
-      navigate(`/url/${encodeURIComponent(searchQuery.trim())}`);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+  const isSelectionRef = useRef(false);
+  const latestQueryRef = useRef(searchQuery);
+
+  useEffect(() => {
+    latestQueryRef.current = searchQuery;
+
+    if (searchQuery.length < 3 || looksLikeUrl(searchQuery)) {
+      return;
+    }
+
+    if (isSelectionRef.current) {
+      isSelectionRef.current = false;
+      return;
     }
-  };
+
+    const capturedQuery = searchQuery;
+    const timer = setTimeout(async () => {
+      try {
+        const data = await searchActors(capturedQuery);
+        if (capturedQuery !== latestQueryRef.current) return;
+        setSuggestions(data.actors || []);
+        setShowSuggestions((data.actors || []).length > 0);
+        setSelectedIndex(-1);
+      } catch (e) {
+        console.error("Search failed:", e);
+      }
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        suggestionsRef.current &&
+        !suggestionsRef.current.contains(e.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(e.target as Node)
+      ) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectSuggestion = useCallback(
+    (actor: ActorSearchItem) => {
+      isSelectionRef.current = true;
+      setSearchQuery("");
+      setSuggestions([]);
+      setShowSuggestions(false);
+      navigate(`/profile/${encodeURIComponent(actor.handle)}`);
+    },
+    [navigate],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (showSuggestions && suggestions.length > 0) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            Math.min(prev + 1, suggestions.length - 1),
+          );
+          return;
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, -1));
+          return;
+        } else if (e.key === "Enter" && selectedIndex >= 0) {
+          e.preventDefault();
+          selectSuggestion(suggestions[selectedIndex]);
+          return;
+        } else if (e.key === "Escape") {
+          setShowSuggestions(false);
+          return;
+        }
+      }
+
+      if (e.key === "Enter" && searchQuery.trim()) {
+        const q = searchQuery.trim();
+        if (looksLikeUrl(q)) {
+          navigate(`/url/${encodeURIComponent(q)}`);
+        } else {
+          navigate(`/profile/${encodeURIComponent(q)}`);
+        }
+        setSearchQuery("");
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    },
+    [
+      showSuggestions,
+      suggestions,
+      selectedIndex,
+      searchQuery,
+      navigate,
+      selectSuggestion,
+    ],
+  );
 
   useEffect(() => {
     getTrendingTags(10).then(setTags);
···
             />
           </div>
           <input
+            ref={inputRef}
             type="text"
             value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onKeyDown={handleSearch}
-            placeholder="Search..."
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              if (e.target.value.length < 3) {
+                setSuggestions([]);
+                setShowSuggestions(false);
+              }
+            }}
+            onKeyDown={handleKeyDown}
+            onFocus={() =>
+              searchQuery.length >= 3 &&
+              suggestions.length > 0 &&
+              setShowSuggestions(true)
+            }
+            placeholder="Search users or URLs..."
             className="w-full bg-surface-100 dark:bg-surface-800/80 rounded-lg pl-9 pr-4 py-2 text-sm text-surface-900 dark:text-white placeholder:text-surface-400 dark:placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:bg-white dark:focus:bg-surface-800 transition-all border border-surface-200/60 dark:border-surface-700/60"
           />
+
+          {showSuggestions && suggestions.length > 0 && (
+            <div
+              ref={suggestionsRef}
+              className="absolute top-[calc(100%+6px)] left-0 right-0 bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-700 rounded-xl shadow-xl overflow-hidden z-50 animate-fade-in max-h-[280px] overflow-y-auto"
+            >
+              {suggestions.map((actor, index) => (
+                <button
+                  key={actor.did}
+                  type="button"
+                  className={`w-full flex items-center gap-3 px-3.5 py-2.5 border-b border-surface-100 dark:border-surface-800 last:border-0 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors text-left ${index === selectedIndex ? "bg-surface-50 dark:bg-surface-800" : ""}`}
+                  onClick={() => selectSuggestion(actor)}
+                >
+                  <Avatar src={actor.avatar} size="sm" />
+                  <div className="min-w-0 flex-1">
+                    <div className="font-semibold text-surface-900 dark:text-white truncate text-sm leading-tight">
+                      {actor.displayName || actor.handle}
+                    </div>
+                    <div className="text-surface-500 dark:text-surface-400 text-xs truncate">
+                      @{actor.handle}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
         </div>
 
         <div className="rounded-xl p-4 bg-gradient-to-br from-primary-50 to-primary-100/50 dark:from-primary-950/30 dark:to-primary-900/10 border border-primary-200/40 dark:border-primary-800/30">

web/src/layouts/BaseLayout.astro

···
 interface Props {
 	title?: string;
 	description?: string;
+	image?: string;
 }
 
-const { title = 'Margin', description = 'Annotate the web' } = Astro.props;
+const { title = 'Margin', description = 'Annotate the web', image = 'https://margin.at/og.png' } = Astro.props;
 ---
 
 <!DOCTYPE html>
···
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
 		<meta name="generator" content={Astro.generator} />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content={Astro.url} />
+		<meta property="og:title" content={title} />
+		<meta property="og:description" content={description} />
+		<meta property="og:image" content={image} />
+		<meta property="og:site_name" content="Margin" />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:title" content={title} />
+		<meta name="twitter:description" content={description} />
+		<meta name="twitter:image" content={image} />
+
 		<title>{title}</title>
 	</head>
 	<body class="bg-surface-50 dark:bg-surface-950 min-h-screen text-surface-900 dark:text-white">

web/src/views/NotFound.tsx

···
-import React from "react";
-import { Link } from "react-router-dom";
-import { Home, AlertCircle } from "lucide-react";
-import { useStore } from "@nanostores/react";
-import { $theme } from "../store/theme";
-
-export default function NotFound() {
-  useStore($theme);
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-surface-100 dark:bg-surface-800 p-4">
-      <div className="w-full max-w-md bg-white dark:bg-surface-900 rounded-2xl border border-surface-200/60 dark:border-surface-800 p-8 shadow-sm dark:shadow-none text-center">
-        <div className="w-16 h-16 bg-surface-50 dark:bg-surface-800 rounded-2xl flex items-center justify-center mx-auto mb-6 text-surface-400 dark:text-surface-500">
-          <AlertCircle size={32} />
-        </div>
-
-        <h1 className="text-3xl font-bold font-display text-surface-900 dark:text-white mb-3 tracking-tight">
-          Page not found
-        </h1>
-
-        <p className="text-surface-500 dark:text-surface-400 text-base mb-8 leading-relaxed max-w-xs mx-auto">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-
-        <Link
-          to="/home"
-          className="inline-flex items-center justify-center gap-2 px-6 py-3.5 w-full bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-xl font-bold text-sm transition-transform active:scale-[0.98] hover:bg-surface-800 dark:hover:bg-surface-50 shadow-lg shadow-surface-900/10 dark:shadow-none"
-        >
-          <Home size={18} />
-          Back to Home
-        </Link>
-      </div>
-    </div>
-  );
-}

web/src/views/collections/CollectionDetail.tsx

···
               <span>
                 by{" "}
                 <Link
-                  to={`/profile/${collection.creator.did}`}
+                  to={`/profile/${collection.creator?.did}`}
                   className="hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors"
                 >
-                  {collection.creator.displayName || collection.creator.handle}
+                  {collection.creator?.displayName ||
+                    collection.creator?.handle}
                 </Link>
               </span>
             </div>
···
           <div className="flex items-center gap-1">
             <ShareMenu
               uri={collection.uri}
-              handle={collection.creator.handle}
+              handle={collection.creator?.handle}
               type="Collection"
               text={collection.name}
             />
···
         isOpen={isEditModalOpen}
         onClose={() => setIsEditModalOpen(false)}
         collection={collection}
-        onUpdate={(updated) => setCollection(updated)}
+        onUpdate={(updated) =>
+          setCollection({
+            ...updated,
+            creator: updated.creator || collection.creator,
+          })
+        }
       />
 
       <div className="space-y-2">

web/src/views/content/UrlPage.tsx

···
   User,
   Users,
 } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { getByTarget } from "../../api/client";
 import Card from "../../components/common/Card";
···
   const [annotations, setAnnotations] = useState<AnnotationItem[]>([]);
   const [highlights, setHighlights] = useState<AnnotationItem[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [offset, setOffset] = useState(0);
   const [error, setError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<
     "all" | "annotations" | "highlights"
···
   const [copied, setCopied] = useState(false);
   const user = useStore($user);
 
+  const LIMIT = 50;
+  const loadMoreTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (loadMoreTimerRef.current) clearTimeout(loadMoreTimerRef.current);
+    };
+  }, []);
+
   useEffect(() => {
     async function fetchData() {
       if (!targetUrl) {
···
         setLoading(true);
         setError(null);
 
-        const data = await getByTarget(targetUrl);
-        setAnnotations(data.annotations || []);
-        setHighlights(data.highlights || []);
+        const data = await getByTarget(targetUrl, LIMIT, 0);
+        const fetchedAnnotations = data.annotations || [];
+        const fetchedHighlights = data.highlights || [];
+        setAnnotations(fetchedAnnotations);
+        setHighlights(fetchedHighlights);
+        const totalFetched =
+          fetchedAnnotations.length + fetchedHighlights.length;
+        setHasMore(totalFetched >= LIMIT);
+        setOffset(totalFetched);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to load data");
       } finally {
···
     fetchData();
   }, [targetUrl]);
 
+  const loadMore = useCallback(async () => {
+    setLoadingMore(true);
+    setLoadMoreError(null);
+    try {
+      const data = await getByTarget(targetUrl, LIMIT, offset);
+      const fetchedAnnotations = data.annotations || [];
+      const fetchedHighlights = data.highlights || [];
+      setAnnotations((prev) => [...prev, ...fetchedAnnotations]);
+      setHighlights((prev) => [...prev, ...fetchedHighlights]);
+      const totalFetched = fetchedAnnotations.length + fetchedHighlights.length;
+      setHasMore(totalFetched >= LIMIT);
+      setOffset((prev) => prev + totalFetched);
+    } catch (err) {
+      console.error("Failed to load more:", err);
+      const msg = err instanceof Error ? err.message : "Something went wrong";
+      setLoadMoreError(msg);
+      if (loadMoreTimerRef.current) clearTimeout(loadMoreTimerRef.current);
+      loadMoreTimerRef.current = setTimeout(() => setLoadMoreError(null), 5000);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [targetUrl, offset]);
+
   const handleCopyLink = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(window.location.href);
···
         {!loading && totalItems > 0 && (
           <div className="mt-4 pt-4 border-t border-surface-100 dark:border-surface-700 flex items-center gap-4 text-sm text-surface-500 dark:text-surface-400">
             <span className="flex items-center gap-1.5">
-              <PenTool size={14} />
-              {annotations.length} annotation
-              {annotations.length !== 1 ? "s" : ""}
-            </span>
-            <span className="flex items-center gap-1.5">
-              <Highlighter size={14} />
-              {highlights.length} highlight
-              {highlights.length !== 1 ? "s" : ""}
-            </span>
-            <span className="flex items-center gap-1.5">
               <Users size={14} />
               {authorCount} contributor{authorCount !== 1 ? "s" : ""}
             </span>
···
           <div className="mb-6">
             <Tabs
               tabs={[
-                { id: "all", label: `All (${totalItems})` },
-                {
-                  id: "annotations",
-                  label: `Annotations (${annotations.length})`,
-                },
-                {
-                  id: "highlights",
-                  label: `Highlights (${highlights.length})`,
-                },
+                { id: "all", label: "All" },
+                { id: "annotations", label: "Annotations" },
+                { id: "highlights", label: "Highlights" },
               ]}
               activeTab={activeTab}
               onChange={(id: string) =>
···
               <Card key={item.uri} item={item} />
             ))}
           </div>
+
+          {hasMore && (
+            <div className="flex flex-col items-center gap-2 py-6">
+              {loadMoreError && (
+                <p className="text-sm text-red-500 dark:text-red-400">
+                  Failed to load more: {loadMoreError}
+                </p>
+              )}
+              <button
+                onClick={loadMore}
+                disabled={loadingMore}
+                className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-xl bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors disabled:opacity-50"
+              >
+                {loadingMore ? (
+                  <>
+                    <Loader2 size={16} className="animate-spin" />
+                    Loading...
+                  </>
+                ) : (
+                  "Load more"
+                )}
+              </button>
+            </div>
+          )}
         </div>
       )}
     </div>

web/src/views/content/UserUrlPage.tsx

···
-import { clsx } from "clsx";
 import {
   AlertTriangle,
   ExternalLink,
   Highlighter,
+  Loader2,
   PenTool,
   Search,
 } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { getAvatarUrl, getUserTargetItems } from "../../api/client";
+import { getUserTargetItems } from "../../api/client";
 import Card from "../../components/common/Card";
+import Avatar from "../../components/ui/Avatar";
+import { EmptyState, Tabs } from "../../components/ui";
 import type { AnnotationItem, UserProfile } from "../../types";
 
 export default function UserUrlPage() {
···
   const [annotations, setAnnotations] = useState<AnnotationItem[]>([]);
   const [highlights, setHighlights] = useState<AnnotationItem[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [offset, setOffset] = useState(0);
   const [error, setError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<
     "all" | "annotations" | "highlights"
   >("all");
+
+  const LIMIT = 50;
+  const [resolvedDid, setResolvedDid] = useState<string | null>(null);
 
   useEffect(() => {
     async function fetchData() {
···
         }
 
         const decodedUrl = decodeURIComponent(targetUrl);
+        setResolvedDid(did);
 
-        const data = await getUserTargetItems(did, decodedUrl);
-        setAnnotations(data.annotations || []);
-        setHighlights(data.highlights || []);
+        const data = await getUserTargetItems(did, decodedUrl, LIMIT, 0);
+        const fetchedAnnotations = data.annotations || [];
+        const fetchedHighlights = data.highlights || [];
+        setAnnotations(fetchedAnnotations);
+        setHighlights(fetchedHighlights);
+        const totalFetched =
+          fetchedAnnotations.length + fetchedHighlights.length;
+        setHasMore(totalFetched >= LIMIT);
+        setOffset(totalFetched);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Unknown error");
       } finally {
···
     fetchData();
   }, [handle, targetUrl]);
 
+  const loadMore = useCallback(async () => {
+    if (!resolvedDid) return;
+    setLoadingMore(true);
+    setLoadMoreError(null);
+    try {
+      const decodedUrl = decodeURIComponent(targetUrl);
+      const data = await getUserTargetItems(
+        resolvedDid,
+        decodedUrl,
+        LIMIT,
+        offset,
+      );
+      const fetchedAnnotations = data.annotations || [];
+      const fetchedHighlights = data.highlights || [];
+      setAnnotations((prev) => [...prev, ...fetchedAnnotations]);
+      setHighlights((prev) => [...prev, ...fetchedHighlights]);
+      const totalFetched = fetchedAnnotations.length + fetchedHighlights.length;
+      setHasMore(totalFetched >= LIMIT);
+      setOffset((prev) => prev + totalFetched);
+    } catch (err) {
+      console.error("Failed to load more:", err);
+      const msg = err instanceof Error ? err.message : "Something went wrong";
+      setLoadMoreError(msg);
+      setTimeout(() => setLoadMoreError(null), 5000);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [resolvedDid, targetUrl, offset]);
+
   const displayName = profile?.displayName || profile?.handle || handle;
   const displayHandle =
     profile?.handle || (handle?.startsWith("did:") ? null : handle);
-  const avatarUrl = getAvatarUrl(profile?.did, profile?.avatar);
-
-  const getInitial = () => {
-    return (displayName || displayHandle || "??")
-      ?.substring(0, 2)
-      .toUpperCase();
-  };
 
   const totalItems = annotations.length + highlights.length;
-  const bskyProfileUrl = displayHandle
-    ? `https://bsky.app/profile/${displayHandle}`
-    : `https://bsky.app/profile/${handle}`;
+  const decodedTargetUrl = decodeURIComponent(targetUrl);
 
-  const renderResults = () => {
-    if (activeTab === "annotations" && annotations.length === 0) {
-      return (
-        <div className="flex flex-col items-center justify-center p-12 text-center bg-surface-50 border border-dashed border-surface-200 rounded-2xl">
-          <div className="w-12 h-12 bg-surface-100 rounded-full flex items-center justify-center text-surface-400 mb-4">
-            <PenTool size={24} />
-          </div>
-          <h3 className="text-lg font-medium text-surface-600">
-            No annotations
-          </h3>
-        </div>
-      );
-    }
+  const items = [
+    ...(activeTab === "all" || activeTab === "annotations" ? annotations : []),
+    ...(activeTab === "all" || activeTab === "highlights" ? highlights : []),
+  ];
 
-    if (activeTab === "highlights" && highlights.length === 0) {
-      return (
-        <div className="flex flex-col items-center justify-center p-12 text-center bg-surface-50 border border-dashed border-surface-200 rounded-2xl">
-          <div className="w-12 h-12 bg-surface-100 rounded-full flex items-center justify-center text-surface-400 mb-4">
-            <Highlighter size={24} />
-          </div>
-          <h3 className="text-lg font-medium text-surface-600">
-            No highlights
-          </h3>
-        </div>
-      );
-    }
-
-    const items = [
-      ...(activeTab === "all" || activeTab === "annotations"
-        ? annotations
-        : []),
-      ...(activeTab === "all" || activeTab === "highlights" ? highlights : []),
-    ];
-
-    if (activeTab === "all") {
-      items.sort((a, b) => {
-        const dateA = new Date(a.createdAt).getTime();
-        const dateB = new Date(b.createdAt).getTime();
-        return dateB - dateA;
-      });
-    }
-
-    return (
-      <div className="space-y-6">
-        {items.map((item) => (
-          <Card key={item.uri} item={item} />
-        ))}
-      </div>
-    );
-  };
+  if (activeTab === "all") {
+    items.sort((a, b) => {
+      const dateA = new Date(a.createdAt).getTime();
+      const dateB = new Date(b.createdAt).getTime();
+      return dateB - dateA;
+    });
+  }
 
   if (!targetUrl) {
     return (
-      <div className="max-w-2xl mx-auto py-20 text-center">
-        <div className="w-16 h-16 bg-surface-100 rounded-full flex items-center justify-center mx-auto mb-4 text-surface-400">
-          <Search size={32} />
-        </div>
-        <h3 className="text-xl font-bold text-surface-900 mb-2">
-          No URL specified
-        </h3>
-        <p className="text-surface-500">
-          Please provide a URL to view annotations.
-        </p>
-      </div>
+      <EmptyState
+        icon={<Search size={48} />}
+        title="No URL specified"
+        message="Please provide a URL to view annotations."
+      />
     );
   }
 
   return (
-    <div className="max-w-3xl mx-auto pb-20">
-      <header className="flex items-center gap-6 mb-8 p-6 bg-white dark:bg-surface-800 rounded-2xl border border-surface-200 dark:border-surface-700 shadow-sm">
-        <a
-          href={bskyProfileUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="shrink-0 hover:opacity-80 transition-opacity"
-        >
-          {avatarUrl ? (
-            <img
-              src={avatarUrl}
-              alt={displayName}
-              className="w-20 h-20 rounded-full object-cover border-4 border-surface-50 dark:border-surface-700"
+    <div className="max-w-2xl mx-auto pb-20 animate-fade-in">
+      <div className="card p-5 mb-4">
+        <div className="flex items-start gap-4">
+          <a
+            href={`/profile/${displayHandle || handle}`}
+            className="shrink-0 hover:opacity-80 transition-opacity"
+          >
+            <Avatar
+              did={profile?.did}
+              avatar={profile?.avatar}
+              size="lg"
+              className="ring-4 ring-surface-100 dark:ring-surface-800"
             />
-          ) : (
-            <div className="w-20 h-20 rounded-full bg-surface-100 dark:bg-surface-700 flex items-center justify-center text-2xl font-bold text-surface-500 dark:text-surface-400 border-4 border-surface-50 dark:border-surface-700">
-              {getInitial()}
-            </div>
-          )}
-        </a>
-        <div className="flex-1">
-          <h1 className="text-2xl font-bold text-surface-900 dark:text-white mb-1">
-            {displayName}
-          </h1>
-          {displayHandle && (
+          </a>
+          <div className="flex-1 min-w-0">
+            <a
+              href={`/profile/${displayHandle || handle}`}
+              className="hover:underline"
+            >
+              <h1 className="text-xl font-bold text-surface-900 dark:text-white truncate">
+                {displayName}
+              </h1>
+            </a>
+            {displayHandle && (
+              <p className="text-surface-500 dark:text-surface-400">
+                @{displayHandle}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="mt-4 pt-4 border-t border-surface-100 dark:border-surface-700">
+          <div className="flex items-center gap-2 text-sm">
+            <span className="text-surface-400 dark:text-surface-500 font-medium shrink-0">
+              on
+            </span>
             <a
-              href={bskyProfileUrl}
+              href={decodedTargetUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-surface-500 dark:text-surface-400 hover:text-primary-600 transition-colors bg-surface-50 dark:bg-surface-700 hover:bg-primary-50 dark:hover:bg-primary-900/30 px-2 py-1 rounded-md text-sm inline-flex items-center gap-1"
+              className="text-primary-600 dark:text-primary-400 hover:underline truncate flex items-center gap-1"
             >
-              @{displayHandle} <ExternalLink size={12} />
+              <span className="truncate">{decodedTargetUrl}</span>
+              <ExternalLink size={12} className="shrink-0" />
             </a>
-          )}
+          </div>
         </div>
-      </header>
-
-      <div className="mb-8 p-4 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-xl flex flex-col sm:flex-row sm:items-center gap-4">
-        <span className="text-sm font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide">
-          Annotations on:
-        </span>
-        <a
-          href={decodeURIComponent(targetUrl)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-primary-600 hover:text-primary-700 hover:underline font-medium truncate flex-1 block"
-        >
-          {decodeURIComponent(targetUrl)}
-        </a>
       </div>
 
       {loading && (
-        <div className="flex justify-center py-12">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+        <div className="flex flex-col items-center justify-center py-20">
+          <Loader2
+            className="animate-spin text-primary-600 dark:text-primary-400 mb-4"
+            size={32}
+          />
+          <p className="text-surface-500 dark:text-surface-400">
+            Loading annotations...
+          </p>
         </div>
       )}
 
       {error && (
-        <div className="mb-8 bg-red-50 text-red-600 p-4 rounded-xl flex items-start gap-3 border border-red-100">
+        <div className="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-4 rounded-xl flex items-start gap-3 border border-red-100 dark:border-red-900/30 mb-6">
           <AlertTriangle className="shrink-0 mt-0.5" size={18} />
           <p>{error}</p>
         </div>
       )}
 
       {!loading && !error && totalItems === 0 && (
-        <div className="text-center py-16 bg-surface-50 dark:bg-surface-800 rounded-2xl border border-dashed border-surface-200 dark:border-surface-700">
-          <div className="w-12 h-12 bg-surface-100 dark:bg-surface-700 rounded-full flex items-center justify-center mx-auto mb-4 text-surface-400">
-            <PenTool size={24} />
-          </div>
-          <h3 className="text-lg font-bold text-surface-900 dark:text-white mb-1">
-            No items found
-          </h3>
-          <p className="text-surface-500 dark:text-surface-400">
-            {displayName} hasn&apos;t annotated this page yet.
-          </p>
-        </div>
+        <EmptyState
+          icon={<PenTool size={32} />}
+          title="No items found"
+          message={`${displayName} hasn't annotated this page yet.`}
+        />
       )}
 
       {!loading && !error && totalItems > 0 && (
-        <div className="animate-fade-in">
-          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
-            <h2 className="text-xl font-bold text-surface-900 dark:text-white">
-              {totalItems} item{totalItems !== 1 ? "s" : ""}
-            </h2>
-            <div className="flex bg-surface-100 dark:bg-surface-800 p-1 rounded-xl self-start md:self-auto">
-              <button
-                className={clsx(
-                  "px-4 py-1.5 rounded-lg text-sm font-medium transition-all",
-                  activeTab === "all"
-                    ? "bg-white dark:bg-surface-700 text-surface-900 dark:text-white shadow-sm"
-                    : "text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200",
-                )}
-                onClick={() => setActiveTab("all")}
-              >
-                All ({totalItems})
-              </button>
+        <div>
+          <div className="mb-6">
+            <Tabs
+              tabs={[
+                { id: "all", label: "All" },
+                { id: "annotations", label: "Annotations" },
+                { id: "highlights", label: "Highlights" },
+              ]}
+              activeTab={activeTab}
+              onChange={(id: string) =>
+                setActiveTab(id as "all" | "annotations" | "highlights")
+              }
+            />
+          </div>
+
+          <div className="space-y-4">
+            {activeTab === "annotations" && annotations.length === 0 && (
+              <EmptyState
+                icon={<PenTool size={32} />}
+                title="No annotations"
+                message={`${displayName} hasn't annotated this page yet.`}
+              />
+            )}
+            {activeTab === "highlights" && highlights.length === 0 && (
+              <EmptyState
+                icon={<Highlighter size={32} />}
+                title="No highlights"
+                message={`${displayName} hasn't highlighted this page yet.`}
+              />
+            )}
+
+            {items.map((item) => (
+              <Card key={item.uri} item={item} />
+            ))}
+          </div>
+
+          {hasMore && (
+            <div className="flex flex-col items-center gap-2 py-6">
+              {loadMoreError && (
+                <p className="text-sm text-red-500 dark:text-red-400">
+                  Failed to load more: {loadMoreError}
+                </p>
+              )}
               <button
-                className={clsx(
-                  "px-4 py-1.5 rounded-lg text-sm font-medium transition-all",
-                  activeTab === "annotations"
-                    ? "bg-white dark:bg-surface-700 text-surface-900 dark:text-white shadow-sm"
-                    : "text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200",
-                )}
-                onClick={() => setActiveTab("annotations")}
+                onClick={loadMore}
+                disabled={loadingMore}
+                className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-xl bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors disabled:opacity-50"
               >
-                Annotations ({annotations.length})
-              </button>
-              <button
-                className={clsx(
-                  "px-4 py-1.5 rounded-lg text-sm font-medium transition-all",
-                  activeTab === "highlights"
-                    ? "bg-white dark:bg-surface-700 text-surface-900 dark:text-white shadow-sm"
-                    : "text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200",
+                {loadingMore ? (
+                  <>
+                    <Loader2 size={16} className="animate-spin" />
+                    Loading...
+                  </>
+                ) : (
+                  "Load more"
                 )}
-                onClick={() => setActiveTab("highlights")}
-              >
-                Highlights ({highlights.length})
               </button>
             </div>
-          </div>
-          <div className="space-y-6">{renderResults()}</div>
+          )}
         </div>
       )}
     </div>

web/src/views/core/Settings.tsx

···
               </p>
             </div>
             <Switch
-              checked={$preferences.get().disableExternalLinkWarning}
+              checked={preferences.disableExternalLinkWarning}
               onCheckedChange={setDisableExternalLinkWarning}
             />
           </div>

web/src/views/profile/Profile.tsx

···
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   getProfile,
   getFeed,
···
 
 type Tab = "all" | "annotations" | "highlights" | "bookmarks" | "collections";
 
+const LIMIT = 50;
+
 export default function Profile({ did }: ProfileProps) {
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [loading, setLoading] = useState(true);
···
   const [showEdit, setShowEdit] = useState(false);
   const [externalLink, setExternalLink] = useState<string | null>(null);
   const [showReportModal, setShowReportModal] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState<
+    Record<string, { hasMore: boolean; offset: number }>
+  >({
+    all: { hasMore: false, offset: 0 },
+    annotations: { hasMore: false, offset: 0 },
+    highlights: { hasMore: false, offset: 0 },
+    bookmarks: { hasMore: false, offset: 0 },
+  });
+  const loadMoreTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [modRelation, setModRelation] = useState<ModerationRelationship>({
     blocking: false,
     muting: false,
···
   }, []);
 
   useEffect(() => {
+    return () => {
+      if (loadMoreTimerRef.current) clearTimeout(loadMoreTimerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
     const loadTabContent = async () => {
       const isHandle = !did.startsWith("did:");
       const resolvedDid = isHandle ? profile?.did : did;
···
       if (!resolvedDid) return;
 
       setDataLoading(true);
+      setPagination((prev) => ({
+        ...prev,
+        [activeTab]: { hasMore: false, offset: 0 },
+      }));
       try {
         if (activeTab === "all") {
           const res = await getFeed({
             creator: resolvedDid,
-            limit: 50,
+            limit: LIMIT,
           });
-          setAll(res.items || []);
+          const items = res.items || [];
+          setAll(items);
+          setPagination((prev) => ({
+            ...prev,
+            all: {
+              hasMore: res.hasMore ?? items.length >= LIMIT,
+              offset: res.fetchedCount ?? items.length,
+            },
+          }));
         } else if (activeTab === "annotations") {
           const res = await getFeed({
             creator: resolvedDid,
             motivation: "commenting",
-            limit: 50,
+            limit: LIMIT,
           });
-          setAnnotations(res.items || []);
+          const items = res.items || [];
+          setAnnotations(items);
+          setPagination((prev) => ({
+            ...prev,
+            annotations: {
+              hasMore: res.hasMore ?? items.length >= LIMIT,
+              offset: res.fetchedCount ?? items.length,
+            },
+          }));
         } else if (activeTab === "highlights") {
           const res = await getFeed({
             creator: resolvedDid,
             motivation: "highlighting",
-            limit: 50,
+            limit: LIMIT,
           });
-          setHighlights(res.items || []);
+          const items = res.items || [];
+          setHighlights(items);
+          setPagination((prev) => ({
+            ...prev,
+            highlights: {
+              hasMore: res.hasMore ?? items.length >= LIMIT,
+              offset: res.fetchedCount ?? items.length,
+            },
+          }));
         } else if (activeTab === "bookmarks") {
           const res = await getFeed({
             creator: resolvedDid,
             motivation: "bookmarking",
-            limit: 50,
+            limit: LIMIT,
           });
-          setBookmarks(res.items || []);
+          const items = res.items || [];
+          setBookmarks(items);
+          setPagination((prev) => ({
+            ...prev,
+            bookmarks: {
+              hasMore: res.hasMore ?? items.length >= LIMIT,
+              offset: res.fetchedCount ?? items.length,
+            },
+          }));
         } else if (activeTab === "collections") {
           const res = await getCollections(resolvedDid);
           setCollections(res);
···
     };
     loadTabContent();
   }, [profile?.did, did, activeTab]);
+
+  const loadMore = useCallback(async () => {
+    const isHandle = !did.startsWith("did:");
+    const resolvedDid = isHandle ? profile?.did : did;
+    if (!resolvedDid) return;
+
+    const tabPagination = pagination[activeTab];
+    if (!tabPagination) return;
+
+    const capturedTab = activeTab;
+    setLoadingMore(true);
+    setLoadMoreError(null);
+    try {
+      const motivationMap: Record<string, string | undefined> = {
+        all: undefined,
+        annotations: "commenting",
+        highlights: "highlighting",
+        bookmarks: "bookmarking",
+      };
+      const res = await getFeed({
+        creator: resolvedDid,
+        motivation: motivationMap[capturedTab],
+        limit: LIMIT,
+        offset: tabPagination.offset,
+      });
+      const fetched = res.items || [];
+      const setters: Record<
+        string,
+        React.Dispatch<React.SetStateAction<AnnotationItem[]>>
+      > = {
+        annotations: setAnnotations,
+        highlights: setHighlights,
+        bookmarks: setBookmarks,
+      };
+      const setter = setters[capturedTab] ?? setAll;
+      setter((prev) => [...prev, ...fetched]);
+      setPagination((prev) => ({
+        ...prev,
+        [capturedTab]: {
+          hasMore: res.hasMore ?? fetched.length >= LIMIT,
+          offset:
+            prev[capturedTab].offset + (res.fetchedCount ?? fetched.length),
+        },
+      }));
+    } catch (e) {
+      console.error(e);
+      const msg = e instanceof Error ? e.message : "Something went wrong";
+      setLoadMoreError(msg);
+      if (loadMoreTimerRef.current) clearTimeout(loadMoreTimerRef.current);
+      loadMoreTimerRef.current = setTimeout(() => setLoadMoreError(null), 5000);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [did, profile?.did, activeTab, pagination]);
 
   if (loading) {
     return (
···
                 : `No ${activeTab}`
             }
           />
+        )}
+
+        {activeTab !== "collections" && pagination[activeTab]?.hasMore && (
+          <div className="flex flex-col items-center gap-2 py-6">
+            {loadMoreError && (
+              <p className="text-sm text-red-500 dark:text-red-400">
+                Failed to load more: {loadMoreError}
+              </p>
+            )}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={loadMore}
+              loading={loadingMore}
+              disabled={loadingMore}
+              className="rounded-xl"
+            >
+              Load more
+            </Button>
+          </div>
         )}
       </div>