diff --git a/app/components/SimpleEditor/config.js b/app/components/SimpleEditor/config.js
index 1b4a52a19ed16bbe922f23ca3dad6f9abb9e77ff..a637603028d6b1a5bb2c486e3e94aa57cf466ea0 100644
--- a/app/components/SimpleEditor/config.js
+++ b/app/components/SimpleEditor/config.js
@@ -14,9 +14,8 @@ import {
   SuperscriptPackage
 } from 'substance'
 
-import CodeblockPackage from 'substance/packages/codeblock/CodeblockPackage'
-
 // My Elements
+import CodeblockPackage from './elements/codeblock/CodeblockPackage'
 import CommentPackage from './elements/comment/CommentPackage'
 import ExtractPackage from './elements/extract/ExtractPackage'
 import NotePackage from './elements/note/NotePackage'
@@ -42,7 +41,6 @@ let config = {
     config.import(ParagraphPackage)
     config.import(HeadingPackage)
     config.import(BlockquotePackage)
-    config.import(CodeblockPackage)
     config.import(EmphasisPackage)
     config.import(StrongPackage)
     config.import(SubscriptPackage)
@@ -51,6 +49,7 @@ let config = {
     // config.import(LinkPackage)
     config.import(PersistencePackage)
 
+    config.import(CodeblockPackage)
     config.import(LinkPackage)
     // config.import(DialoguePackage)
     config.import(ExtractPackage)
diff --git a/app/components/SimpleEditor/elements/codeblock/Codeblock.js b/app/components/SimpleEditor/elements/codeblock/Codeblock.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee74cf33849672de3324c7fcb34708562db45f80
--- /dev/null
+++ b/app/components/SimpleEditor/elements/codeblock/Codeblock.js
@@ -0,0 +1,7 @@
+import { TextBlock } from 'substance'
+
+class Codeblock extends TextBlock {}
+
+Codeblock.type = 'codeblock'
+
+export default Codeblock
diff --git a/app/components/SimpleEditor/elements/codeblock/CodeblockComponent.js b/app/components/SimpleEditor/elements/codeblock/CodeblockComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef5c318cd443921f9a227e1418244d4b73a190e3
--- /dev/null
+++ b/app/components/SimpleEditor/elements/codeblock/CodeblockComponent.js
@@ -0,0 +1,10 @@
+import { TextBlockComponent } from 'substance'
+
+class CodeblockComponent extends TextBlockComponent {
+  render ($$) {
+    let el = super.render.call(this, $$)
+    return el.addClass('sc-codeblock')
+  }
+}
+
+export default CodeblockComponent
diff --git a/app/components/SimpleEditor/elements/codeblock/CodeblockHTMLConverter.js b/app/components/SimpleEditor/elements/codeblock/CodeblockHTMLConverter.js
new file mode 100644
index 0000000000000000000000000000000000000000..61cfb2ee26ebdff9f2dfd656e13aa382d074e1e8
--- /dev/null
+++ b/app/components/SimpleEditor/elements/codeblock/CodeblockHTMLConverter.js
@@ -0,0 +1,21 @@
+export default {
+  type: 'codeblock',
+  tagName: 'pre',
+
+  import: function (el, node, converter) {
+    let codeEl = el.find('code')
+    if (codeEl) {
+      node.content = converter.annotatedText(codeEl, [node.id, 'content'], { preserveWhitespace: true })
+    }
+  },
+
+  export: function (node, el, converter) {
+    let $$ = converter.$$
+
+    el.append(
+      $$('code').append(
+        converter.annotatedText([node.id, 'content'])
+      )
+    )
+  }
+}
diff --git a/app/components/SimpleEditor/elements/codeblock/CodeblockPackage.js b/app/components/SimpleEditor/elements/codeblock/CodeblockPackage.js
new file mode 100644
index 0000000000000000000000000000000000000000..0058541e28e4d2d653aec40a6f463fa06e291175
--- /dev/null
+++ b/app/components/SimpleEditor/elements/codeblock/CodeblockPackage.js
@@ -0,0 +1,27 @@
+import Codeblock from './Codeblock'
+import CodeblockComponent from './CodeblockComponent'
+import CodeblockHTMLConverter from './CodeblockHTMLConverter'
+
+export default {
+  name: 'codeblock',
+  configure: function (config) {
+    config.addNode(Codeblock)
+
+    config.addComponent('codeblock', CodeblockComponent)
+    config.addConverter('html', CodeblockHTMLConverter)
+
+    config.addTextType({
+      name: 'codeblock',
+      data: {type: 'codeblock'}
+    })
+
+    config.addLabel('codeblock', {
+      en: 'Codeblock',
+      de: 'Codeblock'
+    })
+  }
+
+  // Codeblock: Codeblock,
+  // CodeblockComponent: CodeblockComponent,
+  // CodeblockHTMLConverter: CodeblockHTMLConverter
+}
diff --git a/app/components/SimpleEditor/elements/codeblock/codeblock.scss b/app/components/SimpleEditor/elements/codeblock/codeblock.scss
new file mode 100644
index 0000000000000000000000000000000000000000..55c6293f75344ca0ac7dc5db405c797a499319fe
--- /dev/null
+++ b/app/components/SimpleEditor/elements/codeblock/codeblock.scss
@@ -0,0 +1,10 @@
+.sc-codeblock {
+  font-family: var(--font-family-code);
+  font-size: 15px;
+}
+
+// Toolbar styles
+// .sc-switch-text-type .se-option.sm-codeblock {
+//   font-family: var(--font-family-code);
+//   font-size: 15px;
+// }
diff --git a/app/components/SimpleEditor/elements/elements.scss b/app/components/SimpleEditor/elements/elements.scss
index 5e5005c84099d5ce8adfea12f05fc40d01788f80..786bf0a40c24fd8ccf3a6ac9d350896fba104fca 100644
--- a/app/components/SimpleEditor/elements/elements.scss
+++ b/app/components/SimpleEditor/elements/elements.scss
@@ -1,3 +1,4 @@
+@import './codeblock/codeblock';
 @import './comment/comment';
 // @import './dialogue/dialogue';
 @import './extract/extract';