diff --git a/src/app/core/api/api.module.ts b/src/app/core/api/api.module.ts
index e392aadc..5115bcf9 100644
--- a/src/app/core/api/api.module.ts
+++ b/src/app/core/api/api.module.ts
@@ -8,7 +8,7 @@ import { ApiConfiguration, ApiConfigurationParams } from './api-configuration';
 
 import { AhbService } from './services/ahb.service';
 import { MaintenanceService } from './services/maintenance.service';
-
+import { provideHttpClient } from '@angular/common/http';
 /**
  * Module that provides all services and configuration.
  */
@@ -19,7 +19,8 @@ import { MaintenanceService } from './services/maintenance.service';
   providers: [
     AhbService,
     MaintenanceService,
-    ApiConfiguration
+    ApiConfiguration,
+    provideHttpClient()
   ],
 })
 export class ApiModule {
@@ -35,7 +36,7 @@ export class ApiModule {
     }
   }
 
-  constructor( 
+  constructor(
     @Optional() @SkipSelf() parentModule: ApiModule,
     @Optional() http: HttpClient
   ) {
diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html
index a9896676..68e53884 100644
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@@ -17,7 +17,7 @@
   <div class="flex-1 flex justify-center">
     <div class="flex items-center text-sm text-black/70 space-x-1 text-center">
       <p class="flex items-center flex-wrap justify-center">
-        © {{ currentYear }} - made with <i class="mdi mdi-heart-outline text-lg mx-1"></i> by
+        © {{ currentYear }} - <app-version-display></app-version-display> - made with <i class="mdi mdi-heart-outline text-lg mx-1"></i> by
         <a
           class="ml-1 mr-2 hover:underline font-bold"
           target="_blank"
diff --git a/src/app/shared/components/footer/footer.component.ts b/src/app/shared/components/footer/footer.component.ts
index 9071a9f6..3b311f91 100644
--- a/src/app/shared/components/footer/footer.component.ts
+++ b/src/app/shared/components/footer/footer.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import {VersionDisplayComponent} from "../version-display/version-display.component";
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [],
+  imports: [VersionDisplayComponent],
   templateUrl: './footer.component.html',
 })
 export class FooterComponent {
diff --git a/src/app/shared/components/version-display/version-display.component.css b/src/app/shared/components/version-display/version-display.component.css
new file mode 100644
index 00000000..2f626374
--- /dev/null
+++ b/src/app/shared/components/version-display/version-display.component.css
@@ -0,0 +1,16 @@
+.version-container {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  color: #333;
+  padding: 10px;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  border-radius: 5px;
+  display: inline-block;
+}
+code {
+  background: #eee;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: monospace;
+}
diff --git a/src/app/shared/components/version-display/version-display.component.html b/src/app/shared/components/version-display/version-display.component.html
new file mode 100644
index 00000000..8e2ba046
--- /dev/null
+++ b/src/app/shared/components/version-display/version-display.component.html
@@ -0,0 +1 @@
+<a *ngIf="version" title="Commit {{commitId}}" href="/version">{{ version }}</a>
diff --git a/src/app/shared/components/version-display/version-display.component.ts b/src/app/shared/components/version-display/version-display.component.ts
new file mode 100644
index 00000000..fd91642c
--- /dev/null
+++ b/src/app/shared/components/version-display/version-display.component.ts
@@ -0,0 +1,49 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { catchError, map } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+interface VersionInfo {
+  version: string;
+  commitId: string;
+}
+
+@Component({
+  selector: 'app-version-display',
+  standalone: true, // ✅ Standalone component
+  imports: [CommonModule], // ✅ No need for HttpClientModule anymore
+  templateUrl: './version-display.component.html',
+  styleUrls: ['./version-display.component.css'],
+})
+export class VersionDisplayComponent {
+  version: string | null = null;
+  commitId: string | null = null;
+  private http = inject(HttpClient); // ✅ Use `inject()` instead of constructor injection
+
+  constructor() {
+    this.http.get('/version', { responseType: 'text' })
+      .pipe(
+        map((response: string) => {
+          try {
+            const parsedData: VersionInfo = JSON.parse(response);
+            if (parsedData.version && parsedData.commitId) {
+              return parsedData;
+            }
+            throw new Error('Invalid JSON structure');
+          } catch (error) {
+            console.warn('Response is not valid JSON, using dummy values.');
+            return { version: 'v0.0.0', commitId: '0000000' };
+          }
+        }),
+        catchError((error) => {
+          console.error('Failed to load version info:', error);
+          return of({ version: 'Error', commitId: 'Unknown' });
+        })
+      )
+      .subscribe((data) => {
+        this.version = data.version;
+        this.commitId = data.commitId;
+      });
+  }
+}