diff --git a/frontend/components/basic/dialog/AddServiceTokenDialog.js b/frontend/components/basic/dialog/AddServiceTokenDialog.js
index d1ed17190d..f0a6314e95 100644
--- a/frontend/components/basic/dialog/AddServiceTokenDialog.js
+++ b/frontend/components/basic/dialog/AddServiceTokenDialog.js
@@ -33,6 +33,8 @@ const AddServiceTokenDialog = ({
   closeModal,
   workspaceId,
   workspaceName,
+  serviceTokens,
+  setServiceTokens
 }) => {
   const [serviceToken, setServiceToken] = useState("");
   const [serviceTokenName, setServiceTokenName] = useState("");
@@ -71,7 +73,8 @@ const AddServiceTokenDialog = ({
       tag
     });
 
-    setServiceToken(newServiceToken);
+    setServiceTokens(serviceTokens.concat([newServiceToken.serviceTokenData]));
+    setServiceToken(newServiceToken.serviceToken + "." + randomBytes);
   };
 
   function copyToClipboard() {
@@ -211,7 +214,7 @@ const AddServiceTokenDialog = ({
                       </div>
                     </div>
                     <div className="w-full">
-                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-14">
+                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-20">
                         <input
                           type="text"
                           value={serviceToken}
diff --git a/frontend/components/basic/table/ServiceTokenTable.tsx b/frontend/components/basic/table/ServiceTokenTable.tsx
index a79acd759c..412a0dbfbc 100644
--- a/frontend/components/basic/table/ServiceTokenTable.tsx
+++ b/frontend/components/basic/table/ServiceTokenTable.tsx
@@ -30,25 +30,24 @@ interface ServiceTokensProps {
  * @returns
  */
 const ServiceTokenTable = ({ data, workspaceName, setServiceTokens }: ServiceTokensProps) => {
-  console.log(data)
   const { createNotification } = useNotificationContext();
 
   return (
     <div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
       <div className="absolute rounded-t-md w-full h-12 bg-white/5"></div>
       <table className="w-full my-1">
-        <thead className="text-bunker-300">
+        <thead className="text-bunker-300 text-sm font-light">
           <tr>
-            <th className="text-left pl-6 pt-2.5 pb-2">Token name</th>
-            <th className="text-left pl-6 pt-2.5 pb-2">Project</th>
-            <th className="text-left pl-6 pt-2.5 pb-2">Environment</th>
-            <th className="text-left pl-6 pt-2.5 pb-2">Valid until</th>
+            <th className="text-left pl-6 pt-2.5 pb-2">TOKEN NAME</th>
+            <th className="text-left pl-6 pt-2.5 pb-2">PROJECT</th>
+            <th className="text-left pl-6 pt-2.5 pb-2">ENVIRONMENT</th>
+            <th className="text-left pl-6 pt-2.5 pb-2">VAILD UNTIL</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           {data?.length > 0 ? (
-            data.map((row) => {
+            data?.map((row) => {
               return (
                 <tr
                   key={guidGenerator()}
@@ -88,7 +87,7 @@ const ServiceTokenTable = ({ data, workspaceName, setServiceTokens }: ServiceTok
             })
           ) : (
             <tr>
-              <td className="text-center pt-7 pb-4 text-bunker-400 col-span-4">
+              <td colSpan={4} className="text-center pt-7 pb-5 text-bunker-300 text-sm">
                 No service tokens yet
               </td>
             </tr>
diff --git a/frontend/pages/api/serviceToken/addServiceToken.ts b/frontend/pages/api/serviceToken/addServiceToken.ts
index f006d61463..fdc8ba27cc 100644
--- a/frontend/pages/api/serviceToken/addServiceToken.ts
+++ b/frontend/pages/api/serviceToken/addServiceToken.ts
@@ -47,7 +47,7 @@ const addServiceToken = ({
     })
   }).then(async (res) => {
     if (res && res.status == 200) {
-      return (await res.json()).serviceToken;
+      return (await res.json());
     } else {
       console.log('Failed to add service tokens');
     }
diff --git a/frontend/pages/settings/project/[id].js b/frontend/pages/settings/project/[id].js
index 53c60d629f..4a41e50ff9 100644
--- a/frontend/pages/settings/project/[id].js
+++ b/frontend/pages/settings/project/[id].js
@@ -124,6 +124,8 @@ export default function SettingsBasic() {
         workspaceId={router.query.id}
         closeModal={closeAddServiceTokenModal}
         workspaceName={workspaceName}
+        serviceTokens={serviceTokens}
+        setServiceTokens={setServiceTokens}
       />
       <div className="flex flex-row mr-6 max-w-5xl">
         <div className="w-full max-h-screen pb-2 overflow-y-auto">