diff --git a/code/frontend/public/assets/icons/close_orange.svg b/code/frontend/public/assets/icons/close_orange.svg
new file mode 100644
index 0000000..d58416c
--- /dev/null
+++ b/code/frontend/public/assets/icons/close_orange.svg
@@ -0,0 +1,3 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.688 40.6363L10.6937 37.642L22.6707 25.665L10.6937 13.688L13.688 10.6938L25.665 22.6708L37.642 10.6938L40.6362 13.688L28.6592 25.665L40.6362 37.642L37.642 40.6363L25.665 28.6593L13.688 40.6363Z" fill="#E79A0E"/>
+</svg>
diff --git a/code/frontend/public/assets/icons/menu_orange.svg b/code/frontend/public/assets/icons/menu_orange.svg
new file mode 100644
index 0000000..e1766ea
--- /dev/null
+++ b/code/frontend/public/assets/icons/menu_orange.svg
@@ -0,0 +1,8 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_84_16" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<rect width="40" height="40" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_84_16)">
+<path d="M5 30V26.6667H35V30H5ZM5 21.6667V18.3333H35V21.6667H5ZM5 13.3333V10H35V13.3333H5Z" fill="#E79A0E"/>
+</g>
+</svg>
diff --git a/code/frontend/src/components/header.tsx b/code/frontend/src/components/header.tsx
index 905261d..b068d1f 100644
--- a/code/frontend/src/components/header.tsx
+++ b/code/frontend/src/components/header.tsx
@@ -15,11 +15,11 @@ function Header() {
   return (
     <div className="outest-container" >
       <header className="base-header">
-        <div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
-        <p className="header-title small-title">
+        <div className="header-icon"> <img src='/assets/icons/feather_orange.svg' alt="featherIcon" /> </div>
+        <p className="header-title">
           Feather Feed
         </p>
-        <div className="header-icon"> {isOpen? <img src='/assets/icons/x.svg' alt="x" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/three_menu_stripes_black.svg' alt="x" onClick={toggleMenu}  />} </div>
+        <div className="header-icon"> {isOpen? <img src='/assets/icons/close_orange.svg' alt="close menu" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  />} </div>
       </header>
       <Menu isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/> 
     </div>