diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
index aabc45c..7e14e2f 100644
--- a/src/components/hero/hero.tsx
+++ b/src/components/hero/hero.tsx
@@ -1,17 +1,18 @@
+import styles from "@/static/hero/hero.module.css"
+
 const Hero = () => {
-  return (
-    <div
-      style={{
-        height: "500px",
-        background: "red",
-        color: "white",
-        fontSize: "40px",
-        padding: "100px",
-      }}
-    >
-      HERO COMPONENT
-    </div>
-  );
+  return(
+    <section className={styles.hero}>
+      <div className="cont-header">
+        <div className={styles.left}>
+          <h1>left</h1>
+        </div>
+        <div className={styles.right}>
+          <h1>right</h1>
+        </div>
+      </div>
+    </section>
+  )
 };
 
 export default Hero;
\ No newline at end of file
diff --git a/src/static/globals.css b/src/static/globals.css
index f65a5e3..bd49048 100644
--- a/src/static/globals.css
+++ b/src/static/globals.css
@@ -25,4 +25,13 @@ body {
 
 h1, a {
     color: #fff;
-}
\ No newline at end of file
+}
+
+.cont-header {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 var(--container-padding, 40px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/static/header/header.module.css b/src/static/header/header.module.css
index 8a5da05..54e6ad1 100644
--- a/src/static/header/header.module.css
+++ b/src/static/header/header.module.css
@@ -1,5 +1,4 @@
 .header {
-  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
@@ -13,16 +12,6 @@
   border-bottom: 1px solid var(--border);
 }
 
-.cont-header {
-  width: 100%;
-  max-width: var(--container-max-width, 1400px);
-  margin: 0 auto;
-  padding: 0 var(--container-padding, 40px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 /* LEFT */
 
 .left a {
diff --git a/src/static/hero/hero.module.css b/src/static/hero/hero.module.css
index 9b187e5..437a473 100644
--- a/src/static/hero/hero.module.css
+++ b/src/static/hero/hero.module.css
@@ -1,5 +1,11 @@
 .hero {
-    height: 500px;
-    background: aqua;
-    font-size: 40px;
+    background-color: aquamarine;
+    height: calc(100vh - 90px);
+}
+
+.left,
+.right {
+    width: 49%;
+    height: 90vh;
+    background-color: red;
 }
\ No newline at end of file
diff --git a/src/widgets/header/ui/Header.tsx b/src/widgets/header/ui/Header.tsx
index 73a4c99..2e04c9e 100644
--- a/src/widgets/header/ui/Header.tsx
+++ b/src/widgets/header/ui/Header.tsx
@@ -4,7 +4,7 @@ import styles from "@/static/header/header.module.css";
 const Header = () => {
   return (
     <header className={styles.header}>
-      <div className={styles["cont-header"]}>
+      <div className="cont-header">
         {/* LEFT */}
         <div className={styles.left}>
           <a href="/">