7 changed files with 308 additions and 28 deletions
--- a/libertas-frontend/src/components/albums/add-media-to-album-dialog.tsx
+++ b/libertas-frontend/src/components/albums/add-media-to-album-dialog.tsx
@@ -31,7 +31,7 @@ export function AddMediaToAlbumDialog({ albumId }: AddMediaToAlbumDialogProps) {
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
-  } = useGetMediaList();
+  } = useGetMediaList(1, 20);

  const { mutate: addMedia, isPending: isAdding } = useAddMediaToAlbum(albumId);

--- a/libertas-frontend/src/components/media/face-overlay.tsx
+++ b/libertas-frontend/src/components/media/face-overlay.tsx
@@ -0,0 +1,56 @@
+import type { FaceRegion } from "@/domain/types";
+import { cn } from "@/lib/utils";
+
+type FaceOverlayProps = {
+    faces: FaceRegion[];
+    hoveredFaceId: string | null;
+    imageWidth: number;
+    imageHeight: number;
+    className?: string;
+    onFaceClick?: (face: FaceRegion) => void;
+};
+
+export function FaceOverlay({
+    faces,
+    hoveredFaceId,
+    imageWidth,
+    imageHeight,
+    className,
+    onFaceClick,
+}: FaceOverlayProps) {
+    if (!imageWidth || !imageHeight) return null;
+
+    return (
+        <div className={cn("absolute inset-0 pointer-events-none", className)}>
+            {faces.map((face) => {
+                const isHovered = face.id === hoveredFaceId;
+
+                // Calculate percentages
+                const left = (face.x_min / imageWidth) * 100;
+                const top = (face.y_min / imageHeight) * 100;
+                const width = ((face.x_max - face.x_min) / imageWidth) * 100;
+                const height = ((face.y_max - face.y_min) / imageHeight) * 100;
+
+                return (
+                    <div
+                        key={face.id}
+                        className={cn(
+                            "absolute border-2 transition-colors duration-200 pointer-events-auto cursor-pointer",
+                            isHovered
+                                ? "border-yellow-400 bg-yellow-400/20 z-10"
+                                : "border-white/50 hover:border-white/80"
+                        )}
+                        style={{
+                            left: `${left}%`,
+                            top: `${top}%`,
+                            width: `${width}%`,
+                            height: `${height}%`,
+                        }}
+                        onClick={() => onFaceClick?.(face)}
+                        title={face.person_id ? "Assigned Person" : "Unknown Person"}
+                    />
+                );
+            })}
+        </div>
+    );
+}
--- a/libertas-frontend/src/components/media/media-details-sidebar.tsx
+++ b/libertas-frontend/src/components/media/media-details-sidebar.tsx
@@ -1,6 +1,5 @@
-import type { Media, MediaMetadata } from "@/domain/types";
+import type { FaceRegion, Media, MediaMetadata } from "@/domain/types";
 import { useGetMediaDetails } from "@/features/media/use-media";
-import { useListMediaFaces } from "@/features/faces/use-faces";
 import { useListMediaTags } from "@/features/tags/use-tags";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -17,6 +16,10 @@ import { Separator } from "../ui/separator";

 type MediaDetailsSidebarProps = {
  media: Media;
+  faces: FaceRegion[] | undefined;
+  isLoadingFaces: boolean;
+  onHoverFace: (faceId: string | null) => void;
+  onFaceClick: (face: FaceRegion) => void;
 };

 function findMeta(
@@ -28,14 +31,17 @@ function findMeta(

 const manualTags = new Set(["DateTimeOriginal", "Make", "Model"]);

-export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
+export function MediaDetailsSidebar({
+  media,
+  faces,
+  isLoadingFaces,
+  onHoverFace,
+  onFaceClick
+}: MediaDetailsSidebarProps) {
  const { data: details, isLoading: isLoadingDetails } = useGetMediaDetails(
    media.id
  );
  const { data: tags, isLoading: isLoadingTags } = useListMediaTags(media.id);
-  const { data: faces, isLoading: isLoadingFaces } = useListMediaFaces(
-    media.id
-  );

  const displayDate = media.date_taken
    ? format(parseISO(media.date_taken), "MMMM d, yyyy 'at' h:mm a")
@@ -53,8 +59,6 @@ export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
    )
    .sort((a, b) => a.tag_name.localeCompare(b.tag_name));

-  console.log("Other Metadata:", details);
-
  return (
    <ScrollArea className="h-full w-full">
      <div className="p-4 space-y-6">
@@ -70,7 +74,7 @@ export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
          defaultValue={["details", "tags", "people"]}
          className="w-full"
        >
-          {/* --- People Section (Unchanged) --- */}
+          {/* --- People Section --- */}
          <AccordionItem value="people">
            <AccordionTrigger>People</AccordionTrigger>
            <AccordionContent>
@@ -78,7 +82,13 @@ export function MediaDetailsSidebar({ media }: MediaDetailsSidebarProps) {
              {faces && faces.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {faces.map((face) => (
-                    <PersonFaceBadge key={face.id} personId={face.person_id} />
+                    <PersonFaceBadge
+                      key={face.id}
+                      face={face}
+                      onMouseEnter={() => onHoverFace(face.id)}
+                      onMouseLeave={() => onHoverFace(null)}
+                      onClick={() => onFaceClick(face)}
+                    />
                  ))}
                </div>
              )}
--- a/libertas-frontend/src/components/media/media-viewer.tsx
+++ b/libertas-frontend/src/components/media/media-viewer.tsx
@@ -1,5 +1,5 @@
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { type Media } from "@/domain/types";
+import { type Media, type FaceRegion } from "@/domain/types";
 import { AuthenticatedImage } from "./authenticated-image";
 import { Skeleton } from "../ui/skeleton";
 import {
@@ -8,6 +8,10 @@ import {
  ResizableHandle,
 } from "@/components/ui/resizable";
 import { MediaDetailsSidebar } from "./media-details-sidebar";
+import { useListMediaFaces } from "@/features/faces/use-faces";
+import { useState, useRef } from "react";
+import { FaceOverlay } from "./face-overlay";
+import { PersonAssignmentDialog } from "@/components/people/person-assignment-dialog";

 type MediaViewerProps = {
  media: Media | null;
@@ -16,21 +20,51 @@ type MediaViewerProps = {

 export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
  const isOpen = media !== null;
+  const { data: faces, isLoading: isLoadingFaces } = useListMediaFaces(media?.id ?? "");
+  const [hoveredFaceId, setHoveredFaceId] = useState<string | null>(null);
+  const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Assignment dialog state
+  const [assignmentDialogOpen, setAssignmentDialogOpen] = useState(false);
+  const [selectedFace, setSelectedFace] = useState<FaceRegion | null>(null);
+
+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+  };
+
+  const handleFaceClick = (face: FaceRegion) => {
+    setSelectedFace(face);
+    setAssignmentDialogOpen(true);
+  };

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="min-w-[90vw] max-w-full h-[90vh] p-0 border-0">
-        {/* We use a resizable panel group to show the image and sidebar */}
        <ResizablePanelGroup direction="horizontal" className="h-full">
          {/* --- Panel 1: The Image --- */}
          <ResizablePanel defaultSize={75} className="bg-gray-100">
            <div className="flex h-full items-center justify-center overflow-hidden relative p-4">
              {media ? (
-                <AuthenticatedImage
-                  src={media.file_url}
-                  alt={media.original_filename}
-                  className="max-w-full max-h-full object-contain"
-                />
+                <div className="relative inline-block max-w-full max-h-full">
+                  <AuthenticatedImage
+                    src={media.file_url}
+                    alt={media.original_filename}
+                    className="max-w-full max-h-full object-contain"
+                    onLoad={handleImageLoad}
+                    ref={imageRef}
+                  />
+                  {faces && imageDimensions && (
+                    <FaceOverlay
+                      faces={faces}
+                      hoveredFaceId={hoveredFaceId}
+                      imageWidth={imageDimensions.width}
+                      imageHeight={imageDimensions.height}
+                      onFaceClick={handleFaceClick}
+                    />
+                  )}
+                </div>
              ) : (
                <Skeleton className="w-full h-full" />
              )}
@@ -43,12 +77,31 @@ export function MediaViewer({ media, onOpenChange }: MediaViewerProps) {
          {/* --- Panel 2: The Details Sidebar --- */}
          <ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
            {media ? (
-              <MediaDetailsSidebar media={media} />
+              <MediaDetailsSidebar
+                media={media}
+                faces={faces}
+                isLoadingFaces={isLoadingFaces}
+                onHoverFace={setHoveredFaceId}
+                onFaceClick={handleFaceClick}
+              />
            ) : (
              <Skeleton className="w-full h-full" />
            )}
          </ResizablePanel>
        </ResizablePanelGroup>
+
+        {selectedFace && media && (
+          <PersonAssignmentDialog
+            isOpen={assignmentDialogOpen}
+            onOpenChange={(open) => {
+              setAssignmentDialogOpen(open);
+              if (!open) setSelectedFace(null);
+            }}
+            faceId={selectedFace.id}
+            mediaId={media.id}
+            currentPersonId={selectedFace.person_id}
+          />
+        )}
      </DialogContent>
    </Dialog>
  );
--- a/libertas-frontend/src/components/people/person-assignment-dialog.tsx
+++ b/libertas-frontend/src/components/people/person-assignment-dialog.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useListPeople, useCreatePerson } from "@/features/people/use-people";
+import { useAssignFace } from "@/features/faces/use-faces";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { UserSquare, Plus } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+type PersonAssignmentDialogProps = {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    faceId: string;
+    mediaId: string;
+    currentPersonId: string | null;
+};
+
+export function PersonAssignmentDialog({
+    isOpen,
+    onOpenChange,
+    faceId,
+    mediaId,
+    currentPersonId,
+}: PersonAssignmentDialogProps) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [isCreating, setIsCreating] = useState(false);
+    const [newPersonName, setNewPersonName] = useState("");
+
+    const { data: people } = useListPeople();
+    const assignFace = useAssignFace(faceId, mediaId);
+    const createPerson = useCreatePerson();
+
+    const filteredPeople = people?.filter((person) =>
+        person.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const handleAssign = (personId: string) => {
+        assignFace.mutate(
+            { person_id: personId },
+            {
+                onSuccess: () => {
+                    onOpenChange(false);
+                },
+            }
+        );
+    };
+
+    const handleCreateAndAssign = () => {
+        if (!newPersonName.trim()) return;
+
+        createPerson.mutate(
+            { name: newPersonName },
+            {
+                onSuccess: (newPerson) => {
+                    handleAssign(newPerson.id);
+                },
+            }
+        );
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>Assign Person</DialogTitle>
+                </DialogHeader>
+
+                {isCreating ? (
+                    <div className="space-y-4 py-4">
+                        <Input
+                            placeholder="Enter person name"
+                            value={newPersonName}
+                            onChange={(e) => setNewPersonName(e.target.value)}
+                            autoFocus
+                        />
+                        <div className="flex justify-end gap-2">
+                            <Button variant="outline" onClick={() => setIsCreating(false)}>
+                                Cancel
+                            </Button>
+                            <Button onClick={handleCreateAndAssign} disabled={!newPersonName.trim()}>
+                                Create & Assign
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="space-y-4">
+                        <Input
+                            placeholder="Search people..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                        />
+
+                        <ScrollArea className="h-[300px] pr-4">
+                            <div className="space-y-2">
+                                <Button
+                                    variant="ghost"
+                                    className="w-full justify-start gap-2"
+                                    onClick={() => setIsCreating(true)}
+                                >
+                                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
+                                        <Plus size={16} />
+                                    </div>
+                                    <span>Create "{searchQuery || "New Person"}"</span>
+                                </Button>
+
+                                {filteredPeople?.map((person) => (
+                                    <Button
+                                        key={person.id}
+                                        variant={currentPersonId === person.id ? "secondary" : "ghost"}
+                                        className="w-full justify-start gap-2"
+                                        onClick={() => handleAssign(person.id)}
+                                    >
+                                        <Avatar className="h-8 w-8">
+                                            {/* TODO: Add thumbnail URL if available */}
+                                            <AvatarFallback>
+                                                <UserSquare size={16} />
+                                            </AvatarFallback>
+                                        </Avatar>
+                                        <span>{person.name}</span>
+                                    </Button>
+                                ))}
+                            </div>
+                        </ScrollArea>
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}
--- a/libertas-frontend/src/components/people/person-face-badge.tsx
+++ b/libertas-frontend/src/components/people/person-face-badge.tsx
@@ -2,26 +2,52 @@ import { useGetPerson } from "@/features/people/use-people";
 import { Link } from "@tanstack/react-router";
 import { Badge } from "@/components/ui/badge";
 import { UserSquare } from "lucide-react";
+import type { FaceRegion } from "@/domain/types";
+import { cn } from "@/lib/utils";

 type PersonFaceBadgeProps = {
-  personId: string | null;
+  face: FaceRegion;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onClick?: () => void;
 };

-export function PersonFaceBadge({ personId }: PersonFaceBadgeProps) {
-  const { data: person } = useGetPerson(personId ?? "");
+export function PersonFaceBadge({
+  face,
+  onMouseEnter,
+  onMouseLeave,
+  onClick
+}: PersonFaceBadgeProps) {
+  const { data: person } = useGetPerson(face.person_id ?? "");

  const content = (
    <Badge
      variant="secondary"
-      className="inline-flex items-center gap-2 text-sm"
+      className={cn(
+        "inline-flex items-center gap-2 text-sm cursor-pointer transition-colors",
+        !face.person_id && "hover:bg-yellow-100"
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={(e) => {
+        // Prevent navigation if we're just assigning
+        if (!face.person_id) {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
    >
      <UserSquare size={16} />
-      {person ? person.name : personId ? "Loading..." : "Unknown"}
+      {person ? person.name : face.person_id ? "Loading..." : "Unknown"}
    </Badge>
  );

-  if (!personId || !person) {
-    return content;
+  if (!face.person_id || !person) {
+    return (
+      <div onClick={onClick}>
+        {content}
+      </div>
+    );
  }

  return (
@@ -29,6 +55,8 @@ export function PersonFaceBadge({ personId }: PersonFaceBadgeProps) {
      to="/people/$personId"
      params={{ personId: person.id }}
      className="hover:opacity-80"
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
    >
      {content}
    </Link>
--- a/libertas-frontend/src/services/media-service.ts
+++ b/libertas-frontend/src/services/media-service.ts
@@ -80,8 +80,6 @@ export const getMediaDetails = async (
  mediaId: string,
 ): Promise<MediaDetails> => {
  const { data } = await apiClient.get(`/media/${mediaId}`);
-  console.log('Data for media details: ', data);
-
  // Process the media URLs in the details response
  data.file_url = `${API_PREFIX}${data.file_url}`;
  data.thumbnail_url = data.thumbnail_url