diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx
index 61863d285..3b3d4e70b 100644
--- a/src/components/Login/LoginComponent.tsx
+++ b/src/components/Login/LoginComponent.tsx
@@ -4,12 +4,8 @@ export default function LoginComponent() {
 	return (
 		<div className="space-y-5">
 			<div className="space-y-2">
-				<Button className="bg-[#333] text-white focus:ring-[#333]">
-					Login with Github
-				</Button>
-				<Button className="bg-[#4285f4] text-white focus:ring-[#4285f4]">
-					Login with Google
-				</Button>
+				<GithubLoginButton />
+				<GoogleLoginButton />
 			</div>
 			<div className="h-px w-full bg-slate-200" />
 
@@ -23,15 +19,22 @@ export default function LoginComponent() {
 	);
 }
 
-const Button: FunctionComponent<{ className?: string }> = ({
-	children,
+export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({
 	className,
 }) => {
 	return (
-		<button
-			className={`inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1 ${className}`}
-		>
-			{children}
+		<button className="inline-flex h-10 w-full bg-[#333] text-white focus:ring-[#333] items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1">
+			Login with Github
+		</button>
+	);
+};
+
+export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({
+	className,
+}) => {
+	return (
+		<button className="inline-flex h-10 w-full bg-[#4285f4] text-white focus:ring-[#4285f4] items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1">
+			Login with Google
 		</button>
 	);
 };