diff --git a/src/components/HeaderNavBar/HeaderNavBar.module.scss b/src/components/HeaderNavBar/HeaderNavBar.module.scss
new file mode 100644
index 0000000..6361cc0
--- /dev/null
+++ b/src/components/HeaderNavBar/HeaderNavBar.module.scss
@@ -0,0 +1,43 @@
+@use '../../variables';
+
+.header-nav-bar {
+    height: 44px;
+
+    @media (min-width: 3600px) {
+        height: 70px;
+    }
+
+    @media ((min-width: 2500px) and (max-width: 3599px)){
+        height: 61px;
+    }
+
+    @media (max-width: 1024px) {
+        height: 0;
+    }
+
+    &__ul {
+        display: flex;
+        align-items: center;
+        text-transform: none;
+        padding: 14px 100px;
+        height: 44px;
+        gap: 55px;
+    
+        @media (min-width: 3600px) {
+            height: 70px;
+        }
+    
+        @media ((min-width: 2500px) and (max-width: 3599px)){
+            height: 61px;
+        }
+
+        @media (max-width: 1024px) {
+            flex-direction: column;
+            align-items: flex-start;
+            background-color: variables.$white;
+            height: 507px;
+            padding: 31px 16px;
+            gap: 0;
+        }
+    }
+}
diff --git a/src/components/HeaderNavBar/HeaderNavBar.tsx b/src/components/HeaderNavBar/HeaderNavBar.tsx
new file mode 100644
index 0000000..54811a7
--- /dev/null
+++ b/src/components/HeaderNavBar/HeaderNavBar.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from "./HeaderNavBar.module.scss";
+
+import { ItemNavBar } from '../ItemNavBar/ItemNavBar';
+
+const HeaderNavBar = () => {
+
+    return (
+        <nav className={styles["header-nav-bar"]}>
+            <ul className={styles["header-nav-bar__ul"]}>
+               <ItemNavBar text="cursos" />
+               <ItemNavBar text="Saiba mais" />
+               <ItemNavBar text="Institucionais" />
+            </ul>
+        </nav>
+    );
+}
+
+export {HeaderNavBar};
diff --git a/src/components/ItemNavBar/ItemNavBar.module.scss b/src/components/ItemNavBar/ItemNavBar.module.scss
new file mode 100644
index 0000000..1f5b977
--- /dev/null
+++ b/src/components/ItemNavBar/ItemNavBar.module.scss
@@ -0,0 +1,29 @@
+@use '../../variables';
+
+.nav-bar__item {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: variables.$white;
+    cursor: pointer;
+
+    @media (min-width: 3600px) {
+        font-size: 32px;
+        line-height: 38px;
+    }
+
+    @media ((min-width: 2500px) and (max-width: 3599px)) {
+        font-size: 28px;
+        line-height: 33px;
+    }
+
+    @media (max-width: 1024px) {
+        color: variables.$gray-400;
+        margin-bottom: 12px;
+    }
+
+    &:hover {
+        filter: brightness(80%);
+    }
+}
diff --git a/src/components/ItemNavBar/ItemNavBar.tsx b/src/components/ItemNavBar/ItemNavBar.tsx
new file mode 100644
index 0000000..7d37cf7
--- /dev/null
+++ b/src/components/ItemNavBar/ItemNavBar.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import styles from "./ItemNavBar.module.scss";
+
+const ItemNavBar = ( props:any) => {
+    const { text } = props;
+    return <li className={styles["nav-bar__item"]}> { text } </li>;
+};
+
+export { ItemNavBar };