diff --git a/frontend/src/pages/archive/crawl-templates-list.ts b/frontend/src/pages/archive/crawl-templates-list.ts
new file mode 100644
index 00000000..1ea44b02
--- /dev/null
+++ b/frontend/src/pages/archive/crawl-templates-list.ts
@@ -0,0 +1,49 @@
+import { state, property } from "lit/decorators.js";
+import { msg, localized, str } from "@lit/localize";
+
+import type { AuthState } from "../../utils/AuthService";
+import LiteElement, { html } from "../../utils/LiteElement";
+import type { CrawlTemplate } from "./types";
+
+/**
+ * Usage:
+ * ```ts
+ * <btrix-crawl-templates-list></btrix-crawl-templates-list>
+ * ```
+ */
+@localized()
+export class CrawlTemplatesList extends LiteElement {
+  @property({ type: Object })
+  authState!: AuthState;
+
+  @property({ type: String })
+  archiveId!: string;
+
+  @property({ type: Array })
+  crawlTemplates?: CrawlTemplate[];
+
+  @state()
+  private serverError?: string;
+
+  render() {
+    return html`
+      <div class="text-center">
+        <sl-button
+          @click=${() =>
+            this.navTo(`/archives/${this.archiveId}/crawl-templates/new`)}
+        >
+          <sl-icon slot="prefix" name="plus-square-dotted"></sl-icon>
+          ${msg("Create new crawl template")}
+        </sl-button>
+      </div>
+
+      <div>
+        ${this.crawlTemplates?.map(
+          (template) => html`<div>${template.id}</div>`
+        )}
+      </div>
+    `;
+  }
+}
+
+customElements.define("btrix-crawl-templates-list", CrawlTemplatesList);
diff --git a/frontend/src/pages/archive/crawl-templates.ts b/frontend/src/pages/archive/crawl-templates-new.ts
similarity index 93%
rename from frontend/src/pages/archive/crawl-templates.ts
rename to frontend/src/pages/archive/crawl-templates-new.ts
index c43db112..9624c002 100644
--- a/frontend/src/pages/archive/crawl-templates.ts
+++ b/frontend/src/pages/archive/crawl-templates-new.ts
@@ -5,19 +5,7 @@ import cronParser from "cron-parser";
 import type { AuthState } from "../../utils/AuthService";
 import LiteElement, { html } from "../../utils/LiteElement";
 import { getLocaleTimeZone } from "../../utils/localization";
-
-type CrawlTemplate = {
-  id?: string;
-  name: string;
-  schedule: string;
-  runNow: boolean;
-  crawlTimeout?: number;
-  config: {
-    seeds: string[];
-    scopeType?: string;
-    limit?: number;
-  };
-};
+import type { CrawlTemplate } from "./types";
 
 const initialValues = {
   name: "",
@@ -39,20 +27,20 @@ const minutes = Array.from({ length: 60 }).map((x, i) => ({
   label: `${i}`.padStart(2, "0"),
 }));
 
+/**
+ * Usage:
+ * ```ts
+ * <btrix-crawl-templates-new></btrix-crawl-templates-new>
+ * ```
+ */
 @localized()
-export class CrawlTemplates extends LiteElement {
+export class CrawlTemplatesNew extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
 
   @property({ type: String })
   archiveId!: string;
 
-  @property({ type: Boolean })
-  isNew!: boolean;
-
-  @property({ type: Array })
-  crawlTemplates?: CrawlTemplate[];
-
   @state()
   private isRunNow: boolean = initialValues.runNow;
 
@@ -115,23 +103,15 @@ export class CrawlTemplates extends LiteElement {
   }
 
   render() {
-    if (this.isNew) {
-      return this.renderNew();
-    }
-
-    return this.renderList();
-  }
-
-  private renderNew() {
     return html`
-      <h2 class="text-xl font-bold">${msg("New Crawl Template")}</h2>
+      <h2 class="text-xl font-bold mb-3">${msg("New Crawl Template")}</h2>
       <p>
         ${msg(
           "Configure a new crawl template. You can choose to run a crawl immediately upon saving this template."
         )}
       </p>
 
-      <main class="mt-4">
+      <main class="mt-6">
         <div class="border rounded-lg">
           <sl-form @sl-submit=${this.onSubmit} aria-describedby="formError">
             <div class="md:grid grid-cols-4">
@@ -184,26 +164,6 @@ export class CrawlTemplates extends LiteElement {
     `;
   }
 
-  private renderList() {
-    return html`
-      <div class="text-center">
-        <sl-button
-          @click=${() =>
-            this.navTo(`/archives/${this.archiveId}/crawl-templates/new`)}
-        >
-          <sl-icon slot="prefix" name="plus-square-dotted"></sl-icon>
-          ${msg("Create new crawl template")}
-        </sl-button>
-      </div>
-
-      <div>
-        ${this.crawlTemplates?.map(
-          (template) => html`<div>${template.id}</div>`
-        )}
-      </div>
-    `;
-  }
-
   private renderBasicSettings() {
     return html`
       <div class="col-span-1 p-4 md:p-8 md:border-b">
@@ -605,3 +565,5 @@ export class CrawlTemplates extends LiteElement {
     return schedule;
   }
 }
+
+customElements.define("btrix-crawl-templates-new", CrawlTemplatesNew);
diff --git a/frontend/src/pages/archive/index.ts b/frontend/src/pages/archive/index.ts
index 6d8b4720..e9848d33 100644
--- a/frontend/src/pages/archive/index.ts
+++ b/frontend/src/pages/archive/index.ts
@@ -7,12 +7,11 @@ import type { ArchiveData } from "../../utils/archives";
 import LiteElement, { html } from "../../utils/LiteElement";
 import { needLogin } from "../../utils/auth";
 import { isOwner } from "../../utils/archives";
-import { CrawlTemplates } from "./crawl-templates";
-
-customElements.define("btrix-crawl-templates", CrawlTemplates);
+import type { CrawlTemplate } from "./types";
+import "./crawl-templates-list";
+import "./crawl-templates-new";
 
 export type ArchiveTab = "crawl-templates" | "settings" | "members";
-type CrawlTemplate = any; // TODO
 
 const defaultTab = "settings";
 
@@ -153,16 +152,34 @@ export class Archive extends LiteElement {
   }
 
   private renderCrawlTemplates() {
-    if (!this.isNewResourceTab && !this.crawlTemplates) {
-      return html` TODO `;
+    if (this.isNewResourceTab) {
+      return html`
+        <div class="md:grid grid-cols-6 gap-5">
+          <nav class="col-span-1 mb-6">
+            <a
+              class="font-medium text-sm text-primary hover:opacity-80 flex items-center"
+              href=${`/archives/${this.archiveId}/crawl-templates`}
+              @click=${this.navLink}
+              ><sl-icon class="mr-1" name="arrow-left"></sl-icon> ${msg(
+                "Back to list"
+              )}</a
+            >
+          </nav>
+
+          <btrix-crawl-templates-new
+            class="col-span-5 mt-6"
+            .authState=${this.authState!}
+            .archiveId=${this.archiveId!}
+          ></btrix-crawl-templates-new>
+        </div>
+      `;
     }
 
-    return html`<btrix-crawl-templates
+    return html`<btrix-crawl-templates-list
       .authState=${this.authState!}
       .archiveId=${this.archiveId!}
       .crawlTemplates=${this.crawlTemplates}
-      .isNew=${this.isNewResourceTab}
-    ></btrix-crawl-templates>`;
+    ></btrix-crawl-templates-list>`;
   }
 
   private renderMembers() {
diff --git a/frontend/src/pages/archive/types.ts b/frontend/src/pages/archive/types.ts
new file mode 100644
index 00000000..a230f6ca
--- /dev/null
+++ b/frontend/src/pages/archive/types.ts
@@ -0,0 +1,12 @@
+export type CrawlTemplate = {
+  id?: string;
+  name: string;
+  schedule: string;
+  runNow: boolean;
+  crawlTimeout?: number;
+  config: {
+    seeds: string[];
+    scopeType?: string;
+    limit?: number;
+  };
+};