diff --git a/apps/web/src/pages/templates/index.tsx b/apps/web/src/pages/templates/index.tsx
index 963fb4ac..b5996ecb 100644
--- a/apps/web/src/pages/templates/index.tsx
+++ b/apps/web/src/pages/templates/index.tsx
@@ -13,7 +13,7 @@ import {EmptyState} from '@plunk/ui';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
 import {formatRelativeTime} from '../../lib/dateUtils';
-import {Calendar, Copy, Edit, FileText, Plus, Search, Trash2, X} from 'lucide-react';
+import {Calendar, Files, Copy, Edit, FileText, Plus, Search, Trash2, X} from 'lucide-react';
 import {NextSeo} from 'next-seo';
 import Link from 'next/link';
 import {useEffect, useState} from 'react';
@@ -66,6 +66,15 @@ export default function TemplatesPage() {
     }
   };
 
+  const copyToClipboard = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied to clipboard`);
+    } catch {
+      toast.error('Failed to copy');
+    }
+  };
+
   return (
     <>
       <NextSeo title="Templates" />
@@ -193,6 +202,14 @@ export default function TemplatesPage() {
                           </div>
                         </div>
                         <div className="flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            title="Copy template ID"
+                            onClick={() => copyToClipboard(template.id, 'Template ID')}
+                          >
+                            <Files className="h-4 w-4" />
+                          </Button>
                           <Button asChild variant="ghost" size="sm" title="Edit template">
                             <Link href={`/templates/${template.id}`} aria-label="Edit template"><Edit className="h-4 w-4" /></Link>
                           </Button>