diff --git a/surfsense_web/components/documents/DocumentsFilters.tsx b/surfsense_web/components/documents/DocumentsFilters.tsx
index 2b7cf0f10..a5ee57703 100644
--- a/surfsense_web/components/documents/DocumentsFilters.tsx
+++ b/surfsense_web/components/documents/DocumentsFilters.tsx
@@ -2,7 +2,6 @@
 
 import { IconBinaryTree, IconBinaryTreeFilled } from "@tabler/icons-react";
 import { FolderPlus, ListFilter, Search, Upload, X } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useTranslations } from "next-intl";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
@@ -10,6 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Spinner } from "@/components/ui/spinner";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -74,17 +74,17 @@ export function DocumentsFilters({
 	return (
 		<div className="flex select-none">
 			<div className="flex items-center gap-2 w-full">
-				{/* New Folder + Filter Toggle Group */}
+				{/* New Folder + AI Sort + Filter Toggle Group */}
 				<ToggleGroup type="multiple" variant="outline" value={[]} className="overflow-visible">
 					{onCreateFolder && (
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<ToggleGroupItem
 									value="folder"
-									className="h-9 w-9 shrink-0 border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar"
-									onClick={(e) => {
-										e.preventDefault();
-										onCreateFolder();
+								className="h-9 w-9 shrink-0 border-sidebar-border text-muted-foreground hover:text-foreground hover:border-sidebar-border bg-sidebar"
+								onClick={(e) => {
+									e.preventDefault();
+									onCreateFolder();
 									}}
 								>
 									<FolderPlus size={14} />
@@ -94,13 +94,52 @@ export function DocumentsFilters({
 					</Tooltip>
 				)}
 
+					{onToggleAiSort && (
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<ToggleGroupItem
+									value="ai-sort"
+									disabled={aiSortBusy}
+									className={cn(
+										"h-9 w-9 shrink-0 border-sidebar-border bg-sidebar",
+										"disabled:pointer-events-none disabled:opacity-50",
+										aiSortEnabled
+											? "bg-accent text-accent-foreground"
+											: "text-muted-foreground hover:text-foreground hover:border-sidebar-border"
+									)}
+									onClick={(e) => {
+										e.preventDefault();
+										onToggleAiSort();
+									}}
+									aria-label={aiSortEnabled ? "Disable AI sort" : "Enable AI sort"}
+									aria-pressed={aiSortEnabled}
+								>
+								{aiSortBusy ? (
+									<Spinner size="xs" />
+								) : aiSortEnabled ? (
+										<IconBinaryTreeFilled size={16} />
+									) : (
+										<IconBinaryTree size={16} />
+									)}
+								</ToggleGroupItem>
+							</TooltipTrigger>
+							<TooltipContent>
+								{aiSortBusy
+									? "AI sort in progress..."
+									: aiSortEnabled
+										? "AI sort active — click to disable"
+										: "Enable AI sort"}
+							</TooltipContent>
+						</Tooltip>
+					)}
+
 					<Popover>
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<PopoverTrigger asChild>
 									<ToggleGroupItem
 										value="filter"
-										className="relative h-9 w-9 shrink-0 border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar overflow-visible"
+										className="relative h-9 w-9 shrink-0 border-sidebar-border text-muted-foreground hover:text-foreground hover:border-sidebar-border bg-sidebar overflow-visible"
 									>
 										<ListFilter size={14} />
 										{activeTypes.length > 0 && (
@@ -182,70 +221,6 @@ export function DocumentsFilters({
 					</Popover>
 				</ToggleGroup>
 
-				{/* AI Sort Toggle */}
-				{onToggleAiSort && (
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<button
-								type="button"
-								disabled={aiSortBusy}
-								onClick={onToggleAiSort}
-								className={cn(
-									"relative h-9 w-9 shrink-0 rounded-md border inline-flex items-center justify-center transition-all duration-300 ease-out",
-									"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none",
-									"disabled:pointer-events-none disabled:opacity-50",
-									aiSortEnabled
-										? "border-violet-400/60 bg-violet-50 text-violet-600 shadow-[0_0_8px_-1px_rgba(139,92,246,0.3)] hover:bg-violet-100 dark:border-violet-500/40 dark:bg-violet-500/15 dark:text-violet-400 dark:shadow-[0_0_8px_-1px_rgba(139,92,246,0.2)] dark:hover:bg-violet-500/25"
-										: "border-sidebar-border bg-sidebar text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border hover:bg-accent"
-								)}
-								aria-label={aiSortEnabled ? "Disable AI sort" : "Enable AI sort"}
-								aria-pressed={aiSortEnabled}
-							>
-								<AnimatePresence mode="wait" initial={false}>
-									{aiSortBusy ? (
-										<motion.div
-											key="busy"
-											initial={{ opacity: 0, scale: 0.6, rotate: -90 }}
-											animate={{ opacity: 1, scale: 1, rotate: 0 }}
-											exit={{ opacity: 0, scale: 0.6, rotate: 90 }}
-											transition={{ duration: 0.2, ease: "easeInOut" }}
-										>
-											<IconBinaryTree size={16} className="animate-pulse" />
-										</motion.div>
-									) : aiSortEnabled ? (
-										<motion.div
-											key="on"
-											initial={{ opacity: 0, scale: 0.6, rotate: -90 }}
-											animate={{ opacity: 1, scale: 1, rotate: 0 }}
-											exit={{ opacity: 0, scale: 0.6, rotate: 90 }}
-											transition={{ duration: 0.25, ease: "easeInOut" }}
-										>
-											<IconBinaryTreeFilled size={16} />
-										</motion.div>
-									) : (
-										<motion.div
-											key="off"
-											initial={{ opacity: 0, scale: 0.6, rotate: 90 }}
-											animate={{ opacity: 1, scale: 1, rotate: 0 }}
-											exit={{ opacity: 0, scale: 0.6, rotate: -90 }}
-											transition={{ duration: 0.25, ease: "easeInOut" }}
-										>
-											<IconBinaryTree size={16} />
-										</motion.div>
-									)}
-								</AnimatePresence>
-							</button>
-						</TooltipTrigger>
-						<TooltipContent>
-							{aiSortBusy
-								? "AI sort in progress..."
-								: aiSortEnabled
-									? "AI sort active — click to disable"
-									: "Enable AI sort"}
-						</TooltipContent>
-					</Tooltip>
-				)}
-
 				{/* Search Input */}
 				<div className="relative flex-1 min-w-0">
 					<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">