diff --git a/packages/w3ui/examples/react/w3console/public/w3.svg b/packages/w3ui/examples/react/w3console/public/w3.svg
new file mode 100644
index 000000000..977174e1c
--- /dev/null
+++ b/packages/w3ui/examples/react/w3console/public/w3.svg
@@ -0,0 +1,4 @@
+<svg width='30' viewBox='0 0 27.2 27.18' xmlns='http://www.w3.org/2000/svg'>
+  <path fill='white' d='M13.6 27.18A13.59 13.59 0 1127.2 13.6a13.61 13.61 0 01-13.6 13.58zM13.6 2a11.59 11.59 0 1011.6 11.6A11.62 11.62 0 0013.6 2z'  />
+  <path fill='white' d='M12.82 9.9v2.53h1.6V9.9l2.09 1.21.77-1.21-2.16-1.32 2.16-1.32-.77-1.21-2.09 1.21V4.73h-1.6v2.53l-2-1.21L10 7.26l2.2 1.32L10 9.9l.78 1.21zM18 17.79v2.52h1.56v-2.52L21.63 19l.78-1.2-2.16-1.33 2.16-1.28-.78-1.19-2.08 1.2v-2.58H18v2.56L15.9 14l-.77 1.2 2.16 1.32-2.16 1.33.77 1.15zM8.13 17.79v2.52h1.56v-2.52L11.82 19l.77-1.2-2.16-1.33 2.12-1.28-.73-1.24-2.13 1.23v-2.56H8.13v2.56L6.05 14l-.78 1.2 2.16 1.3-2.16 1.33.78 1.17z' />
+</svg>
\ No newline at end of file
diff --git a/packages/w3ui/examples/react/w3console/src/app.tsx b/packages/w3ui/examples/react/w3console/src/app.tsx
index 3d99affa5..e356b08e5 100644
--- a/packages/w3ui/examples/react/w3console/src/app.tsx
+++ b/packages/w3ui/examples/react/w3console/src/app.tsx
@@ -148,7 +148,7 @@ export function App (): JSX.Element {
               </div>
             </div>
           </nav>
-          <main className='grow bg-dark-gray text-white p-4'>
+          <main className='grow bg-gray-dark text-white p-4'>
             <SpaceSection />
           </main>
         </div>
diff --git a/packages/w3ui/examples/react/w3console/src/index.css b/packages/w3ui/examples/react/w3console/src/index.css
index a90f0749c..c6795eefe 100644
--- a/packages/w3ui/examples/react/w3console/src/index.css
+++ b/packages/w3ui/examples/react/w3console/src/index.css
@@ -2,3 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+
+.w3ui-authenticator {
+  background-image: url("/w3.svg");
+  background-repeat: no-repeat;
+  background-position: center 95%;
+  @apply bg-gray-900;
+}
+
+.w3ui-authenticator-form {
+  background: linear-gradient(104.3deg,#3064e0 -8.21%,#00d8ff 88.68%);
+  @apply shadow-md px-10 pt-14 pb-8 rounded-xl;
+}
+
+.w3ui-authenticator-form .email-field label {
+  @apply text-white font-semibold uppercase text-xs tracking-wider m-1 font-mono opacity-80;
+}
+
+.w3ui-authenticator-form .email-field input {
+  width: 22rem;
+  @apply bg-white rounded-md shadow-md
+}
\ No newline at end of file
diff --git a/packages/w3ui/packages/react/src/Authenticator.tsx b/packages/w3ui/packages/react/src/Authenticator.tsx
index 34d113c23..793a97840 100644
--- a/packages/w3ui/packages/react/src/Authenticator.tsx
+++ b/packages/w3ui/packages/react/src/Authenticator.tsx
@@ -8,7 +8,7 @@ export function AuthenticationForm (): JSX.Element {
     <div className='w3ui-authenticator'>
       <AuthCore.Form className='w3ui-authenticator-form'>
         <div className='email-field'>
-          <label htmlFor='w3ui-authenticator-email'>Email address:</label>
+          <label htmlFor='w3ui-authenticator-email'>Email</label>
           <AuthCore.EmailInput id='w3ui-authenticator-email' required />
         </div>
         <button className='register w3ui-button' type='submit' disabled={submitted}>Register</button>