diff --git a/surfsense_backend/app/routes/editor_routes.py b/surfsense_backend/app/routes/editor_routes.py
index 0d7f6eba6..9beebfc8e 100644
--- a/surfsense_backend/app/routes/editor_routes.py
+++ b/surfsense_backend/app/routes/editor_routes.py
@@ -17,9 +17,7 @@ from app.utils.rbac import check_permission
 router = APIRouter()
 
 
-@router.get(
-    "/search-spaces/{search_space_id}/documents/{document_id}/editor-content"
-)
+@router.get("/search-spaces/{search_space_id}/documents/{document_id}/editor-content")
 async def get_editor_content(
     search_space_id: int,
     document_id: int,
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx
index ea4c66228..1c4d440e7 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { FileText, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+import { FileText, Pencil, Trash2 } from "lucide-react";
+import { motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -13,16 +14,9 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
-	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { Document } from "./types";
 
 export function RowActions({
@@ -36,7 +30,8 @@ export function RowActions({
 	refreshDocuments: () => Promise<void>;
 	searchSpaceId: string;
 }) {
-	const [isOpen, setIsOpen] = useState(false);
+	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+	const [isMetadataOpen, setIsMetadataOpen] = useState(false);
 	const [isDeleting, setIsDeleting] = useState(false);
 	const router = useRouter();
 
@@ -52,7 +47,7 @@ export function RowActions({
 			toast.error("Failed to delete document");
 		} finally {
 			setIsDeleting(false);
-			setIsOpen(false);
+			setIsDeleteOpen(false);
 		}
 	};
 
@@ -61,64 +56,105 @@ export function RowActions({
 	};
 
 	return (
-		<div className="flex justify-end">
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<Button variant="ghost" className="h-8 w-8 p-0">
-						<span className="sr-only">Open menu</span>
-						<MoreHorizontal className="h-4 w-4" />
-					</Button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent align="end">
-					<DropdownMenuItem onClick={handleEdit}>
-						<Pencil className="mr-0 h-4 w-4" />
-						Edit Document
-					</DropdownMenuItem>
-					<DropdownMenuSeparator />
-					<JsonMetadataViewer
-						title={document.title}
-						metadata={document.document_metadata}
-						trigger={
-							<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-								<FileText className="mr-0 h-4 w-4" />
-								View Metadata
-							</DropdownMenuItem>
-						}
-					/>
-					<DropdownMenuSeparator />
-					<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-						<AlertDialogTrigger asChild>
-							<DropdownMenuItem
-								className="text-destructive focus:text-destructive"
-								onSelect={(e) => {
-									e.preventDefault();
-									setIsOpen(true);
-								}}
-							>
-								<Trash2 className="mr-0 h-4 w-4 text-destructive" />
-								Delete
-							</DropdownMenuItem>
-						</AlertDialogTrigger>
-						<AlertDialogContent>
-							<AlertDialogHeader>
-								<AlertDialogTitle>Are you sure?</AlertDialogTitle>
-							</AlertDialogHeader>
-							<AlertDialogFooter>
-								<AlertDialogCancel>Cancel</AlertDialogCancel>
-								<AlertDialogAction
-									onClick={(e) => {
-										e.preventDefault();
-										handleDelete();
-									}}
-									disabled={isDeleting}
-								>
-									{isDeleting ? "Deleting..." : "Delete"}
-								</AlertDialogAction>
-							</AlertDialogFooter>
-						</AlertDialogContent>
-					</AlertDialog>
-				</DropdownMenuContent>
-			</DropdownMenu>
+		<div className="flex items-center justify-end gap-1">
+			{/* Edit Button */}
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<motion.div
+						whileHover={{ scale: 1.1 }}
+						whileTap={{ scale: 0.95 }}
+						transition={{ type: "spring", stiffness: 400, damping: 17 }}
+					>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/80"
+							onClick={handleEdit}
+						>
+							<Pencil className="h-4 w-4" />
+							<span className="sr-only">Edit Document</span>
+						</Button>
+					</motion.div>
+				</TooltipTrigger>
+				<TooltipContent side="top">
+					<p>Edit Document</p>
+				</TooltipContent>
+			</Tooltip>
+
+			{/* View Metadata Button */}
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<motion.div
+						whileHover={{ scale: 1.1 }}
+						whileTap={{ scale: 0.95 }}
+						transition={{ type: "spring", stiffness: 400, damping: 17 }}
+					>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted/80"
+							onClick={() => setIsMetadataOpen(true)}
+						>
+							<FileText className="h-4 w-4" />
+							<span className="sr-only">View Metadata</span>
+						</Button>
+					</motion.div>
+				</TooltipTrigger>
+				<TooltipContent side="top">
+					<p>View Metadata</p>
+				</TooltipContent>
+			</Tooltip>
+			<JsonMetadataViewer
+				title={document.title}
+				metadata={document.document_metadata}
+				open={isMetadataOpen}
+				onOpenChange={setIsMetadataOpen}
+			/>
+
+			{/* Delete Button */}
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<motion.div
+						whileHover={{ scale: 1.1 }}
+						whileTap={{ scale: 0.95 }}
+						transition={{ type: "spring", stiffness: 400, damping: 17 }}
+					>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+							onClick={() => setIsDeleteOpen(true)}
+							disabled={isDeleting}
+						>
+							<Trash2 className="h-4 w-4" />
+							<span className="sr-only">Delete</span>
+						</Button>
+					</motion.div>
+				</TooltipTrigger>
+				<TooltipContent side="top">
+					<p>Delete</p>
+				</TooltipContent>
+			</Tooltip>
+			<AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={(e) => {
+								e.preventDefault();
+								handleDelete();
+							}}
+							disabled={isDeleting}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{isDeleting ? "Deleting..." : "Delete"}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 }
diff --git a/surfsense_web/app/globals.css b/surfsense_web/app/globals.css
index a1ee277c6..5aee982bb 100644
--- a/surfsense_web/app/globals.css
+++ b/surfsense_web/app/globals.css
@@ -27,7 +27,7 @@
 	--accent: oklch(0.97 0 0);
 	--accent-foreground: oklch(0.205 0 0);
 	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.985 0 0);
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
 	--ring: oklch(0.708 0 0);
@@ -63,8 +63,8 @@
 	--muted-foreground: oklch(0.708 0 0);
 	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.396 0.141 25.723);
-	--destructive-foreground: oklch(0.637 0.237 25.331);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.985 0 0);
 	--border: oklch(0.269 0 0);
 	--input: oklch(0.269 0 0);
 	--ring: oklch(0.439 0 0);
diff --git a/surfsense_web/components/json-metadata-viewer.tsx b/surfsense_web/components/json-metadata-viewer.tsx
index 11dd71581..8fe1b10ae 100644
--- a/surfsense_web/components/json-metadata-viewer.tsx
+++ b/surfsense_web/components/json-metadata-viewer.tsx
@@ -15,9 +15,17 @@ interface JsonMetadataViewerProps {
 	title: string;
 	metadata: any;
 	trigger?: React.ReactNode;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
 }
 
-export function JsonMetadataViewer({ title, metadata, trigger }: JsonMetadataViewerProps) {
+export function JsonMetadataViewer({
+	title,
+	metadata,
+	trigger,
+	open,
+	onOpenChange,
+}: JsonMetadataViewerProps) {
 	// Ensure metadata is a valid object
 	const jsonData = React.useMemo(() => {
 		if (!metadata) return {};
@@ -35,6 +43,23 @@ export function JsonMetadataViewer({ title, metadata, trigger }: JsonMetadataVie
 		}
 	}, [metadata]);
 
+	// Controlled mode: when open and onOpenChange are provided
+	if (open !== undefined && onOpenChange !== undefined) {
+		return (
+			<Dialog open={open} onOpenChange={onOpenChange}>
+				<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle>{title} - Metadata</DialogTitle>
+					</DialogHeader>
+					<div className="mt-4 p-4 bg-muted/30 rounded-md">
+						<JsonView data={jsonData} style={defaultStyles} />
+					</div>
+				</DialogContent>
+			</Dialog>
+		);
+	}
+
+	// Uncontrolled mode: when using trigger
 	return (
 		<Dialog>
 			<DialogTrigger asChild>