diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 5efeb8d0f655f64ca298bdff62e383202911bf7e..397d80278df67942a72c87e2bb51a01cb133ece3 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -46,8 +46,8 @@ export default {
         'Notes',
         'Lists',
         'Images',
-        'Tables',
         'CodeBlock',
+        'Tables',
       ],
     },
     {
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 616a52ce5096880a63217474f93450ea6dd73f07..d7d01c5462961b2842d5e30f1f08437e95809729 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import React from 'react';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import {
   faBold,
   faItalic,
@@ -22,9 +22,9 @@ import {
   faAngleUp,
   faStickyNote,
   faVial,
-  // faWheelchair,
+  faFileCode,
   faEllipsisH,
-} from '@fortawesome/free-solid-svg-icons'
+} from '@fortawesome/free-solid-svg-icons';
 
 export default {
   em: <FontAwesomeIcon icon={faItalic} />,
@@ -40,7 +40,7 @@ export default {
   paragraph: <FontAwesomeIcon icon={faParagraph} />,
   heading: <FontAwesomeIcon icon={faHeading} />,
   blockquote: <FontAwesomeIcon icon={faQuoteLeft} />,
-  code_block: <FontAwesomeIcon icon={faCode} />,
+  code_block: <FontAwesomeIcon icon={faFileCode} />,
   ordered_list: <FontAwesomeIcon icon={faListOl} />,
   bullet_list: <FontAwesomeIcon icon={faListUl} />,
   image: <FontAwesomeIcon icon={faImage} />,
@@ -71,4 +71,4 @@ export default {
       </svg>
     </span>
   ),
-}
+};
diff --git a/wax-prosemirror-schema/src/nodes/codeBlockNode.js b/wax-prosemirror-schema/src/nodes/codeBlockNode.js
index 21fbdd2c6f0f2f1586126d5e48ad4585c67fd5af..18ae5b2945ae3a23a623471be12bdd23c83eb112 100644
--- a/wax-prosemirror-schema/src/nodes/codeBlockNode.js
+++ b/wax-prosemirror-schema/src/nodes/codeBlockNode.js
@@ -1,5 +1,5 @@
 const codeBlock = {
-  content: 'block+',
+  content: 'text*',
   group: 'block',
   code: true,
   defining: true,
diff --git a/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js b/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js
index 1fa6cab708e1d27144164541cce854b5a9ff70ca..b1fef70169b1f3cb4b5556c49e1e46d8c9fe51b2 100644
--- a/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js
+++ b/wax-prosemirror-services/src/CodeBlockService/CodeBlockService.js
@@ -1,16 +1,22 @@
+import hljs from 'highlight.js/lib/core';
+import { highlightPlugin } from 'prosemirror-highlightjs';
+import 'highlight.js/styles/github.css';
+
 import { codeBlockNode } from 'wax-prosemirror-schema';
 import Service from '../Service';
 import CodeBlockTool from './CodeBlockTool';
 
 export default class CodeBlockService extends Service {
-  boot() {}
+  boot() {
+    this.app.PmPlugins.add('highlightPlugin', highlightPlugin(hljs));
+  }
 
   register() {
     this.container.bind('CodeBlockTool').to(CodeBlockTool);
     const createNode = this.container.get('CreateNode');
 
     createNode({
-      codeblock: codeBlockNode,
+      code_block: codeBlockNode,
     });
   }
 }
diff --git a/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js b/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
index bce0d126dce3ae81c8b8ec4afac5b49e35659f14..1cec46ca2b1b5a1cf16996e8b665f1b6603a71a5 100644
--- a/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
+++ b/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
@@ -1,20 +1,27 @@
 import Tools from '../lib/Tools';
 import { injectable } from 'inversify';
 import { icons } from 'wax-prosemirror-components';
-import { wrapIn } from 'prosemirror-commands';
+import { Commands } from 'wax-prosemirror-utilities';
 
 @injectable()
 class CodeBlockTool extends Tools {
   title = 'Insert Code Block';
-  content = icons.footnote;
+  content = icons.code_block;
 
   get run() {
     return (state, dispatch) => {
-      wrapIn(state.config.schema.nodes.codeblock)(state, dispatch);
+      Commands.setBlockType(state.config.schema.nodes.code_block)(
+        state,
+        dispatch,
+      );
     };
   }
 
-  get enable() {}
+  get enable() {
+    return state => {
+      return Commands.setBlockType(state.config.schema.nodes.code_block)(state);
+    };
+  }
 }
 
 export default CodeBlockTool;