diff --git a/overview/README.md b/overview/README.md
index 3f81f01..bf002e1 100644
--- a/overview/README.md
+++ b/overview/README.md
@@ -20,4 +20,6 @@
 
 ## Layout components
 
-[![List](../ui/list.reel/screenshot.png)](../ui/list.reel)
\ No newline at end of file
+[![List](../ui/list.reel/screenshot.png)](../ui/list.reel)
+[![Alert](../ui/alert.reel/screenshot.png)](../ui/alert.reel)
+[![Confirm](../ui/confirm.reel/screenshot.png)](../ui/confirm.reel)
\ No newline at end of file
diff --git a/overview/ui/main.reel/main.css b/overview/ui/main.reel/main.css
index 58be560..9b8fe18 100644
--- a/overview/ui/main.reel/main.css
+++ b/overview/ui/main.reel/main.css
@@ -87,9 +87,6 @@ td:nth-child(2) { background: hsl(0,0%,90%); }
 td:nth-child(3) { background: hsl(0,0%,96%); }
 td:nth-child(4) { background: hsl(0,0%,24%); }
 
-.layout td:nth-child(3) { background: hsl(0,0%,70%); }
-.layout td:nth-child(4) { background: hsl(0,0%,40%); }
-
 .modal td:nth-child(2) {
     background: hsla(0,0%,0%,.1);
 }
@@ -100,3 +97,13 @@ td:nth-child(4) { background: hsl(0,0%,24%); }
 .layout td:nth-child(4) {
     background: hsl(0,0%,40%);
 }
+
+.test-alert {
+    display: inline-block !important;
+}
+
+.test-alert .montage-Overlay {
+    position: relative !important;
+    display: inline-block !important;
+    margin: 0px;
+}
\ No newline at end of file
diff --git a/overview/ui/main.reel/main.html b/overview/ui/main.reel/main.html
index 619aa2a..d976ae6 100644
--- a/overview/ui/main.reel/main.html
+++ b/overview/ui/main.reel/main.html
@@ -168,6 +168,20 @@ <h2>Layout components</h2>
                     </td>
                 </tr>
 
+                <tr>
+                    <td>Alert</td>
+                    <td><div data-montage-id="alert" class="test-alert"></div></td>
+                    <td data-montage-skin="light"><div data-montage-id="alert-light" class="test-alert"></div></td>
+                    <td data-montage-skin="dark"><div data-montage-id="alert-dark" class="test-alert"></div></td>
+                </tr>
+
+                <tr>
+                    <td>Confirm</td>
+                    <td><div data-montage-id="confirm" class="test-alert"></div></td>
+                    <td data-montage-skin="light"><div data-montage-id="confirm-light" class="test-alert"></div></td>
+                    <td data-montage-skin="dark"><div data-montage-id="confirm-dark" class="test-alert"></div></td>
+                </tr>
+
 
             </tbody>
         </table>
diff --git a/overview/ui/main.reel/main.js b/overview/ui/main.reel/main.js
index b4091bb..7d976c0 100644
--- a/overview/ui/main.reel/main.js
+++ b/overview/ui/main.reel/main.js
@@ -1,3 +1,15 @@
 var Component = require("montage/ui/component").Component;
 
-exports.Main = Component.specialize({});
+exports.Main = Component.specialize({
+
+    draw: {
+        value: function() {
+            // There can normally only be one overlay, absolutely-positioned,
+            // so we need to manually mangle the dom and style them to appear inline.
+            var overlays = ["alert", "alert-light", "alert-dark", "confirm", "confirm-light", "confirm-dark"];
+            overlays.forEach(function(overlayName){
+                this[overlayName].element.appendChild(this[overlayName]._overlay.element);
+            }.bind(this));
+        }
+    }
+});
diff --git a/overview/ui/main.reel/main.json b/overview/ui/main.reel/main.json
index f806c6b..cd5c40e 100644
--- a/overview/ui/main.reel/main.json
+++ b/overview/ui/main.reel/main.json
@@ -1,7 +1,13 @@
 {
     "owner": {
         "properties": {
-            "element": {"#": "main"}
+            "element": {"#": "main"},
+            "alert": {"@": "alert"},
+            "alert-light": {"@": "alert-light"},
+            "alert-dark": {"@": "alert-dark"},
+            "confirm": {"@": "confirm"},
+            "confirm-light": {"@": "confirm-light"},
+            "confirm-dark": {"@": "confirm-dark"}
         }
     },
 
@@ -60,5 +66,13 @@
     "list-2": { "prototype": "ui/list.reel", "properties": { "element": {"#": "list-2"}, "content": [1, 2, 3] } },
     "listItem-2": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-2"} } },
     "list-3": { "prototype": "ui/list.reel", "properties": { "element": {"#": "list-3"}, "content": [1, 2, 3] } },
-    "listItem-3": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-3"} } }
+    "listItem-3": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-3"} } },
+
+    "alert": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert"}, "title": "Title", "message": "This is an alert"}},
+    "alert-light": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert-light"}, "title": "Title", "message": "This is an alert"}},
+    "alert-dark": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert-dark"}, "title": "Title", "message": "This is an alert"}},
+
+    "confirm": { "prototype": "ui/confirm.reel", "properties": { "element": {"#": "confirm"}, "title": "Title", "message": "This is a confirm"}},
+    "confirm-light": { "prototype": "ui/confirm.reel", "properties": { "element": {"#": "confirm-light"}, "title": "Title", "message": "This is a confirm"}},
+    "confirm-dark": { "prototype": "ui/confirm.reel", "properties": { "element": {"#": "confirm-dark"}, "title": "Title", "message": "This is a confirm"}}
 }
diff --git a/test/alert/alert-spec.js b/test/alert/alert-spec.js
new file mode 100644
index 0000000..d49798c
--- /dev/null
+++ b/test/alert/alert-spec.js
@@ -0,0 +1,27 @@
+var TestPageLoader = require("montage-testing/testpageloader").TestPageLoader;
+
+TestPageLoader.queueTest("alert-test", function(testPage) {
+
+    describe("test/alert/alert-spec", function() {
+        it("should load", function() {
+            expect(testPage.loaded).toBe(true);
+        });
+
+        describe("Alert", function() {
+            it("can be created", function() {
+                expect(testPage.test.templateObjects.alert).toBeDefined();
+            });
+
+            it("can be shown", function() {
+                var alert = testPage.test.templateObjects.alert;
+
+                alert.show();
+
+                testPage.waitForComponentDraw(alert._overlay);
+                runs(function() {
+                    expect(testPage.iframe.contentDocument.body.contains(alert._overlay.element)).toBeTruthy();
+                });
+            });
+        });
+    });
+});
diff --git a/test/alert/alert-test.html b/test/alert/alert-test.html
new file mode 100644
index 0000000..8af64ef
--- /dev/null
+++ b/test/alert/alert-test.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Alert Test</title>
+    <script type="text/javascript" src="../../node_modules/montage/montage.js" data-package="../../"></script>
+    <link rel="stylesheet" href="../../ui/text.reel/text.css">
+    <script type="text/montage-serialization">
+        {
+            "test": {
+                "prototype": "test/alert/alert-test[Test]"
+            },
+
+            "alert": {
+                "prototype": "ui/alert.reel",
+                "properties": {
+                    "element": {"#": "alert"},
+                    "title": "A Title",
+                    "message": "A message"
+                }
+            }
+        }
+    </script>
+
+</head>
+<body>
+<h1>Alert</h1>
+
+<div data-montage-id="alert"></div>
+
+</body>
+</html>
diff --git a/test/alert/alert-test.js b/test/alert/alert-test.js
new file mode 100644
index 0000000..b18378c
--- /dev/null
+++ b/test/alert/alert-test.js
@@ -0,0 +1,4 @@
+var TestController = require("montage-testing/test-controller").TestController;
+
+exports.Test = TestController.specialize({
+});
diff --git a/test/all.js b/test/all.js
index fd5bbce..0eec6fb 100644
--- a/test/all.js
+++ b/test/all.js
@@ -1,7 +1,9 @@
 require("montage-testing").run(require,[
     // Please keep in alphabetical order
+    "test/alert/alert-spec",
     "test/button/button-spec",
     "test/checkbox/checkbox-spec",
+    "test/confirm/confirm-spec",
     "test/slider/slider-spec",
     "test/number-field/number-field-spec",
     "test/radio-button/radio-button-spec",
diff --git a/test/confirm/confirm-spec.js b/test/confirm/confirm-spec.js
new file mode 100644
index 0000000..2609f15
--- /dev/null
+++ b/test/confirm/confirm-spec.js
@@ -0,0 +1,43 @@
+var TestPageLoader = require("montage-testing/testpageloader").TestPageLoader;
+
+TestPageLoader.queueTest("confirm-test", function(testPage) {
+
+    describe("test/confirm/confirm-spec", function() {
+        it("should load", function() {
+            expect(testPage.loaded).toBe(true);
+        });
+
+        describe("Confirm", function() {
+            it("can be created", function() {
+                expect(testPage.test.templateObjects.confirm).toBeDefined();
+            });
+
+            it("can be shown", function() {
+                var confirm = testPage.test.templateObjects.confirm;
+
+                confirm.show();
+
+                testPage.waitForComponentDraw(confirm._overlay);
+                runs(function() {
+                    expect(testPage.iframe.contentDocument.body.contains(confirm._overlay.element)).toBeTruthy();
+                });
+            });
+
+            it("uses the configured ok label", function() {
+                var confirm = testPage.test.templateObjects.confirm;
+
+                confirm.okLabel = "Okay";
+
+                expect(confirm._okButton.label).toBe("Okay");
+            });
+
+            it("uses the configured cancel label", function() {
+                var confirm = testPage.test.templateObjects.confirm;
+
+                confirm.cancelLabel = "Nay";
+
+                expect(confirm._cancelButton.label).toBe("Nay");
+            });
+        });
+    });
+});
diff --git a/test/confirm/confirm-test.html b/test/confirm/confirm-test.html
new file mode 100644
index 0000000..668dacf
--- /dev/null
+++ b/test/confirm/confirm-test.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Confirm Test</title>
+    <script type="text/javascript" src="../../node_modules/montage/montage.js" data-package="../../"></script>
+    <script type="text/montage-serialization">
+        {
+            "test": {
+                "prototype": "test/confirm/confirm-test[Test]"
+            },
+
+            "confirm": {
+                "prototype": "ui/confirm.reel",
+                "properties": {
+                    "element": {"#": "confirm"},
+                    "title": "A Title",
+                    "message": "A message",
+                    "okLabel": "Okay",
+                    "cancelLabel": "Nay"
+                }
+            }
+        }
+    </script>
+
+</head>
+<body>
+<h1>Confirm</h1>
+
+<div data-montage-id="confirm"></div>
+
+</body>
+</html>
diff --git a/test/confirm/confirm-test.js b/test/confirm/confirm-test.js
new file mode 100644
index 0000000..b18378c
--- /dev/null
+++ b/test/confirm/confirm-test.js
@@ -0,0 +1,4 @@
+var TestController = require("montage-testing/test-controller").TestController;
+
+exports.Test = TestController.specialize({
+});
diff --git a/ui/alert.reel/README.md b/ui/alert.reel/README.md
new file mode 100644
index 0000000..3b6bfa1
--- /dev/null
+++ b/ui/alert.reel/README.md
@@ -0,0 +1,46 @@
+# Alert
+
+![Alert](screenshot.png)
+
+The alert displays a message to the user, popping up above other content.
+
+## How to use
+
+```json
+"alert": {
+    "prototype": "ui/alert.reel",
+    "properties": {
+        "element": {"#": "alert"},
+        "title": "A Title",
+        "message": "A message",
+        "okLabel": "Ok"
+    }
+}
+```
+
+```html
+<div data-montage-id="alert"></span>
+```
+
+
+
+## Available properties
+
+* `title` - The text to appear in the title bar.
+* `message` - The text to appear in the body.
+* `okLabel` - The text to appear in the button to dismiss the alert.
+
+
+
+## Customizing with CSS
+
+* `.digit-Alert` - The container element
+* `.digit-Alert-header` - The header element
+* `.digit-Alert-content` - The main content element
+* `.digit-Alert-footer` - The footer element
+
+```css
+.digit-Alert-header {
+    background: red;
+}
+```
diff --git a/ui/alert.reel/alert.css b/ui/alert.reel/alert.css
new file mode 100644
index 0000000..591909b
--- /dev/null
+++ b/ui/alert.reel/alert.css
@@ -0,0 +1,113 @@
+.digit-Alert-Overlay {
+    margin: 20px auto;
+    max-width: 300px;
+    min-width: 200px;
+    font-size: 16px;
+    border-radius: 6px;
+    background-color: hsl(0,0%,96%);
+}
+
+.digit-Alert--show {
+    opacity: 1;
+    transform: scale(1);
+    -moz-transform: scale(1);
+    -webkit-transform: scale(1);
+    transition-timing-function: cubic-bezier(0.23,0.21,0.00,1.00);
+    -moz-transition-timing-function: cubic-bezier(0.23,0.21,0.00,1.00);
+    -webkit-transition-timing-function: cubic-bezier(0.23,0.21,0.00,1.00);
+}
+
+.digit-Alert-content {
+    padding: 10px;
+    text-align: center;
+}
+
+
+.digit-Alert-header,
+.digit-Alert-footer {
+    padding: 10px;
+    background-color: hsl(0,0%,90%);
+}
+
+.digit-Alert-header {
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: bold;
+    border-bottom: 1px solid hsla(0,0%,0%,.06);
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.digit-Alert-footer {
+    text-align: right;
+    border-top: 1px solid hsla(0,0%,0%,.06);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+.digit-Button.digit-Alert-button--cancel {
+    color: hsl(0,0%,60%);
+    border-color: hsl(0,0%,80%);
+    background-color: transparent;
+}
+
+
+/* Light ------------------------------------ */
+
+
+[data-montage-skin="light"] .digit-Alert {
+    color: hsl(0,0%,40%);
+    text-shadow: 0 1px 0 hsla(0,0%,100%,.4);
+    background: hsl(0,0%,90%);
+}
+
+[data-montage-skin="light"] .digit-Alert-header,
+[data-montage-skin="light"] .digit-Alert-footer {
+    background-image: linear-gradient(top, hsl(0,0%,96%), hsl(0,0%,92%));
+    background-image: -moz-linear-gradient(top, hsl(0,0%,96%), hsl(0,0%,92%));
+    background-image: -webkit-linear-gradient(top, hsl(0,0%,96%), hsl(0,0%,92%));
+}
+
+[data-montage-skin="light"] .digit-Alert-header {
+    border-bottom: 1px solid hsla(0,0%,0%,.12);
+}
+
+[data-montage-skin="light"] .digit-Button.digit-Alert-button--cancel {
+    color: hsl(0,0%,60%);
+    border-color: hsl(0,0%,86%);
+    background: transparent;
+    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.2), inset 0 -1px 1px hsla(0,0%,0%,.04), 0 1px 0 hsla(0,0%,100%,.6);
+}
+
+
+/* Dark ------------------------------------ */
+
+[data-montage-skin="dark"] .digit-Alert {
+    background: hsl(0,0%,20%);
+}
+
+[data-montage-skin="dark"] .digit-Alert-content {
+    color: hsl(0,0%,40%);
+    text-shadow: 0 1px 0 hsla(0,0%,100%,.4);
+    background: hsl(0,0%,90%);
+}
+
+[data-montage-skin="dark"] .digit-Alert-header,
+[data-montage-skin="dark"] .digit-Alert-footer {
+    background-image: linear-gradient(top, hsl(0,0%,26%), hsl(0,0%,20%) );
+    background-image: -moz-linear-gradient(top, hsl(0,0%,26%), hsl(0,0%,20%) );
+    background-image: -webkit-linear-gradient(top, hsl(0,0%,26%), hsl(0,0%,20%) );
+}
+
+[data-montage-skin="dark"] .digit-Alert-header {
+    color: hsl(0,0%,70%);
+    text-shadow: none;
+    border-bottom: 1px solid hsla(0,0%,100%,.9);
+}
+
+[data-montage-skin="dark"] .digit-Button.digit-Alert-button--cancel {
+    color: hsl(0,0%,50%);
+    border-color: hsl(0,0%,16%);
+    background: transparent;
+    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.06), inset 0 -1px 1px hsla(0,0%,0%,.04), 0 1px 0 hsla(0,0%,100%,.1);
+}
\ No newline at end of file
diff --git a/ui/alert.reel/alert.html b/ui/alert.reel/alert.html
new file mode 100644
index 0000000..94b572b
--- /dev/null
+++ b/ui/alert.reel/alert.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="alert.css">
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "properties": {
+                "element": {"#": "alert"}
+            }
+        },
+        "message": {
+            "prototype": "ui/text.reel",
+            "properties": {
+                "element": {"#": "message"}
+            },
+            "bindings": {
+                "value": {"<-": "@owner.message"}
+            }
+        },
+        "modalOverlay": {
+            "prototype": "montage/ui/modal-overlay.reel",
+            "properties": {
+                "element": {"#": "modalOverlay"}
+            }
+        },
+        "okButton": {
+            "prototype": "ui/button.reel",
+            "properties": {
+                "element": {"#": "okButton"}
+            },
+            "bindings": {
+                "label": {"<-": "@owner.okLabel"}
+            }
+        },
+        "title": {
+            "prototype": "ui/text.reel",
+            "properties": {
+                "element": {"#": "title"}
+            },
+            "bindings": {
+                "value": {"<-": "@owner.title"}
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div data-montage-id="alert" class="digit-Alert">
+        <div data-montage-id="modalOverlay" class="digit-Alert-Overlay">
+            <header data-montage-id="title" class="digit-Alert-header"></header>
+            <div data-montage-id="message" class="digit-Alert-content"></div>
+            <footer class="digit-Alert-footer">
+                <button data-montage-id="okButton" class="Button montage-Alert-button--ok"></button>
+            </footer>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui/alert.reel/alert.js b/ui/alert.reel/alert.js
new file mode 100644
index 0000000..dab46cd
--- /dev/null
+++ b/ui/alert.reel/alert.js
@@ -0,0 +1,23 @@
+/**
+ * @module ui/alert.reel
+ */
+var AbstractAlert = require("montage/ui/base/abstract-alert").AbstractAlert;
+
+/**
+ * @class Alert
+ * @extends AbstractAlert
+ */
+exports.Alert = AbstractAlert.specialize(/** @lends Alert# */ {
+    constructor: {
+        value: function Alert() {
+            this.super();
+        }
+    },
+
+    templateDidLoad: {
+        value: function() {
+            this._overlay = this.templateObjects.modalOverlay;
+            this._okButton = this.templateObjects.okButton;
+        }
+    }
+});
diff --git a/ui/alert.reel/alert.meta b/ui/alert.reel/alert.meta
new file mode 100644
index 0000000..97f3aac
--- /dev/null
+++ b/ui/alert.reel/alert.meta
@@ -0,0 +1,22 @@
+{
+    "blueprint_parent": {
+        "prototype": "montage/core/meta/blueprint-reference",
+        "properties": {
+            "valueReference": {
+                "blueprintName": "AbstractAlert",
+                "blueprintModuleId": "montage/ui/base/abstract-alert.meta",
+                "prototypeName": "AbstractAlert"
+            }
+        }
+    },
+
+    "root": {
+        "prototype": "montage/core/meta/blueprint",
+        "properties": {
+            "name": "Alert",
+            "blueprintModuleId": "ui/alert.reel/alert.meta",
+            "prototypeName": "Alert",
+            "parent": {"@": "blueprint_parent"}
+        }
+    }
+}
diff --git a/ui/alert.reel/screenshot.png b/ui/alert.reel/screenshot.png
new file mode 100644
index 0000000..237e2fd
Binary files /dev/null and b/ui/alert.reel/screenshot.png differ
diff --git a/ui/confirm.reel/README.md b/ui/confirm.reel/README.md
new file mode 100644
index 0000000..754aa80
--- /dev/null
+++ b/ui/confirm.reel/README.md
@@ -0,0 +1,48 @@
+# Confirm
+
+![Confirm](screenshot.png)
+
+The confirm asks the user to accept or reject a message.
+
+## How to use
+
+```json
+"confirm": {
+    "prototype": "ui/confirm.reel",
+    "properties": {
+        "element": {"#": "confirm"},
+        "title": "Warning",
+        "message": "Are you sure you want to do this?",
+        "okLabel": "Ok",
+        "cancelLabel": "Nope!"
+    }
+}
+```
+
+```html
+<div data-montage-id="confirm"></span>
+```
+
+
+
+## Available properties
+
+* `title` - The text to appear in the title bar.
+* `message` - The text to appear in the body.
+* `okLabel` - The text to appear in the button to accept.
+* 'cancelLabel' - The text to appear in the button to cancel.
+
+
+
+## Customizing with CSS
+
+* `.digit-Confirm` - The container element
+* `.digit-Confirm-header` - The header element
+* `.digit-Confirm-content` - The main content element
+* `.digit-Confirm-footer` - The footer element
+
+```css
+.digit-Confirm-header {
+    background: red;
+}
+```
diff --git a/ui/confirm.reel/confirm.html b/ui/confirm.reel/confirm.html
new file mode 100644
index 0000000..68b04e0
--- /dev/null
+++ b/ui/confirm.reel/confirm.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../alert.reel/alert.css">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "properties": {
+                    "element": {"#": "confirm"}
+                }
+            },
+            "message": {
+                "prototype": "ui/text.reel",
+                "properties": {
+                    "element": {"#": "message"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.message"}
+                }
+            },
+            "modalOverlay": {
+                "prototype": "montage/ui/modal-overlay.reel",
+                "properties": {
+                    "element": {"#": "modalOverlay"}
+                }
+            },
+            "okButton": {
+                "prototype": "ui/button.reel",
+                "properties": {
+                    "element": {"#": "okButton"}
+                },
+                "bindings": {
+                    "label": {"<-": "@owner.okLabel"}
+                }
+            },
+            "cancelButton": {
+                "prototype": "ui/button.reel",
+                "properties": {
+                    "element": {"#": "cancelButton"}
+                },
+                "bindings": {
+                    "label": {"<-": "@owner.cancelLabel"}
+                }
+            },
+            "title": {
+                "prototype": "ui/text.reel",
+                "properties": {
+                    "element": {"#": "title"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.title"}
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+<div data-montage-id="confirm" class="digit-Alert digit-Confirm">
+    <div data-montage-id="modalOverlay" class="digit-Alert-Overlay">
+        <header data-montage-id="title" class="digit-Alert-header"></header>
+        <div data-montage-id="message" class="digit-Alert-content"></div>
+        <footer class="digit-Alert-footer">
+            <button data-montage-id="cancelButton" class="Button montage-Alert-button--cancel"></button>
+            <button data-montage-id="okButton" class="Button montage-Alert-button--ok"></button>
+        </footer>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui/confirm.reel/confirm.js b/ui/confirm.reel/confirm.js
new file mode 100644
index 0000000..9706479
--- /dev/null
+++ b/ui/confirm.reel/confirm.js
@@ -0,0 +1,24 @@
+/**
+ * @module ui/confirm.reel
+ */
+var AbstractConfirm = require("montage/ui/base/abstract-confirm").AbstractConfirm;
+
+/**
+ * @class Confirm
+ * @extends AbstractConfirm
+ */
+exports.Confirm = AbstractConfirm.specialize(/** @lends Confirm# */ {
+    constructor: {
+        value: function Confirm() {
+            this.super();
+        }
+    },
+
+    templateDidLoad: {
+        value: function() {
+            this._overlay = this.templateObjects.modalOverlay;
+            this._okButton = this.templateObjects.okButton;
+            this._cancelButton = this.templateObjects.cancelButton;
+        }
+    }
+});
diff --git a/ui/confirm.reel/confirm.meta b/ui/confirm.reel/confirm.meta
new file mode 100644
index 0000000..dd1a758
--- /dev/null
+++ b/ui/confirm.reel/confirm.meta
@@ -0,0 +1,22 @@
+{
+    "blueprint_parent": {
+        "prototype": "montage/core/meta/blueprint-reference",
+        "properties": {
+            "valueReference": {
+                "blueprintName": "AbstractConfirm",
+                "blueprintModuleId": "montage/ui/base/abstract-confirm.meta",
+                "prototypeName": "AbstractConfirm"
+            }
+        }
+    },
+
+    "root": {
+        "prototype": "montage/core/meta/blueprint",
+        "properties": {
+            "name": "Confirm",
+            "blueprintModuleId": "ui/confirm.reel/confirm.meta",
+            "prototypeName": "Confirm",
+            "parent": {"@": "blueprint_parent"}
+        }
+    }
+}
diff --git a/ui/confirm.reel/screenshot.png b/ui/confirm.reel/screenshot.png
new file mode 100644
index 0000000..f0637bd
Binary files /dev/null and b/ui/confirm.reel/screenshot.png differ