diff --git a/public/ebury-logo-sm.png b/public/ebury-logo-sm.png
new file mode 100644
index 000000000..2ad6056f2
Binary files /dev/null and b/public/ebury-logo-sm.png differ
diff --git a/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap b/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap
new file mode 100644
index 000000000..832e84d10
--- /dev/null
+++ b/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap
@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EcMobileHeader > should render properly 1`] = `
+<header
+  class="ec-mobile-header"
+  data-test="ec-mobile-header"
+>
+  <div
+    class="ec-mobile-header__logo"
+  >
+    
+    <img
+      src="/test.svg"
+    />
+    
+  </div>
+  <button
+    class="ec-mobile-header__menu"
+    type="button"
+  >
+    <svg
+      class="ec-icon ec-mobile-header__menu__icon"
+      height="24"
+      width="24"
+    >
+      <use
+        xlink:href="#ec-simple-menu"
+      />
+    </svg>
+  </button>
+</header>
+`;
diff --git a/src/components/ec-mobile-header/ec-mobile-header.spec.ts b/src/components/ec-mobile-header/ec-mobile-header.spec.ts
new file mode 100644
index 000000000..f4fda027e
--- /dev/null
+++ b/src/components/ec-mobile-header/ec-mobile-header.spec.ts
@@ -0,0 +1,22 @@
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
+
+import EcMobileHeader from './ec-mobile-header.vue';
+
+describe('EcMobileHeader', () => {
+  const logoTemplate = '<img src="/test.svg" />';
+
+  function mountMobileHeader(mountOpts?: ComponentMountingOptions<typeof EcMobileHeader>) {
+    return mount(EcMobileHeader, {
+      ...mountOpts,
+    });
+  }
+
+  it('should render properly', () => {
+    const wrapper = mountMobileHeader({
+      slots: {
+        logo: logoTemplate,
+      },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/src/components/ec-mobile-header/ec-mobile-header.story.ts b/src/components/ec-mobile-header/ec-mobile-header.story.ts
new file mode 100644
index 000000000..b94c5be90
--- /dev/null
+++ b/src/components/ec-mobile-header/ec-mobile-header.story.ts
@@ -0,0 +1,50 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { computed, ref, watchEffect } from 'vue';
+
+import EcMobileHeader from './ec-mobile-header.vue';
+
+enum LogoName {
+  EBURY = 'ebury-logo-sm',
+  CHAMELEON = 'ebury-chameleon-logo',
+}
+
+interface StoryArgs {
+  logo: string,
+}
+
+export default {
+  title: 'Mobile Header',
+  component: EcMobileHeader,
+} as Meta<typeof EcMobileHeader>;
+
+export const basic: StoryFn<StoryArgs> = storyArgs => ({
+  components: { EcMobileHeader },
+  setup() {
+    const logo = ref('');
+    watchEffect(() => {
+      logo.value = storyArgs.logo;
+    });
+    const logoPath = computed(() => `/${logo.value}.png`);
+    return {
+      logoPath,
+    };
+  },
+  template: `
+        <ec-mobile-header>
+            <template #logo>
+              <img class="tw-h-32" :src="logoPath" />
+            </template>
+        </ec-mobile-header>
+    `,
+});
+
+basic.args = {
+  logo: LogoName.EBURY,
+};
+
+basic.argTypes = {
+  logo: {
+    options: Object.values(LogoName),
+    control: { type: 'select' },
+  },
+};
diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue
new file mode 100644
index 000000000..8e516f66b
--- /dev/null
+++ b/src/components/ec-mobile-header/ec-mobile-header.vue
@@ -0,0 +1,44 @@
+<template>
+  <header
+    class="ec-mobile-header"
+    data-test="ec-mobile-header"
+  >
+    <div class="ec-mobile-header__logo">
+      <slot name="logo" />
+    </div>
+    <button type="button" class="ec-mobile-header__menu">
+      <ec-icon
+        class="ec-mobile-header__menu__icon"
+        :name="IconName.SIMPLE_MENU"
+        :size="24"
+      />
+    </button>
+  </header>
+</template>
+
+<script setup lang="ts">
+import EcIcon from '../ec-icon';
+import { IconName } from '../ec-icon/types';
+</script>
+
+<style>
+.ec-mobile-header {
+  @apply tw-flex tw-flex-row tw-items-center tw-justify-between;
+  @apply tw-w-full;
+  @apply tw-py-16 tw-px-24;
+  @apply tw-bg-gray-7;
+
+  &__logo {
+    @apply tw-h-32;
+  }
+
+  &__menu {
+    @apply tw-flex tw-items-center;
+    @apply tw-border-0 tw-p-0 tw-bg-transparent;
+
+    &__icon {
+      @apply tw-fill-key-4;
+    }
+  }
+}
+</style>
diff --git a/src/components/ec-mobile-header/index.ts b/src/components/ec-mobile-header/index.ts
new file mode 100644
index 000000000..b369c6cf2
--- /dev/null
+++ b/src/components/ec-mobile-header/index.ts
@@ -0,0 +1 @@
+export { default } from './ec-mobile-header.vue';
diff --git a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
index 3bdd37dd1..d1597896b 100644
--- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
+++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -273,6 +273,40 @@ exports[`EcNavigation > should render branding logo and name when given 1`] = `
 </div>
 `;
 
+exports[`EcNavigation > should render mobile header if "isResponsive" prop is true 1`] = `
+<header
+  class="ec-mobile-header"
+  data-test="ec-mobile-header"
+>
+  <div
+    class="ec-mobile-header__logo"
+  >
+    
+    <img
+      alt="Test Brand"
+      class="ec-navigation__mobile-header__logo"
+      data-test="ec-navigation__mobile-header__logo"
+      src="/img/my-brand.png"
+    />
+    
+  </div>
+  <button
+    class="ec-mobile-header__menu"
+    type="button"
+  >
+    <svg
+      class="ec-icon ec-mobile-header__menu__icon"
+      height="24"
+      width="24"
+    >
+      <use
+        xlink:href="#ec-simple-menu"
+      />
+    </svg>
+  </button>
+</header>
+`;
+
 exports[`EcNavigation > should render with custom attributes 1`] = `
 <div
   class="ec-navigation my-class"
diff --git a/src/components/ec-navigation/ec-navigation.spec.ts b/src/components/ec-navigation/ec-navigation.spec.ts
index 7d71fb14b..49696b899 100644
--- a/src/components/ec-navigation/ec-navigation.spec.ts
+++ b/src/components/ec-navigation/ec-navigation.spec.ts
@@ -92,4 +92,12 @@ describe('EcNavigation', () => {
     expect(wrapper.element).toMatchSnapshot();
     expect(wrapper.findAllByDataTest('ec-navigation__block').length).toBe(5);
   });
+
+  it('should render mobile header if "isResponsive" prop is true', () => {
+    const wrapper = mountNavigation({
+      isResponsive: true,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });
diff --git a/src/components/ec-navigation/ec-navigation.story.ts b/src/components/ec-navigation/ec-navigation.story.ts
index 6aba9f2c8..f0ce7a64e 100644
--- a/src/components/ec-navigation/ec-navigation.story.ts
+++ b/src/components/ec-navigation/ec-navigation.story.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/vue3';
+import { useMediaQuery } from '@vueuse/core';
 import { ref, watchEffect } from 'vue';
 
 import { fixedContainerDecorator } from '../../../.storybook/utils';
@@ -83,3 +84,79 @@ basic.args = {
   showBrandingLogo: true,
   showCopyright: true,
 };
+
+export const responsive: StoryFn<NavigationProps & {
+  showCopyright: boolean,
+}> = storyArgs => ({
+  components: { EcNavigation },
+  setup() {
+    const showCopyright = ref(false);
+    const isCollapsable = ref(false);
+    const isCollapsed = ref(false);
+    const isResponsive = ref(false);
+    const args = ref({});
+
+    watchEffect(() => {
+      const {
+        showCopyright: showCopyrightFromArgs,
+        isCollapsable: isCollapsableFromArgs,
+        isCollapsed: isCollapsedFromArgs,
+        isResponsive: isResponsiveFromArgs,
+        ...rest
+      } = storyArgs;
+      showCopyright.value = showCopyrightFromArgs;
+      isCollapsable.value = isCollapsableFromArgs;
+      isCollapsed.value = isCollapsedFromArgs;
+      isResponsive.value = isResponsiveFromArgs || useMediaQuery('(max-width: 1279px)').value;
+      args.value = rest;
+    });
+
+    return {
+      showCopyright,
+      isCollapsable,
+      isCollapsed,
+      isResponsive,
+      args,
+      styles: ref({
+        placeholder: {
+          backgroundColor: 'hsla(var(--ec-gray-color-level-8), .1)',
+        },
+      }),
+    };
+  },
+  template: `
+    <ec-navigation
+      v-bind="args"
+      :is-collapsable="isCollapsable"
+      :is-collapsed="isCollapsable && isCollapsed"
+      :is-responsive="isResponsive"
+    >
+      <template #user-info>
+        <div :style="styles.placeholder" class="tw-p-8 tw-text-center tw-h-full tw-break-words">User Info placeholder</div>
+      </template>
+      <template #call-to-action>
+        <div :style="styles.placeholder" class="tw-p-8 tw-text-center tw-h-full tw-break-words">CTA placeholder</div>
+      </template>
+      <template #menu>
+        <div :style="styles.placeholder" class="tw-p-8 tw-text-center tw-h-full tw-break-words">Menu placeholder</div>
+      </template>
+      <template #footer-menu>
+        <div :style="styles.placeholder" class="tw-p-8 tw-text-center tw-h-full tw-break-words">Footer Menu placeholder</div>
+      </template>
+      <template #copyright v-if="showCopyright">
+        <div :style="styles.placeholder" class="tw-p-8 tw-text-center tw-h-full tw-break-words">Copyright placeholder</div>
+      </template>
+    </ec-navigation>
+  `,
+});
+
+responsive.args = {
+  branding: {
+    name: 'My Branding',
+    logo: '/ebury-logo-sm.png',
+  },
+  isCollapsable: false,
+  isCollapsed: false,
+  showBrandingLogo: true,
+  showCopyright: true,
+};
diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
index 8666b295f..f779a5739 100644
--- a/src/components/ec-navigation/ec-navigation.vue
+++ b/src/components/ec-navigation/ec-navigation.vue
@@ -1,5 +1,16 @@
 <template>
+  <ec-mobile-header v-if="isResponsive">
+    <template #logo>
+      <img
+        class="ec-navigation__mobile-header__logo"
+        :src="branding.logo"
+        :alt="branding.name"
+        data-test="ec-navigation__mobile-header__logo"
+      >
+    </template>
+  </ec-mobile-header>
   <div
+    v-else
     class="ec-navigation"
     :class="{ 'ec-navigation--is-collapsable': isCollapsable, 'ec-navigation--is-collapsed': isCollapsed }"
     v-bind="{
@@ -57,6 +68,7 @@
 </template>
 
 <script setup lang="ts">
+import EcMobileHeader from '../ec-mobile-header/ec-mobile-header.vue';
 import type { NavigationProps } from './types';
 
 defineOptions({
@@ -98,6 +110,12 @@ withDefaults(defineProps<NavigationProps>(), {
     width: var(--ec-navigation-is-collapsed-width);
   }
 
+  &__mobile-header {
+    &__logo {
+      @apply tw-h-32;
+    }
+  }
+
   &__branding {
     @apply tw-py-0 tw-px-24;
     @apply tw-mt-24 tw-mb-8 tw-mx-0;
diff --git a/src/components/ec-navigation/types.ts b/src/components/ec-navigation/types.ts
index 721439b0b..76612b018 100644
--- a/src/components/ec-navigation/types.ts
+++ b/src/components/ec-navigation/types.ts
@@ -8,4 +8,5 @@ export interface NavigationProps {
   isCollapsable: boolean,
   branding: NavigationBranding,
   showBrandingLogo?: boolean,
+  isResponsive?: boolean,
 }
diff --git a/src/main.ts b/src/main.ts
index 3663dd64f..a9b8f18e9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -62,6 +62,7 @@ export { default as EcMetrolineItem } from './components/ec-metroline/components
 export * from './components/ec-metroline/components/ec-metroline-item/types';
 export { METROLINE_PROVIDE_KEY } from './components/ec-metroline/provide';
 export * from './components/ec-metroline/types';
+export { default as EcMobileHeader } from './components/ec-mobile-header';
 export { default as EcModal } from './components/ec-modal';
 export * from './components/ec-modal/types';
 export { default as EcMultipleValuesSelection } from './components/ec-multiple-values-selection';
diff --git a/tests/integration/snapshots/visual-regression.spec.js/layout-navigation--responsive__chrome.snap.png b/tests/integration/snapshots/visual-regression.spec.js/layout-navigation--responsive__chrome.snap.png
new file mode 100644
index 000000000..aa8955eda
Binary files /dev/null and b/tests/integration/snapshots/visual-regression.spec.js/layout-navigation--responsive__chrome.snap.png differ
diff --git a/tests/integration/snapshots/visual-regression.spec.js/layout-navigation--responsive__firefox.snap.png b/tests/integration/snapshots/visual-regression.spec.js/layout-navigation--responsive__firefox.snap.png
new file mode 100644
index 000000000..e9123f7c5
Binary files /dev/null and b/tests/integration/snapshots/visual-regression.spec.js/layout-navigation--responsive__firefox.snap.png differ
diff --git a/tests/integration/snapshots/visual-regression.spec.js/mobile-header--basic__chrome.snap.png b/tests/integration/snapshots/visual-regression.spec.js/mobile-header--basic__chrome.snap.png
new file mode 100644
index 000000000..293f069e0
Binary files /dev/null and b/tests/integration/snapshots/visual-regression.spec.js/mobile-header--basic__chrome.snap.png differ
diff --git a/tests/integration/snapshots/visual-regression.spec.js/mobile-header--basic__firefox.snap.png b/tests/integration/snapshots/visual-regression.spec.js/mobile-header--basic__firefox.snap.png
new file mode 100644
index 000000000..9b2b0e849
Binary files /dev/null and b/tests/integration/snapshots/visual-regression.spec.js/mobile-header--basic__firefox.snap.png differ