diff --git a/client/web/compose/src/components/Admin/Page/Tree.vue b/client/web/compose/src/components/Admin/Page/Tree.vue
index c6c0b26f11..d04695c10e 100644
--- a/client/web/compose/src/components/Admin/Page/Tree.vue
+++ b/client/web/compose/src/components/Admin/Page/Tree.vue
@@ -3,7 +3,7 @@
     <sortable-tree
       v-if="list.length"
       :draggable="namespace.canCreatePage"
-      :data="{children:list}"
+      :data="{ children: list }"
       tag="ul"
       mixin-parent-key="parent"
       class="list-group"
@@ -15,10 +15,10 @@
         <div
           v-if="item.pageID"
           no-gutters
-          class="d-flex flex-wrap align-content-center justify-content-between pr-2"
+          class="d-flex flex-wrap align-content-center justify-content-between"
         >
           <div
-            class="px-2 flex-fill overflow-hidden text-truncate gap-1"
+            class="px-2 flex-fill overflow-hidden text-truncate gap-1 rounded-lg"
             :class="{'grab': namespace.canCreatePage }"
           >
             {{ item.title }}
@@ -88,7 +88,7 @@
               data-test-id="dropdown-permissions"
               variant="extra-light"
               size="sm"
-              class="permissions-dropdown ml-1"
+              class="permissions-dropdown ml-2"
             >
               <template #button-content>
                 <font-awesome-icon :icon="['fas', 'lock']" />
@@ -121,6 +121,52 @@
                 />
               </b-dropdown-item>
             </b-dropdown>
+
+            <template v-if="item.canDeletePage">
+              <b-dropdown
+                v-if="hasChildren(item)"
+                data-test-id="dropdown-delete"
+                variant="outline-danger"
+                :disabled="item.processingDelete"
+                size="sm"
+                toggle-class="border-0"
+                class="ml-2"
+              >
+                <template #button-content>
+                  <font-awesome-icon
+                    v-if="!item.processingDelete"
+                    :icon="['far', 'trash-alt']"
+                  />
+
+                  <b-spinner
+                    v-else
+                    small
+                  />
+                </template>
+                <b-dropdown-item
+                  data-test-id="dropdown-item-delete-update-parent-of-sub-pages"
+                  @click="handleDeletePage(item, 'rebase')"
+                >
+                  {{ $t('delete.rebase') }}
+                </b-dropdown-item>
+                <b-dropdown-item
+                  data-test-id="dropdown-item-delete-sub-pages"
+                  @click="handleDeletePage(item, 'cascade')"
+                >
+                  {{ $t('delete.cascade') }}
+                </b-dropdown-item>
+              </b-dropdown>
+
+              <c-input-confirm
+                v-else
+                show-icon
+                size="md"
+                button-class="px-2"
+                :processing="item.processingDelete"
+                class="ml-2"
+                @confirmed="handleDeletePage(item, 'cascade')"
+              />
+            </template>
           </div>
         </div>
       </template>
@@ -191,6 +237,7 @@ export default {
 
   methods: {
     ...mapActions({
+      deletePage: 'page/delete',
       updatePage: 'page/update',
     }),
 
@@ -216,10 +263,11 @@ export default {
         const pageIDs = afterParent.children.map(p => p.pageID)
         if (pageIDs.length) {
           this.$ComposeAPI.pageReorder({ namespaceID, selfID: afterID, pageIDs }).then(() => {
-            return this.$store.dispatch('page/load', { namespaceID, clear: true, force: true })
-          }).then(() => {
-            this.toastSuccess(this.$t('reordered'))
             this.$emit('reorder')
+
+            setTimeout(() => {
+              this.$store.dispatch('page/load', { namespaceID, clear: true, force: true })
+            }, 1000)
           })
             .catch(this.toastErrorHandler(this.$t('pageMoveFailed')))
         }
@@ -239,6 +287,23 @@ export default {
       }
     },
 
+    handleDeletePage (page, strategy = 'abort') {
+      this.$set(page, 'processingDelete', true)
+
+      this.deletePage({ ...page, strategy }).then(() => {
+        setTimeout(() => {
+          this.$emit('reorder')
+          this.toastSuccess(this.$t('notification:page.deleted'))
+        }, 300)
+      })
+        .catch(this.toastErrorHandler(this.$t('notification:page.deleteFailed')))
+        .finally(() => {
+          setTimeout(() => {
+            this.$set(page, 'processingDelete', false)
+          }, 300)
+        })
+    },
+
     /**
      * Validates page, returns true if there are no problems with it
      *
@@ -252,6 +317,10 @@ export default {
 
       return true
     },
+
+    hasChildren (page) {
+      return page.children && page.children.length > 0
+    },
   },
 }
 </script>
@@ -265,19 +334,20 @@ export default {
 
 <style lang="scss">
 //!important usage to over-ride library styling
-$input-height: 42px;
-$content-height: 48px;
-$blank-li-height: 10px;
-$left-padding: 5px;
+$input-height: 2.4rem;
+$content-height: 2.4rem;
+$blank-li-height: 1rem;
+$padding: 0.5rem;
 $border-color: var(--light);
-$hover-color: var(--light);
-$dropping-color: var(--secondary);
+$hover-color: var(--extra-light);
+$dropping-color: var(--extra-light);
 
 .page-name-input {
   height: $input-height;
 }
 
 .list-group {
+  padding-right: $padding;
   .content {
     height: 0 !important;
   }
@@ -287,13 +357,16 @@ $dropping-color: var(--secondary);
       height: 100% !important;
       min-height: $content-height !important;
       line-height: $content-height !important;
+      background-color: var(--light);
+      border-radius: 0.3rem !important;
+      margin-left: 12px;
 
       .actions {
         display: none;
       }
 
       &:hover {
-        background-color: $hover-color !important;
+        background-color: $hover-color;
 
         .actions {
           display: block;
@@ -338,9 +411,13 @@ $dropping-color: var(--secondary);
 
   .parent-li {
     border-top: 1px solid $border-color;
+    padding-bottom: $padding !important;
+    padding-top: $padding !important;
 
     .exist-li, .blank-li {
       border-top: none;
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
 
       &::after {
         border-top: 2px solid $border-color !important;
@@ -374,8 +451,22 @@ $dropping-color: var(--secondary);
   }
 }
 
+.draging {
+  background-color: var(--white) !important;
+}
+
 .droper {
-  background: $dropping-color !important;
+  background-color: $dropping-color !important;
+  border-radius: 0.3rem !important;
+  margin-left: 0px !important;
+
+  .content:first-child {
+    background-color: $dropping-color !important;
+  }
+
+  .blank-li.first-child {
+    background-color: $dropping-color !important;
+  }
 }
 
 .pages-list-header {
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index 489840a56a..08fc9497b1 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -68,6 +68,7 @@
                         <b-form-input
                           v-model="chart.name"
                           :state="nameState"
+                          :placeholder="$t('general.placeholder.name')"
                         />
                       </b-form-group>
                     </b-col>
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index 4cd8ab6064..ca14cb93e9 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -174,7 +174,7 @@
                     lg="6"
                   >
                     <b-form-group
-                      :label="$t('newLabel')"
+                      :label="$t('general.label.name')"
                       label-class="text-primary"
                     >
                       <b-form-input
@@ -182,7 +182,7 @@
                         data-test-id="input-module-name"
                         required
                         :state="nameState"
-                        :placeholder="$t('newPlaceholder')"
+                        :placeholder="$t('general.placeholder.name')"
                       />
                     </b-form-group>
                   </b-col>
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 41c4236c9b..d8d5bb3d5e 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -1136,6 +1136,10 @@ export default {
 
       setTimeout(() => {
         this.processingLayout = false
+
+        if (!this.blocks.length) {
+          this.$bvModal.show('createBlockSelector')
+        }
       }, 400)
     },
 
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 202870880d..e24a99e5f7 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -114,18 +114,13 @@
             lg="6"
           >
             <b-form-group
-              :label="`${$t('newPlaceholder')} *`"
+              :label="$t('label.title')"
               label-class="text-primary"
             >
-              <input
-                id="id"
-                v-model="page.pageID"
-                required
-                type="hidden"
-              >
               <b-form-input
                 v-model="page.title"
                 data-test-id="input-title"
+                :placeholder="$t('placeholder.title')"
                 required
                 :state="titleState"
                 class="mb-2"
@@ -1330,13 +1325,16 @@ export default {
       this.processingDelete = true
 
       this.deletePage({ ...this.page, strategy }).then(() => {
-        this.page.deletedAt = new Date()
-
-        this.$router.push({ name: 'admin.pages' })
+        setTimeout(() => {
+          this.toastSuccess(this.$t('notification:page.deleted'))
+          this.$router.push({ name: 'admin.pages' })
+        }, 300)
       })
         .catch(this.toastErrorHandler(this.$t('notification:page.deleteFailed')))
         .finally(() => {
-          this.processingDelete = false
+          setTimeout(() => {
+            this.processingDelete = false
+          }, 300)
         })
     },
 
diff --git a/client/web/compose/src/views/Admin/Pages/List.vue b/client/web/compose/src/views/Admin/Pages/List.vue
index fc717a56ff..df89009850 100644
--- a/client/web/compose/src/views/Admin/Pages/List.vue
+++ b/client/web/compose/src/views/Admin/Pages/List.vue
@@ -26,16 +26,22 @@
                 required
                 type="text"
                 class="h-100"
-                :placeholder="$t('newPlaceholder')"
+                :placeholder="$t('placeholder.title')"
               />
               <b-input-group-append>
                 <b-button
                   data-test-id="button-create-page"
                   type="submit"
                   variant="primary"
+                  :disabled="creatingPage"
+                  class="d-flex align-items-center gap-1"
                   @click="createNewPage"
                 >
-                  {{ $t('createLabel') }}
+                  {{ $t('label.createPage') }}
+                  <b-spinner
+                    v-if="creatingPage"
+                    small
+                  />
                 </b-button>
               </b-input-group-append>
             </b-input-group>
@@ -138,6 +144,8 @@ export default {
       page: new compose.Page({ visible: true }),
       processing: false,
       abortableRequests: [],
+
+      creatingPage: false,
     }
   },
 
@@ -156,8 +164,11 @@ export default {
       createPageLayout: 'pageLayout/create',
     }),
 
-    loadTree () {
-      this.processing = true
+    loadTree (toggleProcessing = true) {
+      if (toggleProcessing) {
+        this.processing = true
+      }
+
       const { namespaceID } = this.namespace
 
       const { response, cancel } = this.$ComposeAPI
@@ -174,27 +185,35 @@ export default {
           }
         })
         .finally(() => {
-          this.processing = false
+          if (toggleProcessing) {
+            this.processing = false
+          }
         })
     },
 
     createNewPage () {
+      this.creatingPage = true
+
       const { namespaceID } = this.namespace
       this.page.weight = this.tree.length
       this.createPage({ ...this.page, namespaceID }).then(({ pageID, title }) => {
         const pageLayout = new compose.PageLayout({ namespaceID, pageID, handle: 'primary', meta: { title } })
         return this.createPageLayout(pageLayout).then(() => {
-          this.$router.push({ name: 'admin.pages.edit', params: { pageID } })
+          this.$router.push({ name: 'admin.pages.builder', params: { pageID } })
         })
       }).catch((e) => {
         if (!axios.isCancel(e)) {
           this.toastErrorHandler(this.$t('notification:page.saveFailed'))(e)
         }
+      }).finally(() => {
+        setTimeout(() => {
+          this.creatingPage = false
+        }, 400)
       })
     },
 
     handleReorder () {
-      this.loadTree()
+      this.loadTree(false)
     },
 
     setDefaultValues () {
diff --git a/client/web/compose/src/views/Public/Index.vue b/client/web/compose/src/views/Public/Index.vue
index 39b87c1675..7b150ed0b6 100644
--- a/client/web/compose/src/views/Public/Index.vue
+++ b/client/web/compose/src/views/Public/Index.vue
@@ -38,7 +38,7 @@
                 :disabled="!namespace.canCreateModule"
                 variant="outline-primary"
                 size="lg"
-                @click="createNewModule"
+                :to="{ name: 'admin.modules.new' }"
               >
                 {{ $t('step.module.create') }}
               </b-button>
@@ -71,7 +71,7 @@
                 :disabled="!hasModules || !namespace.canCreateChart"
                 variant="outline-primary"
                 size="lg"
-                @click="createNewChart"
+                :to="{ name: 'admin.charts.create', params: { category: 'generic' } }"
               >
                 {{ $t('step.chart.create') }}
               </b-button>
@@ -239,43 +239,11 @@ export default {
 
   methods: {
     ...mapActions({
-      createModule: 'module/create',
       createPage: 'page/create',
       createPageLayout: 'pageLayout/create',
       createChart: 'chart/create',
     }),
 
-    createNewModule () {
-      const newModule = new compose.Module({
-        name: 'Demo Module',
-        handle: 'demo_module',
-        fields: [
-          new compose.ModuleFieldString({ fieldID: '0', name: 'Sample' }),
-        ],
-      }, this.namespace)
-
-      this.createModule(newModule).then((module) => {
-        this.$router.push({ name: 'admin.modules.edit', params: { moduleID: module.moduleID } })
-      }).catch(this.toastErrorHandler(this.$t('notification:module.createFailed')))
-    },
-
-    createNewChart () {
-      const { namespaceID } = this.namespace
-      const { moduleID = '' } = this.modules.find(m => m.moduleID) || {}
-      const newChart = new compose.Chart({
-        namespaceID,
-        name: 'Demo Chart',
-        handle: 'demo_chart',
-        config: {
-          reports: [{ moduleID }],
-        },
-      })
-
-      this.createChart(newChart).then((chart) => {
-        this.$router.push({ name: 'admin.charts.edit', params: { chartID: chart.chartID } })
-      }).catch(this.toastErrorHandler(this.$t('notification:chart.createFailed')))
-    },
-
     createNewPage () {
       const { namespaceID } = this.namespace
       const newPage = new compose.Page({
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index c1d98cf1f1..8c614312e4 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/locale/en/corteza-webapp-compose/chart.yaml
@@ -21,7 +21,8 @@ general:
     permissions: Permissions
   value: Value
   placeholder:
-    handle: handle (a - z, 0 - 9, underscore, dash)
+    name: Name (e.g. "Sales by month")
+    handle: Unique identifier (a - z, 0 - 9, underscore, dash)
     invalid-handle-characters: Should be at least 2 characters long. Can contain only letters, numbers, underscores and dots. Must end with letter or number
 edit:
   animation:
diff --git a/locale/en/corteza-webapp-compose/module.yaml b/locale/en/corteza-webapp-compose/module.yaml
index b74e63abe0..5cb85e7df3 100644
--- a/locale/en/corteza-webapp-compose/module.yaml
+++ b/locale/en/corteza-webapp-compose/module.yaml
@@ -223,20 +223,19 @@ general:
   label:
     attributes: Attributes
     handle: Handle
-    name: Name *
+    name: Module Name *
     permissions: Permissions
     title: Title
     type: Type
     saveAndClose: Save and close
   placeholder:
-    handle: Handle
+    name: Name (e.g. "Leads")
+    handle: Unique identifier (a - z, 0 - 9, underscore, dash)
     sample: Sample
     invalid-handle-characters: Should be at least 2 characters long. Can contain only letters, numbers, underscores and dots. Must end with letter or number
 import: Module import
 navigation:
   module: Modules
-newLabel: Module Name *
-newPlaceholder: Name used on the list of modules
 noModule: No modules
 noModuleFilter: No module matches your search
 
diff --git a/locale/en/corteza-webapp-compose/notification.yaml b/locale/en/corteza-webapp-compose/notification.yaml
index 96ee6f7ca9..b60a3a1dd4 100644
--- a/locale/en/corteza-webapp-compose/notification.yaml
+++ b/locale/en/corteza-webapp-compose/notification.yaml
@@ -115,6 +115,7 @@ page:
   saveFailed: Could not save this page
   saveFailedRequired: Could not save this page, all required module fields must be present
   saved: Page saved
+  deleted: Page deleted
   copySuccess: Block has been copied successfully
   cloneSuccess: Block has been cloned to the bottom of the page
   pasteSuccess: Block has been pasted to the bottom of the page
diff --git a/locale/en/corteza-webapp-compose/page.yaml b/locale/en/corteza-webapp-compose/page.yaml
index 046f4e14c4..d920cc2d2d 100644
--- a/locale/en/corteza-webapp-compose/page.yaml
+++ b/locale/en/corteza-webapp-compose/page.yaml
@@ -66,7 +66,7 @@ block:
       pageBuilder: Page builder
       saveAndClose: Save and close
     placeholder:
-      handle: handle (a - z, 0 - 9, underscore, dash)
+      handle: Unique identifier (a - z, 0 - 9, underscore, dash)
       sample: Sample
     title: Add new block
     invalid-handle-characters: Should be at least 2 characters long. Can contain only letters, numbers, underscores and dots. Must end with letter or number
@@ -80,7 +80,6 @@ build:
   saveAsCopy:
     ref: With references
     noRef: Without references
-createLabel: Create page
 edit:
   create: Create page
   edit: Edit page
@@ -102,6 +101,7 @@ import: 'Import page(s):'
 instructions: Drag and drop pages to adjust the order and hierarchy
 invalid: Invalid configuration
 label:
+  title: Title *
   cancel: Cancel
   description: Description
   handle: Handle
@@ -109,13 +109,15 @@ label:
   permissions: Permissions
   saveAndClose: Save and close
   delete: Delete Block
+  createPage: Create page
+placeholder:
+  title: Page title (e.g. "Leads")
 loading: Loading
 moduleEdit: Edit module
 navigation:
   page: Pages
   viewPage: View Page
 unsavedChanges: Unsaved changes will be lost. Do you wish to leave the page?
-newPlaceholder: Page title
 noBlock: No block added yet
 noPages: No pages
 notVisible: Hidden