diff --git a/resources/assets/js/components/AkauntingHtmlEditor.vue b/resources/assets/js/components/AkauntingHtmlEditor.vue
new file mode 100644
index 000000000..22be7451b
--- /dev/null
+++ b/resources/assets/js/components/AkauntingHtmlEditor.vue
@@ -0,0 +1,94 @@
+<template>
+    <div class="quill">
+        <div :id="toolbarId">
+            <div class="ql-formats">
+                <button class="ql-bold"></button>
+                <button class="ql-italic"></button>
+                <button class="ql-underline"></button>
+                <button class="ql-link"></button>
+                <button class="ql-blockquote"></button>
+                <button type="button" class="ql-list" value="ordered"></button>
+                <button type="button" class="ql-list" value="bullet"></button>
+            </div>
+        </div>
+        <div :id="editorId" :name="name" class="" ref="editor">
+        </div>
+    </div>
+</template>
+<script>
+  export default {
+    name: 'akaunting-html-editor',
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      name: String
+    },
+    data () {
+      return {
+        editor: null,
+        content: null,
+        lastHtmlValue: '',
+        editorId: null,
+        toolbarId: null
+      }
+    },
+    methods: {
+      initialize (Quill) {
+        this.editor = new Quill(`#${this.editorId}`, {
+          theme: 'snow',
+          modules: {
+            toolbar: `#${this.toolbarId}`
+          }
+        })
+
+        if (this.value.length > 0) {
+          this.editor.pasteHTML(this.value)
+        }
+
+        let editorRef = this.$refs.editor;
+        let node = editorRef.children[0];
+        this.editor.on('text-change', () => {
+          let html = node.innerHTML
+          if (html === '<p><br></p>') {
+            html = '';
+          }
+          this.content = html
+          this.$emit('input', this.content);
+        })
+      },
+      pasteHTML () {
+        if (!this.editor) {
+          return
+        }
+        this.editor.pasteHTML(this.value)
+      },
+      randomString() {
+        let text = "";
+        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+
+        for (let i = 0; i < 5; i++)
+          text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+        return text;
+      }
+    },
+    async mounted () {
+      let Quill = await import('quill')
+      Quill = Quill.default || Quill
+      this.editorId = this.randomString();
+      this.toolbarId = this.randomString();
+      this.$nextTick(() => {
+        this.initialize(Quill)
+      });
+    },
+    watch: {
+      value (newVal) {
+        if (newVal !== this.content) {
+          this.pasteHTML(newVal);
+        }
+      }
+    }
+  }
+</script>
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index f765248d7..46bdabf21 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -11,12 +11,13 @@ import AkauntingSelect from './../components/AkauntingSelect';
 import AkauntingSelectRemote from './../components/AkauntingSelectRemote';
 import AkauntingDate from './../components/AkauntingDate';
 import AkauntingRecurring from './../components/AkauntingRecurring';
+import AkauntingHtmlEditor from './../components/AkauntingHtmlEditor';
 
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import NProgressAxios from './../plugins/nprogress-axios';
 
-import { Select, Option, Steps, Step, Button, Link, Tooltip } from 'element-ui';
+import { Select, Option, Steps, Step, Button, Link, Tooltip, ColorPicker } from 'element-ui';
 
 import Form from './../plugins/form';
 
@@ -31,6 +32,7 @@ export default {
         AkauntingModalAddNew,
         AkauntingDate,
         AkauntingRecurring,
+        AkauntingHtmlEditor,
         [Select.name]: Select,
         [Option.name]: Option,
         [Steps.name]: Steps,
@@ -38,6 +40,7 @@ export default {
         [Button.name]: Button,
         [Link.name]: Link,
         [Tooltip.name]: Tooltip,
+        [ColorPicker.name]: ColorPicker,
     },
 
     data: function () {
diff --git a/resources/assets/js/views/settings/settings.js b/resources/assets/js/views/settings/settings.js
index ee28fd6ba..40c7f9be6 100644
--- a/resources/assets/js/views/settings/settings.js
+++ b/resources/assets/js/views/settings/settings.js
@@ -14,11 +14,9 @@ import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
 import BulkAction from './../../plugins/bulk-action';
-import HtmlEditor from './../../components/Inputs/HtmlEditor';
-import {ColorPicker} from 'element-ui';
 
 // plugin setup
-Vue.use(DashboardPlugin, ColorPicker);
+Vue.use(DashboardPlugin);
 
 const app = new Vue({
     el: '#app',
@@ -27,13 +25,9 @@ const app = new Vue({
         Global
     ],
 
-    components: {
-        HtmlEditor,
-        [ColorPicker.name]: ColorPicker,
-    },
-
     mounted() {
         this.onChangeProtocol(this.form.protocol);
+
         this.color = this.form.color;
     },
 
@@ -41,7 +35,7 @@ const app = new Vue({
         return {
             form: new Form('setting'),
             bulk_action: new BulkAction('settings'),
-            email:{
+            email: {
                 sendmailPath:true,
                 smtpHost:true,
                 smtpPort:true,
@@ -60,7 +54,7 @@ const app = new Vue({
             },
 
             color: '#55588b',
-            predefineColors:[
+            predefineColors: [
                 '#3c3f72',
                 '#55588b',
                 '#e5e5e5',
diff --git a/resources/views/partials/form/text_editor_group.blade.php b/resources/views/partials/form/text_editor_group.blade.php
index ade409483..74ff56c1c 100644
--- a/resources/views/partials/form/text_editor_group.blade.php
+++ b/resources/views/partials/form/text_editor_group.blade.php
@@ -7,7 +7,7 @@
             {!! Form::label($name, $text, ['class' => 'form-control-label'])!!}
         @endif
 
-        <html-editor
+        <akaunting-html-editor
             name="{{ $name }}"
 
             @if (!empty($attributes['v-model']))
@@ -29,7 +29,7 @@
             @if (isset($attributes['disabled']))
             :disabled="'{{ $attributes['disabled'] }}'"
             @endif
-        ></html-editor>
+        ></akaunting-html-editor>
 
         <div class="invalid-feedback d-block"
             v-if="{{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.has("' . $name . '")' }}"