diff --git a/package.json b/package.json
index be6507c92..0aebcefaa 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "scripts": {
     "dev": "yarn storybook",
-    "build": "vite build && yarn generate:types",
+    "build": "vite build",
     "test:unit": "vitest run --config ./vitest.config.ts",
     "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
     "lint": "eslint src src/ tests/ .storybook/",
diff --git a/src/components/Avatar/SbAvatar.vue b/src/components/Avatar/SbAvatar.vue
index f50cad74b..3837853f5 100644
--- a/src/components/Avatar/SbAvatar.vue
+++ b/src/components/Avatar/SbAvatar.vue
@@ -2,7 +2,7 @@
   <div v-tooltip="avatarTooltipAttrs" :class="avatarClass" v-bind="$attrs">
     <template v-if="showImage">
       <slot>
-        <div class="sb-avatar__image">
+        <div class="sb-avatar__image" :style="avatarStyle">
           <img
             v-show="isImageLoaded"
             :src="src"
@@ -103,6 +103,10 @@ export default {
       type: String,
       default: null,
     },
+    borderColor: {
+      type: String,
+      default: null,
+    },
     status: {
       type: String,
       default: null,
@@ -134,6 +138,15 @@ export default {
       return ['sb-avatar', avatarSizeClass]
     },
 
+    avatarStyle() {
+      const isColorValid = this.borderColor && this.borderColor.startsWith('#')
+
+      return {
+        borderColor: isColorValid && this.borderColor,
+        borderWidth: isColorValid && '2px',
+      }
+    },
+
     avatarInitialsClass() {
       const color =
         this.bgColor || generateRandomBgColor(this.friendlyName || this.name)
diff --git a/src/components/AvatarGroup/SbAvatarGroup.vue b/src/components/AvatarGroup/SbAvatarGroup.vue
index f7be80983..460365fee 100644
--- a/src/components/AvatarGroup/SbAvatarGroup.vue
+++ b/src/components/AvatarGroup/SbAvatarGroup.vue
@@ -61,7 +61,7 @@ export default {
         children &&
         children.length === 1 &&
         children[0].children &&
-        children[0].children[0].type.name === 'SbAvatar'
+        children[0].children[0]?.type.name === 'SbAvatar'
       const avatarChildren = useGrandchildren ? children[0].children : children
       return avatarChildren.filter(({ type }) => type.name === 'SbAvatar')
     },
diff --git a/src/components/Button/SbButton.vue b/src/components/Button/SbButton.vue
index 8f65f5088..68c1043b7 100644
--- a/src/components/Button/SbButton.vue
+++ b/src/components/Button/SbButton.vue
@@ -85,6 +85,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isBorderless: {
+      type: Boolean,
+      default: false,
+    },
     label: {
       type: String,
       default: null,
@@ -105,6 +109,7 @@ export default {
         `sb-button--${this.variant}`,
         {
           'sb-button--disabled': this.isDisabled,
+          'sb-button--borderless': this.isBorderless,
           'sb-button--small': this.size === 'small',
           'sb-button--large': this.size === 'large',
           'sb-button--full': this.isFullWidth,
diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
index 73cb39a39..4a2a0e6b4 100644
--- a/src/components/Button/button.scss
+++ b/src/components/Button/button.scss
@@ -215,6 +215,10 @@
   }
 }
 
+.sb-button--borderless {
+  border: 0;
+}
+
 // button elements
 
 .sb-button__label {
diff --git a/src/components/EditorHeader/EditorHeader.stories.js b/src/components/EditorHeader/EditorHeader.stories.js
index 79042fced..c5c131349 100644
--- a/src/components/EditorHeader/EditorHeader.stories.js
+++ b/src/components/EditorHeader/EditorHeader.stories.js
@@ -1,6 +1,15 @@
 import { SbEditorHeader } from './index'
 
-const languagesItems = ['English', 'German']
+const languages = [
+  {
+    name: 'English',
+    code: 'en',
+  },
+  {
+    name: 'Portuguese',
+    code: 'pt',
+  },
+]
 
 const usersList = [
   {
@@ -17,7 +26,7 @@ const usersList = [
   },
 ]
 
-const optionsList = [
+const actionsList = [
   {
     name: 'Open Draft',
   },
@@ -36,118 +45,69 @@ const optionsList = [
   },
 ]
 
-const actionsList = [
-  {
-    name: 'Dimensions',
-  },
-  {
-    name: 'Preview',
-  },
-  {
-    name: 'Unpublish',
-  },
-]
-
-const EditorTemplate = (args) => ({
-  components: { SbEditorHeader },
-  setup() {
-    return { args }
-  },
-  template: `
-    <SbEditorHeader
-      v-bind="args"
-    />
-  `,
-})
-
 export default {
   title: 'Interface/SbEditorHeader',
   component: SbEditorHeader,
   parameters: {
     docs: {
       description: {
-        component: 'SbEditorHeader',
+        component: 'Header component for various editors',
       },
     },
   },
   args: {
-    languages: [...languagesItems],
+    languages: [...languages],
     users: [...usersList],
     actions: [...actionsList],
-    options: [...optionsList],
-    spaceStatus: 'unpublished',
     hasSaveButton: true,
-    showPublishedIcon: true,
-    headerTitle: 'API-based & Headless CMS as a Service',
-    headerSubTitle: 'Updated 15m ago',
+    headerTitle: 'Headless CMS',
+    headerSubtitle: 'Updated 15m ago',
+    mode: 'light',
   },
   argTypes: {
-    languages: {
-      name: 'languages',
-      description: 'Available languages array',
-      control: {
-        type: 'array',
-      },
-    },
-    users: {
-      name: 'users',
-      description: 'User information array',
-      control: {
-        type: 'object',
-      },
-    },
-    actions: {
-      name: 'actions',
-      description: 'Available actions array',
-      control: {
-        type: 'object',
-      },
-    },
-    options: {
-      name: 'options',
-      description: 'Available options array',
-      control: {
-        type: 'object',
-      },
-    },
-    spaceStatus: {
-      name: 'spaceStatus',
-      description:
-        'Change the icon to inform whether the space is published or not',
-      options: ['unpublished', 'published', 'published-and-changes'],
-      control: {
-        type: 'select',
-      },
-    },
-    hasSaveButton: {
-      name: 'hasSaveButton',
-      description: 'Props to show the save icon',
-      control: {
-        type: 'boolean',
-      },
-    },
-    showPublishedIcon: {
-      name: 'showPublishedIcon',
-      description: 'Props to show or not the published icon',
-      control: {
-        type: 'boolean',
-      },
-    },
-    headerTitle: {
-      name: 'headerTitle',
-      description: '',
-      control: {
-        type: 'text',
-      },
-    },
-    headerSubTitle: {
-      name: 'headerSubTitle',
-      description: '',
-      control: {
-        type: 'text',
-      },
+    mode: {
+      options: ['light', 'dark'],
+      control: { type: 'radio' },
     },
   },
 }
 
-export const Default = EditorTemplate.bind({})
+export const Default = {
+  name: 'Default',
+  render: (args, { argTypes }) => ({
+    components: { SbEditorHeader },
+    props: Object.keys(argTypes),
+    template: `
+        <SbEditorHeader v-bind="$props"  />
+      `,
+  }),
+}
+
+export const WithSlots = () => ({
+  components: { SbEditorHeader },
+  template: `
+      <SbEditorHeader>
+        <template #left>
+          <p>Custom left slot</p>
+        </template>
+
+        <template #middle>
+          <p>Custom center slot</p>
+        </template>
+
+        <template #right>
+        <p>Custom right slot</p>
+        </template>
+      </SbEditorHeader>
+  `,
+})
+
+export const DarkMode = () => ({
+  components: { SbEditorHeader },
+  template: `
+    <SbEditorHeader
+      header-title="My title"
+      mode="dark"
+    />
+  `,
+})
diff --git a/src/components/EditorHeader/EditorHeader.vue b/src/components/EditorHeader/EditorHeader.vue
index e5e161c1c..926a10dbe 100644
--- a/src/components/EditorHeader/EditorHeader.vue
+++ b/src/components/EditorHeader/EditorHeader.vue
@@ -1,106 +1,26 @@
 <template>
-  <div class="sb-editor__container">
-    <SbHeaderTitle :title="headerTitle" :format="returnViewFormat" />
-
-    <div
-      class="sb-editor-header"
-      :class="{ 'sb-editor-header__mobile': isOnMobile }"
-    >
-      <SbDesktopAndTabletViewer
-        v-if="isOnTabletOrDesktop"
-        v-bind="{
-          headerTitle,
-          headerSubTitle,
-          languages,
-          users,
-          actions,
-          format: returnViewFormat,
-          size: windowWidth,
-          isOnMobile,
-          isOnTablet,
-          isOnDesktop,
-          isOnMobileOrTablet,
-        }"
-        @changes="$_handleListenersOrchestrator"
-      />
-      <SbMobileViewer
-        v-if="isOnMobile"
-        v-bind="{
-          languages,
-          users,
-          actions,
-        }"
-        @changes="$_handleListenersOrchestrator"
-      />
-      <div
-        class="sb-editor-header__content"
-        :class="{
-          'sb-editor-header__content--mobile': isOnMobile,
-        }"
-      >
-        <SbHeaderItem v-if="hasSaveButton" with-separator>
-          <button
-            class="sb-editor-header__save-button"
-            @click="handleSaveChanges"
-          >
-            Save
-          </button>
-        </SbHeaderItem>
-
-        <SbHeaderItem
-          v-if="spaceStatus"
-          with-separator
-          class="sb-editor-header__status"
-        >
-          <SbIcon
-            :name="returnNameOfIconStatus"
-            size="large"
-            :color="returnColorOfStatus"
-          />
-        </SbHeaderItem>
-
-        <SbHeaderItem>
-          <SbButton
-            size="small"
-            label="Publish"
-            variant="primary"
-            @click="handlePublishSpace"
-          />
-        </SbHeaderItem>
-
-        <SbHeaderItem v-if="options">
-          <SbMenu>
-            <SbMenuButton has-icon-only />
-            <SbMenuList placement="bottom-end">
-              <SbMenuItem
-                v-for="option in options"
-                :key="option.id"
-                :type="option.type"
-                @click="handleSelectOptions(option.name)"
-              >
-                {{ option.name }}
-              </SbMenuItem>
-            </SbMenuList>
-          </SbMenu>
-        </SbHeaderItem>
-      </div>
-    </div>
+  <div class="sb-editor-header" :class="computedClasses">
+    <slot name="left">
+      <HeaderTitle v-bind="$props" @go-back="$emit('go-back')" />
+    </slot>
+
+    <slot name="middle"> </slot>
+
+    <slot name="right">
+      <HeaderActions v-bind="$props" @changes="(e) => $emit('click-action', e)">
+        <template #save>
+          <slot name="save" />
+        </template>
+      </HeaderActions>
+    </slot>
   </div>
 </template>
 
 <script>
-import SbDesktopAndTabletViewer from './components/DesktopAndTabletViewer'
-import SbMobileViewer from './components/MobileViewer'
-import SbHeaderTitle from './components/HeaderTitle'
-
-import SbHeaderItem from './components/HeaderItem'
-import SbIcon from '../Icon'
-
-import SbButton from '../Button'
+import HeaderTitle from './components/HeaderTitle'
+import HeaderActions from './components/HeaderActions'
 
-import { SbMenu, SbMenuButton, SbMenuList, SbMenuItem } from '../Menu'
-
-import { sharedProps } from './lib'
+import { sharedProps } from './sharedProps'
 
 import { WindowResizeObserverMixin } from '../../mixins'
 
@@ -108,31 +28,20 @@ export default {
   name: 'SbEditorHeader',
 
   components: {
-    SbDesktopAndTabletViewer,
-    SbHeaderTitle,
-    SbMobileViewer,
-    SbButton,
-    SbHeaderItem,
-    SbIcon,
-    SbMenu,
-    SbMenuButton,
-    SbMenuList,
-    SbMenuItem,
+    HeaderTitle,
+    HeaderActions,
   },
 
   mixins: [WindowResizeObserverMixin()],
 
   props: {
     ...sharedProps,
-    visual: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
     'change-language',
-    'publish',
+    'go-back',
+    'click-action',
     'save',
     'select-action',
     'select-options',
@@ -145,78 +54,25 @@ export default {
   }),
 
   computed: {
-    returnNameOfIconStatus() {
-      return this.spaceStatus === 'published'
-        ? 'published-circle'
-        : 'status-circle'
-    },
-
-    returnColorOfStatus() {
-      return this.spaceStatus === 'unpublished'
-        ? 'light'
-        : this.spaceStatus === 'published'
-        ? 'primary'
-        : this.spaceStatus === 'published-and-changes'
-        ? 'light-gray'
-        : 'light'
-    },
-
-    returnViewFormat() {
-      if (this.isOnDesktop) return 'desktop'
-
-      return this.isOnTablet ? 'tablet' : 'mobile'
+    computedClasses() {
+      return {
+        'sb-editor-header--dark': this.mode === 'dark',
+      }
     },
   },
 
   methods: {
-    /**
-     * this method is triggered when an action is taken on the
-     * desktop and mobile components, it works as an orchestrator,
-     * to distribute the emits.
-     */
-    $_handleListenersOrchestrator(action) {
-      if (action.type === 'lang') {
-        this.handleSetNewLanguage(action.language)
-      }
-      if (action.type === 'act') {
-        this.handleSelectAction(action.action)
-      }
-    },
-
-    /**
-     * method to emit the selection of new option
-     */
     handleSelectOptions(opt) {
       this.$emit('select-options', opt.toLowerCase().replace(' ', '-'))
     },
 
-    /**
-     * method to emit save changes on space
-     */
     handleSaveChanges() {
       this.$emit('save')
     },
 
-    /**
-     * method to emit the publish event
-     */
     handlePublishSpace() {
       this.$emit('publish')
     },
-
-    /**
-     * method to emit the new action
-     */
-    handleSelectAction(act) {
-      this.$emit('select-action', act.toLowerCase().replace(' ', '-'))
-    },
-
-    /**
-     * method to emit the selection of a language
-     */
-    handleSetNewLanguage(lang) {
-      this.$emit('change-language', { language: lang })
-    },
   },
 }
 </script>
diff --git a/src/components/EditorHeader/__tests__/DesktopAndTabletViewer.spec.js b/src/components/EditorHeader/__tests__/DesktopAndTabletViewer.spec.js
deleted file mode 100644
index bc67883d3..000000000
--- a/src/components/EditorHeader/__tests__/DesktopAndTabletViewer.spec.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { SbDesktopAndTabletViewer, SbHeaderItem } from '..'
-import SbAvatar from '../../Avatar'
-import { SbMenu, SbMenuItem } from '../../Menu'
-import SbIcon from '../../Icon'
-import SbTooltip from '../../Tooltip'
-
-import { mount } from '@vue/test-utils'
-
-const factory = (props) => {
-  return mount(SbDesktopAndTabletViewer, {
-    props,
-  })
-}
-
-const actionsList = [
-  {
-    name: 'dimensions',
-  },
-  {
-    name: 'preview',
-  },
-  {
-    name: 'unpublish',
-  },
-]
-
-const usersList = [
-  {
-    src: 'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
-    name: 'John Doe',
-  },
-  {
-    src: 'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
-    name: 'Kobe Bryant',
-  },
-]
-
-const fakeProps = {
-  languages: ['English', 'German'],
-  users: [...usersList],
-  actions: [...actionsList],
-  format: 'desktop',
-  size: 1200,
-  headerTitle: 'A awesome cms',
-  headerSubTitle: 'Its true',
-}
-
-describe.skip('SbDesktopAndTabletViewer component', () => {
-  it('should render all internal components', () => {
-    const wrapper = factory(fakeProps)
-
-    expect(wrapper.findComponent(SbHeaderItem).exists()).toBe(true)
-
-    expect(wrapper.findAllComponents(SbHeaderItem).length).toBe(5)
-
-    expect(wrapper.findComponent(SbAvatar).exists()).toBe(true)
-
-    expect(wrapper.findAllComponents(SbAvatar).length).toBe(2)
-
-    expect(wrapper.findComponent(SbMenu).exists()).toBe(true)
-
-    expect(wrapper.findAllComponents(SbMenuItem).length).toBe(2)
-
-    expect(wrapper.findComponent(SbTooltip).exists()).toBe(true)
-
-    expect(wrapper.findAllComponents(SbTooltip).length).toBe(5)
-
-    expect(wrapper.findComponent(SbIcon).exists()).toBe(true)
-
-    expect(wrapper.findAllComponents(SbIcon).length).toBe(6)
-  })
-
-  it('should trigger all functions', () => {
-    const wrapper = factory(fakeProps)
-
-    wrapper.vm.handleSetNewLanguage = vi.fn()
-
-    wrapper.vm.handleSelectNewAction = vi.fn()
-
-    wrapper.vm.handleSetNewLanguage()
-
-    expect(wrapper.vm.handleSetNewLanguage).toBeCalled()
-
-    wrapper.vm.handleSelectNewAction()
-
-    expect(wrapper.vm.handleSelectNewAction).toBeCalled()
-  })
-
-  it('should emit all internal events', async () => {
-    const wrapper = factory(fakeProps)
-
-    wrapper.vm.$emit('changes', { type: 'act', action: 'unpublish' })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('changes')).toBeTruthy()
-
-    expect(wrapper.emitted('changes')).toEqual([
-      [{ type: 'act', action: 'unpublish' }],
-    ])
-  })
-})
diff --git a/src/components/EditorHeader/__tests__/EditorHeader.spec.js b/src/components/EditorHeader/__tests__/EditorHeader.spec.js
index 1da6a0791..cb3a50275 100644
--- a/src/components/EditorHeader/__tests__/EditorHeader.spec.js
+++ b/src/components/EditorHeader/__tests__/EditorHeader.spec.js
@@ -1,10 +1,4 @@
-import {
-  SbEditorHeader,
-  SbHeaderTitle,
-  SbHeaderItem,
-  SbMobileViewer,
-  SbDesktopAndTabletViewer,
-} from '../index'
+import { SbEditorHeader, SbHeaderTitle, SbHeaderItem } from '../index'
 
 import SbIcon from '../../Icon'
 import SbButton from '../../Button'
@@ -30,25 +24,6 @@ const usersList = [
   },
 ]
 
-const optionsList = [
-  {
-    name: 'Open Draft',
-  },
-  {
-    name: 'Open Published',
-  },
-  {
-    name: 'Draft json',
-  },
-  {
-    name: 'Published json',
-  },
-  {
-    name: 'Unpublish',
-    type: 'negative',
-  },
-]
-
 const actionsList = [
   {
     name: 'dimensions',
@@ -65,33 +40,30 @@ const fakeProps = {
   languages: ['English', 'German'],
   users: [...usersList],
   actions: [...actionsList],
-  options: [...optionsList],
   spaceStatus: 'unpublished',
   hasSaveButton: true,
   showPublishedIcon: true,
-  headerTitle: 'A awesome CMS',
-  headerSubTitle: 'Its true',
+  headerTitle: 'An awesome CMS',
+  headerSubtitle: 'Its true',
 }
 
-describe.skip('SbEditorHeader component', () => {
+describe('SbEditorHeader component', () => {
   it('should render all internal components', () => {
     const wrapper = factory(fakeProps)
 
     expect(wrapper.findComponent(SbHeaderTitle).exists()).toBe(true)
 
-    expect(wrapper.findComponent(SbHeaderTitle).text()).toBe('')
+    expect(wrapper.findComponent(SbHeaderTitle).text()).toBe(
+      'An awesome CMSIts true'
+    )
 
     expect(wrapper.findComponent(SbHeaderItem).exists()).toBe(true)
 
-    expect(wrapper.findAllComponents(SbHeaderItem).length).toBe(9)
-
-    expect(wrapper.findComponent(SbDesktopAndTabletViewer).exists()).toBe(true)
-
-    expect(wrapper.findComponent(SbMobileViewer).exists()).toBe(false)
+    expect(wrapper.findAllComponents(SbHeaderItem).length).toBe(7)
 
     expect(wrapper.findComponent(SbIcon).exists()).toBe(true)
 
-    expect(wrapper.findAllComponents(SbIcon).length).toBe(8)
+    expect(wrapper.findAllComponents(SbIcon).length).toBe(9)
 
     expect(wrapper.findComponent(SbButton).exists()).toBe(true)
 
@@ -105,7 +77,7 @@ describe.skip('SbEditorHeader component', () => {
 
     expect(wrapper.findAllComponents(SbMenuList).length).toBe(2)
 
-    expect(wrapper.findAllComponents(SbMenuItem).length).toBe(7)
+    expect(wrapper.findAllComponents(SbMenuItem).length).toBe(5)
   })
 
   it('should emit all internal events', async () => {
@@ -125,15 +97,6 @@ describe.skip('SbEditorHeader component', () => {
 
     expect(wrapper.emitted('publish')).toBeTruthy()
 
-    // select-options event
-    wrapper.vm.$emit('select-options', 'unpublished')
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('select-options')).toBeTruthy()
-
-    expect(wrapper.emitted('select-options')).toEqual([['unpublished']])
-
     // select-action event
     wrapper.vm.$emit('select-action', 'unpublished')
 
diff --git a/src/components/EditorHeader/__tests__/HeaderTitle.spec.js b/src/components/EditorHeader/__tests__/HeaderTitle.spec.js
index 23c508ea8..c16d406f6 100644
--- a/src/components/EditorHeader/__tests__/HeaderTitle.spec.js
+++ b/src/components/EditorHeader/__tests__/HeaderTitle.spec.js
@@ -9,16 +9,16 @@ const factory = (props) => {
   })
 }
 
-describe.skip('Test if Header title renderer correctly', () => {
+describe('Test if Header title renderer correctly', () => {
   it('Test to check if the component renders the text', () => {
     const wrapper = factory({
-      title: 'Awesome cms',
-      format: 'mobile',
+      headerTitle: 'Awesome cms',
+      headerSubtitle: 'Its true',
     })
 
-    expect(wrapper.find('div').classes('sb-editor--title')).toBe(true)
+    expect(wrapper.find('div').classes('sb-editor-header__title')).toBe(true)
 
-    expect(wrapper.find('div').text()).toBe('Awesome cms')
+    expect(wrapper.find('div').text()).toBe('Awesome cmsIts true')
 
     expect(wrapper.findComponent(SbButton).exists()).toBe(true)
   })
diff --git a/src/components/EditorHeader/__tests__/MobileViewer.spec.js b/src/components/EditorHeader/__tests__/MobileViewer.spec.js
deleted file mode 100644
index d833b9ef0..000000000
--- a/src/components/EditorHeader/__tests__/MobileViewer.spec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import MobileViewer from '../components/MobileViewer'
-import SbHeaderItem from '../components/HeaderItem'
-import SbAvatar from '../../Avatar'
-import { SbMenuItem } from '../../Menu'
-import SbIcon from '../../Icon'
-
-import { mount } from '@vue/test-utils'
-
-const actionsList = [
-  {
-    name: 'dimensions',
-  },
-  {
-    name: 'preview',
-  },
-  {
-    name: 'unpublish',
-  },
-]
-
-const usersList = [
-  {
-    src: 'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
-    name: 'John Doe',
-  },
-  {
-    src: 'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
-    name: 'Kobe Bryant',
-  },
-]
-
-const fakeProps = {
-  languages: ['English', 'German'],
-  users: [...usersList],
-  actions: [...actionsList],
-  format: 'mobile',
-  size: 320,
-}
-
-const factory = (props) => {
-  return mount(MobileViewer, {
-    props,
-  })
-}
-
-describe.skip('MobileViewer component test', () => {
-  const wrapper = factory(fakeProps)
-
-  it('should render with all components', () => {
-    expect(wrapper.findComponent(SbHeaderItem).exists()).toBe(true)
-
-    expect(wrapper.findAllComponents(SbMenuItem).length).toBe(7)
-
-    expect(wrapper.findAllComponents(SbAvatar).length).toBe(2)
-
-    expect(wrapper.findComponent(SbIcon).exists()).toBe(true)
-  })
-
-  it('should render all texts passed by props', () => {
-    const arrayWithAssertionsTexts = [
-      'dimensions',
-      'preview',
-      'unpublish',
-      'English',
-      'German',
-      'John Doe',
-      'Kobe Bryant',
-    ]
-
-    wrapper.findAllComponents(SbMenuItem).wrappers.forEach((wrapper, index) => {
-      expect(wrapper.text()).toBe(arrayWithAssertionsTexts[index])
-    })
-  })
-})
diff --git a/src/components/EditorHeader/components/DesktopAndTabletViewer.vue b/src/components/EditorHeader/components/HeaderActions.vue
similarity index 61%
rename from src/components/EditorHeader/components/DesktopAndTabletViewer.vue
rename to src/components/EditorHeader/components/HeaderActions.vue
index 4375891d6..93c0aa0f7 100644
--- a/src/components/EditorHeader/components/DesktopAndTabletViewer.vue
+++ b/src/components/EditorHeader/components/HeaderActions.vue
@@ -1,66 +1,65 @@
 <template>
-  <div class="sb-editor-header__desktop">
-    <div v-if="isDesktopFormat" class="header__desktop">
-      <span class="desktop__title">{{ headerTitle }}</span>
-      <span class="desktop__sub-title">{{ headerSubTitle }}</span>
-    </div>
+  <div class="sb-editor-header__actions">
     <SbHeaderItem v-if="users" class="header-item--avatar">
-      <SbAvatarGroup :max-elements="returnNumberOfAvatars">
+      <SbAvatarGroup>
         <SbAvatar
           v-for="user in users"
           :key="user.id"
-          :src="user.src"
+          :src="user.avatar"
           :name="user.name"
+          :border-color="user.color"
         />
       </SbAvatarGroup>
     </SbHeaderItem>
 
-    <SbHeaderItem v-if="languages" with-separator>
+    <SbHeaderItem v-if="languages.length > 0">
       <SbMenu>
-        <SbMenuButton :label="menuButtonLabel" is-borderless />
+        <SbMenuButton
+          :label="menuButtonLabel"
+          is-borderless
+          variant="tertiary"
+        />
         <SbMenuList placement="bottom-start">
           <SbMenuGroup title="Languages">
             <SbMenuItem
               v-for="lang in languages"
-              :key="lang.id"
+              :key="lang.code"
               @click="handleSetNewLanguage(lang)"
             >
-              {{ lang }}
+              {{ lang.name }}
             </SbMenuItem>
           </SbMenuGroup>
         </SbMenuList>
       </SbMenu>
     </SbHeaderItem>
 
-    <div class="sb-editor-header__actions">
-      <SbHeaderItem
-        v-for="act in actions"
-        v-show="isOnDesktop"
-        :key="act.id"
-        with-separator
-      >
+    <div v-if="actions" class="sb-editor-header__menu">
+      <SbHeaderItem v-for="act in actions" v-show="isOnDesktop" :key="act.id">
         <button class="action__button" @click="handleSelectNewAction(act.name)">
           <SbTooltip position="bottom" :label="act.name">
             <SbIcon :name="act.name.toLowerCase()" size="large" />
           </SbTooltip>
         </button>
       </SbHeaderItem>
-      <SbHeaderItem v-if="isOnMobileOrTablet" with-separator>
+      <SbHeaderItem>
         <SbMenu>
           <SbMenuButton
-            v-if="isLessThanTablet"
-            icon-name="chevron-down"
+            ref="headerActionsButton"
             has-icon-only
             is-borderless
+            size="small"
+            variant="tertiary"
           />
-          <SbMenuButton v-else label="More" is-borderless />
-
-          <SbMenuList placement="bottom-end">
+          <SbMenuList
+            placement="bottom-end"
+            use-portal
+            :reference="$refs.headerActionsButton"
+          >
             <SbMenuItem
               v-for="act in actions"
               :key="act.id"
               :type="act.type"
-              @click="handleSelectNewAction(act.name)"
+              @click="handleSelectNewAction(act.id)"
             >
               <SbIcon :name="act.name.toLowerCase()" size="large" />
               {{ act.name }}
@@ -69,11 +68,23 @@
         </SbMenu>
       </SbHeaderItem>
     </div>
+
+    <SbHeaderItem>
+      <slot name="save">
+        <SbButton
+          v-if="hasSaveButton"
+          :label="saveButtonLabel"
+          variant="secondary"
+          @click="$emit('save')"
+        />
+      </slot>
+    </SbHeaderItem>
   </div>
 </template>
 
 <script>
 import SbAvatar from '../../Avatar'
+import SbButton from '../../Button'
 import SbAvatarGroup from '../../AvatarGroup'
 import SbHeaderItem from './HeaderItem'
 import SbIcon from '../../Icon'
@@ -87,10 +98,10 @@ import {
   SbMenuGroup,
 } from '../../Menu'
 
-import { sharedProps } from '../lib'
+import { sharedProps } from '../sharedProps'
 
 export default {
-  name: 'SbDesktopAndTabletViewer',
+  name: 'SbHeaderActions',
 
   components: {
     SbHeaderItem,
@@ -103,6 +114,7 @@ export default {
     SbMenuGroup,
     SbIcon,
     SbTooltip,
+    SbButton,
   },
 
   props: {
@@ -121,26 +133,19 @@ export default {
     isOnMobileOrTablet: Boolean,
   },
 
-  emits: ['changes'],
+  emits: ['language-change', 'changes', 'save'],
 
   data: () => ({
     selectedLanguage: null,
   }),
 
   computed: {
-    returnNumberOfAvatars() {
-      return (this.size < 1015 && this.format !== 'tablet') ||
-        (this.size < 625 && this.format === 'tablet')
-        ? 1
-        : 5
-    },
-
     isDesktopFormat() {
       return this.format === 'desktop'
     },
 
     menuButtonLabel() {
-      return this.selectedLanguage || this.languages[0]
+      return this.selectedLanguage || this.languages[0].name
     },
 
     isLessThanTablet() {
@@ -149,20 +154,15 @@ export default {
   },
 
   methods: {
-    /**
-     * method to emit new language
-     */
-    handleSetNewLanguage(lang) {
-      this.selectedLanguage = lang
-      this.$emit('changes', { type: 'lang', language: lang })
+    handleSetNewLanguage({ code, name }) {
+      this.selectedLanguage = name
+      this.$emit('language-change', { type: 'lang', language: code })
     },
 
-    /**
-     * method to emit new action
-     */
     handleSelectNewAction(act) {
       this.$emit('changes', { type: 'act', action: act })
     },
   },
 }
 </script>
+../sharedProps
diff --git a/src/components/EditorHeader/components/HeaderTitle.vue b/src/components/EditorHeader/components/HeaderTitle.vue
index 35d6c2ff5..b34ed070b 100644
--- a/src/components/EditorHeader/components/HeaderTitle.vue
+++ b/src/components/EditorHeader/components/HeaderTitle.vue
@@ -1,12 +1,22 @@
 <template>
-  <div v-if="format !== 'desktop'" class="sb-editor--title">
-    <SbButton icon="plus" variant="secondary" size="small" />
-    <span>{{ title }}</span>
+  <div class="sb-editor-header__title">
+    <SbButton
+      icon="arrow-left"
+      variant="tertiary"
+      size="small"
+      @click="$emit('go-back')"
+    />
+    <div class="sb-editor-header__title-text">
+      <p>{{ headerTitle }}</p>
+      <p class="sb-editor-header__subtitle">{{ headerSubtitle }}</p>
+    </div>
   </div>
 </template>
 
 <script>
 import SbButton from '../../Button'
+import { sharedProps } from '../sharedProps'
+
 export default {
   name: 'SbHeaderTitle',
 
@@ -15,14 +25,9 @@ export default {
   },
 
   props: {
-    title: {
-      type: String,
-      default: null,
-    },
-    format: {
-      type: String,
-      default: null,
-    },
+    ...sharedProps,
   },
+
+  emits: ['go-back'],
 }
 </script>
diff --git a/src/components/EditorHeader/components/MobileViewer.vue b/src/components/EditorHeader/components/MobileViewer.vue
deleted file mode 100644
index 616b23977..000000000
--- a/src/components/EditorHeader/components/MobileViewer.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="sb-editor-header__mobile--more">
-    <SbHeaderItem>
-      <SbMenu>
-        <SbMenuButton label="More" is-borderless />
-        <SbMenuList placement="bottom-start">
-          <SbMenuGroup v-if="actions" title="More Actions">
-            <SbMenuItem
-              v-for="act in actions"
-              :key="act.id"
-              @click="handleSelectNewAction(act.name)"
-            >
-              <SbIcon :name="act.name.toLowerCase()" size="large" />
-              {{ act.name }}
-            </SbMenuItem>
-          </SbMenuGroup>
-          <SbMenuGroup v-if="languages" title="Languages">
-            <SbMenuItem
-              v-for="lang in languages"
-              :key="lang.id"
-              @click="handleSetNewLanguage(lang)"
-            >
-              {{ lang }}
-            </SbMenuItem>
-          </SbMenuGroup>
-          <SbMenuGroup v-if="users" title="People viewing">
-            <SbMenuItem v-for="user in users" :key="user.id">
-              <SbAvatar :src="user.src" size="small" :name="user.name" />
-              {{ user.name }}
-            </SbMenuItem>
-          </SbMenuGroup>
-        </SbMenuList>
-      </SbMenu>
-    </SbHeaderItem>
-  </div>
-</template>
-
-<script>
-import SbAvatar from '../../Avatar'
-import SbHeaderItem from './HeaderItem'
-import SbIcon from '../../Icon'
-
-import {
-  SbMenu,
-  SbMenuButton,
-  SbMenuList,
-  SbMenuItem,
-  SbMenuGroup,
-} from '../../Menu'
-
-import { sharedProps } from '../lib'
-
-export default {
-  name: 'SbMobileViewer',
-
-  components: {
-    SbHeaderItem,
-    SbAvatar,
-    SbMenu,
-    SbMenuButton,
-    SbMenuList,
-    SbMenuItem,
-    SbMenuGroup,
-    SbIcon,
-  },
-
-  props: {
-    ...sharedProps,
-  },
-
-  emits: ['changes'],
-
-  methods: {
-    /**
-     * method to emit new language
-     */
-    handleSetNewLanguage(lang) {
-      this.$emit('changes', { type: 'lang', language: lang })
-    },
-
-    /**
-     * method to emit new action
-     */
-    handleSelectNewAction(act) {
-      this.$emit('changes', { type: 'act', action: act })
-    },
-  },
-}
-</script>
diff --git a/src/components/EditorHeader/editor-header.scss b/src/components/EditorHeader/editor-header.scss
index ff673dae9..6135ea189 100644
--- a/src/components/EditorHeader/editor-header.scss
+++ b/src/components/EditorHeader/editor-header.scss
@@ -1,164 +1,110 @@
-.sb-editor {
-  &__container {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-  }
-
-  &--title {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 52px;
-    color: $white;
-    font-size: $font-14;
-    font-weight: $font-medium;
-    background-color: $sb-dark-blue;
-
-    .sb-button--small {
-      padding: 5px $s-4;
-    }
-  }
-}
-
 .sb-editor-header {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
   display: flex;
-  width: 100%;
-  height: 70px;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100vw;
+  height: 60px;
+  padding: $s-4;
+  color: $sb-dark-blue;
   background-color: $white;
   border: 1px solid $light;
 
-  &__desktop {
-    display: flex;
-    justify-content: flex-end;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 17px 0 $s-4 26px;
-
-    .header__desktop {
-      display: grid;
-      flex: auto;
-      padding-top: 5px;
-
-      .desktop__title {
-        color: $sb-dark-blue;
-        font-size: $font-14;
-        font-weight: $font-medium;
-      }
-
-      .desktop__sub-title {
-        color: $light-gray;
-        font-size: $font-12;
-        font-weight: $font-regular;
-      }
-    }
-
-    .header-item--avatar {
-      min-width: 70px;
-    }
-  }
-
-  &__item {
-    max-height: 37px;
-    min-width: 37px;
-    padding-left: 10px;
-
-    .sb-menu,
-    button {
-      max-height: 37px;
-    }
+  p {
+    margin: 0;
   }
 
-  &__separator {
-    margin-left: 10px;
-    border-left: 1px solid $light-75;
+  .sb-icon--custom circle {
+    fill: transparent;
   }
+}
 
-  &__title {
-    position: fixed;
-    left: 26px;
-    padding-top: 10px;
-    color: $black;
-    font-size: $font-14;
-    font-weight: $font-medium;
-    text-align: center;
+.sb-editor-header__title {
+  display: flex;
+  flex: 1 1 33%;
+  gap: $s-2;
+  align-items: center;
+  color: inherit;
+  font-size: $font-14;
+  font-weight: $font-medium;
+
+  .sb-button {
+    padding: 0;
+    color: inherit;
+    border: transparent;
   }
+}
 
-  &__actions {
-    display: flex;
+.sb-editor-header__title-text {
+  display: flex;
+  flex-direction: column;
+  gap: $s-1;
+}
 
-    svg {
-      padding-top: 2px;
-    }
+.sb-editor-header__subtitle {
+  color: $sb-dark-blue-50;
+}
 
-    .action__button {
-      background-color: $white;
-      border: 0;
-      cursor: pointer;
-    }
-  }
+.sb-editor-header__actions {
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 17px 0 $s-4 26px;
 
-  &__save-button {
-    margin-top: 10px;
-    color: $sb-green;
-    font-size: $font-14;
-    font-weight: $font-medium;
-    background-color: $white;
-    border: 0;
-    cursor: pointer;
+  .header-item--avatar {
+    min-width: 70px;
   }
+}
 
-  &__mobile {
-    box-sizing: border-box;
-    height: 52px;
-    padding: 5px;
+.sb-editor-header__item {
+  max-height: 37px;
+  min-width: 37px;
+  padding-left: 10px;
 
-    &--more {
-      display: flex;
-    }
+  .sb-menu,
+  button {
+    max-height: 37px;
   }
+}
+
+.sb-editor-header__separator {
+  margin-left: 10px;
+  border-left: 1px solid $light-75;
+}
 
-  &__content {
-    display: flex;
-    box-sizing: border-box;
-    padding: 17px 19px $s-4 0;
+.sb-editor-header__menu {
+  display: flex;
 
-    &--mobile {
-      padding: 0;
-    }
+  svg {
+    padding-top: 2px;
   }
 
-  &__status {
-    svg {
-      padding-top: $s-1;
-    }
+  .action__button {
+    background-color: $white;
+    border: 0;
+    cursor: pointer;
   }
 }
 
-// for small mobiles
-@include mq($until: sm) {
-  .sb-editor-header__mobile {
-    .sb-editor-header__item {
-      margin-left: 2px;
-      padding-left: 2px;
-    }
-
-    .sb-editor-header__mobile--more .sb-editor-header__item {
-      max-width: 70px;
-      padding-left: 0;
+// dark omde
 
-      .sb-button {
-        max-width: 70px;
-      }
-    }
+.sb-editor-header--dark {
+  color: $white;
+  background-color: $sb-dark-blue;
+  border: 1px solid $sb-dark-blue-75;
 
-    .sb-menu {
-      max-width: 70px;
-    }
+  .sb-button {
+    color: $white;
+    background-color: transparent;
 
-    .sb-editor-header__separator {
-      margin-left: 3px;
+    &:hover,
+    &:focus {
+      background-color: $sb-dark-blue-75;
     }
   }
 }
diff --git a/src/components/EditorHeader/index.js b/src/components/EditorHeader/index.js
deleted file mode 100644
index a073701bc..000000000
--- a/src/components/EditorHeader/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import SbEditorHeader from './EditorHeader'
-import SbHeaderItem from './components/HeaderItem'
-import SbHeaderTitle from './components/HeaderTitle'
-import SbMobileViewer from './components/MobileViewer'
-import SbDesktopAndTabletViewer from './components/DesktopAndTabletViewer'
-
-import './editor-header.scss'
-
-export {
-  SbEditorHeader,
-  SbHeaderItem,
-  SbHeaderTitle,
-  SbMobileViewer,
-  SbDesktopAndTabletViewer,
-}
diff --git a/src/components/EditorHeader/index.ts b/src/components/EditorHeader/index.ts
new file mode 100644
index 000000000..d171b8fb5
--- /dev/null
+++ b/src/components/EditorHeader/index.ts
@@ -0,0 +1,8 @@
+import SbEditorHeader from './EditorHeader.vue'
+import SbHeaderItem from './components/HeaderItem.vue'
+import SbHeaderTitle from './components/HeaderTitle.vue'
+import SbHeaderActions from './components/HeaderActions.vue'
+
+import './editor-header.scss'
+
+export { SbEditorHeader, SbHeaderItem, SbHeaderTitle, SbHeaderActions }
diff --git a/src/components/EditorHeader/lib.js b/src/components/EditorHeader/sharedProps.ts
similarity index 61%
rename from src/components/EditorHeader/lib.js
rename to src/components/EditorHeader/sharedProps.ts
index 08219b27e..f1adea4a7 100644
--- a/src/components/EditorHeader/lib.js
+++ b/src/components/EditorHeader/sharedProps.ts
@@ -1,18 +1,14 @@
 const sharedProps = {
   languages: {
     type: [Array, String],
-    default: 'English',
+    default: [],
   },
   users: {
     type: [Array, String],
     default: null,
   },
   actions: {
-    type: [Array, String],
-    default: null,
-  },
-  options: {
-    type: [Array, String],
+    type: [Array, String, Object],
     default: null,
   },
   spaceStatus: {
@@ -22,17 +18,25 @@ const sharedProps = {
   hasSaveButton: {
     type: Boolean,
   },
-  showPublishedIcon: {
-    type: Boolean,
+  saveButtonLabel: {
+    type: String,
+    default: 'Save',
   },
   headerTitle: {
     type: String,
     default: 'API-based & Headless CMS as a Service',
   },
-  headerSubTitle: {
+  headerSubtitle: {
     type: String,
     default: null,
   },
+  mode: {
+    type: String,
+    default: 'light',
+    validation: (value: string): boolean => {
+      return ['light', 'dark'].includes(value)
+    },
+  },
 }
 
 export { sharedProps }
diff --git a/src/components/Icon/SbIcon.vue b/src/components/Icon/SbIcon.vue
index e1260602f..9d450c12a 100644
--- a/src/components/Icon/SbIcon.vue
+++ b/src/components/Icon/SbIcon.vue
@@ -55,6 +55,7 @@ export default {
       default: false,
     },
   },
+  emits: [],
   computed: {
     iconDeff() {
       if (customIconNames.includes(this.name)) {
@@ -84,10 +85,11 @@ export default {
       return Object.keys(lucideIcons).includes(this.lucideIconName)
     },
     lucideIconName() {
+      if (!this.name) return
       const pascalIcon = this.name.replace(/-(.)/g, (_, char) =>
         char.toUpperCase()
       )
-      return pascalIcon.charAt(0).toUpperCase() + pascalIcon.slice(1)
+      return pascalIcon?.charAt(0).toUpperCase() + pascalIcon?.slice(1)
     },
     lucideIcon() {
       return this.isLucideIcon ? lucideIcons[this.lucideIconName] : null
diff --git a/src/components/Menu/MenuButton.vue b/src/components/Menu/MenuButton.vue
index d5488e7b1..742c52bcb 100644
--- a/src/components/Menu/MenuButton.vue
+++ b/src/components/Menu/MenuButton.vue
@@ -5,7 +5,7 @@
     aria-haspopup="true"
     :aria-expanded="isOpen ? 'true' : null"
     v-bind="{
-      icon: hasIconOnly ? activeIconName || 'more-vertical' : activeIconName,
+      icon: hasIconOnly ? activeIconName || 'more-horizontal' : activeIconName,
       iconColor,
       iconRight: hasIconOnly ? '' : iconRight,
       label,
diff --git a/src/components/Popover/index.vue b/src/components/Popover/index.vue
index 5e414150f..23633c194 100644
--- a/src/components/Popover/index.vue
+++ b/src/components/Popover/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <SbPortal ref="portalRef"
-:target="portalTarget" :disabled="!usePortal">
+  <SbPortal ref="portalRef" :target="portalTarget" :disabled="!usePortal">
     <component
       :is="parentElementTag"
       :id="anchorId"
diff --git a/src/components/index.js b/src/components/index.js
index 28f7e78fe..8e3988574 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -32,7 +32,7 @@ import SbNumberField from './NumberField'
 export * from './Loading'
 export * from './Breadcrumbs'
 export * from './Card'
-export * from './EditorHeader'
+export * from './EditorHeader/index.ts'
 export * from './Menu'
 export * from './Minibrowser'
 export * from './Sidebar'
diff --git a/src/lib/internal-icons.js b/src/lib/internal-icons.js
index 075c1002c..e3cbac34a 100644
--- a/src/lib/internal-icons.js
+++ b/src/lib/internal-icons.js
@@ -1142,7 +1142,7 @@ const richtextIcons = {
 
   'rc-paste-md': {
     viewBox: '0 0 24 24',
-    path: `<g fill="none"><path d="M11 18a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Z" fill="#1B243F"/><path d="M16 8.3V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h1.3" stroke="#1B243F" stroke-width="2"/><path d="M11.68 10.313h1.117l1.27 3.957 1.269-3.957h1.117L14.52 16h-.907l-1.933-5.688Zm-.68 0h1.156l.215 4.359V16H11v-5.688Zm4.977 0h1.16V16h-1.375v-1.328l.215-4.36Z" fill="#1B243F"/></g>`,
+    path: `<g fill="none"><path d="M11 18a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Z" fill="currentColor"/><path d="M16 8.3V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h1.3" stroke="currentColor" stroke-width="2"/><path d="M11.68 10.313h1.117l1.27 3.957 1.269-3.957h1.117L14.52 16h-.907l-1.933-5.688Zm-.68 0h1.156l.215 4.359V16H11v-5.688Zm4.977 0h1.16V16h-1.375v-1.328l.215-4.36Z" fill="currentColor"/></g>`,
   },
 
   'rc-quote': {