diff --git a/DirectReport/browserview/static/js/auth/signup.js b/DirectReport/browserview/static/js/auth/signup.js
index 7e4b3ff8..aaf86c81 100644
--- a/DirectReport/browserview/static/js/auth/signup.js
+++ b/DirectReport/browserview/static/js/auth/signup.js
@@ -1,59 +1,80 @@
 const { useState, useEffect } = React;
 
 const SignupForm = () => {
+    return (
+        <form className="space-y-4 md:space-y-6" method="POST" action="/signup">
+            <div>
+                <label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Your email
+                </label>
+                <input type="email" name="email" id="email"
+                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                       placeholder="name@company.com" required=""/>
+            </div>
+            <div>
+                <label htmlFor="firstname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    First name
+                </label>
+                <input type="firstname" name="firstname" id="firstname"
+                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                       placeholder="John Doe.." required=""/>
+            </div>
+            <div>
+                <label htmlFor="lastname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Last name
+                </label>
+                <input type="text" name="lastname" id="lastname"
+                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                       placeholder="John Doe.." required=""/>
+            </div>
+            <div>
+                <label htmlFor="username" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                    Username
+                </label>
+                <input type="text" name="username" id="username"
+                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                       placeholder="John Doe.." required=""/>
+            </div>
+            <div>
+                <label htmlFor="password"
+                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
+                <input type="password" name="password" id="password" placeholder="••••••••"
+                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                       required=""/>
+            </div>
+            <div className="flex items-center justify-between">
+                <div className="flex items-start">
+                    <div className="flex items-center h-5">
+                        <input id="remember" name="remember" aria-describedby="remember" type="checkbox"
+                               className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
+                               required=""/>
+                    </div>
+                    <div className="ml-3 text-sm">
+                        <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
+                            Remember me
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <button type="submit"
+                    className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                Create Account
+            </button>
+        </form>
+    )
+}
+
+const Signup = () => {
     return (
         <div>
             <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
-                <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+                <div
+                    className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
                     <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
                         <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                             Sign up for an account
                         </h1>
-                        <form className="space-y-4 md:space-y-6" method="POST" action="/signup">
-                            <div>
-                                <label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                    Your email
-                                </label>
-                                <input type="email" name="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required=""/>
-                            </div>
-                            <div>
-                                <label htmlFor="firstname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                    First name
-                                </label>
-                                <input type="firstname" name="firstname" id="firstname" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John Doe.." required=""/>
-                            </div>
-                            <div>
-                                <label htmlFor="lastname" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                    Last name
-                                </label>
-                                <input type="text" name="lastname" id="lastname" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John Doe.." required=""/>
-                            </div>
-                            <div>
-                                <label htmlFor="username" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                    Username
-                                </label>
-                                <input type="text" name="username" id="username" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John Doe.." required=""/>
-                            </div>
-                            <div>
-                                <label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
-                                <input type="password" name="password" id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required=""/>
-                            </div>
-                            <div className="flex items-center justify-between">
-                                <div className="flex items-start">
-                                    <div className="flex items-center h-5">
-                                        <input id="remember" name="remember" aria-describedby="remember" type="checkbox" className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required=""/>
-                                    </div>
-                                    <div className="ml-3 text-sm">
-                                        <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
-                                            Remember me
-                                        </label>
-                                    </div>
-                                </div>
-                            </div>
-                            <button type="submit" className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
-                                Create Account
-                            </button>
-                        </form>
+                        {SignupForm()}
                     </div>
                 </div>
             </div>
@@ -62,4 +83,4 @@ const SignupForm = () => {
 }
 
 const domContainer = document.querySelector('#root');
-ReactDOM.render(<SignupForm/>, domContainer);
\ No newline at end of file
+ReactDOM.render(<Signup/>, domContainer);
\ No newline at end of file