diff --git a/djangocms_text/editors.py b/djangocms_text/editors.py
index b7fdffb..212c9bc 100644
--- a/djangocms_text/editors.py
+++ b/djangocms_text/editors.py
@@ -320,6 +320,12 @@ def default(self, obj):
     "Styles": {
         "title": _("Styles"),
     },
+    "InlineStyles": {
+        "title": _("Styles"),
+    },
+    "BlockStyles": {
+        "title": _("Blocks"),
+    },
     "Font": {
         "title": _("Font"),
     },
@@ -367,7 +373,7 @@ def default(self, obj):
 DEFAULT_TOOLBAR_CMS = [
     ["Undo", "Redo"],
     ["CMSPlugins", "cmswidget", "-", "ShowBlocks"],
-    ["Format", "Styles"],
+    ["Format", "Styles", "BlockStyles", "InlineStyles"],
     ["TextColor", "Highlight", "BGColor", "-", "PasteText", "PasteFromWord"],
     ["Maximize"],
     [
@@ -393,7 +399,7 @@ def default(self, obj):
 DEFAULT_TOOLBAR_HTMLField = [
     ["Undo", "Redo"],
     ["ShowBlocks"],
-    ["Format", "Styles"],
+    ["Format", "Styles", "BlockStyles", "InlineStyles"],
     ["TextColor", "Highlight", "BGColor", "-", "PasteText", "PasteFromWord"],
     ["Maximize"],
     [
@@ -439,7 +445,7 @@ def __init__(
         config: str,
         js: Iterable[str] | None = None,
         css: dict | None = None,
-        admin_css: dict | None = None,
+        admin_css: Iterable[str] | None = None,
         inline_editing: bool = False,
         child_plugin_support: bool = False,
     ):
diff --git a/private/js/cms.tiptap.js b/private/js/cms.tiptap.js
index fc5c92c..d62e338 100644
--- a/private/js/cms.tiptap.js
+++ b/private/js/cms.tiptap.js
@@ -19,7 +19,7 @@ import TableRow from '@tiptap/extension-table-row';
 import {TextAlign, TextAlignOptions} from '@tiptap/extension-text-align';
 import TiptapToolbar from "./tiptap_plugins/cms.tiptap.toolbar";
 
-import {TextColor, Small, Var, Kbd, Samp, Highlight, InlineQuote} from "./tiptap_plugins/cms.styles";
+import {TextColor, Highlight, InlineQuote, InlineStyle, BlockStyle} from "./tiptap_plugins/cms.styles";
 import CmsFormExtension from "./tiptap_plugins/cms.formextension";
 import CmsToolbarPlugin from "./tiptap_plugins/cms.toolbar";
 
@@ -49,7 +49,8 @@ class CMSTipTapPlugin {
                 TableHeader,
                 TableCell,
                 CmsDynLink,
-                Small, Var, Kbd, Samp, Highlight, InlineQuote,
+                Highlight, InlineQuote,
+                InlineStyle, BlockStyle,
                 TextAlign.configure({
                     types: ['heading', 'paragraph'],
                 }),
@@ -119,6 +120,9 @@ class CMSTipTapPlugin {
                 save_callback: save_callback,
                 settings: settings,
                 toolbar: options.toolbar || options.toolbar_HTMLField,
+                inlineStyles: options.inlineStyles,
+                blockStyles: options.blockStyles,
+                textColors: options.textColors,
                 separator_markup: this.separator_markup,
                 space_markup: this.space_markup,
             });
diff --git a/private/js/tiptap_plugins/cms.dynlink.js b/private/js/tiptap_plugins/cms.dynlink.js
index bbda49e..e82a0ed 100644
--- a/private/js/tiptap_plugins/cms.dynlink.js
+++ b/private/js/tiptap_plugins/cms.dynlink.js
@@ -41,7 +41,6 @@ function DynLinkClickHandler(editor) {
 
 const CmsDynLink = Link.extend({
     addAttributes() {
-        'use strict';
         return {
             'data-cms-href': {
                 default: null
diff --git a/private/js/tiptap_plugins/cms.plugin.js b/private/js/tiptap_plugins/cms.plugin.js
index cfca2e8..bbdff1b 100644
--- a/private/js/tiptap_plugins/cms.plugin.js
+++ b/private/js/tiptap_plugins/cms.plugin.js
@@ -127,6 +127,9 @@ TiptapToolbar.CMSPlugins.render = renderCmsPluginMenu;
 
 // Common node properties for both inline and block nodes
 const cmsPluginNodes = {
+    atom: true,
+    draggable: true,
+
     addAttributes() {
         'use strict';
         return {
@@ -144,10 +147,6 @@ const cmsPluginNodes = {
         };
     },
 
-    atom: true,
-
-    draggable: true,
-
     parseHTML() {
         'use strict';
         return [
diff --git a/private/js/tiptap_plugins/cms.styles.js b/private/js/tiptap_plugins/cms.styles.js
index a1d13e2..7eb27be 100644
--- a/private/js/tiptap_plugins/cms.styles.js
+++ b/private/js/tiptap_plugins/cms.styles.js
@@ -2,21 +2,19 @@
 /* jshint esversion: 11 */
 /* global document, window, console */
 
+'use strict';
 
-import {Mark, mergeAttributes,} from '@tiptap/core';
+import {Mark, Node, mergeAttributes} from '@tiptap/core';
+import TiptapToolbar from "./cms.tiptap.toolbar";
 
 
 const _markElement = {
     addOptions() {
-        'use strict';
-
         return {
             HTMLAttributes: {},
         };
     },
     parseHTML() {
-        'use strict';
-
         return [
             {
                 tag: this.name.toLowerCase()
@@ -28,7 +26,6 @@ const _markElement = {
     },
 
     addCommands() {
-        'use strict';
         let commands = {};
 
         commands[`set${this.name}`] = () => ({ commands }) => {
@@ -44,26 +41,6 @@ const _markElement = {
     },
 };
 
-const Small = Mark.create({
-    name: 'Small',
-    ..._markElement,
-});
-
-const Kbd = Mark.create({
-    name: 'Kbd',
-    ..._markElement,
-});
-
-const Var = Mark.create({
-    name: 'Var',
-    ..._markElement,
-});
-
-const Samp = Mark.create({
-    name: 'Samp',
-    ..._markElement,
-});
-
 const InlineQuote = Mark.create({
     name: 'Q',
     ..._markElement,
@@ -72,7 +49,6 @@ const InlineQuote = Mark.create({
 const Highlight = Mark.create({
     name: 'Highlight',
     parseHTML() {
-        'use strict';
         return [{tag: 'mark'}];
     },
     renderHTML({ HTMLAttributes }) {
@@ -80,10 +56,20 @@ const Highlight = Mark.create({
     },
 });
 
+
+function renderColorMenu(editor) {
+    const items = [];
+    for (const [cls, def] of Object.entries(editor.options?.textColors || TextColor.options.textColors)) {
+        items.push(`<button data-action="TextColor" data-class="${cls}" title="${def.name}" class="${cls}"></button>`);
+    }
+    return items.join('');
+
+}
+
 const TextColor = Mark.create({
     name: 'textcolor',
     addOptions() {
-        'use strict';
+        console.log(this.editor);
         return {
             textColors: {
                 'text-primary': {name: "Primary"},
@@ -100,30 +86,18 @@ const TextColor = Mark.create({
         };
     },
 
-    onCreate() {
-        'use strict';
-
-        if (this.editor.options.textColors) {
-            // Let editor options overwrite the default colors
-            this.options.textColors = this.editor.options.textColors;
-        }
-    },
-
     addAttributes() {
-        'use strict';
-
         return {
-            class: {
-                default: null,
-            },
-            style: {
-                default: null,
-            }
+            class: { default: null },
+            style: { default: null}
         };
     },
 
     parseHTML() {
-        'use strict';
+        if (this.editor.options.textColors) {
+            // Let editor options overwrite the default colors
+            this.options.textColors = this.editor.options.textColors;
+        }
 
         return [
             {
@@ -150,12 +124,10 @@ const TextColor = Mark.create({
     },
 
     renderHTML: attributes => {
-        'use strict';
         return ['span',  mergeAttributes({}, attributes.HTMLAttributes), 0];
     },
 
     addCommands() {
-        'use strict';
         return {
             setTextColor: (cls) => ({commands}) => {
                 if (!(cls in this.options.textColors)) {
@@ -182,4 +154,226 @@ const TextColor = Mark.create({
     }
 });
 
-export {TextColor, Small, Var, Kbd, Samp, Highlight, InlineQuote, TextColor as default};
+
+const blockTags = ((str) => str.toUpperCase().substring(1, str.length-1).split("><"))(
+    "<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form>" +
+    "<h1><h2><h3><h4><h5><h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>"
+);
+
+function renderStyleMenu(styles, editor, defaultTag = 'span') {
+    const allStyles = styles || InlineStyle.options.styles;
+    const menu = [];
+    for (let i = 0; i < allStyles.length; i++) {
+        const action = blockTags.includes((allStyles[i].element || defaultTag).toUpperCase()) ? 'BlockStyles' : 'InlineStyles';
+        menu.push(`<button data-action="${action}" data-id="${i}">${allStyles[i].name}</button>`);
+    }
+    return menu.join('');
+}
+
+function validateAttributes(node, styleAttributes) {
+    if (!styleAttributes) {
+        return true;
+    }
+    if (!node?.classList) {
+        return false;
+    }
+    if (styleAttributes.class) {
+        const requiredClasses = styleAttributes.class.split(' ');
+        if (!requiredClasses.every(cls => node.classList.contains(cls))) {
+            return false;
+        }
+    }
+    return Object.entries(styleAttributes)
+        .every(([key, value]) => key === 'class' || node.getAttribute(key) === value);
+}
+
+
+/**
+ * Represents a utility or configuration object for managing and applying styles.
+ * Provides methods for adding options and attributes, parsing HTML styles, and rendering
+ * HTML with specific styles and attributes.
+ *
+ * @type {Object}
+ *
+ * @property {Function} addOptions
+ *     Adds configuration options for styles. Returns an object with an array of styles.
+ *
+ * @property {Function} addAttributes
+ *     Adds default attributes for tags. Returns an object containing default settings
+ *     for `tag` and `attributes`.
+ *
+ * @property {Function} parseHTML
+ *     Parses the HTML to match and apply styles based on the context (block or inline).
+ *     Adjusts styles using editor options and validates them against node attributes.
+ *     Returns a mapped array of style objects, including tag and attribute configurations.
+ *
+ * @property {Function} renderHTML
+ *     Renders the HTML by merging provided attributes with the default ones. Outputs
+ *     a structured array containing the tag, merged attributes, and content placeholder.
+ */
+const Style = {
+    addOptions() {
+        return { styles: [] };
+    },
+
+    addAttributes() {
+        return {
+            tag: { default: null },
+            attributes: { default: {} },
+        };
+    },
+
+    parseHTML() {
+        const styles = this.name === 'blockstyle' ?
+            this.editor.options.blockStyles :
+            this.editor.options.inlineStyles;
+        if (styles) {
+            this.options.styles = styles;
+        }
+
+       return (this.options.styles || []).map(style => {
+           return {
+               tag: style.element || '*',
+               getAttrs: node => validateAttributes(node, style.attributes) && (
+                   style.element ?
+                       {tag: style.element, attributes: style.attributes} :
+                       {attributes: style.attributes}
+               )
+           };
+        });
+    },
+
+   renderHTML({HTMLAttributes}) {
+        return [HTMLAttributes.tag || this.defaultTag,  mergeAttributes({}, HTMLAttributes.attributes), 0];
+    }
+};
+
+
+/**
+ * InlineStyle is an extension for defining inline styles as marks in an editor.
+ * It allows toggling and checking the activation state of specific inline styles.
+ * The extension creates customizable inline styles applied via specified HTML elements
+ * or attributes.
+ *
+ * Properties:
+ * - `name`: Specifies the name of the mark, "inlinestyle".
+ * - `defaultTag`: Defines the default HTML element tag ("span") used when no specific tag is provided.
+ * - `styles`: A set of predefined inline styles with names and corresponding HTML elements or attributes
+ *   (e.g., "Small" mapped to `<small>`).
+ *
+ * Methods:
+ * - `addOptions`: Provides configuration options for the extension, including the predefined styles and their mappings.
+ * - `addCommands`: Adds custom commands for managing inline styles:
+ *    - `toggleInlineStyle(id)`: Toggles the inline style based on the provided ID. Applies the corresponding tag
+ *      and attributes if the style exists.
+ *    - `activeInlineStyle(id)`: Checks if the specified inline style is currently active in the editor
+ *      by evaluating the tag and attributes against the style definition.
+ */
+const InlineStyle = Mark.create({
+    name: 'inlinestyle',
+    defaultTag: 'span',
+    ...Style,
+
+    addOptions() {
+        return {
+            styles: [
+                { name: 'Small', element: 'small' },
+                { name: 'Kbd', element: 'kbd' },
+                { name: 'Var', element: 'var' },
+                { name: 'Samp', element: 'samp' },
+            ]
+        };
+    },
+
+    addCommands() {
+        return {
+            toggleInlineStyle: (id) => ({commands}) => {
+                const style = this.options.styles[id];
+                if (!style) {
+                    return false;
+                }
+                if (commands.activeInlineStyle(id)) {
+                    commands.extendMarkRange(this.name, {tag: style.element});
+                    return commands.unsetMark(this.name);
+                }
+                return commands.setMark(this.name, {
+                    tag: style.element || this.defaultTag,
+                    attributes: style.attributes,
+                });
+            },
+            activeInlineStyle: (id) => ({editor}) => {
+                const style = this.options.styles[id];
+                if (!style || !editor.isActive(this.name)) {
+                    return false;
+                }
+
+                const activeAttr = editor.getAttributes(this.name);
+                if ((activeAttr.tag || style.element) && activeAttr.tag !== style.element) {
+                    return false;
+                }
+                if (activeAttr.attributes === style.attributes || !style.attributes) {
+                    return true;
+                }
+                return JSON.stringify(activeAttr.attributes) === JSON.stringify(style.attributes);
+            }
+        };
+    }
+});
+
+/**
+ * BlockStyle is a custom node extension used in a content editor framework.
+ * It defines a block-level node that can contain other block-level nodes and
+ * provides functionality for applying and managing custom styles on block elements.
+ *
+ * Properties:
+ * - `name`: The name identifier for this node extension, used in editor schema.
+ * - `group`: Specifies the category or group for the node, classified under "block".
+ * - `content`: Defines the content model, allowing inclusion of one or more block nodes.
+ * - `defaultTag`: Sets the default HTML tag for this node, which is "div".
+ * - `options.styles`: Expects an object containing custom style definitions, where each
+ *   style includes information like the HTML tag (`element`) and any associated attributes.
+ *
+ * Methods:
+ * - `addCommands`: Provides custom commands for interacting with the node. Includes:
+ *     - `toggleBlockStyle(id)`: Toggles the styling of the block based on the provided style ID.
+ *        Requires the presence of a matching style in `options.styles`. Utilizes `toggleWrap`
+ *        to update the editor state with the specified tag and attributes.
+ *     - `activeBlockStyle(id)`: Checks if the current block is active with a specific style,
+ *        based on the tag and attributes defined in the style ID.
+ *
+ * This extension is designed to work in conjunction with style configurations and allows
+ * for easy application of predefined block styles in a WYSIWYG editor.
+ */
+const BlockStyle = Node.create({
+    name: 'blockstyle',
+    group: 'block',
+    content: 'block+',
+    defaultTag: 'div',
+    ...Style,
+
+    addCommands() {
+        return {
+            toggleBlockStyle: (id) => ({commands}) => {
+                const style = this.options.styles[id];
+                return style && commands.toggleWrap(this.name, {
+                        tag: style.element,
+                        attributes: style.attributes,
+                    });
+            },
+            activeBlockStyle: (id) => ({editor}) => {
+                const style = this.options.styles[id];
+                return style && editor.isActive(this.name, {
+                    tag: style.element,
+                    attributes: style.attributes,
+                });
+            }
+        };
+    }
+});
+
+
+TiptapToolbar.InlineStyles.items = (editor) => renderStyleMenu(editor.options.inlineStyles, editor, 'span');
+TiptapToolbar.BlockStyles.items = (editor) => renderStyleMenu(editor.options.blockStyles || [], editor, 'div');
+TiptapToolbar.TextColor.items = renderColorMenu;
+
+export {TextColor, Highlight, InlineQuote, InlineStyle, BlockStyle, TextColor as default};
diff --git a/private/js/tiptap_plugins/cms.tiptap.toolbar.js b/private/js/tiptap_plugins/cms.tiptap.toolbar.js
index 6e9f859..65ee7a1 100644
--- a/private/js/tiptap_plugins/cms.tiptap.toolbar.js
+++ b/private/js/tiptap_plugins/cms.tiptap.toolbar.js
@@ -6,14 +6,14 @@
 
 
 function generateButtonArray(rows, cols) {
-    let buttons = '<div class="tt-create-table">';
+    const buttons = ['<div class="tt-create-table">'];
     for (let j= 0; j < rows; j++) {
         for (let i = 0; i < cols; i++) {
-            buttons += `<button title="${i+1}x${j+1}" data-action="Table" style="--mx: ${i*12}px; --my: ${j*12+4}px;" data-rows="${j+1}" data-cols="${i+1}"></button>`;
+            buttons.push(`<button title="${i+1}x${j+1}" data-action="Table" style="--mx: ${i*12}px; --my: ${j*12+4}px;" data-rows="${j+1}" data-cols="${i+1}"></button>`);
         }
     }
-    buttons += '</div>';
-    return buttons;
+    buttons.push('</div>');
+    return buttons.join('');
 }
 
 const _tableMenu = [
@@ -34,15 +34,6 @@ function generateTableMenu(editor, builder) {
     return generateButtonArray(10, 10) + builder(_tableMenu);
 }
 
-function generateColorMenu(editor, builder) {
-    let items = '';
-    const mark = editor.extensionManager.extensions.find(extension => extension.name === 'textcolor');
-    for (const [cls, def] of Object.entries(mark.options?.textColors || {})) {
-        items += `<button data-action="TextColor" data-class="${cls}" title="${def.name}" class="${cls}"></button>`;
-    }
-    return items;
-
-}
 
 const TiptapToolbar = {
     Undo: {
@@ -103,9 +94,9 @@ const TiptapToolbar = {
         },
         enabled: (editor) => editor.can().toggleTextColor(),
         active: (editor, button) => editor.isActive('textcolor', {class: button.dataset?.class}),
-        items: generateColorMenu,
         icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fonts" viewBox="0 0 16 16"><path d="M12.258 3h-8.51l-.083 2.46h.479c.26-1.544.758-1.783 2.693-1.845l.424-.013v7.827c0 .663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062 2.434.301 2.693 1.846h.479z"/></svg>',
         type: 'mark',
+        class: 'js-set-active-class',
     },
     InlineQuote: {
         action: (editor) => {
@@ -138,6 +129,23 @@ const TiptapToolbar = {
             '</svg>',
         type: 'mark',
     },
+    InlineStyles: {
+        type: 'mark',
+        class: 'vertical js-set-active-text',
+        action: (editor, button) => {
+            editor.commands.toggleInlineStyle(button?.dataset?.id ||0);
+        },
+        enabled: (editor, button) => editor.can().toggleInlineStyle(button?.dataset?.id || 0),
+        active: (editor, button) => editor.commands.activeInlineStyle(button?.dataset?.id || 0),
+
+    },
+    BlockStyles: {
+        type: 'mark',
+        class: 'vertical js-set-active-text',
+        action: (editor, button) => editor.commands.toggleBlockStyle(button?.dataset?.id || 0),
+        enabled: (editor, button) => editor.can().toggleBlockStyle(button?.dataset?.id || 0),
+        active: (editor, button) => editor.commands.activeBlockStyle(button?.dataset?.id || 0),
+    },
     RemoveFormat: {
         action: (editor) => editor.commands.unsetAllMarks(),
         enabled: (editor) => editor.can().unsetAllMarks(),
@@ -299,18 +307,6 @@ const TiptapToolbar = {
         active: (editor) => editor.isActive('code'),
         type: 'mark',
     },
-    Small: {
-        action: (editor) => editor.commands.toggleSmall(),
-        enabled: (editor) => editor.can().toggleSmall(),
-        active: (editor) => editor.isActive('Small'),
-        type: 'mark',
-    },
-    Kbd: {
-        action: (editor) => editor.commands.toggleKbd(),
-        enabled: (editor) => editor.can().toggleKbd(),
-        active: (editor) => editor.isActive('Kbd'),
-        type: 'mark',
-    },
     CodeBlock: {
         action: (editor) => editor.commands.toggleCodeBlock(),
         enabled: (editor) => editor.can().toggleCodeBlock(),
@@ -331,7 +327,7 @@ const TiptapToolbar = {
     Heading1: {
         action: (editor) => editor.commands.setHeading({ level: 1 }),
         enabled: (editor) => editor.can().setHeading({ level: 1 }),
-        active: (editor) => editor.isActive('heading', {level: 1}),
+        active: (editor) => editor.isActive('heading', { level: 1 }),
         type: 'block',
     },
     Heading2: {
diff --git a/private/js/tiptap_plugins/cms.toolbar.js b/private/js/tiptap_plugins/cms.toolbar.js
index d2ae88c..231d6ad 100644
--- a/private/js/tiptap_plugins/cms.toolbar.js
+++ b/private/js/tiptap_plugins/cms.toolbar.js
@@ -439,10 +439,12 @@ function _updateToolbar(editor, toolbar) {
     }
     for (const button of querySelector) {
         const {action} = button.dataset;
-        if (action && TiptapToolbar[action]) {
+        if (TiptapToolbar[action]) {
               const toolbarItem = window.cms_editor_plugin._getRepresentation(action);
               try {
-                  button.disabled = !toolbarItem?.enabled(editor, button);
+                  if (toolbarItem.enabled !== undefined) {
+                      button.disabled = !toolbarItem.enabled(editor, button);
+                  }
                   try {
                       if (toolbarItem.active && toolbarItem.active(editor, button)) {
                           button.classList.add('active');