diff --git a/src/components/Atoms/Logo/Logo.js b/src/components/Atoms/Logo/Logo.js
index a300020b3..bb7aa3e87 100644
--- a/src/components/Atoms/Logo/Logo.js
+++ b/src/components/Atoms/Logo/Logo.js
@@ -47,7 +47,7 @@ const themeSwitcher = theme => {
 const Logo = ({
   rotate, sizeSm, sizeMd, campaign
 }) => (
-  <LogoWrapper rotate={rotate ? 1 : 0} sizeSm={sizeSm} sizeMd={sizeMd}>
+  <LogoWrapper rotate={rotate} sizeSm={sizeSm} sizeMd={sizeMd}>
     <Image
       src={themeSwitcher(campaign)}
       alt={
diff --git a/src/components/Atoms/Logo/Logo.md b/src/components/Atoms/Logo/Logo.md
index b155eaa04..5f5ddd5fc 100644
--- a/src/components/Atoms/Logo/Logo.md
+++ b/src/components/Atoms/Logo/Logo.md
@@ -1,7 +1,7 @@
 # Comic Relief Logo
 
 ```js
-<Logo rotate={false} sizeSm="50px" sizeMd="60px" />
+<Logo rotate sizeSm="50px" sizeMd="60px" />
 ```
 
 # Sport Relief Logo
diff --git a/src/components/Atoms/Logo/Logo.test.js b/src/components/Atoms/Logo/Logo.test.js
index 3a240b857..a2b47a338 100644
--- a/src/components/Atoms/Logo/Logo.test.js
+++ b/src/components/Atoms/Logo/Logo.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Logo from './Logo';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Logo from "./Logo";
 
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = renderWithTheme(<Logo rotate />).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
@@ -32,7 +32,7 @@ it('renders correctly', () => {
 
     <div
       className="c0"
-      rotate={1}
+      rotate={true}
     >
       <img
         alt="Comic Relief logo"
diff --git a/src/components/Atoms/SocialIcons/Icon/Icon.js b/src/components/Atoms/SocialIcons/Icon/Icon.js
index b215f496f..906a18672 100755
--- a/src/components/Atoms/SocialIcons/Icon/Icon.js
+++ b/src/components/Atoms/SocialIcons/Icon/Icon.js
@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import hideVisually from '../../../../theme/shared/hideVisually';
+import spacing from '../../../../theme/shared/spacing';
+import Text from '../../Text/Text';
 
 const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: flex;
+  align-items: center;
   transition: opacity 0.2s;
 
   &:hover,
@@ -17,6 +20,8 @@ const StyledLink = styled.a`
 
 const StyledImage = styled.img`
   width: 100%;
+  width: ${({ size }) => size};
+  margin-right: ${spacing('sm')};
 `;
 
 const HelperText = styled.span`
@@ -24,7 +29,7 @@ const HelperText = styled.span`
 `;
 
 const Icon = ({
-  href, target, icon, brand, title, ...restProps
+  href, target, icon, brand, title, size, hideLabel, ...restProps
 }) => (
   <StyledLink
     href={href}
@@ -33,11 +38,17 @@ const Icon = ({
     title={title}
     rel="noopener noreferrer"
     data-test="header-esu-icon"
+    hideLabel={hideLabel}
   >
-    <StyledImage src={icon} alt={brand} />
+    <StyledImage size={size} src={icon} alt={brand} />
     {title !== 'Sign up for emails' && (
       <HelperText>(opens in new window)</HelperText>
     )}
+    {!hideLabel ? (
+      <Text size="md" color="black">
+        {title}
+      </Text>
+    ) : null}
   </StyledLink>
 );
 
@@ -46,7 +57,14 @@ Icon.propTypes = {
   href: PropTypes.string.isRequired,
   target: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  hideLabel: PropTypes.bool,
+  size: PropTypes.string
+};
+
+Icon.defaultProps = {
+  hideLabel: true,
+  size: 'auto'
 };
 
 export default Icon;
diff --git a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap
index 2c3e4d6cb..fd23d3c94 100644
--- a/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap
+++ b/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap
@@ -5,7 +5,14 @@ exports[`renders correctly with Comic Relief links 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -17,6 +24,8 @@ exports[`renders correctly with Comic Relief links 1`] = `
 
 .c3 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c4 {
@@ -89,6 +98,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="facebook"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -112,6 +122,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="twitter"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -135,6 +146,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="youtube"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -158,6 +170,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="instagram"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -175,7 +188,14 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -187,6 +207,8 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
 
 .c3 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c4 {
@@ -259,6 +281,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="facebook"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -282,6 +305,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="twitter"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -305,6 +329,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="youtube"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -328,6 +353,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="instagram"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -345,7 +371,14 @@ exports[`renders correctly with Sport Relief links 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -357,6 +390,8 @@ exports[`renders correctly with Sport Relief links 1`] = `
 
 .c3 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c4 {
@@ -429,6 +464,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="facebook"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -452,6 +488,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="twitter"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -475,6 +512,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="youtube"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -498,6 +536,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="instagram"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
diff --git a/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap b/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap
index 3e802c754..2e51a993e 100644
--- a/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap
+++ b/src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap
@@ -118,7 +118,14 @@ exports[`renders correctly with error message 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -130,6 +137,8 @@ exports[`renders correctly with error message 1`] = `
 
 .c2 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c23 {
@@ -345,6 +354,7 @@ exports[`renders correctly with error message 1`] = `
       <img
         alt="Sign up for emails"
         className="c2"
+        size="auto"
         src="mock.asset"
       />
     </a>
@@ -461,6 +471,7 @@ exports[`renders correctly with error message 1`] = `
         <img
           alt="Close email sign-up"
           className="c2"
+          size="auto"
           src="mock.asset"
         />
         <span
@@ -479,7 +490,14 @@ exports[`renders correctly with modal closed 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -491,6 +509,8 @@ exports[`renders correctly with modal closed 1`] = `
 
 .c2 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c0 {
@@ -519,6 +539,7 @@ exports[`renders correctly with modal closed 1`] = `
       <img
         alt="Sign up for emails"
         className="c2"
+        size="auto"
         src="mock.asset"
       />
     </a>
@@ -612,7 +633,14 @@ exports[`renders correctly with modal open 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -624,6 +652,8 @@ exports[`renders correctly with modal open 1`] = `
 
 .c2 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c21 {
@@ -839,6 +869,7 @@ exports[`renders correctly with modal open 1`] = `
       <img
         alt="Sign up for emails"
         className="c2"
+        size="auto"
         src="mock.asset"
       />
     </a>
@@ -944,6 +975,7 @@ exports[`renders correctly with modal open 1`] = `
         <img
           alt="Close email sign-up"
           className="c2"
+          size="auto"
           src="mock.asset"
         />
         <span
@@ -978,7 +1010,14 @@ exports[`renders correctly with success message 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -990,6 +1029,8 @@ exports[`renders correctly with success message 1`] = `
 
 .c2 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c12 {
@@ -1141,6 +1182,7 @@ exports[`renders correctly with success message 1`] = `
       <img
         alt="Sign up for emails"
         className="c2"
+        size="auto"
         src="mock.asset"
       />
     </a>
@@ -1197,6 +1239,7 @@ exports[`renders correctly with success message 1`] = `
         <img
           alt="Close email sign-up"
           className="c2"
+          size="auto"
           src="mock.asset"
         />
         <span
diff --git a/src/components/Molecules/Logos/Logos.js b/src/components/Molecules/Logos/Logos.js
index a931e5daf..d48719c9e 100644
--- a/src/components/Molecules/Logos/Logos.js
+++ b/src/components/Molecules/Logos/Logos.js
@@ -8,7 +8,7 @@ const Logos = ({ campaign }) => {
     return (
       <>
         <a href="/" title="Go to Comic Relief homepage">
-          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" />
+          <Logo sizeSm="50px" sizeMd="60px" campaign="Comic Relief" />
         </a>
         <a href="/sportrelief/" title="Go to Sport Relief homepage">
           <Logo sizeSm="100px" sizeMd="120px" campaign="Sport Relief Gameon" />
@@ -21,11 +21,10 @@ const Logos = ({ campaign }) => {
     return (
       <>
         <a href="/" title="Go to Comic Relief homepage">
-          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" />
+          <Logo sizeSm="50px" sizeMd="60px" campaign="Comic Relief" />
         </a>
         <a href="/big-night-in" title="Big night in homepage">
           <Logo
-            rotate={false}
             sizeSm="100px"
             sizeMd="200px"
             campaign="Big Night In"
@@ -38,14 +37,14 @@ const Logos = ({ campaign }) => {
   if (campaign === 'Sport Relief') {
     return (
       <a href="/sportrelief" title="Sport Relief in homepage">
-        <Logo rotate={false} campaign="Sport Relief" />
+        <Logo campaign="Sport Relief" />
       </a>
     );
   }
 
   return (
     <a href="/" title="Go to Comic Relief homepage">
-      <Logo rotate campaign="Comic Relief" />
+      <Logo campaign="Comic Relief" />
     </a>
   );
 };
diff --git a/src/components/Molecules/ShareButton/ShareButton.test.js b/src/components/Molecules/ShareButton/ShareButton.test.js
index 690a4511b..b1c94d96d 100644
--- a/src/components/Molecules/ShareButton/ShareButton.test.js
+++ b/src/components/Molecules/ShareButton/ShareButton.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import ShareButton from './ShareButton';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import ShareButton from "./ShareButton";
 
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = renderWithTheme(<ShareButton />).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
@@ -11,7 +11,14 @@ it('renders correctly', () => {
       -webkit-text-decoration: none;
       text-decoration: none;
       cursor: pointer;
-      display: block;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
       -webkit-transition: opacity 0.2s;
       transition: opacity 0.2s;
     }
@@ -23,6 +30,8 @@ it('renders correctly', () => {
 
     .c5 {
       width: 100%;
+      width: auto;
+      margin-right: 0.5rem;
     }
 
     .c6 {
@@ -105,6 +114,7 @@ it('renders correctly', () => {
             <img
               alt="comicrelief"
               className="c5"
+              size="auto"
               src="mock.asset"
             />
             <span
@@ -130,6 +140,7 @@ it('renders correctly', () => {
             <img
               alt="comicrelief"
               className="c5"
+              size="auto"
               src="mock.asset"
             />
             <span
diff --git a/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap b/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap
index d80bafe9e..acd7a90de 100644
--- a/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap
+++ b/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap
@@ -73,7 +73,14 @@ exports[`renders correctly 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -85,6 +92,8 @@ exports[`renders correctly 1`] = `
 
 .c6 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c7 {
@@ -565,6 +574,7 @@ exports[`renders correctly 1`] = `
                 <img
                   alt="facebook"
                   className="c6"
+                  size="auto"
                   src="mock.asset"
                 />
                 <span
@@ -588,6 +598,7 @@ exports[`renders correctly 1`] = `
                 <img
                   alt="twitter"
                   className="c6"
+                  size="auto"
                   src="mock.asset"
                 />
                 <span
@@ -611,6 +622,7 @@ exports[`renders correctly 1`] = `
                 <img
                   alt="youtube"
                   className="c6"
+                  size="auto"
                   src="mock.asset"
                 />
                 <span
@@ -634,6 +646,7 @@ exports[`renders correctly 1`] = `
                 <img
                   alt="instagram"
                   className="c6"
+                  size="auto"
                   src="mock.asset"
                 />
                 <span
@@ -655,7 +668,7 @@ exports[`renders correctly 1`] = `
         >
           <div
             className="c10"
-            rotate={0}
+            rotate={false}
           >
             <img
               alt="Comic Relief logo"
diff --git a/src/components/Organisms/Header/Header.md b/src/components/Organisms/Header/Header.md
index 4e6c0aa0f..bf90bd4b6 100644
--- a/src/components/Organisms/Header/Header.md
+++ b/src/components/Organisms/Header/Header.md
@@ -42,7 +42,7 @@ import Link from '../../Atoms/Link/Link';
 import data from './data/data';
 import Link from '../../Atoms/Link/Link';
 import HeaderEsuWithIcon from '../../Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon';
-import searchIcon from './assets/icon--search.svg';
+import searchIcon from './assets/search.svg';
 import Icon from '../../Atoms/SocialIcons/Icon/Icon';
 import RichText from '../../Atoms/RichText/RichText';
 
@@ -71,10 +71,6 @@ const [success, setSuccess] = React.useState(false);
   rotate="true"
   metaIcons={
     <>
-      <Link color="green" type="button" href="/donation">
-        Donate
-      </Link>
-
       <div>
         <Icon
           icon={searchIcon}
@@ -84,19 +80,13 @@ const [success, setSuccess] = React.useState(false);
           href="/search"
           brand="comicrelief"
           tabIndex="0"
+          size="35px"
         />
-      </div>
+      </div> 
 
-      <HeaderEsuWithIcon
-        title={title}
-        topCopy={topCopy}
-        privacyCopy={privacyCopy}
-        successCopy={successCopy}
-        isSuccess={success}
-        privacyCopy={privacyCopy}
-        errorMsg=""
-        subscribe={() => setSuccess(!success)}
-      />
+      <Link color="green" type="button" href="/donation">
+        Donate
+      </Link>
     </>
   }
 />;
diff --git a/src/components/Organisms/Header/Header.style.js b/src/components/Organisms/Header/Header.style.js
index 2cd88254d..7d46088fc 100644
--- a/src/components/Organisms/Header/Header.style.js
+++ b/src/components/Organisms/Header/Header.style.js
@@ -32,9 +32,9 @@ const InnerWrapper = styled.div`
 
 const Brand = styled.div`
   ${zIndex('high')};
-  margin-right: auto;
   display: flex;
   align-items: center;
+  margin-right: auto;
   a {
     border: 0;
     color: transparent;
@@ -47,6 +47,9 @@ const Brand = styled.div`
       border: 0;
     }
   }
+  @media ${({ theme }) => theme.breakpoint('nav')} {
+    margin-right: 0;
+  }
 `;
 
 const MetaIcons = styled.div`
@@ -54,24 +57,6 @@ const MetaIcons = styled.div`
   display: flex;
   align-items: center;
 
-  > div {
-    height: 35px;
-    width: auto;
-    display: inline-block;
-
-    > a {
-      height: inherit;
-      width: inherit;
-      margin-left: ${({ theme }) => theme.fontSize('xxs')};
-
-      img {
-        padding: 5px;
-        height: inherit;
-        width: inherit;
-      }
-    }
-  }
-
   @media ${({ theme }) => theme.breakpoint('nav')} {
     position: relative;
     display: flex;
diff --git a/src/components/Organisms/Header/Nav/Nav.style.js b/src/components/Organisms/Header/Nav/Nav.style.js
index 6497a6873..292da1172 100644
--- a/src/components/Organisms/Header/Nav/Nav.style.js
+++ b/src/components/Organisms/Header/Nav/Nav.style.js
@@ -46,6 +46,7 @@ const Nav = styled.nav`
     margin: 0 10px;
     width: auto;
     height: 100%;
+    margin-right: auto;
   }
   > h2 {
     ${hideVisually};
diff --git a/src/components/Organisms/Header/assets/pay-in.svg b/src/components/Organisms/Header/assets/pay-in.svg
new file mode 100644
index 000000000..ecc8ba5d8
--- /dev/null
+++ b/src/components/Organisms/Header/assets/pay-in.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 0H1C0.448 0 0 0.448 0 1V6C0 6.552 0.448 7 1 7H3V18V18.5V21C3 21.552 3.448 22 4 22H18C18.552 22 19 21.552 19 21V18.5V18V7H21C21.552 7 22 6.552 22 6V1C22 0.448 21.552 0 21 0ZM5 20V19.5H17V20H5ZM17 17.5H5V5.0625H17V17.5ZM20 5H19V4.0625C19 3.5105 18.552 3.0625 18 3.0625H4C3.448 3.0625 3 3.5105 3 4.0625V5H2V2H20V5ZM7.293 11.2695C6.9025 10.879 6.9025 10.246 7.293 9.8555L10.2925 6.856C10.339 6.809 10.3905 6.7675 10.446 6.7305C10.4695 6.7145 10.4955 6.704 10.52 6.69C10.5525 6.672 10.5835 6.6525 10.618 6.6385C10.6505 6.625 10.6845 6.6175 10.718 6.6075C10.747 6.599 10.7745 6.588 10.8045 6.582C10.934 6.556 11.067 6.556 11.196 6.582C11.226 6.588 11.2535 6.599 11.2825 6.6075C11.316 6.6175 11.35 6.625 11.3825 6.6385C11.417 6.6525 11.448 6.672 11.4805 6.69C11.5055 6.7035 11.531 6.7145 11.5545 6.7305C11.6095 6.7675 11.661 6.809 11.708 6.856L14.7075 9.8555C15.098 10.246 15.098 10.879 14.7075 11.2695C14.512 11.465 14.2565 11.5625 14.0005 11.5625C13.7445 11.5625 13.489 11.465 13.2935 11.2695L12 9.9765V14.5C12 15.052 11.552 15.5 11 15.5C10.448 15.5 10 15.052 10 14.5V9.9765L8.707 11.2695C8.3165 11.66 7.6835 11.66 7.293 11.2695Z" fill="#222222"/>
+</svg>
diff --git a/src/components/Organisms/Header/assets/search.svg b/src/components/Organisms/Header/assets/search.svg
new file mode 100644
index 000000000..e4f68e9a5
--- /dev/null
+++ b/src/components/Organisms/Header/assets/search.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.7073 21.2927L16.0635 14.6493C17.274 13.132 18 11.2122 18 9.125C18 4.23125 14.0188 0.25 9.125 0.25C4.23125 0.25 0.25 4.23125 0.25 9.125C0.25 14.0188 4.23125 18 9.125 18C11.2122 18 13.132 17.274 14.6493 16.0635L21.293 22.7073C21.4882 22.9023 21.744 23 22 23C22.256 23 22.5118 22.9023 22.7073 22.7073C23.0977 22.3165 23.0977 21.6835 22.7073 21.2927ZM9.125 16C5.334 16 2.25 12.916 2.25 9.125C2.25 5.334 5.334 2.25 9.125 2.25C12.916 2.25 16 5.334 16 9.125C16 12.916 12.916 16 9.125 16ZM13.6105 8.994C13.573 8.998 13.5357 9 13.4987 9C12.996 9 12.563 8.62175 12.506 8.11025C12.3812 6.98775 11.0117 5.61825 9.8895 5.49375C9.34075 5.43275 8.94525 4.93825 9.006 4.3895C9.067 3.8405 9.5595 3.445 10.1103 3.506C12.175 3.73525 14.2642 5.82475 14.4937 7.8895C14.5547 8.4385 14.1593 8.93275 13.6105 8.994Z" fill="#222222"/>
+</svg>
diff --git a/src/components/Organisms/Header/assets/shop.svg b/src/components/Organisms/Header/assets/shop.svg
new file mode 100644
index 000000000..da648432a
--- /dev/null
+++ b/src/components/Organisms/Header/assets/shop.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.4846 19.824L18.9846 5.33454C18.8961 4.82254 18.4296 4.46454 17.9126 4.50804L16.1061 4.66504C15.8276 3.61004 15.3456 2.49754 14.5096 1.77754C13.7781 1.14654 12.8601 0.889544 11.8586 1.03154C11.2556 1.11754 10.7451 1.32854 10.3056 1.62204C10.3046 1.62204 10.3041 1.62154 10.3031 1.62104C7.45108 0.708544 5.52358 3.29954 4.73908 5.13254L4.19408 5.02354C3.93108 4.97154 3.65708 5.02654 3.43458 5.17804C3.21308 5.32954 3.06108 5.56354 3.01358 5.82804L0.513583 19.8175C0.461583 20.109 0.541583 20.4085 0.731583 20.6355C0.921583 20.8625 1.20208 20.9935 1.49808 20.9935H3.38058L4.10358 22.4395C4.11058 22.4535 4.12158 22.463 4.12908 22.4765C4.15858 22.529 4.19308 22.578 4.23208 22.625C4.25008 22.6465 4.26558 22.6695 4.28458 22.689C4.29108 22.6955 4.29508 22.7035 4.30208 22.71C4.35358 22.76 4.41008 22.802 4.46958 22.839C4.48308 22.8475 4.49758 22.853 4.51158 22.861C4.57008 22.894 4.63158 22.92 4.69508 22.9405C4.71608 22.947 4.73608 22.9535 4.75758 22.959C4.83508 22.978 4.91408 22.9915 4.99508 22.9915C4.99608 22.9915 4.99758 22.992 4.99858 22.992C5.00058 22.992 5.00258 22.9915 5.00458 22.9915C5.04458 22.9915 5.08508 22.989 5.12558 22.9835L20.6256 20.985C20.8961 20.9505 21.1401 20.8065 21.3026 20.587C21.4656 20.3685 21.5306 20.093 21.4846 19.824ZM12.1411 3.01154C12.5781 2.94854 12.9051 3.03504 13.2026 3.29104C13.5971 3.63054 13.8761 4.21054 14.0716 4.84204L10.2831 5.17104C10.5656 4.10904 11.1081 3.15904 12.1411 3.01154ZM8.76558 3.50354C8.49758 4.08004 8.31208 4.71254 8.18708 5.35354L6.79608 5.47454C7.17508 4.74504 7.85008 3.74554 8.76558 3.50354ZM2.69358 18.994L4.80408 7.18504L5.41708 7.30754L4.28108 19.0355C4.19058 19.009 4.09608 18.994 3.99908 18.994H2.69358ZM6.11508 20.8405L7.41408 7.42804L7.97958 7.37904C7.97258 7.80304 7.98458 8.20754 8.01458 8.57104C8.05808 9.09304 8.49558 9.48754 9.01008 9.48754C9.03808 9.48754 9.06558 9.48654 9.09408 9.48404C9.64458 9.43804 10.0536 8.95454 10.0076 8.40404C10.0061 8.38854 9.97158 7.89054 10.0001 7.20254L14.4466 6.81604C14.4726 7.09504 14.4851 7.33354 14.4866 7.49904C14.4906 8.05104 14.9201 8.50954 15.4926 8.49204C16.0446 8.48904 16.4901 8.03854 16.4866 7.48604C16.4861 7.38254 16.4806 7.07304 16.4431 6.64254L17.1701 6.57954L19.3361 19.1345L6.11508 20.8405Z" fill="#222222"/>
+</svg>