diff --git a/src/components/signin/signin-form.tsx b/src/components/signin/signin-form.tsx
index 067c67f..7502d69 100644
--- a/src/components/signin/signin-form.tsx
+++ b/src/components/signin/signin-form.tsx
@@ -51,7 +51,7 @@ const SignInForm = ({ className }: SignInFormProps) => {
 
   return (
     <div
-      className={cn("flex max-w-lg flex-col items-center space-y-4", className)}
+      className={cn("flex max-w-lg flex-col items-center rounded-lg bg-[#00000095] p-8 py-12 space-y-4", className)}
     >
       {/* Sign In Header */}
       <Text className="text-4xl font-bold" variant="primary" glow="primary">
diff --git a/src/components/signup/signup-form.tsx b/src/components/signup/signup-form.tsx
index 0cc7d51..12cd3ca 100644
--- a/src/components/signup/signup-form.tsx
+++ b/src/components/signup/signup-form.tsx
@@ -77,7 +77,7 @@ const SignUpForm = ({ className }: SignUpFormProps) => {
 
   return (
     <div
-      className={cn("flex max-w-lg flex-col items-center space-y-4", className)}
+      className={cn("flex max-w-lg flex-col items-center rounded-lg bg-[#00000095] p-8 py-12 space-y-4", className)}
     >
       <Text className="text-4xl font-bold" variant="primary" glow="primary">
         SIGNUP