diff --git a/code/frontend/src/components/ButtonPrimary.tsx b/code/frontend/src/components/ButtonPrimary.tsx
new file mode 100644
index 0000000..8cbf13b
--- /dev/null
+++ b/code/frontend/src/components/ButtonPrimary.tsx
@@ -0,0 +1,18 @@
+import "./buttonPrimary.css";
+
+interface ButtonPrimaryProps {
+  value: string;
+  onClick?: () => void;
+}
+
+export default function ButtonPrimary({ value, onClick }: ButtonPrimaryProps) {
+  return (
+    <button
+      type="submit"
+      className="login-button body-m"
+      onClick={onClick}
+    >
+      {value}
+    </button>
+  );
+}
diff --git a/code/frontend/src/components/buttonPrimary.css b/code/frontend/src/components/buttonPrimary.css
new file mode 100644
index 0000000..8f453d7
--- /dev/null
+++ b/code/frontend/src/components/buttonPrimary.css
@@ -0,0 +1,26 @@
+.login-button {
+    display: inline-flex;
+    padding: auto;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    width: fit-content;
+
+    margin: 1rem;
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-orange-default);
+    background: var(--Rotkehlchen-yellow-default);
+  }
+  
+  .login-button:hover {
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-orange-default);
+    background: var(--Rotkehlchen-yellow-hover);
+  }
+  .login-button:active {
+    border-radius: 10px;
+    border: 2px solid var(--Rotkehlchen-orange-default);
+    background: var(--Rotkehlchen-orange-default);
+  }
\ No newline at end of file
diff --git a/code/frontend/src/pages/LoginAndSignUpPage.tsx b/code/frontend/src/pages/LoginAndSignUpPage.tsx
index 253174e..cbf8ad1 100644
--- a/code/frontend/src/pages/LoginAndSignUpPage.tsx
+++ b/code/frontend/src/pages/LoginAndSignUpPage.tsx
@@ -1,6 +1,8 @@
 import "./loginAndSignUpPage.css";
 import { useEffect, useState } from "react";
 import axios from "axios";
+import { Button } from "@mui/material";
+import ButtonPrimary from "../components/ButtonPrimary";
 
 type FormData = {
   username: string;
@@ -134,11 +136,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
               </div>
             )}
           </div>
-          <input
-            type="submit"
-            className="login-button body-m"
-            value={signup ? "Sign up" : "Login"}
-          ></input>
+          <ButtonPrimary value={signup ? "Sign Up" : "Login"} />
           <div className="login-signup body-m" onClick={toggleLogin}>
             {signup
               ? "Already have an account? "
diff --git a/code/frontend/src/pages/loginAndSignUpPage.css b/code/frontend/src/pages/loginAndSignUpPage.css
index c8db559..f70abe6 100644
--- a/code/frontend/src/pages/loginAndSignUpPage.css
+++ b/code/frontend/src/pages/loginAndSignUpPage.css
@@ -58,29 +58,9 @@
 }
 
 .login-button {
-  display: inline-flex;
-  padding: auto;
-  justify-content: center;
-  align-items: center;
   gap: 10px;
   width: 150px;
   height: 32px;
-  cursor: pointer;
-
-  border-radius: 10px;
-  border: 2px solid var(--Rotkehlchen-orange-default);
-  background: var(--Rotkehlchen-yellow-default);
-}
-
-.login-button:hover {
-  border-radius: 10px;
-  border: 2px solid var(--Rotkehlchen-orange-default);
-  background: var(--Rotkehlchen-yellow-hover);
-}
-.login-button:active {
-  border-radius: 10px;
-  border: 2px solid var(--Rotkehlchen-orange-default);
-  background: var(--Rotkehlchen-orange-default);
 }
 
 .login-div-input {