diff --git a/apps/docs/content/guides/auth/quickstarts/react.mdx b/apps/docs/content/guides/auth/quickstarts/react.mdx
index 1f7af109800..cf86dbcaaf6 100644
--- a/apps/docs/content/guides/auth/quickstarts/react.mdx
+++ b/apps/docs/content/guides/auth/quickstarts/react.mdx
@@ -73,103 +73,79 @@ hideToc: true
 
 
       ```js src/App.js
-        import React, { useState } from 'react';
-        import { createClient } from '@supabase/supabase-js'
+      import React, { useState } from 'react';
+      import { createClient } from '@supabase/supabase-js'
 
+      function App() {
+        const [email, setEmail] = useState('');
+        const [password, setPassword] = useState('');
+        const [loading, setLoading] = useState(false);
+        const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
 
-        function App() {
-            const [email, setEmail] = useState('');
-            const [password, setPassword] = useState('');
-            const [loading, setLoading] = useState(false);
+        async function signInWithEmail(e) {
+            e.preventDefault();
+            setLoading(true);
+            const { error } = await supabase.auth.signInWithPassword({ email, password });
+            if (error) alert(error.message);
+            setLoading(false);
+        }
 
-            const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
+        async function signUpWithEmail() {
+            setLoading(true);
+            const { data: { session }, error } = await supabase.auth.signUp({ email, password });
+            if (error) alert(error.message);
+            if (!session) alert('Please check your inbox for email verification!');
+            setLoading(false);
+        }
 
-            async function signInWithEmail() {
-                setLoading(true);
-                const { error } = await supabase.auth.signInWithPassword({ email, password});
-                if (error) alert(error.message);
-                setLoading(false);
-            }
-
-            async function signUpWithEmail() {
-                setLoading(true);
-                const { data: { session }, error} = await supabase.auth.signUp({ email, password});
-                if (error) alert(error.message);
-                if (!session) alert('Please check your inbox for email verification!');
-                setLoading(false);
-            }
-
-            const styles = {
-                container: {
-                    maxWidth: '300px',
-                    margin: '20px auto',
-                    padding: '20px',
-                },
-                formGroup: {
-                    marginBottom: '15px',
-                },
-                label: {
-                    display: 'block',
-                    marginBottom: '5px',
-                },
-                input: {
-                    width: '100%',
-                    padding: '8px',
-                    marginBottom: '10px',
-                },
-                button: {
-                    padding: '8px 16px',
-                    marginRight: '10px',
-                    cursor: 'pointer',
-                }
-            };
-
-            return (
-                <div style={styles.container}>
-                <div style={styles.formGroup}>
-                    <label style={styles.label}>
-                    Email:
-                    <input
-                        type="email"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        placeholder="email@address.com"
-                        style={styles.input}
-                    />
-                    </label>
-                </div>
-
-                <div style={styles.formGroup}>
-                    <label style={styles.label}>
-                    Password:
-                    <input
-                        type="password"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        placeholder="Password"
-                        style={styles.input}
-                    />
-                    </label>
-                </div>
-
-                <button
-                    onClick={signInWithEmail}
-                    disabled={loading}
-                    style={styles.button}
-                >
-                    Sign in
-                </button>
-                <button
-                    onClick={signUpWithEmail}
-                    disabled={loading}
-                    style={styles.button}
-                >
-                    Sign up
-                </button>
+        return (
+            <div>
+                <form onSubmit={signInWithEmail}>
+                    <div>
+                        <label htmlFor="email">
+                            Email:
+                            <input
+                                    id="email"
+                                    name="email"
+                                    type="email"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    placeholder="email@address.com"
+                                />
+                            </label>
+                        </div>
+                        <div>
+                            <label htmlFor="password">
+                                Password:
+                                <input
+                                    id="password"
+                                    name="password"
+                                    type="password"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    placeholder="Password"
+                                />
+                            </label>
+                        </div>
+                        <button
+                            type="submit"
+                            disabled={loading}
+                        >
+                            Sign in
+                        </button>
+                        <button
+                            type="button"
+                            onClick={signUpWithEmail}
+                            disabled={loading}
+                        >
+                            Sign up
+                        </button>
+                    </form>
                 </div>
             );
         }
-      export default App
+      export default App;
+
       ```
 
     </StepHikeCompact.Code>