diff --git a/src/components/TemplateSelector.tsx b/src/components/TemplateSelector.tsx
index 1a75595..0a11b04 100644
--- a/src/components/TemplateSelector.tsx
+++ b/src/components/TemplateSelector.tsx
@@ -172,8 +172,10 @@ const formatToastDescription = (actionType: 'replace' | 'merge', template: Templ
   return description.replace('{template}', template)
 }
 
-export function TemplateSelector() {
-  const { templates, isLoading, clearAndLoadTemplate, mergeTemplate } = useSeedTemplates()
+const useConfirmDialog = ({
+  clearAndLoadTemplate,
+  mergeTemplate
+}: Pick<ReturnType<typeof useSeedTemplates>, 'clearAndLoadTemplate' | 'mergeTemplate'>) => {
   const [confirmDialog, setConfirmDialog] = useState<ConfirmDialogState>({
     open: false,
     actionType: 'replace',
@@ -211,6 +213,23 @@ export function TemplateSelector() {
     }
   }
 
+  return {
+    confirmDialog,
+    handleSelectTemplate,
+    handleConfirmLoad,
+    handleDialogToggle
+  }
+}
+
+export function TemplateSelector() {
+  const { templates, isLoading, clearAndLoadTemplate, mergeTemplate } = useSeedTemplates()
+  const {
+    confirmDialog,
+    handleSelectTemplate,
+    handleConfirmLoad,
+    handleDialogToggle
+  } = useConfirmDialog({ clearAndLoadTemplate, mergeTemplate })
+
   return (
     <>
       <Tabs defaultValue="templates" className="w-full">