diff --git a/package.json b/package.json
index ab23312..27f62a8 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,12 @@
   "name": "react-login-page",
   "version": "0.1.0",
   "private": true,
-  "homepage": "LACONIC_HOSTED_CONFIG_web_path",
+  "homepage": ".",
   "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -30,5 +30,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/src/App.css b/src/App.css
index bcef71c..73454c8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -80,7 +80,7 @@ form {
     background: #f3f3f3;
     border: 1px solid #ddd;
     border-radius: 2px;
-    padding: 2rem;
+    padding: 1rem;
     margin: 2rem 0 1rem 0
 }
 
@@ -88,7 +88,7 @@ form label {
     float: left;
     font-size: .9rem;
     margin: 0;
-    padding: 0
+    padding: 0.5rem;
 }
 
 .right-label {
@@ -126,7 +126,8 @@ footer p {
 
 /***    Register Page     ***/
 #checkbox {
-    width: 1rem
+    width: 1rem;
+    padding: .5rem;
 }
 
 form span {
@@ -140,4 +141,24 @@ form span {
 /***    Home Page     ***/
 .home-page-title {
     color: #222
+}
+
+.error {
+    color: red;
+}
+
+.message {
+    display: inline-block;
+    background: #f3f3f3;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    padding: 2rem;
+    margin: 1rem 0 1rem 0;
+}
+
+.note {
+    color: #888;
+    font-size: .8rem;
+    margin: 1rem 0 0.5rem 0;
+    font-style: italic;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 2a5fa7f..5b9131d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 
 import LandingPage from './components/pages/LandingPage'
 import LoginPage from './components/pages/LoginPage'
@@ -14,10 +14,10 @@ export default function App() {
     return (
         <Router>
             <div>
-                <Switch>
-                    <Route exact path={basePath} component={ RegisterPage } />
-                    <Route path={basePath + "/register"} component={ RegisterPage } />
-                </Switch>
+                <Routes>
+                    <Route exact path={basePath} element={ <RegisterPage/> } />
+                    <Route path={basePath + "/create"} element={ <RegisterPage/> } />
+                </Routes>
                 <Footer />
             </div>
         </Router>
diff --git a/src/components/pages/RegisterPage.js b/src/components/pages/RegisterPage.js
index 4ab689a..e42facf 100644
--- a/src/components/pages/RegisterPage.js
+++ b/src/components/pages/RegisterPage.js
@@ -1,22 +1,27 @@
 import React from 'react'
-import { useState } from "react";
+import {useState} from "react";
 
 import '../../App.css'
+import {Link} from "react-router-dom";
 
 export default function SignUpPage() {
     const [username, setUsername] = useState("");
     const [email, setEmail] = useState("");
     const [message, setMessage] = useState("");
+    const [error, setError] = useState("");
 
     let handleSubmit = async (e) => {
+        setMessage("");
+        setError("");
+
         const apiBase = "LACONIC_HOSTED_CONFIG_api_url";
         e.preventDefault();
         try {
             let res = await fetch(`${apiBase}/register`, {
                 method: "POST",
-	        headers: {
-	          "Content-Type": "application/json",
-	        },
+                headers: {
+                    "Content-Type": "application/json",
+                },
                 body: JSON.stringify({
                     username: username,
                     email: email,
@@ -24,49 +29,64 @@ export default function SignUpPage() {
             });
             let resJson = await res.json();
             if (res.status === 200) {
-                setMessage(`API Key: ${resJson['api-key']}`);
+                setMessage(`${resJson['api-key']}`);
             } else {
-                setMessage("Some error occured");
+                setError(`An error occurred: ${res.status}`);
             }
         } catch (err) {
-            setMessage("Some error occured");
+            setError("An error occurred.");
         }
     };
 
-
     return (
         <div className="text-center m-5-auto">
-	    {/*<h2>Join us</h2>*/}
-            {/*<h5>Create your personal account</h5>*/}
-            <form onSubmit={handleSubmit} action="">
-                {/*<p>*/}
-                {/*    <label>Username</label><br/>*/}
-                {/*    <input type="text" name="username"*/}
-                {/*           onChange={(e) => setUsername(e.target.value)}*/}
-                {/*           required />*/}
-                {/*</p>*/}
-                <p>
-                    <label>Email address</label><br/>
-                    <input type="email" name="email"
-                           onChange={(e) => setEmail(e.target.value)}
-                           required />
-                </p>
-                {/*<p>*/}
-                {/*    <label>Password</label><br/>*/}
-                {/*    <input type="password" name="password" requiredc />*/}
-                {/*</p>*/}
-                <p>
-                    <input type="checkbox" name="checkbox" id="checkbox" required /> <span>I agree all statements in <a href="https://cerc.io" target="_blank" rel="noopener noreferrer">terms of service</a></span>.
-                </p>
-                <p>
-                    <button id="sub_btn" type="submit">Register</button>
-                </p>
-            </form>
-
-            <div className="message">{message ? <p>{message}</p> : null}</div>
-            {/*<footer>*/}
-            {/*    <p><Link to="/">Back to Homepage</Link>.</p>*/}
-            {/*</footer>*/}
+            {message ?
+                <div className="success">
+                    <h2>Account Created</h2>
+                    <div className="message">
+                        <h5>API Key</h5>
+                        {message}
+                        <div className="note">Save this key. It will not be displayed again.</div>
+                    </div>
+                </div>
+                :
+                <div>
+                    {/*<h2>Join us</h2>*/}
+                    {/*<h5>Create your personal account</h5>*/
+                    }
+                    <form onSubmit={handleSubmit} action="">
+                        {/*<p>*/}
+                        {/*    <label>Username</label><br/>*/}
+                        {/*    <input type="text" name="username"*/}
+                        {/*           onChange={(e) => setUsername(e.target.value)}*/}
+                        {/*           required />*/}
+                        {/*</p>*/}
+                        <p>
+                            <label>E-mail Address</label><br/>
+                            <input type="email" name="email"
+                                   onChange={(e) => setEmail(e.target.value)}
+                                   required/>
+                        </p>
+                        {/*<p>*/}
+                        {/*    <label>Password</label><br/>*/}
+                        {/*    <input type="password" name="password" requiredc />*/}
+                        {/*</p>*/}
+                        <p>
+                            <input type="checkbox" name="checkbox" id="checkbox" required/>
+                            <span>I agree all statements in <a
+                                href="https://cerc.io" target="_blank"
+                                rel="noopener noreferrer">terms of service</a></span>.
+                        </p>
+                        <p>
+                            <button id="sub_btn" type="submit">Register</button>
+                        </p>
+                    </form>
+                    <div className="error">{error ? <p>{error}</p> : null}</div>
+                </div>
+            }
+            <footer>
+                <p><Link to="https://cerc.io">Docs</Link></p>
+            </footer>
         </div>
     )