diff --git a/packages/layout/src/components/Header/Header.stories.mdx b/packages/layout/src/components/Header/Header.stories.mdx
index 249297731..4639d3069 100644
--- a/packages/layout/src/components/Header/Header.stories.mdx
+++ b/packages/layout/src/components/Header/Header.stories.mdx
@@ -3,7 +3,7 @@ import * as stories from './Header.stories';
import { useMediaQuery, breakpoints } from '@medly-components/utils';
import Header from './Header';
import Logo from '@medly-components/core/src/components/Logo';
-import { PillIcon } from '@medly-components/icons';
+import { HomeIcon, PillIcon, LockIcon } from '@medly-components/icons';
import { defaultTheme } from '@medly-components/theme';
diff --git a/packages/layout/src/components/Header/Header.styled.tsx b/packages/layout/src/components/Header/Header.styled.tsx
index 22e3e6213..0a9d7763f 100644
--- a/packages/layout/src/components/Header/Header.styled.tsx
+++ b/packages/layout/src/components/Header/Header.styled.tsx
@@ -5,8 +5,12 @@ export const Container = styled.header`
display: flex;
align-items: center;
background: ${({ theme }) => theme.header.backgroundColor};
- height: ${({ theme }) => theme.header.height};
+ height: ${({ theme }) => theme.header.height.mobile};
position: relative;
+
+ ${({ theme }) => media(breakpoints(theme.breakpoints).up('M'))`
+ height: ${theme.header.height.desktop};
+ `}
`;
export const Content = styled.div`
@@ -20,12 +24,12 @@ export const Content = styled.div`
padding: 0 1.6rem;
${({ theme }) => media(breakpoints(theme.breakpoints).up('M'))`
- padding: 0 3.2rem;
- `}
+ padding: 0 3.2rem;
+ `}
`;
export const HamburgerIcon = styled(MenuIcon)`
${({ theme }) => media(breakpoints(theme.breakpoints).up('L'))`
- display: none;
- `}
+ display: none;
+ `}
`;
diff --git a/packages/layout/src/components/Header/NavItem/NavItem.styled.tsx b/packages/layout/src/components/Header/NavItem/NavItem.styled.tsx
index 7800ae451..101c1731a 100644
--- a/packages/layout/src/components/Header/NavItem/NavItem.styled.tsx
+++ b/packages/layout/src/components/Header/NavItem/NavItem.styled.tsx
@@ -33,7 +33,7 @@ export const NavItem = styled.button`
content: '';
position: absolute;
width: calc(100% - 1.6rem * 2);
- top: calc((${theme.header.navItem.height.desktop} - ${theme.header.height}) / 2);
+ top: calc((${theme.header.navItem.height.desktop} - ${theme.header.height.desktop}) / 2);
left: 1.6rem;
background: ${theme.header.navItem.activeIndicatorColor};
height: 4px;
diff --git a/packages/theme/src/layout/header/index.ts b/packages/theme/src/layout/header/index.ts
index 0e030c7f4..7c196269b 100644
--- a/packages/theme/src/layout/header/index.ts
+++ b/packages/theme/src/layout/header/index.ts
@@ -4,7 +4,10 @@ import { HeaderTheme } from './types';
const header: HeaderTheme = {
backgroundColor: colors.professionalNavy,
maxContentWidth: '1240px',
- height: '72px',
+ height: {
+ mobile: '64px',
+ desktop: '72px'
+ },
fontColor: colors.white,
nav: {
gutterSpace: '0.8rem'
diff --git a/packages/theme/src/layout/header/types.ts b/packages/theme/src/layout/header/types.ts
index 35f7f1442..17fee4c8c 100644
--- a/packages/theme/src/layout/header/types.ts
+++ b/packages/theme/src/layout/header/types.ts
@@ -1,7 +1,10 @@
export interface HeaderTheme {
backgroundColor: string;
maxContentWidth: string;
- height: string;
+ height: {
+ mobile: string;
+ desktop: string;
+ };
fontColor: string;
nav: {
gutterSpace: string;