diff --git a/front/src/components/Button.tsx b/front/src/components/Button.tsx
new file mode 100644
index 0000000..fa3fc54
--- /dev/null
+++ b/front/src/components/Button.tsx
@@ -0,0 +1,12 @@
+import { ReactNode, MouseEventHandler } from 'react';
+
+interface ButtonProps {
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    children: ReactNode;
+}
+
+export default function Button({ onClick, children }: ButtonProps) {
+    return (
+        <button onClick={onClick} className="ni-button" role="button">{children}</button>
+    )
+}
diff --git a/front/src/index.css b/front/src/index.css
index 6119ad9..5c7c0a1 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -66,3 +66,32 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+
+/* Button Component */
+.ni-button {
+  background-color: rgba(51, 51, 51, 0.05);
+  border-radius: 8px;
+  border-width: 0;
+  color: #333333;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  list-style: none;
+  margin: 0;
+  padding: 10px 12px;
+  text-align: center;
+  transition: all 200ms;
+  vertical-align: baseline;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.ni-button:hover {
+  background-color: rgba(51, 51, 51, 0.1);
+}
\ No newline at end of file