diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 6d3ef5c2db..a7c93920e5 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -158,11 +158,17 @@ watch(
                     class="block caption my-2 nc-chip w-full min-h-20px p-2 rounded"
                     :style="{ backgroundColor: enumColor.light[2] }"
                   >
-                    {{ log.description }}
+                    <!--
+                      retrieve the comment part from the audit description
+                      `The following comment has been created: foo` -> `foo`
+                    -->
+                    {{ log.description.substring(log.description.indexOf(':') + 1) }}
                   </p>
                 </div>
 
-                <p v-else v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" />
+                <p v-else-if="log.details" v-dompurify-html="log.details" class="caption my-3" style="word-break: break-all" />
+
+                <p v-else>{{ log.description }}</p>
 
                 <p class="time text-right text-[10px] mb-0 mt-1 text-gray-500">
                   {{ timeAgo(log.created_at) }}
diff --git a/packages/nocodb-nest/src/db/BaseModelSqlv2.ts b/packages/nocodb-nest/src/db/BaseModelSqlv2.ts
index 96be9282d3..a5bd653825 100644
--- a/packages/nocodb-nest/src/db/BaseModelSqlv2.ts
+++ b/packages/nocodb-nest/src/db/BaseModelSqlv2.ts
@@ -15,10 +15,6 @@ import ejs from 'ejs';
 import Validator from 'validator';
 import { customAlphabet } from 'nanoid';
 import DOMPurify from 'isomorphic-dompurify';
-
-const GROUP_COL = '__nc_group_id';
-
-const nanoidv2 = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 14);
 import { v4 as uuidv4 } from 'uuid';
 import { NcError } from '../helpers/catchError';
 import getAst from '../helpers/getAst';
@@ -67,6 +63,10 @@ import type {
 import type { Knex } from 'knex';
 import type { SortType } from 'nocodb-sdk';
 
+const GROUP_COL = '__nc_group_id';
+
+const nanoidv2 = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 14);
+
 export async function getViewAndModelByAliasOrId(param: {
   projectName: string;
   tableName: string;
@@ -2434,6 +2434,7 @@ class BaseModelSqlv2 {
   ): Promise<void> {
     const id = this._extractPksValues(newData);
     let desc = `Record with ID ${id} has been updated in Table ${this.model.title}.`;
+    let details = '';
     if (updateObj) {
       updateObj = await this.model.mapColumnToAlias(updateObj);
       for (const k of Object.keys(updateObj)) {
@@ -2447,6 +2448,9 @@ class BaseModelSqlv2 {
             : newData[k];
         desc += `\n`;
         desc += `Column "${k}" got changed from "${prevValue}" to "${newValue}"`;
+        details += DOMPurify.sanitize(`<span class="">${k}</span>
+  : <span class="text-decoration-line-through red px-2 lighten-4 black--text">${prevValue}</span>
+  <span class="black--text green lighten-4 px-2">${newValue}</span>`);
       }
     }
     await Audit.insert({
@@ -2455,7 +2459,7 @@ class BaseModelSqlv2 {
       op_type: AuditOperationTypes.DATA,
       op_sub_type: AuditOperationSubTypes.UPDATE,
       description: DOMPurify.sanitize(desc),
-      // details: JSON.stringify(data),
+      details,
       ip: req?.clientIp,
       user: req?.user?.email,
     });
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
index 426445c431..c38e47b8ed 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts
@@ -2402,6 +2402,7 @@ class BaseModelSqlv2 {
   ): Promise<void> {
     const id = this._extractPksValues(newData);
     let desc = `Record with ID ${id} has been updated in Table ${this.model.title}.`;
+    let details = '';
     if (updateObj) {
       updateObj = await this.model.mapColumnToAlias(updateObj);
       for (const k of Object.keys(updateObj)) {
@@ -2415,6 +2416,9 @@ class BaseModelSqlv2 {
             : newData[k];
         desc += `\n`;
         desc += `Column "${k}" got changed from "${prevValue}" to "${newValue}"`;
+        details += DOMPurify.sanitize(`<span class="">${k}</span>
+  : <span class="text-decoration-line-through red px-2 lighten-4 black--text">${prevValue}</span>
+  <span class="black--text green lighten-4 px-2">${newValue}</span>`);
       }
     }
     await Audit.insert({
@@ -2423,7 +2427,7 @@ class BaseModelSqlv2 {
       op_type: AuditOperationTypes.DATA,
       op_sub_type: AuditOperationSubTypes.UPDATE,
       description: DOMPurify.sanitize(desc),
-      // details: JSON.stringify(data),
+      details,
       ip: req?.clientIp,
       user: req?.user?.email,
     });