diff --git a/packages/frontend/src/lib/Modal.svelte b/packages/frontend/src/lib/Modal.svelte
new file mode 100644
index 000000000..16c169244
--- /dev/null
+++ b/packages/frontend/src/lib/Modal.svelte
@@ -0,0 +1,62 @@
+<style>
+.modal-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modal {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: calc(200vw - 4em);
+  max-width: 42em;
+  max-height: calc(100vh - 4em);
+  overflow: auto;
+  transform: translate(-50%, -50%);
+  padding: 1em;
+  border-radius: 0.2em;
+  z-index: 50;
+}
+</style>
+
+<script lang="ts">
+import { createEventDispatcher, onDestroy } from 'svelte';
+import { tabWithinParent } from './dialog-utils';
+
+const dispatch = createEventDispatcher();
+const close = () => dispatch('close');
+
+let modal: HTMLDivElement;
+export let name = '';
+
+const handle_keydown = (e: any) => {
+  if (e.key === 'Escape') {
+    close();
+    return;
+  }
+
+  if (e.key === 'Tab') {
+    tabWithinParent(e, modal);
+  }
+};
+
+const previously_focused = typeof document !== 'undefined' && (document.activeElement as HTMLElement);
+
+if (previously_focused) {
+  onDestroy(() => {
+    previously_focused.focus();
+  });
+}
+</script>
+
+<svelte:window on:keydown="{handle_keydown}" />
+
+<button class="modal-background" on:click="{close}"></button>
+
+<div class="modal" role="dialog" aria-label="{name}" aria-modal="true" bind:this="{modal}">
+  <slot />
+</div>
diff --git a/packages/frontend/src/lib/dialog-utils.ts b/packages/frontend/src/lib/dialog-utils.ts
new file mode 100644
index 000000000..cb97d595d
--- /dev/null
+++ b/packages/frontend/src/lib/dialog-utils.ts
@@ -0,0 +1,32 @@
+/**********************************************************************
+ * Copyright (C) 2023 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 tabWithinParent(e: KeyboardEvent, parent: HTMLDivElement): void {
+  // trap focus within parent element
+  const nodes = parent.querySelectorAll<HTMLElement>('*');
+  const tabbable = Array.from(nodes).filter(n => n.tabIndex >= 0);
+
+  let index = tabbable.indexOf(document.activeElement as HTMLElement);
+  if (index === -1 && e.shiftKey) index = 0;
+
+  index += tabbable.length + (e.shiftKey ? -1 : 1);
+  index %= tabbable.length;
+
+  tabbable[index].focus();
+  e.preventDefault();
+}
diff --git a/packages/frontend/src/lib/table/model/ModelColumnActions.svelte b/packages/frontend/src/lib/table/model/ModelColumnActions.svelte
index 629f6b0d7..6c596c721 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnActions.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnActions.svelte
@@ -3,11 +3,19 @@ import type { ModelInfo } from "@shared/src/models/IModelInfo";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import ListItemButtonIcon from "../../button/ListItemButtonIcon.svelte";
 import { studioClient } from "/@/utils/client";
+import Modal from "../../Modal.svelte";
+  import Button from "../../button/Button.svelte";
 export let object: ModelInfo;
 
+let deleteConfirmVisible: boolean = false;
+
 function deleteModel() {
-  console.log('delete model', object.id);
-  studioClient.deleteLocalModel(object.id);
+  deleteConfirmVisible= true;
+}
+
+async function goDeleteModel() {
+  await studioClient.deleteLocalModel(object.id);
+  deleteConfirmVisible= false;
 }
 </script>
 
@@ -17,3 +25,29 @@ function deleteModel() {
   title="Delete Model"
   enabled={!object.state}
 />
+
+{#if deleteConfirmVisible}
+  <Modal
+    on:close="{() => {
+      deleteConfirmVisible = false;
+    }}">
+    <div class="flex items-center justify-between bg-black px-5 py-4 border-b-2 border-violet-700">
+      <h1 class="text-xl font-bold">Delete a model</h1>
+
+      <button class="hover:text-gray-300 px-2 py-1" on:click="{() => deleteConfirmVisible = false}">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="bg-charcoal-600 p-5 h-full flex flex-col justify-items-center">
+      <span class="pb-3">The folder on disk containing the model will be deleted, it contains:</span>
+      <ul class="list-disc ml-8 space-y-2">
+        <li>{object.file?.file}</li>
+      </ul>
+
+      <div class="pt-5 grid grid-cols-2 gap-10 place-content-center w-full">
+        <Button type="primary" on:click="{() => goDeleteModel()}">Delete</Button>
+        <Button type="secondary" on:click="{() => deleteConfirmVisible = false}">Cancel</Button>
+      </div>
+    </div>
+  </Modal>
+{/if}