diff --git a/packages/frontend/core/src/desktop/dialogs/import-template/index.tsx b/packages/frontend/core/src/desktop/dialogs/import-template/index.tsx
index 388ac6c6acaf7..ec647f18e29e8 100644
--- a/packages/frontend/core/src/desktop/dialogs/import-template/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/import-template/index.tsx
@@ -206,6 +206,7 @@ const Dialog = ({
           loading={disabled}
           disabled={disabled}
           onClick={handleImportToSelectedWorkspace}
+          data-testid="import-template-to-workspace-btn"
         >
           {selectedWorkspaceName &&
             t['com.affine.import-template.dialog.createDocToWorkspace']({
diff --git a/packages/frontend/core/src/desktop/pages/import-template/index.tsx b/packages/frontend/core/src/desktop/pages/import-template/index.tsx
index 48f2634df654e..1bdd85e0b3081 100644
--- a/packages/frontend/core/src/desktop/pages/import-template/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/import-template/index.tsx
@@ -16,11 +16,15 @@ export const Component = () => {
   const [searchParams] = useSearchParams();
   const { jumpToIndex } = useNavigateHelper();
   useEffect(() => {
-    globalDialogService.open('import-template', {
+    const id = globalDialogService.open('import-template', {
       templateName: searchParams.get('name') ?? '',
       templateMode: (searchParams.get('mode') as DocMode) ?? 'page',
       snapshotUrl: searchParams.get('snapshotUrl') ?? '',
     });
+
+    return () => {
+      globalDialogService.close(id);
+    };
   }, [globalDialogService, jumpToIndex, searchParams]);
   // no ui for this route, just open the dialog
   return null;
diff --git a/packages/frontend/core/src/modules/import-template/index.ts b/packages/frontend/core/src/modules/import-template/index.ts
index b8c86069cd96b..04836fe4b1589 100644
--- a/packages/frontend/core/src/modules/import-template/index.ts
+++ b/packages/frontend/core/src/modules/import-template/index.ts
@@ -1,6 +1,6 @@
 import { type Framework } from '@toeverything/infra';
 
-import { FetchService } from '../cloud';
+import { RawFetchProvider } from '../cloud';
 import { WorkspacesService } from '../workspace';
 import { ImportTemplateDialog } from './entities/dialog';
 import { TemplateDownloader } from './entities/downloader';
@@ -16,6 +16,6 @@ export function configureImportTemplateModule(framework: Framework) {
     .entity(ImportTemplateDialog)
     .service(TemplateDownloaderService)
     .entity(TemplateDownloader, [TemplateDownloaderStore])
-    .store(TemplateDownloaderStore, [FetchService])
+    .store(TemplateDownloaderStore, [RawFetchProvider])
     .service(ImportTemplateService, [WorkspacesService]);
 }
diff --git a/packages/frontend/core/src/modules/import-template/store/downloader.ts b/packages/frontend/core/src/modules/import-template/store/downloader.ts
index de3ed824e56ca..0c655cf02d9a8 100644
--- a/packages/frontend/core/src/modules/import-template/store/downloader.ts
+++ b/packages/frontend/core/src/modules/import-template/store/downloader.ts
@@ -1,14 +1,14 @@
 import { Store } from '@toeverything/infra';
 
-import type { FetchService } from '../../cloud';
+import type { RawFetchProvider } from '../../cloud';
 
 export class TemplateDownloaderStore extends Store {
-  constructor(private readonly fetchService: FetchService) {
+  constructor(private readonly fetchProvider: RawFetchProvider) {
     super();
   }
 
   async download(snapshotUrl: string) {
-    const response = await this.fetchService.fetch(snapshotUrl, {
+    const response = await this.fetchProvider.fetch(snapshotUrl, {
       priority: 'high',
     } as any);
     const arrayBuffer = await response.arrayBuffer();
diff --git a/tests/affine-cloud/e2e/template.spec.ts b/tests/affine-cloud/e2e/template.spec.ts
new file mode 100644
index 0000000000000..573bd0ba625ae
--- /dev/null
+++ b/tests/affine-cloud/e2e/template.spec.ts
@@ -0,0 +1,33 @@
+import { test } from '@affine-test/kit/playwright';
+import { createRandomUser, loginUser } from '@affine-test/kit/utils/cloud';
+import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
+
+test.beforeEach(async ({ page }) => {
+  const user = await createRandomUser();
+  await loginUser(page, user);
+});
+
+test('import from template should work', async ({ page }) => {
+  await page.goto('https://affine.pro/templates', { waitUntil: 'load' });
+
+  await page.click('.template-list > a:first-child');
+  const importLink = page.getByText('Use this template');
+
+  const href = await importLink.evaluate((el: HTMLElement) => {
+    const a = el.closest('a');
+    if (!a) {
+      throw new Error('Import link not found');
+    }
+    return a.href;
+  });
+
+  const url = new URL(href);
+
+  await page.goto(url.pathname + url.search);
+
+  const btn = page.getByTestId('import-template-to-workspace-btn');
+
+  await btn.isVisible();
+  btn.click();
+  await waitForEditorLoad(page);
+});