diff --git a/src/css/customButton.css b/src/css/customButton.css
new file mode 100644
index 0000000..493e7fb
--- /dev/null
+++ b/src/css/customButton.css
@@ -0,0 +1,13 @@
+button {
+  height: 1.2cm;
+  text-decoration: none;
+  font-weight: bold;
+  border-radius: 0.6cm;
+  padding: 0cm 0.75cm 0cm 0.75cm;
+  margin-right: 0.25cm;
+  margin-bottom: 0.25cm;
+  transition-duration: 0.2s;
+  display: flex;
+  align-items: center;
+}
+
diff --git a/src/pages/components/customButton.jsx b/src/pages/components/customButton.jsx
new file mode 100644
index 0000000..c5782ee
--- /dev/null
+++ b/src/pages/components/customButton.jsx
@@ -0,0 +1,10 @@
+import '../../css/customButton.css'
+
+function BlackButton({ text })  {
+
+    return(
+          <button>{text}</button>
+    )
+  }
+  
+export default BlackButton
\ No newline at end of file
diff --git a/src/pages/homePage.jsx b/src/pages/homePage.jsx
index e8117ed..f2c92d6 100644
--- a/src/pages/homePage.jsx
+++ b/src/pages/homePage.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import '../css/global.css'
+import BlackButton from './components/customButton'
 
 function HomePage() {
 
@@ -10,8 +11,10 @@ function HomePage() {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100vh',
+        flexDirection: 'column',
       }}>
-        <a>Fifty Shades of Bully</a>
+        <a className='title'>Fifty Shades <br /> of Bully</a>
+        <BlackButton text="Start"/>
   	  </div>
   )
 }