diff --git a/client/package-lock.json b/client/package-lock.json
index aca3071..f6bb28c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -16,7 +16,7 @@
         "@angular/platform-browser": "^18.1.0",
         "@angular/platform-browser-dynamic": "^18.1.0",
         "@angular/router": "^18.1.0",
-        "@mucsi96/ui-elements": "^59.0.0",
+        "@mucsi96/ui-elements": "^60.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
@@ -4318,9 +4318,9 @@
       }
     },
     "node_modules/@mucsi96/ui-elements": {
-      "version": "59.0.0",
-      "resolved": "https://registry.npmjs.org/@mucsi96/ui-elements/-/ui-elements-59.0.0.tgz",
-      "integrity": "sha512-5d2Hgc+PdkDHoQpPUKQ3lJZ9HEaM0FchkwAwBuNAW3/1TyM+vhvVtgZSli97HymzBNf5hI8IxbpBQJRBaoamig==",
+      "version": "60.0.0",
+      "resolved": "https://registry.npmjs.org/@mucsi96/ui-elements/-/ui-elements-60.0.0.tgz",
+      "integrity": "sha512-tGk0ReokVIuc56Atk+tZN4pWpsab3A8+Y5eYe3aMInyP/I4wtsUC5v5sImiLdtbZ/dsyp8l01RgToK/hm1VRUw==",
       "license": "MIT",
       "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.23.0",
diff --git a/client/package.json b/client/package.json
index 334b090..abd2f71 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
-    "@mucsi96/ui-elements": "^59.0.0",
+    "@mucsi96/ui-elements": "^60.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index ab2405e..6a82555 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -12,14 +12,22 @@
         <ul bt-dropdown-menu>
           @for(database of databases(); track database.name) {
           <li>
-            <a routerLink="/database/{{ database.name }}">{{ database.name }}</a>
+            <a routerLink="/database/{{ database.name }}">{{
+              database.name
+            }}</a>
           </li>
           }
         </ul>
       </div>
       @if (time) {
       <h3 bt>
-        Last backup <span bt-badge>{{ time | relativeTime }}</span>
+        Last backup
+        <span
+          bt-badge
+          [attr.bt-green]="!olderThenOneDay(time) ? '' : null"
+          [attr.bt-red]="olderThenOneDay(time) ? '' : null"
+          >{{ time | relativeTime }}</span
+        >
       </h3>
       } }
     </div>
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index a90486e..d6d27fb 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -4,6 +4,7 @@ import { BackupsService } from './backups/backups.service';
 import { RelativeTimePipe } from './utils/relativeTime.pipe';
 import { DatabasesService } from './databases/databases.service';
 import { Database } from '../types';
+import { olderThenOneDay } from './utils/dateUtils';
 
 @Component({
   selector: 'app-root',
@@ -16,6 +17,7 @@ export class AppComponent {
   databaseName = signal<string | undefined>(undefined);
   databases: Signal<Database[] | undefined>;
   lastBackupTime: Signal<Date | undefined>;
+  olderThenOneDay = olderThenOneDay
 
   constructor(
     private readonly route: ActivatedRoute,
diff --git a/client/src/app/databases/databases.component.html b/client/src/app/databases/databases.component.html
index 1df30f7..0b9be04 100644
--- a/client/src/app/databases/databases.component.html
+++ b/client/src/app/databases/databases.component.html
@@ -25,7 +25,15 @@ <h2 bt>
       <td bt-no-wrap bt-center-align>{{ database.totalRowCount }}</td>
       <td bt-no-wrap bt-center-align>{{ database.backupsCount }}</td>
       @if (database.lastBackupTime) {
-      <td bt-no-wrap bt-right-align>{{ database.lastBackupTime | relativeTime }}</td>
+      <td
+        bt-no-wrap
+        bt-right-align
+        bt-text
+        [attr.bt-green]="!olderThenOneDay(database.lastBackupTime) ? '' : null"
+        [attr.bt-red]="olderThenOneDay(database.lastBackupTime) ? '' : null"
+      >
+        {{ database.lastBackupTime | relativeTime }}
+      </td>
       } @else {
       <td bt-no-wrap></td>
       }
diff --git a/client/src/app/databases/databases.component.ts b/client/src/app/databases/databases.component.ts
index b47439b..7d2c99b 100644
--- a/client/src/app/databases/databases.component.ts
+++ b/client/src/app/databases/databases.component.ts
@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { DatabasesService } from './databases.service';
 import { Database } from '../../types';
 import { RelativeTimePipe } from '../utils/relativeTime.pipe';
+import { olderThenOneDay } from '../utils/dateUtils';
 
 @Component({
   selector: 'app-databases',
@@ -14,6 +15,7 @@ import { RelativeTimePipe } from '../utils/relativeTime.pipe';
 export class DatabasesComponent {
   databases: Signal<Database[] | undefined>;
   loading: Signal<boolean>;
+  olderThenOneDay = olderThenOneDay;
 
   constructor(
     private readonly databasesService: DatabasesService,
@@ -26,4 +28,5 @@ export class DatabasesComponent {
   selectDatabase(database: Database) {
     this.router.navigate(['/database', database.name]);
   }
+
 }
diff --git a/client/src/app/utils/dateUtils.ts b/client/src/app/utils/dateUtils.ts
new file mode 100644
index 0000000..d000961
--- /dev/null
+++ b/client/src/app/utils/dateUtils.ts
@@ -0,0 +1,3 @@
+export function olderThenOneDay(date?: Date): boolean {
+  return !date || Date.now() - date.getTime() > 24 * 60 * 60 * 1000;
+}
\ No newline at end of file
diff --git a/client/src/mocks/browser.ts b/client/src/mocks/browser.ts
index e702cbc..632759d 100644
--- a/client/src/mocks/browser.ts
+++ b/client/src/mocks/browser.ts
@@ -15,7 +15,7 @@ const databases: Database[] = [
     tablesCount: 3,
     totalRowCount: 12,
     backupsCount: 3,
-    lastBackupTime: new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 3),
+    lastBackupTime: new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 0.5),
   },
 ];