diff --git a/client/src/components/annotation/AnnotationSystem.tsx b/client/src/components/annotation/AnnotationSystem.tsx
index fa17b51..ebfda07 100644
--- a/client/src/components/annotation/AnnotationSystem.tsx
+++ b/client/src/components/annotation/AnnotationSystem.tsx
@@ -18,13 +18,13 @@ import {
 } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/hooks/use-toast";
-import type { AnnotationWithUser } from "@/lib/types";
+import type { AnnotationWithUser } from "@shared/schema";
 
 interface AnnotationSystemProps {
-	workId: number;
+	workId: string;
 	selectedLineNumber: number | null;
 	onClose: () => void;
-	translationId?: number;
+	translationId?: string;
 }
 
 export function AnnotationSystem({
@@ -38,7 +38,7 @@ export function AnnotationSystem({
 	const [isLoading, setIsLoading] = useState(true);
 	const [newAnnotation, setNewAnnotation] = useState("");
 	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [editingAnnotationId, setEditingAnnotationId] = useState<number | null>(
+	const [editingAnnotationId, setEditingAnnotationId] = useState<string | null>(
 		null,
 	);
 	const [editText, setEditText] = useState("");
@@ -63,32 +63,40 @@ export function AnnotationSystem({
 			// These would be fetched from the API in a real app
 			const mockAnnotations: AnnotationWithUser[] = [
 				{
-					id: 1,
-					workId,
-					translationId,
+					id: "1",
+					workId: workId,
+					translationId: translationId,
 					lineNumber: selectedLineNumber,
-					userId: 2,
-					userName: "Literary Scholar",
-					userAvatar: null,
-					content:
-						"This line demonstrates the poet's use of alliteration, creating a rhythmic pattern that emphasizes the emotional tone.",
-					createdAt: new Date(Date.now() - 1000000).toISOString(),
+					userId: "2",
+					user: {
+						name: "Literary Scholar",
+						avatar: undefined,
+					},
 					likes: 5,
 					liked: false,
+					content:
+						"This line demonstrates the poet's use of alliteration, creating a rhythmic pattern that emphasizes the emotional tone.",
+					type: "analysis",
+					isOfficial: false,
+					createdAt: new Date(Date.now() - 1000000).toISOString(),
 				},
 				{
-					id: 2,
-					workId,
-					translationId,
+					id: "2",
+					workId: workId,
+					translationId: translationId,
 					lineNumber: selectedLineNumber,
-					userId: 3,
-					userName: "Translator",
-					userAvatar: null,
+					userId: "3",
+					user: {
+						name: "Translator",
+						avatar: undefined,
+					},
+					likes: 3,
+					liked: false,
 					content:
 						"The original meaning in Russian contains a wordplay that is difficult to capture in English. A more literal translation might read as...",
+					type: "translation",
+					isOfficial: false,
 					createdAt: new Date(Date.now() - 5000000).toISOString(),
-					likes: 12,
-					liked: true,
 				},
 			];
 
@@ -107,14 +115,18 @@ export function AnnotationSystem({
 			// In a real app, this would be an API call
 			// Mock API response
 			const newAnnotationObj: AnnotationWithUser = {
-				id: Date.now(),
+				id: Date.now().toString(),
 				workId,
 				translationId,
 				lineNumber: selectedLineNumber,
-				userId: currentUser.id,
-				userName: currentUser.name,
-				userAvatar: currentUser.avatar,
+				userId: currentUser.id.toString(),
+				user: {
+					name: currentUser.name,
+					avatar: currentUser.avatar || undefined,
+				},
 				content: newAnnotation,
+				type: "comment",
+				isOfficial: false,
 				createdAt: new Date().toISOString(),
 				likes: 0,
 				liked: false,
@@ -142,7 +154,7 @@ export function AnnotationSystem({
 	};
 
 	// Like an annotation
-	const handleLikeAnnotation = async (annotationId: number) => {
+	const handleLikeAnnotation = async (annotationId: string) => {
 		try {
 			// Optimistically update UI
 			setAnnotations((prev) =>
@@ -151,7 +163,7 @@ export function AnnotationSystem({
 						? {
 								...anno,
 								liked: !anno.liked,
-								likes: anno.liked ? anno.likes - 1 : anno.likes + 1,
+								likes: anno.liked ? (anno.likes || 0) - 1 : (anno.likes || 0) + 1,
 							}
 						: anno,
 				),
@@ -171,7 +183,7 @@ export function AnnotationSystem({
 	};
 
 	// Delete annotation
-	const handleDeleteAnnotation = async (annotationId: number) => {
+	const handleDeleteAnnotation = async (annotationId: string) => {
 		try {
 			// Optimistically update UI
 			const filteredAnnotations = annotations.filter(
@@ -202,7 +214,7 @@ export function AnnotationSystem({
 	};
 
 	// Save edited annotation
-	const handleSaveEdit = async (annotationId: number) => {
+	const handleSaveEdit = async (annotationId: string) => {
 		if (!editText.trim()) return;
 
 		try {
@@ -309,16 +321,16 @@ export function AnnotationSystem({
 										<div className="flex items-center gap-2">
 											<Avatar className="h-8 w-8">
 												<AvatarImage
-													src={annotation.userAvatar || ""}
-													alt={annotation.userName}
+													src={annotation.user.avatar || ""}
+													alt={annotation.user.name}
 												/>
 												<AvatarFallback className="text-xs bg-navy/10 dark:bg-navy/20 text-navy dark:text-cream">
-													{annotation.userName.charAt(0).toUpperCase()}
+													{annotation.user.name.charAt(0).toUpperCase()}
 												</AvatarFallback>
 											</Avatar>
 											<div>
 												<CardTitle className="text-sm font-medium text-navy dark:text-cream">
-													{annotation.userName}
+													{annotation.user.name}
 												</CardTitle>
 												<p className="text-xs text-navy/60 dark:text-cream/60">
 													{new Date(annotation.createdAt).toLocaleDateString()}
@@ -327,7 +339,7 @@ export function AnnotationSystem({
 										</div>
 
 										{/* Edit/Delete buttons for user's own annotations */}
-										{annotation.userId === currentUser.id && (
+										{annotation.userId === currentUser.id.toString() && (
 											<div className="flex items-center gap-1">
 												<Button
 													variant="ghost"