diff --git a/src/assets/data/HeaderContent.js b/src/assets/data/HeaderContent.js
index 679718f..31d6bbe 100644
--- a/src/assets/data/HeaderContent.js
+++ b/src/assets/data/HeaderContent.js
@@ -102,6 +102,14 @@ const HeaderData = {
     backWordSize_mobile: "80px",
     backWordSpacing_mobile: "0rem",
   },
+  brand: {
+    backWord: "H4B",
+    frontWord: "Brand",
+    backWordSpacing: "0rem",
+    backWordSize: "130px",
+    backWordSize_mobile: "80px",
+    backWordSpacing_mobile: "0rem",
+  },
 };
 
 export default HeaderData;
diff --git a/src/pages/brand/Brand.jsx b/src/pages/brand/Brand.jsx
index 935a409..e931e9c 100644
--- a/src/pages/brand/Brand.jsx
+++ b/src/pages/brand/Brand.jsx
@@ -2,6 +2,10 @@ import React, { useEffect } from "react";
 import { brandContent } from "../../assets/data/BrandContent.js";
 import "./Brand.scss";
 import BrandCard from "./brandcard/BrandCard.jsx";
+import HeaderData from "../../assets/data/HeaderContent";
+import { Header } from "../../components/shared";
+
+
 function Brand() {
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -11,7 +15,7 @@ function Brand() {
     <>
       <div className="brand">
         <div className="brand__content">
-          <h1 className="heading">Brands</h1>
+          <Header {...HeaderData.brand} />
           <div className="brandCards__parent">
             {brandContent.map((brandItem, brandIndex) => (
               <BrandCard key={brandIndex} brandItem={brandItem} />
diff --git a/src/pages/brand/Brand.scss b/src/pages/brand/Brand.scss
index 0ad2c6b..235cbeb 100644
--- a/src/pages/brand/Brand.scss
+++ b/src/pages/brand/Brand.scss
@@ -1,14 +1,12 @@
 .brand {
   width: 70%;
   margin: auto;
-  margin-top: 5rem;
-  .heading {
-    margin: 4rem 0;
-  }
+  margin-top: 13rem;
   .brandCards__parent {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 2.2rem;
+    margin-top: 7rem;
     margin-bottom: 4rem;
   }
 }