diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index d7e1116d55..6c1e312e24 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -23,7 +23,6 @@ import { Route as ViewIndexRouteImport } from './routes/_view/index'
 import { Route as WebhookStripeRouteImport } from './routes/webhook/stripe'
 import { Route as WebhookNangoRouteImport } from './routes/webhook/nango'
 import { Route as ApiTemplatesRouteImport } from './routes/api/templates'
-import { Route as ViewTemplatesRouteImport } from './routes/_view/templates'
 import { Route as ViewSecurityRouteImport } from './routes/_view/security'
 import { Route as ViewRoadmapRouteImport } from './routes/_view/roadmap'
 import { Route as ViewPricingRouteImport } from './routes/_view/pricing'
@@ -35,6 +34,7 @@ import { Route as ViewBrandRouteImport } from './routes/_view/brand'
 import { Route as ViewAboutRouteImport } from './routes/_view/about'
 import { Route as ViewDocsRouteRouteImport } from './routes/_view/docs/route'
 import { Route as ViewAppRouteRouteImport } from './routes/_view/app/route'
+import { Route as ViewTemplatesIndexRouteImport } from './routes/_view/templates/index'
 import { Route as ViewLegalIndexRouteImport } from './routes/_view/legal/index'
 import { Route as ViewDownloadIndexRouteImport } from './routes/_view/download/index'
 import { Route as ViewDocsIndexRouteImport } from './routes/_view/docs/index'
@@ -42,7 +42,9 @@ import { Route as ViewChangelogIndexRouteImport } from './routes/_view/changelog
 import { Route as ViewBlogIndexRouteImport } from './routes/_view/blog/index'
 import { Route as ViewAppIndexRouteImport } from './routes/_view/app/index'
 import { Route as ApiTweetIdRouteImport } from './routes/api/tweet.$id'
+import { Route as ApiImagesSplatRouteImport } from './routes/api/images.$'
 import { Route as ViewVsSlugRouteImport } from './routes/_view/vs/$slug'
+import { Route as ViewTemplatesSlugRouteImport } from './routes/_view/templates/$slug'
 import { Route as ViewSolutionSalesRouteImport } from './routes/_view/solution/sales'
 import { Route as ViewSolutionRecruitingRouteImport } from './routes/_view/solution/recruiting'
 import { Route as ViewSolutionProjectManagementRouteImport } from './routes/_view/solution/project-management'
@@ -146,11 +148,6 @@ const ApiTemplatesRoute = ApiTemplatesRouteImport.update({
   path: '/api/templates',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ViewTemplatesRoute = ViewTemplatesRouteImport.update({
-  id: '/templates',
-  path: '/templates',
-  getParentRoute: () => ViewRouteRoute,
-} as any)
 const ViewSecurityRoute = ViewSecurityRouteImport.update({
   id: '/security',
   path: '/security',
@@ -206,6 +203,11 @@ const ViewAppRouteRoute = ViewAppRouteRouteImport.update({
   path: '/app',
   getParentRoute: () => ViewRouteRoute,
 } as any)
+const ViewTemplatesIndexRoute = ViewTemplatesIndexRouteImport.update({
+  id: '/templates/',
+  path: '/templates/',
+  getParentRoute: () => ViewRouteRoute,
+} as any)
 const ViewLegalIndexRoute = ViewLegalIndexRouteImport.update({
   id: '/legal/',
   path: '/legal/',
@@ -241,11 +243,21 @@ const ApiTweetIdRoute = ApiTweetIdRouteImport.update({
   path: '/api/tweet/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiImagesSplatRoute = ApiImagesSplatRouteImport.update({
+  id: '/api/images/$',
+  path: '/api/images/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ViewVsSlugRoute = ViewVsSlugRouteImport.update({
   id: '/vs/$slug',
   path: '/vs/$slug',
   getParentRoute: () => ViewRouteRoute,
 } as any)
+const ViewTemplatesSlugRoute = ViewTemplatesSlugRouteImport.update({
+  id: '/templates/$slug',
+  path: '/templates/$slug',
+  getParentRoute: () => ViewRouteRoute,
+} as any)
 const ViewSolutionSalesRoute = ViewSolutionSalesRouteImport.update({
   id: '/solution/sales',
   path: '/solution/sales',
@@ -438,7 +450,6 @@ export interface FileRoutesByFullPath {
   '/pricing': typeof ViewPricingRoute
   '/roadmap': typeof ViewRoadmapRoute
   '/security': typeof ViewSecurityRoute
-  '/templates': typeof ViewTemplatesRoute
   '/api/templates': typeof ApiTemplatesRoute
   '/webhook/nango': typeof WebhookNangoRoute
   '/webhook/stripe': typeof WebhookStripeRoute
@@ -476,7 +487,9 @@ export interface FileRoutesByFullPath {
   '/solution/project-management': typeof ViewSolutionProjectManagementRoute
   '/solution/recruiting': typeof ViewSolutionRecruitingRoute
   '/solution/sales': typeof ViewSolutionSalesRoute
+  '/templates/$slug': typeof ViewTemplatesSlugRoute
   '/vs/$slug': typeof ViewVsSlugRoute
+  '/api/images/$': typeof ApiImagesSplatRoute
   '/api/tweet/$id': typeof ApiTweetIdRoute
   '/app/': typeof ViewAppIndexRoute
   '/blog': typeof ViewBlogIndexRoute
@@ -484,6 +497,7 @@ export interface FileRoutesByFullPath {
   '/docs/': typeof ViewDocsIndexRoute
   '/download': typeof ViewDownloadIndexRoute
   '/legal': typeof ViewLegalIndexRoute
+  '/templates': typeof ViewTemplatesIndexRoute
 }
 export interface FileRoutesByTo {
   '/auth': typeof AuthRoute
@@ -504,7 +518,6 @@ export interface FileRoutesByTo {
   '/pricing': typeof ViewPricingRoute
   '/roadmap': typeof ViewRoadmapRoute
   '/security': typeof ViewSecurityRoute
-  '/templates': typeof ViewTemplatesRoute
   '/api/templates': typeof ApiTemplatesRoute
   '/webhook/nango': typeof WebhookNangoRoute
   '/webhook/stripe': typeof WebhookStripeRoute
@@ -542,7 +555,9 @@ export interface FileRoutesByTo {
   '/solution/project-management': typeof ViewSolutionProjectManagementRoute
   '/solution/recruiting': typeof ViewSolutionRecruitingRoute
   '/solution/sales': typeof ViewSolutionSalesRoute
+  '/templates/$slug': typeof ViewTemplatesSlugRoute
   '/vs/$slug': typeof ViewVsSlugRoute
+  '/api/images/$': typeof ApiImagesSplatRoute
   '/api/tweet/$id': typeof ApiTweetIdRoute
   '/app': typeof ViewAppIndexRoute
   '/blog': typeof ViewBlogIndexRoute
@@ -550,6 +565,7 @@ export interface FileRoutesByTo {
   '/docs': typeof ViewDocsIndexRoute
   '/download': typeof ViewDownloadIndexRoute
   '/legal': typeof ViewLegalIndexRoute
+  '/templates': typeof ViewTemplatesIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -574,7 +590,6 @@ export interface FileRoutesById {
   '/_view/pricing': typeof ViewPricingRoute
   '/_view/roadmap': typeof ViewRoadmapRoute
   '/_view/security': typeof ViewSecurityRoute
-  '/_view/templates': typeof ViewTemplatesRoute
   '/api/templates': typeof ApiTemplatesRoute
   '/webhook/nango': typeof WebhookNangoRoute
   '/webhook/stripe': typeof WebhookStripeRoute
@@ -612,7 +627,9 @@ export interface FileRoutesById {
   '/_view/solution/project-management': typeof ViewSolutionProjectManagementRoute
   '/_view/solution/recruiting': typeof ViewSolutionRecruitingRoute
   '/_view/solution/sales': typeof ViewSolutionSalesRoute
+  '/_view/templates/$slug': typeof ViewTemplatesSlugRoute
   '/_view/vs/$slug': typeof ViewVsSlugRoute
+  '/api/images/$': typeof ApiImagesSplatRoute
   '/api/tweet/$id': typeof ApiTweetIdRoute
   '/_view/app/': typeof ViewAppIndexRoute
   '/_view/blog/': typeof ViewBlogIndexRoute
@@ -620,6 +637,7 @@ export interface FileRoutesById {
   '/_view/docs/': typeof ViewDocsIndexRoute
   '/_view/download/': typeof ViewDownloadIndexRoute
   '/_view/legal/': typeof ViewLegalIndexRoute
+  '/_view/templates/': typeof ViewTemplatesIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -644,7 +662,6 @@ export interface FileRouteTypes {
     | '/pricing'
     | '/roadmap'
     | '/security'
-    | '/templates'
     | '/api/templates'
     | '/webhook/nango'
     | '/webhook/stripe'
@@ -682,7 +699,9 @@ export interface FileRouteTypes {
     | '/solution/project-management'
     | '/solution/recruiting'
     | '/solution/sales'
+    | '/templates/$slug'
     | '/vs/$slug'
+    | '/api/images/$'
     | '/api/tweet/$id'
     | '/app/'
     | '/blog'
@@ -690,6 +709,7 @@ export interface FileRouteTypes {
     | '/docs/'
     | '/download'
     | '/legal'
+    | '/templates'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/auth'
@@ -710,7 +730,6 @@ export interface FileRouteTypes {
     | '/pricing'
     | '/roadmap'
     | '/security'
-    | '/templates'
     | '/api/templates'
     | '/webhook/nango'
     | '/webhook/stripe'
@@ -748,7 +767,9 @@ export interface FileRouteTypes {
     | '/solution/project-management'
     | '/solution/recruiting'
     | '/solution/sales'
+    | '/templates/$slug'
     | '/vs/$slug'
+    | '/api/images/$'
     | '/api/tweet/$id'
     | '/app'
     | '/blog'
@@ -756,6 +777,7 @@ export interface FileRouteTypes {
     | '/docs'
     | '/download'
     | '/legal'
+    | '/templates'
   id:
     | '__root__'
     | '/_view'
@@ -779,7 +801,6 @@ export interface FileRouteTypes {
     | '/_view/pricing'
     | '/_view/roadmap'
     | '/_view/security'
-    | '/_view/templates'
     | '/api/templates'
     | '/webhook/nango'
     | '/webhook/stripe'
@@ -817,7 +838,9 @@ export interface FileRouteTypes {
     | '/_view/solution/project-management'
     | '/_view/solution/recruiting'
     | '/_view/solution/sales'
+    | '/_view/templates/$slug'
     | '/_view/vs/$slug'
+    | '/api/images/$'
     | '/api/tweet/$id'
     | '/_view/app/'
     | '/_view/blog/'
@@ -825,6 +848,7 @@ export interface FileRouteTypes {
     | '/_view/docs/'
     | '/_view/download/'
     | '/_view/legal/'
+    | '/_view/templates/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -841,6 +865,7 @@ export interface RootRouteChildren {
   ApiTemplatesRoute: typeof ApiTemplatesRoute
   WebhookNangoRoute: typeof WebhookNangoRoute
   WebhookStripeRoute: typeof WebhookStripeRoute
+  ApiImagesSplatRoute: typeof ApiImagesSplatRoute
   ApiTweetIdRoute: typeof ApiTweetIdRoute
 }
 
@@ -944,13 +969,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiTemplatesRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_view/templates': {
-      id: '/_view/templates'
-      path: '/templates'
-      fullPath: '/templates'
-      preLoaderRoute: typeof ViewTemplatesRouteImport
-      parentRoute: typeof ViewRouteRoute
-    }
     '/_view/security': {
       id: '/_view/security'
       path: '/security'
@@ -1028,6 +1046,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ViewAppRouteRouteImport
       parentRoute: typeof ViewRouteRoute
     }
+    '/_view/templates/': {
+      id: '/_view/templates/'
+      path: '/templates'
+      fullPath: '/templates'
+      preLoaderRoute: typeof ViewTemplatesIndexRouteImport
+      parentRoute: typeof ViewRouteRoute
+    }
     '/_view/legal/': {
       id: '/_view/legal/'
       path: '/legal'
@@ -1077,6 +1102,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiTweetIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/images/$': {
+      id: '/api/images/$'
+      path: '/api/images/$'
+      fullPath: '/api/images/$'
+      preLoaderRoute: typeof ApiImagesSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_view/vs/$slug': {
       id: '/_view/vs/$slug'
       path: '/vs/$slug'
@@ -1084,6 +1116,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ViewVsSlugRouteImport
       parentRoute: typeof ViewRouteRoute
     }
+    '/_view/templates/$slug': {
+      id: '/_view/templates/$slug'
+      path: '/templates/$slug'
+      fullPath: '/templates/$slug'
+      preLoaderRoute: typeof ViewTemplatesSlugRouteImport
+      parentRoute: typeof ViewRouteRoute
+    }
     '/_view/solution/sales': {
       id: '/_view/solution/sales'
       path: '/solution/sales'
@@ -1376,7 +1415,6 @@ interface ViewRouteRouteChildren {
   ViewPricingRoute: typeof ViewPricingRoute
   ViewRoadmapRoute: typeof ViewRoadmapRoute
   ViewSecurityRoute: typeof ViewSecurityRoute
-  ViewTemplatesRoute: typeof ViewTemplatesRoute
   ViewIndexRoute: typeof ViewIndexRoute
   ViewBlogSlugRoute: typeof ViewBlogSlugRoute
   ViewCallbackAuthRoute: typeof ViewCallbackAuthRoute
@@ -1405,11 +1443,13 @@ interface ViewRouteRouteChildren {
   ViewSolutionProjectManagementRoute: typeof ViewSolutionProjectManagementRoute
   ViewSolutionRecruitingRoute: typeof ViewSolutionRecruitingRoute
   ViewSolutionSalesRoute: typeof ViewSolutionSalesRoute
+  ViewTemplatesSlugRoute: typeof ViewTemplatesSlugRoute
   ViewVsSlugRoute: typeof ViewVsSlugRoute
   ViewBlogIndexRoute: typeof ViewBlogIndexRoute
   ViewChangelogIndexRoute: typeof ViewChangelogIndexRoute
   ViewDownloadIndexRoute: typeof ViewDownloadIndexRoute
   ViewLegalIndexRoute: typeof ViewLegalIndexRoute
+  ViewTemplatesIndexRoute: typeof ViewTemplatesIndexRoute
 }
 
 const ViewRouteRouteChildren: ViewRouteRouteChildren = {
@@ -1424,7 +1464,6 @@ const ViewRouteRouteChildren: ViewRouteRouteChildren = {
   ViewPricingRoute: ViewPricingRoute,
   ViewRoadmapRoute: ViewRoadmapRoute,
   ViewSecurityRoute: ViewSecurityRoute,
-  ViewTemplatesRoute: ViewTemplatesRoute,
   ViewIndexRoute: ViewIndexRoute,
   ViewBlogSlugRoute: ViewBlogSlugRoute,
   ViewCallbackAuthRoute: ViewCallbackAuthRoute,
@@ -1453,11 +1492,13 @@ const ViewRouteRouteChildren: ViewRouteRouteChildren = {
   ViewSolutionProjectManagementRoute: ViewSolutionProjectManagementRoute,
   ViewSolutionRecruitingRoute: ViewSolutionRecruitingRoute,
   ViewSolutionSalesRoute: ViewSolutionSalesRoute,
+  ViewTemplatesSlugRoute: ViewTemplatesSlugRoute,
   ViewVsSlugRoute: ViewVsSlugRoute,
   ViewBlogIndexRoute: ViewBlogIndexRoute,
   ViewChangelogIndexRoute: ViewChangelogIndexRoute,
   ViewDownloadIndexRoute: ViewDownloadIndexRoute,
   ViewLegalIndexRoute: ViewLegalIndexRoute,
+  ViewTemplatesIndexRoute: ViewTemplatesIndexRoute,
 }
 
 const ViewRouteRouteWithChildren = ViewRouteRoute._addFileChildren(
@@ -1478,6 +1519,7 @@ const rootRouteChildren: RootRouteChildren = {
   ApiTemplatesRoute: ApiTemplatesRoute,
   WebhookNangoRoute: WebhookNangoRoute,
   WebhookStripeRoute: WebhookStripeRoute,
+  ApiImagesSplatRoute: ApiImagesSplatRoute,
   ApiTweetIdRoute: ApiTweetIdRoute,
 }
 export const routeTree = rootRouteImport
diff --git a/apps/web/src/routes/_view/templates.tsx b/apps/web/src/routes/_view/templates.tsx
deleted file mode 100644
index fe56c31ac6..0000000000
--- a/apps/web/src/routes/_view/templates.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import { Icon } from "@iconify-icon/react";
-import { createFileRoute } from "@tanstack/react-router";
-import { allTemplates } from "content-collections";
-import { useMemo, useState } from "react";
-
-import { cn } from "@hypr/utils";
-
-import { DownloadButton } from "@/components/download-button";
-import { SlashSeparator } from "@/components/slash-separator";
-
-export const Route = createFileRoute("/_view/templates")({
-  component: Component,
-  head: () => ({
-    meta: [
-      { title: "Meeting Templates - Hyprnote" },
-      {
-        name: "description",
-        content:
-          "Discover our library of AI meeting templates. Get structured summaries for sprint planning, sales calls, 1:1s, and more. Create custom templates for your workflow.",
-      },
-      { property: "og:title", content: "Meeting Templates - Hyprnote" },
-      {
-        property: "og:description",
-        content:
-          "Browse our collection of AI meeting templates. From engineering standups to sales discovery calls, find the perfect template for your meeting type.",
-      },
-      { property: "og:type", content: "website" },
-      { property: "og:url", content: "https://hyprnote.com/templates" },
-    ],
-  }),
-});
-
-function Component() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-
-  const templatesByCategory = getTemplatesByCategory();
-  const categories = Object.keys(templatesByCategory);
-
-  const filteredTemplates = useMemo(() => {
-    let templates = allTemplates;
-
-    // Filter by category
-    if (selectedCategory) {
-      templates = templates.filter((t) => t.category === selectedCategory);
-    }
-
-    // Filter by search query
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      templates = templates.filter(
-        (t) =>
-          t.title.toLowerCase().includes(query) ||
-          t.description.toLowerCase().includes(query) ||
-          t.category.toLowerCase().includes(query),
-      );
-    }
-
-    return templates;
-  }, [searchQuery, selectedCategory]);
-
-  const filteredByCategory = useMemo(() => {
-    return filteredTemplates.reduce(
-      (acc, template) => {
-        const category = template.category;
-        if (!acc[category]) {
-          acc[category] = [];
-        }
-        acc[category].push(template);
-        return acc;
-      },
-      {} as Record<string, typeof allTemplates>,
-    );
-  }, [filteredTemplates]);
-
-  return (
-    <div
-      className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
-      style={{ backgroundImage: "url(/patterns/dots.svg)" }}
-    >
-      <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
-        {/* Hero Section */}
-        <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30">
-          <section className="flex flex-col items-center text-center gap-12 py-24 px-4 laptop:px-0">
-            <div className="space-y-6 max-w-4xl">
-              <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600">
-                Meeting templates for <br className="hidden sm:block" />
-                every conversation
-              </h1>
-              <p className="text-lg sm:text-xl text-neutral-600">
-                Choose from {allTemplates.length} templates to structure your AI
-                summaries. <br className="hidden sm:block" />
-                From sprint planning to sales calls, find the perfect format.
-              </p>
-            </div>
-
-            {/* Search Bar */}
-            <div className="w-full max-w-xs">
-              <div className="relative flex items-center border-2 border-neutral-200 focus-within:border-stone-500 rounded-full overflow-hidden transition-all duration-200">
-                <input
-                  type="text"
-                  placeholder="Search templates..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="flex-1 px-4 py-2.5 text-sm outline-none bg-white text-center placeholder:text-center"
-                />
-              </div>
-            </div>
-
-            {/* Category Chips */}
-            <div className="flex flex-wrap gap-2 justify-center max-w-2xl">
-              <button
-                onClick={() => setSelectedCategory(null)}
-                className={cn([
-                  "px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-                  selectedCategory === null
-                    ? "bg-stone-600 text-white"
-                    : "bg-stone-100 text-stone-600 hover:bg-stone-200",
-                ])}
-              >
-                All
-              </button>
-              {categories.map((category) => (
-                <button
-                  key={category}
-                  onClick={() => setSelectedCategory(category)}
-                  className={cn([
-                    "px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-                    selectedCategory === category
-                      ? "bg-stone-600 text-white"
-                      : "bg-stone-100 text-stone-600 hover:bg-stone-200",
-                  ])}
-                >
-                  {category}
-                </button>
-              ))}
-            </div>
-          </section>
-        </div>
-
-        <SlashSeparator />
-
-        {/* Templates List */}
-        <div className="px-6 py-12 lg:py-20">
-          {/* Templates List */}
-          <section>
-            {filteredTemplates.length === 0 ? (
-              <div className="text-center py-12">
-                <Icon
-                  icon="mdi:file-search"
-                  className="text-6xl text-neutral-300 mb-4 mx-auto"
-                />
-                <p className="text-neutral-600">
-                  No templates found matching your search.
-                </p>
-              </div>
-            ) : (
-              Object.entries(filteredByCategory).map(
-                ([category, templates]) => (
-                  <div key={category} className="mb-12">
-                    <h3 className="text-xl font-serif text-stone-600 mb-6 pb-2 border-b border-neutral-200">
-                      {category}
-                    </h3>
-                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-                      {templates.map((template) => (
-                        <TemplateCard key={template.slug} template={template} />
-                      ))}
-                    </div>
-                  </div>
-                ),
-              )
-            )}
-          </section>
-        </div>
-
-        <SlashSeparator />
-
-        {/* CTA Section */}
-        <section className="py-16 px-6 text-center">
-          <div className="max-w-2xl mx-auto space-y-6">
-            <h2 className="text-3xl sm:text-4xl font-serif text-stone-600">
-              Ready to transform your meetings?
-            </h2>
-            <p className="text-lg text-neutral-600">
-              Download Hyprnote and start using these templates to capture
-              perfect meeting notes with AI.
-            </p>
-            <div className="flex flex-col items-center gap-4 pt-4">
-              <DownloadButton />
-              <p className="text-sm text-neutral-500">
-                Free to use. No credit card required.
-              </p>
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-}
-
-function getTemplatesByCategory() {
-  return allTemplates.reduce(
-    (acc, template) => {
-      const category = template.category;
-      if (!acc[category]) {
-        acc[category] = [];
-      }
-      acc[category].push(template);
-      return acc;
-    },
-    {} as Record<string, typeof allTemplates>,
-  );
-}
-
-function getIconForTemplate(title: string): string {
-  const iconMap: Record<string, string> = {
-    "Daily Standup": "mdi:run-fast",
-    "Sprint Planning": "mdi:calendar-star",
-    "Sprint Retrospective": "mdi:mirror",
-    "Product Roadmap Review": "mdi:road-variant",
-    "Customer Discovery Interview": "mdi:account-search",
-    "Sales Discovery Call": "mdi:phone",
-    "Technical Design Review": "mdi:draw",
-    "Executive Briefing": "mdi:tie",
-    "Board Meeting": "mdi:office-building",
-    "Performance Review": "mdi:chart-line",
-    "Client Kickoff Meeting": "mdi:rocket-launch",
-    "Brainstorming Session": "mdi:lightbulb-on",
-    "Incident Postmortem": "mdi:alert-circle",
-    "Lecture Notes": "mdi:school",
-    "Investor Pitch Meeting": "mdi:cash-multiple",
-    "1:1 Meeting": "mdi:account-multiple",
-    "Project Kickoff": "mdi:flag",
-  };
-  return iconMap[title] || "mdi:file-document";
-}
-
-function TemplateCard({ template }: { template: (typeof allTemplates)[0] }) {
-  const icon = getIconForTemplate(template.title);
-
-  return (
-    <div className="group p-6 border border-neutral-200 rounded-lg bg-white hover:shadow-md hover:border-neutral-300 transition-all">
-      <div className="flex items-start gap-4 mb-4">
-        <div className="shrink-0 w-10 h-10 rounded-lg bg-stone-100 flex items-center justify-center group-hover:bg-stone-200 transition-colors">
-          <Icon icon={icon} className="text-xl text-stone-600" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <h3 className="font-serif text-lg text-stone-600 mb-1 group-hover:text-stone-800 transition-colors">
-            {template.title}
-          </h3>
-          <p className="text-sm text-neutral-600 line-clamp-2">
-            {template.description}
-          </p>
-        </div>
-      </div>
-      <div className="pt-4 border-t border-neutral-100">
-        <div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-2">
-          Sections
-        </div>
-        <div className="flex flex-wrap gap-2">
-          {template.sections.slice(0, 3).map((section) => (
-            <span
-              key={section.title}
-              className="text-xs px-2 py-1 bg-stone-50 text-stone-600 rounded"
-            >
-              {section.title}
-            </span>
-          ))}
-          {template.sections.length > 3 && (
-            <span className="text-xs px-2 py-1 text-neutral-500">
-              +{template.sections.length - 3} more
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/routes/_view/templates/$slug.tsx b/apps/web/src/routes/_view/templates/$slug.tsx
new file mode 100644
index 0000000000..9acb336298
--- /dev/null
+++ b/apps/web/src/routes/_view/templates/$slug.tsx
@@ -0,0 +1,277 @@
+import { MDXContent } from "@content-collections/mdx/react";
+import { Icon } from "@iconify-icon/react";
+import { createFileRoute, Link, notFound } from "@tanstack/react-router";
+import { allTemplates } from "content-collections";
+
+import { cn } from "@hypr/utils";
+
+import { DownloadButton } from "@/components/download-button";
+
+export const Route = createFileRoute("/_view/templates/$slug")({
+  component: Component,
+  loader: async ({ params }) => {
+    const template = allTemplates.find(
+      (template) => template.slug === params.slug,
+    );
+    if (!template) {
+      throw notFound();
+    }
+    return { template };
+  },
+  head: ({ loaderData }) => {
+    const { template } = loaderData!;
+    const url = `https://hyprnote.com/templates/${template.slug}`;
+
+    return {
+      meta: [
+        { title: `${template.title} Template - Hyprnote` },
+        { name: "description", content: template.description },
+        { property: "og:title", content: `${template.title} Template` },
+        { property: "og:description", content: template.description },
+        { property: "og:type", content: "website" },
+        { property: "og:url", content: url },
+        { name: "twitter:card", content: "summary" },
+        { name: "twitter:title", content: `${template.title} Template` },
+        { name: "twitter:description", content: template.description },
+      ],
+    };
+  },
+});
+
+function Component() {
+  const { template } = Route.useLoaderData();
+
+  return (
+    <div className="min-h-screen">
+      <div className="min-h-screen max-w-6xl mx-auto border-x border-neutral-100 bg-white">
+        <div className="flex">
+          <LeftSidebar template={template} />
+          <MainContent template={template} />
+          <RightSidebar />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LeftSidebar({ template }: { template: (typeof allTemplates)[0] }) {
+  return (
+    <aside className="hidden lg:block w-64 shrink-0">
+      <div className="sticky top-[69px] max-h-[calc(100vh-69px)] overflow-y-auto px-4 pt-6 pb-18 scrollbar-hide">
+        <Link
+          to="/templates"
+          className="inline-flex items-center gap-2 text-sm text-neutral-600 hover:text-stone-600 transition-colors mb-6 font-serif"
+        >
+          <Icon icon="mdi:arrow-left" className="text-base" />
+          <span>Back to templates</span>
+        </Link>
+
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
+              Category
+            </h3>
+            <Link
+              to="/templates"
+              search={{ category: template.category }}
+              className="text-sm text-stone-600 hover:text-stone-800 transition-colors"
+            >
+              {template.category}
+            </Link>
+          </div>
+
+          <div>
+            <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
+              On this page
+            </h3>
+            <nav className="space-y-1">
+              <a
+                href="#content"
+                className="block text-sm text-neutral-500 hover:text-stone-600 py-1 transition-colors"
+              >
+                Structure
+              </a>
+              <a
+                href="#examples"
+                className="block text-sm text-neutral-500 hover:text-stone-600 py-1 transition-colors"
+              >
+                Examples
+              </a>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function MainContent({ template }: { template: (typeof allTemplates)[0] }) {
+  return (
+    <main className="flex-1 min-w-0 pb-6 px-4 lg:px-8 py-6">
+      <div className="lg:hidden mb-6">
+        <Link
+          to="/templates"
+          className="inline-flex items-center gap-2 text-sm text-neutral-600 hover:text-stone-600 transition-colors font-serif"
+        >
+          <Icon icon="mdi:arrow-left" className="text-base" />
+          <span>Back to templates</span>
+        </Link>
+      </div>
+
+      <TemplateHeader template={template} />
+      <TemplateContent template={template} />
+      <ExamplesSection />
+      <SuggestedTemplates template={template} />
+      <TemplateFooter />
+    </main>
+  );
+}
+
+function TemplateHeader({ template }: { template: (typeof allTemplates)[0] }) {
+  return (
+    <header id="overview" className="mb-8 lg:mb-12 scroll-mt-20">
+      <div className="lg:hidden mb-4">
+        <span className="text-sm text-neutral-500">{template.category}</span>
+      </div>
+      <h1 className="text-2xl sm:text-3xl lg:text-4xl font-serif text-stone-600 mb-4">
+        {template.title}
+      </h1>
+      <p className="text-lg lg:text-xl text-neutral-600 leading-relaxed mb-6">
+        {template.description}
+      </p>
+
+      <div className="flex flex-wrap gap-2">
+        {template.targets.map((target) => (
+          <span
+            key={target}
+            className="text-sm px-3 py-1 bg-stone-50 text-stone-600 rounded-full border border-stone-100"
+          >
+            {target}
+          </span>
+        ))}
+      </div>
+    </header>
+  );
+}
+
+function TemplateContent({ template }: { template: (typeof allTemplates)[0] }) {
+  return (
+    <section id="content" className="scroll-mt-20">
+      <h2 className="text-xl font-serif text-stone-700 mb-4">Structure</h2>
+      <div className="border border-neutral-200 rounded-sm px-6 lg:px-8 pt-3 lg:pt-4 pb-6 lg:pb-8 bg-white">
+        <div className="prose prose-stone prose-headings:font-mono prose-headings:font-semibold prose-h2:text-lg prose-h2:mt-6 prose-h2:mb-3 prose-p:text-neutral-600 max-w-none">
+          <MDXContent code={template.mdx} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ExamplesSection() {
+  return (
+    <section id="examples" className="mt-12 scroll-mt-20">
+      <h2 className="text-xl font-serif text-stone-700 mb-4">Examples</h2>
+      <div className="border border-neutral-200 rounded-sm p-6 lg:p-8 bg-white">
+        <p className="text-neutral-500 text-center py-8">
+          Examples coming soon
+        </p>
+      </div>
+    </section>
+  );
+}
+
+function SuggestedTemplates({
+  template,
+}: {
+  template: (typeof allTemplates)[0];
+}) {
+  const suggestedTemplates = allTemplates.filter(
+    (t) => t.category === template.category && t.slug !== template.slug,
+  );
+
+  if (suggestedTemplates.length === 0) return null;
+
+  return (
+    <section className="mt-12">
+      <h2 className="text-xl font-serif text-stone-700 mb-4">
+        Other {template.category} templates
+      </h2>
+      <div className="grid gap-4">
+        {suggestedTemplates.map((t) => (
+          <Link
+            key={t.slug}
+            to="/templates/$slug"
+            params={{ slug: t.slug }}
+            className="group p-4 border border-neutral-200 rounded-sm bg-white hover:shadow-md hover:border-neutral-300 transition-all"
+          >
+            <h3 className="font-serif text-lg text-stone-600 mb-1 group-hover:text-stone-800 transition-colors">
+              {t.title}
+            </h3>
+            <p className="text-sm text-neutral-600 line-clamp-2">
+              {t.description}
+            </p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function TemplateFooter() {
+  return (
+    <footer className="mt-12 pt-8 border-t border-neutral-100">
+      <Link
+        to="/templates"
+        className="inline-flex items-center gap-2 text-neutral-600 hover:text-stone-600 transition-colors font-medium"
+      >
+        <span>&larr;</span>
+        <span>View all templates</span>
+      </Link>
+    </footer>
+  );
+}
+
+function RightSidebar() {
+  return (
+    <aside className="hidden sm:block w-80 shrink-0">
+      <div className="sticky top-[69px] space-y-4 px-4 py-6">
+        <div className="border border-neutral-200 rounded-sm overflow-hidden bg-white bg-[linear-gradient(to_right,#f5f5f5_1px,transparent_1px),linear-gradient(to_bottom,#f5f5f5_1px,transparent_1px)] bg-size-[24px_24px] bg-position-[12px_12px,12px_12px] p-6 text-center">
+          <h3 className="font-serif text-lg text-stone-600 mb-3">
+            Use this template
+          </h3>
+          <p className="text-sm text-neutral-600 mb-6">
+            Download Hyprnote to use this template and get AI-powered meeting
+            notes.
+          </p>
+          <DownloadButton />
+          <p className="text-xs text-neutral-500 mt-4">
+            Free to use. No credit card required.
+          </p>
+        </div>
+
+        <div className="border border-dashed border-neutral-300 rounded-sm p-6 bg-stone-50/50 text-center">
+          <h3 className="font-serif text-lg text-stone-600 mb-3">
+            Contribute a template
+          </h3>
+          <p className="text-sm text-neutral-600 mb-6">
+            Have a template idea? Submit a PR and help the community.
+          </p>
+          <a
+            href="https://github.com/fastrepl/hyprnote/tree/main/apps/web/content/templates"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn([
+              "group px-6 h-12 inline-flex items-center justify-center gap-2 w-fit",
+              "bg-linear-to-t from-neutral-800 to-neutral-700 text-white rounded-full",
+              "shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%]",
+              "transition-all cursor-pointer text-base sm:text-lg",
+            ])}
+          >
+            <Icon icon="mdi:github" className="text-xl" />
+            Open on GitHub
+          </a>
+        </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/apps/web/src/routes/_view/templates/index.tsx b/apps/web/src/routes/_view/templates/index.tsx
new file mode 100644
index 0000000000..2d1caf3542
--- /dev/null
+++ b/apps/web/src/routes/_view/templates/index.tsx
@@ -0,0 +1,603 @@
+import { MDXContent } from "@content-collections/mdx/react";
+import { Icon } from "@iconify-icon/react";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { allTemplates } from "content-collections";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { cn } from "@hypr/utils";
+
+import { DownloadButton } from "@/components/download-button";
+import { SlashSeparator } from "@/components/slash-separator";
+
+type TemplatesSearch = {
+  category?: string;
+};
+
+export const Route = createFileRoute("/_view/templates/")({
+  component: Component,
+  validateSearch: (search: Record<string, unknown>): TemplatesSearch => {
+    return {
+      category:
+        typeof search.category === "string" ? search.category : undefined,
+    };
+  },
+  head: () => ({
+    meta: [
+      { title: "Meeting Templates - Hyprnote" },
+      {
+        name: "description",
+        content:
+          "Discover our library of AI meeting templates. Get structured summaries for sprint planning, sales calls, 1:1s, and more. Create custom templates for your workflow.",
+      },
+      { property: "og:title", content: "Meeting Templates - Hyprnote" },
+      {
+        property: "og:description",
+        content:
+          "Browse our collection of AI meeting templates. From engineering standups to sales discovery calls, find the perfect template for your meeting type.",
+      },
+      { property: "og:type", content: "website" },
+      { property: "og:url", content: "https://hyprnote.com/templates" },
+    ],
+  }),
+});
+
+function Component() {
+  const navigate = useNavigate({ from: Route.fullPath });
+  const search = Route.useSearch();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTemplate, setSelectedTemplate] = useState<
+    (typeof allTemplates)[0] | null
+  >(null);
+
+  const selectedCategory = search.category || null;
+
+  const setSelectedCategory = (category: string | null) => {
+    navigate({ search: category ? { category } : {}, resetScroll: false });
+  };
+
+  const handleTemplateClick = (template: (typeof allTemplates)[0]) => {
+    setSelectedTemplate(template);
+    window.history.pushState({}, "", `/templates/${template.slug}`);
+  };
+
+  const handleModalClose = useCallback(() => {
+    setSelectedTemplate(null);
+    const url = selectedCategory
+      ? `/templates?category=${encodeURIComponent(selectedCategory)}`
+      : "/templates";
+    window.history.pushState({}, "", url);
+  }, [selectedCategory]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && selectedTemplate) {
+        handleModalClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedTemplate, handleModalClose]);
+
+  useEffect(() => {
+    if (selectedTemplate) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [selectedTemplate]);
+
+  const templatesByCategory = getTemplatesByCategory();
+  const categories = Object.keys(templatesByCategory);
+
+  const filteredTemplates = useMemo(() => {
+    let templates = allTemplates;
+
+    if (selectedCategory) {
+      templates = templates.filter((t) => t.category === selectedCategory);
+    }
+
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      templates = templates.filter(
+        (t) =>
+          t.title.toLowerCase().includes(query) ||
+          t.description.toLowerCase().includes(query) ||
+          t.category.toLowerCase().includes(query),
+      );
+    }
+
+    return templates;
+  }, [searchQuery, selectedCategory]);
+
+  return (
+    <div
+      className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
+      style={{ backgroundImage: "url(/patterns/dots.svg)" }}
+    >
+      <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
+        <ContributeBanner />
+        <HeroSection
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+        />
+        <QuoteSection />
+        <MobileCategoriesSection
+          categories={categories}
+          selectedCategory={selectedCategory}
+          setSelectedCategory={setSelectedCategory}
+        />
+        <TemplatesSection
+          categories={categories}
+          selectedCategory={selectedCategory}
+          setSelectedCategory={setSelectedCategory}
+          templatesByCategory={templatesByCategory}
+          filteredTemplates={filteredTemplates}
+          onTemplateClick={handleTemplateClick}
+        />
+        <SlashSeparator />
+        <CTASection />
+      </div>
+
+      {selectedTemplate && (
+        <TemplateModal template={selectedTemplate} onClose={handleModalClose} />
+      )}
+    </div>
+  );
+}
+
+function ContributeBanner() {
+  return (
+    <a
+      href="https://github.com/fastrepl/hyprnote/tree/main/apps/web/content/templates"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn([
+        "group flex items-center justify-center gap-2 text-center cursor-pointer",
+        "bg-stone-50/70 border-b border-stone-100 hover:bg-stone-100/70",
+        "py-3 px-4",
+        "font-serif text-sm text-stone-700",
+        "transition-colors",
+      ])}
+    >
+      <Icon icon="mdi:github" className="text-base" />
+      <span>
+        <strong>Community-driven:</strong> Have a template idea?{" "}
+        <span className="group-hover:underline group-hover:decoration-dotted group-hover:underline-offset-2">
+          Contribute on GitHub
+        </span>
+      </span>
+    </a>
+  );
+}
+
+function HeroSection({
+  searchQuery,
+  setSearchQuery,
+}: {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+}) {
+  return (
+    <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30">
+      <section className="flex flex-col items-center text-center gap-8 py-24 px-4 laptop:px-0">
+        <div className="space-y-6 max-w-3xl">
+          <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600">
+            Templates
+          </h1>
+          <p className="text-lg sm:text-xl text-neutral-600">
+            Different conversations need different approaches. Templates are AI
+            instructions that capture best practices for each meeting type —
+            plug them in and get structured notes instantly.
+          </p>
+        </div>
+
+        <div className="w-full max-w-xs">
+          <div className="relative flex items-center border-2 border-neutral-200 focus-within:border-stone-500 rounded-full overflow-hidden transition-all duration-200">
+            <input
+              type="text"
+              placeholder="Search templates..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="flex-1 px-4 py-2.5 text-sm outline-none bg-white text-center placeholder:text-center"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function QuoteSection() {
+  return (
+    <div className="py-4 px-4 text-center border-y border-neutral-100 bg-white bg-[linear-gradient(to_right,#f5f5f5_1px,transparent_1px),linear-gradient(to_bottom,#f5f5f5_1px,transparent_1px)] bg-size-[24px_24px] bg-position-[12px_12px,12px_12px]">
+      <p className="text-base text-stone-600 font-serif italic">
+        "Curated by Hyprnote and the community"
+      </p>
+    </div>
+  );
+}
+
+function MobileCategoriesSection({
+  categories,
+  selectedCategory,
+  setSelectedCategory,
+}: {
+  categories: string[];
+  selectedCategory: string | null;
+  setSelectedCategory: (category: string | null) => void;
+}) {
+  return (
+    <div className="lg:hidden border-b border-neutral-100 bg-stone-50">
+      <div className="flex overflow-x-auto scrollbar-hide">
+        <button
+          onClick={() => setSelectedCategory(null)}
+          className={cn([
+            "px-5 py-3 text-sm font-medium transition-colors whitespace-nowrap shrink-0 border-r border-neutral-100 cursor-pointer",
+            selectedCategory === null
+              ? "bg-stone-600 text-white"
+              : "text-stone-600 hover:bg-stone-100",
+          ])}
+        >
+          All
+        </button>
+        {categories.map((category) => (
+          <button
+            key={category}
+            onClick={() => setSelectedCategory(category)}
+            className={cn([
+              "px-5 py-3 text-sm font-medium transition-colors whitespace-nowrap shrink-0 border-r border-neutral-100 last:border-r-0 cursor-pointer",
+              selectedCategory === category
+                ? "bg-stone-600 text-white"
+                : "text-stone-600 hover:bg-stone-100",
+            ])}
+          >
+            {category}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TemplatesSection({
+  categories,
+  selectedCategory,
+  setSelectedCategory,
+  templatesByCategory,
+  filteredTemplates,
+  onTemplateClick,
+}: {
+  categories: string[];
+  selectedCategory: string | null;
+  setSelectedCategory: (category: string | null) => void;
+  templatesByCategory: Record<string, typeof allTemplates>;
+  filteredTemplates: typeof allTemplates;
+  onTemplateClick: (template: (typeof allTemplates)[0]) => void;
+}) {
+  return (
+    <div className="px-6 pt-8 pb-12 lg:pt-12 lg:pb-20">
+      <div className="flex gap-8">
+        <DesktopSidebar
+          categories={categories}
+          selectedCategory={selectedCategory}
+          setSelectedCategory={setSelectedCategory}
+          templatesByCategory={templatesByCategory}
+        />
+        <TemplatesGrid
+          filteredTemplates={filteredTemplates}
+          onTemplateClick={onTemplateClick}
+        />
+      </div>
+    </div>
+  );
+}
+
+function DesktopSidebar({
+  categories,
+  selectedCategory,
+  setSelectedCategory,
+  templatesByCategory,
+}: {
+  categories: string[];
+  selectedCategory: string | null;
+  setSelectedCategory: (category: string | null) => void;
+  templatesByCategory: Record<string, typeof allTemplates>;
+}) {
+  return (
+    <aside className="hidden lg:block w-56 shrink-0">
+      <div className="sticky top-[85px]">
+        <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
+          Categories
+        </h3>
+        <nav className="space-y-1">
+          <button
+            onClick={() => setSelectedCategory(null)}
+            className={cn([
+              "w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer",
+              selectedCategory === null
+                ? "bg-stone-100 text-stone-800"
+                : "text-stone-600 hover:bg-stone-50",
+            ])}
+          >
+            All Templates
+            <span className="ml-2 text-xs text-neutral-400">
+              ({allTemplates.length})
+            </span>
+          </button>
+          {categories.map((category) => (
+            <button
+              key={category}
+              onClick={() => setSelectedCategory(category)}
+              className={cn([
+                "w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer",
+                selectedCategory === category
+                  ? "bg-stone-100 text-stone-800"
+                  : "text-stone-600 hover:bg-stone-50",
+              ])}
+            >
+              {category}
+              <span className="ml-2 text-xs text-neutral-400">
+                ({templatesByCategory[category].length})
+              </span>
+            </button>
+          ))}
+        </nav>
+      </div>
+    </aside>
+  );
+}
+
+function TemplatesGrid({
+  filteredTemplates,
+  onTemplateClick,
+}: {
+  filteredTemplates: typeof allTemplates;
+  onTemplateClick: (template: (typeof allTemplates)[0]) => void;
+}) {
+  if (filteredTemplates.length === 0) {
+    return (
+      <section className="flex-1 min-w-0">
+        <div className="text-center py-12">
+          <Icon
+            icon="mdi:file-search"
+            className="text-6xl text-neutral-300 mb-4 mx-auto"
+          />
+          <p className="text-neutral-600">
+            No templates found matching your search.
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="flex-1 min-w-0">
+      <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
+        {filteredTemplates.map((template) => (
+          <TemplateCard
+            key={template.slug}
+            template={template}
+            onClick={() => onTemplateClick(template)}
+          />
+        ))}
+        <ContributeCard />
+      </div>
+    </section>
+  );
+}
+
+function TemplateCard({
+  template,
+  onClick,
+}: {
+  template: (typeof allTemplates)[0];
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="group p-4 border border-neutral-200 rounded-sm bg-white hover:shadow-md hover:border-neutral-300 transition-all text-left cursor-pointer flex flex-col items-start"
+    >
+      <div className="mb-4">
+        <h3 className="font-serif text-lg text-stone-600 mb-1 group-hover:text-stone-800 transition-colors">
+          {template.title}
+        </h3>
+        <p className="text-sm text-neutral-600 line-clamp-2">
+          {template.description}
+        </p>
+      </div>
+      <div className="pt-4 border-t border-neutral-100 w-full">
+        <div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-2">
+          For
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {template.targets.slice(0, 3).map((target) => (
+            <span
+              key={target}
+              className="text-xs px-2 py-1 bg-stone-50 text-stone-600 rounded"
+            >
+              {target}
+            </span>
+          ))}
+          {template.targets.length > 3 && (
+            <span className="text-xs px-2 py-1 text-neutral-500">
+              +{template.targets.length - 3} more
+            </span>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function ContributeCard() {
+  return (
+    <div className="p-4 border border-dashed border-neutral-300 rounded-sm bg-stone-50/50 flex flex-col items-center justify-center text-center">
+      <h3 className="font-serif text-lg text-stone-600 mb-2">
+        Contribute a template
+      </h3>
+      <p className="text-sm text-neutral-500 mb-4">
+        Have a template idea? Submit a PR and help the community.
+      </p>
+      <a
+        href="https://github.com/fastrepl/hyprnote/tree/main/apps/web/content/templates"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn([
+          "group px-4 h-10 inline-flex items-center justify-center gap-2 w-fit",
+          "bg-linear-to-t from-neutral-800 to-neutral-700 text-white rounded-full",
+          "shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%]",
+          "transition-all cursor-pointer text-sm",
+        ])}
+      >
+        <Icon icon="mdi:github" className="text-base" />
+        Open on GitHub
+      </a>
+    </div>
+  );
+}
+
+function CTASection() {
+  return (
+    <section className="py-16 px-6 text-center">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <h2 className="text-3xl sm:text-4xl font-serif text-stone-600">
+          Ready to transform your meetings?
+        </h2>
+        <p className="text-lg text-neutral-600">
+          Download Hyprnote and start using these templates to capture perfect
+          meeting notes with AI.
+        </p>
+        <div className="flex flex-col items-center gap-4 pt-4">
+          <DownloadButton />
+          <p className="text-sm text-neutral-500">
+            Free to use. No credit card required.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TemplateModal({
+  template,
+  onClose,
+}: {
+  template: (typeof allTemplates)[0];
+  onClose: () => void;
+}) {
+  return (
+    <div className="fixed inset-0 z-50">
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="absolute inset-4 sm:inset-8 lg:inset-16 flex items-start justify-center overflow-y-auto">
+        <div
+          className={cn([
+            "relative w-full max-w-2xl my-8",
+            "bg-[url('/api/images/texture/white-leather.png')]",
+            "rounded-sm shadow-2xl",
+          ])}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div
+            className={cn([
+              "absolute inset-0 rounded-sm",
+              "bg-[url('/api/images/texture/paper.png')] opacity-30",
+            ])}
+          />
+          <div className="relative">
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-white/80 hover:bg-white text-stone-600 hover:text-stone-800 transition-colors cursor-pointer z-10"
+            >
+              <Icon icon="mdi:close" className="text-lg" />
+            </button>
+
+            <div className="p-6 sm:p-8">
+              <div className="mb-2">
+                <span className="text-xs font-medium text-stone-500 uppercase tracking-wider">
+                  {template.category}
+                </span>
+              </div>
+              <h2 className="font-serif text-2xl sm:text-3xl text-stone-700 mb-3">
+                {template.title}
+              </h2>
+              <p className="text-neutral-600 mb-4">{template.description}</p>
+
+              <div className="flex flex-wrap gap-2 mb-6">
+                {template.targets.map((target) => (
+                  <span
+                    key={target}
+                    className="text-xs px-2 py-1 bg-white/80 text-stone-600 rounded border border-stone-200/50"
+                  >
+                    {target}
+                  </span>
+                ))}
+              </div>
+
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-sm font-semibold text-stone-600 uppercase tracking-wider mb-3">
+                    Template Sections
+                  </h3>
+                  <div className="space-y-3">
+                    {template.sections.map((section, index) => (
+                      <div
+                        key={section.title}
+                        className="p-3 rounded-lg bg-white/80 border border-stone-200/50"
+                      >
+                        <div className="flex items-center gap-3 mb-1">
+                          <span className="w-5 h-5 rounded-full bg-stone-200 text-stone-600 text-xs font-medium flex items-center justify-center">
+                            {index + 1}
+                          </span>
+                          <h4 className="font-medium text-stone-700 text-sm">
+                            {section.title}
+                          </h4>
+                        </div>
+                        <p className="text-xs text-neutral-600 ml-8">
+                          {section.description}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="prose prose-stone prose-sm prose-headings:font-serif prose-headings:font-semibold prose-h2:text-base prose-h2:mt-6 prose-h2:mb-3 prose-p:text-neutral-600 prose-p:text-sm max-w-none">
+                  <MDXContent code={template.mdx} />
+                </div>
+              </div>
+
+              <div className="mt-8 pt-6 border-t border-stone-200/50">
+                <div className="flex flex-col sm:flex-row items-center gap-4">
+                  <DownloadButton />
+                  <p className="text-sm text-neutral-500 text-center sm:text-left">
+                    Download Hyprnote to use this template
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function getTemplatesByCategory() {
+  return allTemplates.reduce(
+    (acc, template) => {
+      const category = template.category;
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category].push(template);
+      return acc;
+    },
+    {} as Record<string, typeof allTemplates>,
+  );
+}