diff --git a/next-tavla/package.json b/next-tavla/package.json
index 4dd981f2a..e6f6a2ec8 100644
--- a/next-tavla/package.json
+++ b/next-tavla/package.json
@@ -35,6 +35,7 @@
         "@entur/icons": "6.3.0",
         "@entur/layout": "2.1.33",
         "@entur/loader": "0.4.31",
+        "@entur/modal": "1.7.3",
         "@entur/tokens": "3.8.1",
         "@entur/typography": "1.8.0",
         "@firebase/database-types": "0.10.4",
diff --git a/next-tavla/src/Admin/scenarios/TilesSettings/components/DeleteButton/index.tsx b/next-tavla/src/Admin/scenarios/TilesSettings/components/DeleteButton/index.tsx
new file mode 100644
index 000000000..38bafdef6
--- /dev/null
+++ b/next-tavla/src/Admin/scenarios/TilesSettings/components/DeleteButton/index.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { ButtonGroup, SecondaryButton } from '@entur/button'
+import { Modal } from '@entur/modal'
+import { Paragraph } from '@entur/typography'
+import { PrimaryButton, TertiaryButton } from '@entur/button'
+import { DeleteIcon } from '@entur/icons'
+import { useSettingsDispatch } from 'Admin/utils/contexts'
+
+function DeleteButton({ uuid }: { uuid: string }) {
+    const dispatch = useSettingsDispatch()
+    const [isOpen, setOpen] = useState(false)
+
+    return (
+        <>
+            <Modal
+                open={isOpen}
+                onDismiss={() => setOpen(false)}
+                size="small"
+                align="center"
+            >
+                <Paragraph>
+                    Er du sikker på at du vil slette denne holdeplassen?
+                </Paragraph>
+                <ButtonGroup>
+                    <SecondaryButton onClick={() => setOpen(false)}>
+                        Avbryt
+                    </SecondaryButton>
+                    <PrimaryButton
+                        onClick={() => {
+                            setOpen(false)
+                            dispatch({
+                                type: 'removeTile',
+                                tileId: uuid,
+                            })
+                        }}
+                    >
+                        Ja, slett
+                    </PrimaryButton>
+                </ButtonGroup>
+            </Modal>
+
+            <TertiaryButton onClick={() => setOpen(true)}>
+                <DeleteIcon />
+                {'Slett'}
+            </TertiaryButton>
+        </>
+    )
+}
+
+export { DeleteButton }
diff --git a/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/index.tsx b/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/index.tsx
index b64dd2e5f..09189fa25 100644
--- a/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/index.tsx
+++ b/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/index.tsx
@@ -1,10 +1,8 @@
 import React from 'react'
 import classes from './styles.module.css'
-import { useSettingsDispatch } from 'Admin/utils/contexts'
-import { DeleteIcon } from '@entur/icons'
 import { Loader } from '@entur/loader'
 import { Tile } from 'components/Tile'
-import { TavlaButton } from 'Admin/components/Button'
+import { DeleteButton } from '../DeleteButton'
 
 function TileSettingsWrapper({
     uuid,
@@ -15,25 +13,14 @@ function TileSettingsWrapper({
     name: string | undefined
     children: React.ReactNode
 }) {
-    const dispatch = useSettingsDispatch()
-
     return (
         <Tile>
             <div className={classes.heading}>
                 {!name ? <Loader /> : name}
-                <div className={classes.buttons}>
-                    <TavlaButton
-                        onClick={() =>
-                            dispatch({
-                                type: 'removeTile',
-                                tileId: uuid,
-                            })
-                        }
-                    >
-                        <DeleteIcon size={16} />
-                    </TavlaButton>
-                </div>
+
+                <DeleteButton uuid={uuid} />
             </div>
+
             {children}
         </Tile>
     )
diff --git a/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/styles.module.css b/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/styles.module.css
index 1a5fe9a0d..94dcb7ea2 100644
--- a/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/styles.module.css
+++ b/next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/styles.module.css
@@ -2,10 +2,5 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 0.5em;
-}
-
-.buttons {
-    display: flex;
-    flex: 0;
+    padding-bottom: 1em;
 }
diff --git a/next-tavla/src/Shared/styles/imports.css b/next-tavla/src/Shared/styles/imports.css
index f6604a920..c443ab6f2 100644
--- a/next-tavla/src/Shared/styles/imports.css
+++ b/next-tavla/src/Shared/styles/imports.css
@@ -11,3 +11,4 @@
 @import '@entur/expand/dist/styles.css';
 @import '@entur/tokens/dist/styles.css';
 @import '@entur/alert/dist/styles.css';
+@import '@entur/modal/dist/styles.css';
diff --git a/next-tavla/yarn.lock b/next-tavla/yarn.lock
index e49258776..028e33e23 100644
--- a/next-tavla/yarn.lock
+++ b/next-tavla/yarn.lock
@@ -768,6 +768,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.13":
+  version: 7.22.6
+  resolution: "@babel/runtime@npm:7.22.6"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: e585338287c4514a713babf4fdb8fc2a67adcebab3e7723a739fc62c79cfda875b314c90fd25f827afb150d781af97bc16c85bfdbfa2889f06053879a1ddb597
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3":
   version: 7.22.5
   resolution: "@babel/template@npm:7.22.5"
@@ -1100,6 +1109,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@entur/modal@npm:1.7.3":
+  version: 1.7.3
+  resolution: "@entur/modal@npm:1.7.3"
+  dependencies:
+    "@entur/a11y": ^0.2.65
+    "@entur/button": ^3.0.8
+    "@entur/icons": ^6.3.0
+    "@entur/layout": ^2.1.33
+    "@entur/tokens": ^3.9.0
+    "@entur/typography": ^1.8.0
+    "@entur/utils": ^0.9.0
+    "@reach/dialog": ^0.16.0
+    classnames: ^2.3.1
+    react-focus-lock: ^2.9.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 23a6a6d3fc004e7cc82122e159dc18e2096d5b4be35dfa3c5c5493bc24cadfeefe4b5b17ae8b7093542beafc1b1e2f9f9a115cd24840603a875d68fa89a242ca
+  languageName: node
+  linkType: hard
+
 "@entur/tokens@npm:3.8.1":
   version: 3.8.1
   resolution: "@entur/tokens@npm:3.8.1"
@@ -3103,6 +3133,50 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@reach/dialog@npm:^0.16.0":
+  version: 0.16.2
+  resolution: "@reach/dialog@npm:0.16.2"
+  dependencies:
+    "@reach/portal": 0.16.2
+    "@reach/utils": 0.16.0
+    prop-types: ^15.7.2
+    react-focus-lock: ^2.5.2
+    react-remove-scroll: ^2.4.3
+    tslib: ^2.3.0
+  peerDependencies:
+    react: ^16.8.0 || 17.x
+    react-dom: ^16.8.0 || 17.x
+  checksum: 1478ad3c4c0a86c30b02f4360fb06ead5b2e894c5e6ab96523970d45272298e2e31cb5278f861e4f92a90bcab0a30f4bac5572ab534f56529145619e7675497f
+  languageName: node
+  linkType: hard
+
+"@reach/portal@npm:0.16.2":
+  version: 0.16.2
+  resolution: "@reach/portal@npm:0.16.2"
+  dependencies:
+    "@reach/utils": 0.16.0
+    tiny-warning: ^1.0.3
+    tslib: ^2.3.0
+  peerDependencies:
+    react: ^16.8.0 || 17.x
+    react-dom: ^16.8.0 || 17.x
+  checksum: 7413dcd169cfb9854dd0d3a01f811ec19ef170558fcbd00118d676fc02c197d1c0bce1d1357508879d4775169561d103e13a8e4d74cc677eb0037cc7b04f7a1e
+  languageName: node
+  linkType: hard
+
+"@reach/utils@npm:0.16.0":
+  version: 0.16.0
+  resolution: "@reach/utils@npm:0.16.0"
+  dependencies:
+    tiny-warning: ^1.0.3
+    tslib: ^2.3.0
+  peerDependencies:
+    react: ^16.8.0 || 17.x
+    react-dom: ^16.8.0 || 17.x
+  checksum: 36bc0eb41a71798eb6186b23de265ba709e51dae5bf214fb8505c66bb3f2e6a41bb2401457350436ba89ca9e3a50f93a04fe7c33d15648ce11e568a85622d770
+  languageName: node
+  linkType: hard
+
 "@repeaterjs/repeater@npm:3.0.4, @repeaterjs/repeater@npm:^3.0.4":
   version: 3.0.4
   resolution: "@repeaterjs/repeater@npm:3.0.4"
@@ -5264,6 +5338,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.4.3":
   version: 29.4.3
   resolution: "diff-sequences@npm:29.4.3"
@@ -6314,6 +6395,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"focus-lock@npm:^0.11.6":
+  version: 0.11.6
+  resolution: "focus-lock@npm:0.11.6"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 6a407c4c45f05f8258f92565541fc5f8043f576643a7603eb999e1a790173e08712056766ed034ccd31c6d6deed259dea558002712fa5ef2432fc6930b9c7a05
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -6486,6 +6576,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -9695,7 +9792,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -9834,6 +9931,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-clientside-effect@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "react-clientside-effect@npm:1.2.6"
+  dependencies:
+    "@babel/runtime": ^7.12.13
+  peerDependencies:
+    react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 7db6110027a51458b1a46109d2b63dd822825f483c71afef7c0c0a671f3b1aa155049dbd8651c9d536ffac83601f8823b7c3f8916b4f4ee5c3cb7647a85cce4e
+  languageName: node
+  linkType: hard
+
 "react-collapse@npm:^5.1.0":
   version: 5.1.1
   resolution: "react-collapse@npm:5.1.1"
@@ -9862,6 +9970,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-focus-lock@npm:^2.5.2, react-focus-lock@npm:^2.9.1":
+  version: 2.9.4
+  resolution: "react-focus-lock@npm:2.9.4"
+  dependencies:
+    "@babel/runtime": ^7.0.0
+    focus-lock: ^0.11.6
+    prop-types: ^15.6.2
+    react-clientside-effect: ^1.2.6
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: f4c696bdbde5008560388622b994c00502d1faeeabff32b02964770c8c020208872f5f6b914b249a8bf3e97cc12e58bb0d227cd33460093654156b7b7f4c8d76
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -9896,6 +10024,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.4":
+  version: 2.3.4
+  resolution: "react-remove-scroll-bar@npm:2.3.4"
+  dependencies:
+    react-style-singleton: ^2.2.1
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b5ce5f2f98d65c97a3e975823ae4043a4ba2a3b63b5ba284b887e7853f051b5cd6afb74abde6d57b421931c52f2e1fdbb625dc858b1cb5a32c27c14ab85649d4
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:^2.4.3":
+  version: 2.5.6
+  resolution: "react-remove-scroll@npm:2.5.6"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.4
+    react-style-singleton: ^2.2.1
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 0a31f822136f4d4cde0c34264b68dd3a0432d36e2ca5162cd2df0f205980debb9a5e107843120220a599275af02df7805f0d5f44e54f2bd8b0c39a7fdd304036
+  languageName: node
+  linkType: hard
+
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: ^1.0.0
+    invariant: ^2.2.4
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7ee8ef3aab74c7ae1d70ff34a27643d11ba1a8d62d072c767827d9ff9a520905223e567002e0bf6c772929d8ea1c781a3ba0cc4a563e92b1e3dc2eaa817ecbe8
+  languageName: node
+  linkType: hard
+
 "react@npm:18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -10804,6 +10984,7 @@ __metadata:
     "@entur/icons": 6.3.0
     "@entur/layout": 2.1.33
     "@entur/loader": 0.4.31
+    "@entur/modal": 1.7.3
     "@entur/tokens": 3.8.1
     "@entur/typography": 1.8.0
     "@firebase/database-types": 0.10.4
@@ -11283,6 +11464,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-callback-ref@npm:1.3.0"
+  dependencies:
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 7913df383a5a6fcb399212eedefaac2e0c6f843555202d4e3010bac3848afe38ecaa3d0d6500ad1d936fbeffd637e6c517e68edb024af5e6beca7f27f3ce7b21
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: ^1.1.0
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
+  languageName: node
+  linkType: hard
+
 "use-sync-external-store@npm:^1.2.0":
   version: 1.2.0
   resolution: "use-sync-external-store@npm:1.2.0"