diff --git a/caster-editor/src/assets/scss/_elementplus.scss b/caster-editor/src/assets/scss/_elementplus.scss
index 37e03538..9bf5680b 100644
--- a/caster-editor/src/assets/scss/_elementplus.scss
+++ b/caster-editor/src/assets/scss/_elementplus.scss
@@ -1,6 +1,5 @@
 /* ============ Element Plus ============ */
 * {
-  --el-color-primary: #{$green-light} !important;
   --el-color-white: #{$white} !important;
   --el-radio-button-checked-bg-color: #{$grey} !important;
   --el-radio-button-checked-text-color: #{$black} !important;
@@ -13,10 +12,26 @@
 
   --el-button-text-color: #{$black} !important;
   --el-button-hover-text-color: #{$black} !important;
+}
+
+.el-button--primary {
+  --el-color-primary: #{$green-light} !important;
   --el-button-hover-border-color: #{$green-light} !important;
   --el-button-hover-bg-color: #{$green-light} !important;
 }
 
+.el-button--danger {
+  --el-color-danger: #{$alertRed} !important;
+  --el-button-hover-border-color: #{$alertRed} !important;
+  --el-button-hover-bg-color: #{$alertRed} !important;
+}
+
+.el-button--info {
+  --el-button-hover-bg-color: #{$grey-medium} !important;
+  --el-button-hover-border-color: #{$grey-medium} !important;
+  --el-button-hover-bg-color: #{$grey-medium} !important;
+}
+
 .el-radio-group {
   .el-radio-button {
     text-align: left;
@@ -47,18 +62,18 @@
   .el-dialog {
     border: 2px solid black;
     width: calc(100% - 2 * $mobilePadding);
-    max-width: 600px;
+    max-width: 500px;
     border-radius: $borderRadius;
   }
 
   .el-dialog__header {
     margin: 0;
-    padding: 35px 35px 10px 35px;
+    padding: 30px 20px 15px 20px;
   }
 
   .el-dialog--center,
   .el-dialog__body {
-    padding: 15px 35px 10px 35px;
+    padding: 0px 20px 0px 20px;
     width: 100%;
     text-align: center;
     word-break: break-word;
@@ -66,7 +81,7 @@
 
   .el-dialog__footer {
     margin-bottom: 15px;
-    padding: 0px 35px 15px 35px;
+    padding: 30px 20px 15px 20px;
   }
 
   label {
diff --git a/caster-editor/src/components/DialogExitGraph.vue b/caster-editor/src/components/DialogExitGraph.vue
index cb500cae..0c89d7ec 100644
--- a/caster-editor/src/components/DialogExitGraph.vue
+++ b/caster-editor/src/components/DialogExitGraph.vue
@@ -23,7 +23,7 @@
             "
           >Cancel</ElButton>
           <ElButton
-            color="#FF0000"
+            type="danger"
             @click="exitGraph()"
           > Exit </ElButton>
         </span>
diff --git a/caster-editor/src/components/DialogExitNode.vue b/caster-editor/src/components/DialogExitNode.vue
index 52c4bbf5..08b686e9 100644
--- a/caster-editor/src/components/DialogExitNode.vue
+++ b/caster-editor/src/components/DialogExitNode.vue
@@ -16,11 +16,19 @@
       <template #footer>
         <span class="dialog-footer">
           <ElButton
-            primary
+            type="info"
             @click="emit('cancel')"
           > Cancel </ElButton>
-          <ElButton @click="emit('noSave')"> Discard changes </ElButton>
-          <ElButton @click="emit('save')"> Save </ElButton>
+          <ElButton
+            type="danger"
+            @click="emit('noSave')"
+          >
+            Discard changes
+          </ElButton>
+          <ElButton
+            type="primary"
+            @click="emit('save')"
+          > Save </ElButton>
         </span>
       </template>
     </ElDialog>
diff --git a/caster-editor/src/components/Menu.vue b/caster-editor/src/components/Menu.vue
index df491463..ed73b2e0 100644
--- a/caster-editor/src/components/Menu.vue
+++ b/caster-editor/src/components/Menu.vue
@@ -9,6 +9,12 @@
           </span>
         </div>
         <div class="menu-items right">
+          <button
+            class="unstyled"
+            @click="goToDocs()"
+          >
+            Docs
+          </button>
           <button
             class="unstyled"
             @click="showExitGraphDialog = true"
@@ -57,6 +63,10 @@ defineProps<{
 const { tab } = storeToRefs(useInterfaceStore());
 
 const showExitGraphDialog: Ref<boolean> = ref(false);
+
+const goToDocs = () => {
+  window.open("https://docs.gencaster.org/", "_blank");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -110,11 +120,13 @@ const showExitGraphDialog: Ref<boolean> = ref(false);
       height: 30px;
       display: flex;
       align-items: center;
+
       .state {
         display: flex;
         justify-content: center;
         align-items: center;
       }
+
       .state-indicator {
         width: 11px;
         height: 11px;