diff --git a/components/primary-button/index.ts b/components/primary-button/index.tsx
similarity index 52%
rename from components/primary-button/index.ts
rename to components/primary-button/index.tsx
index a563ba4..c7e3e12 100644
--- a/components/primary-button/index.ts
+++ b/components/primary-button/index.tsx
@@ -1,7 +1,18 @@
+import { ButtonHTMLAttributes, FunctionComponent } from "react";
 import styled from "styled-components";
 import color from "../../styles/color";
 
-export const PrimaryButton = styled.button`
+export const PrimaryButton: FunctionComponent<
+  ButtonHTMLAttributes<HTMLButtonElement>
+> = ({ children, ...props }) => {
+  return (
+    <StyledPrimaryButton {...props}>
+      <span>{children}</span>
+    </StyledPrimaryButton>
+  );
+};
+
+const StyledPrimaryButton = styled.button`
   width: 100%;
   height: 100%;
 
@@ -17,7 +28,6 @@ export const PrimaryButton = styled.button`
   letter-spacing: 0.07em;
   text-transform: uppercase;
 
-  color: ${color.orange["50"]};
   background-color: ${color.orange["100"]};
 
   cursor: pointer;
@@ -25,11 +35,22 @@ export const PrimaryButton = styled.button`
   &:hover {
     transition-duration: 0.5s;
     background-color: ${color.orange["200"]};
+
+    span {
+      opacity: 0.5;
+    }
   }
 
   &:disabled {
-    opacity: 0.5;
-
     background-color: ${color.orange["300"]};
+
+    span {
+      opacity: 0.5;
+    }
+  }
+
+  span {
+    transition-duration: 0.5s;
+    color: ${color.orange["50"]};
   }
 `;