diff --git a/ide/qml/Constants.qml b/ide/qml/Constants.qml
new file mode 100644
index 0000000..a6d02fb
--- /dev/null
+++ b/ide/qml/Constants.qml
@@ -0,0 +1,8 @@
+pragma Singleton
+
+import QtQuick 2.0
+import QtQuick.Controls.Material 2.0
+
+QtObject {
+    readonly property var buttonGrey: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
+}
diff --git a/ide/qml/DocumentPadding.qml b/ide/qml/DocumentPadding.qml
deleted file mode 100644
index 3c47413..0000000
--- a/ide/qml/DocumentPadding.qml
+++ /dev/null
@@ -1,9 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.3
-
-ColumnLayout {
-    Layout.topMargin: 10
-    Layout.bottomMargin: 10
-    Layout.leftMargin: 12
-    Layout.rightMargin: 12
-}
diff --git a/ide/qml/InsertRow.qml b/ide/qml/InsertRow.qml
index fd7d8b9..a60dab7 100644
--- a/ide/qml/InsertRow.qml
+++ b/ide/qml/InsertRow.qml
@@ -57,7 +57,7 @@
             id: addButton
             anchors.centerIn: parent
             icon.source: "qrc:///icons/add.svg"
-            icon.color: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
+            icon.color: Constants.buttonGrey
             flat: true
 
             onClicked: root.insertClicked()
diff --git a/ide/qml/NotebookCell.qml b/ide/qml/NotebookCell.qml
index f51ffaa..240e7f8 100644
--- a/ide/qml/NotebookCell.qml
+++ b/ide/qml/NotebookCell.qml
@@ -11,89 +11,128 @@
     required property string code
     required property string result
     property int status: Cell.IDLE
+    property bool cellActive: false
 
     signal insertBelowClicked()
     signal codeEditingFinished(string code)
     signal cellFocused()
+    signal cellUnfocused()
     signal runClicked()
+    signal deleteClicked()
 
     height: column.height
 
-    MouseArea {
-        id: selectCell
-
-        anchors.fill: column
-
-        onClicked: root.cellFocused()
-    }
+    Keys.onEscapePressed: root.cellUnfocused()
 
     ColumnLayout {
         id: column
 
-        width: parent.width
+        width: parent.width - 20
+        anchors.centerIn: parent
 
-        RowLayout {
-            id: row
+        Item {
+            implicitWidth: row.implicitWidth
+            implicitHeight: row.implicitHeight
             Layout.fillWidth: true
 
-            RoundButton {
-                Layout.alignment: Qt.AlignTop
-                icon.source: iconForState(root.state)
-                icon.color: Material.color(Material.Grey, Material.Shade600)
-                flat: true
+            Pane {
+                anchors.fill: parent
+                anchors.topMargin: -5
+                anchors.bottomMargin: -5
 
-                onClicked: root.runClicked()
-
-                function iconForState(state) {
-                    if (state === Cell.RUNNING)
-                        return "qrc:///icons/square.svg"
-
-                    return "qrc:///icons/play-circle.svg"
-                }
+                Material.elevation: root.cellActive ? 4 : 0
             }
 
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
+            MouseArea {
+                id: selectCell
 
-                TextArea {
+                anchors.fill: row
+
+                onClicked: root.cellFocused()
+            }
+
+            RowLayout {
+                anchors.fill: parent
+                id: row
+
+                RoundButton {
+                    Layout.alignment: Qt.AlignTop
+                    icon.source: iconForState(root.state)
+                    icon.color: Material.color(Material.Grey, Material.Shade600)
+                    flat: true
+
+                    onClicked: root.runClicked()
+
+                    function iconForState(state) {
+                        if (state === Cell.RUNNING)
+                            return "qrc:///icons/square.svg"
+
+                        return "qrc:///icons/play-circle.svg"
+                    }
+                }
+
+                ColumnLayout {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    id: code
-                    font.family: "monospace"
-                    text: root.code
-                    selectByMouse: true
-                    wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
 
-                    Keys.onTabPressed: {
-                        var pos = cursorPosition + 4
-                        text = text.slice(0, cursorPosition) + "    " + text.slice(cursorPosition);
-                        cursorPosition = pos
+                    TextArea {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        id: code
+                        font.family: "monospace"
+                        text: root.code
+                        selectByMouse: true
+                        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+
+                        placeholderText: "Write some code..."
+
+                        Keys.onTabPressed: {
+                            var pos = cursorPosition + 4
+                            text = text.slice(0, cursorPosition) + "    " + text.slice(cursorPosition);
+                            cursorPosition = pos
+                        }
+
+//                        Keys.onEscapePressed: {
+//                            focus = false
+//                        }
+
+                        onEditingFinished: {
+                            root.codeEditingFinished(text)
+                        }
+
+                        onFocusChanged: if (focus) root.cellFocused()
+                        onActiveFocusChanged: if (activeFocus) root.cellFocused()
                     }
 
-                    Keys.onEscapePressed: {
-                        root.forceActiveFocus()
-                    }
+                    Label {
+                        visible: root.result.length > 0
+                        Layout.fillWidth: true
+                        font.family: "monospace"
+                        text: root.result
 
-                    onEditingFinished: {
-                        root.codeEditingFinished(text)
+                        Layout.bottomMargin: 5
                     }
-
-                    onFocusChanged: if (focus) root.cellFocused()
                 }
 
-                Label {
-                    visible: root.result.length > 0
-                    Layout.fillWidth: true
-                    font.family: "monospace"
-                    text: root.result
-                }
-            }
+                RoundButton {
+                    icon.source: "qrc:///icons/menu.svg"
+                    icon.color: Constants.buttonGrey
+                    flat: true
 
-            RoundButton {
-                icon.source: "qrc:///icons/trash.svg"
-                icon.color: Material.color(Material.Grey, Material.theme == Material.Dark ? Material.Shade400 : Material.Shade600)
-                flat: true
+                    onClicked: cellContextMenu.popup()
+
+                    Menu {
+                        id: cellContextMenu
+
+                        MenuItem {
+                            icon.source: "qrc:///icons/trash.svg"
+                            icon.color: Material.color(Material.Red)
+                            text: "Delete"
+
+                            onClicked: root.deleteClicked()
+                        }
+                    }
+                }
             }
         }
 
diff --git a/ide/qml/main.qml b/ide/qml/main.qml
index ef6134a..e561ae0 100644
--- a/ide/qml/main.qml
+++ b/ide/qml/main.qml
@@ -19,12 +19,6 @@
         id: notebook
     }
 
-    Component.onCompleted: {
-        notebook.cellModel.addCell("Refal { = Hi!; }", "");
-        notebook.cellModel.addCell("<Refal>", "Hi!");
-        notebook.cellModel.addCell("Hello there", "Hello there");
-    }
-
     ColumnLayout {
         id: column
         anchors.fill: parent
@@ -35,12 +29,12 @@
             Layout.fillWidth: true
 
             TabButton {
-                text: "Example Workspace"
+                text: "Notebook"
                 width: implicitWidth
             }
 
             TabButton {
-                text: "Another Workspace"
+                text: "Another Notebook"
                 width: implicitWidth
             }
 
@@ -63,10 +57,12 @@
                 model: notebook.cellModel
                 clip: true
 
+                spacing: 5
+
                 header: ColumnLayout {
                     width: codeEditor.width
 
-                    DocumentPadding {
+                    Pane {
                         Layout.bottomMargin: 0
 
                         Label {
@@ -87,11 +83,12 @@
                     required property var index
                     required property var uuid
 
-                    width: codeEditor.width - 5
+                    width: codeEditor.width
 
                     code: model.code
                     result: model.result.trim()
                     status: model.status
+                    cellActive: codeEditor.currentIndex === index
 
                     onCodeEditingFinished: model.code = code
 
@@ -104,6 +101,18 @@
                         console.info("Cell run clicked")
                         notebook.runCell(uuid)
                     }
+
+                    onCellFocused: {
+                        codeEditor.currentIndex = index
+                    }
+
+                    onDeleteClicked: {
+                        notebook.cellModel.deleteCellAt(index)
+                    }
+
+                    onCellUnfocused: {
+                        codeEditor.currentIndex = -1
+                    }
                 }
             }
 
diff --git a/ide/qml/qmldir b/ide/qml/qmldir
new file mode 100644
index 0000000..0df2a6f
--- /dev/null
+++ b/ide/qml/qmldir
@@ -0,0 +1 @@
+singleton Constants Constants.qml
diff --git a/ide/qml/qtquickcontrols2.conf b/ide/qml/qtquickcontrols2.conf
new file mode 100644
index 0000000..433a54e
--- /dev/null
+++ b/ide/qml/qtquickcontrols2.conf
@@ -0,0 +1,5 @@
+[Controls]
+Style=Material
+
+[Material]
+Variant=Dense