diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index de3b1b70e..9e59758ea 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -1,6 +1,7 @@
 class DashboardController < ActionController::Base
   include SwitchLocale
 
+  before_action :set_application_pack
   before_action :set_global_config
   around_action :switch_locale
   before_action :ensure_installation_onboarding, only: [:index]
@@ -60,4 +61,12 @@ class DashboardController < ActionController::Base
       GIT_SHA: GIT_HASH
     }
   end
+
+  def set_application_pack
+    @application_pack = if request.path.include?('/auth') || request.path.include?('/login')
+                          'v3app'
+                        else
+                          'application'
+                        end
+  end
 end
diff --git a/app/javascript/dashboard/api/auth.js b/app/javascript/dashboard/api/auth.js
index 040c27313..883644d17 100644
--- a/app/javascript/dashboard/api/auth.js
+++ b/app/javascript/dashboard/api/auth.js
@@ -3,47 +3,11 @@
 import Cookies from 'js-cookie';
 import endPoints from './endPoints';
 import {
-  setAuthCredentials,
   clearCookiesOnLogout,
   deleteIndexedDBOnLogout,
 } from '../store/utils/api';
 
 export default {
-  login(creds) {
-    return new Promise((resolve, reject) => {
-      axios
-        .post('auth/sign_in', creds)
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response.data);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
-  },
-
-  register(creds) {
-    const urlData = endPoints('register');
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, {
-          account_name: creds.accountName.trim(),
-          user_full_name: creds.fullName.trim(),
-          email: creds.email,
-          password: creds.password,
-          h_captcha_client_response: creds.hCaptchaClientResponse,
-        })
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error);
-        });
-    });
-    return fetchPromise;
-  },
   validityCheck() {
     const urlData = endPoints('validityCheck');
     return axios.get(urlData.url);
@@ -73,45 +37,6 @@ export default {
     }
     return false;
   },
-  verifyPasswordToken({ confirmationToken }) {
-    return new Promise((resolve, reject) => {
-      axios
-        .post('auth/confirmation', {
-          confirmation_token: confirmationToken,
-        })
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
-  },
-
-  setNewPassword({ resetPasswordToken, password, confirmPassword }) {
-    return new Promise((resolve, reject) => {
-      axios
-        .put('auth/password', {
-          reset_password_token: resetPasswordToken,
-          password_confirmation: confirmPassword,
-          password,
-        })
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
-  },
-
-  resetPassword({ email }) {
-    const urlData = endPoints('resetPassword');
-    return axios.post(urlData.url, { email });
-  },
-
   profileUpdate({
     password,
     password_confirmation,
diff --git a/app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.vue b/app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.vue
deleted file mode 100644
index 404afe619..000000000
--- a/app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <div v-if="showSeparator" class="separator">
-      OR
-    </div>
-    <a :href="getGoogleAuthUrl()">
-      <button
-        class="button expanded button__google_login"
-        :class="{
-          // Explicit checking to ensure no other value is used
-          large: buttonSize === 'large',
-          small: buttonSize === 'small',
-          tiny: buttonSize === 'tiny',
-        }"
-      >
-        <img
-          src="/assets/images/auth/google.svg"
-          alt="Google Logo"
-          class="icon"
-        />
-        <slot>{{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}</slot>
-      </button>
-    </a>
-  </div>
-</template>
-
-<script>
-const validButtonSizes = ['small', 'tiny', 'large'];
-
-export default {
-  props: {
-    showSeparator: {
-      type: Boolean,
-      default: true,
-    },
-    buttonSize: {
-      type: String,
-      default: undefined,
-      validator: value =>
-        validButtonSizes.includes(value) || value === undefined,
-    },
-  },
-  methods: {
-    getGoogleAuthUrl() {
-      // Ideally a request to /auth/google_oauth2 should be made
-      // Creating the URL manually because the devise-token-auth with
-      // omniauth has a standing issue on redirecting the post request
-      // https://github.com/lynndylanhurley/devise_token_auth/issues/1466
-      const baseUrl =
-        'https://accounts.google.com/o/oauth2/auth/oauthchooseaccount';
-      const clientId = window.chatwootConfig.googleOAuthClientId;
-      const redirectUri = window.chatwootConfig.googleOAuthCallbackUrl;
-      const responseType = 'code';
-      const scope = 'email profile';
-
-      // Build the query string
-      const queryString = new URLSearchParams({
-        client_id: clientId,
-        redirect_uri: redirectUri,
-        response_type: responseType,
-        scope: scope,
-      }).toString();
-
-      // Construct the full URL
-      return `${baseUrl}?${queryString}`;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.separator {
-  display: flex;
-  align-items: center;
-  margin: var(--space-two) var(--space-zero);
-  gap: var(--space-one);
-  color: var(--s-300);
-  font-size: var(--font-size-small);
-  &::before,
-  &::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: var(--s-100);
-  }
-}
-.button__google_login {
-  background: var(--white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-one);
-  border: 1px solid var(--s-100);
-  color: var(--b-800);
-}
-</style>
diff --git a/app/javascript/dashboard/helper/URLHelper.js b/app/javascript/dashboard/helper/URLHelper.js
index c4c544da0..c5f274e4f 100644
--- a/app/javascript/dashboard/helper/URLHelper.js
+++ b/app/javascript/dashboard/helper/URLHelper.js
@@ -1,41 +1,8 @@
-import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
-
 export const frontendURL = (path, params) => {
   const stringifiedParams = params ? `?${new URLSearchParams(params)}` : '';
   return `/app/${path}${stringifiedParams}`;
 };
 
-const getSSOAccountPath = ({ ssoAccountId, user }) => {
-  const { accounts = [], account_id = null } = user || {};
-  const ssoAccount = accounts.find(
-    account => account.id === Number(ssoAccountId)
-  );
-  let accountPath = '';
-  if (ssoAccount) {
-    accountPath = `accounts/${ssoAccountId}`;
-  } else if (accounts.length) {
-    // If the account id is not found, redirect to the first account
-    const accountId = account_id || accounts[0].id;
-    accountPath = `accounts/${accountId}`;
-  }
-  return accountPath;
-};
-
-export const getLoginRedirectURL = ({
-  ssoAccountId,
-  ssoConversationId,
-  user,
-}) => {
-  const accountPath = getSSOAccountPath({ ssoAccountId, user });
-  if (accountPath) {
-    if (ssoConversationId) {
-      return frontendURL(`${accountPath}/conversations/${ssoConversationId}`);
-    }
-    return frontendURL(`${accountPath}/dashboard`);
-  }
-  return DEFAULT_REDIRECT_URL;
-};
-
 export const conversationUrl = ({
   accountId,
   activeInbox,
diff --git a/app/javascript/dashboard/helper/specs/URLHelper.spec.js b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
index cd2623c23..204d3384f 100644
--- a/app/javascript/dashboard/helper/specs/URLHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
@@ -2,7 +2,6 @@ import {
   frontendURL,
   conversationUrl,
   isValidURL,
-  getLoginRedirectURL,
   conversationListPageURL,
 } from '../URLHelper';
 
@@ -76,44 +75,4 @@ describe('#URL Helpers', () => {
       expect(isValidURL('alert.window')).toBe(false);
     });
   });
-
-  describe('getLoginRedirectURL', () => {
-    it('should return correct Account URL if account id is present', () => {
-      expect(
-        getLoginRedirectURL({
-          ssoAccountId: '7500',
-          user: {
-            accounts: [{ id: 7500, name: 'Test Account 7500' }],
-          },
-        })
-      ).toBe('/app/accounts/7500/dashboard');
-    });
-
-    it('should return correct conversation URL if account id and conversationId is present', () => {
-      expect(
-        getLoginRedirectURL({
-          ssoAccountId: '7500',
-          ssoConversationId: '752',
-          user: {
-            accounts: [{ id: 7500, name: 'Test Account 7500' }],
-          },
-        })
-      ).toBe('/app/accounts/7500/conversations/752');
-    });
-
-    it('should return default URL if account id is not present', () => {
-      expect(getLoginRedirectURL({ ssoAccountId: '7500', user: {} })).toBe(
-        '/app/'
-      );
-      expect(
-        getLoginRedirectURL({
-          ssoAccountId: '7500',
-          user: {
-            accounts: [{ id: '7501', name: 'Test Account 7501' }],
-          },
-        })
-      ).toBe('/app/accounts/7501/dashboard');
-      expect(getLoginRedirectURL('7500', null)).toBe('/app/');
-    });
-  });
 });
diff --git a/app/javascript/dashboard/i18n/locale/en/generalSettings.json b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
index 349d840e2..63b597a53 100644
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -151,5 +151,9 @@
   },
   "DASHBOARD_APPS": {
     "LOADING_MESSAGE": "Loading Dashboard App..."
+  },
+  "COMMON": {
+    "OR": "Or",
+    "CLICK_HERE": "click here"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/resetPassword.json b/app/javascript/dashboard/i18n/locale/en/resetPassword.json
index 37aa1860a..955696b0c 100644
--- a/app/javascript/dashboard/i18n/locale/en/resetPassword.json
+++ b/app/javascript/dashboard/i18n/locale/en/resetPassword.json
@@ -1,6 +1,8 @@
 {
   "RESET_PASSWORD": {
     "TITLE": "Reset password",
+    "DESCRIPTION": "Enter the email address you use to log in to Chatwoot to get the password reset instructions.",
+    "GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
     "EMAIL": {
       "LABEL": "Email",
       "PLACEHOLDER": "Please enter your email.",
diff --git a/app/javascript/dashboard/routes/auth/Auth.vue b/app/javascript/dashboard/routes/auth/Auth.vue
deleted file mode 100644
index 757bd6578..000000000
--- a/app/javascript/dashboard/routes/auth/Auth.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="row auth-wrap login align-center">
-    <router-view />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/auth/ResetPassword.vue b/app/javascript/dashboard/routes/auth/ResetPassword.vue
deleted file mode 100644
index e9eae00ab..000000000
--- a/app/javascript/dashboard/routes/auth/ResetPassword.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <form
-    class="login-box medium-4 column align-self-middle"
-    @submit.prevent="submit()"
-  >
-    <h4>{{ $t('RESET_PASSWORD.TITLE') }}</h4>
-    <div class="column log-in-form">
-      <label :class="{ error: $v.credentials.email.$error }">
-        {{ $t('RESET_PASSWORD.EMAIL.LABEL') }}
-        <input
-          v-model.trim="credentials.email"
-          type="text"
-          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
-          @input="$v.credentials.email.$touch"
-        />
-        <span v-if="$v.credentials.email.$error" class="message">
-          {{ $t('RESET_PASSWORD.EMAIL.ERROR') }}
-        </span>
-      </label>
-      <woot-submit-button
-        :disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
-        :button-text="$t('RESET_PASSWORD.SUBMIT')"
-        :loading="resetPassword.showLoading"
-        button-class="expanded"
-      />
-    </div>
-  </form>
-</template>
-
-<script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
-import Auth from '../../api/auth';
-
-export default {
-  data() {
-    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
-      credentials: {
-        email: '',
-      },
-      resetPassword: {
-        message: '',
-        showLoading: false,
-      },
-      error: '',
-    };
-  },
-  validations: {
-    credentials: {
-      email: {
-        required,
-        email,
-        minLength: minLength(4),
-      },
-    },
-  },
-  methods: {
-    showAlert(message) {
-      // Reset loading, current selected agent
-      this.resetPassword.showLoading = false;
-      bus.$emit('newToastMessage', message);
-    },
-    submit() {
-      this.resetPassword.showLoading = true;
-      Auth.resetPassword(this.credentials)
-        .then(res => {
-          let successMessage = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
-          if (res.data && res.data.message) {
-            successMessage = res.data.message;
-          }
-          this.showAlert(successMessage);
-        })
-        .catch(error => {
-          let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
-          if (error?.response?.data?.message) {
-            errorMessage = error.response.data.message;
-          }
-          this.showAlert(errorMessage);
-        });
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/auth/Signup.vue b/app/javascript/dashboard/routes/auth/Signup.vue
deleted file mode 100644
index 06d8355cb..000000000
--- a/app/javascript/dashboard/routes/auth/Signup.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <div class="h-full w-full">
-    <div v-show="!isLoading" class="row h-full">
-      <div
-        :class="
-          `${showTestimonials ? 'large-6' : 'large-12'} signup-form--container`
-        "
-      >
-        <div class="signup-form--content">
-          <div class="signup--hero">
-            <img
-              :src="globalConfig.logo"
-              :alt="globalConfig.installationName"
-              class="hero--logo"
-            />
-            <h2 class="hero--title">
-              {{ $t('REGISTER.TRY_WOOT') }}
-            </h2>
-          </div>
-          <signup-form />
-          <div class="auth-screen--footer">
-            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
-            <router-link to="/app/login">
-              {{
-                useInstallationName(
-                  $t('LOGIN.TITLE'),
-                  globalConfig.installationName
-                )
-              }}
-            </router-link>
-          </div>
-        </div>
-      </div>
-      <testimonials
-        v-if="isAChatwootInstance"
-        class="medium-6 testimonial--container"
-        @resize-containers="resizeContainers"
-      />
-    </div>
-    <div v-show="isLoading" class="spinner--container">
-      <spinner size="" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SignupForm from './components/Signup/Form.vue';
-import Testimonials from './components/Testimonials/Index.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    SignupForm,
-    Spinner,
-    Testimonials,
-  },
-  mixins: [globalConfigMixin],
-  data() {
-    return { showTestimonials: false, isLoading: false };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    isAChatwootInstance() {
-      return this.globalConfig.installationName === 'Chatwoot';
-    },
-  },
-  beforeMount() {
-    this.isLoading = this.isAChatwootInstance;
-  },
-  methods: {
-    resizeContainers(hasTestimonials) {
-      this.showTestimonials = hasTestimonials;
-      this.isLoading = false;
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-.signup-form--container {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  min-height: 640px;
-  overflow: auto;
-  justify-content: center;
-}
-
-.signup-form--content {
-  padding: var(--space-larger);
-  max-width: 600px;
-  width: 100%;
-}
-
-.signup--hero {
-  margin-bottom: var(--space-normal);
-
-  .hero--logo {
-    width: 160px;
-  }
-
-  .hero--title {
-    margin-top: var(--space-medium);
-    font-weight: var(--font-weight-light);
-  }
-}
-
-.auth-screen--footer {
-  font-size: var(--font-size-small);
-}
-
-@media screen and (max-width: 1200px) {
-  .testimonial--container {
-    display: none;
-  }
-  .signup-form--container {
-    width: 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  .signup-form--content {
-    margin: 0 auto;
-  }
-}
-
-.spinner--container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/auth/auth.routes.js b/app/javascript/dashboard/routes/auth/auth.routes.js
deleted file mode 100644
index 0a12cb041..000000000
--- a/app/javascript/dashboard/routes/auth/auth.routes.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import Auth from './Auth';
-import Confirmation from './Confirmation';
-import PasswordEdit from './PasswordEdit';
-import ResetPassword from './ResetPassword';
-import { frontendURL } from '../../helper/URLHelper';
-
-const Signup = () => import('./Signup');
-
-export default {
-  routes: [
-    {
-      path: frontendURL('auth/signup'),
-      name: 'auth_signup',
-      component: Signup,
-      meta: { requireSignupEnabled: true },
-    },
-    {
-      path: frontendURL('auth'),
-      name: 'auth',
-      component: Auth,
-      children: [
-        {
-          path: 'confirmation',
-          name: 'auth_confirmation',
-          component: Confirmation,
-          props: route => ({
-            config: route.query.config,
-            confirmationToken: route.query.confirmation_token,
-            redirectUrl: route.query.route_url,
-          }),
-        },
-        {
-          path: 'password/edit',
-          name: 'auth_password_edit',
-          component: PasswordEdit,
-          props: route => ({
-            config: route.query.config,
-            resetPasswordToken: route.query.reset_password_token,
-            redirectUrl: route.query.route_url,
-          }),
-        },
-        {
-          path: 'reset/password',
-          name: 'auth_reset_password',
-          component: ResetPassword,
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/routes/auth/components/AuthInput.vue b/app/javascript/dashboard/routes/auth/components/AuthInput.vue
deleted file mode 100644
index a1bec50f5..000000000
--- a/app/javascript/dashboard/routes/auth/components/AuthInput.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <label class="auth-input--wrap">
-    <div class="label-wrap">
-      <fluent-icon v-if="iconName" :icon="iconName" size="16" />
-      <span v-if="label">{{ label }}</span>
-    </div>
-    <div class="input--wrap">
-      <input
-        class="auth-input"
-        :value="value"
-        :type="type"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        @input="onChange"
-        @blur="onBlur"
-      />
-      <p v-if="helpText" class="help-text" />
-      <span v-if="error" class="message">
-        {{ error }}
-      </span>
-    </div>
-  </label>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    iconName: {
-      type: String,
-      default: '',
-    },
-    helpText: {
-      type: String,
-      default: '',
-    },
-    error: {
-      type: String,
-      default: '',
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    onChange(e) {
-      this.$emit('input', e.target.value);
-    },
-    onBlur(e) {
-      this.$emit('blur', e.target.value);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.auth-input--wrap {
-  .label-wrap {
-    display: flex;
-    align-items: center;
-    color: var(--s-900);
-    margin-bottom: var(--space-smaller);
-
-    span {
-      margin-left: var(--space-smaller);
-      font-size: var(--font-size-small);
-    }
-  }
-
-  .auth-input {
-    font-size: var(--font-size-small) !important;
-    height: 4rem !important;
-    padding: var(--space-small) !important;
-    width: 100% !important;
-    background: var(--s-50) !important;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue b/app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue
deleted file mode 100644
index 691f21b98..000000000
--- a/app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div v-if="testimonials.length" class="testimonial--section">
-    <img src="/assets/images/auth/top-left.svg" class="top-left--img" />
-    <img src="/assets/images/auth/bottom-right.svg" class="bottom-right--img" />
-    <img src="/assets/images/auth/auth--bg.svg" class="center--img" />
-    <div class="testimonial--content">
-      <div class="testimonial--content-card">
-        <testimonial-card
-          v-for="(testimonial, index) in testimonials"
-          :key="testimonial.id"
-          :review-content="testimonial.authorReview"
-          :author-image="testimonial.authorImage"
-          :author-name="testimonial.authorName"
-          :author-designation="testimonial.authorCompany"
-          :class="`testimonial-${index ? 'right' : 'left'}--card`"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TestimonialCard from './TestimonialCard.vue';
-import { getTestimonialContent } from 'dashboard/api/testimonials';
-export default {
-  components: {
-    TestimonialCard,
-  },
-  data() {
-    return {
-      testimonials: [],
-    };
-  },
-  beforeMount() {
-    this.fetchTestimonials();
-  },
-  methods: {
-    async fetchTestimonials() {
-      try {
-        const { data } = await getTestimonialContent();
-        this.testimonials = data;
-      } catch (error) {
-        // Ignoring the error as the UI wouldn't break
-      } finally {
-        this.$emit('resize-containers', !!this.testimonials.length);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/woot';
-
-.top-left--img {
-  left: 0;
-  height: 16rem;
-  position: absolute;
-  top: 0;
-  width: 16rem;
-}
-
-.bottom-right--img {
-  bottom: 0;
-  height: 16rem;
-  position: absolute;
-  right: 0;
-  width: 16rem;
-}
-
-.center--img {
-  height: 96%;
-  left: 8%;
-  position: absolute;
-  top: 8%;
-  width: 86%;
-}
-
-.center-container {
-  padding: var(--space-medium) 0;
-}
-
-.testimonial--section {
-  background: var(--w-400);
-  display: flex;
-  flex: 1 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.testimonial--content {
-  align-content: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  width: 100%;
-  z-index: 1000;
-}
-
-.testimonial--content-card {
-  align-items: flex-start;
-  display: flex;
-  justify-content: center;
-  padding: var(--space-large);
-}
-
-.testimonial-left--card {
-  --signup-testimonial-top: 20%;
-  margin-top: var(--signup-testimonial-top);
-  margin-right: var(--space-minus-normal);
-  z-index: 10000;
-}
-
-@media screen and (max-width: 1200px) {
-  .testimonial--section {
-    display: none;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialCard.vue b/app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialCard.vue
deleted file mode 100644
index 72d02753d..000000000
--- a/app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialCard.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="testimonial-card">
-    <div class="left-card--wrap absolute">
-      <div class="left-card--content">
-        <p class="card-content">
-          {{ reviewContent }}
-        </p>
-        <div class="content-author--details row">
-          <div class="author-image--wrap">
-            <img :src="authorImage" class="author-image" />
-          </div>
-          <div class="author-name-company--details">
-            <div class="author-name">{{ authorName }}</div>
-            <div class="author-company">{{ authorDesignation }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    reviewContent: {
-      type: String,
-      default: '',
-    },
-    authorImage: {
-      type: String,
-      default: '',
-    },
-    authorName: {
-      type: String,
-      default: '',
-    },
-    authorDesignation: {
-      type: String,
-      default: '',
-    },
-  },
-  setup() {},
-};
-</script>
-
-<style scoped lang="scss">
-.testimonial-card {
-  align-items: center;
-  background: var(--white);
-  border-radius: var(--border-radius-normal);
-  box-shadow: var(--shadow-large);
-  display: flex;
-  justify-content: center;
-  padding: var(--space-medium) var(--space-large);
-  width: 32rem;
-}
-
-.content-author--details {
-  align-items: center;
-  display: flex;
-  margin-top: var(--space-small);
-
-  .author-image--wrap {
-    background: white;
-    border-radius: var(--border-radius-rounded);
-    padding: var(--space-smaller);
-
-    .author-image {
-      border-radius: var(--border-radius-rounded);
-      height: calc(var(--space-two) + var(--space-two));
-      width: calc(var(--space-two) + var(--space-two));
-    }
-  }
-
-  .author-name-company--details {
-    margin-left: var(--space-small);
-
-    .author-name {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-bold);
-    }
-
-    .author-company {
-      font-size: var(--font-size-mini);
-    }
-  }
-}
-
-.card-content {
-  color: var(--s-600);
-  // font-size: var(--font-size-default);
-  line-height: 1.7;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialFooter.vue b/app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialFooter.vue
deleted file mode 100644
index f225c15d5..000000000
--- a/app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialFooter.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="testimonial--footer">
-    <h2 class="heading">
-      {{ title }}
-    </h2>
-    <span class="sub-block-title sub-heading">
-      {{ subTitle }}
-    </span>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-.testimonial--footer {
-  align-items: center;
-  bottom: var(--space-jumbo);
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  margin: 0 auto;
-  padding: 0 var(--space-jumbo);
-  position: absolute;
-  width: 100%;
-
-  .heading {
-    color: var(--white);
-    font-size: var(--font-size-bigger);
-  }
-
-  .sub-heading {
-    color: var(--white);
-    font-weight: var(--font-weight-medium);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/index.js b/app/javascript/dashboard/routes/index.js
index a85b4149e..e2245e20f 100644
--- a/app/javascript/dashboard/routes/index.js
+++ b/app/javascript/dashboard/routes/index.js
@@ -1,15 +1,12 @@
 import VueRouter from 'vue-router';
 
 import { frontendURL } from '../helper/URLHelper';
-import { clearBrowserSessionCookies } from '../store/utils/api';
-import authRoute from './auth/auth.routes';
 import dashboard from './dashboard/dashboard.routes';
-import login from './login/login.routes';
 import store from '../store';
 import { validateLoggedInRoutes } from '../helper/routeHelpers';
 import AnalyticsHelper from '../helper/AnalyticsHelper';
 
-const routes = [...login.routes, ...dashboard.routes, ...authRoute.routes];
+const routes = [...dashboard.routes];
 
 window.roleWiseRoutes = {
   agent: [],
@@ -36,86 +33,26 @@ generateRoleWiseRoute(routes);
 
 export const router = new VueRouter({ mode: 'history', routes });
 
-const unProtectedRoutes = ['login', 'auth_signup', 'auth_reset_password'];
+export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
+  const { isLoggedIn, getCurrentUser: user } = getters;
 
-const authIgnoreRoutes = [
-  'auth_confirmation',
-  'pushBack',
-  'auth_password_edit',
-  'oauth-callback',
-];
+  if (!isLoggedIn) {
+    window.location = '/app/login';
+    return '/app/login';
+  }
 
-const routeValidators = [
-  {
-    protected: false,
-    loggedIn: true,
-    handler: (_, getters) => {
-      const user = getters.getCurrentUser;
-      return `accounts/${user.account_id}/dashboard`;
-    },
-  },
-  {
-    protected: true,
-    loggedIn: false,
-    handler: () => 'login',
-  },
-  {
-    protected: true,
-    loggedIn: true,
-    handler: (to, getters) =>
-      validateLoggedInRoutes(to, getters.getCurrentUser, window.roleWiseRoutes),
-  },
-  {
-    protected: false,
-    loggedIn: false,
-    handler: () => null,
-  },
-];
+  if (!to.name) {
+    return next(frontendURL(`accounts/${user.account_id}/dashboard`));
+  }
 
-export const validateAuthenticateRoutePermission = (
-  to,
-  from,
-  next,
-  { getters }
-) => {
-  const isLoggedIn = getters.isLoggedIn;
-  const isProtectedRoute = !unProtectedRoutes.includes(to.name);
-  const strategy = routeValidators.find(
-    validator =>
-      validator.protected === isProtectedRoute &&
-      validator.loggedIn === isLoggedIn
+  const nextRoute = validateLoggedInRoutes(
+    to,
+    getters.getCurrentUser,
+    window.roleWiseRoutes
   );
-  const nextRoute = strategy.handler(to, getters);
   return nextRoute ? next(frontendURL(nextRoute)) : next();
 };
 
-const validateSSOLoginParams = to => {
-  const isLoginRoute = to.name === 'login';
-  const { email, sso_auth_token: ssoAuthToken } = to.query || {};
-  const hasValidSSOParams = email && ssoAuthToken;
-  return isLoginRoute && hasValidSSOParams;
-};
-
-export const validateRouteAccess = (to, from, next, { getters }) => {
-  // Disable navigation to signup page if signups are disabled
-  // Signup route has an attribute (requireSignupEnabled)
-  // defined in it's route definition
-  if (
-    window.chatwootConfig.signupEnabled !== 'true' &&
-    to.meta &&
-    to.meta.requireSignupEnabled
-  ) {
-    return next(frontendURL('login'));
-  }
-
-  // For routes which doesn't care about authentication, skip validation
-  if (authIgnoreRoutes.includes(to.name)) {
-    return next();
-  }
-
-  return validateAuthenticateRoutePermission(to, from, next, { getters });
-};
-
 export const initalizeRouter = () => {
   const userAuthentication = store.dispatch('setUser');
 
@@ -125,22 +62,8 @@ export const initalizeRouter = () => {
       name: to.name,
     });
 
-    if (validateSSOLoginParams(to)) {
-      clearBrowserSessionCookies();
-      next();
-      return;
-    }
-
     userAuthentication.then(() => {
-      if (!to.name) {
-        const { isLoggedIn, getCurrentUser: user } = store.getters;
-        if (isLoggedIn) {
-          return next(frontendURL(`accounts/${user.account_id}/dashboard`));
-        }
-        return next('/app/login');
-      }
-
-      return validateRouteAccess(to, from, next, store);
+      return validateAuthenticateRoutePermission(to, next, store);
     });
   });
 };
diff --git a/app/javascript/dashboard/routes/index.spec.js b/app/javascript/dashboard/routes/index.spec.js
index b9bf3c251..21ec30191 100644
--- a/app/javascript/dashboard/routes/index.spec.js
+++ b/app/javascript/dashboard/routes/index.spec.js
@@ -1,52 +1,17 @@
 import 'expect-more-jest';
-import {
-  validateAuthenticateRoutePermission,
-  validateRouteAccess,
-} from './index';
+import { validateAuthenticateRoutePermission } from './index';
 
 jest.mock('./dashboard/dashboard.routes', () => ({
   routes: [],
 }));
-jest.mock('./auth/auth.routes', () => ({
-  routes: [],
-}));
-jest.mock('./login/login.routes', () => ({
-  routes: [],
-}));
 window.roleWiseRoutes = {};
 
 describe('#validateAuthenticateRoutePermission', () => {
-  describe(`when route is not protected`, () => {
-    it(`should go to the dashboard when user is logged in`, () => {
-      const to = { name: 'login', params: { accountId: 1 } };
-      const from = { name: '', params: { accountId: 1 } };
-      const next = jest.fn();
-      const getters = {
-        isLoggedIn: true,
-        getCurrentUser: {
-          account_id: 1,
-          id: 1,
-          accounts: [{ id: 1, role: 'admin', status: 'active' }],
-        },
-      };
-      validateAuthenticateRoutePermission(to, from, next, { getters });
-      expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
-    });
-    it(`should go there when user is not logged in`, () => {
-      const to = { name: 'login', params: {} };
-      const from = { name: '', params: {} };
-      const next = jest.fn();
-      const getters = { isLoggedIn: false };
-      validateAuthenticateRoutePermission(to, from, next, { getters });
-      expect(next).toHaveBeenCalledWith();
-    });
-  });
   describe(`when route is protected`, () => {
     describe(`when user not logged in`, () => {
       it(`should redirect to login`, () => {
         // Arrange
         const to = { name: 'some-protected-route', params: { accountId: 1 } };
-        const from = { name: '' };
         const next = jest.fn();
         const getters = {
           isLoggedIn: false,
@@ -56,8 +21,10 @@ describe('#validateAuthenticateRoutePermission', () => {
             accounts: [],
           },
         };
-        validateAuthenticateRoutePermission(to, from, next, { getters });
-        expect(next).toHaveBeenCalledWith('/app/login');
+
+        expect(validateAuthenticateRoutePermission(to, next, { getters })).toBe(
+          '/app/login'
+        );
       });
     });
     describe(`when user is logged in`, () => {
@@ -65,7 +32,6 @@ describe('#validateAuthenticateRoutePermission', () => {
         it(`should redirect to dashboard`, () => {
           window.roleWiseRoutes.agent = ['dashboard'];
           const to = { name: 'admin', params: { accountId: 1 } };
-          const from = { name: '' };
           const next = jest.fn();
           const getters = {
             isLoggedIn: true,
@@ -75,7 +41,7 @@ describe('#validateAuthenticateRoutePermission', () => {
               accounts: [{ id: 1, role: 'agent', status: 'active' }],
             },
           };
-          validateAuthenticateRoutePermission(to, from, next, { getters });
+          validateAuthenticateRoutePermission(to, next, { getters });
           expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
         });
       });
@@ -83,7 +49,6 @@ describe('#validateAuthenticateRoutePermission', () => {
         it(`should go there`, () => {
           window.roleWiseRoutes.agent = ['dashboard', 'admin'];
           const to = { name: 'admin', params: { accountId: 1 } };
-          const from = { name: '' };
           const next = jest.fn();
           const getters = {
             isLoggedIn: true,
@@ -93,39 +58,10 @@ describe('#validateAuthenticateRoutePermission', () => {
               accounts: [{ id: 1, role: 'agent', status: 'active' }],
             },
           };
-          validateAuthenticateRoutePermission(to, from, next, { getters });
+          validateAuthenticateRoutePermission(to, next, { getters });
           expect(next).toHaveBeenCalledWith();
         });
       });
     });
   });
 });
-
-describe('#validateRouteAccess', () => {
-  it('returns to login if signup is disabled', () => {
-    window.chatwootConfig = { signupEnabled: 'false' };
-    const to = { name: 'auth_signup', meta: { requireSignupEnabled: true } };
-    const from = { name: '' };
-    const next = jest.fn();
-    validateRouteAccess(to, from, next, {});
-    expect(next).toHaveBeenCalledWith('/app/login');
-  });
-
-  it('returns next for an auth ignore route ', () => {
-    const to = { name: 'auth_confirmation' };
-    const from = { name: '' };
-    const next = jest.fn();
-
-    validateRouteAccess(to, from, next, {});
-    expect(next).toHaveBeenCalledWith();
-  });
-
-  it('returns route validation for everything else ', () => {
-    const to = { name: 'login' };
-    const from = { name: '' };
-    const next = jest.fn();
-
-    validateRouteAccess(to, from, next, { getters: { isLoggedIn: false } });
-    expect(next).toHaveBeenCalledWith();
-  });
-});
diff --git a/app/javascript/dashboard/routes/login/Login.vue b/app/javascript/dashboard/routes/login/Login.vue
deleted file mode 100644
index 7a04fd2c1..000000000
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <main class="medium-12 column login">
-    <section class="text-center medium-12 login__hero align-self-top">
-      <img
-        :src="globalConfig.logo"
-        :alt="globalConfig.installationName"
-        class="hero__logo"
-      />
-      <h2 class="hero__title">
-        {{
-          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
-        }}
-      </h2>
-    </section>
-    <section class="row align-center">
-      <div v-if="!email" class="small-12 medium-4 column">
-        <div class="login-box column align-self-top">
-          <GoogleOAuthButton
-            v-if="showGoogleOAuth()"
-            button-size="large"
-            class="oauth-reverse"
-          />
-          <form class="column log-in-form" @submit.prevent="login()">
-            <label :class="{ error: $v.credentials.email.$error }">
-              {{ $t('LOGIN.EMAIL.LABEL') }}
-              <input
-                v-model.trim="credentials.email"
-                type="text"
-                data-testid="email_input"
-                :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-                @input="$v.credentials.email.$touch"
-              />
-            </label>
-            <label :class="{ error: $v.credentials.password.$error }">
-              {{ $t('LOGIN.PASSWORD.LABEL') }}
-              <input
-                v-model.trim="credentials.password"
-                type="password"
-                data-testid="password_input"
-                :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-                @input="$v.credentials.password.$touch"
-              />
-            </label>
-            <woot-submit-button
-              :disabled="
-                $v.credentials.email.$invalid ||
-                  $v.credentials.password.$invalid ||
-                  loginApi.showLoading
-              "
-              :button-text="$t('LOGIN.SUBMIT')"
-              :loading="loginApi.showLoading"
-              button-class="large expanded"
-            />
-          </form>
-        </div>
-        <div class="text-center column sigin__footer">
-          <p v-if="!globalConfig.disableUserProfileUpdate">
-            <router-link to="auth/reset/password">
-              {{ $t('LOGIN.FORGOT_PASSWORD') }}
-            </router-link>
-          </p>
-          <p v-if="showSignupLink()">
-            <router-link to="auth/signup">
-              {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
-            </router-link>
-          </p>
-        </div>
-      </div>
-      <woot-spinner v-else size="" />
-    </section>
-  </main>
-</template>
-
-<script>
-import { required, email } from 'vuelidate/lib/validators';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import WootSubmitButton from 'components/buttons/FormSubmitButton';
-import { mapGetters } from 'vuex';
-import { parseBoolean } from '@chatwoot/utils';
-import GoogleOAuthButton from '../../components/ui/Auth/GoogleOAuthButton.vue';
-
-const ERROR_MESSAGES = {
-  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
-  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
-};
-
-export default {
-  components: {
-    WootSubmitButton,
-    GoogleOAuthButton,
-  },
-  mixins: [globalConfigMixin],
-  props: {
-    ssoAuthToken: { type: String, default: '' },
-    ssoAccountId: { type: String, default: '' },
-    ssoConversationId: { type: String, default: '' },
-    config: { type: String, default: '' },
-    email: { type: String, default: '' },
-    authError: { type: String, default: '' },
-  },
-  data() {
-    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
-      credentials: {
-        email: '',
-        password: '',
-      },
-      loginApi: {
-        message: '',
-        showLoading: false,
-      },
-      error: '',
-    };
-  },
-  validations: {
-    credentials: {
-      password: {
-        required,
-      },
-      email: {
-        required,
-        email,
-      },
-    },
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  created() {
-    if (this.ssoAuthToken) {
-      this.login();
-    }
-    if (this.authError) {
-      const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
-      this.showAlert(this.$t(message));
-      // wait for idle state
-      window.requestIdleCallback(() => {
-        // Remove the error query param from the url
-        const { query } = this.$route;
-        this.$router.replace({ query: { ...query, error: undefined } });
-      });
-    }
-  },
-  methods: {
-    showAlert(message) {
-      // Reset loading, current selected agent
-      this.loginApi.showLoading = false;
-      this.loginApi.message = message;
-      bus.$emit('newToastMessage', this.loginApi.message);
-    },
-    showSignupLink() {
-      return parseBoolean(window.chatwootConfig.signupEnabled);
-    },
-    showGoogleOAuth() {
-      return Boolean(window.chatwootConfig.googleOAuthClientId);
-    },
-    login() {
-      this.loginApi.showLoading = true;
-      const credentials = {
-        email: this.email
-          ? decodeURIComponent(this.email)
-          : this.credentials.email,
-        password: this.credentials.password,
-        sso_auth_token: this.ssoAuthToken,
-        ssoAccountId: this.ssoAccountId,
-        ssoConversationId: this.ssoConversationId,
-      };
-      this.$store
-        .dispatch('login', credentials)
-        .then(() => {
-          this.showAlert(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
-        })
-        .catch(response => {
-          // Reset URL Params if the authentication is invalid
-          if (this.email) {
-            window.location = '/app/login';
-          }
-
-          if (response && response.status === 401) {
-            const { errors } = response.data;
-            const hasAuthErrorMsg =
-              errors &&
-              errors.length &&
-              errors[0] &&
-              typeof errors[0] === 'string';
-            if (hasAuthErrorMsg) {
-              this.showAlert(errors[0]);
-            } else {
-              this.showAlert(this.$t('LOGIN.API.UNAUTH'));
-            }
-            return;
-          }
-          this.showAlert(this.$t('LOGIN.API.ERROR_MESSAGE'));
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.oauth-reverse {
-  display: flex;
-  flex-direction: column-reverse;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/login/login.routes.js b/app/javascript/dashboard/routes/login/login.routes.js
deleted file mode 100644
index 37e333a5b..000000000
--- a/app/javascript/dashboard/routes/login/login.routes.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Login from './Login';
-import { frontendURL } from '../../helper/URLHelper';
-
-export default {
-  routes: [
-    {
-      path: frontendURL('login'),
-      name: 'login',
-      component: Login,
-      props: route => ({
-        config: route.query.config,
-        email: route.query.email,
-        ssoAuthToken: route.query.sso_auth_token,
-        ssoAccountId: route.query.sso_account_id,
-        ssoConversationId: route.query.sso_conversation_id,
-        authError: route.query.error,
-      }),
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index f06ea3750..cc1129970 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -2,12 +2,7 @@ import Vue from 'vue';
 import types from '../mutation-types';
 import authAPI from '../../api/auth';
 
-import {
-  setUser,
-  clearCookiesOnLogout,
-  clearLocalStorageOnLogout,
-} from '../utils/api';
-import { getLoginRedirectURL } from '../../helper/URLHelper';
+import { setUser, clearCookiesOnLogout } from '../utils/api';
 
 const initialState = {
   currentUser: {
@@ -97,24 +92,6 @@ export const getters = {
 
 // actions
 export const actions = {
-  login(_, { ssoAccountId, ssoConversationId, ...credentials }) {
-    return new Promise((resolve, reject) => {
-      authAPI
-        .login(credentials)
-        .then(response => {
-          clearLocalStorageOnLogout();
-          window.location = getLoginRedirectURL({
-            ssoAccountId,
-            ssoConversationId,
-            user: response.data,
-          });
-          resolve();
-        })
-        .catch(error => {
-          reject(error);
-        });
-    });
-  },
   async validityCheck(context) {
     try {
       const response = await authAPI.validityCheck();
diff --git a/app/javascript/dashboard/store/utils/api.js b/app/javascript/dashboard/store/utils/api.js
index 54c8af5aa..32afbeb94 100644
--- a/app/javascript/dashboard/store/utils/api.js
+++ b/app/javascript/dashboard/store/utils/api.js
@@ -67,6 +67,9 @@ export const parseAPIErrorResponse = error => {
   if (error?.response?.data?.error) {
     return error?.response?.data?.error;
   }
+  if (error?.response?.data?.errors) {
+    return error?.response?.data?.errors[0];
+  }
   return error;
 };
 
diff --git a/app/javascript/packs/v3app.js b/app/javascript/packs/v3app.js
new file mode 100644
index 000000000..b510a587c
--- /dev/null
+++ b/app/javascript/packs/v3app.js
@@ -0,0 +1,61 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import VueRouter from 'vue-router';
+import Vuelidate from 'vuelidate';
+import i18n from 'dashboard/i18n';
+import * as Sentry from '@sentry/vue';
+import { Integrations } from '@sentry/tracing';
+import {
+  initializeAnalyticsEvents,
+  initializeChatwootEvents,
+} from 'dashboard/helper/scriptHelpers';
+import AnalyticsPlugin from 'dashboard/helper/AnalyticsHelper/plugin';
+import App from '../v3/App.vue';
+import router, { initalizeRouter } from '../v3/views/index';
+import store from '../v3/store';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+
+Vue.config.env = process.env;
+
+if (window.errorLoggingConfig) {
+  Sentry.init({
+    Vue,
+    dsn: window.errorLoggingConfig,
+    denyUrls: [
+      // Chrome extensions
+      /^chrome:\/\//i,
+      /chrome-extension:/i,
+      /extensions\//i,
+
+      // Locally saved copies
+      /file:\/\//i,
+
+      // Safari extensions.
+      /safari-web-extension:/i,
+      /safari-extension:/i,
+    ],
+    integrations: [new Integrations.BrowserTracing()],
+  });
+}
+
+Vue.use(VueRouter);
+Vue.use(VueI18n);
+Vue.use(Vuelidate);
+Vue.use(AnalyticsPlugin);
+Vue.component('fluent-icon', FluentIcon);
+
+const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
+
+window.bus = new Vue();
+initializeChatwootEvents();
+initializeAnalyticsEvents();
+initalizeRouter();
+window.onload = () => {
+  new Vue({
+    router,
+    store,
+    i18n: i18nConfig,
+    components: { App },
+    template: '<App/>',
+  }).$mount('#app');
+};
diff --git a/app/javascript/shared/components/Spinner.vue b/app/javascript/shared/components/Spinner.vue
index ec02b05cb..64a193708 100644
--- a/app/javascript/shared/components/Spinner.vue
+++ b/app/javascript/shared/components/Spinner.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="spinner" :class="`${size} ${colorScheme}`" />
+  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
 </template>
 <script>
 export default {
@@ -13,6 +13,15 @@ export default {
       default: '',
     },
   },
+  computed: {
+    colorSchemeClasses() {
+      if (this.colorScheme === 'primary') {
+        return 'before:!border-t-woot-500';
+      }
+
+      return this.colorScheme;
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index a7eb947e3..8ace54ef2 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -7,4 +7,5 @@ export const BUS_EVENTS = {
   TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
   ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
   WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
+  SHOW_TOAST: 'newToastMessage',
 };
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
new file mode 100644
index 000000000..503b9f80e
--- /dev/null
+++ b/app/javascript/v3/App.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="h-full w-full antialiased" :class="theme">
+    <router-view />
+    <snackbar-container />
+  </div>
+</template>
+<script>
+import SnackbarContainer from './components/SnackBar/Container.vue';
+
+export default {
+  components: { SnackbarContainer },
+  data() {
+    return { theme: 'light' };
+  },
+  mounted() {
+    this.setColorTheme();
+    this.listenToThemeChanges();
+  },
+  methods: {
+    setColorTheme() {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        this.theme = 'dark';
+      } else {
+        this.theme = 'light ';
+      }
+    },
+    listenToThemeChanges() {
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+      mql.onchange = e => {
+        if (e.matches) {
+          this.theme = 'dark';
+        } else {
+          this.theme = 'light';
+        }
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import 'shared/assets/fonts/plus-jakarta';
+@import 'shared/assets/stylesheets/colors';
+@import 'shared/assets/stylesheets/spacing';
+@import 'shared/assets/stylesheets/font-size';
+@import 'shared/assets/stylesheets/border-radius';
+
+html,
+body {
+  font-family: 'PlusJakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  @apply h-full w-full;
+
+  input,
+  select {
+    outline: none;
+  }
+}
+
+.text-link {
+  @apply text-woot-500 font-medium hover:text-woot-600;
+}
+
+.tooltip {
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-300 dark:text-slate-900;
+}
+</style>
diff --git a/app/javascript/v3/api/apiClient.js b/app/javascript/v3/api/apiClient.js
new file mode 100644
index 000000000..f8fdb5f51
--- /dev/null
+++ b/app/javascript/v3/api/apiClient.js
@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+const { apiHost = '' } = window.chatwootConfig || {};
+const wootAPI = axios.create({ baseURL: `${apiHost}/` });
+
+export default wootAPI;
diff --git a/app/javascript/v3/api/auth.js b/app/javascript/v3/api/auth.js
new file mode 100644
index 000000000..a4793d3d0
--- /dev/null
+++ b/app/javascript/v3/api/auth.js
@@ -0,0 +1,74 @@
+import {
+  setAuthCredentials,
+  throwErrorMessage,
+  clearLocalStorageOnLogout,
+} from 'dashboard/store/utils/api';
+import wootAPI from './apiClient';
+import { getLoginRedirectURL } from '../helpers/AuthHelper';
+
+export const login = async ({
+  ssoAccountId,
+  ssoConversationId,
+  ...credentials
+}) => {
+  try {
+    const response = await wootAPI.post('auth/sign_in', credentials);
+    setAuthCredentials(response);
+    clearLocalStorageOnLogout();
+    window.location = getLoginRedirectURL({
+      ssoAccountId,
+      ssoConversationId,
+      user: response.data.data,
+    });
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+};
+
+export const register = async creds => {
+  try {
+    const response = await wootAPI.post('api/v1/accounts.json', {
+      account_name: creds.accountName.trim(),
+      user_full_name: creds.fullName.trim(),
+      email: creds.email,
+      password: creds.password,
+      h_captcha_client_response: creds.hCaptchaClientResponse,
+    });
+    setAuthCredentials(response);
+    return response.data;
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+  return null;
+};
+
+export const verifyPasswordToken = async ({ confirmationToken }) => {
+  try {
+    const response = await wootAPI.post('auth/confirmation', {
+      confirmation_token: confirmationToken,
+    });
+    setAuthCredentials(response);
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+};
+
+export const setNewPassword = async ({
+  resetPasswordToken,
+  password,
+  confirmPassword,
+}) => {
+  try {
+    const response = await wootAPI.put('auth/password', {
+      reset_password_token: resetPasswordToken,
+      password_confirmation: confirmPassword,
+      password,
+    });
+    setAuthCredentials(response);
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+};
+
+export const resetPassword = async ({ email }) =>
+  wootAPI.post('auth/password', { email });
diff --git a/app/javascript/dashboard/api/testimonials.js b/app/javascript/v3/api/testimonials.js
similarity index 54%
rename from app/javascript/dashboard/api/testimonials.js
rename to app/javascript/v3/api/testimonials.js
index 2d24945a5..4aa667b47 100644
--- a/app/javascript/dashboard/api/testimonials.js
+++ b/app/javascript/v3/api/testimonials.js
@@ -1,6 +1,6 @@
-/* global axios */
 import wootConstants from 'dashboard/constants/globals';
+import wootAPI from './apiClient';
 
 export const getTestimonialContent = () => {
-  return axios.get(wootConstants.TESTIMONIAL_URL);
+  return wootAPI.get(wootConstants.TESTIMONIAL_URL);
 };
diff --git a/app/javascript/v3/components/Button/SubmitButton.vue b/app/javascript/v3/components/Button/SubmitButton.vue
new file mode 100644
index 000000000..ab4d86800
--- /dev/null
+++ b/app/javascript/v3/components/Button/SubmitButton.vue
@@ -0,0 +1,63 @@
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
+    @click="onClick"
+  >
+    <span>{{ buttonText }}</span>
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <spinner v-if="loading" />
+  </button>
+</template>
+
+<script>
+import Spinner from 'shared/components/Spinner';
+
+export default {
+  components: {
+    Spinner,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: '',
+    },
+    buttonClass: {
+      type: String,
+      default: '',
+    },
+    iconClass: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'submit',
+    },
+  },
+  computed: {
+    computedClass() {
+      return `
+        ${this.disabled ? 'opacity-40 hover:bg-woot-500' : ''}
+        ${this.buttonClass || ' '}
+      `;
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/components/Divider/SimpleDivider.vue b/app/javascript/v3/components/Divider/SimpleDivider.vue
new file mode 100644
index 000000000..e54af1747
--- /dev/null
+++ b/app/javascript/v3/components/Divider/SimpleDivider.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="relative my-4 section-separator">
+    <div class="absolute inset-0 flex items-center" aria-hidden="true">
+      <div class="w-full border-t border-slate-200 dark:border-slate-600" />
+    </div>
+    <div v-if="label" class="relative flex justify-center text-sm">
+      <span
+        class="bg-white dark:bg-slate-800 px-2 text-slate-500 dark:text-white"
+      >
+        {{ label }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
new file mode 100644
index 000000000..16497c336
--- /dev/null
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      :for="name"
+      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
+      :class="{ 'text-red-500': hasError }"
+    >
+      {{ label }}
+      <slot />
+    </label>
+    <div class="mt-1">
+      <input
+        :id="name"
+        :name="name"
+        :type="type"
+        autocomplete="off"
+        :required="required"
+        :placeholder="placeholder"
+        :value="value"
+        :class="{
+          'focus:ring-red-600 ring-red-600': hasError,
+          'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200': !hasError,
+        }"
+        class="block w-full rounded-md border-0 px-3 py-3 shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700 "
+        @input="onInput"
+        @blur="$emit('blur')"
+      />
+      <span
+        v-if="errorMessage && hasError"
+        class="text-xs leading-2 text-red-400"
+      >
+        {{ errorMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.spec.js b/app/javascript/v3/components/GoogleOauth/Button.spec.js
similarity index 56%
rename from app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.spec.js
rename to app/javascript/v3/components/GoogleOauth/Button.spec.js
index 47cd387e5..e1b50eb57 100644
--- a/app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.spec.js
+++ b/app/javascript/v3/components/GoogleOauth/Button.spec.js
@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
-import GoogleOAuthButton from './GoogleOAuthButton.vue';
+import GoogleOAuthButton from './Button.vue';
 
-function getWrapper(showSeparator, buttonSize) {
+function getWrapper(showSeparator) {
   return shallowMount(GoogleOAuthButton, {
-    propsData: { showSeparator: showSeparator, buttonSize: buttonSize },
+    propsData: { showSeparator: showSeparator },
     methods: {
       $t(text) {
         return text;
@@ -26,18 +26,17 @@ describe('GoogleOAuthButton.vue', () => {
 
   it('renders the OR separator if showSeparator is true', () => {
     const wrapper = getWrapper(true);
-    expect(wrapper.find('.separator').exists()).toBe(true);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
   });
 
   it('does not render the OR separator if showSeparator is false', () => {
     const wrapper = getWrapper(false);
-    expect(wrapper.find('.separator').exists()).toBe(false);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(false);
   });
 
   it('generates the correct Google Auth URL', () => {
     const wrapper = getWrapper();
     const googleAuthUrl = new URL(wrapper.vm.getGoogleAuthUrl());
-
     const params = googleAuthUrl.searchParams;
     expect(googleAuthUrl.origin).toBe('https://accounts.google.com');
     expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth/oauthchooseaccount');
@@ -47,23 +46,7 @@ describe('GoogleOAuthButton.vue', () => {
     );
     expect(params.get('response_type')).toBe('code');
     expect(params.get('scope')).toBe('email profile');
-  });
 
-  it('responds to buttonSize prop properly', () => {
-    let wrapper = getWrapper(true, 'tiny');
-    expect(wrapper.find('.button.tiny').exists()).toBe(true);
-
-    wrapper = getWrapper(true, 'small');
-    expect(wrapper.find('.button.small').exists()).toBe(true);
-
-    wrapper = getWrapper(true, 'large');
-    expect(wrapper.find('.button.large').exists()).toBe(true);
-
-    // should not render either
-    wrapper = getWrapper(true, 'default');
-    expect(wrapper.find('.button.small').exists()).toBe(false);
-    expect(wrapper.find('.button.tiny').exists()).toBe(false);
-    expect(wrapper.find('.button.large').exists()).toBe(false);
-    expect(wrapper.find('.button').exists()).toBe(true);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
   });
 });
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
new file mode 100644
index 000000000..0d4d2a866
--- /dev/null
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-col">
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
+        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
+      </span>
+    </a>
+    <simple-divider
+      v-if="showSeparator"
+      ref="divider"
+      :label="$t('COMMON.OR')"
+      class="uppercase"
+    />
+  </div>
+</template>
+
+<script>
+import SimpleDivider from '../Divider/SimpleDivider.vue';
+
+export default {
+  components: {
+    SimpleDivider,
+  },
+  props: {
+    showSeparator: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    getGoogleAuthUrl() {
+      // Ideally a request to /auth/google_oauth2 should be made
+      // Creating the URL manually because the devise-token-auth with
+      // omniauth has a standing issue on redirecting the post request
+      // https://github.com/lynndylanhurley/devise_token_auth/issues/1466
+      const baseUrl =
+        'https://accounts.google.com/o/oauth2/auth/oauthchooseaccount';
+      const clientId = window.chatwootConfig.googleOAuthClientId;
+      const redirectUri = window.chatwootConfig.googleOAuthCallbackUrl;
+      const responseType = 'code';
+      const scope = 'email profile';
+
+      // Build the query string
+      const queryString = new URLSearchParams({
+        client_id: clientId,
+        redirect_uri: redirectUri,
+        response_type: responseType,
+        scope: scope,
+      }).toString();
+
+      // Construct the full URL
+      return `${baseUrl}?${queryString}`;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/components/SnackBar/Container.vue b/app/javascript/v3/components/SnackBar/Container.vue
new file mode 100644
index 000000000..2c761fb65
--- /dev/null
+++ b/app/javascript/v3/components/SnackBar/Container.vue
@@ -0,0 +1,54 @@
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
+  >
+    <snackbar-item
+      v-for="snackbarAlertMessage in snackbarAlertMessages"
+      :key="snackbarAlertMessage.key"
+      :message="snackbarAlertMessage.message"
+      :action="snackbarAlertMessage.action"
+    />
+  </transition-group>
+</template>
+
+<script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import SnackbarItem from './Item';
+
+export default {
+  components: { SnackbarItem },
+  props: {
+    duration: {
+      type: Number,
+      default: 2500,
+    },
+  },
+
+  data() {
+    return {
+      snackbarAlertMessages: [],
+    };
+  },
+
+  mounted() {
+    bus.$on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  },
+  beforeDestroy() {
+    bus.$off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  },
+  methods: {
+    onNewToastMessage(message, action) {
+      this.snackbarAlertMessages.push({
+        key: new Date().getTime(),
+        message,
+        action,
+      });
+      window.setTimeout(() => {
+        this.snackbarAlertMessages.splice(0, 1);
+      }, this.duration);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/components/SnackBar/Item.vue b/app/javascript/v3/components/SnackBar/Item.vue
new file mode 100644
index 000000000..b87845ad6
--- /dev/null
+++ b/app/javascript/v3/components/SnackBar/Item.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
+    :class="isActionPresent ? 'justify-between' : 'justify-center'"
+  >
+    <div class="text-sm font-medium text-white">
+      {{ message }}
+    </div>
+    <div v-if="isActionPresent" class="ml-4">
+      <router-link v-if="action.type == 'link'" :to="action.to" class="">
+        {{ action.message }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+    action: {
+      type: Object,
+      default: () => ({}),
+    },
+    showButton: Boolean,
+    duration: {
+      type: [String, Number],
+      default: 3000,
+    },
+  },
+  computed: {
+    isActionPresent() {
+      return this.action && this.action.message;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/helpers/AuthHelper.js b/app/javascript/v3/helpers/AuthHelper.js
new file mode 100644
index 000000000..1eaea34e6
--- /dev/null
+++ b/app/javascript/v3/helpers/AuthHelper.js
@@ -0,0 +1,38 @@
+import Cookies from 'js-cookie';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+export const hasAuthCookie = () => {
+  return !!Cookies.getJSON('cw_d_session_info');
+};
+
+const getSSOAccountPath = ({ ssoAccountId, user }) => {
+  const { accounts = [], account_id = null } = user || {};
+  const ssoAccount = accounts.find(
+    account => account.id === Number(ssoAccountId)
+  );
+  let accountPath = '';
+  if (ssoAccount) {
+    accountPath = `accounts/${ssoAccountId}`;
+  } else if (accounts.length) {
+    // If the account id is not found, redirect to the first account
+    const accountId = account_id || accounts[0].id;
+    accountPath = `accounts/${accountId}`;
+  }
+  return accountPath;
+};
+
+export const getLoginRedirectURL = ({
+  ssoAccountId,
+  ssoConversationId,
+  user,
+}) => {
+  const accountPath = getSSOAccountPath({ ssoAccountId, user });
+  if (accountPath) {
+    if (ssoConversationId) {
+      return frontendURL(`${accountPath}/conversations/${ssoConversationId}`);
+    }
+    return frontendURL(`${accountPath}/dashboard`);
+  }
+  return DEFAULT_REDIRECT_URL;
+};
diff --git a/app/javascript/v3/helpers/CommonHelper.js b/app/javascript/v3/helpers/CommonHelper.js
new file mode 100644
index 000000000..cdd913769
--- /dev/null
+++ b/app/javascript/v3/helpers/CommonHelper.js
@@ -0,0 +1,3 @@
+export const replaceRouteWithReload = url => {
+  window.location = url;
+};
diff --git a/app/javascript/v3/helpers/RouteHelper.js b/app/javascript/v3/helpers/RouteHelper.js
new file mode 100644
index 000000000..db508ac13
--- /dev/null
+++ b/app/javascript/v3/helpers/RouteHelper.js
@@ -0,0 +1,50 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { clearBrowserSessionCookies } from 'dashboard/store/utils/api';
+import { hasAuthCookie } from './AuthHelper';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { replaceRouteWithReload } from './CommonHelper';
+
+const validateSSOLoginParams = to => {
+  const isLoginRoute = to.name === 'login';
+  const { email, sso_auth_token: ssoAuthToken } = to.query || {};
+  const hasValidSSOParams = email && ssoAuthToken;
+  return isLoginRoute && hasValidSSOParams;
+};
+
+export const validateRouteAccess = (to, next, chatwootConfig = {}) => {
+  // Pages with ignoreSession:true would be rendered
+  // even if there is an active session
+  // Used for confirmation or password reset pages
+  if (to.meta && to.meta.ignoreSession) {
+    next();
+    return;
+  }
+
+  if (validateSSOLoginParams(to)) {
+    clearBrowserSessionCookies();
+    next();
+    return;
+  }
+
+  // Redirect to dashboard if a cookie is present, the cookie
+  // cleanup and token validation happens in the application pack.
+  if (hasAuthCookie()) {
+    replaceRouteWithReload(DEFAULT_REDIRECT_URL);
+    return;
+  }
+
+  // If the URL is an invalid path, redirect to login page
+  // Disable navigation to signup page if signups are disabled
+  // Signup route has an attribute (requireSignupEnabled) in it's definition
+  const isAnInalidSignupNavigation =
+    chatwootConfig.signupEnabled !== 'true' &&
+    to.meta &&
+    to.meta.requireSignupEnabled;
+
+  if (!to.name || isAnInalidSignupNavigation) {
+    next(frontendURL('login'));
+    return;
+  }
+
+  next();
+};
diff --git a/app/javascript/v3/helpers/specs/AuthHelper.spec.js b/app/javascript/v3/helpers/specs/AuthHelper.spec.js
new file mode 100644
index 000000000..2bf3ba450
--- /dev/null
+++ b/app/javascript/v3/helpers/specs/AuthHelper.spec.js
@@ -0,0 +1,43 @@
+import { getLoginRedirectURL } from '../AuthHelper';
+
+describe('#URL Helpers', () => {
+  describe('getLoginRedirectURL', () => {
+    it('should return correct Account URL if account id is present', () => {
+      expect(
+        getLoginRedirectURL({
+          ssoAccountId: '7500',
+          user: {
+            accounts: [{ id: 7500, name: 'Test Account 7500' }],
+          },
+        })
+      ).toBe('/app/accounts/7500/dashboard');
+    });
+
+    it('should return correct conversation URL if account id and conversationId is present', () => {
+      expect(
+        getLoginRedirectURL({
+          ssoAccountId: '7500',
+          ssoConversationId: '752',
+          user: {
+            accounts: [{ id: 7500, name: 'Test Account 7500' }],
+          },
+        })
+      ).toBe('/app/accounts/7500/conversations/752');
+    });
+
+    it('should return default URL if account id is not present', () => {
+      expect(getLoginRedirectURL({ ssoAccountId: '7500', user: {} })).toBe(
+        '/app/'
+      );
+      expect(
+        getLoginRedirectURL({
+          ssoAccountId: '7500',
+          user: {
+            accounts: [{ id: '7501', name: 'Test Account 7501' }],
+          },
+        })
+      ).toBe('/app/accounts/7501/dashboard');
+      expect(getLoginRedirectURL('7500', null)).toBe('/app/');
+    });
+  });
+});
diff --git a/app/javascript/v3/helpers/specs/RouteHelper.spec.js b/app/javascript/v3/helpers/specs/RouteHelper.spec.js
new file mode 100644
index 000000000..9c699a44f
--- /dev/null
+++ b/app/javascript/v3/helpers/specs/RouteHelper.spec.js
@@ -0,0 +1,69 @@
+import { validateRouteAccess } from '../RouteHelper';
+import { clearBrowserSessionCookies } from 'dashboard/store/utils/api';
+import { replaceRouteWithReload } from '../CommonHelper';
+import Cookies from 'js-cookie';
+
+const next = jest.fn();
+jest.mock('dashboard/store/utils/api', () => ({
+  clearBrowserSessionCookies: jest.fn(),
+}));
+jest.mock('../CommonHelper', () => ({ replaceRouteWithReload: jest.fn() }));
+
+jest.mock('js-cookie', () => ({
+  getJSON: jest.fn(),
+}));
+
+Cookies.getJSON.mockReturnValueOnce(true).mockReturnValue(false);
+describe('#validateRouteAccess', () => {
+  it('reset cookies and continues to the login page if the SSO parameters are present', () => {
+    validateRouteAccess(
+      {
+        name: 'login',
+        query: { sso_auth_token: 'random_token', email: 'random@email.com' },
+      },
+      next
+    );
+    expect(clearBrowserSessionCookies).toHaveBeenCalledTimes(1);
+    expect(next).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignore session and continue to the page if the ignoreSession is present in route definition', () => {
+    validateRouteAccess(
+      {
+        name: 'login',
+        meta: { ignoreSession: true },
+      },
+      next
+    );
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledTimes(1);
+  });
+
+  it('redirects to dashboard if auth cookie is present', () => {
+    Cookies.getJSON.mockImplementation(() => true);
+    validateRouteAccess({ name: 'login' }, next);
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(replaceRouteWithReload).toHaveBeenCalledWith('/app/');
+    expect(next).not.toHaveBeenCalled();
+  });
+
+  it('redirects to login if route is empty', () => {
+    validateRouteAccess({}, next);
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledWith('/app/login');
+  });
+
+  it('redirects to login if signup is disabled', () => {
+    validateRouteAccess({ meta: { requireSignupEnabled: true } }, next, {
+      signupEnabled: 'true',
+    });
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledWith('/app/login');
+  });
+
+  it('continues to the route in every other case', () => {
+    validateRouteAccess({ name: 'reset_password' }, next);
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledWith();
+  });
+});
diff --git a/app/javascript/v3/store/index.js b/app/javascript/v3/store/index.js
new file mode 100644
index 000000000..7cc5cd6fa
--- /dev/null
+++ b/app/javascript/v3/store/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import globalConfig from 'shared/store/globalConfig';
+
+Vue.use(Vuex);
+export default new Vuex.Store({
+  modules: {
+    globalConfig,
+  },
+});
diff --git a/app/javascript/dashboard/routes/auth/Confirmation.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
similarity index 60%
rename from app/javascript/dashboard/routes/auth/Confirmation.vue
rename to app/javascript/v3/views/auth/confirmation/Index.vue
index 305e826f7..2949ac79b 100644
--- a/app/javascript/dashboard/routes/auth/Confirmation.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -1,14 +1,16 @@
 <template>
-  <loading-state :message="$t('CONFIRM_EMAIL')" />
+  <div class="flex items-center justify-center h-full w-full">
+    <spinner color-scheme="primary" size="" />
+    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
+  </div>
 </template>
 <script>
-import LoadingState from '../../components/widgets/LoadingState';
-import Auth from '../../api/auth';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { verifyPasswordToken } from '../../../api/auth';
+import Spinner from 'shared/components/Spinner';
+
 export default {
-  components: {
-    LoadingState,
-  },
+  components: { Spinner },
   props: {
     confirmationToken: {
       type: String,
@@ -21,7 +23,7 @@ export default {
   methods: {
     async confirmToken() {
       try {
-        await Auth.verifyPasswordToken({
+        await verifyPasswordToken({
           confirmationToken: this.confirmationToken,
         });
         window.location = DEFAULT_REDIRECT_URL;
diff --git a/app/javascript/dashboard/routes/auth/PasswordEdit.vue b/app/javascript/v3/views/auth/password/Edit.vue
similarity index 52%
rename from app/javascript/dashboard/routes/auth/PasswordEdit.vue
rename to app/javascript/v3/views/auth/password/Edit.vue
index 7038788fc..e72f2dfb0 100644
--- a/app/javascript/dashboard/routes/auth/PasswordEdit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -1,59 +1,63 @@
 <template>
-  <form
-    class="login-box medium-4 column align-self-middle"
-    @submit.prevent="login()"
+  <div
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
   >
-    <div class="column log-in-form">
-      <h4>{{ $t('SET_NEW_PASSWORD.TITLE') }}</h4>
-      <label :class="{ error: $v.credentials.password.$error }">
-        {{ $t('LOGIN.PASSWORD.LABEL') }}
-        <input
+    <form
+      class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submitForm"
+    >
+      <h1
+        class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
+      >
+        {{ $t('SET_NEW_PASSWORD.TITLE') }}
+      </h1>
+
+      <div class="column log-in-form space-y-5">
+        <form-input
           v-model.trim="credentials.password"
+          class="mt-3"
+          name="password"
           type="password"
+          :has-error="$v.credentials.password.$error"
+          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
           :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-          @input="$v.credentials.password.$touch"
+          @blur="$v.credentials.password.$touch"
         />
-        <span v-if="$v.credentials.password.$error" class="message">
-          {{ $t('SET_NEW_PASSWORD.PASSWORD.ERROR') }}
-        </span>
-      </label>
-      <label :class="{ error: $v.credentials.confirmPassword.$error }">
-        {{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL') }}
-        <input
+        <form-input
           v-model.trim="credentials.confirmPassword"
+          class="mt-3"
+          name="confirm_password"
           type="password"
+          :has-error="$v.credentials.confirmPassword.$error"
+          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
           :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
-          @input="$v.credentials.confirmPassword.$touch"
+          @blur="$v.credentials.confirmPassword.$touch"
         />
-        <span v-if="$v.credentials.confirmPassword.$error" class="message">
-          {{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR') }}
-        </span>
-      </label>
-      <woot-submit-button
-        :disabled="
-          $v.credentials.password.$invalid ||
-            $v.credentials.confirmPassword.$invalid ||
-            newPasswordAPI.showLoading
-        "
-        :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
-        :loading="newPasswordAPI.showLoading"
-        button-class="expanded"
-      />
-      <!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
-    </div>
-  </form>
+        <submit-button
+          :disabled="
+            $v.credentials.password.$invalid ||
+              $v.credentials.confirmPassword.$invalid ||
+              newPasswordAPI.showLoading
+          "
+          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :loading="newPasswordAPI.showLoading"
+        />
+      </div>
+    </form>
+  </div>
 </template>
 
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
-import Auth from '../../api/auth';
-
-import WootSubmitButton from '../../components/buttons/FormSubmitButton';
+import FormInput from '../../../components/Form/Input.vue';
+import SubmitButton from '../../../components/Button/SubmitButton.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { setNewPassword } from '../../../api/auth';
 
 export default {
   components: {
-    WootSubmitButton,
+    FormInput,
+    SubmitButton,
   },
   props: {
     resetPasswordToken: { type: String, default: '' },
@@ -106,25 +110,21 @@ export default {
       this.newPasswordAPI.showLoading = false;
       bus.$emit('newToastMessage', message);
     },
-    login() {
+    submitForm() {
       this.newPasswordAPI.showLoading = true;
       const credentials = {
         confirmPassword: this.credentials.confirmPassword,
         password: this.credentials.password,
         resetPasswordToken: this.resetPasswordToken,
       };
-      Auth.setNewPassword(credentials)
-        .then(res => {
-          if (res.status === 200) {
-            window.location = DEFAULT_REDIRECT_URL;
-          }
+      setNewPassword(credentials)
+        .then(() => {
+          window.location = DEFAULT_REDIRECT_URL;
         })
         .catch(error => {
-          let errorMessage = this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE');
-          if (error?.data?.message) {
-            errorMessage = error.data.message;
-          }
-          this.showAlert(errorMessage);
+          this.showAlert(
+            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
+          );
         });
     },
   },
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
new file mode 100644
index 000000000..58b5531dd
--- /dev/null
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
+  >
+    <form
+      class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submit"
+    >
+      <h1
+        class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
+      >
+        {{ $t('RESET_PASSWORD.TITLE') }}
+      </h1>
+      <p
+        class="text-sm text-slate-600 dark:text-woot-50 tracking-normal font-normal leading-6 mb-4"
+      >
+        {{
+          useInstallationName(
+            $t('RESET_PASSWORD.DESCRIPTION'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
+      <div class="column log-in-form space-y-5">
+        <form-input
+          v-model.trim="credentials.email"
+          name="email_address"
+          :has-error="$v.credentials.email.$error"
+          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
+          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
+          @input="$v.credentials.email.$touch"
+        />
+        <SubmitButton
+          :disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
+          :button-text="$t('RESET_PASSWORD.SUBMIT')"
+          :loading="resetPassword.showLoading"
+        />
+      </div>
+      <p class="text-sm text-slate-600 dark:text-woot-50 mt-4 -mb-1">
+        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
+        <router-link to="/auth/login" class="text-link">
+          {{ $t('COMMON.CLICK_HERE') }}.
+        </router-link>
+      </p>
+    </form>
+  </div>
+</template>
+
+<script>
+import { required, minLength, email } from 'vuelidate/lib/validators';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { mapGetters } from 'vuex';
+import FormInput from '../../../../components/Form/Input.vue';
+import { resetPassword } from '../../../../api/auth';
+import SubmitButton from '../../../../components/Button/SubmitButton.vue';
+
+export default {
+  components: { FormInput, SubmitButton },
+  mixins: [globalConfigMixin],
+  data() {
+    return {
+      credentials: { email: '' },
+      resetPassword: {
+        message: '',
+        showLoading: false,
+      },
+      error: '',
+    };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+  },
+  validations: {
+    credentials: {
+      email: {
+        required,
+        email,
+        minLength: minLength(4),
+      },
+    },
+  },
+  methods: {
+    showAlert(message) {
+      // Reset loading, current selected agent
+      this.resetPassword.showLoading = false;
+      bus.$emit('newToastMessage', message);
+    },
+    submit() {
+      this.resetPassword.showLoading = true;
+      resetPassword(this.credentials)
+        .then(res => {
+          let successMessage = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
+          if (res.data && res.data.message) {
+            successMessage = res.data.message;
+          }
+          this.showAlert(successMessage);
+        })
+        .catch(error => {
+          let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
+          if (error?.response?.data?.message) {
+            errorMessage = error.response.data.message;
+          }
+          this.showAlert(errorMessage);
+        });
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
new file mode 100644
index 000000000..e1621db18
--- /dev/null
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="h-full w-full dark:bg-slate-900">
+    <div v-show="!isLoading" class="flex h-full">
+      <div
+        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
+      >
+        <div class="px-8 max-w-[560px] w-full overflow-auto">
+          <div class="mb-4">
+            <img
+              :src="globalConfig.logo"
+              :alt="globalConfig.installationName"
+              class="h-8 w-auto block dark:hidden"
+            />
+            <img
+              v-if="globalConfig.logoDark"
+              :src="globalConfig.logoDark"
+              :alt="globalConfig.installationName"
+              class="h-8 w-auto hidden dark:block"
+            />
+            <h2
+              class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
+            >
+              {{ $t('REGISTER.TRY_WOOT') }}
+            </h2>
+          </div>
+          <signup-form />
+          <div class="text-sm text-slate-800 dark:text-woot-50 px-1">
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
+            <router-link class="text-link" to="/app/login">
+              {{
+                useInstallationName(
+                  $t('LOGIN.TITLE'),
+                  globalConfig.installationName
+                )
+              }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+      <testimonials
+        v-if="isAChatwootInstance"
+        class="flex-1"
+        @resize-containers="resizeContainers"
+      />
+    </div>
+    <div
+      v-show="isLoading"
+      class="flex items-center justify-center h-full w-full"
+    >
+      <spinner color-scheme="primary" size="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SignupForm from './components/Signup/Form.vue';
+import Testimonials from './components/Testimonials/Index.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    SignupForm,
+    Spinner,
+    Testimonials,
+  },
+  mixins: [globalConfigMixin],
+  data() {
+    return { isLoading: false };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    isAChatwootInstance() {
+      return this.globalConfig.installationName === 'Chatwoot';
+    },
+  },
+  beforeMount() {
+    this.isLoading = this.isAChatwootInstance;
+  },
+  methods: {
+    resizeContainers() {
+      this.isLoading = false;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/auth/components/AuthSubmitButton.vue b/app/javascript/v3/views/auth/signup/components/AuthSubmitButton.vue
similarity index 100%
rename from app/javascript/dashboard/routes/auth/components/AuthSubmitButton.vue
rename to app/javascript/v3/views/auth/signup/components/AuthSubmitButton.vue
diff --git a/app/javascript/dashboard/routes/auth/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
similarity index 50%
rename from app/javascript/dashboard/routes/auth/components/Signup/Form.vue
rename to app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index d222b47aa..898e26ddd 100644
--- a/app/javascript/dashboard/routes/auth/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -1,101 +1,103 @@
 <template>
-  <div>
-    <form @submit.prevent="submit">
-      <div class="input-wrap">
-        <div class="input-wrap__two-column">
-          <auth-input
-            v-model.trim="credentials.fullName"
-            :class="{ error: $v.credentials.fullName.$error }"
-            :label="$t('REGISTER.FULL_NAME.LABEL')"
-            icon-name="person"
-            :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-            :error="
-              $v.credentials.fullName.$error
-                ? $t('REGISTER.FULL_NAME.ERROR')
-                : ''
-            "
-            @blur="$v.credentials.fullName.$touch"
-          />
-          <auth-input
-            v-model.trim="credentials.accountName"
-            :class="{ error: $v.credentials.accountName.$error }"
-            icon-name="building-bank"
-            :label="$t('REGISTER.COMPANY_NAME.LABEL')"
-            :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
-            :error="
-              $v.credentials.accountName.$error
-                ? $t('REGISTER.COMPANY_NAME.ERROR')
-                : ''
-            "
-            @blur="$v.credentials.accountName.$touch"
-          />
-        </div>
-        <auth-input
-          v-model.trim="credentials.email"
-          type="email"
-          :class="{ error: $v.credentials.email.$error }"
-          icon-name="mail"
-          :label="$t('REGISTER.EMAIL.LABEL')"
-          :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-          :error="$v.credentials.email.$error ? $t('REGISTER.EMAIL.ERROR') : ''"
-          @blur="$v.credentials.email.$touch"
+  <div class="flex-1 overflow-auto px-1">
+    <form class="space-y-3" @submit.prevent="submit">
+      <div class="flex">
+        <form-input
+          v-model.trim="credentials.fullName"
+          name="full_name"
+          class="flex-1"
+          :class="{ error: $v.credentials.fullName.$error }"
+          :label="$t('REGISTER.FULL_NAME.LABEL')"
+          :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
+          :has-error="$v.credentials.fullName.$error"
+          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+          @blur="$v.credentials.fullName.$touch"
         />
-        <auth-input
-          v-model.trim="credentials.password"
-          type="password"
-          :class="{ error: $v.credentials.password.$error }"
-          icon-name="lock-closed"
-          :label="$t('LOGIN.PASSWORD.LABEL')"
-          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-          :error="passwordErrorText"
-          @blur="$v.credentials.password.$touch"
+        <form-input
+          v-model.trim="credentials.accountName"
+          name="account_name"
+          class="flex-1 ml-2"
+          :class="{ error: $v.credentials.accountName.$error }"
+          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
+          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
+          :has-error="$v.credentials.accountName.$error"
+          :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
+          @blur="$v.credentials.accountName.$touch"
         />
       </div>
-      <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
+      <form-input
+        v-model.trim="credentials.email"
+        type="email"
+        name="email_address"
+        :class="{ error: $v.credentials.email.$error }"
+        :label="$t('REGISTER.EMAIL.LABEL')"
+        :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
+        :has-error="$v.credentials.email.$error"
+        :error-message="$t('REGISTER.EMAIL.ERROR')"
+        @blur="$v.credentials.email.$touch"
+      />
+      <form-input
+        v-model.trim="credentials.password"
+        type="password"
+        name="password"
+        :class="{ error: $v.credentials.password.$error }"
+        :label="$t('LOGIN.PASSWORD.LABEL')"
+        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+        :has-error="$v.credentials.password.$error"
+        :error-message="passwordErrorText"
+        @blur="$v.credentials.password.$touch"
+      />
+      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
         <vue-hcaptcha
           ref="hCaptcha"
           :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
           :sitekey="globalConfig.hCaptchaSiteKey"
           @verify="onRecaptchaVerified"
         />
-        <span v-if="!hasAValidCaptcha && didCaptchaReset" class="captcha-error">
+        <span
+          v-if="!hasAValidCaptcha && didCaptchaReset"
+          class="text-xs text-red-400"
+        >
           {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
         </span>
       </div>
-      <auth-submit-button
-        :label="$t('REGISTER.SUBMIT')"
-        :is-disabled="isSignupInProgress || !hasAValidCaptcha"
-        :is-loading="isSignupInProgress"
-        icon="arrow-chevron-right"
+      <submit-button
+        :button-text="$t('REGISTER.SUBMIT')"
+        :disabled="isSignupInProgress || !hasAValidCaptcha"
+        :loading="isSignupInProgress"
+        icon-class="arrow-chevron-right"
       />
     </form>
-    <GoogleOAuthButton v-if="showGoogleOAuth()">
+    <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
       {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
     </GoogleOAuthButton>
-    <p v-dompurify-html="termsLink" class="accept--terms" />
+    <p
+      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
+      v-html="termsLink"
+    />
   </div>
 </template>
 
 <script>
 import { required, minLength, email } from 'vuelidate/lib/validators';
-import Auth from '../../../../api/auth';
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
-import AuthInput from '../AuthInput.vue';
-import AuthSubmitButton from '../AuthSubmitButton.vue';
+import FormInput from '../../../../../components/Form/Input.vue';
+import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
-import GoogleOAuthButton from 'dashboard/components/ui/Auth/GoogleOAuthButton.vue';
+import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
+import { register } from '../../../../../api/auth';
 var CompanyEmailValidator = require('company-email-validator');
 
 export default {
   components: {
-    AuthInput,
-    AuthSubmitButton,
-    VueHcaptcha,
+    FormInput,
     GoogleOAuthButton,
+    SubmitButton,
+    VueHcaptcha,
   },
   mixins: [globalConfigMixin, alertMixin],
   data() {
@@ -165,6 +167,9 @@ export default {
       }
       return '';
     },
+    showGoogleOAuth() {
+      return Boolean(window.chatwootConfig.googleOAuthClientId);
+    },
   },
   methods: {
     async submit() {
@@ -175,16 +180,12 @@ export default {
       }
       this.isSignupInProgress = true;
       try {
-        const response = await Auth.register(this.credentials);
-        if (response.status === 200) {
-          window.location = DEFAULT_REDIRECT_URL;
-        }
+        await register(this.credentials);
+        window.location = DEFAULT_REDIRECT_URL;
       } catch (error) {
-        let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
-        if (error.response && error.response.data.message) {
-          this.resetCaptcha();
-          errorMessage = error.response.data.message;
-        }
+        let errorMessage =
+          error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
+        this.resetCaptcha();
         this.showAlert(errorMessage);
       } finally {
         this.isSignupInProgress = false;
@@ -194,9 +195,6 @@ export default {
       this.credentials.hCaptchaClientResponse = token;
       this.didCaptchaReset = false;
     },
-    showGoogleOAuth() {
-      return Boolean(window.chatwootConfig.googleOAuthClientId);
-    },
     resetCaptcha() {
       if (!this.globalConfig.hCaptchaSiteKey) {
         return;
@@ -210,13 +208,6 @@ export default {
 </script>
 <style scoped lang="scss">
 .h-captcha--box {
-  margin-bottom: var(--space-small);
-
-  .captcha-error {
-    color: var(--r-400);
-    font-size: var(--font-size-small);
-  }
-
   &::v-deep .error {
     iframe {
       border: 1px solid var(--r-500);
@@ -224,32 +215,4 @@ export default {
     }
   }
 }
-
-.accept--terms {
-  margin: var(--space-normal) 0 var(--space-smaller) 0;
-}
-
-.input-wrap {
-  .input-wrap__two-column {
-    display: grid;
-    gap: 1.6rem;
-    grid-template-columns: repeat(2, minmax(100px, 1fr));
-  }
-}
-
-.separator {
-  display: flex;
-  align-items: center;
-  margin: 2rem 0rem;
-  gap: var(--space-normal);
-  color: var(--s-300);
-  font-size: var(--font-size-small);
-  &::before,
-  &::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: var(--s-100);
-  }
-}
 </style>
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
new file mode 100644
index 000000000..be15a8575
--- /dev/null
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="testimonials.length"
+    class="hidden bg-woot-400 dark:bg-woot-800 overflow-hidden relative xl:flex flex-1"
+  >
+    <img
+      src="/assets/images/auth/top-left.svg"
+      class="left-0 absolute h-40 w-40 top-0"
+    />
+    <img
+      src="/assets/images/auth/bottom-right.svg"
+      class="right-0 absolute h-40 w-40 bottom-0"
+    />
+    <img
+      src="/assets/images/auth/auth--bg.svg"
+      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
+    />
+    <div class="flex items-center justify-center flex-col h-full w-full z-50">
+      <div class="flex items-start justify-center p-6">
+        <testimonial-card
+          v-for="(testimonial, index) in testimonials"
+          :key="testimonial.id"
+          :review-content="testimonial.authorReview"
+          :author-image="testimonial.authorImage"
+          :author-name="testimonial.authorName"
+          :author-designation="testimonial.authorCompany"
+          :class="!index ? 'mt-[20%] -mr-4 z-50' : ''"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TestimonialCard from './TestimonialCard.vue';
+import { getTestimonialContent } from '../../../../../api/testimonials';
+export default {
+  components: { TestimonialCard },
+  data() {
+    return { testimonials: [] };
+  },
+  beforeMount() {
+    this.fetchTestimonials();
+  },
+  methods: {
+    async fetchTestimonials() {
+      try {
+        const { data } = await getTestimonialContent();
+        this.testimonials = data;
+      } catch (error) {
+        // Ignoring the error as the UI wouldn't break
+      } finally {
+        this.$emit('resize-containers', !!this.testimonials.length);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.center--img {
+}
+</style>
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
new file mode 100644
index 000000000..af8341379
--- /dev/null
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
+  >
+    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
+      {{ reviewContent }}
+    </p>
+    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
+      <div class="bg-white rounded-full p-1">
+        <img :src="authorImage" class="h-8 w-8 rounded-full" />
+      </div>
+      <div class="ml-2">
+        <div class="text-sm font-medium">{{ authorName }}</div>
+        <div class="text-xs">{{ authorDesignation }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    reviewContent: {
+      type: String,
+      default: '',
+    },
+    authorImage: {
+      type: String,
+      default: '',
+    },
+    authorName: {
+      type: String,
+      default: '',
+    },
+    authorDesignation: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/views/index.js b/app/javascript/v3/views/index.js
new file mode 100644
index 000000000..57da18116
--- /dev/null
+++ b/app/javascript/v3/views/index.js
@@ -0,0 +1,20 @@
+import VueRouter from 'vue-router';
+
+import routes from './routes';
+import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
+import { validateRouteAccess } from '../helpers/RouteHelper';
+
+export const router = new VueRouter({ mode: 'history', routes });
+
+export const initalizeRouter = () => {
+  router.beforeEach((to, _, next) => {
+    AnalyticsHelper.page(to.name || '', {
+      path: to.path,
+      name: to.name,
+    });
+
+    return validateRouteAccess(to, next, window.chatwootConfig);
+  });
+};
+
+export default router;
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
new file mode 100644
index 000000000..29c442cf2
--- /dev/null
+++ b/app/javascript/v3/views/login/Index.vue
@@ -0,0 +1,201 @@
+<template>
+  <main
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
+  >
+    <section class="max-w-5xl mx-auto">
+      <img
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
+        class="mx-auto h-8 w-auto block dark:hidden"
+      />
+      <img
+        v-if="globalConfig.logoDark"
+        :src="globalConfig.logoDark"
+        :alt="globalConfig.installationName"
+        class="mx-auto h-8 w-auto hidden dark:block"
+      />
+      <h2
+        class="mt-6 text-center text-3xl font-medium text-slate-900 dark:text-woot-50"
+      >
+        {{
+          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
+        }}
+      </h2>
+      <p
+        v-if="showSignupLink"
+        class="mt-3 text-center text-sm text-slate-600 dark:text-slate-400"
+      >
+        {{ $t('COMMON.OR') }}
+        <router-link to="auth/signup" class="text-link">
+          {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
+        </router-link>
+      </p>
+    </section>
+    <section
+      class="sm:mx-auto mt-11 sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
+      :class="{ 'mb-8 mt-15': !showGoogleOAuth }"
+    >
+      <div v-if="!email">
+        <GoogleOAuthButton v-if="showGoogleOAuth" />
+        <form class="space-y-5" @submit.prevent="submitLogin">
+          <form-input
+            v-model.trim="credentials.email"
+            name="email_address"
+            type="text"
+            data-testid="email_input"
+            required
+            :label="$t('LOGIN.EMAIL.LABEL')"
+            :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
+            :has-error="$v.credentials.email.$error"
+            @input="$v.credentials.email.$touch"
+          />
+          <form-input
+            v-model.trim="credentials.password"
+            type="password"
+            name="password"
+            data-testid="password_input"
+            required
+            :label="$t('LOGIN.PASSWORD.LABEL')"
+            :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
+            :has-error="$v.credentials.password.$error"
+            @input="$v.credentials.password.$touch"
+          >
+            <p v-if="!globalConfig.disableUserProfileUpdate">
+              <router-link to="auth/reset/password" class="text-link">
+                {{ $t('LOGIN.FORGOT_PASSWORD') }}
+              </router-link>
+            </p>
+          </form-input>
+          <submit-button
+            :disabled="
+              $v.credentials.email.$invalid ||
+                $v.credentials.password.$invalid ||
+                loginApi.showLoading
+            "
+            :button-text="$t('LOGIN.SUBMIT')"
+            :loading="loginApi.showLoading"
+          />
+        </form>
+      </div>
+      <div v-else class="flex items-center justify-center">
+        <spinner color-scheme="primary" size="" />
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import { required, email } from 'vuelidate/lib/validators';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SubmitButton from '../../components/Button/SubmitButton';
+import { mapGetters } from 'vuex';
+import { parseBoolean } from '@chatwoot/utils';
+import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
+import FormInput from '../../components/Form/Input.vue';
+import { login } from '../../api/auth';
+import Spinner from 'shared/components/Spinner';
+const ERROR_MESSAGES = {
+  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
+  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
+};
+
+export default {
+  components: {
+    FormInput,
+    GoogleOAuthButton,
+    Spinner,
+    SubmitButton,
+  },
+  mixins: [globalConfigMixin],
+  props: {
+    ssoAuthToken: { type: String, default: '' },
+    ssoAccountId: { type: String, default: '' },
+    ssoConversationId: { type: String, default: '' },
+    config: { type: String, default: '' },
+    email: { type: String, default: '' },
+    authError: { type: String, default: '' },
+  },
+  data() {
+    return {
+      // We need to initialize the component with any
+      // properties that will be used in it
+      credentials: {
+        email: '',
+        password: '',
+      },
+      loginApi: {
+        message: '',
+        showLoading: false,
+      },
+      error: '',
+    };
+  },
+  validations: {
+    credentials: {
+      password: {
+        required,
+      },
+      email: {
+        required,
+        email,
+      },
+    },
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    showGoogleOAuth() {
+      return Boolean(window.chatwootConfig.googleOAuthClientId);
+    },
+    showSignupLink() {
+      return parseBoolean(window.chatwootConfig.signupEnabled);
+    },
+  },
+  created() {
+    if (this.ssoAuthToken) {
+      this.submitLogin();
+    }
+    if (this.authError) {
+      const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
+      this.showAlert(this.$t(message));
+      // wait for idle state
+      window.requestIdleCallback(() => {
+        // Remove the error query param from the url
+        const { query } = this.$route;
+        this.$router.replace({ query: { ...query, error: undefined } });
+      });
+    }
+  },
+  methods: {
+    showAlert(message) {
+      // Reset loading, current selected agent
+      this.loginApi.showLoading = false;
+      this.loginApi.message = message;
+      bus.$emit('newToastMessage', this.loginApi.message);
+    },
+    submitLogin() {
+      this.loginApi.showLoading = true;
+      const credentials = {
+        email: this.email
+          ? decodeURIComponent(this.email)
+          : this.credentials.email,
+        password: this.credentials.password,
+        sso_auth_token: this.ssoAuthToken,
+        ssoAccountId: this.ssoAccountId,
+        ssoConversationId: this.ssoConversationId,
+      };
+
+      login(credentials)
+        .then(() => {
+          this.showAlert(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
+        })
+        .catch(response => {
+          // Reset URL Params if the authentication is invalid
+          if (this.email) {
+            window.location = '/app/login';
+          }
+          this.showAlert(response?.message || this.$t('LOGIN.API.UNAUTH'));
+        });
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/views/routes.js b/app/javascript/v3/views/routes.js
new file mode 100644
index 000000000..6049530be
--- /dev/null
+++ b/app/javascript/v3/views/routes.js
@@ -0,0 +1,56 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+const Login = () => import('./login/Index.vue');
+const Signup = () => import('./auth/signup/Index.vue');
+const ResetPassword = () => import('./auth/reset/password/Index.vue');
+const Confirmation = () => import('./auth/confirmation/Index.vue');
+const PasswordEdit = () => import('./auth/password/Edit.vue');
+
+export default [
+  {
+    path: frontendURL('login'),
+    name: 'login',
+    component: Login,
+    props: route => ({
+      config: route.query.config,
+      email: route.query.email,
+      ssoAuthToken: route.query.sso_auth_token,
+      ssoAccountId: route.query.sso_account_id,
+      ssoConversationId: route.query.sso_conversation_id,
+      authError: route.query.error,
+    }),
+  },
+  {
+    path: frontendURL('auth/signup'),
+    name: 'auth_signup',
+    component: Signup,
+    meta: { requireSignupEnabled: true },
+  },
+  {
+    path: frontendURL('auth/confirmation'),
+    name: 'auth_confirmation',
+    component: Confirmation,
+    meta: { ignoreSession: true },
+    props: route => ({
+      config: route.query.config,
+      confirmationToken: route.query.confirmation_token,
+      redirectUrl: route.query.route_url,
+    }),
+  },
+  {
+    path: frontendURL('auth/password/edit'),
+    name: 'auth_password_edit',
+    component: PasswordEdit,
+    meta: { ignoreSession: true },
+    props: route => ({
+      config: route.query.config,
+      resetPasswordToken: route.query.reset_password_token,
+      redirectUrl: route.query.route_url,
+    }),
+  },
+  {
+    path: frontendURL('auth/reset/password'),
+    name: 'auth_reset_password',
+    component: ResetPassword,
+  },
+];
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index 32ab67e80..c7d1120f6 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -60,8 +60,8 @@
       }
     </script>
     <% end %>
-    <%= javascript_pack_tag 'application' %>
-    <%= stylesheet_pack_tag 'application' %>
+    <%= javascript_pack_tag @application_pack %>
+    <%= stylesheet_pack_tag @application_pack %>
   </head>
   <body>
     <div id="app"></div>
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 7460814b2..c1bbb299b 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -73,4 +73,4 @@
 - name: CSML_EDITOR_HOST
   value:
 - name: LOGO_DARK
-  value: '/brand-assets/logo-dark.svg'
+  value: '/brand-assets/logo_dark.svg'
diff --git a/package.json b/package.json
index b4fcf9e73..63c61d01f 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "eslint": "eslint app/**/*.{js,vue}",
     "eslint:fix": "eslint app/**/*.{js,vue} --fix",
     "pretest": "rimraf .jest-cache",
-    "test": "jest  -w 1 --no-cache",
+    "test": "jest -w 1 --no-cache",
     "test:watch": "jest -w 1 --watch --no-cache",
     "test:coverage": "jest -w 1 --no-cache --collectCoverage",
     "webpacker-start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
diff --git a/public/brand-assets/logo_dark.svg b/public/brand-assets/logo-dark.svg
similarity index 100%
rename from public/brand-assets/logo_dark.svg
rename to public/brand-assets/logo-dark.svg
diff --git a/tailwind.config.js b/tailwind.config.js
index e83e92d90..50dfaacb2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,7 @@ module.exports = {
   darkMode: 'class',
   content: [
     './app/javascript/widget/**/*.vue',
+    './app/javascript/v3/**/*.vue',
     './app/javascript/portal/**/*.vue',
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',