diff --git a/src/components/Main/NavLink/NavLink.tsx b/src/components/Main/NavLink/NavLink.tsx
new file mode 100644
index 0000000..7a5f3b4
--- /dev/null
+++ b/src/components/Main/NavLink/NavLink.tsx
@@ -0,0 +1,23 @@
+import { NavLink } from "react-router-dom";
+
+interface NavLinkProps {
+    to: string;
+    text: string;
+  }
+  
+  const NavLinkContent = (props: NavLinkProps) => {
+    const {to , text} = props;
+    return (
+        <li>
+            <NavLink to={to} style={({ isActive }) => ({
+                color: isActive ? "#fff" : "#7d7d7d",
+                background: isActive ? "#000000" : "unset",
+                fontWeight: isActive ? "700" : "400",})}>
+             {text}
+            </NavLink>
+      </li>
+    );
+  };
+  
+export { NavLinkContent };
+  
\ No newline at end of file