diff --git a/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss b/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss
index dd0b38815..cc65cea86 100644
--- a/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss
+++ b/src/features/dashboard/components/ApiTokenCard/api-token.card.module.scss
@@ -8,7 +8,7 @@
   flex-direction: column;
   gap: rem(1);
   border: 1px solid var(--ifm-color-emphasis-400);
-  border-radius: rem(0.4);
+  border-radius: rem(2);
   padding: rem(1.6);
 
   label {
diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/CustomErrors/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/CustomErrors/index.tsx
new file mode 100644
index 000000000..17c199260
--- /dev/null
+++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/CustomErrors/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+type TCustomErrors = {
+  token_name_exists: boolean;
+  tokens_limit_reached: boolean;
+  input_value: string;
+};
+
+const CustomErrors = ({ token_name_exists, tokens_limit_reached, input_value }: TCustomErrors) => {
+  if (token_name_exists) {
+    return (
+      <div className='error-message'>
+        <p>That name is taken. Choose another.</p>
+      </div>
+    );
+  }
+  if (tokens_limit_reached && input_value !== '') {
+    return (
+      <div className='error-message'>
+        <p>You&apos;ve created the maximum number of tokens.</p>
+      </div>
+    );
+  }
+
+  return <></>;
+};
+
+export default CustomErrors;
diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
index bc727ebeb..dfc6ba3b7 100644
--- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
@@ -3,6 +3,7 @@ import { Text, Button } from '@deriv/ui';
 import styles from '../api-token.form.module.scss';
 import useApiToken from '@site/src/hooks/useApiToken';
 import { FieldErrorsImpl, UseFormRegisterReturn } from 'react-hook-form';
+import CustomErrors from './CustomErrors';
 import TokenCreationDialogSuccess from '../../Dialogs/TokenCreationDialogSuccess';
 
 type TCreateTokenField = {
@@ -52,9 +53,13 @@ const CreateTokenField = ({
     return token_names;
   }, [tokens]);
 
-  const token_name_exists = getTokenNames.includes(input_value.toLowerCase());
-  const disable_button = token_name_exists || Object.keys(errors).length > 0 || input_value === '';
-  const error_border_active = token_name_exists || errors.name;
+  const tokens_limit_reached = tokens.length === 30 && Object.keys(errors).length === 0;
+  const token_name_exists =
+    getTokenNames.includes(input_value.toLowerCase()) && Object.keys(errors).length === 0;
+  const has_custom_errors = token_name_exists || (tokens_limit_reached && input_value !== '');
+  const disable_button =
+    token_name_exists || Object.keys(errors).length > 0 || input_value === '' || has_custom_errors;
+  const error_border_active = token_name_exists || errors.name || has_custom_errors;
 
   useEffect(() => {
     if (error_border_active) {
@@ -79,7 +84,7 @@ const CreateTokenField = ({
           type='text'
           name='name'
           {...register}
-          placeholder='Token name'
+          placeholder=' '
         />
         <Button disabled={disable_button} type='submit'>
           Create
@@ -91,11 +96,11 @@ const CreateTokenField = ({
           {errors.name.message}
         </Text>
       )}
-      {token_name_exists && (
-        <div className='error-message'>
-          <p>That name is taken. Choose another.</p>
-        </div>
-      )}
+      <CustomErrors
+        token_name_exists={token_name_exists}
+        tokens_limit_reached={tokens_limit_reached}
+        input_value={input_value}
+      />
     </React.Fragment>
   );
 };
diff --git a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
index 420d27f6c..8255ca7ba 100644
--- a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx
@@ -4,7 +4,6 @@ import userEvent from '@testing-library/user-event';
 import ApiTokenForm from '../api-token.form';
 import useCreateToken from '../../../hooks/useCreateToken';
 import useApiToken from '@site/src/hooks/useApiToken';
-import TokenNameRestrictions from '../../TokenNameRestrictions/TokenNameRestrictions';
 
 jest.mock('@site/src/hooks/useApiToken');
 
@@ -12,25 +11,6 @@ const mockUseApiToken = useApiToken as jest.MockedFunction<
   () => Partial<ReturnType<typeof useApiToken>>
 >;
 
-mockUseApiToken.mockImplementation(() => ({
-  tokens: [
-    {
-      display_name: 'testtoken1',
-      last_used: '',
-      scopes: ['read', 'trade', 'payments', 'admin'],
-      token: 'asdf1234',
-      valid_for_ip: '',
-    },
-    {
-      display_name: 'testtoken2',
-      last_used: '',
-      scopes: ['read', 'trade', 'payments', 'admin'],
-      token: 'asdf1235',
-      valid_for_ip: '',
-    },
-  ],
-}));
-
 jest.mock('@site/src/features/dashboard/hooks/useCreateToken');
 
 const mockUseCreateToken = useCreateToken as jest.MockedFunction<typeof useCreateToken>;
@@ -76,110 +56,156 @@ const scopes = [
     label: 'Admin',
   },
 ];
-const preventDefault = jest.fn();
 
 describe('Home Page', () => {
-  beforeEach(() => {
-    render(<ApiTokenForm />);
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.clearAllMocks();
-  });
+  describe('General tests', () => {
+    beforeEach(() => {
+      mockUseApiToken.mockImplementation(() => ({
+        tokens: [
+          {
+            display_name: 'testtoken1',
+            last_used: '',
+            scopes: ['read', 'trade', 'payments', 'admin'],
+            token: 'asdf1234',
+            valid_for_ip: '',
+          },
+          {
+            display_name: 'testtoken2',
+            last_used: '',
+            scopes: ['read', 'trade', 'payments', 'admin'],
+            token: 'asdf1235',
+            valid_for_ip: '',
+          },
+        ],
+      }));
+
+      render(<ApiTokenForm />);
+    });
 
-  it('Should render first step title', () => {
-    const firstStep = screen.getByTestId('first-step-title');
-    expect(firstStep).toHaveTextContent(/Select scopes based on the access you need./i);
-  });
+    afterEach(() => {
+      cleanup();
+      jest.clearAllMocks();
+    });
 
-  it('Should render all of scopes checkbox cards', () => {
-    scopes.forEach((item) => {
-      const apiTokenCard = screen.getByTestId(`api-token-card-${item.name}`);
-      expect(apiTokenCard).toBeInTheDocument();
+    it('Should render first step title', () => {
+      const firstStep = screen.getByTestId('first-step-title');
+      expect(firstStep).toHaveTextContent(/Select scopes based on the access you need./i);
     });
-  });
 
-  it('Should render second step title', () => {
-    const secondStep = screen.getByTestId('second-step-title');
-    expect(secondStep).toHaveTextContent(
-      /Name your token and click on Create to generate your token./i,
-    );
-  });
+    it('Should render all of scopes checkbox cards', () => {
+      scopes.forEach((item) => {
+        const apiTokenCard = screen.getByTestId(`api-token-card-${item.name}`);
+        expect(apiTokenCard).toBeInTheDocument();
+      });
+    });
 
-  it('Should check the checkbox when clicked on api token card', async () => {
-    const adminTokenCard = screen.getByTestId('api-token-card-admin');
-    const withinAdminTokenCard = within(adminTokenCard);
-    const adminCheckbox = withinAdminTokenCard.getByRole<HTMLInputElement>('checkbox');
+    it('Should render second step title', () => {
+      const secondStep = screen.getByTestId('second-step-title');
+      expect(secondStep).toHaveTextContent(
+        /Name your token and click on Create to generate your token./i,
+      );
+    });
 
-    expect(adminCheckbox.checked).toBeFalsy();
+    it('Should check the checkbox when clicked on api token card', async () => {
+      const adminTokenCard = screen.getByTestId('api-token-card-admin');
+      const withinAdminTokenCard = within(adminTokenCard);
+      const adminCheckbox = withinAdminTokenCard.getByRole<HTMLInputElement>('checkbox');
 
-    await userEvent.click(adminTokenCard);
+      expect(adminCheckbox.checked).toBeFalsy();
 
-    expect(adminCheckbox.checked).toBeTruthy();
-  });
+      await userEvent.click(adminTokenCard);
 
-  it('Should create token on form submit', async () => {
-    const nameInput = screen.getByRole('textbox');
+      expect(adminCheckbox.checked).toBeTruthy();
+    });
 
-    await userEvent.type(nameInput, 'test create token');
+    it('Should create token on form submit', async () => {
+      const nameInput = screen.getByRole('textbox');
 
-    const submitButton = screen.getByRole('button', { name: /Create/i });
-    await userEvent.click(submitButton);
+      await userEvent.type(nameInput, 'test create token');
 
-    expect(mockCreateToken).toHaveBeenCalledTimes(1);
-    expect(mockCreateToken).toHaveBeenCalledWith('test create token', []);
-  });
+      const submitButton = screen.getByRole('button', { name: /Create/i });
+      await userEvent.click(submitButton);
 
-  it('Should not be able to create a token if name already exists', async () => {
-    const nameInput = screen.getByRole('textbox');
+      expect(mockCreateToken).toHaveBeenCalledTimes(1);
+      expect(mockCreateToken).toHaveBeenCalledWith('test create token', []);
+    });
 
-    await userEvent.type(nameInput, 'testtoken1');
+    it('Should not be able to create a token if name already exists', async () => {
+      const nameInput = screen.getByRole('textbox');
 
-    const error = screen.getByText(/That name is taken. Choose another./i);
-    expect(error).toBeVisible;
-  });
+      await userEvent.type(nameInput, 'testtoken1');
 
-  it('should hide restrictions if error is present', async () => {
-    const nameInput = screen.getByRole('textbox');
-    const restrictions = screen.getByRole('list');
-    expect(restrictions).toBeVisible();
-    await userEvent.type(nameInput, 'testtoken1');
-    expect(restrictions).not.toBeVisible();
-  });
+      const error = screen.getByText(/That name is taken. Choose another./i);
+      expect(error).toBeVisible;
+    });
 
-  it('Should not create token when name input is empty', async () => {
-    const nameInput = screen.getByRole('textbox');
+    it('should hide restrictions if error is present', async () => {
+      const nameInput = screen.getByRole('textbox');
+      const restrictions = screen.getByRole('list');
+      expect(restrictions).toBeVisible();
+      await userEvent.type(nameInput, 'testtoken1');
+      expect(restrictions).not.toBeVisible();
+    });
 
-    await userEvent.clear(nameInput);
+    it('Should not create token when name input is empty', async () => {
+      const nameInput = screen.getByRole('textbox');
 
-    await userEvent.click(nameInput);
+      await userEvent.clear(nameInput);
 
-    expect(mockCreateToken).not.toHaveBeenCalled();
-  });
+      await userEvent.click(nameInput);
 
-  it('Should open success dialog when token is created  ', async () => {
-    const nameInput = screen.getByRole('textbox');
+      expect(mockCreateToken).not.toHaveBeenCalled();
+    });
+    it('Should open success dialog when token is created  ', async () => {
+      const nameInput = screen.getByRole('textbox');
 
-    await userEvent.type(nameInput, 'test create token');
+      await userEvent.type(nameInput, 'test create token');
 
-    const submitButton = screen.getByRole('button', { name: /Create/i });
-    await userEvent.click(submitButton);
+      const submitButton = screen.getByRole('button', { name: /Create/i });
+      await userEvent.click(submitButton);
 
-    const modal = await screen.getByText('Your API token is ready to be used.');
-    expect(modal).toBeVisible();
-  });
+      const modal = screen.getByText('Your API token is ready to be used.');
+      expect(modal).toBeVisible();
+    });
 
-  it('Should have create button disabled in case of empty input or error message', async () => {
-    const submitButton = screen.getByRole('button', { name: /Create/i });
-    expect(submitButton).toBeDisabled();
+    it('Should have create button disabled in case of empty input or error message', async () => {
+      const submitButton = screen.getByRole('button', { name: /Create/i });
+      expect(submitButton).toBeDisabled();
 
-    const nameInput = screen.getByRole('textbox');
+      const nameInput = screen.getByRole('textbox');
 
-    await userEvent.type(nameInput, 'token-text');
-    expect(submitButton).toBeDisabled();
+      await userEvent.type(nameInput, 'token-text');
+      expect(submitButton).toBeDisabled();
 
-    await userEvent.clear(nameInput);
-    expect(submitButton).toBeDisabled();
+      await userEvent.clear(nameInput);
+      expect(submitButton).toBeDisabled();
+    });
+  });
+  describe('Token limit', () => {
+    const createMaxTokens = () => {
+      const token_array = [];
+      for (let i = 0; i < 30; i++) {
+        token_array.push({
+          display_name: `testtoken${i}`,
+          last_used: '',
+          scopes: ['read', 'trade', 'payments', 'admin'],
+          token: 'asdf1234',
+          valid_for_ip: '',
+        });
+      }
+      return token_array;
+    };
+
+    it('Should show an error when the user tries to create more than 30 tokens', async () => {
+      mockUseApiToken.mockImplementation(() => ({ tokens: createMaxTokens() }));
+      render(<ApiTokenForm />);
+
+      const nameInput = screen.getByRole('textbox');
+
+      await userEvent.type(nameInput, 'asdf');
+
+      const error = screen.getByText(/created the maximum number of tokens/i);
+      expect(error).toBeVisible();
+    });
   });
 });
diff --git a/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss b/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss
index 865d41bbb..65c62c47b 100644
--- a/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss
+++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss
@@ -51,10 +51,11 @@ form {
 .customTextInput {
   align-items: center;
   border: 1px solid var(--colors-greyLight400);
-  border-radius: 4px;
+  border-radius: rem(1.6);
   display: flex;
   position: relative;
   box-sizing: border-box;
+  margin: rem(0.5) 0;
   &:hover {
     border: 1px solid var(--colors-greyLight600);
   }
@@ -65,6 +66,8 @@ form {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     height: rem(3);
+    border-top-right-radius: rem(1.6);
+    border-bottom-right-radius: rem(1.6);
   }
   label {
     position: absolute;
@@ -74,6 +77,10 @@ form {
     transform-origin: top left;
     transition: all 0.25s ease;
     white-space: nowrap;
+    width: calc(100% - 100px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   input[type='text'],
   input[type='number'] {
@@ -91,16 +98,30 @@ form {
       background-color: var(--ifm-color-emphasis-0);
       padding: 0 rem(0.4);
       transform: translateY(rem(-2)) scale(0.75);
+      width: unset;
+      @media screen and (min-width: 320px) and (max-width: 425px) {
+        font-size: rem(1.4);
+      }
+      &.tokenInputLabel {
+        color: var(--smoke);
+      }
     }
     &:focus {
       outline-color: unset;
       outline: unset;
-      border-radius: rem(0.3);
+      border-radius: rem(1.6);
       & ~ label {
         color: var(--colors-blue400);
         background-color: var(--ifm-color-emphasis-0);
         padding: 0 rem(0.4);
         transform: translateY(rem(-2)) scale(0.75);
+        width: unset;
+        @media screen and (min-width: 320px) and (max-width: 425px) {
+          font-size: rem(1.4);
+        }
+        &.tokenInputLabel {
+          color: var(--smoke);
+        }
       }
     }
     &::placeholder {
@@ -120,7 +141,14 @@ form {
 }
 
 .helperText {
+  line-height: 2.2;
   font-size: rem(1.4);
   padding-left: rem(1);
   color: var(--colors-greyLight600);
+  li {
+    font-size: rem(1);
+    span {
+      font-size: rem(1.4);
+    }
+  }
 }
diff --git a/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx b/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
index 36b9d5917..c3cc5b479 100644
--- a/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.tsx
@@ -10,6 +10,7 @@ import * as yup from 'yup';
 import styles from './api-token.form.module.scss';
 import TokenNameRestrictions from '../TokenNameRestrictions/TokenNameRestrictions';
 import CreateTokenField from './CreateTokenField';
+import useApiToken from '@site/src/hooks/useApiToken';
 
 const schema = yup
   .object({
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 400fe7c17..b1ef1b658 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -34,6 +34,7 @@
   --schema-array: #ff8fc8;
   --schema-number: #acb2ff;
   --schema-integer: #f8c272;
+  --smoke: #414652;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -87,7 +88,7 @@ h6 {
 
 .error-message {
   color: var(--colors-coral500) !important;
-  padding-left: 12px;
+  margin-left: rem(1.5);
   font-size: var(--fontSizes-2xs) !important;
   display: inline-block;
 }
@@ -110,6 +111,9 @@ h6 {
   &:focus {
     outline: var(--colors-coral500) !important;
   }
+  label {
+    color: var(--colors-coral500) !important;
+  }
 }
 
 /* reset */