diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 267c32261..0a609f02c 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -18,21 +18,6 @@
   font-size: inherit;
 }
 
-.navigation__link {
-  display: inline-block;
-  outline: none;
-  text-decoration: none;
-  opacity: 0.7;
-  padding: 0 0.5em;
-  color: black;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.navigation__link:hover,
-.navigation__link:focus {
-  opacity: 1;
-}
-
 @media (min-width: 500px) {
   .header {
     text-align: left;
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index a3bbc9f29..2f24929fb 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,20 +1,11 @@
+import Navigation from '../Navigation/Navigation';
 import './Header.css';
 
 function Header() {
   return (
     <header className="header">
       <h1 className="header__title">Site Name</h1>
-      <nav className="navigation">
-        <a className="navigation__link" href="#about">
-          About
-        </a>
-        <a className="navigation__link" href="#services">
-          Services
-        </a>
-        <a className="navigation__link" href="#contact">
-          Contact
-        </a>
-      </nav>
+      <Navigation />
     </header>
   );
 }
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
new file mode 100644
index 000000000..a67620c16
--- /dev/null
+++ b/src/components/Navigation/Navigation.css
@@ -0,0 +1,14 @@
+.navigation__link {
+  display: inline-block;
+  outline: none;
+  text-decoration: none;
+  opacity: 0.7;
+  padding: 0 0.5em;
+  color: black;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.navigation__link:hover,
+.navigation__link:focus {
+  opacity: 1;
+}
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
new file mode 100644
index 000000000..7bdc46672
--- /dev/null
+++ b/src/components/Navigation/Navigation.jsx
@@ -0,0 +1,19 @@
+import './Navigation.css';
+
+function Navigation() {
+  return (
+    <nav className="navigation">
+      <a className="navigation__link" href="#about">
+        About
+      </a>
+      <a className="navigation__link" href="#services">
+        Services
+      </a>
+      <a className="navigation__link" href="#contact">
+        Contact
+      </a>
+    </nav>
+  );
+}
+
+export default Navigation;