diff --git a/apps/web/src/components/TemplatesPane.tsx b/apps/web/src/components/TemplatesPane.tsx
index f3822c16..8793d33f 100644
--- a/apps/web/src/components/TemplatesPane.tsx
+++ b/apps/web/src/components/TemplatesPane.tsx
@@ -306,7 +306,18 @@ export const TemplatesPane = ({
                 {savedTemplates.map((template) => (
                   <div
                     key={template.id}
-                    className="group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-emerald-300 hover:shadow-md"
+                    className="group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-emerald-300 hover:shadow-md cursor-pointer"
+                    onClick={() =>
+                      setPreviewTemplate({
+                        title: template.name,
+                        description: template.description,
+                        noteTitle: template.title,
+                        tags: template.tags,
+                        contentMarkdown: template.contentMarkdown,
+                        badge: t("templates.badgeCustom"),
+                        onUse: () => onUseSavedTemplate(template),
+                      })
+                    }
                   >
                     <div>
                       <div className="mb-2 flex items-start justify-between gap-2">
@@ -344,7 +355,10 @@ export const TemplatesPane = ({
                           className="p-1 hover:text-slate-700 transition rounded-md hover:bg-slate-100"
                           title={t("templates.edit")}
                           disabled={isCreating}
-                          onClick={() => startEditing(template)}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            startEditing(template);
+                          }}
                         >
                           <Pencil className="h-3.5 w-3.5" />
                         </button>
@@ -353,7 +367,10 @@ export const TemplatesPane = ({
                           className="p-1 hover:text-rose-600 transition rounded-md hover:bg-rose-50"
                           title={t("templates.delete")}
                           disabled={isCreating}
-                          onClick={() => setDeleteConfirmTemplate(template)}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDeleteConfirmTemplate(template);
+                          }}
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
@@ -361,7 +378,8 @@ export const TemplatesPane = ({
                           type="button"
                           className="p-1 hover:text-slate-700 transition rounded-md hover:bg-slate-100"
                           title={t("templates.previewTemplate")}
-                          onClick={() =>
+                          onClick={(e) => {
+                            e.stopPropagation();
                             setPreviewTemplate({
                               title: template.name,
                               description: template.description,
@@ -370,8 +388,8 @@ export const TemplatesPane = ({
                               contentMarkdown: template.contentMarkdown,
                               badge: t("templates.badgeCustom"),
                               onUse: () => onUseSavedTemplate(template),
-                            })
-                          }
+                            });
+                          }}
                         >
                           <Eye className="h-3.5 w-3.5" />
                         </button>
@@ -381,7 +399,10 @@ export const TemplatesPane = ({
                         type="button"
                         className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200/80 bg-emerald-50/70 px-3 py-1.5 text-xs font-semibold text-emerald-800 hover:bg-emerald-600 hover:text-white hover:border-emerald-600 transition-all duration-200 disabled:opacity-50"
                         disabled={!canCreateMemo || isCreating}
-                        onClick={() => onUseSavedTemplate(template)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onUseSavedTemplate(template);
+                        }}
                       >
                         {t("templates.useThisTemplate")}
                         <ArrowRight className="h-3 w-3" />
@@ -425,7 +446,17 @@ export const TemplatesPane = ({
                 return (
                   <div
                     key={template.id}
-                    className={`group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:shadow-md ${theme.accentBorder}`}
+                    className={`group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:shadow-md cursor-pointer ${theme.accentBorder}`}
+                    onClick={() =>
+                      setPreviewTemplate({
+                        title: template.title,
+                        description: template.description,
+                        tags: template.tags,
+                        contentMarkdown: template.contentMarkdown,
+                        badge: t("templates.badgeBuiltIn"),
+                        onUse: () => onCreateMemo(template),
+                      })
+                    }
                   >
                     <div>
                       <div className="mb-2.5 flex items-center justify-between gap-2">
@@ -449,7 +480,8 @@ export const TemplatesPane = ({
                       <button
                         type="button"
                         className="inline-flex items-center gap-1 text-xs text-slate-500 hover:text-slate-800 transition py-1"
-                        onClick={() =>
+                        onClick={(e) => {
+                          e.stopPropagation();
                           setPreviewTemplate({
                             title: template.title,
                             description: template.description,
@@ -457,8 +489,8 @@ export const TemplatesPane = ({
                             contentMarkdown: template.contentMarkdown,
                             badge: t("templates.badgeBuiltIn"),
                             onUse: () => onCreateMemo(template),
-                          })
-                        }
+                          });
+                        }}
                       >
                         <Eye className="h-3.5 w-3.5 text-slate-400" />
                         {t("templates.previewTemplate")}
@@ -468,7 +500,10 @@ export const TemplatesPane = ({
                         type="button"
                         className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200/80 bg-emerald-50/70 px-3 py-1.5 text-xs font-semibold text-emerald-800 hover:bg-emerald-600 hover:text-white hover:border-emerald-600 transition-all duration-200 disabled:opacity-50"
                         disabled={!canCreateMemo || isCreating}
-                        onClick={() => onCreateMemo(template)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onCreateMemo(template);
+                        }}
                       >
                         {t("templates.useThisTemplate")}
                         <ArrowRight className="h-3 w-3" />