diff --git a/src/components/admin/document-templates/template-version-history.tsx b/src/components/admin/document-templates/template-version-history.tsx
index edf55375..7b296e58 100644
--- a/src/components/admin/document-templates/template-version-history.tsx
+++ b/src/components/admin/document-templates/template-version-history.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { RotateCcw, Clock } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -25,29 +26,25 @@ export function TemplateVersionHistory({
   currentVersion,
   onRollback,
 }: TemplateVersionHistoryProps) {
-  const [versions, setVersions] = useState<TemplateVersion[]>([]);
-  const [loading, setLoading] = useState(true);
+  const queryClient = useQueryClient();
+  const queryKey = ['admin', 'template-versions', templateId] as const;
   const [rollingBack, setRollingBack] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const fetchVersions = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await apiFetch<{ data: TemplateVersion[] }>(
-        `/api/v1/admin/templates/${templateId}/versions`,
-      );
-      setVersions(res.data);
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to load versions');
-    } finally {
-      setLoading(false);
-    }
-  }, [templateId]);
+  const {
+    data: versions = [],
+    isLoading: loading,
+    error: queryError,
+  } = useQuery<TemplateVersion[]>({
+    queryKey,
+    queryFn: () =>
+      apiFetch<{ data: TemplateVersion[] }>(`/api/v1/admin/templates/${templateId}/versions`).then(
+        (r) => r.data,
+      ),
+  });
 
-  useEffect(() => {
-    void fetchVersions();
-  }, [fetchVersions]);
+  const fetchVersions = () => queryClient.invalidateQueries({ queryKey });
+  const effectiveError = error ?? (queryError instanceof Error ? queryError.message : null);
 
   async function handleRollback(version: number) {
     if (
@@ -92,8 +89,10 @@ export function TemplateVersionHistory({
 
   return (
     <div className="space-y-3">
-      {error && (
-        <p className="rounded bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</p>
+      {effectiveError && (
+        <p className="rounded bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          {effectiveError}
+        </p>
       )}
 
       <p className="text-sm text-muted-foreground">