diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index f0a7584..38f6380 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Input } from "@/components/form/Input";
+import Input from "@/components/form/Input";
 import ButtonHoverBubble from "@/components/button/ButtonHoverBubble";
 
 export default function SignupPage() {
@@ -20,13 +20,24 @@ export default function SignupPage() {
   };
 
   return (
-    <ThemeProvider>
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
       <div className="min-h-screen flex items-center justify-center p-4">
         <form onSubmit={handleSubmit} className="bg-card p-8 rounded-lg shadow-xl w-full max-w-md">
           <h1 className="text-2xl font-bold mb-6">Sign Up</h1>
           {error && <p className="text-red-500 mb-4 text-sm">{error}</p>}
-          <Input value={email} onChange={setEmail} type="email" placeholder="Email" className="mb-4" />
-          <Input value={password} onChange={setPassword} type="password" placeholder="Password (min 6 chars)" className="mb-6" />
+          <Input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email" className="mb-4" />
+          <Input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Password (min 6 chars)" className="mb-6" />
           <ButtonHoverBubble text="Sign Up" type="submit" className="w-full" />
         </form>
       </div>