diff --git a/apps/frontend/public/profile-icon.svg b/apps/frontend/public/profile-icon.svg
new file mode 100644
index 00000000..dcea3e61
--- /dev/null
+++ b/apps/frontend/public/profile-icon.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_494_2118)">
+<path d="M16.5 9C16.5 10.1935 16.0259 11.3381 15.182 12.182C14.3381 13.0259 13.1935 13.5 12 13.5C10.8065 13.5 9.66193 13.0259 8.81802 12.182C7.97411 11.3381 7.5 10.1935 7.5 9C7.5 7.80653 7.97411 6.66193 8.81802 5.81802C9.66193 4.97411 10.8065 4.5 12 4.5C13.1935 4.5 14.3381 4.97411 15.182 5.81802C16.0259 6.66193 16.5 7.80653 16.5 9Z" fill="#2B2B2B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12ZM12 1.5C10.0227 1.50011 8.08555 2.05854 6.4116 3.11104C4.73766 4.16354 3.39492 5.66732 2.53795 7.44929C1.68097 9.23127 1.34458 11.219 1.5675 13.1837C1.79042 15.1485 2.56358 17.0103 3.798 18.555C4.863 16.839 7.2075 15 12 15C16.7925 15 19.1355 16.8375 20.202 18.555C21.4364 17.0103 22.2096 15.1485 22.4325 13.1837C22.6554 11.219 22.319 9.23127 21.4621 7.44929C20.6051 5.66732 19.2623 4.16354 17.5884 3.11104C15.9145 2.05854 13.9773 1.50011 12 1.5Z" fill="#2B2B2B"/>
+</g>
+<defs>
+<clipPath id="clip0_494_2118">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/frontend/src/app/components/Header.tsx b/apps/frontend/src/app/components/Header.tsx
index bd5c444a..4579a056 100644
--- a/apps/frontend/src/app/components/Header.tsx
+++ b/apps/frontend/src/app/components/Header.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from "next/image";
 
 interface HeaderProps {
   text?: string;
@@ -11,20 +12,20 @@ const Header: React.FC<HeaderProps> = ({
 }) => {
   return (
     <header
-      className="flex h-16 w-full items-center justify-between border-b border-gray-200 bg-white"
-      style={{ paddingLeft: 40, paddingRight: 40 }}
+      className="flex w-full h-12 items-center justify-between border-b border-gray-200 bg-white"
+      style={{paddingLeft: 32, paddingRight: 32, paddingTop: 20, paddingBottom: 12}}
     >
       {/* Dynamic Text Section */}
-      <span className="text-sm font-bold text-gray-800" style={{ marginLeft: 16 }}>
+      <h5 className="text-core-black">
         {text}
-      </span>
+      </h5>
       
       {/* Flexible Icon Section */}
       <div className="flex items-center">
         {icon || (
           // Default Profile Icon matching Figma
           <div className="h-8 w-8 rounded-full border border-gray-300 flex items-center justify-center">
-             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+             <Image src="/profile-icon.svg" alt="Profile Icon" width={24} height={24} />
           </div>
         )}
       </div>