diff --git a/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap b/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap
index 46f96c97..c6cfc5c5 100644
--- a/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap
+++ b/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap
@@ -168,163 +168,165 @@ exports[`EditPassword Component Should render 1`] = `
     }
   }
 >
-  <div
-    className="col-5"
+  <Row
+    bsClass="row"
+    className="mb-3"
+    componentClass="div"
   >
-    <Row
-      bsClass="row"
-      className="mb-3"
-      componentClass="div"
+    <div
+      className="mb-3 row"
     >
       <div
-        className="mb-3 row"
+        className="col-sm-2 col-md-3 col-lg-4"
+      />
+      <div
+        className="col-sm-8 col-md-6 col-lg-4"
       >
         <div
-          className="col-sm-12"
+          className="text-dark"
+          style={
+            Object {
+              "marginBottom": "5%",
+              "marginLeft": "-1px",
+              "textAlign": "center",
+            }
+          }
+        >
+          User Credentials
+        </div>
+        <form
+          className="editpasswordForm"
+          noValidate={true}
+          onSubmit={[Function]}
         >
           <div
-            className="text-dark"
-            style={
-              Object {
-                "marginBottom": "5%",
-                "marginLeft": "-1px",
-                "textAlign": "center",
-              }
-            }
-          >
-            User Credentials
-          </div>
-          <form
-            className="editpasswordForm"
-            noValidate={true}
-            onSubmit={[Function]}
+            className="form-row"
           >
             <div
-              className="form-row"
+              className="col mb-3"
             >
               <div
-                className="col mb-3"
+                className=""
               >
+                <label
+                  className="labeltext"
+                >
+                  Old Password
+                </label>
                 <div
-                  className=""
+                  className="input-group-prepend"
                 >
-                  <label
-                    className="labeltext"
-                  >
-                    Old Password
-                  </label>
+                  <input
+                    aria-describedby="inputGroupPrepend"
+                    className="form-control"
+                    id="editValidationOldPassword"
+                    minLength={5}
+                    onChange={[Function]}
+                    required={true}
+                    type="password"
+                    value="oldPassword"
+                  />
                   <div
-                    className="input-group-prepend"
+                    className="invalid-feedback"
                   >
-                    <input
-                      aria-describedby="inputGroupPrepend"
-                      className="form-control"
-                      id="editValidationOldPassword"
-                      minLength={5}
-                      onChange={[Function]}
-                      required={true}
-                      type="password"
-                      value="oldPassword"
-                    />
-                    <div
-                      className="invalid-feedback"
-                    >
-                      Password should have minimum 5 characters.
-                    </div>
+                    Password should have minimum 5 characters.
                   </div>
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            className="form-row"
+          >
             <div
-              className="form-row"
+              className="col mb-3"
             >
               <div
-                className="col mb-3"
+                className=""
               >
+                <label
+                  className="labeltext"
+                >
+                  New Password
+                </label>
                 <div
-                  className=""
+                  className="input-group-prepend"
                 >
-                  <label
-                    className="labeltext"
-                  >
-                    New Password
-                  </label>
+                  <input
+                    aria-describedby="inputGroupPrepend"
+                    className="form-control"
+                    id="editValidationPassword"
+                    minLength={5}
+                    onChange={[Function]}
+                    required={true}
+                    type="password"
+                    value="password"
+                  />
                   <div
-                    className="input-group-prepend"
+                    className="invalid-feedback"
                   >
-                    <input
-                      aria-describedby="inputGroupPrepend"
-                      className="form-control"
-                      id="editValidationPassword"
-                      minLength={5}
-                      onChange={[Function]}
-                      required={true}
-                      type="password"
-                      value="password"
-                    />
-                    <div
-                      className="invalid-feedback"
-                    >
-                      Password should have minimum 5 characters.
-                    </div>
+                    Password should have minimum 5 characters.
                   </div>
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            className="form-row"
+          >
             <div
-              className="form-row"
+              className="col mb-3"
             >
               <div
-                className="col mb-3"
+                className=""
               >
+                <label
+                  className="labeltext"
+                >
+                  Confirm Password
+                </label>
                 <div
-                  className=""
+                  className="input-group-prepend"
                 >
-                  <label
-                    className="labeltext"
-                  >
-                    Confirm Password
-                  </label>
+                  <input
+                    aria-describedby="inputGroupPrepend"
+                    className="form-control"
+                    id="editValidationRepeatPassword"
+                    minLength={5}
+                    onChange={[Function]}
+                    required={true}
+                    type="password"
+                    value="repeatPassword"
+                  />
                   <div
-                    className="input-group-prepend"
+                    className="invalid-feedback"
                   >
-                    <input
-                      aria-describedby="inputGroupPrepend"
-                      className="form-control"
-                      id="editValidationRepeatPassword"
-                      minLength={5}
-                      onChange={[Function]}
-                      required={true}
-                      type="password"
-                      value="repeatPassword"
-                    />
-                    <div
-                      className="invalid-feedback"
-                    >
-                      Passwords should match.
-                    </div>
+                    Passwords should match.
                   </div>
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            className="form-row"
+          >
             <div
-              className="form-row"
+              className="col-12 text-center"
             >
-              <div
-                className="col-12 text-center"
+              <button
+                className="btn btn-success"
+                type="submit"
               >
-                <button
-                  className="btn btn-success"
-                  type="submit"
-                >
-                  Save Changes
-                </button>
-              </div>
+                Save Changes
+              </button>
             </div>
-          </form>
-        </div>
+          </div>
+        </form>
       </div>
-    </Row>
-  </div>
+      <div
+        className="col-sm-2 col-md-3 col-lg-4"
+      />
+    </div>
+  </Row>
 </EditPassword>
 `;
diff --git a/server/app.js b/server/app.js
new file mode 100644
index 00000000..491b7669
--- /dev/null
+++ b/server/app.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.use(express.static(path.join(__dirname, '..', 'build')));
+
+app.get('/*', (req, res) => {
+  res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
+});
+
+app.listen(5000);
+console.log('Server is listening on http://localhost:5000');
\ No newline at end of file
diff --git a/server/package.json b/server/package.json
new file mode 100644
index 00000000..a027524d
--- /dev/null
+++ b/server/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "codecharacter-web",
+    "version": "1.0.0",
+    "description": "Simple webserver to run prod version of Codecharacter",
+    "main": "app.js",
+    "scripts": {
+        "start": "node app.js"
+    },
+    "author": "Delta",
+    "license": "ISC",
+    "dependencies": {
+        "express": "^4.17.1"
+    }
+}
diff --git a/src/app/components/Authentication/Login.tsx b/src/app/components/Authentication/Login.tsx
index 9873af1b..818807c0 100644
--- a/src/app/components/Authentication/Login.tsx
+++ b/src/app/components/Authentication/Login.tsx
@@ -90,7 +90,8 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
         </div>
 
         <Row className={classnames(styles.no_margin)}>
-          <div className={classnames('col-sm-10 offset-sm-1', styles.form)}>
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
+          <div className={classnames('col-sm-8 col-md-6 col-lg-4', styles.form)}>
             <form
               className={classnames(styles.loginForm)}
               noValidate
@@ -200,6 +201,7 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
               </div>
             </form>
           </div>
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
         </Row>
         <Row className={classnames(styles.no_margin)}>
           <Col className="text-center my-3 ml-auto mr-auto">
diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx
index 342ab405..7a3e2cb0 100644
--- a/src/app/components/Authentication/Register.tsx
+++ b/src/app/components/Authentication/Register.tsx
@@ -125,94 +125,319 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
           <h1 className={classnames(authStyles['register-h1'])}> Register to CodeCharacter! </h1>
           <p> Register now and code your way through!! </p>
         </div>
-        <div className={classnames('col-sm-12', authStyles.form)}>
-          <form
-            className={classnames(
-              'registerForm d-flex flex-wrap',
-              authStyles['main-register-form'],
-            )}
-            noValidate
-            ref={this.registerFormRef}
-          >
-            {currentStep === RegisterInterfaces.Steps.USER_DETAILS && (
-              <div className={classnames(authStyles['stage-div'])}>
-                <form
-                  className={classnames(authStyles['stage-form'])}
-                  noValidate
-                  ref={this.userDetailsFormRef}
-                >
-                  <div className={classnames(authStyles['login-section1'])}>
-                    <div className={classnames(authStyles['login-label'])}> Full Name </div>
+        <div className="row">
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
+          <div className={classnames('col-sm-8 col-md-6 col-lg-4', authStyles.form)}>
+            <form
+              className={classnames(
+                'registerForm d-flex flex-wrap',
+                authStyles['main-register-form'],
+              )}
+              noValidate
+              ref={this.registerFormRef}
+            >
+              {currentStep === RegisterInterfaces.Steps.USER_DETAILS && (
+                <div className={classnames(authStyles['stage-div'])}>
+                  <form
+                    className={classnames(authStyles['stage-form'])}
+                    noValidate
+                    ref={this.userDetailsFormRef}
+                  >
+                    <div className={classnames(authStyles['login-section1'])}>
+                      <div className={classnames(authStyles['login-label'])}> Full Name </div>
+                      <div className={classnames(registerStyles['input-group'])}>
+                        <input
+                          type="text"
+                          className={classnames('form-control', authStyles['register-input'])}
+                          id="registerValidationFullname"
+                          aria-describedby="inputGroupPrepend"
+                          pattern=".{5,50}"
+                          value={fullName}
+                          onChange={(e) =>
+                            this.setState({
+                              fullName: e.target.value,
+                            })
+                          }
+                          required
+                        />
+                        <div
+                          className={classnames('invalid-feedback', authStyles['register-error'])}
+                        >
+                          Name must have minimum 5 characters.
+                        </div>
+                      </div>
+                      <div className={classnames(authStyles['login-label'])}> Username </div>
+                      <div className={classnames(registerStyles['input-group'])}>
+                        <input
+                          type="text"
+                          className={classnames('form-control', authStyles['register-input'])}
+                          id="registerValidationUsername"
+                          aria-describedby="inputGroupPrepend"
+                          pattern="[a-zA-Z0-9]{5,50}"
+                          value={username}
+                          onChange={(e) => {
+                            checkUsernameExists(e.target.value);
+                            this.setState({
+                              username: e.target.value,
+                            });
+                          }}
+                          required
+                        />
+                        <div
+                          className={classnames('invalid-feedback', authStyles['register-error'])}
+                        >
+                          Enter a valid username. It should have a minimum of 5 characters and must
+                          be alphanumeric
+                        </div>
+                      </div>
+                      <div className={classnames(authStyles['login-label'])}>Email </div>
+                      <div className={classnames(registerStyles['input-group'])}>
+                        <input
+                          type="email"
+                          className={classnames('form-control', authStyles['register-input'])}
+                          id="registerValidationEmail"
+                          aria-describedby="inputGroupPrepend"
+                          value={email}
+                          onChange={(e) => {
+                            const registerForm = this.registerFormRef.current;
+                            if (registerForm && registerForm.checkValidity()) {
+                              checkEmailExists(e.target.value);
+                            }
+                            this.setState({
+                              email: e.target.value,
+                            });
+                          }}
+                          required
+                        />
+                        <div
+                          className={classnames('invalid-feedback', authStyles['register-error'])}
+                        >
+                          Please enter a valid Email ID.
+                        </div>
+                      </div>
+
+                      <div
+                        className={
+                          !errorMessage
+                            ? classnames(
+                                'col text-center mt -0 mb-2 ',
+                                authStyles['register-error-inactive'],
+                                registerStyles.errorMessage,
+                              )
+                            : classnames(
+                                'col text-center mt -0 mb-2 errorMessage',
+                                authStyles['register-error-active'],
+                                registerStyles.errorMessage,
+                              )
+                        }
+                      >
+                        {errorMessage}
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              )}
+              {currentStep === RegisterInterfaces.Steps.CREDENTIALS && (
+                <div className={classnames(authStyles['stage-div'])}>
+                  <form
+                    className={classnames(authStyles['stage-form'])}
+                    noValidate
+                    ref={this.credentialsFormRef}
+                  >
+                    <div className={classnames(authStyles['login-label'])}> Password </div>
                     <div className={classnames(registerStyles['input-group'])}>
                       <input
-                        type="text"
+                        type="password"
                         className={classnames('form-control', authStyles['register-input'])}
-                        id="registerValidationFullname"
+                        id="registerValidationPassword"
                         aria-describedby="inputGroupPrepend"
-                        pattern=".{5,50}"
-                        value={fullName}
+                        pattern=".{5,}"
+                        value={password}
                         onChange={(e) =>
                           this.setState({
-                            fullName: e.target.value,
+                            password: e.target.value,
                           })
                         }
                         required
                       />
                       <div className={classnames('invalid-feedback', authStyles['register-error'])}>
-                        Name must have minimum 5 characters.
+                        Password should have minimum 5 characters.
                       </div>
                     </div>
-                    <div className={classnames(authStyles['login-label'])}> Username </div>
+                    <div className={classnames(authStyles['login-label'])}> Confirm Password </div>
                     <div className={classnames(registerStyles['input-group'])}>
                       <input
-                        type="text"
+                        type="password"
                         className={classnames('form-control', authStyles['register-input'])}
-                        id="registerValidationUsername"
+                        id="registerValidationrepeatPassword"
                         aria-describedby="inputGroupPrepend"
-                        pattern="[a-zA-Z0-9]{5,50}"
-                        value={username}
-                        onChange={(e) => {
-                          checkUsernameExists(e.target.value);
+                        pattern=".{5,}"
+                        value={repeatPassword}
+                        onChange={(e) =>
                           this.setState({
-                            username: e.target.value,
-                          });
-                        }}
+                            repeatPassword: e.target.value,
+                          })
+                        }
                         required
                       />
-                      <div className={classnames('invalid-feedback', authStyles['register-error'])}>
-                        Enter a valid username. It should have a minimum of 5 characters and must be
-                        alphanumeric
+                    </div>
+
+                    <div
+                      className={classnames('form-row', authStyles['register-error-inactive'])}
+                      ref={this.passwordErrorDivRef}
+                    >
+                      <div
+                        className={classnames(
+                          'col text-center mt -0 mb-2 errorMessage',
+                          registerStyles.errorMessage,
+                        )}
+                      >
+                        Password and confirm passwords have different values
                       </div>
                     </div>
-                    <div className={classnames(authStyles['login-label'])}>Email </div>
-                    <div className={classnames(registerStyles['input-group'])}>
-                      <input
-                        type="email"
-                        className={classnames('form-control', authStyles['register-input'])}
-                        id="registerValidationEmail"
-                        aria-describedby="inputGroupPrepend"
-                        value={email}
-                        onChange={(e) => {
-                          const registerForm = this.registerFormRef.current;
-                          if (registerForm && registerForm.checkValidity()) {
-                            checkEmailExists(e.target.value);
+                  </form>
+                </div>
+              )}
+              {currentStep === RegisterInterfaces.Steps.OTHERS && (
+                <div className={classnames(authStyles['stage-div'])}>
+                  <form
+                    className={classnames(authStyles['stage-form'])}
+                    noValidate
+                    ref={this.otherDetailsFormRef}
+                  >
+                    <div className="text-center text-dark">
+                      Are you a student ?{' '}
+                      <span>
+                        <input
+                          type="checkbox"
+                          id="switch"
+                          className={classnames(registerStyles['checkbox-input'])}
+                          checked={isStudent}
+                          onChange={() =>
+                            this.setState({
+                              isStudent: !isStudent,
+                              userType:
+                                userType === UserType.STUDENT
+                                  ? UserType.PROFESSIONAL
+                                  : UserType.STUDENT,
+                            })
                           }
-                          this.setState({
-                            email: e.target.value,
-                          });
-                        }}
-                        required
+                        />
+                        <label htmlFor="switch" className={classnames(registerStyles.flaglabel)}>
+                          Toggle
+                        </label>
+                      </span>
+                    </div>
+                    {isStudent && (
+                      <div>
+                        <div className={classnames(authStyles['login-label'])}> College Name </div>
+                        <div className={classnames(registerStyles['input-group'])}>
+                          <input
+                            type="text"
+                            className={classnames('form-control', authStyles['register-input'])}
+                            id="collegeNameValidation"
+                            aria-describedby="inputGroupPrepend"
+                            pattern=".{5,50}|[a-zA-Z0-9\s]+"
+                            value={collegeName}
+                            onChange={(e) =>
+                              this.setState({
+                                collegeName: e.target.value,
+                              })
+                            }
+                            required
+                          />
+                          <div
+                            className={classnames('invalid-feedback', authStyles['register-error'])}
+                          >
+                            College Name should have minimum 5 characters.
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                    <div className={classnames(authStyles['login-label'])}> Your country </div>
+                    <div className={classnames(registerStyles['input-group'])}>
+                      <ReactFlagsSelect
+                        selected="IN"
+                        searchable={true}
+                        placeholder="Search for a country"
+                        onSelect={this.onSelectFlag}
                       />
+
                       <div className={classnames('invalid-feedback', authStyles['register-error'])}>
-                        Please enter a valid Email ID.
+                        Please Select a country
+                      </div>
+                    </div>
+                    <div
+                      className={classnames('form-row', authStyles['avatar-select-form-row'])}
+                      style={{ padding: '10px 0px', fontFamily: 'Karla' }}
+                    >
+                      <div className={classnames(authStyles['login-label'])}>
+                        Choose your spirit animal
+                      </div>
+                      <div className={classnames(authStyles['avatar-select-container'])}>
+                        <section className={classnames(authStyles['avatar-section'])}>
+                          {avatars.map((avatar: string, index: number) => (
+                            <div
+                              className={
+                                avatar === this.state.avatar
+                                  ? classnames(authStyles['avatar-img-active'])
+                                  : classnames(authStyles['avatar-img'])
+                              }
+                              key={index}
+                              onClick={() => {
+                                this.setState({
+                                  avatar,
+                                });
+                              }}
+                              title={avatar}
+                            >
+                              {
+                                <img
+                                  className={classnames(registerStyles.img)}
+                                  width={50}
+                                  height={50}
+                                  // @ts-ignore
+                                  src={RegisterInterfaces.Avatar[avatar]}
+                                />
+                              }
+                            </div>
+                          ))}
+                        </section>
+                      </div>
+                    </div>
+                    <div
+                      className={classnames(
+                        registerStyles['input-group'],
+                        'd-flex justify-content-center',
+                      )}
+                    >
+                      <div className="form-row d-flex justify-content-center my-1">
+                        <div className="d-flex justify-content-center input-group">
+                          <ReCAPTCHA
+                            sitekey={RECAPTCHA_SITE_KEY}
+                            data-theme={'dark'}
+                            onChange={this.onChange}
+                            ref={this.recaptchaRef}
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className={classnames(
+                          authStyles['register-error-active'],
+                          'invalid-feedback text-center',
+                        )}
+                        style={{
+                          display: !isCaptchaValidated && isFormSubmitted ? 'block' : 'none',
+                        }}
+                      >
+                        Please fill recaptcha.
                       </div>
                     </div>
-
                     <div
                       className={
-                        !errorMessage
+                        errorMessage === ''
                           ? classnames(
-                              'col text-center mt -0 mb-2 ',
+                              'col text-center mt -0 mb-2 errorMessage',
                               authStyles['register-error-inactive'],
                               registerStyles.errorMessage,
                             )
@@ -225,307 +450,96 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
                     >
                       {errorMessage}
                     </div>
-                  </div>
-                </form>
-              </div>
-            )}
-            {currentStep === RegisterInterfaces.Steps.CREDENTIALS && (
-              <div className={classnames(authStyles['stage-div'])}>
-                <form
-                  className={classnames(authStyles['stage-form'])}
-                  noValidate
-                  ref={this.credentialsFormRef}
-                >
-                  <div className={classnames(authStyles['login-label'])}> Password </div>
-                  <div className={classnames(registerStyles['input-group'])}>
-                    <input
-                      type="password"
-                      className={classnames('form-control', authStyles['register-input'])}
-                      id="registerValidationPassword"
-                      aria-describedby="inputGroupPrepend"
-                      pattern=".{5,}"
-                      value={password}
-                      onChange={(e) =>
-                        this.setState({
-                          password: e.target.value,
-                        })
-                      }
-                      required
-                    />
-                    <div className={classnames('invalid-feedback', authStyles['register-error'])}>
-                      Password should have minimum 5 characters.
-                    </div>
-                  </div>
-                  <div className={classnames(authStyles['login-label'])}> Confirm Password </div>
-                  <div className={classnames(registerStyles['input-group'])}>
-                    <input
-                      type="password"
-                      className={classnames('form-control', authStyles['register-input'])}
-                      id="registerValidationrepeatPassword"
-                      aria-describedby="inputGroupPrepend"
-                      pattern=".{5,}"
-                      value={repeatPassword}
-                      onChange={(e) =>
-                        this.setState({
-                          repeatPassword: e.target.value,
-                        })
-                      }
-                      required
-                    />
-                  </div>
-
-                  <div
-                    className={classnames('form-row', authStyles['register-error-inactive'])}
-                    ref={this.passwordErrorDivRef}
-                  >
-                    <div
-                      className={classnames(
-                        'col text-center mt -0 mb-2 errorMessage',
-                        registerStyles.errorMessage,
-                      )}
-                    >
-                      Password and confirm passwords have different values
-                    </div>
-                  </div>
-                </form>
-              </div>
-            )}
-            {currentStep === RegisterInterfaces.Steps.OTHERS && (
-              <div className={classnames(authStyles['stage-div'])}>
-                <form
-                  className={classnames(authStyles['stage-form'])}
-                  noValidate
-                  ref={this.otherDetailsFormRef}
-                >
-                  <div className="text-center text-dark">
-                    Are you a student ?{' '}
-                    <span>
-                      <input
-                        type="checkbox"
-                        id="switch"
-                        className={classnames(registerStyles['checkbox-input'])}
-                        checked={isStudent}
-                        onChange={() =>
-                          this.setState({
-                            isStudent: !isStudent,
-                            userType:
-                              userType === UserType.STUDENT
-                                ? UserType.PROFESSIONAL
-                                : UserType.STUDENT,
-                          })
-                        }
-                      />
-                      <label htmlFor="switch" className={classnames(registerStyles.flaglabel)}>
-                        Toggle
-                      </label>
-                    </span>
-                  </div>
-                  {isStudent && (
-                    <div>
-                      <div className={classnames(authStyles['login-label'])}> College Name </div>
-                      <div className={classnames(registerStyles['input-group'])}>
-                        <input
-                          type="text"
-                          className={classnames('form-control', authStyles['register-input'])}
-                          id="collegeNameValidation"
-                          aria-describedby="inputGroupPrepend"
-                          pattern=".{5,50}|[a-zA-Z0-9\s]+"
-                          value={collegeName}
-                          onChange={(e) =>
-                            this.setState({
-                              collegeName: e.target.value,
-                            })
-                          }
-                          required
-                        />
-                        <div
-                          className={classnames('invalid-feedback', authStyles['register-error'])}
-                        >
-                          College Name should have minimum 5 characters.
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                  <div className={classnames(authStyles['login-label'])}> Your country </div>
-                  <div className={classnames(registerStyles['input-group'])}>
-                    <ReactFlagsSelect
-                      selected="IN"
-                      searchable={true}
-                      placeholder="Search for a country"
-                      onSelect={this.onSelectFlag}
-                    />
-
-                    <div className={classnames('invalid-feedback', authStyles['register-error'])}>
-                      Please Select a country
-                    </div>
-                  </div>
-                  <div
-                    className={classnames('form-row', authStyles['avatar-select-form-row'])}
-                    style={{ padding: '10px 0px', fontFamily: 'Karla' }}
-                  >
-                    <div className={classnames(authStyles['login-label'])}>
-                      Choose your spirit animal
-                    </div>
-                    <div className={classnames(authStyles['avatar-select-container'])}>
-                      <section className={classnames(authStyles['avatar-section'])}>
-                        {avatars.map((avatar: string, index: number) => (
-                          <div
-                            className={
-                              avatar === this.state.avatar
-                                ? classnames(authStyles['avatar-img-active'])
-                                : classnames(authStyles['avatar-img'])
-                            }
-                            key={index}
-                            onClick={() => {
-                              this.setState({
-                                avatar,
-                              });
-                            }}
-                            title={avatar}
-                          >
-                            {
-                              <img
-                                className={classnames(registerStyles.img)}
-                                width={50}
-                                height={50}
-                                // @ts-ignore
-                                src={RegisterInterfaces.Avatar[avatar]}
-                              />
-                            }
-                          </div>
-                        ))}
-                      </section>
-                    </div>
-                  </div>
-                  <div
-                    className={classnames(
-                      registerStyles['input-group'],
-                      'd-flex justify-content-center',
-                    )}
-                  >
-                    <div className="form-row d-flex justify-content-center my-1">
-                      <div className="d-flex justify-content-center input-group">
-                        <ReCAPTCHA
-                          sitekey={RECAPTCHA_SITE_KEY}
-                          data-theme={'dark'}
-                          onChange={this.onChange}
-                          ref={this.recaptchaRef}
-                        />
-                      </div>
-                    </div>
                     <div
                       className={classnames(
-                        authStyles['register-error-active'],
-                        'invalid-feedback text-center',
+                        registerStyles['input-group'],
+                        'd-flex justify-content-center',
                       )}
-                      style={{
-                        display: !isCaptchaValidated && isFormSubmitted ? 'block' : 'none',
-                      }}
                     >
-                      Please fill recaptcha.
+                      <button
+                        onClick={this.handleRegister}
+                        className={classnames(authStyles['register-button'])}
+                      >
+                        Register
+                      </button>
                     </div>
-                  </div>
-                  <div
-                    className={
-                      errorMessage === ''
-                        ? classnames(
-                            'col text-center mt -0 mb-2 errorMessage',
-                            authStyles['register-error-inactive'],
-                            registerStyles.errorMessage,
-                          )
-                        : classnames(
-                            'col text-center mt -0 mb-2 errorMessage',
-                            authStyles['register-error-active'],
-                            registerStyles.errorMessage,
-                          )
-                    }
-                  >
-                    {errorMessage}
-                  </div>
-                  <div
-                    className={classnames(
-                      registerStyles['input-group'],
-                      'd-flex justify-content-center',
-                    )}
-                  >
-                    <button
-                      onClick={this.handleRegister}
-                      className={classnames(authStyles['register-button'])}
-                    >
-                      Register
-                    </button>
-                  </div>
-                </form>
-              </div>
-            )}
-          </form>
+                  </form>
+                </div>
+              )}
+            </form>
+          </div>
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
         </div>
         <Row>
-          <div
-            className={
-              currentStep === RegisterInterfaces.Steps.USER_DETAILS
-                ? classnames(authStyles['left-arrow-disable'])
-                : classnames(authStyles['left-arrow'])
-            }
-            onClick={() => {
-              if (currentStep !== RegisterInterfaces.Steps.USER_DETAILS) {
-                this.handleStepChange(currentStep, currentStep - 1);
-              }
-            }}
-          >
-            <FontAwesomeIcon icon={faChevronCircleLeft} />
-          </div>
-          <ul className={classnames(authStyles['list-unstyled'], authStyles['multi-steps'])}>
-            <li
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
+          <div className="col-sm-8 col-md-6 col-lg-4 d-flex">
+            <div
               className={
                 currentStep === RegisterInterfaces.Steps.USER_DETAILS
-                  ? classnames(authStyles['is-active'])
-                  : undefined
-              }
-              onClick={() =>
-                this.handleStepChange(currentStep, RegisterInterfaces.Steps.USER_DETAILS)
-              }
-            >
-              {' '}
-              <p style={{ color: 'black' }}>User Details</p>
-            </li>
-            <li
-              className={
-                currentStep === RegisterInterfaces.Steps.CREDENTIALS
-                  ? classnames(authStyles['is-active'])
-                  : undefined
-              }
-              onClick={() =>
-                this.handleStepChange(currentStep, RegisterInterfaces.Steps.CREDENTIALS)
+                  ? classnames(authStyles['left-arrow-disable'])
+                  : classnames(authStyles['left-arrow'])
               }
+              onClick={() => {
+                if (currentStep !== RegisterInterfaces.Steps.USER_DETAILS) {
+                  this.handleStepChange(currentStep, currentStep - 1);
+                }
+              }}
             >
-              <p style={{ color: 'black' }}>Credentials</p>
-            </li>
-            <li
+              <FontAwesomeIcon icon={faChevronCircleLeft} />
+            </div>
+            <ul className={classnames(authStyles['list-unstyled'], authStyles['multi-steps'])}>
+              <li
+                className={
+                  currentStep === RegisterInterfaces.Steps.USER_DETAILS
+                    ? classnames(authStyles['is-active'])
+                    : undefined
+                }
+                onClick={() =>
+                  this.handleStepChange(currentStep, RegisterInterfaces.Steps.USER_DETAILS)
+                }
+              >
+                {' '}
+                <p style={{ color: 'black' }}>User Details</p>
+              </li>
+              <li
+                className={
+                  currentStep === RegisterInterfaces.Steps.CREDENTIALS
+                    ? classnames(authStyles['is-active'])
+                    : undefined
+                }
+                onClick={() =>
+                  this.handleStepChange(currentStep, RegisterInterfaces.Steps.CREDENTIALS)
+                }
+              >
+                <p style={{ color: 'black' }}>Credentials</p>
+              </li>
+              <li
+                className={
+                  currentStep === RegisterInterfaces.Steps.OTHERS
+                    ? classnames(authStyles['is-active'])
+                    : undefined
+                }
+                onClick={() => this.handleStepChange(currentStep, RegisterInterfaces.Steps.OTHERS)}
+              >
+                <p style={{ color: 'black' }}>Other Details</p>
+              </li>
+            </ul>
+            <div
               className={
                 currentStep === RegisterInterfaces.Steps.OTHERS
-                  ? classnames(authStyles['is-active'])
-                  : undefined
+                  ? classnames(authStyles['right-arrow-disable'])
+                  : classnames(authStyles['right-arrow'])
               }
-              onClick={() => this.handleStepChange(currentStep, RegisterInterfaces.Steps.OTHERS)}
+              onClick={() => {
+                if (currentStep !== RegisterInterfaces.Steps.OTHERS) {
+                  this.handleStepChange(currentStep, currentStep + 1);
+                }
+              }}
             >
-              <p style={{ color: 'black' }}>Other Details</p>
-            </li>
-          </ul>
-          <div
-            className={
-              currentStep === RegisterInterfaces.Steps.OTHERS
-                ? classnames(authStyles['right-arrow-disable'])
-                : classnames(authStyles['right-arrow'])
-            }
-            onClick={() => {
-              if (currentStep !== RegisterInterfaces.Steps.OTHERS) {
-                this.handleStepChange(currentStep, currentStep + 1);
-              }
-            }}
-          >
-            <FontAwesomeIcon icon={faChevronCircleRight} />
+              <FontAwesomeIcon icon={faChevronCircleRight} />
+            </div>
           </div>
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
         </Row>
         <Row>
           <Col className="ml-auto  my-3 mr-auto">
diff --git a/src/app/components/Renderer.tsx b/src/app/components/Renderer.tsx
index 63e03bad..c77bfc66 100644
--- a/src/app/components/Renderer.tsx
+++ b/src/app/components/Renderer.tsx
@@ -50,7 +50,7 @@ export default class Renderer extends React.Component<RendererInterfaces.Props,
               <Col sm={12} className="text-center mt-3">
                 <div
                   style={{
-                    backgroundColor: '#d3d3d3',
+                    backgroundColor: '#535353',
                     borderRadius: `50%`,
                     display: 'inline-block',
                   }}
diff --git a/src/app/components/UserProfileModal/EditPassword.tsx b/src/app/components/UserProfileModal/EditPassword.tsx
index d706773b..e6eba90d 100755
--- a/src/app/components/UserProfileModal/EditPassword.tsx
+++ b/src/app/components/UserProfileModal/EditPassword.tsx
@@ -12,109 +12,105 @@ export class EditPassword extends React.Component<EditPasswordInterfaces.Props,
     const { editPasswordRef } = this.props;
     const { oldPassword, password, repeatPassword } = this.props;
     return (
-      <div className="col-5">
-        <Row className={classnames('mb-3')}>
-          <div className={classnames('col-sm-12', styles.passwordForm)}>
-            <div
-              className={classnames('text-dark', styles.formHeading)}
-              style={{
-                marginBottom: '5%',
-                marginLeft: '-1px',
-                textAlign: 'center',
-              }}
-            >
-              User Credentials
-            </div>
-            <form
-              className={'editpasswordForm'}
-              noValidate
-              ref={editPasswordRef}
-              onSubmit={handleEditPassword}
-            >
-              <div className="form-row">
-                <div className="col mb-3">
-                  <div className={classnames(styles1['input-group'])}>
-                    <label className="labeltext">Old Password</label>
-                    <div className={classnames('input-group-prepend', styles.inputGroup)}>
-                      <input
-                        type="password"
-                        className={classnames('form-control', styles1['login-input'])}
-                        id="editValidationOldPassword"
-                        aria-describedby="inputGroupPrepend"
-                        minLength={5}
-                        value={oldPassword}
-                        onChange={(e) => onInputChange(InputName.oldPassword, e.target.value)}
-                        required
-                      />
-                      <div className={classnames('invalid-feedback', styles1['login-error'])}>
-                        Password should have minimum 5 characters.
-                      </div>
+      <Row className={classnames('mb-3')}>
+        <div className="col-sm-2 col-md-3 col-lg-4"></div>
+        <div className={classnames('col-sm-8 col-md-6 col-lg-4', styles.passwordForm)}>
+          <div
+            className={classnames('text-dark', styles.formHeading)}
+            style={{
+              marginBottom: '5%',
+              marginLeft: '-1px',
+              textAlign: 'center',
+            }}
+          >
+            User Credentials
+          </div>
+          <form
+            className={'editpasswordForm'}
+            noValidate
+            ref={editPasswordRef}
+            onSubmit={handleEditPassword}
+          >
+            <div className="form-row">
+              <div className="col mb-3">
+                <div className={classnames(styles1['input-group'])}>
+                  <label className="labeltext">Old Password</label>
+                  <div className={classnames('input-group-prepend', styles.inputGroup)}>
+                    <input
+                      type="password"
+                      className={classnames('form-control', styles1['login-input'])}
+                      id="editValidationOldPassword"
+                      aria-describedby="inputGroupPrepend"
+                      minLength={5}
+                      value={oldPassword}
+                      onChange={(e) => onInputChange(InputName.oldPassword, e.target.value)}
+                      required
+                    />
+                    <div className={classnames('invalid-feedback', styles1['login-error'])}>
+                      Password should have minimum 5 characters.
                     </div>
                   </div>
                 </div>
               </div>
-              <div className="form-row">
-                <div className="col mb-3">
-                  <div className={classnames(styles1['input-group'])}>
-                    <label className="labeltext">New Password</label>
-                    <div className={classnames('input-group-prepend', styles.inputGroup)}>
-                      <input
-                        type="password"
-                        className={classnames('form-control', styles1['login-input'])}
-                        id="editValidationPassword"
-                        aria-describedby="inputGroupPrepend"
-                        minLength={5}
-                        value={password}
-                        onChange={(e) => onInputChange(InputName.password, e.target.value)}
-                        required
-                      />
-                      <div className={classnames('invalid-feedback', styles1['login-error'])}>
-                        Password should have minimum 5 characters.
-                      </div>
+            </div>
+            <div className="form-row">
+              <div className="col mb-3">
+                <div className={classnames(styles1['input-group'])}>
+                  <label className="labeltext">New Password</label>
+                  <div className={classnames('input-group-prepend', styles.inputGroup)}>
+                    <input
+                      type="password"
+                      className={classnames('form-control', styles1['login-input'])}
+                      id="editValidationPassword"
+                      aria-describedby="inputGroupPrepend"
+                      minLength={5}
+                      value={password}
+                      onChange={(e) => onInputChange(InputName.password, e.target.value)}
+                      required
+                    />
+                    <div className={classnames('invalid-feedback', styles1['login-error'])}>
+                      Password should have minimum 5 characters.
                     </div>
                   </div>
                 </div>
               </div>
-              <div className="form-row">
-                <div className="col mb-3">
-                  <div className={classnames(styles1['input-group'])}>
-                    <label className="labeltext">Confirm Password</label>
-                    <div className={classnames('input-group-prepend', styles.passwordInput)}>
-                      <input
-                        type="password"
-                        className={classnames('form-control', styles1['login-input'])}
-                        id="editValidationRepeatPassword"
-                        aria-describedby="inputGroupPrepend"
-                        minLength={5}
-                        value={repeatPassword}
-                        onChange={(e) => onInputChange(InputName.repeatPassword, e.target.value)}
-                        required
-                      />
-                      <div className={classnames('invalid-feedback', styles1['login-error'])}>
-                        Passwords should match.
-                      </div>
+            </div>
+            <div className="form-row">
+              <div className="col mb-3">
+                <div className={classnames(styles1['input-group'])}>
+                  <label className="labeltext">Confirm Password</label>
+                  <div className={classnames('input-group-prepend', styles.passwordInput)}>
+                    <input
+                      type="password"
+                      className={classnames('form-control', styles1['login-input'])}
+                      id="editValidationRepeatPassword"
+                      aria-describedby="inputGroupPrepend"
+                      minLength={5}
+                      value={repeatPassword}
+                      onChange={(e) => onInputChange(InputName.repeatPassword, e.target.value)}
+                      required
+                    />
+                    <div className={classnames('invalid-feedback', styles1['login-error'])}>
+                      Passwords should match.
                     </div>
                   </div>
                 </div>
               </div>
-              <div className="form-row">
-                <div className="col-12 text-center">
-                  <button
-                    className={classnames(
-                      'btn btn-success',
-                      styles1.loginButton,
-                      styles.loginButton,
-                    )}
-                    type="submit"
-                  >
-                    Save Changes
-                  </button>
-                </div>
+            </div>
+            <div className="form-row">
+              <div className="col-12 text-center">
+                <button
+                  className={classnames('btn btn-success', styles1.loginButton, styles.loginButton)}
+                  type="submit"
+                >
+                  Save Changes
+                </button>
               </div>
-            </form>
-          </div>
-        </Row>
-      </div>
+            </div>
+          </form>
+        </div>
+        <div className="col-sm-2 col-md-3 col-lg-4"></div>
+      </Row>
     );
   }
 }
diff --git a/src/app/components/UserProfileModal/EditProfile.tsx b/src/app/components/UserProfileModal/EditProfile.tsx
index 74585495..1d0a1b99 100755
--- a/src/app/components/UserProfileModal/EditProfile.tsx
+++ b/src/app/components/UserProfileModal/EditProfile.tsx
@@ -23,8 +23,9 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
     } = this.props;
     const avatars = Object.keys(Avatar);
     return (
-      <div className="col-6">
-        <div className={classnames('col-sm-12', profileStyles.profileForm)}>
+      <div className="row">
+        <div className="col-sm-2 col-md-3 col-lg-4"></div>
+        <div className={classnames('col-sm-8 col-md-6 col-lg-4', profileStyles.profileForm)}>
           <div style={{ display: 'flex' }}>
             <div className={classnames('text-dark', profileStyles.formHeading)}>User Details</div>
           </div>
@@ -166,6 +167,7 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
             </div>
           </form>
         </div>
+        <div className="col-sm-2 col-md-3 col-lg-4"></div>
       </div>
     );
   }
diff --git a/src/app/components/UserProfileModal/index.tsx b/src/app/components/UserProfileModal/index.tsx
index 102d7257..8e5914c3 100755
--- a/src/app/components/UserProfileModal/index.tsx
+++ b/src/app/components/UserProfileModal/index.tsx
@@ -53,51 +53,47 @@ export class UserProfileModal extends React.Component<
     return (
       <Grid fluid={true} className={classnames(styles.UserEdit)} style={{ padding: '0' }}>
         <NavBar isLoggedIn={true} page={NavPage.PROFILE} />
-        <Row
-          className={
-            this.state.isPasswordPage
-              ? classnames(styles.editProfileElement)
-              : classnames(styles.editPasswordElement)
-          }
-        >
-          {this.state.isPasswordPage ? (
-            <EditProfile
-              handleEditProfile={this.handleEditProfile}
-              onInputChange={this.onInputChange}
-              editProfileRef={this.editProfileRef}
-              username={username}
-              fullName={fullName}
-              userDetails={userDetails}
-              country={country}
-              avatar={avatar}
-            />
-          ) : (
-            <EditPassword
-              handleEditPassword={this.handleEditPassword}
-              onInputChange={this.onInputChange}
-              editPasswordRef={this.editPasswordRef}
-              oldPassword={oldPassword}
-              password={password}
-              repeatPassword={repeatPassword}
-              userDetails={userDetails}
-            />
-          )}
-        </Row>
+        {this.state.isPasswordPage ? (
+          <EditProfile
+            handleEditProfile={this.handleEditProfile}
+            onInputChange={this.onInputChange}
+            editProfileRef={this.editProfileRef}
+            username={username}
+            fullName={fullName}
+            userDetails={userDetails}
+            country={country}
+            avatar={avatar}
+          />
+        ) : (
+          <EditPassword
+            handleEditPassword={this.handleEditPassword}
+            onInputChange={this.onInputChange}
+            editPasswordRef={this.editPasswordRef}
+            oldPassword={oldPassword}
+            password={password}
+            repeatPassword={repeatPassword}
+            userDetails={userDetails}
+          />
+        )}
         <Row>
-          <a
-            className={
-              this.state.isPasswordPage
-                ? classnames('labeltext', styles.loginPageLink)
-                : classnames('labeltext', styles.passwordPageLink)
-            }
-            onClick={() => {
-              this.setState((prevState) => ({
-                isPasswordPage: !prevState.isPasswordPage,
-              }));
-            }}
-          >
-            {this.state.isPasswordPage ? 'Want to change Credentials?' : 'Want to change Info?'}
-          </a>
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
+          <div className="col-sm-8 col-md-6 col-lg-4 text-center">
+            <a
+              className={
+                this.state.isPasswordPage
+                  ? classnames('labeltext', styles.loginPageLink)
+                  : classnames('labeltext', styles.passwordPageLink)
+              }
+              onClick={() => {
+                this.setState((prevState) => ({
+                  isPasswordPage: !prevState.isPasswordPage,
+                }));
+              }}
+            >
+              {this.state.isPasswordPage ? 'Want to change Credentials?' : 'Want to change Info?'}
+            </a>
+          </div>
+          <div className="col-sm-2 col-md-3 col-lg-4"></div>
         </Row>
         {this.state.isPasswordPage ? (
           <Row>
diff --git a/src/app/components/home/Navbar.tsx b/src/app/components/home/Navbar.tsx
index 49aa520e..71e1f937 100644
--- a/src/app/components/home/Navbar.tsx
+++ b/src/app/components/home/Navbar.tsx
@@ -36,7 +36,10 @@ export const NavBar = (props: { isLoggedIn: boolean; page: NavPage }) => {
               Dashboard{' '}
             </Link>
             {props.page !== NavPage.PROFILE ? (
-              <Link to={Routes.USER_PROFILE_MODEL}> Profile </Link>
+              <Link to={Routes.USER_PROFILE_MODEL} className="p-3">
+                {' '}
+                Profile{' '}
+              </Link>
             ) : null}
           </>
         ) : (
diff --git a/src/app/styles/Authentication.module.css b/src/app/styles/Authentication.module.css
index 37c00f98..d73a2a0e 100755
--- a/src/app/styles/Authentication.module.css
+++ b/src/app/styles/Authentication.module.css
@@ -1,6 +1,6 @@
 .Authentication {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   position: fixed;
   display: flex;
   align-items: center;
@@ -16,6 +16,10 @@
   text-align: center;
 }
 
+.registerRoot > * {
+  margin: 0;
+}
+
 .Authentication .customBtn:focus,
 .buttonPanel:focus {
   outline: none;
@@ -125,7 +129,7 @@
 }
 
 .stage-form {
-  width: 390px;
+  width: 100%;
 }
 
 .avatar-img {
@@ -157,11 +161,6 @@
   background-color: darkgrey;
 }
 
-.loginForm {
-  margin: auto !important;
-  width: 390px !important;
-}
-
 .login-error {
   background-color: #fee5d4;
   padding: 9px;
@@ -253,7 +252,6 @@
 }
 .left-arrow {
   position: relative;
-  left: 35%;
   border-radius: 50%;
   color: #4630eb;
   font-size: 30px;
@@ -262,7 +260,6 @@
 }
 .left-arrow-disable {
   position: relative;
-  left: 35%;
   border-radius: 50%;
   color: grey;
   font-size: 30px;
@@ -271,7 +268,6 @@
 
 .right-arrow {
   position: relative;
-  right: 35%;
   bottom: 5px;
   border-radius: 50%;
   color: #4630eb;
@@ -280,7 +276,6 @@
 }
 .right-arrow-disable {
   position: relative;
-  right: 35%;
   bottom: 5px;
   border-radius: 50%;
   color: grey;
@@ -331,6 +326,7 @@
 }
 
 .stage-div {
+  width: 100%;
   margin: auto;
   display: block;
 }
@@ -411,9 +407,6 @@
 }
 
 .multi-steps {
-  display: table;
-  table-layout: fixed;
-  width: 25%;
   margin: auto;
   cursor: pointer;
   font-family: 'Karla', sans-serif;
@@ -421,6 +414,7 @@
 }
 .multi-steps > li {
   counter-increment: stepNum;
+  padding: 0px 10px;
   text-align: center;
   display: table-cell;
   position: relative;
diff --git a/src/app/styles/Dashboard.css b/src/app/styles/Dashboard.css
index 81df2133..01a38884 100755
--- a/src/app/styles/Dashboard.css
+++ b/src/app/styles/Dashboard.css
@@ -1,6 +1,6 @@
 .Resizer.horizontal {
   background: #000;
-  opacity: 0.2;
+  opacity: 0.7;
   width: 2px;
   z-index: 1;
   -moz-box-sizing: border-box;
@@ -26,7 +26,7 @@
 
 .Resizer.vertical {
   background: #000;
-  opacity: 0.2;
+  opacity: 0.7;
   width: 2px;
   z-index: 1;
   -moz-box-sizing: border-box;
@@ -48,3 +48,27 @@
   border-left: 5px solid rgba(0, 0, 0, 0.5);
   border-right: 5px solid rgba(0, 0, 0, 0.5);
 }
+
+.ace_scrollbar {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+.ace_editor:hover .ace_scrollbar {
+  opacity: 1;
+}
+.ace_scrollbar-v {
+  width: 7px !important;
+}
+
+.ace_scrollbar-h {
+  height: 7px !important;
+}
+
+::-webkit-scrollbar {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: black;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+}
diff --git a/src/app/styles/FaqElement.module.css b/src/app/styles/FaqElement.module.css
index f3ec60a8..3ff9fb66 100644
--- a/src/app/styles/FaqElement.module.css
+++ b/src/app/styles/FaqElement.module.css
@@ -61,9 +61,9 @@
 
 .faq-heading {
   display: flex;
+  flex-wrap: nowrap;
   margin: 0;
   margin-bottom: 0;
-  width: 90%;
   position: relative;
 }
 .heading-text {
@@ -71,8 +71,8 @@
   align-self: center;
   font-size: 18px;
   font-family: Karla !important;
-  margin: 0 !important;
-  text-align: center;
+  margin: 0px 10px;
+  text-align: left;
 }
 
 .cont {
diff --git a/src/app/styles/LandingPage.module.css b/src/app/styles/LandingPage.module.css
index bfb67f3f..500155a2 100644
--- a/src/app/styles/LandingPage.module.css
+++ b/src/app/styles/LandingPage.module.css
@@ -15,6 +15,7 @@
 
 .landing-heading h1 {
   font-size: 8rem;
+  font-size: min(8rem, 16vw);
   font-family: 'Under';
 }
 
@@ -24,7 +25,6 @@
 }
 
 .nav {
-  height: 65px;
   width: 100%;
   background-color: white;
   position: relative;
@@ -78,7 +78,6 @@
     opacity: 0.5;
   }
   .landing-heading {
-    width: 100vw !important;
     text-align: center !important;
     justify-content: center !important;
     padding-left: 0 !important;
@@ -199,7 +198,8 @@
 
 .about-container {
   margin-top: 40px;
-  margin-left: 50px;
+  margin-left: 40px;
+  margin-left: min(40px, 5vw);
   font-family: 'Axiforma';
 }
 
diff --git a/src/app/styles/UserProfileModal.module.css b/src/app/styles/UserProfileModal.module.css
index a318cb77..97a673bb 100755
--- a/src/app/styles/UserProfileModal.module.css
+++ b/src/app/styles/UserProfileModal.module.css
@@ -1,5 +1,4 @@
 .UserProfileModal {
-  width: 100vw;
   height: 100vh;
   position: fixed;
   display: flex;
@@ -118,14 +117,10 @@
 
 .passwordForm {
   padding: 10px 25px;
-  width: 100%;
-  margin-left: 5%;
 }
 
 .profileForm {
   padding: 10px 25px;
-  width: 85%;
-  margin-left: 12%;
 }
 
 .formHeading {
@@ -199,14 +194,6 @@
   background-color: #ddd;
 }
 
-.editProfileElement {
-  overflow-x: hidden;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 30%;
-  margin-top: 2%;
-}
-
 .editPasswordElement {
   overflow-x: hidden;
   padding-left: 10px;
@@ -240,12 +227,7 @@
   width: 100%;
 }
 
-.loginPageLink {
-  cursor: pointer;
-  margin-left: 38%;
-}
-
+.loginPageLink,
 .passwordPageLink {
   cursor: pointer;
-  margin-left: 37%;
 }
diff --git a/src/assets/index.html b/src/assets/index.html
index 85f102e6..fc280e7d 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -10,7 +10,7 @@
       rel="stylesheet"
     />
     <style>
-      #preloader-container {
+      #preloader-wrapper {
         position: fixed;
         top: 0;
         left: 0;
@@ -20,7 +20,7 @@
         background-color: #fff;
         transition: opacity 1s;
       }
-      .container {
+      .preloader-container {
         position: absolute;
         width: 200px;
         height: 200px;
@@ -135,8 +135,8 @@
   </head>
   <body>
     <div id="root">
-      <div id="preloader-container">
-        <div class="container">
+      <div id="preloader-wrapper">
+        <div class="preloader-container">
           <div class="item item-1"></div>
           <div class="item item-2"></div>
           <div class="item item-3"></div>