diff --git a/src/App.js b/src/App.js
index ec8867e..28ba3c4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,4 +13,3 @@ const App = () => {
 };
 
 export default App;
-
diff --git a/src/components/Link.css b/src/components/Link.css
new file mode 100644
index 0000000..cc9f1de
--- /dev/null
+++ b/src/components/Link.css
@@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+
+.link {
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: 24px;
+  text-align: center;
+  display: inline-block;
+  font-family: 'Roboto', arial, monospace;
+  background-color: white;
+  color: black;
+  cursor: pointer;
+  text-decoration: none;
+  outline: none;
+}
+
+.link:hover {
+  background-color: black;
+  color: white;
+}
+
+.link:active {
+  background-color: white;
+  color: black;
+}
diff --git a/src/components/Link.js b/src/components/Link.js
index 1696817..57da21a 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,9 +1,10 @@
+import React from "react";
+import styles from "./Link.css"
 
-const Link = () => {
+export default function Link({href, children, ...props}) {
   return (
-    <a>Link</a>
-
-  );
-};
-
-export default Link;
\ No newline at end of file
+    <a className={`link`} href={href}>
+      {children}
+    </a>
+  )
+}