diff --git a/src/common/constants.ts b/src/common/constants.ts
index d0d8e55a..ae60cee9 100644
--- a/src/common/constants.ts
+++ b/src/common/constants.ts
@@ -1,2 +1,3 @@
 export const EMAIL = 'information@sinbad.software'
 export const MOBILE = '971508611678'
+export const HR_EMAIL = 'hr@sinbad.software'
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 997ed586..6ed2a3eb 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -94,7 +94,7 @@ const StyledBurger = styled.button<MenuProps>`
     div {
         width: 2.5rem;
         height: 0.25rem;
-        background: ${({ open }) => (open ? '#0D0C1D' : 'var(--color-sand-4)')};
+        background: ${({ open }) => (open ? 'var(--color-black-4)' : 'var(--color-sand-4)')};
         border-radius: 10px;
         transition: all 0.3s linear;
         position: relative;
diff --git a/src/components/layout/join-us/job.tsx b/src/components/layout/join-us/job.tsx
index a5d64292..2d57c4b7 100644
--- a/src/components/layout/join-us/job.tsx
+++ b/src/components/layout/join-us/job.tsx
@@ -6,6 +6,7 @@ import { Button } from 'components/elements'
 import { JoinUsImageContainer } from 'components/containers/main'
 import Sinbad from 'images/common/openpositions/join-us-background.png'
 import { Banner } from 'images/common/jd'
+import { HR_EMAIL } from 'common/constants'
 
 const Wrapper = styled.div`
     background-color: var(--color-sand-transparent);
@@ -28,7 +29,7 @@ const JoinUsWrapper = styled(JoinUsContainer)`
 
 const JoinUsJob = () => {
     const sendMailToHR = () => {
-        const link = 'mailto:hr@sinbad.software'
+        const link = `mailto:${HR_EMAIL}`
         window.open(link, '_blank')
     }
 
diff --git a/src/pages/careers/work-with-us.tsx b/src/pages/careers/work-with-us.tsx
index 622b1cca..1fb45167 100644
--- a/src/pages/careers/work-with-us.tsx
+++ b/src/pages/careers/work-with-us.tsx
@@ -35,7 +35,7 @@ const StyledHeader = styled.div<{ font_family?: string; color?: string; padding?
     display: flex;
     font-size: 4.8rem;
     line-height: 57px;
-    color: ${(props) => props.color || '#2a2a2a'};
+    color: ${(props) => props.color || 'var(--color-black-1)'};
     font-weight: 640;
     font-family: ${(props) => props.font_family || 'Maven Pro Bold'};
     text-align: center;
diff --git a/static/css/global-style.css b/static/css/global-style.css
index 0b5a8e66..5a63e5c5 100644
--- a/static/css/global-style.css
+++ b/static/css/global-style.css
@@ -4,6 +4,7 @@
     --color-black-1: #2a2a2a;
     --color-black-2: #242424;
     --color-black-3: #232323;
+    --color-black-4: #0D0C1D;
     --color-blue-1: #0e2432;
     --color-blue-2: #3bc8f7;
     --color-blue-3: #ecf6f8;