diff --git a/packages/backend/src/apis/quadlet-api-impl.ts b/packages/backend/src/apis/quadlet-api-impl.ts
index 75e6eb76..a8e6f9fc 100644
--- a/packages/backend/src/apis/quadlet-api-impl.ts
+++ b/packages/backend/src/apis/quadlet-api-impl.ts
@@ -11,6 +11,7 @@ import type { PodmanService } from '../services/podman-service';
 import type { ProviderService } from '../services/provider-service';
 import type { LoggerService } from '../services/logger-service';
 import type { SynchronisationInfo } from '/@shared/src/models/synchronisation';
+import type { Template } from '/@shared/src/models/template';
 
 interface Dependencies {
   quadlet: QuadletService;
@@ -157,4 +158,8 @@ export class QuadletApiImpl extends QuadletApi {
       id: id,
     });
   }
+
+  override async templates(): Promise<Array<Template>> {
+    return this.dependencies.quadlet.templates();
+  }
 }
diff --git a/packages/backend/src/assets/templates.json b/packages/backend/src/assets/templates.json
new file mode 100644
index 00000000..2a4905f8
--- /dev/null
+++ b/packages/backend/src/assets/templates.json
@@ -0,0 +1,31 @@
+[
+  {
+    "id": "nginx-container",
+    "name": "Nginx Container",
+    "description": "Simple Nginx Container Quadlet template",
+    "files": [
+      {
+        "language": "ini",
+        "content": "# nginx.container\n[Container]\nImage=nginx\nPublishPort=8888:80\n\n[Service]\nRestart=always",
+        "name": "nginx.container"
+      }
+    ]
+  },
+  {
+    "id": "nginx-pod",
+    "name": "Nginx Pod",
+    "description": "Simple Nginx Kube Quadlet Template",
+    "files": [
+      {
+        "language": "ini",
+        "content": "# play.kube\n[Kube]\nYaml=play.yaml",
+        "name": "nginx.kube"
+      },
+      {
+        "language": "ini",
+        "content": "apiVersion: v1\nkind: Pod\nmetadata:\n  name: nginx-pod\nspec:\n  containers:\n    - name: container\n      image: nginx\n      ports:\n        - name: http\n          containerPort: 80",
+        "name": "play.yaml"
+      }
+    ]
+  }
+]
diff --git a/packages/backend/src/services/quadlet-service.ts b/packages/backend/src/services/quadlet-service.ts
index c133fcc8..153cac3c 100644
--- a/packages/backend/src/services/quadlet-service.ts
+++ b/packages/backend/src/services/quadlet-service.ts
@@ -16,6 +16,8 @@ import { TelemetryEvents } from '../utils/telemetry-events';
 import { QuadletType } from '/@shared/src/utils/quadlet-type';
 import { QuadletKubeParser } from '../utils/parsers/quadlet-kube-parser';
 import { isRunError } from '../utils/run-error';
+import templates from '../assets/templates.json';
+import type { Template } from '/@shared/src/models/template';
 
 export class QuadletService extends QuadletHelper implements Disposable, AsyncInit {
   #extensionsEventDisposable: Disposable | undefined;
@@ -470,4 +472,8 @@ export class QuadletService extends QuadletHelper implements Disposable, AsyncIn
     this.#extensionsEventDisposable?.dispose();
     this.#extensionsEventDisposable = undefined;
   }
+
+  public templates(): Array<Template> {
+    return templates;
+  }
 }
diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
index d76aebb3..a672063f 100644
--- a/packages/frontend/src/App.svelte
+++ b/packages/frontend/src/App.svelte
@@ -12,6 +12,8 @@ import { Messages } from '/@shared/src/messages';
 import type { Unsubscriber } from 'svelte/store';
 import QuadletGenerate from '/@/pages/QuadletGenerate.svelte';
 import QuadletCompose from '/@/pages/QuadletCompose.svelte';
+import QuadletTemplates from '/@/pages/QuadletTemplates.svelte';
+import QuadletCreate from '/@/pages/QuadletCreate.svelte';
 // import globally the monaco environment
 import './lib/monaco-editor/monaco-environment';
 
@@ -45,7 +47,15 @@ onDestroy(() => {
         <QuadletsList />
       </Route>
 
-      <!-- create quadlet -->
+      <Route path="/quadlets/create/*" breadcrumb="Create" let:meta>
+        <QuadletCreate modelId={meta.query.modelId} />
+      </Route>
+
+      <Route path="/quadlets/templates" breadcrumb="Templates">
+        <QuadletTemplates />
+      </Route>
+
+      <!-- create quadlet from existing resources -->
       <Route path="/quadlets/generate/*" firstmatch let:meta>
         <QuadletGenerate
           providerId={meta.query.providerId}
diff --git a/packages/frontend/src/lib/forms/EditorOverlay.svelte b/packages/frontend/src/lib/forms/EditorOverlay.svelte
index e440d44f..78ed985f 100644
--- a/packages/frontend/src/lib/forms/EditorOverlay.svelte
+++ b/packages/frontend/src/lib/forms/EditorOverlay.svelte
@@ -1,20 +1,30 @@
 <script lang="ts">
 import { Button, Tooltip } from '@podman-desktop/ui-svelte';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
-  save(): void;
-  changed: boolean;
-  loading: boolean;
+  actions: Array<{ id: string; label: string; tooltip: string; icon?: IconDefinition }>;
+  onclick: (actionId: string) => void;
+  disabled?: boolean;
+  loading?: boolean;
 }
 
-let { save, changed, loading }: Props = $props();
+let { actions, disabled, loading, onclick }: Props = $props();
 </script>
 
 <div
   class="flex flex-row-reverse p-6 bg-transparent fixed bottom-0 right-0 mb-5 pr-10 max-h-20 bg-opacity-90 z-50"
   role="group"
   aria-label="Edit Buttons">
-  <Tooltip topLeft tip="Apply the changes">
-    <Button type="primary" aria-label="Save" on:click={save} disabled={!changed} inProgress={loading}>Save</Button>
-  </Tooltip>
+  {#each actions as action (action.id)}
+    <Tooltip topLeft tip={action.tooltip}>
+      <Button
+        type="primary"
+        aria-label={action.label}
+        icon={action.icon}
+        on:click={onclick.bind(undefined, action.id)}
+        disabled={disabled}
+        inProgress={loading}>{action.label}</Button>
+    </Tooltip>
+  {/each}
 </div>
diff --git a/packages/frontend/src/lib/monaco-editor/MonacoEditor.svelte b/packages/frontend/src/lib/monaco-editor/MonacoEditor.svelte
index 7edb9707..92ef1fd0 100644
--- a/packages/frontend/src/lib/monaco-editor/MonacoEditor.svelte
+++ b/packages/frontend/src/lib/monaco-editor/MonacoEditor.svelte
@@ -1,3 +1,7 @@
+<!--
+    @component
+    @deprecated use {@link MonacoEditors}
+-->
 <script lang="ts">
 import { onDestroy, onMount } from 'svelte';
 import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
diff --git a/packages/frontend/src/lib/monaco-editor/MonacoEditors.svelte b/packages/frontend/src/lib/monaco-editor/MonacoEditors.svelte
new file mode 100644
index 00000000..b510fb57
--- /dev/null
+++ b/packages/frontend/src/lib/monaco-editor/MonacoEditors.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+import { onDestroy, onMount } from 'svelte';
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import type { HTMLAttributes } from 'svelte/elements';
+import { MonacoManager } from '/@/lib/monaco-editor/monaco';
+
+interface Props extends HTMLAttributes<HTMLElement> {
+  readOnly?: boolean;
+  noMinimap?: boolean;
+  models: Array<Monaco.editor.ITextModel>;
+  modelId?: string;
+}
+
+let { readOnly = false, noMinimap, class: className, models: modelsArray, modelId, ...restProps }: Props = $props();
+
+let editorInstance: Monaco.editor.IStandaloneCodeEditor | undefined;
+let editorContainer: HTMLElement;
+let decorationCollection: Monaco.editor.IEditorDecorationsCollection | undefined = $state();
+
+let models: Map<string, Monaco.editor.ITextModel> = $derived(new Map(modelsArray.map(model => [model.id, model])));
+
+$effect(() => {
+  // if modelId is undefined or current modelId is already selected
+  if (!modelId || !editorInstance || editorInstance.getModel()?.id === modelId) return;
+
+  const request = models.get(modelId);
+  if (!request) return;
+  editorInstance.setModel(request);
+});
+
+onMount(async () => {
+  const monaco = await MonacoManager.getMonaco();
+
+  let model: Monaco.editor.ITextModel | undefined;
+  if (modelId) {
+    model = models.get(modelId);
+  }
+
+  editorInstance = monaco.editor.create(editorContainer, {
+    model,
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    readOnly: readOnly,
+    theme: MonacoManager.getThemeName(),
+    minimap: {
+      enabled: !noMinimap,
+    },
+  });
+});
+
+onDestroy(() => {
+  decorationCollection?.clear();
+  editorInstance?.dispose();
+});
+</script>
+
+<div class="h-full w-full {className}" {...restProps} bind:this={editorContainer}></div>
diff --git a/packages/frontend/src/lib/pagination/EditableTab.svelte b/packages/frontend/src/lib/pagination/EditableTab.svelte
new file mode 100644
index 00000000..9164adff
--- /dev/null
+++ b/packages/frontend/src/lib/pagination/EditableTab.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+/* eslint-disable sonarjs/no-use-of-empty-return-value */
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import { faFile } from '@fortawesome/free-solid-svg-icons/faFile';
+import Fa from 'svelte-fa';
+import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
+interface Props {
+  selected: boolean;
+  url: string;
+  title: string;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+let { url, selected, title, onEdit, onDelete }: Props = $props();
+
+interface BtnProps {
+  icon: IconDefinition;
+  title: string;
+  onclick: () => void;
+}
+</script>
+
+{#snippet btn({ icon, title, onclick }: BtnProps)}
+  <button
+    role="tab"
+    class="cursor-pointer hover:bg-[var(--pd-link-hover-bg)] w-4 h-4 rounded-full items-center justify-center flex"
+    title={title}
+    onclick={onclick}>
+    <Fa size="xs" icon={icon} />
+  </button>
+{/snippet}
+
+<div
+  role="tablist"
+  class="pb-1 border-b-[3px] whitespace-nowrap hover:cursor-pointer focus:outline-[var(--pd-tab-highlight)] px-4 flex gap-x-3 items-center"
+  class:border-[var(--pd-tab-highlight)]={selected}
+  class:border-transparent={!selected}
+  class:hover:border-[var(--pd-tab-hover)]={!selected}>
+  <Fa size="sm" icon={faFile} />
+  <a
+    href={url}
+    class="text-[var(--pd-tab-text)] no-underline"
+    class:text-[var(--pd-tab-text-highlight)]={selected}
+    aria-controls="open-tabs-list-{title.toLowerCase()}-panel"
+    id="open-tabs-list-{title.toLowerCase()}-link">
+    {title}
+  </a>
+  {@render btn({ icon: faPen, title: 'Rename', onclick: onEdit })}
+  {@render btn({ icon: faTrash, title: 'Remove', onclick: onDelete })}
+</div>
diff --git a/packages/frontend/src/lib/templates/TemplateCard.svelte b/packages/frontend/src/lib/templates/TemplateCard.svelte
new file mode 100644
index 00000000..351f0cb7
--- /dev/null
+++ b/packages/frontend/src/lib/templates/TemplateCard.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+import Fa from 'svelte-fa';
+import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
+import type { Template } from '/@shared/src/models/template';
+
+interface Props {
+  template: Template;
+  onImport: () => void;
+}
+
+let { template, onImport }: Props = $props();
+</script>
+
+<div role="listitem" aria-label={template.name}>
+  <div
+    class="bg-[var(--pd-content-card-bg)] hover:bg-[var(--pd-content-card-hover-bg)] grow p-4 rounded-md flex-nowrap flex flex-col"
+    role="region"
+    aria-label={template.name}>
+    <!-- body -->
+    <div class="flex flex-col">
+      <div class="flex flex-row text-base">
+        <!-- left column -->
+        <div class="flex flex-col grow">
+          <span
+            class="text-[var(--pd-content-card-header-text)]"
+            role="heading"
+            aria-level="1"
+            aria-label={template.name}>{template.name}</span>
+          <span class="text-sm text-[var(--pd-content-card-text)]" aria-label="description"
+            >{template.description}</span>
+        </div>
+
+        <div class="flex flex-col">
+          <!-- Import -->
+          <button
+            aria-label="import"
+            title="Import"
+            onclick={onImport}
+            class="justify-center relative rounded-xs text-[var(--pd-button-secondary)] hover:text-[var(--pd-button-text)] text-center cursor-pointer flex flex-row">
+            <div class="flex flex-row items-center text-[var(--pd-link)]">
+              <Fa class="mr-2" icon={faFileImport} />
+              <span> Import </span>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <!-- files -->
+      <div class="flex flex-col gap-2 py-2">
+        <span class="text-[var(--pd-content-card-header-text)]">Files</span>
+        <!-- List of files -->
+        <div class="flex flex-row">
+          <div
+            class="flex flex-col bg-[var(--pd-label-bg)] text-[var(--pd-label-text)] max-w-full rounded-md p-2 mb-2 w-full h-min text-sm text-nowrap">
+            {#each template.files as file (file.name)}
+              <span>{file.name}</span>
+            {/each}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/packages/frontend/src/lib/templates/TemplateGrid.svelte b/packages/frontend/src/lib/templates/TemplateGrid.svelte
new file mode 100644
index 00000000..9a4dbf2e
--- /dev/null
+++ b/packages/frontend/src/lib/templates/TemplateGrid.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+import TemplateCard from '/@/lib/templates/TemplateCard.svelte';
+import type { Template } from '/@shared/src/models/template';
+import { onMount } from 'svelte';
+import { quadletAPI } from '/@/api/client';
+
+interface Props {
+  onImport: (template: Template) => void;
+}
+
+let { onImport }: Props = $props();
+
+let templates: Array<Template> = $state([]);
+
+onMount(async () => {
+  templates = await quadletAPI.templates();
+});
+</script>
+
+<div role="list" aria-label="templates" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4">
+  {#each templates as template (template.name)}
+    <TemplateCard template={template} onImport={onImport.bind(undefined, template)} />
+  {/each}
+</div>
diff --git a/packages/frontend/src/pages/QuadletCreate.svelte b/packages/frontend/src/pages/QuadletCreate.svelte
new file mode 100644
index 00000000..bfccfddd
--- /dev/null
+++ b/packages/frontend/src/pages/QuadletCreate.svelte
@@ -0,0 +1,215 @@
+<script lang="ts">
+import { DetailsPage, Button } from '@podman-desktop/ui-svelte';
+import { router } from 'tinro';
+import { faFileCirclePlus } from '@fortawesome/free-solid-svg-icons/faFileCirclePlus';
+import { onMount } from 'svelte';
+import type * as Monaco from 'monaco-editor';
+import { MonacoManager } from '/@/lib/monaco-editor/monaco';
+import EditableTab from '/@/lib/pagination/EditableTab.svelte';
+import MonacoEditors from '/@/lib/monaco-editor/MonacoEditors.svelte';
+import { dialogAPI, quadletAPI } from '/@/api/client';
+import { faTruckPickup } from '@fortawesome/free-solid-svg-icons/faTruckPickup';
+import EditorOverlay from '/@/lib/forms/EditorOverlay.svelte';
+import { TextModelStorage } from '/@/utils/text-model-storage';
+import ContainerProviderConnectionSelect from '/@/lib/select/ContainerProviderConnectionSelect.svelte';
+import type { ProviderContainerConnectionDetailedInfo } from '/@shared/src/models/provider-container-connection-detailed-info';
+import { providerConnectionsInfo } from '/@store/connections';
+import ProgressBar from '/@/lib/progress/ProgressBar.svelte';
+import { findLanguage } from '/@/utils/language-utils';
+
+interface Props {
+  modelId?: string;
+}
+
+let { modelId }: Props = $props();
+
+let loading: boolean = $state(false);
+let containerProviderConnection: ProviderContainerConnectionDetailedInfo | undefined = $state(undefined);
+
+// Map filename => Monaco model
+let files: TextModelStorage = new TextModelStorage();
+
+function close(): void {
+  router.goto('/');
+}
+
+onMount(async () => {
+  try {
+    loading = true;
+    // init models
+    const monaco = await MonacoManager.getMonaco();
+
+    // restore if any
+    files.restore(monaco);
+
+    if (files.size === 0) {
+      const model = monaco.editor.createModel('# Hello', 'ini');
+      files.set('example.container', model);
+    }
+
+    // Open the new model tab
+    if (files.size > 0) {
+      navigateToModel(Array.from(files.values())[0]);
+    }
+  } finally {
+    loading = false;
+  }
+});
+
+function getModelFilename(model: Monaco.editor.ITextModel): string {
+  return files.getName(model);
+}
+
+function disposeModel(model: Monaco.editor.ITextModel, redirect = true): void {
+  const filename = getModelFilename(model);
+
+  // delete entry
+  files.delete(filename);
+  model.dispose();
+
+  if (redirect && modelId === model.id) {
+    if (files.size === 0) {
+      router.location.query.delete('modelId');
+    } else {
+      navigateToModel(Array.from(files.values())[0]);
+    }
+  }
+}
+
+async function onFileDelete(model: Monaco.editor.ITextModel): Promise<void> {
+  // ask user confirmation
+  const result = await dialogAPI.showWarningMessage(
+    `Are you sure you want to delete ${getModelFilename(model)}?`,
+    'Cancel',
+    'Confirm',
+  );
+
+  if (result !== 'Confirm') return;
+
+  disposeModel(model);
+}
+
+async function onFileRename(model: Monaco.editor.ITextModel): Promise<void> {
+  const filename = getModelFilename(model);
+  const result = await dialogAPI.showInputBox({
+    title: `Rename ${filename}`,
+    value: filename,
+  });
+  if (!result || filename === result) return;
+
+  // ensure no file names are duplicated
+  if (files.has(result)) {
+    await dialogAPI.showInformationMessage(`You cannot have multiple files named the same`, 'OK');
+    return;
+  }
+
+  files.rename(filename, result);
+}
+
+async function onNewFileRequest(): Promise<void> {
+  const result = await dialogAPI.showInputBox({
+    title: 'New File',
+  });
+  if (!result) return;
+
+  // ensure no file names are duplicated
+  if (files.has(result)) {
+    await dialogAPI.showInformationMessage(`You cannot have multiple files named the same`, 'OK');
+    return;
+  }
+
+  // Try to get the extension to determine the language to use
+  let language: string | undefined = findLanguage(result);
+
+  const monaco = await MonacoManager.getMonaco();
+  const nModel = monaco.editor.createModel('', language);
+  files.set(result, nModel);
+
+  // Open the new model tab
+  navigateToModel(nModel);
+}
+
+function navigateToModel(model: Monaco.editor.ITextModel): void {
+  router.location.query.set('modelId', model.id);
+}
+
+async function loadIntoMachine(): Promise<void> {
+  if (!containerProviderConnection) return;
+
+  loading = true;
+  try {
+    await quadletAPI.writeIntoMachine({
+      connection: $state.snapshot(containerProviderConnection),
+      files: Array.from(files.entries()).map(([filename, model]) => ({
+        filename: filename,
+        content: model.getValue(),
+      })),
+    });
+    //
+    router.goto('/');
+    localStorage.clear();
+    files.clear();
+  } catch (err: unknown) {
+    console.error(err);
+  } finally {
+    loading = false;
+  }
+}
+</script>
+
+<DetailsPage
+  title="Create"
+  onclose={close}
+  breadcrumbLeftPart="Quadlets"
+  breadcrumbRightPart="Editor"
+  breadcrumbTitle="Go back to quadlets page"
+  onbreadcrumbClick={close}>
+  <!-- ACTIONS -->
+  {#snippet actionsSnippet()}
+    <div class="w-[250px]">
+      <ContainerProviderConnectionSelect
+        bind:value={containerProviderConnection}
+        containerProviderConnections={$providerConnectionsInfo} />
+    </div>
+  {/snippet}
+  <!-- TABS -->
+  {#snippet tabsSnippet()}
+    {#each files as [filename, model] (filename)}
+      <EditableTab
+        title={getModelFilename(model)}
+        url="/quadlets/create?modelId={model.id}"
+        selected={modelId === model.id}
+        onDelete={onFileDelete.bind(undefined, model)}
+        onEdit={onFileRename.bind(undefined, model)} />
+    {/each}
+    <Button type="secondary" class="!px-2" icon={faFileCirclePlus} title="New file" onclick={onNewFileRequest} />
+  {/snippet}
+  <!-- BODY -->
+  {#snippet contentSnippet()}
+    <!-- loading indicator -->
+    <div class="h-0.5">
+      <!-- avoid flickering -->
+      {#if loading}
+        <ProgressBar class="w-full h-0.5" width="w-full" height="h-0.5" />
+      {/if}
+    </div>
+
+    <!-- overlay -->
+    <EditorOverlay
+      actions={[
+        {
+          id: 'load-into-machine',
+          label: 'Load Into Machine',
+          tooltip: 'Load files into machine',
+          icon: faTruckPickup,
+        },
+      ]}
+      onclick={loadIntoMachine}
+      disabled={loading || files.size === 0 || !containerProviderConnection}
+      loading={loading} />
+    <!-- prevent trying to render the monaco editor BEFORE we have models -->
+    {#if files.size > 0}
+      <MonacoEditors models={Array.from(files.values())} modelId={modelId} noMinimap />
+    {/if}
+  {/snippet}
+</DetailsPage>
diff --git a/packages/frontend/src/pages/QuadletDetails.svelte b/packages/frontend/src/pages/QuadletDetails.svelte
index 355bfee0..c484a3eb 100644
--- a/packages/frontend/src/pages/QuadletDetails.svelte
+++ b/packages/frontend/src/pages/QuadletDetails.svelte
@@ -192,7 +192,11 @@ function onchange(content: string): void {
                 {quadlet.path}
               </span>
             </div>
-            <EditorOverlay save={save} loading={loading} changed={changed} />
+            <EditorOverlay
+              actions={[{ id: 'save', label: 'Save', tooltip: 'Apply the changes' }]}
+              onclick={save}
+              loading={loading}
+              disabled={!changed} />
             <MonacoEditor class="h-full" onChange={onchange} content={quadletSource} language="ini" />
           {/if}
         </Route>
diff --git a/packages/frontend/src/pages/QuadletTemplates.svelte b/packages/frontend/src/pages/QuadletTemplates.svelte
new file mode 100644
index 00000000..cc2f6b19
--- /dev/null
+++ b/packages/frontend/src/pages/QuadletTemplates.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+import { FormPage } from '@podman-desktop/ui-svelte';
+import type { Template } from '/@shared/src/models/template';
+import { router } from 'tinro';
+import TemplateGrid from '/@/lib/templates/TemplateGrid.svelte';
+import { loadIntoLocalStorage } from '/@/utils/templates';
+
+function close(): void {
+  router.goto('/');
+}
+
+function onImportTemplate(template: Template): void {
+  loadIntoLocalStorage(template);
+  router.goto('/quadlets/create');
+}
+</script>
+
+<FormPage
+  title="Quadlet Templates"
+  onclose={close}
+  breadcrumbLeftPart="Quadlets"
+  breadcrumbRightPart="Templates"
+  breadcrumbTitle="Go back to quadlets page"
+  onbreadcrumbClick={close}>
+  {#snippet content()}
+    <div class="mx-5">
+      <TemplateGrid onImport={onImportTemplate.bind(undefined)} />
+    </div>
+  {/snippet}
+</FormPage>
diff --git a/packages/frontend/src/pages/QuadletsList.svelte b/packages/frontend/src/pages/QuadletsList.svelte
index 8119f5a9..e75d5158 100644
--- a/packages/frontend/src/pages/QuadletsList.svelte
+++ b/packages/frontend/src/pages/QuadletsList.svelte
@@ -11,6 +11,7 @@ import ContainerProviderConnectionSelect from '/@/lib/select/ContainerProviderCo
 import { providerConnectionsInfo } from '/@store/connections';
 import type { ProviderContainerConnectionDetailedInfo } from '/@shared/src/models/provider-container-connection-detailed-info';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
+import { faPencil } from '@fortawesome/free-solid-svg-icons/faPencil';
 import MachineBadge from '/@/lib/table/MachineBadge.svelte';
 import type { ProviderContainerConnectionIdentifierInfo } from '/@shared/src/models/provider-container-connection-identifier-info';
 import EmptyQuadletList from '/@/lib/empty-screen/EmptyQuadletList.svelte';
@@ -89,6 +90,21 @@ function navigateToGenerate(): void {
   router.goto('/quadlets/generate');
 }
 
+async function onCreateRequest(): Promise<void> {
+  const result = await dialogAPI.showInformationMessage('Create Quadlet', 'Using Template', 'From Scratch');
+
+  // handle cancel case
+  if (!result) return;
+
+  if (result === 'Using Template') {
+    router.goto('/quadlets/templates/');
+  } else {
+    // clear any existing
+    localStorage.clear();
+    router.goto('/quadlets/create');
+  }
+}
+
 async function deleteSelected(): Promise<void> {
   const result = await dialogAPI.showWarningMessage(
     `Are you sure you want to delete ${selectedItemsNumber} quadlet${selectedItemsNumber > 1 ? 's' : ''}?`,
@@ -126,6 +142,8 @@ async function deleteSelected(): Promise<void> {
 
 <NavPage title="Podman Quadlets" searchEnabled={true} bind:searchTerm={searchTerm}>
   <svelte:fragment slot="additional-actions">
+    <Button icon={faPencil} disabled={disabled} title="Create Quadlet" on:click={onCreateRequest}
+      >Create Quadlet</Button>
     <Button icon={faCode} disabled={disabled} title="Generate Quadlet" on:click={navigateToGenerate}
       >Generate Quadlet</Button>
     <Button
diff --git a/packages/frontend/src/utils/language-utils.ts b/packages/frontend/src/utils/language-utils.ts
new file mode 100644
index 00000000..4584135b
--- /dev/null
+++ b/packages/frontend/src/utils/language-utils.ts
@@ -0,0 +1,36 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+export function findLanguage(filename: string): string | undefined {
+  // Split with latest apparition of .
+  const separator = filename.lastIndexOf('.');
+  if (separator !== -1) {
+    const extension = filename.substring(separator);
+    switch (extension) {
+      case '.container':
+      case '.image':
+      case '.network':
+      case '.kube':
+      case '.build':
+      case '.volume':
+        return 'ini';
+      case '.yaml':
+        return 'yaml';
+    }
+  }
+}
diff --git a/packages/frontend/src/utils/templates.ts b/packages/frontend/src/utils/templates.ts
new file mode 100644
index 00000000..34136b76
--- /dev/null
+++ b/packages/frontend/src/utils/templates.ts
@@ -0,0 +1,33 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+import type { Template } from '/@shared/src/models/template';
+import { KEY_PREFIX } from '/@/utils/text-model-storage';
+
+/**
+ * Utility function, mimic behavior from {@link TextModelStorage}
+ * @param template
+ */
+export function loadIntoLocalStorage(template: Template): void {
+  // clear local storage
+  localStorage.clear();
+
+  // fill local storage with template
+  for (const { name, content } of template.files) {
+    localStorage.setItem(`${KEY_PREFIX}${name}`, content);
+  }
+}
diff --git a/packages/frontend/src/utils/text-model-storage.ts b/packages/frontend/src/utils/text-model-storage.ts
new file mode 100644
index 00000000..aaaa961d
--- /dev/null
+++ b/packages/frontend/src/utils/text-model-storage.ts
@@ -0,0 +1,82 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+import { SvelteMap } from 'svelte/reactivity';
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { findLanguage } from '/@/utils/language-utils';
+
+export const KEY_PREFIX = 'text-model-storage-';
+
+export class TextModelStorage extends SvelteMap<string, Monaco.editor.ITextModel> {
+  private readonly listeners: Map<string, Monaco.IDisposable> = new Map();
+
+  protected getKey(filename: string): string {
+    return `${KEY_PREFIX}${filename}`;
+  }
+
+  delete(filename: string): boolean {
+    // delete from local storage
+    localStorage.removeItem(this.getKey(filename));
+
+    // dispose listeners
+    this.listeners.get(filename)?.dispose();
+    this.listeners.delete(filename);
+
+    // call super class
+    return super.delete(filename);
+  }
+
+  set(filename: string, value: Monaco.editor.ITextModel): this {
+    // when adding a text model, let's add an event to capture update
+    this.listeners.set(filename, value.onDidChangeContent(this.updateLocalStorage.bind(this, filename, value)));
+    // call once to create the entry inside the local storage
+    this.updateLocalStorage(filename, value);
+
+    return super.set(filename, value);
+  }
+
+  protected updateLocalStorage(filename: string, model: Monaco.editor.ITextModel): void {
+    const pathKey = this.getKey(filename);
+    localStorage.setItem(pathKey, model.getValue());
+  }
+
+  getName(model: Monaco.editor.ITextModel): string {
+    const filename = this.entries().find(([, { id }]) => id === model.id)?.[0];
+    if (!filename) throw new Error(`cannot found corresponding filename for model with id ${model.id}`);
+    return filename;
+  }
+
+  rename(from: string, to: string): void {
+    // check fromKey has corresponding models
+    const fromRaw = this.get(from);
+    if (!fromRaw) throw new Error(`cannot rename file ${from}: not found`);
+
+    // delete existing mapping
+    this.delete(from);
+
+    // create new mapping
+    this.set(to, fromRaw);
+  }
+
+  restore(monaco: typeof Monaco): void {
+    for (const [key, content] of Object.entries(localStorage)) {
+      if (!key.startsWith(KEY_PREFIX)) continue;
+      const model = monaco.editor.createModel(content, findLanguage(key));
+      this.set(key.substring(KEY_PREFIX.length), model);
+    }
+  }
+}
diff --git a/packages/shared/src/apis/quadlet-api.ts b/packages/shared/src/apis/quadlet-api.ts
index 249e2db5..44cd86ac 100644
--- a/packages/shared/src/apis/quadlet-api.ts
+++ b/packages/shared/src/apis/quadlet-api.ts
@@ -4,6 +4,7 @@
 import type { QuadletInfo } from '../models/quadlet-info';
 import type { ProviderContainerConnectionIdentifierInfo } from '../models/provider-container-connection-identifier-info';
 import type { SynchronisationInfo } from '../models/synchronisation';
+import type { Template } from '../models/template';
 
 export abstract class QuadletApi {
   static readonly CHANNEL: string = 'quadlet-api';
@@ -50,4 +51,9 @@ export abstract class QuadletApi {
   abstract getSynchronisationInfo(): Promise<SynchronisationInfo[]>;
 
   abstract getKubeYAML(connection: ProviderContainerConnectionIdentifierInfo, id: string): Promise<string>;
+
+  /**
+   * List Quadlets templates
+   */
+  abstract templates(): Promise<Array<Template>>;
 }
diff --git a/packages/shared/src/messages/constants.ts b/packages/shared/src/messages/constants.ts
index 54551019..8e6c05a1 100644
--- a/packages/shared/src/messages/constants.ts
+++ b/packages/shared/src/messages/constants.ts
@@ -4,6 +4,8 @@ import { DialogApi } from '../apis/dialog-api';
 
 export const noTimeoutChannels: string[] = [
   getChannel(DialogApi, 'showWarningMessage'),
+  getChannel(DialogApi, 'showInputBox'),
+  getChannel(DialogApi, 'showInformationMessage'),
   getChannel(QuadletApi, 'start'),
   getChannel(QuadletApi, 'writeIntoMachine'),
 ];
diff --git a/packages/shared/src/models/template.ts b/packages/shared/src/models/template.ts
new file mode 100644
index 00000000..7ea3abf0
--- /dev/null
+++ b/packages/shared/src/models/template.ts
@@ -0,0 +1,28 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+export interface Template {
+  name: string;
+  id: string;
+  description: string;
+  files: Array<{
+    language: string;
+    content: string;
+    name: string;
+  }>;
+}
diff --git a/tests/playwright/src/model/quadlet-create.ts b/tests/playwright/src/model/quadlet-create.ts
new file mode 100644
index 00000000..d06e8d57
--- /dev/null
+++ b/tests/playwright/src/model/quadlet-create.ts
@@ -0,0 +1,22 @@
+import { QuadletBasePage } from './quadlet-base-page';
+import type { Locator, Page } from '@playwright/test';
+import { expect as playExpect } from '@playwright/test';
+import { SvelteSelect } from '../utils/svelte-select';
+
+export class QuadletCreate extends QuadletBasePage {
+  readonly tabs: Locator;
+  readonly containerEngineSelect: SvelteSelect;
+  readonly loadIntoMachineBtn: Locator;
+
+  constructor(page: Page, webview: Page) {
+    super(page, webview, 'Create');
+
+    this.tabs = this.webview.getByRole('tab');
+    this.containerEngineSelect = new SvelteSelect(this.webview, 'Select Container Engine');
+    this.loadIntoMachineBtn = this.webview.getByRole('button', { name: 'Load Into Machine' });
+  }
+
+  waitForLoad(): Promise<void> {
+    return playExpect(this.heading).toBeVisible();
+  }
+}
diff --git a/tests/playwright/src/model/quadlet-list-page.ts b/tests/playwright/src/model/quadlet-list-page.ts
index fa5f294b..5de8e972 100644
--- a/tests/playwright/src/model/quadlet-list-page.ts
+++ b/tests/playwright/src/model/quadlet-list-page.ts
@@ -2,9 +2,12 @@ import type { Locator, Page } from '@playwright/test';
 import test, { expect as playExpect } from '@playwright/test';
 import { QuadletBasePage } from './quadlet-base-page';
 import { QuadletGeneratePage } from './quadlet-generate-page';
+import { handleConfirmationDialog } from '@podman-desktop/tests-playwright';
+import { QuadletTemplatePage } from './quadlet-template-page';
 
 export class QuadletListPage extends QuadletBasePage {
   readonly generateButton: Locator;
+  readonly createButton: Locator;
   readonly table: Locator;
   readonly rows: Locator;
 
@@ -12,6 +15,7 @@ export class QuadletListPage extends QuadletBasePage {
     super(page, webview, 'Podman Quadlets');
 
     this.generateButton = this.webview.getByRole('button', { name: 'Generate Quadlet' });
+    this.createButton = this.webview.getByRole('button', { name: 'Create Quadlet' });
     this.table = this.webview.getByRole('table', { name: 'quadlets' });
     this.rows = this.table.getByRole('row');
   }
@@ -31,6 +35,18 @@ export class QuadletListPage extends QuadletBasePage {
     return new QuadletGeneratePage(this.page, this.webview);
   }
 
+  async createQuadletFromTemplate(): Promise<QuadletTemplatePage> {
+    await playExpect(this.createButton).toBeEnabled();
+    await this.createButton.click();
+
+    try {
+      await handleConfirmationDialog(this.page, 'Podman Quadlet', true, 'Using Template');
+    } catch (error) {
+      console.warn(`Warning: Could not reset the app, repository probably clean.\n\t${error}`);
+    }
+    return new QuadletTemplatePage(this.page, this.webview);
+  }
+
   async getQuadletRow(service: string): Promise<Locator> {
     return test.step(`Get service ${service} row`, async () => {
       await this.waitForLoad();
diff --git a/tests/playwright/src/model/quadlet-template-card.ts b/tests/playwright/src/model/quadlet-template-card.ts
new file mode 100644
index 00000000..61054c30
--- /dev/null
+++ b/tests/playwright/src/model/quadlet-template-card.ts
@@ -0,0 +1,15 @@
+import type { Locator } from '@playwright/test';
+
+export class QuadletTemplateCard {
+  #import: Locator;
+  readonly title: Locator;
+
+  constructor(public row: Locator) {
+    this.#import = row.getByRole('button', { name: 'import' });
+    this.title = row.getByRole('heading');
+  }
+
+  importTemplate(): Promise<void> {
+    return this.#import.click();
+  }
+}
diff --git a/tests/playwright/src/model/quadlet-template-page.ts b/tests/playwright/src/model/quadlet-template-page.ts
new file mode 100644
index 00000000..9cd01e06
--- /dev/null
+++ b/tests/playwright/src/model/quadlet-template-page.ts
@@ -0,0 +1,25 @@
+import { QuadletBasePage } from './quadlet-base-page';
+import type { Locator, Page } from '@playwright/test';
+import { expect as playExpect } from '@playwright/test';
+import { QuadletTemplateCard } from './quadlet-template-card';
+
+
+export class QuadletTemplatePage extends QuadletBasePage {
+  readonly list: Locator;
+  readonly cards: Locator;
+
+  constructor(page: Page, webview: Page) {
+    super(page, webview, 'Quadlet Templates');
+
+    this.list = this.webview.getByRole('list', { name: 'templates'});
+    this.cards = this.list.getByRole('listitem');
+  }
+
+  async getTemplates(): Promise<Array<QuadletTemplateCard>> {
+    return (await this.cards.all()).map((row) => new QuadletTemplateCard(row));
+  }
+
+  waitForLoad(): Promise<void> {
+    return playExpect(this.heading).toBeVisible();
+  }
+}
diff --git a/tests/playwright/src/quadlet-extension.spec.ts b/tests/playwright/src/quadlet-extension.spec.ts
index 045bfd3f..644cf93c 100644
--- a/tests/playwright/src/quadlet-extension.spec.ts
+++ b/tests/playwright/src/quadlet-extension.spec.ts
@@ -10,6 +10,8 @@ import { PdQuadletDetailsPage } from './model/pd-quadlet-details-page';
 import { QuadletListPage } from './model/quadlet-list-page';
 import { handleWebview } from './utils/webviewHandler';
 import { QuadletDetailsPage } from './model/quadlet-details-page';
+import { QuadletCreate } from './model/quadlet-create';
+import type { QuadletTemplateCard } from './model/quadlet-template-card';
 
 const PODMAN_QUADLET_EXTENSION_OCI_IMAGE =
   process.env.EXTENSION_OCI_IMAGE ?? 'ghcr.io/podman-desktop/pd-extension-quadlet:latest';
@@ -280,5 +282,69 @@ test.describe.serial(`Podman Quadlet extension installation and verification`, {
         })
         .toBeTruthy();
     });
+
+    test('create quadlet from template', async () => {
+      test.setTimeout(150_000);
+
+      const templatePage = await quadletListPage.createQuadletFromTemplate();
+      await templatePage.waitForLoad();
+
+      const templates = await templatePage.getTemplates();
+
+      let nginxTemplate: QuadletTemplateCard | undefined = undefined;
+      for (const template of templates) {
+        const title = await template.title.textContent();
+        if(title?.includes('Nginx Container')) {
+          nginxTemplate = template;
+        }
+      }
+
+      if(!nginxTemplate) throw new Error('cannot found nginx container template');
+
+      await nginxTemplate.importTemplate();
+
+      const createPage = new QuadletCreate(quadletListPage.page, quadletListPage.webview);
+      /**
+       * ==========
+       * Select the engine
+       * =========
+       */
+        // open the select dropdown
+      const podmanProviders = await createPage.containerEngineSelect.getOptions();
+      playExpect(podmanProviders.length).toBeGreaterThan(0);
+
+      const sorted = podmanProviders.find(provider => provider.toLowerCase().includes('podman'));
+      if (!sorted) throw new Error('cannot found podman provider');
+
+      // Value can be `podman-machine-default (WSL)`
+      const machine = sorted.split(' ')[0];
+      console.log(`Trying to use provider ${machine}`);
+      await createPage.containerEngineSelect.set(machine);
+
+      /**
+       * ==========
+       * Save the content
+       * =========
+       */
+      await playExpect
+        .poll(async () => await createPage.loadIntoMachineBtn.isEnabled(), {
+          timeout: 5_000,
+        })
+        .toBeTruthy();
+
+      await createPage.loadIntoMachineBtn.click();
+
+      /**
+       * ==========
+       * Ensure the template has created a quadlet
+       * =========
+       */
+      const row = await quadletListPage.getQuadletRow('nginx.service');
+      // get the status locator
+      const status = row.getByRole('status');
+      // read the title (either 'RUNNING' or '')
+      const title = await status.getAttribute('title');
+      playExpect(title).not.toBe('RUNNING');
+    });
   });
 });