diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e07e074f..14209689 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,6 +1,6 @@
 module.exports = {
     extends: ['@deriv-com/eslint-config-deriv', 'eslint:recommended', 'plugin:react/recommended'],
-    plugins: ['simple-import-sort','sort-destructure-keys', 'typescript-sort-keys' ], 
+    plugins: ['simple-import-sort', 'sort-destructure-keys', 'typescript-sort-keys'],
     rules: {
         'global-require': 'off',
         '@typescript-eslint/array-type': 'error',
diff --git a/.prettierrc b/.prettierrc
index eac607cc..4ace530d 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,11 +1,11 @@
 {
-  "endOfLine": "lf",
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 4,
-  "trailingComma": "es5",
-  "printWidth": 120,
-  "jsxSingleQuote": true,
-  "arrowParens": "avoid",
-  "proseWrap": "preserve"
+    "endOfLine": "lf",
+    "singleQuote": true,
+    "useTabs": false,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "printWidth": 120,
+    "jsxSingleQuote": true,
+    "arrowParens": "avoid",
+    "proseWrap": "preserve"
 }
diff --git a/package-lock.json b/package-lock.json
index 8cc059ee..fab5ffa9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
             "dependencies": {
                 "@babel/preset-env": "^7.24.5",
                 "@deriv-com/api-hooks": "^0.1.19",
-                "@deriv-com/translations": "^1.2.0",
+                "@deriv-com/translations": "^1.2.3",
                 "@deriv-com/ui": "^1.21.1",
                 "@deriv-com/utils": "latest",
                 "@deriv/deriv-api": "^1.0.15",
@@ -2654,9 +2654,9 @@
             }
         },
         "node_modules/@deriv-com/translations": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.2.0.tgz",
-            "integrity": "sha512-iRM0Nv8eJjlauGhmIvHtX/ZGP5A6X4TFQvJWTwuSBn4xdVaEJ5s8aCdebNYYI24ITw6mKKxy2RzLjrc5cDcGAA==",
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.2.3.tgz",
+            "integrity": "sha512-NVZ2Ut8e+rG2eYjQhzI0nESmENx5U6wkaVoTZhAfFwswKJfTwDcOJYtmLPpUgAPUcgUNrWRx1iH0o5zGhLTOxg==",
             "dependencies": {
                 "@xmldom/xmldom": "^0.8.10",
                 "commander": "^12.0.0",
@@ -22647,9 +22647,9 @@
             "requires": {}
         },
         "@deriv-com/translations": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.2.0.tgz",
-            "integrity": "sha512-iRM0Nv8eJjlauGhmIvHtX/ZGP5A6X4TFQvJWTwuSBn4xdVaEJ5s8aCdebNYYI24ITw6mKKxy2RzLjrc5cDcGAA==",
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.2.3.tgz",
+            "integrity": "sha512-NVZ2Ut8e+rG2eYjQhzI0nESmENx5U6wkaVoTZhAfFwswKJfTwDcOJYtmLPpUgAPUcgUNrWRx1iH0o5zGhLTOxg==",
             "requires": {
                 "@rollup/rollup-linux-x64-gnu": "^4.17.1",
                 "@xmldom/xmldom": "^0.8.10",
diff --git a/package.json b/package.json
index 50f91b17..1daa2d89 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
         "@deriv-com/api-hooks": "^0.1.19",
-        "@deriv-com/translations": "^1.2.0",
+        "@deriv-com/translations": "^1.2.3",
         "@deriv-com/ui": "^1.21.1",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-api": "^1.0.15",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 4df9d3ba..aa03a623 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    autoprefixer: {},
-    tailwindcss: {},
-  },
+    plugins: {
+        autoprefixer: {},
+        tailwindcss: {},
+    },
 };
diff --git a/src/App.tsx b/src/App.tsx
index d8604477..18cbc2ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,7 +17,7 @@ const App = () => {
     return (
         <BrowserRouter>
             <QueryParamProvider adapter={ReactRouter5Adapter}>
-                <TranslationProvider defaultLang='ID' i18nInstance={i18nInstance}>
+                <TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
                     <AppHeader />
                     <AppContent />
                     {isDesktop && <AppFooter />}
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
deleted file mode 100644
index 66f5c6f1..00000000
--- a/src/components/Dropdown/Dropdown.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-.dropdown {
-    width: 100%;
-    position: relative;
-    cursor: pointer;
-
-    &--disabled {
-        pointer-events: none;
-
-        & label {
-            color: var(--system-light-5-active-background, #999);
-        }
-    }
-
-    &__button {
-        all: unset;
-        right: 1.6rem;
-        transform: rotate(0);
-        transform-origin: 50% 45%;
-        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-
-        &--active {
-            transform: rotate(180deg);
-        }
-    }
-
-    &__content {
-        width: 100%;
-        background: var(--system-light-8-primary-background, #fff);
-        display: flex;
-        align-items: center;
-
-        .textfield__field {
-            cursor: pointer;
-        }
-    }
-
-    &__field {
-        position: absolute;
-        inset: 0;
-        min-width: 0; /* this is required to reset input's default width */
-        padding-left: 2rem;
-        display: flex;
-        flex-grow: 1;
-        font-family: inherit;
-        outline: 0;
-        font-size: 1.4rem;
-        background-color: transparent;
-        color: var(--system-light-2-general-text, #333);
-        transition: border-color 0.2s;
-        cursor: unset;
-        user-select: none;
-        &::selection {
-            background-color: transparent;
-        }
-
-        &::placeholder {
-            color: transparent;
-        }
-    }
-
-    &__field:placeholder-shown ~ &__label {
-        font-size: 1.4rem;
-        cursor: text;
-        top: 30%;
-        padding: 0;
-    }
-
-    &__field:placeholder-shown ~ &__label--with-icon {
-        left: 4.4rem;
-    }
-
-    label,
-    &__field:focus ~ &__label {
-        position: absolute;
-        top: -0.5rem;
-        display: block;
-        transition: 0.2s;
-        font-size: 1rem;
-        color: var(--system-light-3-less-prominent-text, #999);
-        background: var(--system-light-8-primary-background, #fff);
-        padding-inline: 0.4rem;
-        left: 1.6rem;
-    }
-
-    &__field:focus ~ &__label {
-        color: var(--brand-blue, #85acb0);
-    }
-
-    &__items {
-        position: absolute;
-        top: 4.8rem;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        z-index: 2;
-        border-radius: 0.4rem;
-        background: var(--system-light-8-primary-background, #fff);
-        box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
-        overflow-y: auto;
-
-        & > :first-child {
-            border-radius: 0.4rem 0.4rem 0 0;
-        }
-
-        & > :last-child {
-            border-radius: 0 0 0.4rem 0.4rem;
-        }
-
-        &--sm {
-            max-height: 22rem;
-        }
-
-        &--md {
-            max-height: 42rem;
-        }
-
-        &--lg {
-            max-height: 66rem;
-        }
-    }
-
-    &__icon {
-        position: absolute;
-        left: 1.6rem;
-        width: 1.6rem;
-        height: 1.6rem;
-    }
-
-    &__item {
-        padding: 1rem 1.6rem;
-        width: 100%;
-        z-index: 2;
-
-        &:hover:not(&--active) {
-            cursor: pointer;
-            background: var(--system-light-6-hover-background, #e6e9e9);
-        }
-
-        &--active {
-            background: var(--system-light-5-active-background, #d6dadb);
-        }
-    }
-}
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
deleted file mode 100644
index 42885b1b..00000000
--- a/src/components/Dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { FC, ReactNode, useCallback, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { useCombobox } from 'downshift';
-import { TextField } from '@/components';
-import { reactNodeToString } from '@/utils';
-import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
-import { Text } from '@deriv-com/ui';
-import { TextFieldProps } from '../TextField/TextField';
-import './Dropdown.scss';
-
-type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '5xl' | '6xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-
-type TProps = {
-    disabled?: boolean;
-    errorMessage?: TextFieldProps['errorMessage'];
-    icon?: ReactNode;
-    isRequired?: boolean;
-    label?: TextFieldProps['label'];
-    list: {
-        text?: ReactNode;
-        value?: string;
-    }[];
-    listHeight?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
-    name: TextFieldProps['name'];
-    onChange?: (inputValue: string) => void;
-    onSelect: (value: string) => void;
-    value?: TextFieldProps['value'];
-    variant?: 'comboBox' | 'prompt';
-};
-
-const Dropdown: FC<TProps> = ({
-    disabled = false,
-    errorMessage = '',
-    icon = false,
-    isRequired = false,
-    label = '',
-    list,
-    listHeight = 'md',
-    name,
-    onChange = () => {
-        // do nothing
-    },
-    onSelect,
-    value,
-    variant = 'prompt',
-}) => {
-    const [items, setItems] = useState(list);
-    const [hasSelected, setHasSelected] = useState(false);
-    const [shouldFilterList, setShouldFilterList] = useState(false);
-    const clearFilter = useCallback(() => {
-        setShouldFilterList(false);
-        setItems(list);
-    }, [list]);
-    const { closeMenu, getInputProps, getItemProps, getMenuProps, getToggleButtonProps, isOpen, openMenu } =
-        useCombobox({
-            defaultSelectedItem: items.find(item => item.value === value) ?? null,
-            items,
-            itemToString(item) {
-                return item ? reactNodeToString(item.text) : '';
-            },
-            onInputValueChange({ inputValue }) {
-                onChange?.(inputValue ?? '');
-                if (shouldFilterList) {
-                    setItems(
-                        list.filter(item =>
-                            reactNodeToString(item.text)
-                                .toLowerCase()
-                                .includes(inputValue?.toLowerCase() ?? '')
-                        )
-                    );
-                }
-            },
-            onIsOpenChange({ isOpen }) {
-                if (!isOpen) {
-                    clearFilter();
-                }
-            },
-            onSelectedItemChange({ selectedItem }) {
-                onSelect(selectedItem?.value ?? '');
-                closeMenu();
-            },
-        });
-
-    const handleInputClick = useCallback(() => {
-        variant === 'comboBox' && setShouldFilterList(true);
-
-        if (isOpen) {
-            closeMenu();
-        } else {
-            openMenu();
-        }
-    }, [closeMenu, isOpen, openMenu, variant]);
-
-    useEffect(() => {
-        setItems(list);
-    }, [list]);
-
-    return (
-        <div
-            className={clsx('dropdown', {
-                'dropdown--disabled': disabled,
-            })}
-            {...getToggleButtonProps()}
-        >
-            <div className='dropdown__content'>
-                <TextField
-                    disabled={disabled}
-                    errorMessage={errorMessage}
-                    isInvalid={hasSelected && !value && isRequired}
-                    label={label}
-                    name={name}
-                    onClickCapture={handleInputClick}
-                    onFocus={() => setHasSelected(true)}
-                    onKeyUp={() => setShouldFilterList(true)}
-                    placeholder={reactNodeToString(label)}
-                    readOnly={variant !== 'comboBox'}
-                    renderLeftIcon={icon ? () => icon : undefined}
-                    renderRightIcon={() => (
-                        <button
-                            className={clsx('dropdown__button', {
-                                'dropdown__button--active': isOpen,
-                            })}
-                        >
-                            <LabelPairedChevronDownMdRegularIcon />
-                        </button>
-                    )}
-                    type='text'
-                    value={value}
-                    {...getInputProps()}
-                />
-            </div>
-            <ul className={`dropdown__items dropdown__items--${listHeight}`} {...getMenuProps()}>
-                {isOpen &&
-                    items.map((item, index) => (
-                        <li
-                            className={clsx('dropdown__item', {
-                                'dropdown__item--active': value === item.value,
-                            })}
-                            key={item.value}
-                            onClick={clearFilter}
-                            onKeyDown={clearFilter}
-                            {...getItemProps({ index, item })}
-                        >
-                            <Text size='sm' weight={value === item.value ? 'bold' : 'normal'}>
-                                {item.text}
-                            </Text>
-                        </li>
-                    ))}
-            </ul>
-        </div>
-    );
-};
-
-export default Dropdown;
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
deleted file mode 100644
index 9f1f7763..00000000
--- a/src/components/Dropdown/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// TODO: Delete this component once @deriv-com/ui has it published
-
-export { default as Dropdown } from './Dropdown';
diff --git a/src/components/PaymentMethodField/PaymentMethodField.tsx b/src/components/PaymentMethodField/PaymentMethodField.tsx
index 44355d3c..07e8b73d 100644
--- a/src/components/PaymentMethodField/PaymentMethodField.tsx
+++ b/src/components/PaymentMethodField/PaymentMethodField.tsx
@@ -1,7 +1,7 @@
 import { Controller, useForm } from 'react-hook-form';
 import { VALID_SYMBOLS_PATTERN } from '@/constants';
-import { Input } from '@deriv-com/ui';
-import { TextArea } from '..';
+import { useTranslations } from '@deriv-com/translations';
+import { Input, TextArea } from '@deriv-com/ui';
 
 type TPaymentMethodField = {
     control: ReturnType<typeof useForm>['control'];
@@ -23,6 +23,7 @@ type TPaymentMethodField = {
  * @example <PaymentMethodField control={control} defaultValue={defaultValue} displayName={displayName} field={field} required={required} />
  * **/
 const PaymentMethodField = ({ control, defaultValue, displayName, field, required }: TPaymentMethodField) => {
+    const { localize } = useTranslations();
     return (
         <div className='payment-method-form__field-wrapper'>
             <Controller
@@ -37,6 +38,7 @@ const PaymentMethodField = ({ control, defaultValue, displayName, field, require
                             label={displayName}
                             onBlur={onBlur}
                             onChange={onChange}
+                            textSize='sm'
                             value={value}
                         />
                     ) : (
@@ -53,10 +55,13 @@ const PaymentMethodField = ({ control, defaultValue, displayName, field, require
                 }}
                 rules={{
                     pattern: {
-                        message: `${displayName} can only include letters, numbers, spaces, and any of these symbols: -+.,'#@():;`, // TODO: Remember to translate this
+                        message: localize(
+                            "{{displayName}} can only include letters, numbers, spaces, and any of these symbols: -+.,'#@():;",
+                            { displayName }
+                        ),
                         value: VALID_SYMBOLS_PATTERN,
                     },
-                    required: required ? 'This field is required.' : false,
+                    required: required ? localize('This field is required.') : false,
                 }}
             />
         </div>
diff --git a/src/components/TextArea/TextArea.scss b/src/components/TextArea/TextArea.scss
deleted file mode 100644
index 8d0691d7..00000000
--- a/src/components/TextArea/TextArea.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.textarea {
-    position: relative;
-    width: 100%;
-
-    & textarea {
-        resize: none;
-        width: 100%;
-        height: 9.6rem;
-        border-radius: 0.4rem;
-        border: 1px solid #d6dadb;
-        outline: none;
-        padding: 1rem 1.6rem;
-        font-size: 1.4rem;
-
-        &:focus {
-            border: 1px solid #85acb0;
-        }
-
-        &::placeholder {
-            color: #999999;
-        }
-        &:focus + label span {
-            color: #85acb0;
-        }
-        &:focus + label,
-        &[data-has-value='true'] + label {
-            transform: translate(0, -1.4rem) scale(0.75);
-            background-color: #ffffff;
-        }
-        &:not(:focus)[data-has-value='true'] + label {
-            & span {
-                color: #333;
-            }
-        }
-        &:has(~ label)::placeholder {
-            color: transparent;
-        }
-    }
-
-    & label {
-        display: block;
-        position: absolute;
-        left: 1.6rem;
-        top: 1rem;
-        transition: all 0.2s ease;
-        transform-origin: left top;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    &--error {
-        & textarea,
-        & textarea:focus {
-            border: 1px solid #ec3f3f;
-            & + label span {
-                color: #ec3f3f;
-            }
-        }
-    }
-
-    &__footer {
-        display: flex;
-        line-height: 1.5;
-
-        & span {
-            margin-left: auto;
-        }
-    }
-}
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
deleted file mode 100644
index ad8d9568..00000000
--- a/src/components/TextArea/TextArea.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { ChangeEventHandler, HtmlHTMLAttributes, useState } from 'react';
-import clsx from 'clsx';
-import { Text } from '@deriv-com/ui';
-import './TextArea.scss';
-
-type TTextAreaProps = HtmlHTMLAttributes<HTMLTextAreaElement> & {
-    hint?: string;
-    isInvalid?: boolean;
-    label?: string;
-    maxLength?: number;
-    onChange: ChangeEventHandler<HTMLTextAreaElement>;
-    placeholder?: string;
-    shouldShowCounter?: boolean;
-    testId?: string;
-    value?: string;
-};
-const TextArea = ({
-    hint,
-    isInvalid = false,
-    label,
-    maxLength,
-    onChange,
-    placeholder,
-    shouldShowCounter = false,
-    testId,
-    value,
-}: TTextAreaProps) => {
-    const [currentValue, setCurrentValue] = useState(value);
-
-    return (
-        <div
-            className={clsx('textarea', {
-                'textarea--error': isInvalid,
-            })}
-            data-testid={testId}
-        >
-            <textarea
-                data-has-value={!!currentValue}
-                onChange={event => {
-                    setCurrentValue(event.target.value);
-                    onChange?.(event);
-                }}
-                placeholder={placeholder}
-                value={currentValue}
-            />
-            {label && (
-                <label>
-                    <Text color={isInvalid ? 'error' : 'less-prominent'} size='sm'>
-                        {label}
-                    </Text>
-                </label>
-            )}
-            <div className='textarea__footer'>
-                {hint && (
-                    <Text as='p' color={isInvalid ? 'error' : 'less-prominent'} size='xs'>
-                        {hint}
-                    </Text>
-                )}
-                {shouldShowCounter && (
-                    <Text color={isInvalid ? 'error' : 'less-prominent'} size='xs'>
-                        {currentValue?.length || 0}/{maxLength}
-                    </Text>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default TextArea;
diff --git a/src/components/TextArea/index.ts b/src/components/TextArea/index.ts
deleted file mode 100644
index a8b97019..00000000
--- a/src/components/TextArea/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TextArea } from './TextArea';
diff --git a/src/components/index.ts b/src/components/index.ts
index 5b46fba8..1a83cfef 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,7 +6,6 @@ export * from './Badge';
 export * from './BuySellForm';
 export * from './Checklist';
 export * from './Clipboard';
-export * from './Dropdown';
 export * from './FileDropzone';
 export * from './FloatingRate';
 export * from './FormProgress';
@@ -29,7 +28,6 @@ export * from './Search';
 export * from './StarRating';
 export * from './Table';
 export * from './TemporarilyBarredHint';
-export * from './TextArea';
 export * from './TextField';
 export * from './UserAvatar';
 export * from './Verification';
diff --git a/src/constants/ad-constants.ts b/src/constants/ad-constants.ts
index 870e9227..d8c0730b 100644
--- a/src/constants/ad-constants.ts
+++ b/src/constants/ad-constants.ts
@@ -1,6 +1,8 @@
+import { localize } from '@deriv-com/translations';
+
 export const COUNTERPARTIES_DROPDOWN_LIST = [
-    { text: 'All', value: 'all' },
-    { text: 'Blocked', value: 'blocked' },
+    { text: localize('All'), value: 'all' },
+    { text: localize('Blocked'), value: 'blocked' },
 ] as const;
 
 export const RATE_TYPE = {
@@ -24,8 +26,8 @@ export const ADVERT_TYPE = Object.freeze({
 });
 
 export const SORT_BY_LIST = Object.freeze([
-    { text: 'Exchange rate', value: 'rate' },
-    { text: 'User rating', value: 'rating' },
+    { text: localize('Exchange rate'), value: 'rate' },
+    { text: localize('User rating'), value: 'rating' },
 ]);
 
 export const AD_CONDITION_TYPES = {
@@ -39,27 +41,29 @@ export const AD_CONDITION_CONTENT: Record<
     { description: string; options?: { label: string; value: number }[]; title: string }
 > = {
     completionRates: {
-        description:
-            'We’ll only show your ad to people with a completion rate higher than your selection. \n\nThe completion rate is the percentage of successful orders.',
+        description: localize(
+            'We’ll only show your ad to people with a completion rate higher than your selection. \n\nThe completion rate is the percentage of successful orders.'
+        ),
         options: [
             { label: '50%', value: 50 },
             { label: '70%', value: 70 },
             { label: '90%', value: 90 },
         ],
-        title: 'Completion rate of more than',
+        title: localize('Completion rate of more than'),
     },
     joiningDate: {
-        description:
-            'We’ll only show your ad to people who’ve been using Deriv P2P for longer than the time you choose.',
+        description: localize(
+            'We’ll only show your ad to people who’ve been using Deriv P2P for longer than the time you choose.'
+        ),
         options: [
-            { label: '15 days', value: 15 },
-            { label: '30 days', value: 30 },
-            { label: '60 days', value: 60 },
+            { label: localize('15 days'), value: 15 },
+            { label: localize('30 days'), value: 30 },
+            { label: localize('60 days'), value: 60 },
         ],
-        title: 'Joined more than',
+        title: localize('Joined more than'),
     },
     preferredCountries: {
-        description: 'We’ll only show your ad to people in the countries you choose.',
-        title: 'Preferred countries',
+        description: localize('We’ll only show your ad to people in the countries you choose.'),
+        title: localize('Preferred countries'),
     },
 } as const;
diff --git a/src/constants/orders.ts b/src/constants/orders.ts
index 8d696e14..6525f128 100644
--- a/src/constants/orders.ts
+++ b/src/constants/orders.ts
@@ -1,3 +1,5 @@
+import { localize } from '@deriv-com/translations';
+
 export const ORDERS_STATUS = {
     ACTIVE_ORDERS: 'Active orders',
     BUYER_CONFIRMED: 'buyer-confirmed',
@@ -15,19 +17,19 @@ export const ORDERS_STATUS = {
 //TODO: Below constant to be removed once list is fetched from API
 export const ORDER_COMPLETION_TIME_LIST = [
     {
-        text: '1 hour',
+        text: localize('1 hour'),
         value: '3600',
     },
     {
-        text: '45 minutes',
+        text: localize('45 minutes'),
         value: '2700',
     },
     {
-        text: '30 minutes',
+        text: localize('30 minutes'),
         value: '1800',
     },
     {
-        text: '15 minutes',
+        text: localize('15 minutes'),
         value: '900',
     },
 ] as const;
diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
index f25ac611..645623c3 100644
--- a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
+++ b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
@@ -4,12 +4,14 @@ import { PageReturn, ProfileContent } from '@/components';
 import BlockDropdown from '@/components/AdvertiserName/BlockDropdown';
 import { BUY_SELL_URL, MY_PROFILE_URL } from '@/constants';
 import { api, useModalManager } from '@/hooks';
+import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import { AdvertiserAdvertsTable } from '../AdvertiserAdvertsTable';
 import { AdvertiserBlockOverlay } from '../AdvertiserBlockOverlay';
 import './Advertiser.scss';
 
 const Advertiser = () => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const { showModal } = useModalManager();
     const { advertiserId } = useParams<{ advertiserId: string }>();
@@ -35,7 +37,7 @@ const Advertiser = () => {
                             : BUY_SELL_URL
                     )
                 }
-                pageTitle='Advertiser’s page'
+                pageTitle={localize('Advertiser’s page')}
                 {...(isMobile && {
                     rightPlaceHolder: (
                         <BlockDropdown
diff --git a/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertiserAdvertsTable.tsx b/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertiserAdvertsTable.tsx
index bd6965b1..b6d2dc3a 100644
--- a/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertiserAdvertsTable.tsx
+++ b/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertiserAdvertsTable.tsx
@@ -5,6 +5,7 @@ import { ErrorModal, LoadingModal } from '@/components/Modals';
 import { ADVERT_TYPE, BUY_SELL, BUY_SELL_URL } from '@/constants';
 import { api } from '@/hooks';
 import { useIsAdvertiser, useIsAdvertiserBarred, useModalManager, useQueryString } from '@/hooks/custom-hooks';
+import { useTranslations } from '@deriv-com/translations';
 import { Tab, Tabs } from '@deriv-com/ui';
 import { AdvertsTableRenderer } from './AdvertsTableRenderer';
 import './AdvertiserAdvertsTable.scss';
@@ -16,6 +17,7 @@ type TAdvertiserAdvertsTableProps = {
 const TABS = [ADVERT_TYPE.BUY, ADVERT_TYPE.SELL];
 
 const AdvertiserAdvertsTable = ({ advertiserId }: TAdvertiserAdvertsTableProps) => {
+    const { localize } = useTranslations();
     const [advertId, setAdvertId] = useState<string | undefined>(undefined);
     const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
     const location = useLocation();
@@ -75,8 +77,8 @@ const AdvertiserAdvertsTable = ({ advertiserId }: TAdvertiserAdvertsTableProps)
     return (
         <div className='advertiser-adverts-table'>
             <Tabs activeTab={activeTab} className='lg:w-80 lg:mt-10' onChange={setActiveTab} variant='secondary'>
-                <Tab className='text-xs' title='Buy' />
-                <Tab title='Sell' />
+                <Tab className='text-xs' title={localize('Buy')} />
+                <Tab title={localize('Sell')} />
             </Tabs>
             <AdvertsTableRenderer
                 data={data}
@@ -90,9 +92,9 @@ const AdvertiserAdvertsTable = ({ advertiserId }: TAdvertiserAdvertsTableProps)
             {isModalOpenFor('ErrorModal') && (
                 <ErrorModal
                     isModalOpen
-                    message='It’s either deleted or no longer active.'
+                    message={localize('It’s either deleted or no longer active.')}
                     onRequestClose={hideModal}
-                    title='This ad is unavailable'
+                    title={localize('This ad is unavailable')}
                 />
             )}
             {isModalOpenFor('LoadingModal') && <LoadingModal isModalOpen />}
diff --git a/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertsTableRenderer/AdvertsTableRenderer.tsx b/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertsTableRenderer/AdvertsTableRenderer.tsx
index 9149e2ce..b95bdf98 100644
--- a/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertsTableRenderer/AdvertsTableRenderer.tsx
+++ b/src/pages/advertiser/screens/AdvertiserAdvertsTable/AdvertsTableRenderer/AdvertsTableRenderer.tsx
@@ -1,6 +1,7 @@
 import { TAdvertsTableRowRenderer } from 'types';
 import { AdvertsTableRow, Table } from '@/components';
 import { DerivLightIcNoDataIcon } from '@deriv/quill-icons';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { ActionScreen, Loader, Text } from '@deriv-com/ui';
 
 const columns = [{ header: 'Limits' }, { header: 'Rate (1 USD)' }, { header: 'Payment methods' }];
@@ -15,6 +16,7 @@ type TAdvertsTableRenderer = {
 };
 
 const AdvertsTableRenderer = ({ data, isFetching, isLoading, loadMoreAdverts }: TAdvertsTableRenderer) => {
+    const { localize } = useTranslations();
     if (isLoading) {
         return <Loader className='relative mt-40 top-0' />;
     }
@@ -24,7 +26,11 @@ const AdvertsTableRenderer = ({ data, isFetching, isLoading, loadMoreAdverts }:
             <div className='p-16 lg:p-12'>
                 <ActionScreen
                     icon={<DerivLightIcNoDataIcon height='128px' width='128px' />}
-                    title={<Text weight='bold'>There are no ads yet</Text>}
+                    title={
+                        <Text weight='bold'>
+                            <Localize i18n_default_text='There are no ads yet' />
+                        </Text>
+                    }
                 />
             </div>
         );
@@ -33,7 +39,7 @@ const AdvertsTableRenderer = ({ data, isFetching, isLoading, loadMoreAdverts }:
         <Table
             columns={columns}
             data={data}
-            emptyDataMessage='There are no matching ads.'
+            emptyDataMessage={localize('There are no matching ads.')}
             isFetching={isFetching}
             loadMoreFunction={loadMoreAdverts}
             renderHeader={headerRenderer}
diff --git a/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx b/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx
index cb78a489..04d63a08 100644
--- a/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx
+++ b/src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx
@@ -5,6 +5,7 @@ import { useOnClickOutside } from 'usehooks-ts';
 import { FullPageMobileWrapper } from '@/components';
 import { api } from '@/hooks';
 import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { CurrencySelector } from './CurrencySelector';
 import './CurrencyDropdown.scss';
@@ -51,7 +52,7 @@ const CurrencyDropdown = ({ selectedCurrency, setSelectedCurrency }: TCurrencyDr
                 }}
                 renderHeader={() => (
                     <Text size='lg' weight='bold'>
-                        Preferred currency
+                        <Localize i18n_default_text='Preferred currency' />
                     </Text>
                 )}
             >
@@ -76,7 +77,7 @@ const CurrencyDropdown = ({ selectedCurrency, setSelectedCurrency }: TCurrencyDr
                     color='less-prominent'
                     size={isMobile ? 'xs' : '2xs'}
                 >
-                    Currency
+                    <Localize i18n_default_text='Currency' />
                 </Text>
                 <Text size='sm'>{selectedCurrency}</Text>
                 <LabelPairedChevronDownMdRegularIcon
diff --git a/src/pages/buy-sell/components/CurrencyDropdown/CurrencySelector/CurrencySelector.tsx b/src/pages/buy-sell/components/CurrencyDropdown/CurrencySelector/CurrencySelector.tsx
index ba9380e1..715d842e 100644
--- a/src/pages/buy-sell/components/CurrencyDropdown/CurrencySelector/CurrencySelector.tsx
+++ b/src/pages/buy-sell/components/CurrencyDropdown/CurrencySelector/CurrencySelector.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import clsx from 'clsx';
 import { TCurrencyListItem } from 'types';
 import { Search } from '@/components';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import './CurrencySelector.scss';
 
@@ -12,6 +13,7 @@ type TCurrencySelectorProps = {
 };
 
 const CurrencySelector = ({ localCurrencies, onSelectItem, selectedCurrency }: TCurrencySelectorProps) => {
+    const { localize } = useTranslations();
     const [searchedCurrency, setSearchedCurrency] = useState<string>('');
     const [searchedCurrencies, setSearchedCurrencies] = useState(localCurrencies);
     const { isMobile } = useDevice();
@@ -42,7 +44,7 @@ const CurrencySelector = ({ localCurrencies, onSelectItem, selectedCurrency }: T
                 delayTimer={0}
                 name='search-currency'
                 onSearch={(value: string) => searchCurrencies(value)}
-                placeholder='Search'
+                placeholder={localize('Search')}
             />
             <div className='currency-selector__list'>
                 {searchedCurrencies.length > 0 ? (
@@ -80,7 +82,10 @@ const CurrencySelector = ({ localCurrencies, onSelectItem, selectedCurrency }: T
                         size={textSize}
                         weight={isMobile ? 'bold' : 'normal'}
                     >
-                        No results for &quot;{searchedCurrency}&quot;.
+                        <Localize
+                            i18n_default_text='No results for "{{searchedCurrency}}".'
+                            values={{ searchedCurrency }}
+                        />
                     </Text>
                 )}
             </div>
diff --git a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
index 17e710d6..5c9bc941 100644
--- a/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
+++ b/src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx
@@ -1,6 +1,7 @@
 import { MutableOption } from 'types';
 import { TSortByValues } from '@/utils';
 import { LabelPairedChevronDownMdRegularIcon, LabelPairedSortCaptionRegularIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
 import { Button, Dropdown, useDevice } from '@deriv-com/ui';
 import './SortDropdown.scss';
 
@@ -13,6 +14,7 @@ type TSortDropdownProps = {
 
 const SortDropdown = ({ list, onSelect, setIsFilterModalOpen, value }: TSortDropdownProps) => {
     const { isMobile } = useDevice();
+    const { localize } = useTranslations();
 
     if (isMobile) {
         return (
@@ -37,7 +39,7 @@ const SortDropdown = ({ list, onSelect, setIsFilterModalOpen, value }: TSortDrop
         <div className='sort-dropdown'>
             <Dropdown
                 dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
-                label='Sort by'
+                label={localize('Sort by')}
                 list={list as unknown as MutableOption[]}
                 name='Sort by'
                 onSelect={value => onSelect(value as TSortByValues)}
diff --git a/src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx b/src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx
index 45e2f755..c45cdee9 100644
--- a/src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx
+++ b/src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx
@@ -5,6 +5,7 @@ import { SORT_BY_LIST } from '@/constants';
 import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
 import { TSortByValues } from '@/utils';
 import { LabelPairedBarsFilterMdBoldIcon, LabelPairedBarsFilterSmBoldIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
 import { Button, Tab, Tabs, useDevice } from '@deriv-com/ui';
 import { CurrencyDropdown, SortDropdown } from '../../components';
 import './BuySellHeader.scss';
@@ -39,6 +40,7 @@ const BuySellHeader = ({
     sortDropdownValue,
 }: TBuySellHeaderProps) => {
     const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const isAdvertiserBarred = useIsAdvertiserBarred();
 
@@ -56,8 +58,8 @@ const BuySellHeader = ({
                 variant='primary'
                 wrapperClassName='buy-sell-header__tabs'
             >
-                <Tab title='Buy' />
-                <Tab title='Sell' />
+                <Tab title={localize('Buy')} />
+                <Tab title={localize('Sell')} />
             </Tabs>
             <div className='buy-sell-header__row'>
                 <div className='flex flex-row-reverse lg:flex-row gap-4'>
@@ -66,7 +68,7 @@ const BuySellHeader = ({
                         <Search
                             name='search-nickname'
                             onSearch={setSearchValue}
-                            placeholder={isMobile ? 'Search' : 'Search by nickname'}
+                            placeholder={isMobile ? localize('Search') : localize('Search by nickname')}
                         />
                     </div>
                 </div>
diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx b/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx
index cb5adc61..ab7719d7 100644
--- a/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx
+++ b/src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react';
 import { TAdvertsTableRowRenderer } from 'types';
 import { AdvertsTableRow, Table } from '@/components';
 import { DerivLightIcCashierNoAdsIcon } from '@deriv/quill-icons';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { ActionScreen, Loader, Text } from '@deriv-com/ui';
 
 const columns = [
@@ -28,6 +29,7 @@ const BuySellTableRenderer = ({
     loadMoreAdverts,
     searchValue,
 }: TBuySellTableRowRendererProps) => {
+    const { localize } = useTranslations();
     if (isLoading) {
         return <Loader className='mt-80' />;
     }
@@ -37,7 +39,11 @@ const BuySellTableRenderer = ({
             <div className='mt-[5.5rem] lg:mt-10'>
                 <ActionScreen
                     icon={<DerivLightIcCashierNoAdsIcon height='128px' width='128px' />}
-                    title={<Text weight='bold'>No ads for this currency at the moment 😞</Text>}
+                    title={
+                        <Text weight='bold'>
+                            <Localize i18n_default_text='No ads for this currency at the moment 😞' />
+                        </Text>
+                    }
                 />
             </div>
         );
@@ -47,7 +53,7 @@ const BuySellTableRenderer = ({
         <Table
             columns={columns}
             data={data}
-            emptyDataMessage='There are no matching ads.'
+            emptyDataMessage={localize('There are no matching ads.')}
             isFetching={isFetching}
             loadMoreFunction={loadMoreAdverts}
             renderHeader={headerRenderer}
diff --git a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx
index 7a1160cd..0b3bf2fb 100644
--- a/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx
+++ b/src/pages/my-ads/components/AdConditionsSection/AdConditionsSection.tsx
@@ -2,6 +2,7 @@ import { MouseEventHandler } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { TCountryListItem, TCurrency } from 'types';
 import { AD_CONDITION_TYPES } from '@/constants';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { AdConditionBlockSelector } from '../AdConditionBlockSelector';
 import { AdFormController } from '../AdFormController';
@@ -51,10 +52,10 @@ const AdConditionsSection = ({ countryList, currency, localCurrency, rateType, .
             />
             <div className='flex flex-col my-[2.4rem]'>
                 <Text color='prominent' size={labelSize}>
-                    Counterparty conditions (optional)
+                    <Localize i18n_default_text='Counterparty conditions (optional)' />
                 </Text>
                 <Text color='less-prominent' size={labelSize}>
-                    Only users who match these criteria will see your ad.
+                    <Localize i18n_default_text='Only users who match these criteria will see your ad.' />
                 </Text>
             </div>
             <AdConditionBlockSelector
diff --git a/src/pages/my-ads/components/AdFormController/AdFormController.tsx b/src/pages/my-ads/components/AdFormController/AdFormController.tsx
index 458ac05c..944ece43 100644
--- a/src/pages/my-ads/components/AdFormController/AdFormController.tsx
+++ b/src/pages/my-ads/components/AdFormController/AdFormController.tsx
@@ -1,5 +1,6 @@
 import { MouseEventHandler } from 'react';
 import { useQueryString } from '@/hooks/custom-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Button, useDevice } from '@deriv-com/ui';
 import './AdFormController.scss';
 
@@ -36,7 +37,7 @@ const AdFormController = ({
                 type='button'
                 variant='outlined'
             >
-                {onCancel ? 'Cancel' : 'Previous'}
+                {onCancel ? <Localize i18n_default_text='Cancel' /> : <Localize i18n_default_text='Previous' />}
             </Button>
             {getCurrentStep() < getTotalSteps() ? (
                 <Button
@@ -47,11 +48,17 @@ const AdFormController = ({
                     type='button'
                     variant='contained'
                 >
-                    Next
+                    <Localize i18n_default_text='Next' />
                 </Button>
             ) : (
                 <Button size='lg' textSize={textSize}>
-                    {`${isEdit ? 'Save changes' : 'Post ad'}`}
+                    {`${
+                        isEdit ? (
+                            <Localize i18n_default_text='Save changes' />
+                        ) : (
+                            <Localize i18n_default_text='Post ad' />
+                        )
+                    }`}
                 </Button>
             )}
         </div>
diff --git a/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx b/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
index da8b7c29..733a1a42 100644
--- a/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
+++ b/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
@@ -2,7 +2,6 @@ import { ComponentProps, ReactNode } from 'react';
 import clsx from 'clsx';
 import { Controller, useFormContext } from 'react-hook-form';
 import { getValidationRules } from '@/utils';
-import { useTranslations } from '@deriv-com/translations';
 import { Input } from '@deriv-com/ui';
 
 type TAdFormInputProps = ComponentProps<typeof Input> & {
@@ -23,7 +22,6 @@ const AdFormInput = ({
     ...props
 }: TAdFormInputProps) => {
     const { control, getValues } = useFormContext();
-    const { localize } = useTranslations();
     return (
         <Controller
             control={control}
@@ -49,7 +47,7 @@ const AdFormInput = ({
                 </div>
             )}
             rules={{
-                validate: getValidationRules(name, getValues, localize),
+                validate: getValidationRules(name, getValues),
             }}
         />
     );
diff --git a/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx b/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx
index 1893fdf6..275ee24b 100644
--- a/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx
+++ b/src/pages/my-ads/components/AdFormTextArea/AdFormTextArea.tsx
@@ -1,6 +1,7 @@
 import { Controller, useFormContext } from 'react-hook-form';
 import { VALID_SYMBOLS_PATTERN } from '@/constants';
 import { getTextFieldError } from '@/utils';
+import { useTranslations } from '@deriv-com/translations';
 import { TextArea } from '@deriv-com/ui';
 import './AdFormTextArea.scss';
 
@@ -13,6 +14,7 @@ type TAdFormTextAreaProps = {
 };
 const AdFormTextArea = ({ field, hint = '', label, name, required = false }: TAdFormTextAreaProps) => {
     const { control } = useFormContext();
+    const { localize } = useTranslations();
     return (
         <Controller
             control={control}
@@ -37,7 +39,7 @@ const AdFormTextArea = ({ field, hint = '', label, name, required = false }: TAd
                     message: getTextFieldError(field),
                     value: VALID_SYMBOLS_PATTERN,
                 },
-                required: required ? `${field} is required` : undefined,
+                required: required ? localize('{{field}} is required', { field }) : undefined,
             }}
         />
     );
diff --git a/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx b/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx
index e3c3e8f0..0d5eeae7 100644
--- a/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx
+++ b/src/pages/my-ads/components/AdPaymentSelection/AdPaymentSelection.tsx
@@ -1,3 +1,4 @@
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { BuyAdPaymentSelection } from '../BuyAdPaymentSelection';
 import { SellAdPaymentSelection } from '../SellAdPaymentSelection';
@@ -19,10 +20,14 @@ const AdPaymentSelection = ({
         <>
             <div className='mb-[2.4rem]'>
                 <Text as='div' color='prominent' size={textSize}>
-                    Payment methods
+                    <Localize i18n_default_text='Payment methods' />
                 </Text>
                 <Text as='div' color='less-prominent' size={textSize}>
-                    {isSellAdvert ? 'You may tap and choose up to 3.' : 'You may choose up to 3.'}
+                    {isSellAdvert ? (
+                        <Localize i18n_default_text='You may tap and choose up to 3.' />
+                    ) : (
+                        <Localize i18n_default_text='You may choose up to 3.' />
+                    )}
                 </Text>
             </div>
 
diff --git a/src/pages/my-ads/components/AdRateError/AdRateError.tsx b/src/pages/my-ads/components/AdRateError/AdRateError.tsx
index 2f44e152..b43c59fc 100644
--- a/src/pages/my-ads/components/AdRateError/AdRateError.tsx
+++ b/src/pages/my-ads/components/AdRateError/AdRateError.tsx
@@ -1,6 +1,7 @@
 import { RATE_TYPE } from '@/constants';
 import { api } from '@/hooks';
 import { useFloatingRate } from '@/hooks/custom-hooks';
+import { Localize } from '@deriv-com/translations';
 
 const AdRateError = () => {
     const { data } = api.settings.useSettings();
@@ -8,13 +9,19 @@ const AdRateError = () => {
     const { fixedRateAdvertsEndDate, rateType, reachedTargetDate } = useFloatingRate();
 
     if (rateType === RATE_TYPE.FLOAT) {
-        return reachedTargetDate || !fixedRateAdvertsEndDate
-            ? //TODO: handle translation
-              'Your ads with fixed rates have been deactivated. Set floating rates to reactivate them.'
-            : `Floating rates are enabled for ${localCurrency}. Ads with fixed rates will be deactivated. Switch to floating rates by ${fixedRateAdvertsEndDate}.`;
+        return reachedTargetDate || !fixedRateAdvertsEndDate ? (
+            <Localize i18n_default_text='Your ads with fixed rates have been deactivated. Set floating rates to reactivate them.' />
+        ) : (
+            <Localize
+                i18n_default_text='Floating rates are enabled for {{localCurrency}}. Ads with fixed rates will be deactivated. Switch to floating rates by {{fixedRateAdvertsEndDate}}.'
+                values={{ fixedRateAdvertsEndDate, localCurrency }}
+            />
+        );
     }
 
-    return 'Your ads with floating rates have been deactivated. Set fixed rates to reactivate them.';
+    return (
+        <Localize i18n_default_text='Your ads with floating rates have been deactivated. Set fixed rates to reactivate them.' />
+    );
 };
 
 export default AdRateError;
diff --git a/src/pages/my-ads/components/AdStatus/AdStatus.tsx b/src/pages/my-ads/components/AdStatus/AdStatus.tsx
index 303fa645..762a77de 100644
--- a/src/pages/my-ads/components/AdStatus/AdStatus.tsx
+++ b/src/pages/my-ads/components/AdStatus/AdStatus.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import './AdStatus.scss';
 
@@ -19,7 +20,7 @@ const AdStatus = ({ isActive = false }: TAdStatusProps) => {
             size={isMobile ? 'md' : 'sm'}
             weight='bold'
         >
-            {isActive ? 'Active' : 'Inactive'}
+            {isActive ? <Localize i18n_default_text='Active' /> : <Localize i18n_default_text='Inactive' />}
         </Text>
     );
 };
diff --git a/src/pages/my-ads/components/AdSummary/AdSummary.tsx b/src/pages/my-ads/components/AdSummary/AdSummary.tsx
index f1856108..4542425a 100644
--- a/src/pages/my-ads/components/AdSummary/AdSummary.tsx
+++ b/src/pages/my-ads/components/AdSummary/AdSummary.tsx
@@ -5,6 +5,7 @@ import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
 import { percentOf, roundOffDecimal, setDecimalPlaces } from '@/utils';
 import { useExchangeRates } from '@deriv-com/api-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
 
@@ -50,7 +51,8 @@ const AdSummary = ({
                 target_currencies: [localCurrency],
             });
         }
-    }, [localCurrency]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currency, localCurrency]);
 
     const exchangeRate = exchangeRateRef?.current?.rates?.[localCurrency];
     const marketRate = overrideExchangeRate ? Number(overrideExchangeRate) : exchangeRate;
@@ -73,11 +75,14 @@ const AdSummary = ({
             });
             return (
                 <Text color='less-prominent' size={summaryTextSize}>
-                    {`You’re ${adText} an ad to ${adTypeText}`}
+                    <Localize
+                        i18n_default_text='You’re {{adText}} an ad to {{adTypeText}}'
+                        values={{ adText, adTypeText }}
+                    />
                     <Text color='blue' size={summaryTextSize} weight='bold'>
                         {` ${displayOfferAmount} ${currency} `}
                     </Text>
-                    for
+                    <Localize i18n_default_text='for' />
                     <Text color='blue' size={summaryTextSize} weight='bold'>
                         {` ${displayTotal} ${localCurrency}`}
                     </Text>
@@ -90,7 +95,10 @@ const AdSummary = ({
 
         return (
             <Text color='less-prominent' size={summaryTextSize}>
-                {`You’re ${adText} an ad to ${adTypeText}`}
+                <Localize
+                    i18n_default_text='You’re {{adText}} an ad to {{adTypeText}}'
+                    values={{ adText, adTypeText }}
+                />
                 <Text color='blue' size={summaryTextSize} weight='bold'>
                     {` ${displayOfferAmount} ${currency}`}
                 </Text>
@@ -101,7 +109,10 @@ const AdSummary = ({
 
     return (
         <Text color='less-prominent' size={summaryTextSize}>
-            {`You’re ${adText} an ad to ${adTypeText}...`}
+            <Localize
+                i18n_default_text='You’re {{adText}} an ad to {{adTypeText}}...'
+                values={{ adText, adTypeText }}
+            />
         </Text>
     );
 };
diff --git a/src/pages/my-ads/components/AdType/AdType.tsx b/src/pages/my-ads/components/AdType/AdType.tsx
index 8050f055..b685344a 100644
--- a/src/pages/my-ads/components/AdType/AdType.tsx
+++ b/src/pages/my-ads/components/AdType/AdType.tsx
@@ -1,4 +1,5 @@
 import { TTextColors } from 'types';
+import { Localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import './AdType.scss';
 
@@ -10,7 +11,7 @@ const AdType = ({ adPauseColor, floatRate }: TAdTypeProps) => {
     return (
         <div className='ad-type'>
             <Text as='span' className='ad-type__badge' color={adPauseColor} size='2xs'>
-                Float
+                <Localize i18n_default_text='Float' />
             </Text>
             <Text as='span' color={adPauseColor} size='2xs'>
                 {floatRate}%
diff --git a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
index 5fe38aab..4fd13d6a 100644
--- a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
+++ b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
@@ -84,8 +84,8 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
                                     selected={value}
                                     textSize={textSize}
                                 >
-                                    <RadioGroup.Item label='Buy USD' value={BUY_SELL.BUY} />
-                                    <RadioGroup.Item label='Sell USD' value={BUY_SELL.SELL} />
+                                    <RadioGroup.Item label={localize('Buy USD')} value={BUY_SELL.BUY} />
+                                    <RadioGroup.Item label={localize('Sell USD')} value={BUY_SELL.SELL} />
                                 </RadioGroup>
                             </div>
                         );
@@ -96,7 +96,7 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
             <div className='flex flex-col lg:flex-row lg:gap-[1.6rem]'>
                 <AdFormInput
                     isDisabled={isEdit}
-                    label='Total amount'
+                    label={localize('Total amount')}
                     name='amount'
                     rightPlaceholder={
                         <Text color='general' size={textSize}>
@@ -122,11 +122,11 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
                                 />
                             );
                         }}
-                        rules={{ validate: getValidationRules('rate-value', getValues, localize) }}
+                        rules={{ validate: getValidationRules('rate-value', getValues) }}
                     />
                 ) : (
                     <AdFormInput
-                        label='Fixed rate'
+                        label={localize('Fixed rate')}
                         name='rate-value'
                         rightPlaceholder={
                             <Text color='general' size={textSize}>
@@ -138,7 +138,7 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
             </div>
             <div className='flex flex-col lg:flex-row lg:gap-[1.6rem]'>
                 <AdFormInput
-                    label='Min order'
+                    label={localize('Min order')}
                     name='min-order'
                     rightPlaceholder={
                         <Text color='general' size={textSize}>
@@ -148,7 +148,7 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
                     triggerValidationFunction={() => triggerValidation(['amount', 'max-order'])}
                 />
                 <AdFormInput
-                    label='Max order'
+                    label={localize('Max order')}
                     name='max-order'
                     rightPlaceholder={
                         <Text color='general' size={textSize}>
@@ -159,12 +159,17 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
                 />
             </div>
             {isSell && (
-                <AdFormTextArea field='Contact details' label='Your contact details' name='contact-details' required />
+                <AdFormTextArea
+                    field='Contact details'
+                    label={localize('Your contact details')}
+                    name='contact-details'
+                    required
+                />
             )}
             <AdFormTextArea
                 field='Instructions'
-                hint='This information will be visible to everyone'
-                label='Instructions(optional)'
+                hint={localize('This information will be visible to everyone')}
+                label={localize('Instructions(optional)')}
                 name='instructions'
             />
             <AdFormController {...props} isNextButtonDisabled={!isValid} onCancel={onCancel} />
diff --git a/src/pages/my-ads/components/AdWizard/AdWizard.tsx b/src/pages/my-ads/components/AdWizard/AdWizard.tsx
index 9d4cbb37..adb1b06f 100644
--- a/src/pages/my-ads/components/AdWizard/AdWizard.tsx
+++ b/src/pages/my-ads/components/AdWizard/AdWizard.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { TCountryListItem, TCurrency, TStep } from 'types';
 import { FormProgress, Wizard } from '@/components';
 import { LabelPairedXmarkLgBoldIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import { AdConditionsSection } from '../AdConditionsSection';
 import { AdPaymentDetailsSection } from '../AdPaymentDetailsSection';
@@ -43,11 +44,14 @@ const AdWizard = ({ countryList, onCancel, steps, ...rest }: TAdWizardNav) => {
                                 <Text weight='bold'>{steps[currentStep].header.title}</Text>
                                 {steps[currentStep + 1] ? (
                                     <Text as='div' color='less-prominent'>
-                                        {`Next: ${steps[currentStep + 1].header.title}`}
+                                        <Localize
+                                            i18n_default_text='Next: {{title}}'
+                                            values={{ title: steps[currentStep + 1].header.title }}
+                                        />
                                     </Text>
                                 ) : (
                                     <Text as='div' color='less-prominent'>
-                                        Last step
+                                        <Localize i18n_default_text='Last step' />
                                     </Text>
                                 )}
                             </div>
diff --git a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx
index 676772b0..a7e56a1a 100644
--- a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx
+++ b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.tsx
@@ -20,8 +20,8 @@ const BuyPaymentMethodsList = ({ list, onSelectPaymentMethod }: TBuyPaymentMetho
                 list={list}
                 name='payment-method-list'
                 onSelect={value => onSelectPaymentMethod(value as string)}
-                //TODO: add the placeholder once fixed from deriv-com/ui
-                // placeholder='Add'
+                // @ts-expect-error - Dropdown component does not have a value prop
+                placeholder='Add'
                 value=''
                 variant='prompt'
             />
diff --git a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx
index 2b79fb2d..19fc8042 100644
--- a/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx
+++ b/src/pages/my-ads/components/OrderTimeSelection/OrderTimeSelection.tsx
@@ -4,6 +4,7 @@ import { MutableOption } from 'types';
 import { OrderTimeTooltipModal } from '@/components/Modals';
 import { ORDER_COMPLETION_TIME_LIST, ORDER_TIME_INFO_MESSAGE } from '@/constants';
 import { LabelPairedChevronDownMdRegularIcon, LabelPairedCircleInfoCaptionRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Button, Dropdown, Text, Tooltip, useDevice } from '@deriv-com/ui';
 
 const OrderTimeSelection = () => {
@@ -15,7 +16,7 @@ const OrderTimeSelection = () => {
         <div className='my-4'>
             <div className='flex items-center gap-[0.8rem]'>
                 <Text color='prominent' size={isMobile ? 'md' : 'sm'}>
-                    Orders must be completed in
+                    <Localize i18n_default_text='Orders must be completed in' />
                 </Text>
                 <Text size='xs'>
                     <Tooltip className='max-w-none' message={ORDER_TIME_INFO_MESSAGE} position='top'>
diff --git a/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx b/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx
index 5b457b05..83067f47 100644
--- a/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx
+++ b/src/pages/my-ads/components/PreferredCountriesSelector/PreferredCountriesSelector.tsx
@@ -3,6 +3,7 @@ import { useFormContext } from 'react-hook-form';
 import { TAdConditionTypes, TCountryListItem } from 'types';
 import { PreferredCountriesModal } from '@/components/Modals';
 import { LabelPairedChevronRightSmRegularIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { AdConditionContentHeader } from '../AdConditionContentHeader';
 import './PreferredCountriesSelector.scss';
@@ -13,6 +14,7 @@ type TPreferredCountriesSelectorProps = {
 };
 
 const PreferredCountriesSelector = ({ countryList, type }: TPreferredCountriesSelectorProps) => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const { getValues, setValue } = useFormContext();
     const countries = Object.keys(countryList).map(key => ({
@@ -27,7 +29,7 @@ const PreferredCountriesSelector = ({ countryList, type }: TPreferredCountriesSe
     const getSelectedCountriesText = () => {
         const selectedCountries = getValues('preferred-countries');
         if (selectedCountries?.length === countries.length) {
-            return 'All countries';
+            return localize('All countries');
         }
         return selectedCountries?.map((value: string) => countryList[value]?.country_name).join(', ');
     };
diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx
index 25f70252..e6f5bdf5 100644
--- a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx
+++ b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx
@@ -5,6 +5,7 @@ import { api } from '@/hooks';
 import { useIsAdvertiser, useModalManager } from '@/hooks/custom-hooks';
 import { advertiserPaymentMethodsReducer } from '@/reducers';
 import { LabelPairedPlusLgBoldIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './SellAdPaymentSelection.scss';
 
@@ -64,7 +65,9 @@ const SellAdPaymentSelection = ({ onSelectPaymentMethod, selectedPaymentMethodId
                 >
                     <LabelPairedPlusLgBoldIcon fill='white' />
                 </Button>
-                <Text size='sm'>Payment method</Text>
+                <Text size='sm'>
+                    <Localize i18n_default_text='Payment method' />
+                </Text>
             </div>
             {isModalOpenFor('PaymentMethodForm') && (
                 <PaymentMethodForm
diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx
index 417eb6b2..21183ba2 100644
--- a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx
+++ b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx
@@ -16,7 +16,8 @@ const BASE_CURRENCY = 'USD';
 
 const getList = (isActive = false) => [
     { label: 'Edit', value: 'edit' },
-    { label: 'Copy', value: 'copy' },
+    // TODO: to be added when copy ads feature is released
+    // { label: 'Copy', value: 'copy' },
     { label: 'Share', value: 'share' },
     { label: `${isActive ? 'Deactivate' : 'Activate'}`, value: `${isActive ? 'deactivate' : 'activate'}` },
     { label: 'Delete', value: 'delete' },
diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.tsx b/src/pages/my-profile/screens/MyProfile/MyProfile.tsx
index 573da0a1..1a1e6687 100644
--- a/src/pages/my-profile/screens/MyProfile/MyProfile.tsx
+++ b/src/pages/my-profile/screens/MyProfile/MyProfile.tsx
@@ -8,6 +8,7 @@ import {
     usePoiPoaStatus,
     useQueryString,
 } from '@/hooks/custom-hooks';
+import { useTranslations } from '@deriv-com/translations';
 import { Loader, Tab, Tabs, useDevice } from '@deriv-com/ui';
 import { MyProfileAdDetails } from '../MyProfileAdDetails';
 import { MyProfileCounterparties } from '../MyProfileCounterparties';
@@ -19,6 +20,7 @@ import './MyProfile.scss';
 const TABS = ['Stats', 'Payment methods', 'Ad details', 'My counterparties'];
 
 const MyProfile = () => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const { queryString, setQueryString } = useQueryString();
     const { data } = usePoiPoaStatus();
@@ -30,10 +32,10 @@ const MyProfile = () => {
     const currentTab = queryString.tab;
 
     const tabs = [
-        { component: <MyProfileStats />, title: 'Stats' },
-        { component: <PaymentMethods />, title: 'Payment methods' },
-        { component: <MyProfileAdDetails />, title: 'Ad details' },
-        { component: <MyProfileCounterparties />, title: 'My counterparties' },
+        { component: <MyProfileStats />, title: localize('Stats') },
+        { component: <PaymentMethods />, title: localize('Payment methods') },
+        { component: <MyProfileAdDetails />, title: localize('Ad details') },
+        { component: <MyProfileCounterparties />, title: localize('My counterparties') },
     ];
 
     useEffect(() => {
diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
index f984f232..563c38b9 100644
--- a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
+++ b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
@@ -4,11 +4,6 @@
     align-items: flex-end;
     gap: 2.4rem;
 
-    &__header {
-        font-size: 1.6rem;
-        font-weight: 800;
-    }
-
     @include mobile {
         padding: 2rem;
     }
diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
index f7dde69c..da8c1c0c 100644
--- a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
+++ b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx
@@ -1,38 +1,43 @@
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
-import { THooks } from 'types';
-import { FullPageMobileWrapper, TextArea } from '@/components';
+import { FullPageMobileWrapper } from '@/components';
 import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
-import { Button, Loader, useDevice } from '@deriv-com/ui';
+import { Localize, useTranslations } from '@deriv-com/translations';
+import { Button, Loader, Text, TextArea, useDevice } from '@deriv-com/ui';
 import './MyProfileAdDetails.scss';
 
 type TMYProfileAdDetailsTextAreaProps = {
-    advertiserInfo: THooks.Advertiser.GetInfo;
+    advertDescription: string;
+    contactInfo: string;
     setAdvertDescription: Dispatch<SetStateAction<string>>;
     setContactInfo: Dispatch<SetStateAction<string>>;
 };
 
 const MyProfileAdDetailsTextArea = ({
-    advertiserInfo,
+    advertDescription,
+    contactInfo,
     setAdvertDescription,
     setContactInfo,
 }: TMYProfileAdDetailsTextAreaProps) => {
+    const { localize } = useTranslations();
     return (
         <>
             <TextArea
-                label='Contact details'
+                data-testid='dt_profile_ad_details_contact'
+                label={localize('Contact details')}
                 maxLength={300}
-                onChange={e => setContactInfo((e.target as HTMLInputElement).value)}
-                testId='dt_profile_ad_details_contact'
-                value={advertiserInfo?.contact_info || ''}
+                onChange={e => setContactInfo(e.target.value)}
+                textSize='sm'
+                value={contactInfo}
             />
             <TextArea
-                hint='This information will be visible to everyone.'
-                label='Instructions'
+                data-testid='dt_profile_ad_details_description'
+                hint={localize('This information will be visible to everyone.')}
+                label={localize('Instructions')}
                 maxLength={300}
-                onChange={e => setAdvertDescription((e.target as HTMLInputElement).value)}
-                testId='dt_profile_ad_details_description'
-                value={advertiserInfo?.default_advert_description || ''}
+                onChange={e => setAdvertDescription(e.target.value)}
+                textSize='sm'
+                value={advertDescription}
             />
         </>
     );
@@ -78,14 +83,19 @@ const MyProfileAdDetails = () => {
                 }
                 renderFooter={() => (
                     <Button disabled={!hasUpdated} isFullWidth onClick={submitAdDetails} size='lg'>
-                        Save
+                        <Localize i18n_default_text='Save' />
                     </Button>
                 )}
-                renderHeader={() => <h1 className='my-profile-ad-details__header'>Ad Details</h1>}
+                renderHeader={() => (
+                    <Text size='lg' weight='bold'>
+                        <Localize i18n_default_text='Ad Details ' />
+                    </Text>
+                )}
             >
                 <div className='my-profile-ad-details'>
                     <MyProfileAdDetailsTextArea
-                        advertiserInfo={advertiserInfo}
+                        advertDescription={advertDescription}
+                        contactInfo={contactInfo}
                         setAdvertDescription={setAdvertDescription}
                         setContactInfo={setContactInfo}
                     />
@@ -96,13 +106,14 @@ const MyProfileAdDetails = () => {
     return (
         <div className='my-profile-ad-details'>
             <MyProfileAdDetailsTextArea
-                advertiserInfo={advertiserInfo}
+                advertDescription={advertDescription}
+                contactInfo={contactInfo}
                 setAdvertDescription={setAdvertDescription}
                 setContactInfo={setContactInfo}
             />
             <div className='my-profile-ad-details__border' />
             <Button disabled={!hasUpdated} onClick={submitAdDetails} size='lg' textSize='sm'>
-                Save
+                <Localize i18n_default_text='Save' />
             </Button>
         </div>
     );
diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/__tests__/MyProfileAdDetails.spec.tsx b/src/pages/my-profile/screens/MyProfileAdDetails/__tests__/MyProfileAdDetails.spec.tsx
index 000ebb28..4b1de46f 100644
--- a/src/pages/my-profile/screens/MyProfileAdDetails/__tests__/MyProfileAdDetails.spec.tsx
+++ b/src/pages/my-profile/screens/MyProfileAdDetails/__tests__/MyProfileAdDetails.spec.tsx
@@ -1,5 +1,6 @@
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+// import userEvent from '@testing-library/user-event';
 import MyProfileAdDetails from '../MyProfileAdDetails';
 
 const mockUseAdvertiserInfo = {
@@ -47,9 +48,9 @@ describe('MyProfileBalance', () => {
         mockUseAdvertiserInfo.data = {};
         render(<MyProfileAdDetails />);
         const contactTextAreaNode = screen.getByTestId('dt_profile_ad_details_contact');
-        expect(within(contactTextAreaNode).getByRole('textbox')).toHaveValue('');
+        expect(contactTextAreaNode).toHaveValue('');
         const descriptionTextAreaNode = screen.getByTestId('dt_profile_ad_details_description');
-        expect(within(descriptionTextAreaNode).getByRole('textbox')).toHaveValue('');
+        expect(descriptionTextAreaNode).toHaveValue('');
     });
     it('should render initial empty details when user has not updated their details yet', () => {
         mockUseAdvertiserInfo.data = {
@@ -58,9 +59,9 @@ describe('MyProfileBalance', () => {
         };
         render(<MyProfileAdDetails />);
         const contactTextAreaNode = screen.getByTestId('dt_profile_ad_details_contact');
-        expect(within(contactTextAreaNode).getByRole('textbox')).toHaveValue('');
+        expect(contactTextAreaNode).toHaveValue('');
         const descriptionTextAreaNode = screen.getByTestId('dt_profile_ad_details_description');
-        expect(within(descriptionTextAreaNode).getByRole('textbox')).toHaveValue('');
+        expect(descriptionTextAreaNode).toHaveValue('');
     });
     it('should render initial details when user has previously updated their details', () => {
         mockUseAdvertiserInfo.data = {
@@ -69,9 +70,9 @@ describe('MyProfileBalance', () => {
         };
         render(<MyProfileAdDetails />);
         const contactTextAreaNode = screen.getByTestId('dt_profile_ad_details_contact');
-        expect(within(contactTextAreaNode).getByRole('textbox')).toHaveValue('0123456789');
+        expect(contactTextAreaNode).toHaveValue('0123456789');
         const descriptionTextAreaNode = screen.getByTestId('dt_profile_ad_details_description');
-        expect(within(descriptionTextAreaNode).getByRole('textbox')).toHaveValue('mock description');
+        expect(descriptionTextAreaNode).toHaveValue('mock description');
     });
     it('should render and post updated details when user updates their details', async () => {
         mockUseAdvertiserInfo.data = {
@@ -79,10 +80,8 @@ describe('MyProfileBalance', () => {
             default_advert_description: 'mock description',
         };
         render(<MyProfileAdDetails />);
-        const contactTextBoxNode = within(screen.getByTestId('dt_profile_ad_details_contact')).getByRole('textbox');
-        const descriptionTextBoxNode = within(screen.getByTestId('dt_profile_ad_details_description')).getByRole(
-            'textbox'
-        );
+        const contactTextBoxNode = screen.getByTestId('dt_profile_ad_details_contact');
+        const descriptionTextBoxNode = screen.getByTestId('dt_profile_ad_details_description');
         const submitBtn = screen.getByRole('button', {
             name: 'Save',
         });
@@ -93,7 +92,7 @@ describe('MyProfileBalance', () => {
         expect(submitBtn).toBeEnabled();
 
         await userEvent.click(submitBtn);
-        expect(mockMutateAdvertiser).toBeCalledWith({
+        expect(mockMutateAdvertiser).toHaveBeenCalledWith({
             contact_info: '01234567890',
             default_advert_description: 'mock description here',
         });
@@ -101,16 +100,14 @@ describe('MyProfileBalance', () => {
     it('should render mobile screen', async () => {
         mockUseDevice.isMobile = true;
         render(<MyProfileAdDetails />);
-        const contactTextBoxNode = within(screen.getByTestId('dt_profile_ad_details_contact')).getByRole('textbox');
-        const descriptionTextBoxNode = within(screen.getByTestId('dt_profile_ad_details_description')).getByRole(
-            'textbox'
-        );
+        const contactTextBoxNode = screen.getByTestId('dt_profile_ad_details_contact');
+        const descriptionTextBoxNode = screen.getByTestId('dt_profile_ad_details_description');
         expect(contactTextBoxNode).toBeInTheDocument();
         expect(descriptionTextBoxNode).toBeInTheDocument();
 
         const goBackBtn = screen.getByTestId('dt_mobile_wrapper_button');
         await userEvent.click(goBackBtn);
-        expect(mockSetQueryString).toBeCalledWith({
+        expect(mockSetQueryString).toHaveBeenCalledWith({
             tab: 'default',
         });
     });
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx
index 18ef33ee..fefadf03 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterparties.tsx
@@ -3,6 +3,7 @@ import { FullPageMobileWrapper } from '@/components';
 import { RadioGroupFilterModal } from '@/components/Modals';
 import { COUNTERPARTIES_DROPDOWN_LIST } from '@/constants';
 import { useDevice, useQueryString } from '@/hooks/custom-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import { MyProfileCounterpartiesHeader } from './MyProfileCounterpartiesHeader';
 import { MyProfileCounterpartiesTable } from './MyProfileCounterpartiesTable';
@@ -23,7 +24,7 @@ const MyProfileCounterpartiesDisplayWrapper = ({ children }: PropsWithChildren<u
                 }
                 renderHeader={() => (
                     <Text className='my-profile-counterparties__header' size='md' weight='bold'>
-                        My counterparties
+                        <Localize i18n_default_text='My counterparties' />
                     </Text>
                 )}
             >
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesEmpty/MyProfileCounterpartiesEmpty.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesEmpty/MyProfileCounterpartiesEmpty.tsx
index 2e8d3c29..babe2700 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesEmpty/MyProfileCounterpartiesEmpty.tsx
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesEmpty/MyProfileCounterpartiesEmpty.tsx
@@ -1,11 +1,14 @@
 import { DerivLightIcEmptyBlockedAdvertisersIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import './MyProfileCounterpartiesEmpty.scss';
 
 const MyProfileCounterpartiesEmpty = () => (
     <div className='my-profile-counterparties-empty'>
         <DerivLightIcEmptyBlockedAdvertisersIcon height='12.8rem' width='12.8rem' />
-        <Text weight='bold'>No one to show here</Text>
+        <Text weight='bold'>
+            <Localize i18n_default_text='No one to show here ' />
+        </Text>
     </div>
 );
 export default MyProfileCounterpartiesEmpty;
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss
index baaae2cc..693a0951 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.scss
@@ -1,22 +1,34 @@
 .my-profile-counterparties-header {
     display: grid;
     gap: 1.6rem;
-    margin-top: 2.4rem;
+    margin: 2.4rem 0;
     grid-template-columns: repeat(3, 1fr);
 
-    @include mobile {
-        display: flex;
-        margin: 2.4rem 0;
+    & .deriv-input {
+        height: 4.2rem;
 
-        .search {
-            max-width: 28rem;
+        &__right-content {
+            display: flex;
+            align-items: center;
+        }
+
+        &__left-content {
+            display: flex;
+            align-items: center;
+        }
+    }
+    .search {
+        max-width: 28rem;
 
-            @include mobile {
-                max-width: 100%;
-            }
+        @include mobile {
+            max-width: 100%;
         }
     }
 
+    @include mobile {
+        display: flex;
+    }
+
     &__sort-icon {
         display: flex;
         align-items: center;
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
index 987ffd0c..186503e6 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesHeader/MyProfileCounterpartiesHeader.tsx
@@ -1,9 +1,10 @@
 import { MutableOption } from 'types';
-import { Dropdown, Search } from '@/components';
+import { Search } from '@/components';
 import { COUNTERPARTIES_DROPDOWN_LIST } from '@/constants';
 import { useDevice } from '@/hooks/custom-hooks';
-import { LegacySort1pxIcon } from '@deriv/quill-icons';
-import { Button, Text } from '@deriv-com/ui';
+import { LabelPairedChevronDownMdRegularIcon, LegacySort1pxIcon } from '@deriv/quill-icons';
+import { Localize, useTranslations } from '@deriv-com/translations';
+import { Button, Dropdown, Text } from '@deriv-com/ui';
 import './MyProfileCounterpartiesHeader.scss';
 
 type MyProfileCounterpartiesHeaderProps = {
@@ -20,16 +21,14 @@ const MyProfileCounterpartiesHeader = ({
     setSearchValue,
 }: MyProfileCounterpartiesHeaderProps) => {
     const { isMobile } = useDevice();
+    const { localize } = useTranslations();
     return (
         <div className='my-profile-counterparties__content-header'>
             <Text as='p' size='sm'>
-                When you block someone, you won’t see their ads, and they can’t see yours. Your ads will be hidden from
-                their search results, too.
+                <Localize i18n_default_text='When you block someone, you won’t see their ads, and they can’t see yours. Your ads will be hidden from their search results, too.' />
             </Text>
             <div className='my-profile-counterparties-header'>
-                {/* TODO: to be replaced by deriv-com/ui search component */}
                 <Search name='counterparties-search' onSearch={setSearchValue} placeholder='Search by nickname' />
-                {/* TODO: to be replaced by deriv-com/ui dropdown component */}
                 {isMobile ? (
                     <Button
                         className='my-profile-counterparties-header__sort-icon'
@@ -40,11 +39,12 @@ const MyProfileCounterpartiesHeader = ({
                     />
                 ) : (
                     <Dropdown
-                        label='Filter by'
+                        dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
+                        label={localize('Filter by')}
                         list={COUNTERPARTIES_DROPDOWN_LIST as unknown as MutableOption[]}
                         listHeight='sm'
                         name='counterparty-filter'
-                        onSelect={setDropdownValue}
+                        onSelect={value => setDropdownValue(value as string)}
                         value={dropdownValue}
                     />
                 )}
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx
index 7c958126..8586a172 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { api } from '@/hooks';
+import { Localize } from '@deriv-com/translations';
 import { Loader, Table, Text } from '@deriv-com/ui';
 import { MyProfileCounterpartiesEmpty } from '../MyProfileCounterpartiesEmpty';
 import { MyProfileCounterpartiesTableRow } from '../MyProfileCounterpartiesTableRow';
@@ -54,7 +55,11 @@ const MyProfileCounterpartiesTable = ({
 
     if (!isFetching && data.length === 0) {
         if (searchValue === '') return <MyProfileCounterpartiesEmpty />;
-        return <Text weight='bold'>There are no matching name</Text>;
+        return (
+            <Text weight='bold'>
+                <Localize i18n_default_text='There are no matching name' />
+            </Text>
+        );
     }
 
     return (
diff --git a/src/pages/my-profile/screens/MyProfileStats/MyProfileStats.tsx b/src/pages/my-profile/screens/MyProfileStats/MyProfileStats.tsx
index 6cfd0a9e..daca3cff 100644
--- a/src/pages/my-profile/screens/MyProfileStats/MyProfileStats.tsx
+++ b/src/pages/my-profile/screens/MyProfileStats/MyProfileStats.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { api } from '@/hooks';
 import { useAdvertiserStats } from '@/hooks/custom-hooks';
 import { numberToCurrencyText } from '@/utils';
+import { useTranslations } from '@deriv-com/translations';
 import { Loader } from '@deriv-com/ui';
 import MyProfileStatsItem from './MyProfileStatsItem';
 import './MyProfileStats.scss';
@@ -11,6 +12,7 @@ type TMyProfileStatsProps = {
 };
 
 const MyProfileStats = ({ advertiserId }: TMyProfileStatsProps) => {
+    const { localize } = useTranslations();
     const [shouldShowTradeVolumeLifetime, setShouldShowTradeVolumeLifetime] = useState(false);
     const [shouldShowTotalOrdersLifetime, setShouldShowTotalOrdersLifetime] = useState(false);
     const { data, isLoading } = useAdvertiserStats(advertiserId);
@@ -37,28 +39,28 @@ const MyProfileStats = ({ advertiserId }: TMyProfileStatsProps) => {
     return (
         <div className='my-profile-stats' data-testid='dt_profile_stats'>
             <MyProfileStatsItem
-                label='Buy completion'
+                label={localize('Buy completion')}
                 testId='dt_profile_stats_buy_completion'
                 value={buyCompletionRate ? `${buyCompletionRate}% (${buyOrdersCount})` : '-'}
             />
             <MyProfileStatsItem
-                label='Sell completion'
+                label={localize('Sell completion')}
                 testId='dt_profile_stats_sell_completion'
                 value={sellCompletionRate ? `${sellCompletionRate}% (${sellOrdersCount})` : '-'}
             />
             <MyProfileStatsItem
-                label='Avg pay time'
+                label={localize('Avg pay time')}
                 testId='dt_profile_stats_avg_pay_time'
                 value={averagePayTime !== -1 ? getTimeValueText(averagePayTime) : '-'}
             />
             <MyProfileStatsItem
-                label='Avg release time'
+                label={localize('Avg release time')}
                 testId='dt_profile_stats_avg_release_time'
                 value={averageReleaseTime !== -1 ? getTimeValueText(averageReleaseTime) : '-'}
             />
             <MyProfileStatsItem
                 currency={activeAccount?.currency || 'USD'}
-                label='Trade volume'
+                label={localize('Trade volume')}
                 onClickLifetime={hasClickedLifetime => setShouldShowTradeVolumeLifetime(hasClickedLifetime)}
                 shouldShowLifetime
                 testId='dt_profile_stats_trade_volume'
@@ -69,14 +71,14 @@ const MyProfileStats = ({ advertiserId }: TMyProfileStatsProps) => {
                 }
             />
             <MyProfileStatsItem
-                label='Total orders'
+                label={localize('Total orders')}
                 onClickLifetime={hasClickedLifetime => setShouldShowTotalOrdersLifetime(hasClickedLifetime)}
                 shouldShowLifetime
                 testId='dt_profile_stats_total_orders'
                 value={shouldShowTotalOrdersLifetime ? totalOrdersLifetime.toString() : totalOrders.toString()}
             />
             <MyProfileStatsItem
-                label='Trade partners'
+                label={localize('Trade partners')}
                 shouldShowDuration={false}
                 testId='dt_profile_stats_trade_partners'
                 value={tradePartners.toString()}
diff --git a/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx b/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx
index c96d7365..08ceadbe 100644
--- a/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx
+++ b/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsItem.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import './MyProfileStatsItem.scss';
 
@@ -53,7 +54,7 @@ const MyProfileStatsItem = ({
                         </Text>
                         <button className='my-profile-stats__item--inactive' onClick={() => onClickLabel(true)}>
                             <Text color={hasClickedLifetime ? 'red' : 'less-prominent'} size={textSize}>
-                                lifetime
+                                <Localize i18n_default_text='lifetime' />
                             </Text>
                         </button>
                     </>
diff --git a/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx b/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx
index f48430e8..1232bbda 100644
--- a/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx
+++ b/src/pages/my-profile/screens/MyProfileStats/MyProfileStatsMobile.tsx
@@ -1,5 +1,6 @@
 import { FullPageMobileWrapper } from '@/components';
 import { useQueryString } from '@/hooks/custom-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import MyProfileStats from './MyProfileStats';
 
@@ -15,7 +16,7 @@ const MyProfileStatsMobile = () => {
             }
             renderHeader={() => (
                 <Text lineHeight='xs' size='lg' weight='bold'>
-                    Stats
+                    <Localize i18n_default_text='Stats' />
                 </Text>
             )}
         >
diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx
index 069c024f..63127e1d 100644
--- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx
+++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.tsx
@@ -1,6 +1,7 @@
 import { FullPageMobileWrapper } from '@/components';
 import { useQueryString } from '@/hooks/custom-hooks';
 import { DerivLightIcPaymentMethodsWalletIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './PaymentMethodsEmpty.scss';
 
@@ -29,7 +30,7 @@ const PaymentMethodsEmpty = ({ onAddPaymentMethod }: TPaymentMethodsEmptyProps)
                 }}
                 renderHeader={() => (
                     <Text size='lg' weight='bold'>
-                        Payment methods
+                        <Localize i18n_default_text='Payment methods' />
                     </Text>
                 )}
             >
@@ -37,16 +38,18 @@ const PaymentMethodsEmpty = ({ onAddPaymentMethod }: TPaymentMethodsEmptyProps)
                     <DerivLightIcPaymentMethodsWalletIcon height='16rem' />
                     {/* TODO: Remember to localize the text below */}
                     <Text className='payment-methods-empty__heading' size='lg' weight='bold'>
-                        You haven’t added any payment methods yet
+                        <Localize i18n_default_text='You haven’t added any payment methods yet' />
+                    </Text>
+                    <Text size='lg'>
+                        <Localize i18n_default_text='Hit the button below to add payment methods.' />
                     </Text>
-                    <Text size='lg'>Hit the button below to add payment methods.</Text>
                     <Button
                         className='payment-methods-empty__button'
                         onClick={() => {
                             onAddPaymentMethod();
                         }}
                     >
-                        Add payment methods
+                        <Localize i18n_default_text='Add payment methods' />
                     </Button>
                 </div>
             </FullPageMobileWrapper>
@@ -58,16 +61,18 @@ const PaymentMethodsEmpty = ({ onAddPaymentMethod }: TPaymentMethodsEmptyProps)
             <DerivLightIcPaymentMethodsWalletIcon height='16rem' />
             {/* TODO: Remember to localize the text below */}
             <Text className='payment-methods-empty__heading' weight='bold'>
-                You haven’t added any payment methods yet
+                <Localize i18n_default_text='You haven’t added any payment methods yet' />
+            </Text>
+            <Text>
+                <Localize i18n_default_text='Hit the button below to add payment methods.' />
             </Text>
-            <Text>Hit the button below to add payment methods.</Text>
             <Button
                 className='payment-methods-empty__button'
                 onClick={() => {
                     onAddPaymentMethod();
                 }}
             >
-                Add payment methods
+                <Localize i18n_default_text='Add payment methods' />
             </Button>
         </div>
     );
diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx
index 8848a7b2..16491bae 100644
--- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx
+++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/AddNewButton.tsx
@@ -1,3 +1,4 @@
+import { Localize } from '@deriv-com/translations';
 import { Button } from '@deriv-com/ui';
 
 type TAddNewButtonProps = {
@@ -14,8 +15,7 @@ type TAddNewButtonProps = {
  * **/
 const AddNewButton = ({ isMobile, onAdd }: TAddNewButtonProps) => (
     <Button isFullWidth={isMobile} onClick={() => onAdd()} size='lg' textSize={isMobile ? 'md' : 'sm'}>
-        {/*  TODO Remember to translate this*/}
-        Add new
+        <Localize i18n_default_text='Add new' />
     </Button>
 );
 
diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx
index 495a135b..4edaf86b 100644
--- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx
+++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.tsx
@@ -1,6 +1,7 @@
 import { TFormState, THooks, TSelectedPaymentMethod } from 'types';
 import { FullPageMobileWrapper } from '@/components';
 import { useQueryString } from '@/hooks/custom-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import AddNewButton from './AddNewButton';
 import { PaymentMethodsListContent } from './PaymentMethodsListContent';
@@ -42,10 +43,9 @@ const PaymentMethodsList = ({
                     })
                 }
                 renderFooter={() => <AddNewButton isMobile={isMobile} onAdd={onAdd} />}
-                // TODO: Remember to translate the title
                 renderHeader={() => (
                     <Text size='lg' weight='bold'>
-                        Payment methods
+                        <Localize i18n_default_text='Payment methods' />
                     </Text>
                 )}
             >
diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.tsx
index f457354f..fb8d2301 100644
--- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.tsx
+++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsListContent/PaymentMethodsListContent.tsx
@@ -5,6 +5,7 @@ import { PaymentMethodErrorModal, PaymentMethodModal } from '@/components/Modals
 import { PAYMENT_METHOD_CATEGORIES } from '@/constants';
 import { api } from '@/hooks';
 import { sortPaymentMethods } from '@/utils';
+import { useTranslations } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import AddNewButton from '../AddNewButton';
 import './PaymentMethodsListContent.scss';
@@ -44,6 +45,7 @@ const PaymentMethodsListContent = ({
     onResetFormState,
     p2pAdvertiserPaymentMethods,
 }: TPaymentMethodsListContentProps) => {
+    const { localize } = useTranslations();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const {
         delete: deleteAdvertiserPaymentMethod,
@@ -117,7 +119,6 @@ const PaymentMethodsListContent = ({
                     </div>
                 );
             })}
-            {/* TODO: Remember to translate these strings */}
             {actionType === 'DELETE' && isDeleteError && (
                 <PaymentMethodErrorModal
                     errorMessage={String(deleteError?.error?.message)}
@@ -125,12 +126,12 @@ const PaymentMethodsListContent = ({
                     onConfirm={() => {
                         setIsModalOpen(false);
                     }}
-                    title='Something’s not right'
+                    title={localize('Something’s not right')}
                 />
             )}
             {actionType === 'DELETE' && !isDeleteError && (
                 <PaymentMethodModal
-                    description='Are you sure you want to remove this payment method?'
+                    description={localize('Are you sure you want to remove this payment method?')}
                     isModalOpen={isModalOpen}
                     onConfirm={() => {
                         deleteAdvertiserPaymentMethod(Number(selectedPaymentMethod?.id));
@@ -138,13 +139,14 @@ const PaymentMethodsListContent = ({
                     onReject={() => {
                         setIsModalOpen(false);
                     }}
-                    primaryButtonLabel='No'
-                    secondaryButtonLabel='Yes, remove'
-                    title={`Delete ${
-                        (selectedPaymentMethod?.fields?.bank_name as TBankName)?.value ??
-                        (selectedPaymentMethod?.fields?.name as TName)?.value ??
-                        selectedPaymentMethod?.display_name
-                    }?`}
+                    primaryButtonLabel={localize('No')}
+                    secondaryButtonLabel={localize('Yes, remove')}
+                    title={localize('Delete {{value}}?', {
+                        value:
+                            (selectedPaymentMethod?.fields?.bank_name as TBankName)?.value ??
+                            (selectedPaymentMethod?.fields?.name as TName)?.value ??
+                            selectedPaymentMethod?.display_name,
+                    })}
                 />
             )}
         </div>
diff --git a/src/pages/orders/components/ChatError/ChatError.tsx b/src/pages/orders/components/ChatError/ChatError.tsx
index c4b833ee..05e1c500 100644
--- a/src/pages/orders/components/ChatError/ChatError.tsx
+++ b/src/pages/orders/components/ChatError/ChatError.tsx
@@ -1,4 +1,5 @@
 import { MouseEventHandler } from 'react';
+import { Localize } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 
 type TChatErrorProps = {
@@ -10,9 +11,11 @@ const ChatError = ({ onClickRetry }: TChatErrorProps) => {
 
     return (
         <div className='flex flex-col gap-[1.6rem] items-center'>
-            <Text size={isMobile ? 'lg' : 'md'}>Oops, something went wrong</Text>
+            <Text size={isMobile ? 'lg' : 'md'}>
+                <Localize i18n_default_text='Oops, something went wrong' />
+            </Text>
             <Button className='w-fit' onClick={onClickRetry} variant='contained'>
-                Retry
+                <Localize i18n_default_text='Retry' />
             </Button>
         </div>
     );
diff --git a/src/pages/orders/components/ChatFooter/ChatFooter.tsx b/src/pages/orders/components/ChatFooter/ChatFooter.tsx
index 916902ce..3792e9be 100644
--- a/src/pages/orders/components/ChatFooter/ChatFooter.tsx
+++ b/src/pages/orders/components/ChatFooter/ChatFooter.tsx
@@ -1,4 +1,5 @@
 import { ChangeEvent, KeyboardEvent, useRef, useState } from 'react';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Input, Text, useDevice } from '@deriv-com/ui';
 import ChatFooterIcon from '../ChatFooterIcon/ChatFooterIcon';
 import { TextAreaWithIcon } from '../TextAreaWithIcon';
@@ -15,6 +16,7 @@ type TChatFooterProps = {
     sendMessage: (message: string) => void;
 };
 const ChatFooter = ({ isClosed, sendFile, sendMessage }: TChatFooterProps) => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const [value, setValue] = useState('');
     const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -26,7 +28,9 @@ const ChatFooter = ({ isClosed, sendFile, sendMessage }: TChatFooterProps) => {
     if (isClosed) {
         return (
             <div className='flex justify-center lg:px-[2.4rem] lg:py-[1.6rem]'>
-                <Text size={isMobile ? 'md' : 'sm'}>This conversation is closed</Text>
+                <Text size={isMobile ? 'md' : 'sm'}>
+                    <Localize i18n_default_text='This conversation is closed' />
+                </Text>
             </div>
         );
     }
@@ -85,7 +89,7 @@ const ChatFooter = ({ isClosed, sendFile, sendMessage }: TChatFooterProps) => {
                 maxLength={5000}
                 onChange={onChange}
                 onKeyDown={handleKeyDown}
-                placeholder='Enter message'
+                placeholder={localize('Enter message')}
                 ref={ref => (textInputRef.current = ref)}
                 shouldShowCounter
                 value={value}
diff --git a/src/pages/orders/components/ChatMessages/ChatMessages.tsx b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
index 6dc5dce6..c960d42d 100644
--- a/src/pages/orders/components/ChatMessages/ChatMessages.tsx
+++ b/src/pages/orders/components/ChatMessages/ChatMessages.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { TActiveChannel, TChatMessages, TTextColors } from 'types';
 import { CHAT_FILE_TYPE, CHAT_MESSAGE_TYPE } from '@/constants';
 import { convertToMB, formatMilliseconds } from '@/utils';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { ReactComponent as PDFIcon } from '../../../../public/ic-pdf.svg';
 import { ChatMessageReceipt } from '../ChatMessageReceipt';
@@ -18,9 +19,7 @@ type TChatMessagesProps = {
 const AdminMessage = () => (
     <div className='chat-messages__item chat-messages__item__admin'>
         <ChatMessageText color='general' type='admin'>
-            Hello! This is where you can chat with the counterparty to confirm the order details.
-            <br />
-            Note: In case of a dispute, we’ll use this chat as a reference.
+            <Localize i18n_default_text='Hello! This is where you can chat with the counterparty to confirm the order details.<br /> Note: In case of a dispute, we’ll use this chat as a reference.' />
         </ChatMessageText>
     </div>
 );
diff --git a/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx b/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx
index 7c78239f..10074b7a 100644
--- a/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx
+++ b/src/pages/orders/components/OrderDetailsCard/OrderDetailsCardHeader/OrderDetailsCardHeader.tsx
@@ -1,6 +1,7 @@
 import { api } from '@/hooks';
 import { useOrderDetails } from '@/providers/OrderDetailsProvider';
 import { getDistanceToServerTime } from '@/utils';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { OrderTimer } from '../../OrderTimer';
 
@@ -45,13 +46,13 @@ const OrderDetailsCardHeader = () => {
                     </Text>
                 )}
                 <Text color='less-prominent' size={textSize}>
-                    Order ID {id}
+                    <Localize i18n_default_text='Order ID {{id}}' values={{ id }} />
                 </Text>
             </div>
             {shouldShowOrderTimer && (
                 <div className='flex flex-col justify-center gap-1'>
                     <Text align='center' size={textSize}>
-                        Time left
+                        <Localize i18n_default_text='Time left' />
                     </Text>
                     <OrderTimer distance={distance} />
                 </div>
diff --git a/src/pages/orders/components/OrderTimer/OrderTimer.tsx b/src/pages/orders/components/OrderTimer/OrderTimer.tsx
index d08e4d79..4c1b32ee 100644
--- a/src/pages/orders/components/OrderTimer/OrderTimer.tsx
+++ b/src/pages/orders/components/OrderTimer/OrderTimer.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useCountdown } from 'usehooks-ts';
 import { millisecondsToTimer } from '@/utils';
+import { useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import './OrderTimer.scss';
 
@@ -8,6 +9,7 @@ type TOrderTimer = {
     distance: number;
 };
 const OrderTimer = ({ distance }: TOrderTimer) => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const [timeLeft, { startCountdown }] = useCountdown({
         countStart: distance / 1000,
@@ -22,7 +24,7 @@ const OrderTimer = ({ distance }: TOrderTimer) => {
 
     return (
         <Text className='order-timer' size={isMobile ? 'sm' : 'xs'}>
-            {timeLeft > 0 ? millisecondsToTimer(timeLeft * 1000) : 'expired'}
+            {timeLeft > 0 ? millisecondsToTimer(timeLeft * 1000) : localize('expired')}
         </Text>
     );
 };
diff --git a/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx b/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx
index deae7b5a..52363a8b 100644
--- a/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx
+++ b/src/pages/orders/screens/Orders/OrdersEmpty/OrdersEmpty.tsx
@@ -13,7 +13,7 @@ const OrdersEmpty = () => {
             <ActionScreen
                 actionButtons={
                     <Button onClick={() => history.push(BUY_SELL_URL)} size='lg' textSize={isMobile ? 'md' : 'sm'}>
-                        Buy/Sell
+                        <Localize i18n_default_text='Buy/Sell' />
                     </Button>
                 }
                 icon={<DerivLightOrderIcon height='128px' width='128px' />}
diff --git a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
index 01b88530..91f0e70c 100644
--- a/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
+++ b/src/pages/orders/screens/Orders/OrdersTableRow/OrdersTableRow.tsx
@@ -8,10 +8,12 @@ import { ExtendedOrderDetails } from '@/hooks/custom-hooks/useExtendedOrderDetai
 import { OrderRatingButton, OrderStatusTag, OrderTimer } from '@/pages/orders/components';
 import { getDistanceToServerTime } from '@/utils';
 import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './OrdersTableRow.scss';
 
 const OrdersTableRow = ({ ...props }: DeepPartial<THooks.Order.GetList[number]>) => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const { queryString } = useQueryString();
     const history = useHistory();
@@ -79,7 +81,7 @@ const OrdersTableRow = ({ ...props }: DeepPartial<THooks.Order.GetList[number]>)
                 </div>
                 <div className='flex gap-1'>
                     <Text size='2xl' weight='bold'>
-                        {`${isBuyOrderForUser ? 'Buy' : 'Sell'} ${offerAmount}`}
+                        {`${isBuyOrderForUser ? localize('Buy') : localize('Sell')} ${offerAmount}`}
                     </Text>
                 </div>
                 <Text color='less-prominent' size='sm'>
diff --git a/src/utils/ad-utils.ts b/src/utils/ad-utils.ts
index bbf7bd95..7afcc29a 100644
--- a/src/utils/ad-utils.ts
+++ b/src/utils/ad-utils.ts
@@ -1,6 +1,7 @@
 import { ChangeEvent } from 'react';
 import { TCountryListItem } from 'types';
 import { ERROR_CODES, RATE_TYPE } from '@/constants';
+import { localize } from '@deriv-com/translations';
 import { rangeValidator } from './format-value';
 import { countDecimalPlaces, decimalValidator } from './string';
 
@@ -53,26 +54,25 @@ const decimalPointValidation = (value: string) =>
     'Only up to 2 decimals are allowed.';
 export const getValidationRules = (
     fieldName: string,
-    getValues: (fieldName: string) => number | string,
-    localize: (key: string) => string
+    getValues: (fieldName: string) => number | string
 ): ValidationRules => {
     switch (fieldName) {
         case 'amount':
             return {
                 validation_1: value => requiredValidation(value, 'Amount'),
-                validation_2: value => !isNaN(Number(value)) || 'Enter a valid amount',
+                validation_2: value => !isNaN(Number(value)) || localize('Enter a valid amount'),
                 validation_3: value => decimalPointValidation(value),
                 validation_4: value => {
                     const minOrder = getValues('min-order');
                     if (minOrder && Number(value) < Number(minOrder)) {
-                        return 'Amount should not be below Min limit';
+                        return localize('Amount should not be below Min limit');
                     }
                     return true;
                 },
                 validation_5: value => {
                     const maxOrder = getValues('max-order');
                     if (maxOrder && Number(value) < Number(maxOrder)) {
-                        return 'Amount should not be below Max limit';
+                        return localize('Amount should not be below Max limit');
                     }
                     return true;
                 },
@@ -94,7 +94,9 @@ export const getValidationRules = (
                         getValues('rate-type-string') === RATE_TYPE.FLOAT &&
                         !rangeValidator(parseFloat(value), Number(limitValue))
                     ) {
-                        return `Enter a value that's within -${limitValue}% to +${limitValue}%`;
+                        return localize("Enter a value that's within -{{limitValue}}% to +{{limitValue}}%", {
+                            limitValue,
+                        });
                     }
                     return true;
                 },
@@ -102,19 +104,19 @@ export const getValidationRules = (
         case 'min-order':
             return {
                 validation_1: value => requiredValidation(value, 'Min limit'),
-                validation_2: value => !isNaN(Number(value)) || 'Only numbers are allowed',
+                validation_2: value => !isNaN(Number(value)) || localize('Only numbers are allowed'),
                 validation_3: value => decimalPointValidation(value),
                 validation_4: value => {
                     const amount = getValues('amount');
                     if (getValues('amount') && Number(value) > Number(amount)) {
-                        return 'Min limit should not exceed Amount';
+                        return localize('Min limit should not exceed Amount');
                     }
                     return true;
                 },
                 validation_5: value => {
                     const maxOrder = getValues('max-order');
                     if (maxOrder && Number(value) > Number(maxOrder)) {
-                        return 'Min limit should not exceed Max limit';
+                        return localize('Min limit should not exceed Max limit');
                     }
                     return true;
                 },
@@ -127,14 +129,14 @@ export const getValidationRules = (
                 validation_4: value => {
                     const amount = getValues('amount');
                     if (amount && Number(value) > Number(amount)) {
-                        return 'Max limit should not exceed Amount';
+                        return localize('Max limit should not exceed Amount');
                     }
                     return true;
                 },
                 validation_5: value => {
                     const minOrder = getValues('min-order');
                     if (minOrder && Number(value) < Number(minOrder)) {
-                        return 'Max limit should not be below Min limit';
+                        return localize('Max limit should not be below Min limit');
                     }
                     return true;
                 },
diff --git a/src/utils/adverts.ts b/src/utils/adverts.ts
index c7293433..af08c089 100644
--- a/src/utils/adverts.ts
+++ b/src/utils/adverts.ts
@@ -1,4 +1,5 @@
 import moment, { Duration } from 'moment';
+import { localize } from '@deriv-com/translations';
 import { epochToMoment, toMoment } from './time';
 
 /**
@@ -11,36 +12,36 @@ export const getDiffDuration = (startTime: number, endTime: number): Duration =>
     moment.duration(moment.unix(endTime).diff(moment.unix(startTime)));
 
 const getStatusLabel = (diff: Duration) => {
-    if (diff.years()) return 'Seen more than 6 months ago';
+    if (diff.years()) return localize('Seen more than 6 months ago');
 
     if (diff.months()) {
         if (diff.months() > 6) {
-            return 'Seen more than 6 months ago';
+            return localize('Seen more than 6 months ago');
         }
         if (diff.months() === 1) {
-            return `Seen ${diff.months()} month ago`;
+            return localize('Seen 1 month ago');
         }
-        return `Seen ${diff.months()} months ago`;
+        return localize('Seen {{diff}} months ago', { diff: diff.months() });
     }
     if (diff.days()) {
         if (diff.days() === 1) {
-            return `Seen ${diff.days()} day ago`;
+            return localize('Seen 1 day ago');
         }
-        return `Seen ${diff.days()} days ago`;
+        return localize('Seen {{days}} days ago', { days: diff.days() });
     }
     if (diff.hours()) {
         if (diff.hours() === 1) {
-            return `Seen ${diff.hours()} hour ago`;
+            return localize('Seen 1 hour ago');
         }
-        return `Seen ${diff.hours()} hours ago`;
+        return localize('Seen {{hours}} hours ago', { hours: diff.hours() });
     }
     if (diff.minutes()) {
         if (diff.minutes() === 1) {
-            return `Seen ${diff.minutes()} minute ago`;
+            return localize('Seen 1 minute ago');
         }
-        return `Seen ${diff.minutes()} minutes ago`;
+        return localize('Seen {{dif}} minutes ago', { dif: diff.minutes() });
     }
-    return 'Online';
+    return localize('Online');
 };
 
 const getTimeDifference = (lastSeenOnline: number) => {
diff --git a/src/utils/file-uploader.ts b/src/utils/file-uploader.ts
index f0dd5899..f39a0d3f 100644
--- a/src/utils/file-uploader.ts
+++ b/src/utils/file-uploader.ts
@@ -1,3 +1,5 @@
+import { localize } from '@deriv-com/translations';
+
 export type TFile = File & { file: Blob };
 export type TFileType = File & { file: File };
 
@@ -54,8 +56,8 @@ const isFileSupported = (files: TFileType[]): boolean =>
  */
 export const getErrorMessage = (files: TFile[]): string =>
     isFileTooLarge(files) && isFileSupported(files as TFileType[])
-        ? 'Cannot upload a file over 5MB'
-        : 'The file you uploaded is not supported. Upload another.';
+        ? localize('Cannot upload a file over 5MB')
+        : localize('The file you uploaded is not supported. Upload another.');
 
 /**
  * Truncates the file name to a certain length
diff --git a/src/utils/string.ts b/src/utils/string.ts
index 2f591e7a..96a7f85f 100644
--- a/src/utils/string.ts
+++ b/src/utils/string.ts
@@ -1,3 +1,5 @@
+import { localize } from '@deriv-com/translations';
+
 /**
  * A function that counts the number of decimal places in a number.
  * @param {Number | String} value - The number to count the decimal places of.
@@ -20,7 +22,9 @@ export const getShortNickname = (nickname: string): string => nickname?.substrin
  * @returns {String} The error message for the text field.
  */
 export const getTextFieldError = (fieldName: string): string =>
-    `${fieldName} can only include letters, numbers, spaces, and any of these symbols: -+.,'#@():;`;
+    localize("{{fieldName}} can only include letters, numbers, spaces, and any of these symbols: -+.,'#@():;", {
+        fieldName,
+    });
 
 /**
  * Validates that a string represents a decimal number.
diff --git a/styles/devices.scss b/styles/devices.scss
index 321b016c..4d4ae2dd 100644
--- a/styles/devices.scss
+++ b/styles/devices.scss
@@ -1,24 +1,23 @@
 /**
  * Define Breakpoints here.
  */
- $tablet-width: 768px;
- $desktop-width: 1024px;
- 
- @mixin mobile {
-     @media (max-width: #{$tablet-width - 1px}) {
-         @content;
-     }
- }
- 
- @mixin tablet {
-     @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
-         @content;
-     }
- }
- 
- @mixin desktop {
-     @media (min-width: #{$desktop-width}) {
-         @content;
-     }
- }
- 
\ No newline at end of file
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin mobile {
+    @media (max-width: #{$tablet-width - 1px}) {
+        @content;
+    }
+}
+
+@mixin tablet {
+    @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @media (min-width: #{$desktop-width}) {
+        @content;
+    }
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 70fb6b40..6675f46d 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,12 +1,11 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    
-  },
-  "include": ["vite.config.ts"]
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
 }