diff --git a/frontend/src/app/components/audit/audit-data-source.ts b/frontend/src/app/components/audit/audit-data-source.ts
index 0ef494a76..da18a1804 100644
--- a/frontend/src/app/components/audit/audit-data-source.ts
+++ b/frontend/src/app/components/audit/audit-data-source.ts
@@ -27,6 +27,7 @@ export class AuditDataSource implements DataSource<Object> {
 
   public loading$ = this.loadingSubject.asObservable();
   public paginator: MatPaginator;
+  public usersList: any[] = [];
 
   constructor(private _connections: ConnectionsService) {}
 
@@ -68,15 +69,34 @@ export class AuditDataSource implements DataSource<Object> {
             rowReceived: 'received row',
             rowsReceived: 'received rows'
           }
+          const statuses = {
+            successfully: 'successfully',
+            unsuccessfully: 'failed',
+            unknown: 'unknown'
+          }
           const formattedLogs = res.logs.map(log => {
             const date = new Date(log.createdAt);
-            const formattedDate = format(date, "P p")
+            const formattedDateOnly = format(date, "d MMM yyyy")
+            const formattedTimeOnly = format(date, "h:mm a")
+            const user = this.usersList.find(u => u.email === log.email);
+            const isViewAction = log.operationType === 'rowReceived' || log.operationType === 'rowsReceived';
+            const isEditAction = log.operationType === 'updateRow';
+            const isDeleteAction = log.operationType === 'deleteRow';
+            const isAddAction = log.operationType === 'addRow';
             return {
               ['Table']: log.table_name,
               ['User']: log.email,
+              ['UserName']: user?.name || null,
+              ['UserEmail']: log.email,
               ['Action']: actions[log.operationType],
-              ['Date']: formattedDate,
-              ['Status']: log.operationStatusResult,
+              ['IsViewAction']: isViewAction,
+              ['IsEditAction']: isEditAction,
+              ['IsDeleteAction']: isDeleteAction,
+              ['IsAddAction']: isAddAction,
+              ['Date']: formattedDateOnly,
+              ['DateOnly']: formattedDateOnly,
+              ['TimeOnly']: formattedTimeOnly,
+              ['Status']: statuses[log.operationStatusResult] || log.operationStatusResult,
               operationType: log.operationType,
               createdAt: log.createdAt,
               prevValue: log.old_data,
diff --git a/frontend/src/app/components/audit/audit.component.css b/frontend/src/app/components/audit/audit.component.css
index 4e5bf39de..a28ce70c7 100644
--- a/frontend/src/app/components/audit/audit.component.css
+++ b/frontend/src/app/components/audit/audit.component.css
@@ -110,4 +110,62 @@ th.mat-header-cell, td.mat-cell {
 
 .hidden {
     display: none;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 4px;
+}
+
+.status-succeed {
+    background-color: #EBF9EB;
+    color: #1A5E20;
+}
+
+.status-failed {
+    background-color: #FDDBD2;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.user-name {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+.user-email {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 1.2;
+}
+
+@media (prefers-color-scheme: dark) {
+    .user-email {
+        color: rgba(255, 255, 255, 0.6);
+    }
+}
+
+.action-with-icon {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.action-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+    .action-icon {
+        color: rgba(255, 255, 255, 0.5);
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/audit/audit.component.html b/frontend/src/app/components/audit/audit.component.html
index 37b4601e2..f70e3907f 100644
--- a/frontend/src/app/components/audit/audit.component.html
+++ b/frontend/src/app/components/audit/audit.component.html
@@ -73,13 +73,43 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                 <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
                 <td mat-cell *matCellDef="let element">
                     <div class="table-cell-content" >
-                        {{element[column] || '—'}}
+                        <span *ngIf="column === 'Status' && element[column]" 
+                              [ngClass]="{'status-badge': true, 'status-succeed': element[column] === 'successfully', 'status-failed': element[column] === 'failed'}">
+                            {{element[column]}}
+                        </span>
+                        <div *ngIf="column === 'User'" class="user-info">
+                            <div class="user-name">{{element['UserName'] || '—'}}</div>
+                            <div class="user-email">{{element['UserEmail']}}</div>
+                        </div>
+                        <div *ngIf="column === 'Date'" class="user-info">
+                            <div class="user-name">{{element['DateOnly']}}</div>
+                            <div class="user-email">{{element['TimeOnly']}}</div>
+                        </div>
+                        <div *ngIf="column === 'Action' && element['IsViewAction']" class="action-with-icon">
+                            <mat-icon class="action-icon" fontSet="material-icons-outlined">visibility</mat-icon>
+                            <span>{{element[column]}}</span>
+                        </div>
+                        <div *ngIf="column === 'Action' && element['IsAddAction']" class="action-with-icon">
+                            <mat-icon class="action-icon" fontSet="material-icons-outlined">add</mat-icon>
+                            <span>{{element[column]}}</span>
+                        </div>
+                        <div *ngIf="column === 'Action' && element['IsEditAction']" class="action-with-icon">
+                            <mat-icon class="action-icon" fontSet="material-icons-outlined">create</mat-icon>
+                            <span>{{element[column]}}</span>
+                        </div>
+                        <div *ngIf="column === 'Action' && element['IsDeleteAction']" class="action-with-icon">
+                            <mat-icon class="action-icon" fontSet="material-icons-outlined">delete</mat-icon>
+                            <span>{{element[column]}}</span>
+                        </div>
+                        <span *ngIf="column !== 'Status' && column !== 'User' && column !== 'Date' && !(column === 'Action' && (element['IsViewAction'] || element['IsAddAction'] || element['IsEditAction'] || element['IsDeleteAction'])) || !element[column]">
+                            {{element[column] || '—'}}
+                        </span>
                     </div>
                 </td>
             </ng-container>
 
-            <ng-container matColumnDef="Details">
-                <th mat-header-cell *matHeaderCellDef> Details </th>
+            <ng-container matColumnDef="Changes">
+                <th mat-header-cell *matHeaderCellDef> Changes </th>
                 <td mat-cell *matCellDef="let element">
                     <button mat-button color="primary"
                         angulartics2On="click"
diff --git a/frontend/src/app/components/audit/audit.component.ts b/frontend/src/app/components/audit/audit.component.ts
index efff0fc26..886577977 100644
--- a/frontend/src/app/components/audit/audit.component.ts
+++ b/frontend/src/app/components/audit/audit.component.ts
@@ -14,6 +14,7 @@ import { Log } from 'src/app/models/logs';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
@@ -40,6 +41,7 @@ import { normalizeTableName } from 'src/app/lib/normalize';
     MatFormFieldModule,
     MatSelectModule,
     MatButtonModule,
+    MatIconModule,
     MatTableModule,
     MatPaginatorModule,
     FormsModule,
@@ -97,10 +99,20 @@ export class AuditComponent implements OnInit {
       });
     this.connectionID = this._connections.currentConnectionID;
     this.accesLevel = this._connections.currentConnectionAccessLevel;
-    this.columns = ['Table', 'User', 'Action', 'Date', 'Status', 'Details'];
+    this.columns = ['Table', 'User', 'Action', 'Date', 'Status', 'Changes'];
     this.dataColumns = ['Table', 'User', 'Action', 'Date', 'Status'];
     this.dataSource = new AuditDataSource(this._connections);
-    this.loadLogsPage();
+    
+    if (this.accesLevel !== 'none') {
+      this._users.fetchConnectionUsers(this.connectionID)
+        .subscribe(res => {
+          this.usersList = res;
+          this.dataSource.usersList = res;
+          this.loadLogsPage();
+        });
+    } else {
+      this.loadLogsPage();
+    }
 
     this._tables.fetchTables(this.connectionID)
       .subscribe(
@@ -117,11 +129,6 @@ export class AuditComponent implements OnInit {
         this.isServerError = true;
         this.serverError = {abstract: err.error.message, details: err.error.originalMessage};
       })
-
-    if (this.accesLevel !== 'none') this._users.fetchConnectionUsers(this.connectionID)
-      .subscribe(res => {
-        this.usersList = res;
-      })
   }
 
   loadLogsPage() {