diff --git a/src/component/base/utility/index.css b/src/component/base/utility/index.css
index 42a9c374..b14fbd38 100644
--- a/src/component/base/utility/index.css
+++ b/src/component/base/utility/index.css
@@ -44,6 +44,10 @@
   font-size: 0.8em;
 }
 
+.large {
+  font-size: 1.2em;
+}
+
 .muted {
   color: hsl(var(--utility-muted));
 }
@@ -59,20 +63,23 @@
   border: 0;
 }
 
-.color-demo {
+.d-flex {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
 }
 
-.baseline-alignment-icon-character {
-  width: 0;
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-  padding: 0;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.d-horizontal {
+  flex-direction: row;
+}
+
+.d-vertical {
+  flex-direction: column;
+}
+
+.d-center {
+  align-items: center;
+  justify-content: center;
+}
+
+.d-gap {
+  gap: 1em;
 }
diff --git a/src/component/icon/index.js b/src/component/icon/index.js
index fa95cf93..9812392f 100644
--- a/src/component/icon/index.js
+++ b/src/component/icon/index.js
@@ -6,151 +6,136 @@ const icon = {};
 
 icon.all = {
   add: {
-    name: 'add',
     path: 'M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z'
   },
   arrowBack: {
-    name: 'arrow-back',
     path: 'M20.016 11.016v1.969h-12.188l5.578 5.625-1.406 1.406-8.016-8.016 8.016-8.016 1.406 1.406-5.578 5.625h12.188z'
   },
   arrowDownward: {
-    name: 'arrow-downward',
     path: 'M20.016 12l-8.016 8.016-8.016-8.016 1.453-1.406 5.578 5.578v-12.188h1.969v12.188l5.625-5.578z'
   },
   arrowForward: {
-    name: 'arrow-forward',
     path: 'M12 3.984l8.016 8.016-8.016 8.016-1.406-1.406 5.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z'
   },
   arrowUpward: {
-    name: 'arrow-upward',
     path: 'M3.984 12l8.016-8.016 8.016 8.016-1.453 1.406-5.578-5.578v12.188h-1.969v-12.188l-5.625 5.578z'
   },
   check: {
-    name: 'check',
     path: 'M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z'
   },
   cross: {
-    name: 'cross',
     path: 'M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z'
   },
   arrowKeyboardDown: {
-    name: 'arrow-keyboard-down',
     path: 'M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'
   },
   arrowKeyboardLeft: {
-    name: 'arrow-keyboard-left',
     path: 'M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z'
   },
   arrowKeyboardRight: {
-    name: 'arrow-keyboard-right',
     path: 'M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z'
   },
   arrowKeyboardUp: {
-    name: 'arrow-keyboard-up',
     path: 'M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z'
   },
   edit: {
-    name: 'edit',
     path: 'M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828c0.375-0.375 1.031-0.375 1.406 0l2.344 2.344c0.375 0.375 0.375 1.031 0 1.406zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z'
   },
   moreHorizontal: {
-    name: 'more-horizontal',
     path: 'M12 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM18 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM6 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016z'
   },
   moreVertical: {
-    name: 'more-vertical',
     path: 'M12 15.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM12 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM12 8.016c-1.078 0-2.016-0.938-2.016-2.016s0.938-2.016 2.016-2.016 2.016 0.938 2.016 2.016-0.938 2.016-2.016 2.016z'
   },
   redo: {
-    name: 'redo',
     path: 'M18.422 10.594l3.563-3.609v9h-9l3.656-3.609q-2.25-1.875-5.156-1.875-2.391 0-4.617 1.594t-2.977 3.891l-2.344-0.75q1.031-3.188 3.773-5.203t6.164-2.016q3.984 0 6.938 2.578z'
   },
   refresh: {
-    name: 'refresh',
     path: 'M17.672 6.328l2.344-2.344v7.031h-7.031l3.234-3.234c-1.078-1.078-2.578-1.781-4.219-1.781-3.328 0-6 2.672-6 6s2.672 6 6 6c2.625 0 4.875-1.641 5.672-3.984h2.063c-0.891 3.469-3.984 6-7.734 6-4.406 0-7.969-3.609-7.969-8.016s3.563-8.016 7.969-8.016c2.203 0 4.219 0.891 5.672 2.344z'
   },
   remove: {
-    name: 'remove',
     path: 'M18.984 12.984h-13.969v-1.969h13.969v1.969z'
   },
-  reorder: {
-    name: 'reorder',
-    path: 'M3 5.016h18v1.969h-18v-1.969zM3 11.016v-2.016h18v2.016h-18zM3 18.984v-1.969h18v1.969h-18zM3 15v-2.016h18v2.016h-18z'
-  },
   replay: {
-    name: 'replay',
     path: 'M12 5.016q3.328 0 5.672 2.344t2.344 5.625q0 3.328-2.367 5.672t-5.648 2.344-5.648-2.344-2.367-5.672h2.016q0 2.484 1.758 4.242t4.242 1.758 4.242-1.758 1.758-4.242-1.758-4.242-4.242-1.758v4.031l-5.016-5.016 5.016-5.016v4.031z'
   },
   settings: {
-    name: 'settings',
     path: 'M12 15.516c1.922 0 3.516-1.594 3.516-3.516s-1.594-3.516-3.516-3.516-3.516 1.594-3.516 3.516 1.594 3.516 3.516 3.516zM19.453 12.984l2.109 1.641c0.188 0.141 0.234 0.422 0.094 0.656l-2.016 3.469c-0.141 0.234-0.375 0.281-0.609 0.188l-2.484-0.984c-0.516 0.375-1.078 0.75-1.688 0.984l-0.375 2.625c-0.047 0.234-0.234 0.422-0.469 0.422h-4.031c-0.234 0-0.422-0.188-0.469-0.422l-0.375-2.625c-0.609-0.234-1.172-0.563-1.688-0.984l-2.484 0.984c-0.234 0.094-0.469 0.047-0.609-0.188l-2.016-3.469c-0.141-0.234-0.094-0.516 0.094-0.656l2.109-1.641c-0.047-0.328-0.047-0.656-0.047-0.984s0-0.656 0.047-0.984l-2.109-1.641c-0.188-0.141-0.234-0.422-0.094-0.656l2.016-3.469c0.141-0.234 0.375-0.281 0.609-0.188l2.484 0.984c0.516-0.375 1.078-0.75 1.688-0.984l0.375-2.625c0.047-0.234 0.234-0.422 0.469-0.422h4.031c0.234 0 0.422 0.188 0.469 0.422l0.375 2.625c0.609 0.234 1.172 0.563 1.688 0.984l2.484-0.984c0.234-0.094 0.469-0.047 0.609 0.188l2.016 3.469c0.141 0.234 0.094 0.516-0.094 0.656l-2.109 1.641c0.047 0.328 0.047 0.656 0.047 0.984s0 0.656-0.047 0.984z'
   },
   undo: {
-    name: 'undo',
     path: 'M12.516 8.016q3.422 0 6.141 2.016t3.797 5.203l-2.344 0.75q-0.797-2.438-2.883-3.961t-4.711-1.523q-2.906 0-5.156 1.875l3.656 3.609h-9v-9l3.563 3.609q2.953-2.578 6.938-2.578z'
   },
   unfoldLess: {
-    name: 'unfold-less',
     path: 'M16.594 5.391l-4.594 4.594-4.594-4.594 1.406-1.406 3.188 3.188 3.188-3.188zM7.406 18.609l4.594-4.594 4.594 4.594-1.406 1.406-3.188-3.188-3.188 3.188z'
   },
   unfoldMore: {
-    name: 'unfold-more',
     path: 'M12 18.188l3.188-3.188 1.406 1.406-4.594 4.594-4.594-4.594 1.406-1.406zM12 5.813l-3.188 3.188-1.406-1.406 4.594-4.594 4.594 4.594-1.406 1.406z'
   },
   coffee: {
-    name: 'coffee',
     path: 'M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z'
   },
   drag: {
-    name: 'drag',
     path: 'M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'
   },
   bookmark: {
-    name: 'bookmark',
-    path: 'M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z'
+    path: 'M17 3H7C5.9 3 5.01 3.9 5.01 5L5 21L12 18L19 21V5C19 3.9 18.1 3 17 3Z'
   },
   addBookmark: {
-    name: 'add-bookmark',
-    path: 'M17 11v6.97l-5-2.14l-5 2.14V5h6V3H7C5.9 3 5 3.9 5 5v16l7-3l7 3V11H17z M21 7h-2v2h-2V7h-2V5h2V3h2v2h2V7z'
+    path: 'M21 7H19V9H17V7H15V5H17V3H19V5H21V7ZM19 21L12 18L5 21V5C5 3.9 5.9 3 7 3H14C13.37 3.84 13 4.87 13 6C13 8.76 15.24 11 18 11C18.34 11 18.68 10.97 19 10.9V21Z'
   },
   group: {
-    name: 'group',
-    path: 'M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z'
+    path: 'M5 5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5ZM19 7H5V9H19V7Z',
+    fill: 'evenodd',
+    clip: 'evenodd'
   },
   addGroup: {
-    name: 'add-group',
-    path: 'M19 19H5V5H14V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V10H19V19Z M19 5V3H17V5H15V7H17V9H19V7H21V5H19Z'
+    path: 'M5 5H13.9996C13.5629 5.58141 13.25 6.26112 13.1 7H5V9H13.1C13.5633 11.2822 15.581 13 18 13C19.1256 13 20.1643 12.6281 21 12.0004V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7C3 5.89543 3.89543 5 5 5Z M19 9H21V7H19V5H17V7H15V9H17V11H19V9Z'
   },
   info: {
-    name: 'info',
     path: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'
   },
   warning: {
-    name: 'warning',
     path: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'
   },
   propagate: {
-    name: 'propagate',
     path: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z'
   }
 };
 
 icon.render = (name) => {
+
   const iconElement = node('span|class:icon');
+
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
   svg.setAttribute('version', '1.1');
+
   svg.setAttribute('viewBox', '0 0 24 24');
+
   svg.setAttribute('width', '24');
+
   svg.setAttribute('height', '24');
+
   svg.setAttribute('fill', 'currentColor');
 
+  if (icon.all[name].fill) {
+    svg.setAttribute('clip-rule', icon.all[name].clip);
+  };
+
+  if (icon.all[name].fill) {
+    svg.setAttribute('fill-rule', icon.all[name].fill);
+  };
+
   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
   path.setAttribute('d', icon.all[name].path);
 
   svg.appendChild(path);
+
   iconElement.appendChild(svg);
 
   return iconElement;
+
 };
 
 export { icon };
diff --git a/src/component/menu/index.js b/src/component/menu/index.js
index 9c6fd566..2508411d 100644
--- a/src/component/menu/index.js
+++ b/src/component/menu/index.js
@@ -16,8 +16,7 @@ import { clearChildNode } from '../../utility/clearChildNode';
 const menu = {};
 
 menu.navData = [
-  // { name: 'Form', active: true, overscroll: true, sub: ['Input', 'Button'] },
-  // { name: 'Debug', active: true, overscroll: true, sub: ['Bookmark'] },
+  // { name: 'Debug', active: true, overscroll: true, sub: ['Input', 'Button', 'Bookmark', 'Icon'] },
   { name: 'Theme', active: true, overscroll: true, sub: ['Preset', 'Saved', 'Style', 'Colour', 'Accent', 'Font', 'Radius', 'Shadow', 'Shade', 'Opacity', 'Background', 'Layout', 'Header', 'Bookmark'] },
   { name: 'Layout', active: false, overscroll: true, sub: ['Scaling', 'Area', 'Padding', 'Gutter', 'Alignment', 'Page'] },
   { name: 'Header', active: false, overscroll: true, sub: ['Area', 'Greeting', 'Transitional words', 'Clock', 'Date', 'Search'] },
diff --git a/src/component/menuContent/debugSetting/index.js b/src/component/menuContent/debugSetting/index.js
index 55289fd6..da6970ff 100644
--- a/src/component/menuContent/debugSetting/index.js
+++ b/src/component/menuContent/debugSetting/index.js
@@ -43,15 +43,211 @@ import { applyCSSState } from '../../../utility/applyCSSState';
 
 const debugSetting = {};
 
+debugSetting.state = {
+  input: {
+    radio: { a: 'a', b: 'a', c: 'a', d: 'a', e: 'a', grid3x3: 'a', grid3x1: 'a', grid1x3: 'a' },
+    checkbox: { a: true, b: true, c: false }
+  }
+};
+
 debugSetting.control = {
-  alignment: {},
-  name: {},
-  open: {}
+  input: {},
+  button: {},
+  bookmark: {},
+  icon: {}
+};
+
+debugSetting.input = (parent) => {
+
+  debugSetting.control.input.radio = {
+    a: new Control_radio({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-a-a', labelText: 'Radio A A', description: 'Description for radio A A.', value: 'a' },
+        { id: 'input-radio-a-b', labelText: 'Radio A B', description: 'Description for radio A B.', value: 'b' },
+        { id: 'input-radio-a-c', labelText: 'Radio A C', description: 'Description for radio A C.', value: 'c' }
+      ],
+      label: 'Radio group A',
+      groupName: 'input-radio-a',
+      path: 'input.radio.a',
+      action: () => { console.log(debugSetting.state); }
+    }),
+    b: new Control_radio({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-b-a', labelText: 'B A', value: 'a' },
+        { id: 'input-radio-b-b', labelText: 'B B', value: 'b' },
+        { id: 'input-radio-b-c', labelText: 'B C', value: 'c' }
+      ],
+      label: 'Radio group',
+      groupName: 'input-radio-b',
+      path: 'input.radio.b',
+      action: () => { console.log(debugSetting.state); }
+    }),
+    c: new Control_radio({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-c-a', labelText: 'C A', value: 'a' },
+        { id: 'input-radio-c-b', labelText: 'C B', value: 'b' },
+        { id: 'input-radio-c-c', labelText: 'C C', value: 'c' }
+      ],
+      label: 'Radio group',
+      groupName: 'input-radio-c',
+      path: 'input.radio.c',
+      inputButton: true,
+      action: () => { console.log(debugSetting.state); }
+    }),
+    d: new Control_radio({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-d-a', labelText: 'D A', value: 'a' },
+        { id: 'input-radio-d-b', labelText: 'D B', value: 'b' },
+        { id: 'input-radio-d-c', labelText: 'D C', value: 'c' }
+      ],
+      label: 'Radio group',
+      groupName: 'input-radio-d',
+      path: 'input.radio.d',
+      inputButton: true,
+      inputButtonStyle: ['line'],
+      action: () => { console.log(debugSetting.state); }
+    }),
+    e: new Control_radio({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-e-a', labelText: 'E A', value: 'a' },
+        { id: 'input-radio-e-b', labelText: 'E B', value: 'b' },
+        { id: 'input-radio-e-c', labelText: 'E C', value: 'c' }
+      ],
+      label: 'Radio group',
+      groupName: 'input-radio-e',
+      path: 'input.radio.e',
+      inputButton: true,
+      inputHide: true,
+      inputButtonStyle: ['ring'],
+      action: () => { console.log(debugSetting.state); }
+    }),
+    grid3x3: new Control_radioGrid({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-grid3x3-a', labelText: 'A', value: 'a', position: 1 },
+        { id: 'input-radio-grid3x3-b', labelText: 'B', value: 'b', position: 2 },
+        { id: 'input-radio-grid3x3-c', labelText: 'C', value: 'c', position: 3 },
+        { id: 'input-radio-grid3x3-d', labelText: 'D', value: 'd', position: 4 },
+        { id: 'input-radio-grid3x3-e', labelText: 'E', value: 'e', position: 5 },
+        { id: 'input-radio-grid3x3-f', labelText: 'F', value: 'f', position: 6 },
+        { id: 'input-radio-grid3x3-g', labelText: 'G', value: 'g', position: 7 },
+        { id: 'input-radio-grid3x3-h', labelText: 'H', value: 'h', position: 8 },
+        { id: 'input-radio-grid3x3-i', labelText: 'I', value: 'i', position: 9 }
+      ],
+      label: 'Radio group grid 3x3',
+      groupName: 'input-radio-grid3x3',
+      path: 'input.radio.grid3x3',
+      gridSize: '3x3',
+      action: () => { console.log(debugSetting.state); }
+    }),
+    grid3x1: new Control_radioGrid({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-grid3x1-a', labelText: 'A', value: 'a', position: 1 },
+        { id: 'input-radio-grid3x1-b', labelText: 'B', value: 'b', position: 2 },
+        { id: 'input-radio-grid3x1-c', labelText: 'C', value: 'c', position: 3 }
+      ],
+      label: 'Radio group grid 3x1',
+      groupName: 'input-radio-grid3x1',
+      path: 'input.radio.grid3x1',
+      gridSize: '3x1',
+      action: () => { console.log(debugSetting.state); }
+    }),
+    grid1x3: new Control_radioGrid({
+      object: debugSetting.state,
+      radioGroup: [
+        { id: 'input-radio-grid1x3-a', labelText: 'A', value: 'a', position: 1 },
+        { id: 'input-radio-grid1x3-b', labelText: 'B', value: 'b', position: 2 },
+        { id: 'input-radio-grid1x3-c', labelText: 'C', value: 'c', position: 3 }
+      ],
+      label: 'Radio group grid 1x3',
+      groupName: 'input-radio-grid1x3',
+      path: 'input.radio.grid1x3',
+      gridSize: '1x3',
+      action: () => { console.log(debugSetting.state); }
+    })
+  };
+
+  debugSetting.control.input.checkbox = {
+    a: new Control_checkbox({
+      object: debugSetting.state,
+      id: 'input-checkbox-a',
+      path: 'input.checkbox.a',
+      labelText: 'Checkbox A',
+      action: () => { console.log(debugSetting.state); }
+    }),
+    b: new Control_checkbox({
+      object: debugSetting.state,
+      id: 'input-checkbox-b',
+      path: 'input.checkbox.b',
+      labelText: 'Checkbox B',
+      action: () => { console.log(debugSetting.state); }
+    }),
+    c: new Control_checkbox({
+      object: debugSetting.state,
+      id: 'input-checkbox-c',
+      path: 'input.checkbox.c',
+      labelText: 'Checkbox C',
+      action: () => { console.log(debugSetting.state); }
+    })
+  };
+
+  parent.appendChild(
+    node('div', [
+      debugSetting.control.input.radio.a.wrap(),
+      node('hr'),
+      debugSetting.control.input.radio.b.inline(),
+      debugSetting.control.input.radio.c.inputButton(),
+      debugSetting.control.input.radio.d.inputButton(),
+      debugSetting.control.input.radio.e.inputButton(),
+      node('hr'),
+      debugSetting.control.input.radio.grid3x3.wrap(),
+      debugSetting.control.input.radio.grid3x1.wrap(),
+      debugSetting.control.input.radio.grid1x3.wrap(),
+      node('hr'),
+      debugSetting.control.input.checkbox.a.wrap(),
+      debugSetting.control.input.checkbox.b.wrap(),
+      debugSetting.control.input.checkbox.c.wrap()
+    ])
+  );
+
+};
+
+debugSetting.button = (parent) => {
+
+  debugSetting.control.button.small = new Button({ text: 'Small button', size: 'small' });
+
+  debugSetting.control.button.medium = new Button({ text: 'Medium button', size: 'medium' });
+
+  debugSetting.control.button.large = new Button({ text: 'Large button', size: 'large' });
+
+  debugSetting.control.button.ring = new Button({ text: 'Ring button', size: 'medium', style: ['ring'] });
+
+  debugSetting.control.button.line = new Button({ text: 'Line button', size: 'medium', style: ['line'] });
+
+  debugSetting.control.button.link = new Button({ text: 'Link button', size: 'medium', style: ['link'] });
+
+  parent.appendChild(
+    node('div', [
+      debugSetting.control.button.small.wrap(),
+      debugSetting.control.button.medium.wrap(),
+      debugSetting.control.button.large.wrap(),
+      debugSetting.control.button.ring.wrap(),
+      debugSetting.control.button.line.wrap(),
+      debugSetting.control.button.link.wrap(),
+    ])
+  );
+
 };
 
 debugSetting.bookmark = (parent) => {
 
-  debugSetting.bookmark.letter = new Button({
+  debugSetting.control.bookmark.letter = new Button({
     text: 'Only letters',
     style: ['line'],
     func: () => {
@@ -67,7 +263,7 @@ debugSetting.bookmark = (parent) => {
     }
   });
 
-  debugSetting.bookmark.icon = new Button({
+  debugSetting.control.bookmark.icon = new Button({
     text: 'Only icons',
     style: ['line'],
     func: () => {
@@ -83,7 +279,7 @@ debugSetting.bookmark = (parent) => {
     }
   });
 
-  debugSetting.bookmark.image = new Button({
+  debugSetting.control.bookmark.image = new Button({
     text: 'Only images',
     style: ['line'],
     func: () => {
@@ -99,7 +295,7 @@ debugSetting.bookmark = (parent) => {
     }
   });
 
-  debugSetting.bookmark.image = new Button({
+  debugSetting.control.bookmark.image = new Button({
     text: 'Only images',
     style: ['line'],
     func: () => {
@@ -115,23 +311,7 @@ debugSetting.bookmark = (parent) => {
     }
   });
 
-  debugSetting.bookmark.nameHide = new Button({
-    text: 'Name hide',
-    style: ['line'],
-    func: () => {
-      bookmark.all.forEach(item => {
-        item.items.forEach(item => {
-
-          item.display.name.show = false;
-
-        });
-      });
-      groupAndBookmark.render();
-      data.save();
-    }
-  });
-
-  debugSetting.bookmark.nameShow = new Button({
+  debugSetting.control.bookmark.nameShow = new Button({
     text: 'Name show',
     style: ['line'],
     func: () => {
@@ -147,6 +327,22 @@ debugSetting.bookmark = (parent) => {
     }
   });
 
+  debugSetting.control.bookmark.nameHide = new Button({
+    text: 'Name hide',
+    style: ['line'],
+    func: () => {
+      bookmark.all.forEach(item => {
+        item.items.forEach(item => {
+
+          item.display.name.show = false;
+
+        });
+      });
+      groupAndBookmark.render();
+      data.save();
+    }
+  });
+
   parent.appendChild(
     node('div', [
       form.wrap({
@@ -156,11 +352,11 @@ debugSetting.bookmark = (parent) => {
             wrap: true,
             equalGap: true,
             children: [
-              debugSetting.bookmark.letter.wrap(),
-              debugSetting.bookmark.icon.wrap(),
-              debugSetting.bookmark.image.wrap(),
-              debugSetting.bookmark.nameHide.wrap(),
-              debugSetting.bookmark.nameShow.wrap(),
+              debugSetting.control.bookmark.letter.wrap(),
+              debugSetting.control.bookmark.icon.wrap(),
+              debugSetting.control.bookmark.image.wrap(),
+              debugSetting.control.bookmark.nameShow.wrap(),
+              debugSetting.control.bookmark.nameHide.wrap()
             ]
           })
         ]
@@ -170,4 +366,38 @@ debugSetting.bookmark = (parent) => {
 
 };
 
-export { debugSetting }
+debugSetting.icon = (parent) => {
+
+  debugSetting.control.icon = [];
+
+  for (let key in icon.all) {
+    debugSetting.control.icon.push(
+      form.wrap({
+        children: [
+          node('div|class:d-flex d-horizontal d-gap d-center', [
+            node('div|class:large', [icon.render(key)]),
+            node(`p:${key}|class:small`)
+          ])
+        ]
+      })
+    )
+  };
+
+  parent.appendChild(
+    node('div', [
+      form.wrap({
+        children: [
+          form.inline({
+            gap: 'small',
+            wrap: true,
+            equalGap: true,
+            children: debugSetting.control.icon
+          })
+        ]
+      })
+    ])
+  );
+
+};
+
+export { debugSetting };
diff --git a/src/component/menuContent/formSetting/index.js b/src/component/menuContent/formSetting/index.js
deleted file mode 100644
index a6525f0d..00000000
--- a/src/component/menuContent/formSetting/index.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import { state } from '../../state';
-import { data } from '../../data';
-import { header } from '../../header';
-import { bookmark } from '../../bookmark';
-import { theme } from '../../theme';
-import { version } from '../../version';
-import { menu } from '../../menu';
-import { icon } from '../../icon';
-import { logo } from '../../logo';
-import { link } from '../../link';
-import { layout } from '../../layout';
-import { toolbar } from '../../toolbar';
-
-import * as form from '../../form';
-
-import { Button } from '../../button';
-import { Collapse } from '../../collapse';
-import { Edge } from '../../edge';
-import { Alert } from '../../alert';
-
-import { Control_helperText } from '../../control/helperText';
-import { Control_inputButton } from '../../control/inputButton';
-import { Control_groupText } from '../../control/groupText';
-import { Control_radio } from '../../control/radio';
-import { Control_radioGrid } from '../../control/radioGrid';
-import { Control_checkbox } from '../../control/checkbox';
-import { Control_slider } from '../../control/slider';
-import { Control_sliderSlim } from '../../control/sliderSlim';
-import { Control_sliderDouble } from '../../control/sliderDouble';
-import { Control_colorMixer } from '../../control/colorMixer';
-import { Control_color } from '../../control/color';
-import { Control_text } from '../../control/text';
-import { Control_textReset } from '../../control/textReset';
-import { Control_textarea } from '../../control/textarea';
-
-import { node } from '../../../utility/node';
-import { complexNode } from '../../../utility/complexNode';
-import { applyCSSVar } from '../../../utility/applyCSSVar';
-import { applyCSSClass } from '../../../utility/applyCSSClass';
-import { applyCSSState } from '../../../utility/applyCSSState';
-
-const formSetting = {};
-
-formSetting.state = {
-  input: {
-    radio: { a: 'a', b: 'a', c: 'a', d: 'a', e: 'a', grid3x3: 'a', grid3x1: 'a', grid1x3: 'a' },
-    checkbox: { a: true, b: true, c: false }
-  }
-};
-
-formSetting.control = {
-  input: {},
-  button: {}
-};
-
-formSetting.input = (parent) => {
-
-  formSetting.input.radio = {
-    a: new Control_radio({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-a-a', labelText: 'Radio A A', description: 'Description for radio A A.', value: 'a' },
-        { id: 'input-radio-a-b', labelText: 'Radio A B', description: 'Description for radio A B.', value: 'b' },
-        { id: 'input-radio-a-c', labelText: 'Radio A C', description: 'Description for radio A C.', value: 'c' }
-      ],
-      label: 'Radio group A',
-      groupName: 'input-radio-a',
-      path: 'input.radio.a',
-      action: () => { console.log(formSetting.state); }
-    }),
-    b: new Control_radio({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-b-a', labelText: 'B A', value: 'a' },
-        { id: 'input-radio-b-b', labelText: 'B B', value: 'b' },
-        { id: 'input-radio-b-c', labelText: 'B C', value: 'c' }
-      ],
-      label: 'Radio group',
-      groupName: 'input-radio-b',
-      path: 'input.radio.b',
-      action: () => { console.log(formSetting.state); }
-    }),
-    c: new Control_radio({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-c-a', labelText: 'C A', value: 'a' },
-        { id: 'input-radio-c-b', labelText: 'C B', value: 'b' },
-        { id: 'input-radio-c-c', labelText: 'C C', value: 'c' }
-      ],
-      label: 'Radio group',
-      groupName: 'input-radio-c',
-      path: 'input.radio.c',
-      inputButton: true,
-      action: () => { console.log(formSetting.state); }
-    }),
-    d: new Control_radio({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-d-a', labelText: 'D A', value: 'a' },
-        { id: 'input-radio-d-b', labelText: 'D B', value: 'b' },
-        { id: 'input-radio-d-c', labelText: 'D C', value: 'c' }
-      ],
-      label: 'Radio group',
-      groupName: 'input-radio-d',
-      path: 'input.radio.d',
-      inputButton: true,
-      inputButtonStyle: ['line'],
-      action: () => { console.log(formSetting.state); }
-    }),
-    e: new Control_radio({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-e-a', labelText: 'E A', value: 'a' },
-        { id: 'input-radio-e-b', labelText: 'E B', value: 'b' },
-        { id: 'input-radio-e-c', labelText: 'E C', value: 'c' }
-      ],
-      label: 'Radio group',
-      groupName: 'input-radio-e',
-      path: 'input.radio.e',
-      inputButton: true,
-      inputHide: true,
-      inputButtonStyle: ['ring'],
-      action: () => { console.log(formSetting.state); }
-    }),
-    grid3x3: new Control_radioGrid({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-grid3x3-a', labelText: 'A', value: 'a', position: 1 },
-        { id: 'input-radio-grid3x3-b', labelText: 'B', value: 'b', position: 2 },
-        { id: 'input-radio-grid3x3-c', labelText: 'C', value: 'c', position: 3 },
-        { id: 'input-radio-grid3x3-d', labelText: 'D', value: 'd', position: 4 },
-        { id: 'input-radio-grid3x3-e', labelText: 'E', value: 'e', position: 5 },
-        { id: 'input-radio-grid3x3-f', labelText: 'F', value: 'f', position: 6 },
-        { id: 'input-radio-grid3x3-g', labelText: 'G', value: 'g', position: 7 },
-        { id: 'input-radio-grid3x3-h', labelText: 'H', value: 'h', position: 8 },
-        { id: 'input-radio-grid3x3-i', labelText: 'I', value: 'i', position: 9 }
-      ],
-      label: 'Radio group grid 3x3',
-      groupName: 'input-radio-grid3x3',
-      path: 'input.radio.grid3x3',
-      gridSize: '3x3',
-      action: () => { console.log(formSetting.state); }
-    }),
-    grid3x1: new Control_radioGrid({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-grid3x1-a', labelText: 'A', value: 'a', position: 1 },
-        { id: 'input-radio-grid3x1-b', labelText: 'B', value: 'b', position: 2 },
-        { id: 'input-radio-grid3x1-c', labelText: 'C', value: 'c', position: 3 }
-      ],
-      label: 'Radio group grid 3x1',
-      groupName: 'input-radio-grid3x1',
-      path: 'input.radio.grid3x1',
-      gridSize: '3x1',
-      action: () => { console.log(formSetting.state); }
-    }),
-    grid1x3: new Control_radioGrid({
-      object: formSetting.state,
-      radioGroup: [
-        { id: 'input-radio-grid1x3-a', labelText: 'A', value: 'a', position: 1 },
-        { id: 'input-radio-grid1x3-b', labelText: 'B', value: 'b', position: 2 },
-        { id: 'input-radio-grid1x3-c', labelText: 'C', value: 'c', position: 3 }
-      ],
-      label: 'Radio group grid 1x3',
-      groupName: 'input-radio-grid1x3',
-      path: 'input.radio.grid1x3',
-      gridSize: '1x3',
-      action: () => { console.log(formSetting.state); }
-    })
-  };
-
-  formSetting.input.checkbox = {
-    a: new Control_checkbox({
-      object: formSetting.state,
-      id: 'input-checkbox-a',
-      path: 'input.checkbox.a',
-      labelText: 'Checkbox A',
-      action: () => { console.log(formSetting.state); }
-    }),
-    b: new Control_checkbox({
-      object: formSetting.state,
-      id: 'input-checkbox-b',
-      path: 'input.checkbox.b',
-      labelText: 'Checkbox B',
-      action: () => { console.log(formSetting.state); }
-    }),
-    c: new Control_checkbox({
-      object: formSetting.state,
-      id: 'input-checkbox-c',
-      path: 'input.checkbox.c',
-      labelText: 'Checkbox C',
-      action: () => { console.log(formSetting.state); }
-    })
-  };
-
-  parent.appendChild(
-    node('div', [
-      formSetting.input.radio.a.wrap(),
-      node('hr'),
-      formSetting.input.radio.b.inline(),
-      formSetting.input.radio.c.inputButton(),
-      formSetting.input.radio.d.inputButton(),
-      formSetting.input.radio.e.inputButton(),
-      node('hr'),
-      formSetting.input.radio.grid3x3.wrap(),
-      formSetting.input.radio.grid3x1.wrap(),
-      formSetting.input.radio.grid1x3.wrap(),
-      node('hr'),
-      formSetting.input.checkbox.a.wrap(),
-      formSetting.input.checkbox.b.wrap(),
-      formSetting.input.checkbox.c.wrap()
-    ])
-  );
-
-};
-
-formSetting.button = (parent) => {
-
-  formSetting.button = {
-    small: new Button({ text: 'Small button', size: 'small' }),
-    medium: new Button({ text: 'Medium button', size: 'medium' }),
-    large: new Button({ text: 'Large button', size: 'large' }),
-    ring: new Button({ text: 'Ring button', size: 'medium', style: ['ring'] }),
-    line: new Button({ text: 'Line button', size: 'medium', style: ['line'] }),
-    link: new Button({ text: 'Link button', size: 'medium', style: ['link'] })
-  };
-
-  parent.appendChild(
-    node('div', [
-      formSetting.button.small.wrap(),
-      formSetting.button.medium.wrap(),
-      formSetting.button.large.wrap(),
-      formSetting.button.ring.wrap(),
-      formSetting.button.line.wrap(),
-      formSetting.button.link.wrap(),
-    ])
-  );
-
-};
-
-export { formSetting }
diff --git a/src/component/menuContent/index.js b/src/component/menuContent/index.js
index 1d7ec6b3..dfe91b1c 100644
--- a/src/component/menuContent/index.js
+++ b/src/component/menuContent/index.js
@@ -1,5 +1,4 @@
 import { data } from '../data';
-import { formSetting } from './formSetting';
 import { debugSetting } from './debugSetting';
 import { appName } from '../appName';
 import { layoutSetting } from './layoutSetting';
@@ -58,14 +57,6 @@ export const MenuContent = function({
 
         switch (this.makeId(activeNavData.name)) {
 
-          case 'form':
-            formSetting[this.makeId(item)](formElement);
-            break;
-
-          case 'debug':
-            debugSetting[this.makeId(item)](formElement);
-            break;
-
           case 'layout':
             layoutSetting[this.makeId(item)](formElement);
             break;
@@ -94,6 +85,10 @@ export const MenuContent = function({
             dataSetting[this.makeId(item)](formElement);
             break;
 
+          case 'debug':
+            debugSetting[this.makeId(item)](formElement);
+            break;
+
         };
 
         menuContentItem.appendChild(formElement);
diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js
index d509c1fb..403d8f76 100644
--- a/src/component/menuContent/themeSetting/index.js
+++ b/src/component/menuContent/themeSetting/index.js
@@ -296,7 +296,9 @@ themeSetting.saved = (parent) => {
     }),
     edit: new Button({
       text: 'Edit',
+      iconName: 'edit',
       style: ['line'],
+      srOnly: true,
       func: () => {
         customTheme.edit.toggle();
         data.save();