diff --git a/frontend/src/components/CoverLetter.tsx b/frontend/src/components/CoverLetterLink.tsx
similarity index 100%
rename from frontend/src/components/CoverLetter.tsx
rename to frontend/src/components/CoverLetterLink.tsx
diff --git a/frontend/src/components/Template.tsx b/frontend/src/components/Template.tsx
index f97211f..0f5d052 100644
--- a/frontend/src/components/Template.tsx
+++ b/frontend/src/components/Template.tsx
@@ -1,13 +1,23 @@
-import type { TemplatePreview } from "@/types/api";
-import { Link } from "@tanstack/react-router";
+import { withForm } from "@/hooks/formHook";
 
-export default function Template({ template }: { template: TemplatePreview }) {
-    return (
-        <Link to={"/templates/$templateId"} params={{ templateId: template.id.toString() }}>
-            <div className="p-4 border rounded-lg hover:bg-muted/40">
-                <h2 className="text-xl font-semibold">{template.name}</h2>
+const Template = withForm({
+    defaultValues: {
+        name: "",
+        template: "",
+    },
+    props: {},
+    render({ form }) {
+        return (
+            <div className="mt-4 flex flex-col gap-4">
+                <form.AppField
+                    name="name"
+                    children={(f) => <f.TextField maxLength={50} label="Name" placeholder="Template name" />}
+                />
+
+                <form.AppField name="template" children={(f) => <f.RichTextEdit />} />
             </div>
-        </Link>
-    );
-}
+        );
+    },
+});
 
+export default Template;
diff --git a/frontend/src/components/TemplateLink.tsx b/frontend/src/components/TemplateLink.tsx
new file mode 100644
index 0000000..f97211f
--- /dev/null
+++ b/frontend/src/components/TemplateLink.tsx
@@ -0,0 +1,13 @@
+import type { TemplatePreview } from "@/types/api";
+import { Link } from "@tanstack/react-router";
+
+export default function Template({ template }: { template: TemplatePreview }) {
+    return (
+        <Link to={"/templates/$templateId"} params={{ templateId: template.id.toString() }}>
+            <div className="p-4 border rounded-lg hover:bg-muted/40">
+                <h2 className="text-xl font-semibold">{template.name}</h2>
+            </div>
+        </Link>
+    );
+}
+
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 6015fcb..3d5e7e0 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import requests from "@/lib/requests";
 import type { CoverLetterPreview } from "@/types/api";
 import renderQueryState from "@/components/RenderQueryState";
-import CoverLetter from "@/components/CoverLetter";
+import CoverLetter from "@/components/CoverLetterLink";
 
 export const Route = createFileRoute("/")({
     component: App,
diff --git a/frontend/src/routes/templates/index.tsx b/frontend/src/routes/templates/index.tsx
index ab842e1..6f15956 100644
--- a/frontend/src/routes/templates/index.tsx
+++ b/frontend/src/routes/templates/index.tsx
@@ -6,7 +6,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { Plus } from "lucide-react";
 import type { TemplatePreview } from "@/types/api";
 import renderQueryState from "@/components/RenderQueryState";
-import Template from "@/components/Template";
+import Template from "@/components/TemplateLink";
 
 export const Route = createFileRoute("/templates/")({
     component: RouteComponent,