diff --git a/saas/axops/src/ui/src/app/common/customValidators/CustomRegex.ts b/saas/axops/src/ui/src/app/common/customValidators/CustomRegex.ts
index 4e81b2ccb25f..d98dc935d4ac 100644
--- a/saas/axops/src/ui/src/app/common/customValidators/CustomRegex.ts
+++ b/saas/axops/src/ui/src/app/common/customValidators/CustomRegex.ts
@@ -2,7 +2,7 @@ export class CustomRegex {
 
     // Password will match only: 8+ letters, at least 1 lower case letter,
     // at least 1 upper case letter, and at least 1 special character
-    public static password = /^(?=.*?[A-Za-z])(?=.*?[0-9])(?=.*?[#?!@()_+=;:"\'<>,./~{\[\\}|\]$%^&*-]).{8,}$/;
+    public static password = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@()_+=;:"\'<>,./~{\[\\}|\]$%^&*-]).{8,}$/;
     // Minimum 8 characters at least 1 Alphabet, 1 Number and 1 Special Character:
     // public static password: string = '^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$';
 
diff --git a/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html b/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
index 9ec6322643f9..62dca8245d10 100644
--- a/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
+++ b/saas/axops/src/ui/src/app/views/forgot-password/forgot-confirmation/forgot-confirmation.html
@@ -1,10 +1,23 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg"></div>
-        <h4>Reset password link is sent</h4>
-        <div>Check your email and click the link to reset your password</div>
-        <div class="login__more-row">
-            <a routerLink="/login">{{ 'Go to Login' | translate }}</a>
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box setup__box--forgot-password-confirm">
+        <div class="setup__header">
+            <h1>{{ 'Password Reset Email Sent' | translate }}</h1>
+        </div>
+        <div class="setup__content setup__content--forgot-password-confirm">
+            <p>
+                {{ 'Please check your inbox. We just emailed you a link to reset your password. If you don\'t receive anything, first check your spam folder and then try again.' | translate }}.
+            </p>
+
+            <div class="setup__btn-center setup__btn-center--additional-top-margin">
+                <a axButtonWave class="ax-button ax-button--base-o setup__btn" routerLink="/login">
+                    {{ 'Sign In' | translate }}
+                </a>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html b/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
index c13d76d88536..36951b7c52de 100644
--- a/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
+++ b/saas/axops/src/ui/src/app/views/forgot-password/forgot-password.html
@@ -1,23 +1,38 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg">
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box setup__box--forgot-password">
+        <div class="setup__header">
+            <h1>{{ 'Forgot Password' | translate }}?</h1>
         </div>
-        <form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
-            <div class="ax-form-row">
-                <input class="ax-field" id="email" type="text" formControlName="email" ax-label-placeholder
-                       autocomplete="off">
-                <label for="email" class="ax-label-placeholder">{{ 'Email address' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['email'].valid && (resetPasswordForm.controls['email'].touched || submitted)">{{ 'Email is incorrect' | translate }}</div>
-            </div>
-            <div class="login__form-row">
-                <button axButtonWave class="ax-button ax-button--base ax-button--full-width ax-button--xlg" type="submit">
-                    {{ 'Reset passowrd' | translate }}
-                </button>
+        <div class="setup__content setup__content--forgot-password">
+            <div class="setup__back-btn">
+                <a [routerLink]="['/login']">
+                    <i class="ax-icon-back"></i>{{ 'Back' | translate | uppercase }}
+                </a>
             </div>
-            <div class="login__more-row">
-                <a [routerLink]="['/login']">{{ 'Back to login' | translate }}</a>
-            </div>
-        </form>
+
+            <form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
+                <p>
+                    {{ 'Enter the email address you used to create your Argo Account and we\'ll send you an email with a link to reset your password' | translate }}.
+                </p>
+                <div class="ax-form-row">
+                    <input class="ax-field" id="email" type="text" formControlName="email" ax-label-placeholder
+                           autocomplete="off">
+                    <label for="email" class="ax-label-placeholder">{{ 'Email' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['email'].valid && (resetPasswordForm.controls['email'].touched || submitted)">{{ 'Email is incorrect' | translate }}</div>
+                </div>
+                <div class="login__form-row">
+                    <button axButtonWave class="ax-button ax-button--base ax-button--full-width setup__btn" type="submit">
+                        {{ 'Send email' | translate }}
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
+
 <ax-notifications></ax-notifications>
\ No newline at end of file
diff --git a/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html b/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
index 473892bde6db..3ad7c8a0067c 100644
--- a/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
+++ b/saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html
@@ -1,10 +1,23 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg"></div>
-        <h4>Your password was changed</h4>
-        <div>Check your email and click the link to confirm change.</div>
-        <div class="login__more-row">
-            <a routerLink="/login">{{ 'Go to Login' | translate }}</a>
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box setup__box--reset-password-confirm">
+        <div class="setup__header">
+            <h1>{{ 'Password Reset Complete' | translate }}</h1>
+        </div>
+        <div class="setup__content setup__content--reset-password-confirm">
+            <p>
+                {{ 'Your password has been updated. Now you continue to Sign In to Argo.' | translate }}
+            </p>
+
+            <div class="setup__btn-center setup__btn-center--additional-top-margin">
+                <a axButtonWave class="ax-button ax-button--base setup__btn" routerLink="/login">
+                    {{ 'Sign In' | translate }}
+                </a>
+            </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/saas/axops/src/ui/src/app/views/reset-password/reset-password.html b/saas/axops/src/ui/src/app/views/reset-password/reset-password.html
index 62a49b027c26..e0ea9e4d78de 100644
--- a/saas/axops/src/ui/src/app/views/reset-password/reset-password.html
+++ b/saas/axops/src/ui/src/app/views/reset-password/reset-password.html
@@ -1,30 +1,35 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg">
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box setup__box--reset-password">
+        <div class="setup__header">
+            <h1>{{ 'Reset Your Password' | translate }}</h1>
+        </div>
+        <div class="setup__content setup__content--reset-password">
+            <form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
+                <div class="ax-form-row">
+                    <input id="new_password" type="password" class="ax-field" formControlName="new_password"
+                           autocomplete="off" ax-label-placeholder>
+                    <label for="new_password" class="ax-label-placeholder">{{ 'New Password' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['new_password'].valid && (resetPasswordForm.controls['new_password'].touched || submitted)">
+                        Password should contain at least 8 characters including one uppercase, one lowercase, one number and one special character.<i class="fa fa-warning"></i></div>
+                </div>
+                <div class="ax-form-row">
+                    <input id="confirm_password" type="password" class="ax-field" formControlName="confirm_password"
+                           autocomplete="off" ax-label-placeholder>
+                    <label for="confirm_password" class="ax-label-placeholder">{{ 'Confirm Password' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['confirm_password'].valid && (resetPasswordForm.controls['confirm_password'].touched || submitted)">
+                        Your password and confirmation password do not match.<i class="fa fa-warning"></i></div>
+                </div>
+                <div class="login__form-row">
+                    <button axButtonWave class="ax-button ax-button--base ax-button--full-width setup__btn" type="submit">
+                        {{ 'Submit' | translate }}
+                    </button>
+                </div>
+            </form>
         </div>
-        <form role="form" [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm)">
-            <div class="ax-form-row">
-                <input id="new_password" type="password" class="ax-field" formControlName="new_password"
-                       autocomplete="off" ax-label-placeholder>
-                <label for="new_password" class="ax-label-placeholder">{{ 'New Password' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['new_password'].valid && (resetPasswordForm.controls['new_password'].touched || submitted)">
-                    Password should contain at least 8 characters including one uppercase, one lowercase, one number and one special character.<i class="fa fa-warning"></i></div>
-            </div>
-            <div class="ax-form-row">
-                <input id="confirm_password" type="password" class="ax-field" formControlName="confirm_password"
-                       autocomplete="off" ax-label-placeholder>
-                <label for="confirm_password" class="ax-label-placeholder">{{ 'Confirm Password' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!resetPasswordForm.controls['confirm_password'].valid && (resetPasswordForm.controls['confirm_password'].touched || submitted)">
-                    Your password and confirmation password do not match.<i class="fa fa-warning"></i></div>
-            </div>
-            <div class="login__form-row">
-                <button axButtonWave class="ax-button ax-button--base ax-button--full-width ax-button--xlg" type="submit">
-                    {{ 'Reset password' | translate }}
-                </button>
-            </div>
-            <div class="login__more-row">
-                <a [routerLink]="['/login']">{{ 'Back to login' | translate }}</a>
-            </div>
-        </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html b/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
index 60c700e8d1c0..2d8670d3c176 100644
--- a/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
+++ b/saas/axops/src/ui/src/app/views/setup/email-confirmation/email-confirmation.html
@@ -1,10 +1,23 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg"></div>
-        <h4>Thanks for joining Argo!</h4>
-        <h6>Check your email and click the link to set up your new account.</h6>
-        <div class="login__more-row">
-            <a routerLink="/login">{{ 'Go to Login' | translate }}</a>
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box setup__box--setup-confirm">
+        <div class="setup__header">
+            <h1>{{ 'Thanks for joining Argo!' | translate }}</h1>
+        </div>
+        <div class="setup__content setup__content--setup-confirm">
+            <p>
+                {{ 'Check your email and click the link to set up your new account.' | translate }}
+            </p>
+
+            <div class="setup__btn-center setup__btn-center--additional-top-margin">
+                <a axButtonWave class="ax-button ax-button--base setup__btn" routerLink="/login">
+                    {{ 'Go to Login' | translate }}
+                </a>
+            </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/saas/axops/src/ui/src/app/views/setup/setup.component.ts b/saas/axops/src/ui/src/app/views/setup/setup.component.ts
index ada9ce4b6890..cf883d5e3c61 100644
--- a/saas/axops/src/ui/src/app/views/setup/setup.component.ts
+++ b/saas/axops/src/ui/src/app/views/setup/setup.component.ts
@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'ax-setup',
     templateUrl: './setup.html',
+    styles: [ require('./setup.scss') ],
 })
 export class SetupComponent {
 }
diff --git a/saas/axops/src/ui/src/app/views/setup/setup.scss b/saas/axops/src/ui/src/app/views/setup/setup.scss
new file mode 100644
index 000000000000..3e06a670eda6
--- /dev/null
+++ b/saas/axops/src/ui/src/app/views/setup/setup.scss
@@ -0,0 +1,156 @@
+@import '../../../assets/styles/config';
+
+$logoWhitePath: 'assets/styles/icons/argologo-white.svg';
+$logoProPath: 'assets/styles/icons/ArgoPro.svg';
+$logoNegativePath: 'assets/styles/icons/argo.png';
+
+$setup-box-content-shadow: 3px 3px 20px black;
+
+.setup {
+    min-height:100vh;
+    background-position: 15rem;
+    background-size: cover;
+    background: linear-gradient(to top left,
+            rgba(122, 139, 207, 0.8) 0%,
+            rgba(46, 50, 90, 0.8) 100%),
+    url("assets/styles/icons/stars.gif");
+    display: flex;
+
+    &__logo {
+        background-image: url($logoNegativePath);
+        background-repeat: no-repeat;
+        background-size: contain;
+        margin: auto;
+        height: 260px;
+        width: 150px;
+        position: absolute;
+        left: 47px;
+    }
+
+    &__shortcut {
+        .logo {
+            position: absolute;
+            top: 27px;
+            left: 76px;
+            height: 22px;
+            width: 63px;
+            background-size: contain;
+            background-image: url($logoWhitePath);
+            background-repeat: no-repeat;
+        }
+
+        .argo {
+            position: absolute;
+            top: 20px;
+            left: 40px;
+            height: 30px;
+            width: 30px;
+            background-size: contain;
+            background-image: url($logoProPath);
+            background-repeat: no-repeat;
+        }
+    }
+
+    &__box {
+        margin: auto auto 50px auto;
+
+        &--welcome {
+            margin-top: 50px;
+        }
+
+        &--forgot-password, &--reset-password, &--setup-confirm, &--forgot-password-confirm, &--reset-password-confirm {
+            margin-top: 130px;
+        }
+    }
+
+    &__header {
+        position: relative;
+
+        h1 {
+            line-height: 80px;
+            font-size: 35px;
+            font-weight: 300;
+            color: white;
+            text-align: center;
+            margin-bottom: 0;
+        }
+    }
+
+    &__content {
+        background-color: white;
+        display: block;
+        border-radius: 8px;
+        padding: 50px 60px;
+        border: 1px solid black;
+        box-shadow: $setup-box-content-shadow;
+        z-index: 1;
+        position: relative;
+
+        p {
+            font-size: 15px;
+            color: $ax-color-gray-6;
+        }
+
+        form {
+            padding: 0 20px;
+        }
+
+        &--forgot-password, &--reset-password, &--welcome {
+            width: 500px;
+        }
+
+        &--setup-confirm {
+            width: 540px;
+        }
+
+        &--forgot-password-confirm, &--reset-password-confirm {
+            width: 635px;
+        }
+    }
+
+    &__title {
+        color: #f27f53;
+        font-size: 26px;
+    }
+
+    &__btn-center {
+        text-align: center;
+
+        &--additional-top-margin {
+            margin-top: 40px;
+        }
+    }
+
+    &__welcome-text {
+        color: white;
+        font-size: 47px;
+        font-weight: 300;
+        line-height: 142px;
+        padding-left: 220px;
+    }
+
+    &__back-btn {
+        margin-bottom: 30px;
+
+        a {
+            font-size: 14px;
+            font-weight: 500;
+            color: $ax-color-gray-6;
+
+            &:hover {
+                color: $ax-color-gray-5;
+            }
+        }
+
+        i {
+            padding-right: 2px;
+            font-size: 20px;
+        }
+    }
+
+    &__btn {
+        padding: 10px 40px;
+        border-radius: 20px;
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html b/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
index b426905b6b65..bcaf17b7cf1a 100644
--- a/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
+++ b/saas/axops/src/ui/src/app/views/setup/sign-up/sign-up.html
@@ -1,43 +1,67 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg"></div>
-        <div>
-            <h4> Welcome to Argo </h4>
-            <div>Create your Argo account</div>
-        </div>
-        <form role="form" [formGroup]="signupForm">
-            <div class="ax-form-row" *ngIf="!isSingleUser">
-                <input id="username" type="email" class="ax-field" formControlName="username" autocomplete="off" ax-label-placeholder>
-                <label for="username" class="ax-label-placeholder">{{ 'Email' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">Email is wrong<i class="fa fa-warning"></i></div>
-            </div>
-            <div class="ax-form-row" *ngIf="!isSingleUser">
-                <input id="first_name" type="text" class="ax-field" formControlName="first_name" autocomplete="off" ax-label-placeholder>
-                <label for="first_name" class="ax-label-placeholder">{{ 'First Name' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['first_name'].valid && signupForm.controls['first_name'].touched">First name is wrong<i class="fa fa-warning"></i></div>
-            </div>
-            <div class="ax-form-row" *ngIf="!isSingleUser">
-                <input id="last_name" type="text" class="ax-field" formControlName="last_name" autocomplete="off" ax-label-placeholder>
-                <label for="last_name" class="ax-label-placeholder">{{ 'Last Name' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['last_name'].valid && signupForm.controls['last_name'].touched">Last name is wrong<i class="fa fa-warning"></i></div>
-            </div>
-            <div class="ax-form-row">
-                <input id="password" type="password" class="ax-field" formControlName="password" autocomplete="off" ax-label-placeholder>
-                <label for="password" class="ax-label-placeholder">{{ 'Password' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
-                    {{ 'Password should contain at least 8 characters including one uppercase, one lowercase, one number and one special character' | translate }}.<i class="fa fa-warning"></i></div>
-            </div>
-            <div class="ax-form-row">
-                <input id="repeat_password" type="password" class="ax-field" formControlName="repeat_password" autocomplete="off" ax-label-placeholder>
-                <label for="repeat_password" class="ax-label-placeholder">{{ 'Re-enter Password' | translate }}</label>
-                <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['repeat_password'].valid && signupForm.controls['repeat_password'].touched">Password is wrong<i class="fa fa-warning"></i></div>
-                <div class="ax-form-row__error-msg" *ngIf="signupForm.errors && signupForm.errors.mismatchedPasswords && signupForm.controls['repeat_password'].touched">Your password and confirmation password do not match.<i class="fa fa-warning"></i></div>
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box setup__box--welcome">
+        <div class="setup__header">
+            <div class="setup__logo"></div>
+            <div class="setup__welcome-text">
+                {{ 'Welcome!' | translate }}
             </div>
-            <div class="ax-form-row">
-                <button axButtonWave class="ax-button ax-button--base" type="submit" (click)="createAccount(signupForm)" [disabled]="!signupForm.valid">
-                     {{ 'Create' | translate }}
-                </button>
+        </div>
+        <div class="setup__content setup__content--welcome">
+            <div class="setup__title">
+                {{ 'Create Your Account Password' | translate }}
             </div>
-        </form>
+
+            <form role="form" [formGroup]="signupForm">
+                <div class="ax-form-row" *ngIf="!isSingleUser">
+                    <input id="username" type="email" class="ax-field" formControlName="username" autocomplete="off" ax-label-placeholder>
+                    <label for="username" class="ax-label-placeholder">{{ 'Email' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['username'].valid && signupForm.controls['username'].touched">
+                        Emailis wrong<i class="fa fa-warning"></i>
+                    </div>
+                </div>
+                <div class="ax-form-row" *ngIf="!isSingleUser">
+                    <input id="first_name" type="text" class="ax-field" formControlName="first_name" autocomplete="off" ax-label-placeholder>
+                    <label for="first_name" class="ax-label-placeholder">{{ 'First Name' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['first_name'].valid && signupForm.controls['first_name'].touched">
+                        First name is wrong<i class="fa fa-warning"></i>
+                    </div>
+                </div>
+                <div class="ax-form-row" *ngIf="!isSingleUser">
+                    <input id="last_name" type="text" class="ax-field" formControlName="last_name" autocomplete="off" ax-label-placeholder>
+                    <label for="last_name" class="ax-label-placeholder">{{ 'Last Name' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['last_name'].valid && signupForm.controls['last_name'].touched">
+                        Last name is wrong<i class="fa fa-warning"></i>
+                    </div>
+                </div>
+                <div class="ax-form-row">
+                    <input id="password" type="password" class="ax-field" formControlName="password" autocomplete="off" ax-label-placeholder>
+                    <label for="password" class="ax-label-placeholder">{{ 'Password' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['password'].valid && signupForm.controls['password'].touched">
+                        {{ 'Password should contain at least 8 characters including one uppercase, one lowercase, one
+                        number and one special character' | translate }}.<i class="fa fa-warning"></i>
+                    </div>
+                </div>
+                <div class="ax-form-row">
+                    <input id="repeat_password" type="password" class="ax-field" formControlName="repeat_password" autocomplete="off" ax-label-placeholder>
+                    <label for="repeat_password" class="ax-label-placeholder">{{ 'Confirm Password' | translate }}</label>
+                    <div class="ax-form-row__error-msg" *ngIf="!signupForm.controls['repeat_password'].valid && signupForm.controls['repeat_password'].touched">
+                        Password is wrong<i class="fa fa-warning"></i>
+                    </div>
+                    <div class="ax-form-row__error-msg" *ngIf="signupForm.errors && signupForm.errors.mismatchedPasswords && signupForm.controls['repeat_password'].touched">
+                        Your password and confirmation password do not match.<i class="fa fa-warning"></i>
+                    </div>
+                </div>
+                <div class="ax-form-row">
+                    <button axButtonWave class="ax-button ax-button--base ax-button--full-width setup__btn" type="submit" (click)="createAccount(signupForm)" [disabled]="!signupForm.valid">
+                        {{ 'Create' | translate }}
+                    </button>
+                </div>
+            </form>
+        </div>
     </div>
 </div>
diff --git a/saas/axops/src/ui/src/assets/styles/icons/ArgoPro.svg b/saas/axops/src/ui/src/assets/styles/icons/ArgoPro.svg
new file mode 100644
index 000000000000..482a9f323f7b
--- /dev/null
+++ b/saas/axops/src/ui/src/assets/styles/icons/ArgoPro.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="337px" height="318px" viewBox="0 0 337 318" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard 7</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-2.1%" y="-1.6%" width="104.3%" height="104.4%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M153.435181,307.210565 C68.7791506,307.210565 0.151374494,238.582789 0.151374494,153.92598 C0.151374494,69.269171 68.7791506,0.641394912 153.435181,0.641394912 C238.09199,0.641394912 306.719766,69.269171 306.719766,153.92598 C306.719766,238.582789 238.09199,307.210565 153.435181,307.210565 Z" id="path-2"></path>
+        <polygon id="path-4" points="306.719766 0.641628515 306.719766 307.210565 0.151374494 307.210565 0.151374494 0.641628515"></polygon>
+        <polygon id="path-6" points="154.436873 197.745812 161.986494 0.746770349 0.514618337 0.746770349 7.48483841 197.745812"></polygon>
+        <polygon id="path-8" points="15.2743666 0.620984563 15.2743666 80.947346 -0.00026481218 80.947346 -0.00026481218 0.620984563 15.2743666 0.620984563"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-7">
+            <g id="Group-11" filter="url(#filter-1)" transform="translate(4.000000, 3.000000)">
+                <g id="Page-1" transform="translate(0.636640, 0.874370)">
+                    <g id="Group-20" transform="translate(9.599884, 0.155356)">
+                        <g id="Group-7" transform="translate(0.490764, 0.490764)">
+                            <g id="Fill-8">
+                                <mask id="mask-3" fill="white">
+                                    <use xlink:href="#path-2"></use>
+                                </mask>
+                                <use id="Mask" fill="#725DB1" xlink:href="#path-2"></use>
+                                <path d="M152.957608,297.253763 C73.8000011,297.253763 9.62983605,233.083598 9.62983605,153.925991 C9.62983605,74.7683838 73.8000011,10.5989754 152.957608,10.5989754 C232.115215,10.5989754 296.284624,74.7683838 296.284624,153.925991 C296.284624,233.083598 232.115215,297.253763 152.957608,297.253763 Z" fill="#DAF6FF" mask="url(#mask-3)"></path>
+                            </g>
+                            <mask id="mask-5" fill="white">
+                                <use xlink:href="#path-4"></use>
+                            </mask>
+                            <g id="Clip-6"></g>
+                        </g>
+                        <path d="M234.678566,122.176497 C234.678566,166.87238 198.445198,203.105748 153.748433,203.105748 C109.052551,203.105748 72.8191826,166.87238 72.8191826,122.176497 C72.8191826,77.4806149 109.052551,41.2463642 153.748433,41.2463642 C198.445198,41.2463642 234.678566,77.4806149 234.678566,122.176497" id="Fill-18" fill="#F1784A"></path>
+                    </g>
+                    <g id="Group-23" transform="translate(82.292222, 120.049349)">
+                        <mask id="mask-7" fill="white">
+                            <use xlink:href="#path-6"></use>
+                        </mask>
+                        <g id="Clip-22"></g>
+                        <path d="M240.637493,29.0200986 C240.637493,116.672644 169.580893,187.729244 81.9283472,187.729244 C-5.72517852,187.729244 -76.7817783,116.672644 -76.7817783,29.0200986 C-76.7817783,-58.6324471 -5.72517852,-129.689047 81.9283472,-129.689047 C169.580893,-129.689047 240.637493,-58.6324471 240.637493,29.0200986" id="Fill-21" fill="#F1784A" mask="url(#mask-7)"></path>
+                    </g>
+                    <g id="Group-55" transform="translate(0.000000, 68.453254)">
+                        <path d="M141.315944,11.7022291 C141.315944,17.8688221 136.31629,22.8675933 130.150579,22.8675933 C123.983986,22.8675933 118.984332,17.8688221 118.984332,11.7022291 C118.984332,5.53563614 123.983986,0.536864875 130.150579,0.536864875 C136.31629,0.536864875 141.315944,5.53563614 141.315944,11.7022291" id="Fill-26"></path>
+                        <path d="M192.691802,174.442731 C192.691802,202.466922 179.432656,220.010728 163.077856,220.010728 C146.722173,220.010728 133.463909,199.879707 133.463909,171.855516 C133.463909,171.855516 146.845752,197.004729 163.201435,197.004729 C179.556235,197.004729 192.691802,174.442731 192.691802,174.442731" id="Fill-28" fill="#010202"></path>
+                        <path d="M192.691802,173.441918 C192.691802,190.62558 179.432656,201.381368 163.077856,201.381368 C146.722173,201.381368 133.463909,189.038472 133.463909,171.855693 C133.463909,171.855693 146.845752,187.275706 163.201435,187.275706 C179.556235,187.275706 192.691802,173.441918 192.691802,173.441918" id="Fill-30" fill="#FEFEFE"></path>
+                        <path d="M268.848607,100.489693 C268.848607,127.538492 246.922158,149.46494 219.874242,149.46494 C192.825444,149.46494 170.898112,127.538492 170.898112,100.489693 C170.898112,73.440894 192.825444,51.5144454 219.874242,51.5144454 C246.922158,51.5144454 268.848607,73.440894 268.848607,100.489693" id="Fill-32" fill="#F1784A"></path>
+                        <path d="M155.257334,100.150115 C155.257334,127.198914 133.330885,149.125363 106.282087,149.125363 C79.2341705,149.125363 57.3068392,127.198914 57.3068392,100.150115 C57.3068392,73.1013165 79.2341705,51.1748679 106.282087,51.1748679 C133.330885,51.1748679 155.257334,73.1013165 155.257334,100.150115" id="Fill-34" fill="#F1784A"></path>
+                        <path d="M258.027675,100.725905 C258.027675,121.983262 240.795464,139.215473 219.538107,139.215473 C198.280751,139.215473 181.04854,121.983262 181.04854,100.725905 C181.04854,79.4685488 198.280751,62.2363375 219.538107,62.2363375 C240.795464,62.2363375 258.027675,79.4685488 258.027675,100.725905" id="Fill-36" fill="#FEFEFE"></path>
+                        <path d="M144.817908,100.42808 C144.817908,121.84962 127.452408,139.21512 106.030868,139.21512 C84.6084454,139.21512 67.2429453,121.84962 67.2429453,100.42808 C67.2429453,79.0065398 84.6084454,61.6410397 106.030868,61.6410397 C127.452408,61.6410397 144.817908,79.0065398 144.817908,100.42808" id="Fill-38" fill="#FEFEFE"></path>
+                        <path d="M117.476845,93.6806655 C117.476845,100.24889 112.152355,105.57338 105.58413,105.57338 C99.0159052,105.57338 93.6914149,100.24889 93.6914149,93.6806655 C93.6914149,87.1124407 99.0159052,81.7879504 105.58413,81.7879504 C112.152355,81.7879504 117.476845,87.1124407 117.476845,93.6806655" id="Fill-40" fill="#010202"></path>
+                        <path d="M232.542945,93.6806655 C232.542945,100.24889 227.219338,105.57338 220.65023,105.57338 C214.082888,105.57338 208.758398,100.24889 208.758398,93.6806655 C208.758398,87.1124407 214.082888,81.7879504 220.65023,81.7879504 C227.219338,81.7879504 232.542945,87.1124407 232.542945,93.6806655" id="Fill-42" fill="#010202"></path>
+                        <path d="M9.09559223,119.302833 L6.17912742,119.302833 C2.78070444,119.302833 0.000176541455,116.522305 0.000176541455,113.123882 L0.000176541455,45.1554223 C0.000176541455,41.7569993 2.78070444,38.9764714 6.17912742,38.9764714 L9.09559223,38.9764714 C12.4940152,38.9764714 15.2745431,41.7569993 15.2745431,45.1554223 L15.2745431,113.123882 C15.2745431,116.522305 12.4940152,119.302833 9.09559223,119.302833" id="Fill-44" fill="#725DB1"></path>
+                        <g id="Group-48" transform="translate(311.044155, 38.355487)">
+                            <mask id="mask-9" fill="white">
+                                <use xlink:href="#path-8"></use>
+                            </mask>
+                            <g id="Clip-47"></g>
+                            <path d="M9.09603359,80.947346 L6.17868607,80.947346 C2.78114579,80.947346 -0.00026481218,78.1668181 -0.00026481218,74.7683951 L-0.00026481218,6.79993544 C-0.00026481218,3.40151246 2.78114579,0.620984563 6.17868607,0.620984563 L9.09603359,0.620984563 C12.4944566,0.620984563 15.2749845,3.40151246 15.2749845,6.79993544 L15.2749845,74.7683951 C15.2749845,78.1668181 12.4944566,80.947346 9.09603359,80.947346" id="Fill-46" fill="#725DB1" mask="url(#mask-9)"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/saas/axops/src/ui/src/assets/styles/icons/argologo-white.svg b/saas/axops/src/ui/src/assets/styles/icons/argologo-white.svg
new file mode 100644
index 000000000000..eb834c74995a
--- /dev/null
+++ b/saas/axops/src/ui/src/assets/styles/icons/argologo-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 969.97 386.5"><defs><style>.cls-1{fill:#ffffff;stroke:#ffffff;stroke-miterlimit:10;stroke-width:10px;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M254.5,132.5v98c0,14.5-10.5,25-25,25-10,0-24-10.5-24-25-21.5,18-45.5,25-74,25C61,255.5,5,203,5,132.5S61,6,131.5,6,254.5,62,254.5,132.5Zm-49,0c0-42-32-77.5-74-77.5S54,90.5,54,132.5s35.5,74,77.5,74S205.5,174.5,205.5,132.5Z"/><path class="cls-1" d="M435,30a25.07,25.07,0,0,1-25,25,76,76,0,0,0-76,76V231.5c0,13.5-11,25-24.5,25a25.07,25.07,0,0,1-25-25V131A125.58,125.58,0,0,1,410,5.5,24.65,24.65,0,0,1,435,30Z"/><path class="cls-1" d="M684.48,256c0,69-56.5,125.5-125.5,125.5-48.5,0-91.5-27-113-70.5a24.44,24.44,0,0,1,11.5-33,24.82,24.82,0,0,1,33,11c13,26.5,39,43,68.5,43,41.5,0,75-33.5,76-74.5V230c-21.5,16-47.5,26-76,26a125.5,125.5,0,1,1,125.5-125.5ZM635,130.5c0-42-34.5-76-76-76a76,76,0,0,0-76,76c0,41.5,34,76,76,76C600.48,206.5,635,172,635,130.5Z"/><path class="cls-1" d="M714,130.5A125.5,125.5,0,1,1,839.47,256C770.47,256,714,199.5,714,130.5Zm49.5,0c0,41.5,34,76,76,76s76-34.5,76-76a76,76,0,0,0-152,0Z"/></g></g></svg>
\ No newline at end of file