diff --git a/examples/tutorials/TodoApp/src/client/LoginPage.jsx b/examples/tutorials/TodoApp/src/client/LoginPage.jsx
index fbe42d6b4..f8c8f65c8 100644
--- a/examples/tutorials/TodoApp/src/client/LoginPage.jsx
+++ b/examples/tutorials/TodoApp/src/client/LoginPage.jsx
@@ -1,17 +1,19 @@
 import { Link } from 'react-router-dom'
 
-import LoginForm from '@wasp/auth/forms/Login'
+import { LoginForm } from '@wasp/auth/forms/Login'
 
 const LoginPage = () => {
   return (
     <>
-      <LoginForm/>
-      <br/>
-      <span>
-        I don't have an account yet (<Link to="/signup">go to signup</Link>).
-      </span>
+      <div style={{maxWidth: "400px", margin: "0 auto"}}>
+        <LoginForm/>
+        <br/>
+        <span>
+          I don't have an account yet (<Link to="/signup">go to signup</Link>).
+        </span>
+      </div>
     </>
   )
 }
 
-export default LoginPage
+export default LoginPage
\ No newline at end of file
diff --git a/examples/tutorials/TodoApp/src/client/SignupPage.jsx b/examples/tutorials/TodoApp/src/client/SignupPage.jsx
index f06c2e75a..5e0d79005 100644
--- a/examples/tutorials/TodoApp/src/client/SignupPage.jsx
+++ b/examples/tutorials/TodoApp/src/client/SignupPage.jsx
@@ -1,17 +1,19 @@
 import { Link } from 'react-router-dom'
 
-import SignupForm from '@wasp/auth/forms/Signup'
+import { SignupForm } from '@wasp/auth/forms/Signup'
 
 const SignupPage = () => {
   return (
     <>
-      <SignupForm/>
-      <br/>
-      <span>
-        I already have an account (<Link to="/login">go to login</Link>).
-      </span>
+      <div style={{maxWidth: "400px", margin: "0 auto"}}>
+        <SignupForm/>
+        <br/>
+        <span>
+          I already have an account (<Link to="/login">go to login</Link>).
+        </span>
+      </div>
     </>
   )
 }
 
-export default SignupPage
+export default SignupPage
\ No newline at end of file