diff --git a/index.html b/index.html
index 56ca39e..2f5aab0 100644
--- a/index.html
+++ b/index.html
@@ -119,7 +119,7 @@
             data: {
               style: 'ordered',
               start: 2,
-              maxLevel: 3,
+              maxLevel: 5,
               items: [
                 {
                   content: "Canon",
diff --git a/src/ListTabulator/index.ts b/src/ListTabulator/index.ts
index a8858b9..ef60628 100644
--- a/src/ListTabulator/index.ts
+++ b/src/ListTabulator/index.ts
@@ -844,7 +844,8 @@ export default class ListTabulator<Renderer extends ListRenderer> {
     const currentItemChildrenList = getChildItems(item);
 
     /**
-     * Check that current item has any children
+     * If item has no children, just remove item
+     * Else children of the item should be prepended to the target item child list
      */
     if (currentItemChildrenList.length === 0) {
       /**
diff --git a/src/styles/list.pcss b/src/styles/list.pcss
index 86ce990..f03d3b1 100644
--- a/src/styles/list.pcss
+++ b/src/styles/list.pcss
@@ -2,13 +2,18 @@
   margin: 0;
   padding: 0;
   outline: none;
+  display: grid;
   counter-reset: item;
+  gap: var(--spacing-s);
+  padding: var(--spacing-xs);
+  --spacing-s: 8px;
+  --spacing-xs: 6px;
   --list-counter-type: numeric;
   --radius-border: 5px;
   --checkbox-background: #fff;
   --color-border: #C9C9C9;
   --color-bg-checked: #369FFF;
-  --line-height: 1.6em;
+  --line-height: 145%;
   --color-bg-checked-hover: #0059AB;
   --color-tick: #fff;
   --size-checkbox: 1.2em;
@@ -21,10 +26,12 @@
     grid-template-areas:
       "checkbox content"
       ". child";
-    margin: 2px 0;
 
     &-children {
+      display: grid;
       grid-area: child;
+      gap: var(--spacing-s);
+      padding-top: var(--spacing-s);
     }
 
     [contenteditable]{
@@ -32,10 +39,10 @@
     }
 
     &-content {
-      margin-left: 8px;
       word-break: break-word;
       white-space: pre-wrap;
       grid-area: content;
+      padding-left: var(--spacing-s);
     }
 
     &::before {