diff --git a/.forgejo/workflows/deploy.yaml b/.forgejo/workflows/deploy.yaml
index 7af075b..99492aa 100644
--- a/.forgejo/workflows/deploy.yaml
+++ b/.forgejo/workflows/deploy.yaml
@@ -46,7 +46,6 @@ jobs:
           # git pull ${fullrepo}
           npm install @angular/cli
           npm run lint
-          echo "getting the username"
       - name: Update version
         run: |
           set -e
diff --git a/angular.json b/angular.json
index b564f5e..239024c 100644
--- a/angular.json
+++ b/angular.json
@@ -92,7 +92,10 @@
               "buildTarget": "silly-game-frontend:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n"
diff --git a/proxy.conf.json b/proxy.conf.json
new file mode 100644
index 0000000..107d664
--- /dev/null
+++ b/proxy.conf.json
@@ -0,0 +1,8 @@
+{
+    "/api": {
+      "target": "http://localhost:8080",
+      "secure": false,
+      "changeOrigin": true,
+      "logLevel": "debug"
+    }
+  }
\ No newline at end of file
diff --git a/src/app/logger.service.ts b/src/app/logger.service.ts
new file mode 100644
index 0000000..9afd204
--- /dev/null
+++ b/src/app/logger.service.ts
@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoggerService {
+  log(message: string) {
+    const timestamp = new Date().toISOString();
+    console.log(`[LOG ${timestamp}] ${message}`);
+  }
+
+  warn(message: string) {
+    const timestamp = new Date().toISOString();
+    console.warn(`[WARN ${timestamp}] ${message}`);
+  }
+
+  error(message: string) {
+    const timestamp = new Date().toISOString();
+    console.error(`[ERROR ${timestamp}] ${message}`);
+  }
+}
\ No newline at end of file
diff --git a/src/app/mario/mario.component.html b/src/app/mario/mario.component.html
index 64f01af..72771e6 100644
--- a/src/app/mario/mario.component.html
+++ b/src/app/mario/mario.component.html
@@ -5,6 +5,22 @@
     <div class="jump-counter">
       Jumps: {{ totalJumps }}
       <button (click)="restartGame()">Restart</button>
-      <button (click)="inviteFriend()">Invite Friend</button>
+      <button (click)="showInvitePopup = true">Invite Friend</button>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+
+<!-- Invite Friend Modal -->
+<div class="modal-backdrop" *ngIf="showInvitePopup">
+  <div class="modal">
+    <h2>Invite a Friend</h2>
+    <input
+      type="email"
+      placeholder="Enter friend's email"
+      [(ngModel)]="inviteEmail"
+    />
+    <div class="modal-buttons">
+      <button (click)="sendInvite()">Send Invite</button>
+      <button (click)="showInvitePopup = false">Cancel</button>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/mario/mario.component.scss b/src/app/mario/mario.component.scss
index 695b1ad..a33e097 100644
--- a/src/app/mario/mario.component.scss
+++ b/src/app/mario/mario.component.scss
@@ -32,4 +32,40 @@ body, html {
     padding: 4px 10px;
     font-size: 14px;
     cursor: pointer;
-  }
\ No newline at end of file
+  }
+
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+  }
+  
+  .modal {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    min-width: 300px;
+    box-shadow: 0 0 20px rgba(0,0,0,0.3);
+  }
+  
+  .modal input {
+    width: 100%;
+    padding: 8px;
+    margin-top: 10px;
+    font-size: 16px;
+  }
+  
+  .modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+    gap: 10px;
+  }
+  
\ No newline at end of file
diff --git a/src/app/mario/mario.component.ts b/src/app/mario/mario.component.ts
index 4509c62..0ade049 100644
--- a/src/app/mario/mario.component.ts
+++ b/src/app/mario/mario.component.ts
@@ -1,10 +1,14 @@
 import { Component, HostListener, OnInit } from '@angular/core';
 import { JumpService } from '../jump.service';
+import { LoggerService } from '../logger.service';
+import { FormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-mario',
   standalone: true,
-  imports: [],
+  imports: [FormsModule, CommonModule],
   templateUrl: './mario.component.html',
   styleUrl: './mario.component.scss'
 })
@@ -51,6 +55,12 @@ import { JumpService } from '../jump.service';
         { x: 6100, y: 400, width: 140, height: 10 }
       ];
 
+      constructor(
+        private jumpService: JumpService, 
+        private logger: LoggerService,
+        private http: HttpClient
+      ) {}
+
       ngOnInit(): void {
         this.canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
         this.ctx = this.canvas.getContext('2d')!;
@@ -58,11 +68,10 @@ import { JumpService } from '../jump.service';
         this.canvas.height = this.canvasHeight;
         this.mario.y = this.canvasHeight - 100;
         this.loop();
+        this.logger.log('Game initialized');
       }
 
       totalJumps = 0;
-
-      constructor(private jumpService: JumpService) {}
     
       @HostListener('window:keydown', ['$event'])
       handleKeyDown(event: KeyboardEvent) {
@@ -162,13 +171,36 @@ import { JumpService } from '../jump.service';
       }
 
       restartGame() {
+        this.logger.log('Game restarted');
         window.location.reload();
       }
       
       inviteFriend() {
-        const inviteLink = window.location.href; // You could customize this
+        this.logger.log('Fiend invited');
+        const inviteLink = window.location.href;
         navigator.clipboard.writeText(inviteLink)
           .then(() => alert('Invite link copied to clipboard!'))
           .catch(() => alert('Failed to copy invite link.'));
       }
+
+      inviteEmail = '';
+      showInvitePopup = false;
+
+      sendInvite() {
+        if (!this.inviteEmail) return;
+
+        this.logger.log(`Sending invite to ${this.inviteEmail}`);
+
+        this.http.post('/api/invite', { email: this.inviteEmail }).subscribe({
+          next: () => {
+            alert('Invite sent!');
+            this.inviteEmail = '';
+            this.showInvitePopup = false;
+          },
+          error: () => {
+            alert('Failed to send invite.');
+          }
+        });
+      }
+      
     }
\ No newline at end of file