diff --git a/package-lock.json b/package-lock.json
index 9b18b86a66ff..9e1e8273b8fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
                 "@datadog/browser-logs": "^5.11.0",
                 "@datadog/browser-rum": "^5.11.0",
                 "@deriv-com/analytics": "1.4.13",
-                "@deriv-com/quill-ui": "^1.10.1",
+                "@deriv-com/quill-ui": "^1.10.8",
                 "@deriv-com/ui": "^1.14.5",
                 "@deriv-com/utils": "^0.0.20",
                 "@deriv/api-types": "^1.0.172",
@@ -2963,9 +2963,9 @@
             }
         },
         "node_modules/@deriv-com/quill-ui": {
-            "version": "1.10.1",
-            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.1.tgz",
-            "integrity": "sha512-y5WJJv+Md/HCZlRpP+XQFYlyqwLeHWlr9iECL8XXW5YJGw8IuAwDRgGTpqcZOtcO9TNu1aEEU/Nzy3auS8AEfg==",
+            "version": "1.10.8",
+            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.8.tgz",
+            "integrity": "sha512-Ke8YkLGokO8rH6qUN85ryXA3d9awVaRJnrxm6NVyBicgjnngqSsotVWO8FvHDgZwBQJjT+qEB7OxYuOxWITheA==",
             "dependencies": {
                 "@deriv/quill-icons": "^1.19.20",
                 "@headlessui/react": "^1.7.18",
diff --git a/packages/account/package.json b/packages/account/package.json
index 6ce482dfabef..6be662aed7ce 100644
--- a/packages/account/package.json
+++ b/packages/account/package.json
@@ -33,7 +33,7 @@
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "^1.10.1",
+        "@deriv-com/quill-ui": "^1.10.8",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx b/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
index 77d0062dec99..7dc51d5479d5 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
+++ b/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PhoneVerificationCard from './phone-verification-card';
-import { Button, Text } from '@deriv-com/quill-ui';
+import { Button, Text, TextField } from '@deriv-com/quill-ui';
 import { Localize, localize } from '@deriv/translations';
 import { Input } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
@@ -28,7 +28,9 @@ const ConfirmPhoneNumber = observer(({ setOtpVerification }: TConfirmPhoneNumber
             <Text bold>
                 <Localize i18n_default_text='Confirm your phone number' />
             </Text>
-            <Input label={localize('Phone number')} value={phone_number} />
+            <div className='phone-verification__card--inputfield'>
+                <TextField label={localize('Phone number')} value={phone_number} />
+            </div>
             <div className='phone-verification__card--buttons_container'>
                 <Button
                     variant='secondary'
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx b/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
index 9bf490fe6174..86d2b16b6638 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
+++ b/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import PhoneVerificationCard from './phone-verification-card';
-import { Text } from '@deriv-com/quill-ui';
+import { Text, InputGroupButton } from '@deriv-com/quill-ui';
 import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
-import { Input } from '@deriv/components';
 import { useVerifyEmail } from '@deriv/hooks';
 import { convertPhoneTypeDisplay } from 'Helpers/utils';
 import ResendCodeTimer from './resend-code-timer';
@@ -20,6 +19,7 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
     const { phone } = account_settings;
     const [should_show_didnt_get_the_code_modal, setShouldShowDidntGetTheCodeModal] = React.useState(false);
     const [start_timer, setStartTimer] = React.useState(true);
+    const [otp, setOtp] = React.useState('');
     const { send } = useVerifyEmail('phone_number_verification');
     //TODO: this shall be replace by BE API call when it's ready
     const { should_show_phone_number_otp } = ui;
@@ -30,6 +30,14 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
         }
     }, [should_show_phone_number_otp, send]);
 
+    const handleGetOtpValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setOtp(e.target.value);
+    };
+
+    const handleVerifyOTP = () => {
+        //TODO: inplement function to verify OTP when BE API is ready
+    };
+
     return (
         <PhoneVerificationCard is_small_card>
             <DidntGetTheCodeModal
@@ -73,7 +81,12 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
                 )}
             </div>
             <div className='phone-verification__card--email-verification-otp-container'>
-                <Input id='otp_code' type='text' name='otp_code' label={localize('OTP code')} data-lpignore='true' />
+                <InputGroupButton
+                    buttonLabel={localize('Verify')}
+                    label={localize('OTP code')}
+                    buttonCallback={handleVerifyOTP}
+                    onChange={handleGetOtpValue}
+                />
                 <ResendCodeTimer
                     resend_code_text={should_show_phone_number_otp ? "Didn't get the code?" : 'Resend code'}
                     //TODOS: replace hardcoded timer when timestamp BE API is ready
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
index 84c4041e492c..97b0dd852f89 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
+++ b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
@@ -57,9 +57,14 @@
             height: 40rem;
         }
 
-        .dc-input {
+        &--inputfield {
             width: 60%;
             margin-top: 2.4rem;
+            margin-bottom: 4.4rem;
+            @include mobile {
+                width: 100%;
+                margin-top: 3.2rem;
+            }
         }
 
         &--buttons_container {
@@ -86,8 +91,13 @@
             }
 
             &-otp-container {
+                display: flex;
+                flex-direction: column;
+                gap: 1.6rem;
                 width: 60%;
-                .dc-input {
+                margin-top: 1.6rem;
+                align-items: flex-start;
+                @include mobile {
                     width: 100%;
                 }
             }
diff --git a/packages/core/package.json b/packages/core/package.json
index d88da56b3faa..4ce0939ec933 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -96,7 +96,7 @@
         "@babel/polyfill": "^7.4.4",
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.10.1",
+        "@deriv-com/quill-ui": "^1.10.8",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",
         "@deriv/account-v2": "^1.0.0",
diff --git a/packages/trader/package.json b/packages/trader/package.json
index ca45b25078d3..e4e08c8b6e3e 100644
--- a/packages/trader/package.json
+++ b/packages/trader/package.json
@@ -89,7 +89,7 @@
     "dependencies": {
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.10.1",
+        "@deriv-com/quill-ui": "^1.10.8",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",