diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index e2164852f5..a032e792c9 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -6,6 +6,9 @@ import MaterialSymbolsMenu from '~icons/material-symbols/menu'
 import { navigateTo } from '#app'
 
 const { $state } = useNuxtApp()
+
+const sidebar = ref<HTMLDivElement>()
+
 const email = computed(() => $state.user?.value?.email ?? '---')
 
 const signOut = () => {
@@ -16,14 +19,14 @@ const signOut = () => {
 const toggleSidebar = useToggle($state.sidebarOpen)
 
 const sidebarOpen = computed({
-  get: () => !($state.sidebarOpen.value ?? true),
+  get: () => !$state.sidebarOpen.value,
   set: (val) => toggleSidebar(val),
 })
 </script>
 
 <template>
   <a-layout>
-    <a-layout-header class="flex !bg-primary items-center text-white !px-4">
+    <a-layout-header class="flex !bg-primary items-center text-white px-4 shadow-md">
       <MaterialSymbolsMenu
         v-if="$state.signedIn.value"
         class="text-xl cursor-pointer"
@@ -62,19 +65,19 @@ const sidebarOpen = computed({
 
             <template #overlay>
               <a-menu class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
-                <a-menu-item key="0" class="!rounded">
+                <a-menu-item key="0" class="!rounded-t">
                   <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                     <MdiAt class="mt-1 group-hover:text-success" />&nbsp;
-                    <span class="prose">{{ email }}</span>
+                    <span class="prose group-hover:text-black">{{ email }}</span>
                   </nuxt-link>
                 </a-menu-item>
 
                 <a-menu-divider class="!m-0" />
 
-                <a-menu-item key="1" class="!rounded">
+                <a-menu-item key="1" class="!rounded-b">
                   <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="signOut">
                     <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
-                    <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
+                    <span class="prose font-semibold text-gray-500 group-hover:text-black">{{ $t('general.signOut') }}</span>
                   </div>
                 </a-menu-item>
               </a-menu>
@@ -93,7 +96,7 @@ const sidebarOpen = computed({
         :trigger="null"
         collapsible
       >
-        <div id="sidebar" class="w-full h-full" />
+        <div id="sidebar" ref="sidebar" class="w-full h-full" />
       </a-layout-sider>
 
       <NuxtPage />
diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 6a3ee6df58..c86dad1642 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -49,16 +49,8 @@ a {
   @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
 }
 
-h1, h2, h3, h4, h5, h6 {
-  @apply text-black dark:(text-white);
-}
-
-.v-field__field {
-  @apply bg-white dark:(!bg-gray-900 text-white);
-
-  input {
-    @apply bg-white dark:(!bg-gray-700) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
-  }
+h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
+  @apply dark:(!text-white);
 }
 
 .nc-icon {
@@ -68,3 +60,4 @@ h1, h2, h3, h4, h5, h6 {
 :root {
   --header-height: 64px;
 }
+
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index f62537956d..49767446cb 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -9,6 +9,10 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
diff --git a/packages/nc-gui-v2/components/general/NocoIcon.vue b/packages/nc-gui-v2/components/general/NocoIcon.vue
index 229f521f9f..ac73078821 100644
--- a/packages/nc-gui-v2/components/general/NocoIcon.vue
+++ b/packages/nc-gui-v2/components/general/NocoIcon.vue
@@ -8,7 +8,7 @@ const { width = 90, height = 90 } = defineProps<Props>()
 </script>
 
 <template>
-  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height * 0.6}px` }" class="absolute rounded-lg bg-primary">
+  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height * 0.6}px` }" class="absolute rounded-lg !bg-primary">
     <img :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/composables/useGlobalState.ts b/packages/nc-gui-v2/composables/useGlobalState.ts
index 137876ba85..fbcb9baf6f 100644
--- a/packages/nc-gui-v2/composables/useGlobalState.ts
+++ b/packages/nc-gui-v2/composables/useGlobalState.ts
@@ -67,9 +67,6 @@ export const useGlobalState = (): GlobalState => {
   /** State */
   const initialState: StoredState = { token: null, user: null, lang: preferredLanguage, darkMode: prefersDarkMode }
 
-  /** is sidebar open */
-  const sidebarOpen = ref(breakpoints.greater('md').value)
-
   /** saves a reactive state, any change to these values will write/delete to localStorage */
   const storage = $(useStorage<StoredState>(storageKey, initialState))
 
@@ -88,6 +85,9 @@ export const useGlobalState = (): GlobalState => {
     () => !!(!!token && token !== '' && payload && payload.exp && payload.exp > timestamp / 1000),
   )
 
+  /** is sidebar open */
+  const sidebarOpen = ref(signedIn.value && breakpoints.greater('md').value)
+
   /** Actions */
   /** Sign out by deleting the token from localStorage */
   const signOut: Actions['signOut'] = () => {
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index cc219c1359..281a6a0d37 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@vueuse/core": "^8.7.5",
         "@vueuse/integrations": "^8.9.1",
-        "ant-design-vue": "^3.0.0-beta.8",
+        "ant-design-vue": "^3.1.0-rc.6",
         "dayjs": "^1.11.3",
         "jwt-decode": "^3.1.2",
         "nocodb-sdk": "file:../nocodb-sdk",
@@ -3400,13 +3400,14 @@
       }
     },
     "node_modules/ant-design-vue": {
-      "version": "3.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.0.0-beta.8.tgz",
-      "integrity": "sha512-3fgfg0pfIqvQ7VN5nKKZayqMH8V1T8nn+e3hWOz6QYdYa7gNydgm5GH+r8ZyhQitkmiAIYXbNDakcqrUdOPXOA==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.10.tgz",
+      "integrity": "sha512-aqa0kjJzVQ74MfVw5w7rTOdJQL2JN9V/O6Ro+VQQMq/tY7q91JiomhI9TRKAK3tFdBDXJpUoBCVOsosbbxMzRw==",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-vue": "^6.0.0",
+        "@ant-design/icons-vue": "^6.1.0",
         "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.4.0",
         "@simonwep/pickr": "~1.8.0",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^4.0.0",
@@ -3421,13 +3422,15 @@
         "vue-types": "^3.0.0",
         "warning": "^4.0.0"
       },
+      "engines": {
+        "node": ">=12.22.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/ant-design-vue"
       },
       "peerDependencies": {
-        "@vue/compiler-sfc": ">=3.1.0",
-        "vue": ">=3.1.0"
+        "vue": ">=3.2.0"
       }
     },
     "node_modules/anymatch": {
@@ -16709,13 +16712,14 @@
       }
     },
     "ant-design-vue": {
-      "version": "3.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.0.0-beta.8.tgz",
-      "integrity": "sha512-3fgfg0pfIqvQ7VN5nKKZayqMH8V1T8nn+e3hWOz6QYdYa7gNydgm5GH+r8ZyhQitkmiAIYXbNDakcqrUdOPXOA==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-3.2.10.tgz",
+      "integrity": "sha512-aqa0kjJzVQ74MfVw5w7rTOdJQL2JN9V/O6Ro+VQQMq/tY7q91JiomhI9TRKAK3tFdBDXJpUoBCVOsosbbxMzRw==",
       "requires": {
         "@ant-design/colors": "^6.0.0",
-        "@ant-design/icons-vue": "^6.0.0",
+        "@ant-design/icons-vue": "^6.1.0",
         "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.4.0",
         "@simonwep/pickr": "~1.8.0",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^4.0.0",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 4db973c208..2bd72d2fe1 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@vueuse/core": "^8.7.5",
     "@vueuse/integrations": "^8.9.1",
-    "ant-design-vue": "^3.0.0-beta.8",
+    "ant-design-vue": "^3.1.0-rc.6",
     "dayjs": "^1.11.3",
     "jwt-decode": "^3.1.2",
     "nocodb-sdk": "file:../nocodb-sdk",
diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue
index 00a32ecb03..3a8ecbec32 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -20,8 +20,6 @@ definePageMeta({
 let error = $ref<string | null>(null)
 let success = $ref(false)
 
-const valid = ref()
-
 const formValidator = ref()
 
 const form = reactive({
@@ -31,13 +29,24 @@ const form = reactive({
 const formRules = {
   email: [
     // E-mail is required
-    (v: string) => !!v || t('msg.error.signUpRules.emailReqd'),
+    { required: true, message: t('msg.error.signUpRules.emailReqd') },
     // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (isEmail(v)) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.emailInvalid')))
+        })
+      },
+      message: t('msg.error.signUpRules.emailInvalid'),
+    },
   ],
 }
 
 const resetPassword = async () => {
+  const valid = formValidator.value.validate()
+  if (!valid) return
+
   error = null
   try {
     await $api.auth.passwordForgot(form)
@@ -57,11 +66,12 @@ const resetError = () => {
 
 <template>
   <NuxtLayout>
-    <v-form
+    <a-form
       ref="formValidator"
-      v-model="valid"
-      class="h-full min-h-[600px] flex justify-center items-center"
-      @submit.prevent="resetPassword"
+      layout="vertical"
+      :model="form"
+      class="forgot-password h-full min-h-[600px] flex justify-center items-center"
+      @finish="resetPassword"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
@@ -91,29 +101,12 @@ const resetError = () => {
             </div>
           </Transition>
 
-          <v-text-field
-            id="email"
-            v-model="form.email"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.email"
-            :label="$t('labels.email')"
-            :placeholder="$t('labels.email')"
-            :persistent-placeholder="true"
-            type="text"
-            @focus="resetError"
-          />
+          <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+          </a-form-item>
 
           <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-            <button
-              :disabled="!valid"
-              :class="[
-                !valid
-                  ? '!opacity-50 !cursor-default'
-                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
-              ]"
-              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
-              type="submit"
-            >
+            <button class="submit" type="submit">
               <span class="flex items-center gap-2"><MdiLogin /> {{ $t('activity.sendEmail') }}</span>
             </button>
             <div class="text-end prose-sm">
@@ -123,6 +116,19 @@ const resetError = () => {
           </div>
         </div>
       </div>
-    </v-form>
+    </a-form>
   </NuxtLayout>
 </template>
+
+<style lang="scss">
+.forgot-password {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+  }
+
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 6897f07ac6..aeab0930b6 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -59,6 +59,7 @@ const deleteProject = (project: ProjectType) => {
   })
 }
 
+console.log(route.name)
 const visible = ref(true)
 </script>
 
@@ -97,11 +98,11 @@ const visible = ref(true)
           </v-menu>
         </div>
 
-        <a-menu class="mx-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+        <a-menu class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
           <a-menu-item
             v-for="(option, index) in navDrawerOptions"
             :key="index"
-            class="f!rounded-r-lg"
+            class="!rounded-r-lg"
             @click="activePage = option.title"
           >
             <div class="flex items-center gap-4">
@@ -128,12 +129,12 @@ const visible = ref(true)
 
         <div class="self-end flex text-4xl mb-1">
           <MaterialSymbolsGridView
-            :class="route.name === 'index-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
+            :class="route.name === 'index-index' ? '!text-primary dark:(!text-secondary/75)' : ''"
             class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/')"
           />
           <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'index-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
+            :class="route.name === 'index-index-list' ? '!text-primary dark:(!text-secondary/75)' : ''"
             class="cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/list')"
           />
diff --git a/packages/nc-gui-v2/pages/index/user/index.vue b/packages/nc-gui-v2/pages/index/user/index.vue
index 799f8fb2af..bea2158e55 100644
--- a/packages/nc-gui-v2/pages/index/user/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index.vue
@@ -2,39 +2,38 @@
 import { useNuxtApp, useRoute } from '#app'
 import MdiAccountCog from '~icons/mdi/account-cog'
 
-const { $api, $state } = useNuxtApp()
+const { $api } = useNuxtApp()
 
 const route = useRoute()
+
+const navDrawerOptions = [
+  {
+    title: 'Settings',
+    icon: MdiAccountCog,
+  },
+]
 </script>
 
 <template>
   <NuxtLayout>
     <template #sidebar>
-      <v-navigation-drawer v-model="$state.sidebarOpen.value" :border="0">
-        <div class="flex flex-col h-full">
-          <div class="advance-menu flex-1">
-            <v-list class="flex flex-col gap-1" :color="$state.darkMode.value ? 'secondary' : 'primary'">
-              <v-list-item
-                :active="route.name === 'index-user-index'"
-                class="flex items-center gap-4 !rounded-r-lg"
-                :value="$t('activity.settings')"
-              >
-                <MdiAccountCog />
-
-                <span class="font-semibold">
-                  {{ $t('activity.settings') }}
-                </span>
-              </v-list-item>
-            </v-list>
-          </div>
-
-          <v-divider />
-
-          <general-social />
-
-          <general-sponsors :nav="true" />
-        </div>
-      </v-navigation-drawer>
+      <div class="flex flex-col h-full">
+        <a-menu :selected-keys="[0]" class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+          <a-menu-item v-for="(option, index) in navDrawerOptions" :key="index" class="!rounded-r-lg">
+            <div class="flex items-center gap-4">
+              <component :is="option.icon" />
+
+              <span class="font-semibold">
+                {{ option.title }}
+              </span>
+            </div>
+          </a-menu-item>
+        </a-menu>
+
+        <general-social />
+
+        <general-sponsors :nav="true" />
+      </div>
     </template>
 
     <NuxtPage />
diff --git a/packages/nc-gui-v2/pages/index/user/index/index.vue b/packages/nc-gui-v2/pages/index/user/index/index.vue
index e25a1db7ef..1e446deb0e 100644
--- a/packages/nc-gui-v2/pages/index/user/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/user/index/index.vue
@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { navigateTo, useNuxtApp } from '#app'
-import { isEmail } from '~/utils/validation'
+import { useNuxtApp } from '#app'
 import MaterialSymbolsWarning from '~icons/material-symbols/warning'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 import { reactive, ref } from '#imports'
 
-const { $api, $state } = useNuxtApp()
+const { $api } = useNuxtApp()
 
 const { t } = useI18n()
 
-const valid = ref()
+const formValidator = ref()
 let error = $ref<string | null>(null)
 
 const form = reactive({
@@ -22,22 +21,34 @@ const form = reactive({
 
 const formRules = {
   currentPassword: [
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
-    // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    // Current password is required
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
   ],
   password: [
     // Password is required
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
-    (v: string) => v.length >= 8 || t('msg.error.signUpRules.passwdLength'),
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
+    { min: 8, message: t('msg.error.signUpRules.passwdLength') },
   ],
   passwordRepeat: [
+    // PasswordRepeat is required
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
     // Passwords match
-    (v: string) => v === form.password || t('msg.error.signUpRules.passwdMismatch'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (form.password === form.passwordRepeat) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.passwdMismatch')))
+        })
+      },
+      message: t('msg.error.signUpRules.passwdMismatch'),
+    },
   ],
 }
 
 const passwordChange = async () => {
+  const valid = formValidator.value.validate()
+  if (!valid) return
+
   error = null
   try {
     const { msg } = await $api.auth.passwordChange(form)
@@ -55,86 +66,59 @@ const resetError = () => {
 </script>
 
 <template>
-  <v-form
-    ref="formValidator"
-    v-model="valid"
-    class="h-[calc(100%_+_180px)] min-h-[600px] flex justify-center items-center"
-    @submit.prevent="passwordChange"
-  >
-    <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
-      <div
-        class="dark:(md:bg-gray-900 !text-white) md:relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-      >
-        <div
-          style="left: -moz-calc(50% - 45px); left: -webkit-calc(50% - 45px); left: calc(50% - 45px)"
-          class="absolute top-12 md:top-[-10%] rounded-lg bg-primary"
-        >
-          <img width="90" height="90" src="~/assets/img/icons/512x512-trans.png" />
-        </div>
+  <a-form ref="formValidator" layout="vertical" :model="form" class="change-password h-full w-full" @finish="passwordChange">
+    <div class="md:relative flex flex-col gap-2 w-full h-full p-8 max-w-1/2">
+      <h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1>
 
-        <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signUp') }}</h1>
-
-        <Transition name="layout">
-          <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
-            <div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div>
-          </div>
-        </Transition>
+      <Transition name="layout">
+        <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
+          <div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div>
+        </div>
+      </Transition>
 
-        <v-text-field
-          id="email"
-          v-model="form.email"
-          class="bg-white dark:!bg-gray-900"
-          :rules="formRules.email"
-          :label="$t('labels.email')"
-          :placeholder="$t('labels.email')"
-          :persistent-placeholder="true"
-          type="text"
+      <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.password">
+        <a-input-password
+          v-model:value="form.password"
+          size="large"
+          class="password"
+          :placeholder="$t('placeholder.password.current')"
           @focus="resetError"
         />
+      </a-form-item>
 
-        <v-text-field
-          id="password"
-          v-model="form.password"
-          class="bg-white dark:!bg-gray-900"
-          :rules="formRules.password"
-          :label="$t('labels.password')"
-          :placeholder="$t('labels.password')"
-          :persistent-placeholder="true"
-          type="password"
+      <a-form-item :label="$t('placeholder.password.new')" name="newPassword" :rules="formRules.password">
+        <a-input-password
+          v-model:value="form.password"
+          size="large"
+          class="password"
+          :placeholder="$t('placeholder.password.new')"
           @focus="resetError"
         />
+      </a-form-item>
 
-        <v-text-field
-          id="password_repeat"
-          v-model="form.passwordRepeat"
-          class="bg-white dark:!bg-gray-900"
-          :rules="formRules.passwordRepeat"
-          :label="`Repeat ${$t('labels.password')}`"
-          :placeholder="`Repeat ${$t('labels.password')}`"
-          :persistent-placeholder="true"
-          type="password"
+      <a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat">
+        <a-input-password
+          v-model:value="form.passwordRepeat"
+          size="large"
+          class="password"
+          :placeholder="$t('placeholder.password.confirm')"
           @focus="resetError"
         />
+      </a-form-item>
 
-        <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-          <button
-            :disabled="!valid"
-            :class="[
-              !valid
-                ? '!opacity-50 !cursor-default'
-                : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
-            ]"
-            class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
-            type="submit"
-          >
-            <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
-          </button>
-          <div class="text-end prose-sm">
-            {{ $t('msg.info.signUp.alreadyHaveAccount') }}
-            <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
-          </div>
-        </div>
+      <div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
+        <button class="submit" type="submit">
+          <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('activity.changePwd') }}</span>
+        </button>
       </div>
     </div>
-  </v-form>
+  </a-form>
 </template>
+
+<style lang="scss">
+.change-password {
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index b5c3fa084b..80215ed898 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { definePageMeta, useHead } from '#imports'
+import { definePageMeta } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { navigateTo, useNuxtApp } from '#app'
 import { isEmail } from '~/utils/validation'
@@ -16,22 +16,10 @@ definePageMeta({
   title: 'title.headLogin',
 })
 
-useHead({
-  meta: [
-    {
-      hid: t('msg.info.loginMsg'),
-      name: t('msg.info.loginMsg'),
-      content: t('msg.info.loginMsg'),
-    },
-  ],
-})
+const formValidator = ref()
 
 let error = $ref<string | null>(null)
 
-const valid = ref()
-
-const formValidator = ref()
-
 const form = reactive({
   email: '',
   password: '',
@@ -40,17 +28,28 @@ const form = reactive({
 const formRules = {
   email: [
     // E-mail is required
-    (v: string) => !!v || t('msg.error.signUpRules.emailReqd'),
+    { required: true, message: t('msg.error.signUpRules.emailReqd') },
     // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (isEmail(v)) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.emailInvalid')))
+        })
+      },
+      message: t('msg.error.signUpRules.emailInvalid'),
+    },
   ],
   password: [
     // Password is required
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
   ],
 }
 
 const signIn = async () => {
+  const valid = formValidator.value.validate()
+  if (!valid) return
+
   error = null
   try {
     const { token } = await $api.auth.signin(form)
@@ -71,11 +70,12 @@ const resetError = () => {
 
 <template>
   <NuxtLayout>
-    <v-form
+    <a-form
       ref="formValidator"
-      v-model="valid"
-      class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
-      @submit.prevent="signIn"
+      :model="form"
+      layout="vertical"
+      class="signin h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
+      @finish="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
@@ -91,29 +91,19 @@ const resetError = () => {
             </div>
           </Transition>
 
-          <v-text-field
-            id="email"
-            v-model="form.email"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.email"
-            :label="$t('labels.email')"
-            :placeholder="$t('labels.email')"
-            :persistent-placeholder="true"
-            type="text"
-            @focus="resetError"
-          />
-
-          <v-text-field
-            id="password"
-            v-model="form.password"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.password"
-            :label="$t('labels.password')"
-            :placeholder="$t('labels.password')"
-            :persistent-placeholder="true"
-            type="password"
-            @focus="resetError"
-          />
+          <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+          </a-form-item>
+
+          <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
+            <a-input-password
+              v-model:value="form.password"
+              size="large"
+              class="password"
+              :placeholder="$t('labels.password')"
+              @focus="resetError"
+            />
+          </a-form-item>
 
           <div class="hidden md:block self-end mx-8">
             <nuxt-link class="prose-sm" to="/forgot-password">
@@ -122,16 +112,7 @@ const resetError = () => {
           </div>
 
           <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-            <button
-              :disabled="!valid"
-              :class="[
-                !valid
-                  ? '!opacity-50 !cursor-default'
-                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
-              ]"
-              class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
-              type="submit"
-            >
+            <button class="submit" type="submit">
               <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
             </button>
             <div class="text-end prose-sm">
@@ -147,6 +128,29 @@ const resetError = () => {
           </div>
         </div>
       </div>
-    </v-form>
+    </a-form>
   </NuxtLayout>
 </template>
+
+<style lang="scss">
+.signin {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none;
+    }
+
+    .ant-input-password-icon {
+      @apply dark:!text-white;
+    }
+  }
+
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index 3c886d3f62..376a8d918b 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/packages/nc-gui-v2/pages/signup.vue
@@ -14,7 +14,7 @@ definePageMeta({
   requiresAuth: false,
 })
 
-const valid = ref()
+const formValidator = ref()
 let error = $ref<string | null>(null)
 
 const form = reactive({
@@ -26,22 +26,43 @@ const form = reactive({
 const formRules = {
   email: [
     // E-mail is required
-    (v: string) => !!v || t('msg.error.signUpRules.emailReqd'),
+    { required: true, message: t('msg.error.signUpRules.emailReqd') },
     // E-mail must be valid format
-    (v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (isEmail(v)) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.emailInvalid')))
+        })
+      },
+      message: t('msg.error.signUpRules.emailInvalid'),
+    },
   ],
   password: [
     // Password is required
-    (v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
-    (v: string) => v.length >= 8 || t('msg.error.signUpRules.passwdLength'),
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
+    { min: 8, message: t('msg.error.signUpRules.passwdLength') },
   ],
   passwordRepeat: [
+    // PasswordRepeat is required
+    { required: true, message: t('msg.error.signUpRules.passwdRequired') },
     // Passwords match
-    (v: string) => v === form.password || t('msg.error.signUpRules.passwdMismatch'),
+    {
+      validator: (_: unknown, v: string) => {
+        return new Promise((resolve, reject) => {
+          if (form.password === form.passwordRepeat) return resolve(true)
+          reject(new Error(t('msg.error.signUpRules.passwdMismatch')))
+        })
+      },
+      message: t('msg.error.signUpRules.passwdMismatch'),
+    },
   ],
 }
 
 const signUp = async () => {
+  const valid = formValidator.value.validate()
+  if (!valid) return
+
   error = null
   try {
     const { token } = await $api.auth.signup(form)
@@ -61,11 +82,12 @@ const resetError = () => {
 
 <template>
   <NuxtLayout>
-    <v-form
+    <a-form
       ref="formValidator"
-      v-model="valid"
-      class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
-      @submit.prevent="signUp"
+      :model="form"
+      layout="vertical"
+      class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
+      @finish="signUp"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
@@ -81,53 +103,32 @@ const resetError = () => {
             </div>
           </Transition>
 
-          <v-text-field
-            id="email"
-            v-model="form.email"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.email"
-            :label="$t('labels.email')"
-            :placeholder="$t('labels.email')"
-            :persistent-placeholder="true"
-            type="text"
-            @focus="resetError"
-          />
-
-          <v-text-field
-            id="password"
-            v-model="form.password"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.password"
-            :label="$t('labels.password')"
-            :placeholder="$t('labels.password')"
-            :persistent-placeholder="true"
-            type="password"
-            @focus="resetError"
-          />
-
-          <v-text-field
-            id="password_repeat"
-            v-model="form.passwordRepeat"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.passwordRepeat"
-            :label="`Repeat ${$t('labels.password')}`"
-            :placeholder="`Repeat ${$t('labels.password')}`"
-            :persistent-placeholder="true"
-            type="password"
-            @focus="resetError"
-          />
+          <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+          </a-form-item>
+
+          <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
+            <a-input-password
+              v-model:value="form.password"
+              size="large"
+              class="password"
+              :placeholder="$t('labels.password')"
+              @focus="resetError"
+            />
+          </a-form-item>
+
+          <a-form-item :label="`Repeat ${$t('labels.password')}`" name="passwordRepeat" :rules="formRules.passwordRepeat">
+            <a-input-password
+              v-model:value="form.passwordRepeat"
+              size="large"
+              class="password"
+              :placeholder="`Repeat ${$t('labels.password')}`"
+              @focus="resetError"
+            />
+          </a-form-item>
 
           <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
-            <button
-              :disabled="!valid"
-              :class="[
-                !valid
-                  ? '!opacity-50 !cursor-default'
-                  : 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
-              ]"
-              class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
-              type="submit"
-            >
+            <button class="submit" type="submit">
               <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
             </button>
             <div class="text-end prose-sm">
@@ -137,6 +138,29 @@ const resetError = () => {
           </div>
         </div>
       </div>
-    </v-form>
+    </a-form>
   </NuxtLayout>
 </template>
+
+<style lang="scss">
+.signup {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none;
+    }
+
+    .ant-input-password-icon {
+      @apply dark:!text-white;
+    }
+  }
+
+  .submit {
+    @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
+  }
+}
+</style>