diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 0cd4a7c6ef..0c8fffcaf0 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -106,6 +106,7 @@
 						:num-inputs="6"
 						v-model="token"
 						:should-auto-focus="true"
+						@on-change="updateToken"
 						@on-complete="onSubmit"
 						required
 					/>
@@ -158,6 +159,7 @@
 
 <script lang="ts" setup>
 import Vue3OtpInput from "vue3-otp-input";
+import { ref } from "vue";
 import { defineAsyncComponent } from "vue";
 import { toUnicode } from "punycode/";
 import MkButton from "@/components/MkButton.vue";
@@ -183,6 +185,10 @@ let queryingKey = $ref(false);
 let hCaptchaResponse = $ref(null);
 let reCaptchaResponse = $ref(null);
 
+const updateToken = (value: string) => {
+	token = value;
+};
+
 const meta = $computed(() => instance);
 
 const emit = defineEmits<{
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index f1973c679c..7bf18abfea 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -799,8 +799,8 @@ hr {
 }
 
 ._otp_input {
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   padding: 5px;
   margin: 1rem 7px auto;
   font-size: 20px;
@@ -810,9 +810,6 @@ hr {
 	color: var(--fg);
   text-align: center;
 }
-._otp_input.is-complete {
-	border-color: var(--success) !important;
-}
 ._otp_input.error {
   border-color: var(--error) !important;
 }