diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index f1ddf4f..9c7f5d6 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -20,7 +20,7 @@ const Login: NextPage = () => {
   }
 
   return (
-    <div className={"flex h-full items-center justify-center"}>
+    <div className={"mt-10 flex h-full items-center justify-center"}>
       <Card className={"w-96"}>
         <CardHeader>
           <CardTitle>Sign In</CardTitle>
diff --git a/src/pages/sign-up.tsx b/src/pages/sign-up.tsx
index 161bf8f..c7e374b 100644
--- a/src/pages/sign-up.tsx
+++ b/src/pages/sign-up.tsx
@@ -20,27 +20,20 @@ const Login: NextPage = () => {
   }
 
   return (
-    <div className={"flex h-full items-center justify-center"}>
+    <div className={"mt-10 flex h-full items-center justify-center"}>
       <Card className={"w-96"}>
         <CardHeader>
           <CardTitle>Sign up</CardTitle>
         </CardHeader>
         <CardContent>
           <form className={"flex flex-col gap-3"} onSubmit={handleSubmit}>
-            <label className={"flex flex-col gap-1"}>
-              Username (optional)
-              <Input name={"username"} type="text" />
-            </label>
-            <label className={"flex flex-col gap-1"}>
-              Email
-              <Input name={"email"} type="email" />
-            </label>
-
-            <label className={"flex flex-col gap-1"}>
-              Password
-              <Input type="password" name={"password"} />
-            </label>
-
+            <Input
+              name={"username"}
+              type="text"
+              label={"Username (optional)"}
+            />
+            <Input name={"email"} type="email" label={"Email"} />
+            <Input type="password" name={"password"} label={"Password"} />
             <Button className={"w-full"} type={"submit"}>
               Sign Up
             </Button>