diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
index dfc6ba3b..ac38aef2 100644
--- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
+++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
@@ -36,6 +36,7 @@ const CreateTokenField = ({
 }: TCreateTokenField) => {
   const { tokens } = useApiToken();
   const [input_value, setInputValue] = useState('');
+  const numberOfTokens = tokens.length;
 
   useEffect(() => {
     if (form_is_cleared) {
@@ -43,7 +44,6 @@ const CreateTokenField = ({
       setFormIsCleared(false);
     }
   }, [form_is_cleared]);
-
   const getTokenNames = useMemo(() => {
     const token_names = [];
     for (const token_object of tokens) {
@@ -75,21 +75,30 @@ const CreateTokenField = ({
           </Text>
         </div>
       </div>
-      <div
-        onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
-        className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
-      >
-        <input
-          className={`${error_border_active ? 'error-border' : ''}`}
-          type='text'
-          name='name'
-          {...register}
-          placeholder=' '
-        />
+      <div className={styles.tokenWrapper}>
+        <div
+          onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
+          className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
+        >
+          <input
+            className={`${error_border_active ? 'error-border' : ''}`}
+            type='text'
+            name='name'
+            {...register}
+            placeholder=''
+          />
+          {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
+          <label
+            htmlFor='playground-request'
+            className={styles.inlineLabel}
+            data-testid='token-count-label'
+          >
+            Token name (You&apos;ve created <b>{numberOfTokens}</b> out of 30 tokens )
+          </label>
+        </div>
         <Button disabled={disable_button} type='submit'>
           Create
         </Button>
-        {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
       </div>
       {errors && errors.name && (
         <Text as='span' type='paragraph-1' className='error-message'>
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 f1e75e54..448f07d9 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
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cleanup, render, screen, within } from '@site/src/test-utils';
+import { cleanup, render, screen, waitFor, within } from '@site/src/test-utils';
 import userEvent from '@testing-library/user-event';
 import ApiTokenForm from '../api-token.form';
 import useCreateToken from '../../../hooks/useCreateToken';
@@ -134,6 +134,13 @@ describe('Home Page', () => {
       expect(adminCheckbox.checked).toBeTruthy();
     });
 
+    it('Should show dynamic token label', async () => {
+      const tokenLabel = screen.getByTestId('token-count-label');
+      await waitFor(() => {
+        expect(tokenLabel).toBeVisible();
+      });
+    });
+
     it('Should create token on form submit', async () => {
       const nameInput = screen.getByRole('textbox');
 
@@ -155,6 +162,20 @@ describe('Home Page', () => {
       expect(error).toBeVisible;
     });
 
+    it('Should update token a value on create token', async () => {
+      const tokenLabel = screen.getByTestId('token-count-label');
+      const nameInput = screen.getByRole('textbox');
+
+      await userEvent.type(nameInput, 'test create token');
+
+      const submitButton = screen.getByRole('button', { name: /Create/i });
+      await userEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(tokenLabel).toHaveTextContent('2');
+      });
+    });
+
     it('should hide restrictions if error is present', async () => {
       const nameInput = screen.getByRole('textbox');
       const restrictions = screen.getByRole('list');
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 65c62c47..801aa94e 100644
--- a/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss
+++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss
@@ -48,69 +48,59 @@ form {
   }
 }
 
-.customTextInput {
-  align-items: center;
-  border: 1px solid var(--colors-greyLight400);
-  border-radius: rem(1.6);
+.tokenWrapper {
   display: flex;
-  position: relative;
-  box-sizing: border-box;
-  margin: rem(0.5) 0;
-  &:hover {
-    border: 1px solid var(--colors-greyLight600);
-  }
-  &:focus-within {
-    border-color: var(--colors-blue500);
-  }
+  flex-direction: row;
+  align-items: center;
   button {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-radius: 0 rem(1.6) rem(1.6) 0;
     height: rem(3);
-    border-top-right-radius: rem(1.6);
-    border-bottom-right-radius: rem(1.6);
-  }
-  label {
-    position: absolute;
-    color: var(--colors-greyLight600);
-    left: rem(1.2);
-    pointer-events: none;
-    transform-origin: top left;
-    transition: all 0.25s ease;
-    white-space: nowrap;
-    width: calc(100% - 100px);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @media (max-width: 425px) {
+      border-radius: rem(1.6);
+      width: 91%;
+    }
   }
-  input[type='text'],
-  input[type='number'] {
-    background: 0 0;
-    box-sizing: border-box;
-    color: var(--ifm-color-emphasis-1000);
-    height: rem(4);
-    min-width: 0;
+
+  .customTextInput {
+    align-items: center;
+    border: 1px solid var(--colors-greyLight400);
+    border-radius: rem(1.6) 0 0 rem(1.6);
+    display: flex;
     width: 100%;
-    border: none;
-    text-indent: rem(1.2);
-    font-size: rem(1.6);
-    &:not(:placeholder-shown) ~ 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);
-      }
+    position: relative;
+    box-sizing: border-box;
+    margin: rem(0.5) 0;
+    &:hover {
+      border: 1px solid var(--colors-greyLight600);
     }
-    &:focus {
-      outline-color: unset;
-      outline: unset;
-      border-radius: rem(1.6);
-      & ~ label {
+    &:focus-within {
+      border-color: var(--colors-blue500);
+    }
+    label {
+      position: absolute;
+      color: var(--colors-greyLight600);
+      left: rem(1.2);
+      pointer-events: none;
+      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'] {
+      background: 0 0;
+      box-sizing: border-box;
+      color: var(--ifm-color-emphasis-1000);
+      height: rem(4);
+      min-width: 0;
+      width: 100%;
+      border: none;
+      text-indent: rem(1.2);
+      font-size: rem(1.6);
+      &:not(:placeholder-shown) ~ label {
         color: var(--colors-blue400);
         background-color: var(--ifm-color-emphasis-0);
         padding: 0 rem(0.4);
@@ -123,11 +113,36 @@ form {
           color: var(--smoke);
         }
       }
+      &:focus {
+        outline-color: unset;
+        outline: unset;
+        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 {
+        color: var(--colors-greyLight600);
+      }
     }
-    &::placeholder {
-      color: var(--colors-greyLight600);
+    @media (max-width: 425px) {
+      border-radius: rem(1.6);
     }
   }
+  @media (max-width: 425px) {
+    flex-direction: column;
+    gap: rem(0.5);
+  }
 }
 
 .card_wrapper {