diff --git a/frontend/src/hooks/api/serviceTokens/queries.tsx b/frontend/src/hooks/api/serviceTokens/queries.tsx
index 70e0736d36..313daa8610 100644
--- a/frontend/src/hooks/api/serviceTokens/queries.tsx
+++ b/frontend/src/hooks/api/serviceTokens/queries.tsx
@@ -37,6 +37,7 @@ export const useCreateServiceToken = () => {
   return useMutation<CreateServiceTokenRes, {}, CreateServiceTokenDTO>({
     mutationFn: async (body) => {
       const { data } = await apiRequest.post('/api/v2/service-token/', body);
+      data.serviceToken += `.${  body.randomBytes}`;
       return data;
     },
     onSuccess: ({ serviceTokenData: { workspace } }) => {
diff --git a/frontend/src/hooks/api/serviceTokens/types.ts b/frontend/src/hooks/api/serviceTokens/types.ts
index a1eb73743d..28bb55b4b3 100644
--- a/frontend/src/hooks/api/serviceTokens/types.ts
+++ b/frontend/src/hooks/api/serviceTokens/types.ts
@@ -18,6 +18,7 @@ export type CreateServiceTokenDTO = {
   encryptedKey: string;
   iv: string;
   tag: string;
+  randomBytes: string;
 };
 
 export type CreateServiceTokenRes = {
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
index 1b30eb4e95..aadabf088f 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -31,11 +31,8 @@ import {
   useUpdateWsEnvironment
 } from '@app/hooks/api';
 
-
 import { AutoCapitalizationSection } from './components/AutoCapitalizationSection/AutoCapitalizationSection';
-
 import { SecretTagsSection } from './components/SecretTagsSection';
-
 import {
   CopyProjectIDSection,
   CreateServiceToken,
@@ -226,7 +223,8 @@ export const ProjectSettingsPage = () => {
         environment,
         expiresIn: Number(expiresIn),
         name,
-        workspaceId: workspaceID
+        workspaceId: workspaceID,
+        randomBytes
       });
       console.log(res);
       createNotification({