diff --git a/frontend/src/Components/DataForm.js b/frontend/src/Components/DataForm.js
index c74230c..ef4afe9 100644
--- a/frontend/src/Components/DataForm.js
+++ b/frontend/src/Components/DataForm.js
@@ -113,7 +113,7 @@ const DataForm = ({ integrationId, schema }) => {
       <h3 className="text-lg font-semibold mb-4">Submit New Data</h3>
       {renderFormFields()}
       <div className="flex items-center justify-between mt-4">
-        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
+        <button className="bg-green-600 hover:bg-green-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
           Submit
         </button>
       </div>
diff --git a/frontend/src/Components/DataTable.js b/frontend/src/Components/DataTable.js
index 1a37e5a..54c04ec 100644
--- a/frontend/src/Components/DataTable.js
+++ b/frontend/src/Components/DataTable.js
@@ -2,11 +2,32 @@ import React, { useState,useEffect } from 'react';
 
 const DataTable = ({ data }) => {
   const [usernames, setUsernames] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!Array.isArray(data) || data.length === 0) {
+        // Handle the case where data is not valid
+        setLoading(false);
+        return;
+      }
+
+      const usernamesArray = [];
+      for (const row of data) {
+        const username = await getusernames(row.userId);
+        usernamesArray.push(username);
+      }
+      setUsernames(usernamesArray);
+      setLoading(false);
+    };
+
+    fetchData();
+  }, [data]);
   
 
   if (!data) {
     return <div>No data available</div>;
-  }else if (!Array.isArray(data) || data.length === 0) {
+  } else if (!Array.isArray(data) || data.length === 0) {
     return <div>No data available or data is not in the expected format.</div>;
   }
 
@@ -20,7 +41,7 @@ const DataTable = ({ data }) => {
     const getusernames = async (userID) => {
       try {
         const token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGgiOiJST0xFX0FETUlOIiwiZXhwIjoxNzAyOTI0ODE0LCJpYXQiOjE3MDI4Mzg0MTR9.PgwOZyE-2cvUaoYpvvLvZAPRX1eKQA_5M7SYO1a0v8BLEvZj-VY9b0FPnAzAwB8K6_5s0YIcjS-SUezjKcKvXg';
-        const response = await fetch('http://localhost/api/v1/user/'+userID, {
+        const response = await fetch('http://localhost/api/v1/user/'+"657e1ff042cdee02f39569b4", {
           method: 'GET',
             headers: {
               'Accept': 'application/json',
@@ -54,12 +75,9 @@ const DataTable = ({ data }) => {
       return `${day}/${month}/${year}`;
     };
 
-    console.log(data)
-
-    
   
     return (
-      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 overflow-x-auto">
+      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 overflow-x-scroll">
         <h3 className="text-lg font-semibold mb-4">Integration Data</h3>
         <table className="min-w-full leading-normal">
           <thead>
@@ -67,7 +85,7 @@ const DataTable = ({ data }) => {
               <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">ID</th>
               <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">IntegrationID</th>
               <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Agent</th>
-              <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Timestamp</th>
+              <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider border-r">Timestamp</th>
               {dataKeys.map(key => (
                 <th key={key} className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                   {key}
@@ -80,8 +98,8 @@ const DataTable = ({ data }) => {
               <tr key={index}>
                 <td className="px-5 py-3 border-b border-gray-200 bg-white text-sm">{row._id}</td>
                 <td className="px-5 py-3 border-b border-gray-200 bg-white text-sm">{row.integrationId}</td>
-                <td className="px-5 py-3 border-b border-gray-200 bg-white text-sm">{row.userId}</td>
-                <td className="px-5 py-3 border-b border-gray-200 bg-white text-sm">{formatDate(row.timestamp)}</td>
+                <td className="px-5 py-3 border-b border-gray-200 bg-white text-sm">{loading ? 'Loading...' : usernames[index]}</td>
+                <td className="px-5 py-3 border-b border-gray-200 bg-white text-sm border-r">{formatDate(row.timestamp)}</td>
                 {dataKeys.map(key => (
                   <td key={key} className="px-5 py-3 border-b border-gray-200 bg-white text-sm">
                     {row.data ? row.data[key] : 'N/A'}
diff --git a/frontend/src/Components/GetIntegration.js b/frontend/src/Components/GetIntegration.js
index 0a19d4b..13ed5e7 100644
--- a/frontend/src/Components/GetIntegration.js
+++ b/frontend/src/Components/GetIntegration.js
@@ -4,11 +4,8 @@ import { useNavigate } from "react-router-dom";
 
 function GetIntegration() {
   const [data, setData] = useState([]);
-  const [integrationdata, setIntegrationData] = useState([]);
-  const [parentID, setparentID] = useState();
   const [maxPage, setMaxPage] = useState(1);
   const [page, setPage] = useState(0);
-  const [usernames, setUsernames] = useState([]);
   const { showSnackbar } = useSnackbar(); // Use the Snackbar hook
 
   const getData = async () => {
@@ -29,21 +26,6 @@ function GetIntegration() {
     }
   };
 
-  const getIntegrationData = async() =>{
-    try {
-      const response = await fetch('http://localhost/api/v1/integration/'+parentID+'/data/pageable?page=0&size=50');
-      if (!response.ok) {
-        // Handle non-OK responses
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-      const responseData = await response.json();
-      setIntegrationData(responseData.content);
-      console.log('Success: 11', responseData);
-    } catch (error) {
-      const errorMessage = integrationdata.messages.join(', ');
-    }
-  };
-
 
   const getusernames = async (userID) => {
     try {
@@ -89,11 +71,6 @@ function GetIntegration() {
     handleLoad();
   }, [page]);
 
-  useEffect(() => {
-    if(parentID){
-      getIntegrationData();
-    }
-  }, [parentID]);
 
   useEffect(() => {
     if (integrationdata.length > 0) {
@@ -111,6 +88,17 @@ function GetIntegration() {
     await getData();
   };
 
+  const formatDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
+    const year = date.getFullYear();
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    
+    return `${hours}:${minutes} - ${day}/${month}/${year}`;
+  };
+
   return (
     <div className="flex flex-row relative text-black h-full w-full">
       <div className="flex flex-col relative text-black items-center h-full w-full">
@@ -121,6 +109,7 @@ function GetIntegration() {
                 <th scope="col" className="px-6 py-4">Id</th>
                 <th scope="col" className="px-6 py-4">Name</th>
                 <th scope="col" className="px-6 py-4">Type</th>
+                <th scope="col" className="px-6 py-4">Last updated</th>
               </tr>
             </thead>
             <tbody>
@@ -129,6 +118,7 @@ function GetIntegration() {
                   <td className="whitespace-nowrap px-6 py-4">{integration.id}</td>
                   <td className="whitespace-nowrap px-6 py-4">{integration.name}</td>
                   <td className="whitespace-nowrap px-6 py-4">{integration.type}</td>
+                  <td className="whitespace-nowrap px-6 py-4">{formatDate(integration.lastUpdated)}</td>
                 </tr>
               ))}
             </tbody>
diff --git a/frontend/src/Components/IntegrationForm.js b/frontend/src/Components/IntegrationForm.js
index d8e4faf..3c016e1 100644
--- a/frontend/src/Components/IntegrationForm.js
+++ b/frontend/src/Components/IntegrationForm.js
@@ -59,7 +59,7 @@ export default function IntegrationForm() {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4 text-black">
       <div>
         <label htmlFor="integrationName" className="block text-sm font-medium text-gray-700">
           Integration Name
@@ -76,7 +76,7 @@ export default function IntegrationForm() {
       </div>
 
       {formFields.map((field, index) => (
-        <div key={index} className="flex flex-col space-y-2">
+        <div key={index} className="flex flex-col space-y-2 text-black">
           <label htmlFor={`field-${index}`} className="block text-sm font-medium text-gray-700">Data Field</label>
           <input
             type="text"
diff --git a/frontend/src/Components/Login.js b/frontend/src/Components/Login.js
index 7bb935e..922bb55 100644
--- a/frontend/src/Components/Login.js
+++ b/frontend/src/Components/Login.js
@@ -69,7 +69,7 @@ function Login() {
           onChange={handleChange}
           placeholder="Username"
         />
-        <label className="mx-2 py-1 text-black left-0 absolute" htmlFor="username">
+        <label className="label mx-2 py-1 text-black left-0 absolute" htmlFor="username">
           Username{" "}
         </label>
         <input
@@ -80,7 +80,7 @@ function Login() {
           placeholder="Password"
           type="password"
         />
-        <label className="mx-2 py-1 text-black left-0 absolute" htmlFor="password">
+        <label className="label mx-2 py-1 text-black left-0 absolute" htmlFor="password">
           Password
         </label>
         <button
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 26ff9ee..1bbf00f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -31,7 +31,7 @@
   }
 }
 
-input:focus + label, input:not(:placeholder-shown) + label{
+input:focus + .label, input:not(:placeholder-shown) + .label{
   transform: translateY(-1em) scale(0.8)
 }