diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cc0617f..21599c2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
 import { trigger, style, animate, transition } from "@angular/animations";
+import { FirestoreService } from "./shared/firestore.service";
 
 @Component({
     selector: "app-root",
@@ -12,4 +13,8 @@ import { trigger, style, animate, transition } from "@angular/animations";
 })
 export class AppComponent {
     title = "DABubble";
+
+    constructor(private firestore: FirestoreService) {
+        this.firestore.currentUser$.subscribe();
+    }
 }
diff --git a/src/app/components/dialogs/bottomsheet-profile-menu/bottomsheet-profile-menu.component.html b/src/app/components/dialogs/bottomsheet-profile-menu/bottomsheet-profile-menu.component.html
index 6b7334d..fa661c7 100644
--- a/src/app/components/dialogs/bottomsheet-profile-menu/bottomsheet-profile-menu.component.html
+++ b/src/app/components/dialogs/bottomsheet-profile-menu/bottomsheet-profile-menu.component.html
@@ -2,11 +2,11 @@
     <div class="handle"></div>
     <div class="menu">
         <div (click)="openProfile()">
-            <img src="../../assets/img/icons/account_circle.svg" />
+            <img src="assets/img/icons/account_circle.svg" />
             <h2>Profil</h2>
         </div>
         <div (click)="logout()">
-            <img src="../../assets/img/icons/logout.svg" />
+            <img src="assets/img/icons/logout.svg" />
             <h2>Abmelden</h2>
         </div>
     </div>
diff --git a/src/app/components/dialogs/dialog-add-channel-add-member/dialog-add-channel-add-member.component.html b/src/app/components/dialogs/dialog-add-channel-add-member/dialog-add-channel-add-member.component.html
index cfaac9e..37a5563 100644
--- a/src/app/components/dialogs/dialog-add-channel-add-member/dialog-add-channel-add-member.component.html
+++ b/src/app/components/dialogs/dialog-add-channel-add-member/dialog-add-channel-add-member.component.html
@@ -6,7 +6,7 @@ <h2 mat-dialog-title>Leute hinzufügen</h2>
             (click)="closeDialog()"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/close.svg" />
+            <img src="assets/img/icons/close.svg" />
         </button>
     </div>
     <div class="dialog-content-container">
@@ -25,7 +25,7 @@ <h2 mat-dialog-title>Leute hinzufügen</h2>
                                 <img src="{{ user.avatar }}" />
                             } @else {
                                 <img
-                                    src="../../assets/img/avatar/{{
+                                    src="assets/img/avatar/{{
                                         user.avatar
                                     }}.svg"
                                 />
@@ -36,7 +36,7 @@ <h6>{{ user.name }}</h6>
                                 matChipRemove
                                 mat-icon-button
                             >
-                                <img src="../../assets/img/icons/close.svg" />
+                                <img src="assets/img/icons/close.svg" />
                             </button>
                         </mat-chip-row>
                     }
@@ -60,7 +60,7 @@ <h6>{{ user.name }}</h6>
                                     <img src="{{ user.avatar }}" />
                                 } @else {
                                     <img
-                                        src="../../assets/img/avatar/{{
+                                        src="assets/img/avatar/{{
                                             user.avatar
                                         }}.svg"
                                     />
diff --git a/src/app/components/dialogs/dialog-add-channel/dialog-add-channel.component.html b/src/app/components/dialogs/dialog-add-channel/dialog-add-channel.component.html
index 45945e5..e26a51c 100644
--- a/src/app/components/dialogs/dialog-add-channel/dialog-add-channel.component.html
+++ b/src/app/components/dialogs/dialog-add-channel/dialog-add-channel.component.html
@@ -6,7 +6,7 @@ <h2 mat-dialog-title>Channel erstellen</h2>
             (click)="closeDialog()"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/close.svg" />
+            <img src="assets/img/icons/close.svg" />
         </button>
     </div>
     <span
@@ -20,7 +20,7 @@ <h3>Channel-Name</h3>
                 [(ngModel)]="channelName"
                 placeholder="z.B. Kooperationsprojekte"
             />
-            <img src="../../assets/img/icons/tag-gray.svg" />
+            <img src="assets/img/icons/tag-gray.svg" />
             @if (invalidName) {
                 <span class="error">Bitte keine Leerzeichen.</span>
             }
diff --git a/src/app/components/dialogs/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.html b/src/app/components/dialogs/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.html
index d9fd259..8ce4b53 100644
--- a/src/app/components/dialogs/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.html
+++ b/src/app/components/dialogs/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.html
@@ -7,11 +7,11 @@ <h2 mat-dialog-title>Leute hinzufügen</h2>
                 (click)="closeDialog()"
                 mat-icon-button
             >
-                <img src="../../../assets/img/icons/close.svg" />
+                <img src="assets/img/icons/close.svg" />
             </button>
         </div>
         <span
-            ><img src="../../assets/img/icons/tag-purple-2.svg" />{{
+            ><img src="assets/img/icons/tag-purple-2.svg" />{{
                 chatService.currentChannel.name
             }}</span
         >
@@ -24,7 +24,7 @@ <h2 mat-dialog-title>Leute hinzufügen</h2>
                         <img src="{{ user.avatar }}" />
                     } @else {
                         <img
-                            src="../../assets/img/avatar/{{ user.avatar }}.svg"
+                            src="assets/img/avatar/{{ user.avatar }}.svg"
                         />
                     }
                     <h6>{{ user.name }}</h6>
@@ -33,7 +33,7 @@ <h6>{{ user.name }}</h6>
                         matChipRemove
                         mat-icon-button
                     >
-                        <img src="../../assets/img/icons/close.svg" />
+                        <img src="assets/img/icons/close.svg" />
                     </button>
                 </mat-chip-row>
             }
@@ -58,7 +58,7 @@ <h6>{{ user.name }}</h6>
                             <img src="{{ user.avatar }}" />
                         } @else {
                             <img
-                                src="../../assets/img/avatar/{{
+                                src="assets/img/avatar/{{
                                     user.avatar
                                 }}.svg"
                             />
diff --git a/src/app/components/dialogs/dialog-channel-info/dialog-channel-info.component.html b/src/app/components/dialogs/dialog-channel-info/dialog-channel-info.component.html
index 4f3c420..8e810d2 100644
--- a/src/app/components/dialogs/dialog-channel-info/dialog-channel-info.component.html
+++ b/src/app/components/dialogs/dialog-channel-info/dialog-channel-info.component.html
@@ -1,7 +1,7 @@
 <main>
     <section class="title">
         <div>
-            <img src="../../assets/img/icons/tag-black.svg" />
+            <img src="assets/img/icons/tag-black.svg" />
             <h1>{{ chatService.currentChannel.name }}</h1>
         </div>
         <button
@@ -9,7 +9,7 @@ <h1>{{ chatService.currentChannel.name }}</h1>
             (click)="closeDialog()"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/close.svg" />
+            <img src="assets/img/icons/close.svg" />
         </button>
     </section>
     @if (!editingName) {
@@ -19,7 +19,7 @@ <h6>Channel-Name</h6>
                 <span (click)="editName()">Bearbeiten</span>
             </div>
             <div>
-                <img src="../../assets/img/icons/tag-black.svg" />
+                <img src="assets/img/icons/tag-black.svg" />
                 <p>{{ chatService.currentChannel.name }}</p>
             </div>
         </section>
@@ -39,7 +39,7 @@ <h6>Channel-Name</h6>
                     value="{{ this.name }}"
                     placeholder="z.B. Kooperationsprojekte"
                 />
-                <img src="../../assets/img/icons/tag-black.svg" />
+                <img src="assets/img/icons/tag-black.svg" />
                 @if (invalidName) {
                     <span class="error">Bitte keine Leerzeichen.</span>
                 }
diff --git a/src/app/components/dialogs/dialog-edit-message/dialog-edit-message.component.html b/src/app/components/dialogs/dialog-edit-message/dialog-edit-message.component.html
index 29f90cb..3946a24 100644
--- a/src/app/components/dialogs/dialog-edit-message/dialog-edit-message.component.html
+++ b/src/app/components/dialogs/dialog-edit-message/dialog-edit-message.component.html
@@ -3,7 +3,7 @@
   <div class="action-buttons">
     <div class="button-wrapper">
       <button class="input-emoji" mat-icon-button (click)="togglePicker($event); $event.stopPropagation()">
-        <img src="../../../assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
+        <img src="assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
       </button>
 
       <div class="emoji-picker" *ngIf="isPickerVisible">
diff --git a/src/app/components/dialogs/dialog-edit-profile-edit-profile/dialog-edit-profile-edit-profile.component.html b/src/app/components/dialogs/dialog-edit-profile-edit-profile/dialog-edit-profile-edit-profile.component.html
index fc78919..611af4d 100644
--- a/src/app/components/dialogs/dialog-edit-profile-edit-profile/dialog-edit-profile-edit-profile.component.html
+++ b/src/app/components/dialogs/dialog-edit-profile-edit-profile/dialog-edit-profile-edit-profile.component.html
@@ -11,7 +11,7 @@
             (click)="closeDialog()"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/close.svg" />
+            <img src="assets/img/icons/close.svg" />
         </button>
     </div>
     <div class="image-section" [ngClass]="{'not-guest': currentUserUid !== 'mMqjWie0OWa6lWCnq5hStLQqXow1'}" (click)="onAvatarClick()">
@@ -19,7 +19,7 @@
         @if (currentUser.avatar.length > 1) {
             <img src="{{ currentUser.avatar }}" />
         } @else {
-            <img src="./../../assets/img/avatar/{{ currentUser.avatar }}.svg" />
+            <img src="assets/img/avatar/{{ currentUser.avatar }}.svg" />
         }
     </div>    
     @if (!editing) {
@@ -30,12 +30,12 @@ <h1>{{ currentUser.name }}</h1>
                     <span (click)="editProfile()">Bearbeiten</span>
                 }
             </div>
-            <span><img src="../../assets/img/icons/online-1.svg" />Aktiv</span>
+            <span><img src="assets/img/icons/online-1.svg" />Aktiv</span>
         </div>
         <div class="profile-mail-section">
             <div class="profile-mail">
                 <img
-                    src="../../assets/img/icons/mail-black.svg"
+                    src="assets/img/icons/mail-black.svg"
                     alt=""
                 />
                 <span>E-Mail Adresse</span>
@@ -50,7 +50,7 @@ <h1>{{ currentUser.name }}</h1>
         <div class="editing-container">
             <div class="edit-name">
                 <div>
-                    <img src="../../assets/img/icons/account_circle.svg" />
+                    <img src="assets/img/icons/account_circle.svg" />
                     <h2>Vollständiger Name</h2>
                 </div>
                 <input
@@ -61,7 +61,7 @@ <h2>Vollständiger Name</h2>
             </div>
             <div class="edit-email">
                 <div>
-                    <img src="../../assets/img/icons/mail-black.svg" />
+                    <img src="assets/img/icons/mail-black.svg" />
                     <h2>E-Mail-Adresse</h2>
                 </div>
                 <input
diff --git a/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.html b/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.html
index 9265374..b53bf04 100644
--- a/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.html
+++ b/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.html
@@ -6,7 +6,7 @@ <h3>Mitglieder</h3>
             (click)="closeDialog()"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/close.svg" />
+            <img src="assets/img/icons/close.svg" />
         </button>
     </div>
     <main>
@@ -14,22 +14,22 @@ <h3>Mitglieder</h3>
             @for (user of chatService.currentChannel.members; track $index) {
                 <div
                     class="channel-member"
-                    (click)="openProfileCard(user)"
+                    (click)="commonFn.openProfileCardByUser(user)"
                 >
                     <div class="avatar">
                         @if (user.avatar.length > 1) {
                             <img src="{{ user.avatar }}" />
                         } @else {
                             <img
-                                src="../../assets/img/avatar/{{
+                                src="assets/img/avatar/{{
                                     user.avatar
                                 }}.svg"
                             />
                         }
-                        @if (isOnline(user.id)) {
-                            <img src="../../../assets/img/icons/online.svg" />
+                        @if (commonFn.isOnline(user.id)) {
+                            <img src="assets/img/icons/online.svg" />
                         } @else {
-                            <img src="../../../assets/img/icons/offline.svg" />
+                            <img src="assets/img/icons/offline.svg" />
                         }
                     </div>
                     <h4>{{ user.name }}</h4>
@@ -41,7 +41,7 @@ <h4>{{ user.name }}</h4>
                 mat-icon-button
                 (click)="openDialogAddMembers()"
             >
-                <img src="../../../assets/img/icons/person-add.svg" />
+                <img src="assets/img/icons/person-add.svg" />
             </button>
             <p>Mitglieder hinzufügen</p>
         </div>
diff --git a/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.ts b/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.ts
index c64978d..73a4cb9 100644
--- a/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.ts
+++ b/src/app/components/dialogs/dialog-show-channel-member/dialog-show-channel-member.component.ts
@@ -6,6 +6,7 @@ import { MatButtonModule } from "@angular/material/button";
 import { DialogAddMemberToChnlComponent } from "../dialog-add-member-to-chnl/dialog-add-member-to-chnl.component";
 import { PofileInfoCardComponent } from "../pofile-info-card/pofile-info-card.component";
 import { UsersList } from "../../../interfaces/users-list";
+import { CommonFnService } from "../../../shared/common-fn.service";
 @Component({
     selector: "app-dialog-show-channel-member",
     standalone: true,
@@ -20,6 +21,7 @@ export class DialogShowChannelMemberComponent {
         public dialogRef: MatDialogRef<DialogShowChannelMemberComponent>,
         public chatService: ChatService,
         public dialog: MatDialog,
+        public commonFn: CommonFnService
     ) { }
 
 
@@ -33,20 +35,4 @@ export class DialogShowChannelMemberComponent {
             panelClass: "custom-dialog-mid",
         });
     }
-
-
-    openProfileCard(user: UsersList) {
-        user.online = this.isOnline(user.id);
-        this.dialog.open(PofileInfoCardComponent, {
-            data: user,
-        });
-    }
-
-
-    isOnline(userId: string): boolean {
-        const user = this.chatService.usersList.find(
-            (user) => user.id === userId,
-        );
-        return user ? user.online : false;
-    }
 }
diff --git a/src/app/components/dialogs/pofile-info-card/pofile-info-card.component.html b/src/app/components/dialogs/pofile-info-card/pofile-info-card.component.html
index 3f443b3..dd733a0 100644
--- a/src/app/components/dialogs/pofile-info-card/pofile-info-card.component.html
+++ b/src/app/components/dialogs/pofile-info-card/pofile-info-card.component.html
@@ -6,24 +6,24 @@
             (click)="closeDialog()"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/close.svg" />
+            <img src="assets/img/icons/close.svg" />
         </button>
     </div>
     <div class="image-section">
         @if (data.avatar.length > 1) {
             <img src="{{ data.avatar }}" />
         } @else {
-            <img src="./../../assets/img/avatar/{{ data.avatar }}.svg" />
+            <img src="assets/img/avatar/{{ data.avatar }}.svg" />
         }
     </div>
     <div class="profile-active-section">
         <h1>{{ data.name }}</h1>
         <div class="status">
             @if (data.online) {
-                <img src="../../assets/img/icons/online-1.svg" />
+                <img src="assets/img/icons/online-1.svg" />
                 <span style="color: var(--online-green)">Aktiv</span>
             } @else {
-                <img src="../../assets/img/icons/offline-1.svg" />
+                <img src="assets/img/icons/offline-1.svg" />
                 <span style="color: var(--text-gray)">Abwesend</span>
             }
         </div>
@@ -31,7 +31,7 @@ <h1>{{ data.name }}</h1>
     <div class="profile-mail-section">
         <div class="profile-mail">
             <img
-                src="../../assets/img/icons/mail-black.svg"
+                src="assets/img/icons/mail-black.svg"
                 alt=""
             />
             <span>E-Mail Adresse</span>
@@ -45,7 +45,7 @@ <h1>{{ data.name }}</h1>
         class="submit"
         (click)="openDM(data)"
     >
-        <img src="../../assets/img/icons/mode_comment.svg" />
+        <img src="assets/img/icons/mode_comment.svg" />
         Nachricht
     </button>
 </section>
diff --git a/src/app/components/main/chat/chat.component.html b/src/app/components/main/chat/chat.component.html
index acdc7f4..448dccc 100644
--- a/src/app/components/main/chat/chat.component.html
+++ b/src/app/components/main/chat/chat.component.html
@@ -1,9 +1,9 @@
 <section class="chat-body" (click)="closePicker($event)">
     <div class="chat-header">
         <button mat-button (click)="openDialogChannelInfo()">
-            <img src="../../../assets/img/icons/chat-tag.svg" />
+            <img src="assets/img/icons/chat-tag.svg" />
             <h1>{{ chatService.currentChannel.name }}</h1>
-            <img src="../../../assets/img/icons/keyboard_arrow_down.svg" />
+            <img src="assets/img/icons/keyboard_arrow_down.svg" />
         </button>
         <div class="participants-wrapper">
             <button mat-icon-button (click)="openDialog($event)">
@@ -17,7 +17,7 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                                     chatService.currentChannel.members[i].avatar
                                 }}" />
                     } @else {
-                    <img src="../../../assets/img/avatar/{{
+                    <img src="assets/img/avatar/{{
                                     chatService.currentChannel.members[i].avatar
                                 }}.svg" />
                     }
@@ -26,7 +26,7 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                 <h1>{{ chatService.currentChannel.members.length }}</h1>
             </button>
             <button mat-icon-button (click)="openDialogAddMembers($event)">
-                <img src="../../../assets/img/icons/person-add.svg" />
+                <img src="assets/img/icons/person-add.svg" />
             </button>
         </div>
     </div>
@@ -52,7 +52,7 @@ <h2>{{ commonFnService.dayDate(message.value.time) }}</h2>
                         <ngx-emoji [isNative]="true" [emoji]="emoji" [size]="24"></ngx-emoji>
                     </button>                      
                     <button class="emoji-button" mat-icon-button (click)="togglePicker('reaction', message.value.padNumber, $event); $event.stopPropagation()">
-                        <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction" />
+                        <img src="assets/img/icons/add_reaction.svg" alt="Add reaction" />
                     </button>
                     <button class="thread-button" (click)="
                                     toggleThread(
@@ -61,11 +61,11 @@ <h2>{{ commonFnService.dayDate(message.value.time) }}</h2>
                                     );
                                     chatService.openedComponent.next('thread');
                                 " mat-icon-button>
-                        <img src="../../../assets/img/icons/comment.svg" alt="Comment" />
+                        <img src="assets/img/icons/comment.svg" alt="Comment" />
                     </button>
                     <ng-container class="hoverMenu" *ngIf="message.value.id === chatService.currentUser.currentUser.id">
                           <button mat-icon-button class="moreButton" [matMenuTriggerFor]="menu">
-                            <img src="../../../assets/img/icons/3-dots.svg" alt="More" />
+                            <img src="assets/img/icons/3-dots.svg" alt="More" />
                           </button>
                           <mat-menu class="moreMenu" #menu="matMenu">
                             <button mat-menu-item (click)="openDialogEditMessage(chatService.currentChannelID, message.key, message.value.message)">
@@ -78,7 +78,7 @@ <h2>{{ commonFnService.dayDate(message.value.time) }}</h2>
                 @if (message.value.avatar.length > 1) {
                 <img src="{{ message.value.avatar }}" />
                 } @else {
-                <img src="../../../assets/img/avatar/{{
+                <img src="assets/img/avatar/{{
                                     message.value.avatar
                                 }}.svg" />
                 }
@@ -132,7 +132,7 @@ <h5 (click)="openProfileById(message.value.id)">{{ message.value.name}}</h5>
                             <button class="emoji-button" mat-icon-button (click)="
                             togglePicker('reaction', message.value.padNumber, $event);
                             $event.stopPropagation()">
-                                <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction"  />
+                                <img src="assets/img/icons/add_reaction.svg" alt="Add reaction"  />
                             </button>
                             
                         </div>
@@ -156,7 +156,7 @@ <h5 (click)="openProfileById(message.value.id)">{{ message.value.name}}</h5>
         <div class="blank-chat">
             <div class="blank-info">
                 <div>
-                    <img src="../../../assets/img/icons/chat-tag.svg" />
+                    <img src="assets/img/icons/chat-tag.svg" />
                     <h1>{{ chatService.currentChannel.name }}</h1>
                 </div>
                 <span>
@@ -183,7 +183,7 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                 </textarea>
                 <div *ngIf="previewUrl" class="preview-image" (click)="openDialogImage(previewUrl)">
                     <button class="closeButton" (click)="clearPreview()" mat-icon-button>
-                        <img src="../../../assets/img/icons/close.svg"/>
+                        <img src="assets/img/icons/close.svg"/>
                     </button>
                     <img [src]="previewUrl" alt="Image Preview" />
                 </div>
@@ -192,25 +192,25 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                         <button class="upload-image input-image" mat-icon-button (click)="upload.click()">
                             <input id="fileUploadChat" type="file" #upload (change)="onFileSelected($event)"
                                 accept=".png,.jpg">
-                            <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
+                            <img src="assets/img/icons/add-gray.svg" alt="Add image" />
                         </button>
                         <div class="vector"></div>
                         <button class="input-emoji" mat-icon-button (click)="
                                 togglePicker('input', '', $event);
                                 $event.stopPropagation()
                             ">
-                            <img src="../../../assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
+                            <img src="assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
                         </button>
 
                         <div class="emoji-picker input-picker" *ngIf="isPickerVisible && pickerContext === 'input'" style="bottom: 1rem; left: 3.5rem;">
                             <emoji-mart [perLine]="perLineCount" (emojiClick)="addEmoji($event)"></emoji-mart>
                         </div>
                         <button class="input-at" mat-icon-button (click)="addAtSymbol()">
-                            <img src="../../../assets/img/icons/alternate_email.svg" alt="Tag someone" />
+                            <img src="assets/img/icons/alternate_email.svg" alt="Tag someone" />
                         </button>
                     </div>
                     <button class="input-send" (click)="send()" (click)="imageService.uploadFile(upload)" mat-icon-button>
-                        <img src="../../../assets/img/icons/send-button.svg" alt="Send message" />
+                        <img src="assets/img/icons/send-button.svg" alt="Send message" />
                     </button>
                 </div>
             </div>
@@ -219,7 +219,7 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                     @if (option.avatar && option.avatar.length > 1) {
                     <img src="{{ option.avatar }}" />
                     } @else {
-                    <img src="../../assets/img/avatar/{{
+                    <img src="assets/img/avatar/{{
                                 option.avatar
                             }}.svg" />
                     }
diff --git a/src/app/components/main/conversations/conversations.component.html b/src/app/components/main/conversations/conversations.component.html
index ba8fbea..81664d1 100644
--- a/src/app/components/main/conversations/conversations.component.html
+++ b/src/app/components/main/conversations/conversations.component.html
@@ -2,8 +2,8 @@
     <section class="workspace">
         <div>
             <div class="logo">
-                <img src="../../../assets/img/devspace/background.png" />
-                <img src="../../../assets/img/devspace/devspace.svg" />
+                <img src="assets/img/devspace/background.png" />
+                <img src="assets/img/devspace/devspace.svg" />
             </div>
             <h2>Devspace</h2>
         </div>
@@ -16,7 +16,7 @@ <h2>Devspace</h2>
             class="new-message"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/edit_square.svg" />
+            <img src="assets/img/icons/edit_square.svg" />
         </button>
     </section>
     <div class="container">
@@ -28,7 +28,7 @@ <h2>Devspace</h2>
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     <div>
-                        <img src="../../../assets/img/icons/workspaces.svg" />
+                        <img src="assets/img/icons/workspaces.svg" />
                         <h3>Channels</h3>
                     </div>
                     <button
@@ -36,7 +36,7 @@ <h3>Channels</h3>
                         class="add"
                         (click)="openDialog($event)"
                     >
-                        <img src="../../../assets/img/icons/add.svg" />
+                        <img src="assets/img/icons/add.svg" />
                     </button>
                 </mat-panel-title>
             </mat-expansion-panel-header>
@@ -60,7 +60,7 @@ <h3>Channels</h3>
                             class="channel"
                             value="{{ channel.id }}"
                         >
-                            <img src="../../../assets/img/icons/tag.svg" />
+                            <img src="assets/img/icons/tag.svg" />
                             <h3>{{ channel.channelData.name }}</h3>
                         </mat-button-toggle>
                     }
@@ -69,7 +69,7 @@ <h3>{{ channel.channelData.name }}</h3>
                     class="new-channel"
                     (click)="openDialog($event)"
                 >
-                    <img src="../../../assets/img/icons/add_circle.svg" />
+                    <img src="assets/img/icons/add_circle.svg" />
                     <span>Channel hinzufügen</span>
                 </div>
             </mat-button-toggle-group>
@@ -83,7 +83,7 @@ <h3>{{ channel.channelData.name }}</h3>
                 <mat-panel-title>
                     <div>
                         <img
-                            src="../../../assets/img/icons/account_circle.svg"
+                            src="assets/img/icons/account_circle.svg"
                         />
                         <h3>Direktnachrichten</h3>
                     </div>
@@ -112,18 +112,18 @@ <h3>Direktnachrichten</h3>
                                     <img src="{{ user.avatar }}" />
                                 } @else {
                                     <img
-                                        src="../../../assets/img/avatar/{{
+                                        src="assets/img/avatar/{{
                                             user.avatar
                                         }}.svg"
                                     />
                                 }
                                 @if (user.online) {
                                     <img
-                                        src="../../../assets/img/icons/online.svg"
+                                        src="assets/img/icons/online.svg"
                                     />
                                 } @else {
                                     <img
-                                        src="../../../assets/img/icons/offline.svg"
+                                        src="assets/img/icons/offline.svg"
                                     />
                                 }
                             </div>
diff --git a/src/app/components/main/direct-message/direct-message.component.html b/src/app/components/main/direct-message/direct-message.component.html
index c7b7fbe..a256856 100644
--- a/src/app/components/main/direct-message/direct-message.component.html
+++ b/src/app/components/main/direct-message/direct-message.component.html
@@ -1,20 +1,20 @@
 <section class="chat-body" (click)="closePicker($event)">
     <div class="chat-header">
-        <mat-button-toggle-group class="contact-list" (click)="commonFnService.openProfileCard(chatService.selectedUser.name)" vertical="true"
+        <mat-button-toggle-group class="contact-list" (click)="commonFnService.openProfileCardByUser(chatService.selectedUser)" vertical="true"
             hideSingleSelectionIndicator="true">
             <mat-button-toggle class="contact">
                 <div>
                     @if (chatService.selectedUser.avatar.length > 1) {
                     <img src="{{ chatService.selectedUser.avatar }}" />
                     } @else {
-                    <img src="../../../../assets/img/avatar/{{
+                    <img src="assets/img/avatar/{{
                                 chatService.selectedUser.avatar
                             }}.svg" alt="" />
                     }
                     @if (chatService.selectedUser.online) {
-                    <img src="../../../assets/img/icons/online.svg" />
+                    <img src="assets/img/icons/online.svg" />
                     } @else {
-                    <img src="../../../assets/img/icons/offline.svg" />
+                    <img src="assets/img/icons/offline.svg" />
                     }
                 </div>
                 <h1>{{ chatService.selectedUser.name }}</h1>
@@ -48,11 +48,11 @@ <h2>{{ commonFnService.dayDate(message.value.time) }}</h2>
                         <ngx-emoji [isNative]="true" [emoji]="emoji" [size]="24"></ngx-emoji>
                     </button>
                     <button class="emoji-button" mat-icon-button (click)="togglePicker('reaction', message.value.padNumber, $event); $event.stopPropagation()">
-                        <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction" />
+                        <img src="assets/img/icons/add_reaction.svg" alt="Add reaction" />
                     </button>
                         <ng-container *ngIf="message.value.id === chatService.currentUser.currentUser.id">
                             <button mat-icon-button class="moreButton" [matMenuTriggerFor]="menu">
-                              <img src="../../../assets/img/icons/3-dots.svg" alt="More" />
+                              <img src="assets/img/icons/3-dots.svg" alt="More" />
                             </button>
                             <mat-menu class="moreMenu" #menu="matMenu">
                               <button mat-menu-item (click)="openDialogEditMessage(chatService.selectedUser.id, message.key, message.value.message)">
@@ -66,7 +66,7 @@ <h2>{{ commonFnService.dayDate(message.value.time) }}</h2>
                 @if (message.value.avatar.length > 1) {
                 <img src="{{ message.value.avatar }}" />
                 } @else {
-                <img src="../../../assets/img/avatar/{{
+                <img src="assets/img/avatar/{{
                                     message.value.avatar
                                 }}.svg" />
                 }
@@ -115,7 +115,7 @@ <h5 (click)="openProfileById(message.value.id)">{{ message.value.name }}</h5>
                             <button class="emoji-button" mat-icon-button (click)="
                             togglePicker('reaction', message.value.padNumber, $event);
                             $event.stopPropagation()">
-                                <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction"  />
+                                <img src="assets/img/icons/add_reaction.svg" alt="Add reaction"  />
                             </button>
                         </div>
                     </div>
@@ -133,14 +133,14 @@ <h5 (click)="openProfileById(message.value.id)">{{ message.value.name }}</h5>
                     @if (chatService.selectedUser.avatar.length > 1) {
                     <img src="{{ chatService.selectedUser.avatar }}" />
                     } @else {
-                    <img src="../../../../assets/img/avatar/{{
+                    <img src="assets/img/avatar/{{
                                     chatService.selectedUser.avatar
                                 }}.svg" alt="" />
                     }
                     <h1>{{ chatService.selectedUser.name }}</h1>
                 </div>
                 <span>Diese Unterhaltung findet nur zwischen
-                    <button (click)="commonFnService.openProfileCard(chatService.selectedUser.name)">
+                    <button (click)="commonFnService.openProfileCardByUser(chatService.selectedUser)">
                         &#64;{{ chatService.selectedUser.name }}
                     </button>
                     und dir statt.</span>
@@ -155,7 +155,7 @@ <h1>{{ chatService.selectedUser.name }}</h1>
                     [formControl]="formCtrl"></textarea>
                 <div *ngIf="previewUrl" class="preview-image" (click)="openDialogImage(previewUrl)">
                     <button class="closeButton" (click)="clearPreview()" mat-icon-button>
-                        <img src="../../../assets/img/icons/close.svg"/>
+                        <img src="assets/img/icons/close.svg"/>
                     </button>
                     <img [src]="previewUrl" alt="Image Preview" />
                 </div>
@@ -164,11 +164,11 @@ <h1>{{ chatService.selectedUser.name }}</h1>
                         <button class="upload-image input-image" mat-icon-button (click)="upload.click()">
                             <input id="fileUploadDirectmessage" type="file" #upload (change)="onFileSelected($event)"
                                 accept=".png,.jpg">
-                            <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
+                            <img src="assets/img/icons/add-gray.svg" alt="Add image" />
                         </button>
                         <div class="vector"></div>
                         <button class="input-emoji"  mat-icon-button (click)="togglePicker('input', '',$event);$event.stopPropagation()">
-                            <img src="../../../assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
+                            <img src="assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
                         </button>
 
                         <div class="emoji-picker input-picker" *ngIf="isPickerVisible && pickerContext === 'input'"
@@ -176,11 +176,11 @@ <h1>{{ chatService.selectedUser.name }}</h1>
                             <emoji-mart [perLine]="perLineCount" (emojiClick)="addEmoji($event)"></emoji-mart>
                         </div>
                         <button class="input-at" mat-icon-button (click)="addAtSymbol()">
-                            <img src="../../../assets/img/icons/alternate_email.svg" alt="Tag someone" />
+                            <img src="assets/img/icons/alternate_email.svg" alt="Tag someone" />
                         </button>
                     </div>
                     <button class="input-send" (click)="send()" mat-icon-button>
-                        <img src="../../../assets/img/icons/send-button.svg" alt="Send message" />
+                        <img src="assets/img/icons/send-button.svg" alt="Send message" />
                     </button>
                 </div>
             </div>
@@ -189,7 +189,7 @@ <h1>{{ chatService.selectedUser.name }}</h1>
                     @if (option.avatar && option.avatar.length > 1) {
                     <img src="{{ option.avatar }}" />
                     } @else {
-                    <img src="../../assets/img/avatar/{{
+                    <img src="assets/img/avatar/{{
                                 option.avatar
                             }}.svg" />
                     }
diff --git a/src/app/components/main/header/header.component.html b/src/app/components/main/header/header.component.html
index 82da0b4..eb82987 100644
--- a/src/app/components/main/header/header.component.html
+++ b/src/app/components/main/header/header.component.html
@@ -5,19 +5,19 @@
         class="mobile-header-open"
         (click)="mobileGoBack()"
     >
-        <img src="../../../assets/img/icons/keyboard_arrow_left.svg" />
+        <img src="assets/img/icons/keyboard_arrow_left.svg" />
         <div class="devspace">
-            <img src="../../../assets/img/devspace/background.png" />
-            <img src="../../../assets/img/devspace/devspace.svg" />
+            <img src="assets/img/devspace/background.png" />
+            <img src="assets/img/devspace/devspace.svg" />
         </div>
-        <img src="../../../assets/img/devspace/name.svg" />
+        <img src="assets/img/devspace/name.svg" />
     </div>
     } @else {
     <div
         class="logo"
     >
-        <img src="../../../assets/img/logo/icon.svg" />
-        <img src="../../../assets/img/logo/name.svg" />
+        <img src="assets/img/logo/icon.svg" />
+        <img src="assets/img/logo/name.svg" />
     </div>
     }
     <div class="searchbar-wrapper">
@@ -39,7 +39,7 @@
                         <img src="{{ option.avatar }}" />
                     } @else {
                         <img
-                            src="../../assets/img/avatar/{{
+                            src="assets/img/avatar/{{
                                 option.avatar
                             }}.svg"
                         />
@@ -54,7 +54,7 @@ <h3>{{ option.name }}</h3>
                         <img src="{{ option.avatar }}" />
                     } @else {
                         <img
-                            src="../../assets/img/avatar/{{
+                            src="assets/img/avatar/{{
                                 option.avatar
                             }}.svg"
                         />
@@ -68,7 +68,7 @@ <h3>{{ option.name }}</h3>
         </mat-autocomplete>
         
         
-        <img src="../../../assets/img/icons/search.svg" />
+        <img src="assets/img/icons/search.svg" />
     </div>
     
     <div
@@ -78,13 +78,13 @@ <h3>{{ option.name }}</h3>
         <h1>{{ currentuser.currentUser.name }}</h1>
         <div class="avatar-wrapper">
             <span class="online-status">
-                <img src="../../../assets/img/icons/is-online.svg" />
+                <img src="assets/img/icons/is-online.svg" />
             </span>
             @if (currentuser.currentUser.avatar.length > 1) {
             <img src="{{ currentuser.currentUser.avatar }}" />
             } @else {
             <img
-                src="../../../assets/img/avatar/{{
+                src="assets/img/avatar/{{
                     currentuser.currentUser.avatar
                 }}.svg"
             />
@@ -94,7 +94,7 @@ <h1>{{ currentuser.currentUser.name }}</h1>
             (click)="openDialog($event)"
             mat-icon-button
         >
-            <img src="../../../assets/img/icons/keyboard_arrow_down.svg">
+            <img src="assets/img/icons/keyboard_arrow_down.svg">
         </button>
     </div>
 </section>
@@ -125,7 +125,7 @@ <h1>{{ currentuser.currentUser.name }}</h1>
                         <img src="{{ option.avatar }}" />
                     } @else {
                         <img
-                            src="../../assets/img/avatar/{{
+                            src="assets/img/avatar/{{
                                 option.avatar
                             }}.svg"
                         />
@@ -140,7 +140,7 @@ <h3>{{ option.name }}</h3>
                         <img src="{{ option.avatar }}" />
                     } @else {
                         <img
-                            src="../../assets/img/avatar/{{
+                            src="assets/img/avatar/{{
                                 option.avatar
                             }}.svg"
                         />
@@ -152,7 +152,7 @@ <h3>{{ option.name }}</h3>
                 </mat-option>
             </ng-container>
         </mat-autocomplete>
-    <img src="../../../assets/img/icons/search.svg" />
+    <img src="assets/img/icons/search.svg" />
 
     
 </div>
diff --git a/src/app/components/main/main.component.html b/src/app/components/main/main.component.html
index 45883e1..321fa40 100644
--- a/src/app/components/main/main.component.html
+++ b/src/app/components/main/main.component.html
@@ -18,10 +18,10 @@
         @if (showMenu) {
             <span name="Workspace-Menü schließen "
                 >Workspace-Menü schließen </span
-            ><img src="../../assets/img/icons/sidenav-close.svg" />
+            ><img src="assets/img/icons/sidenav-close.svg" />
         } @else {
             <span name="Workspace-Menü öffen ">Workspace-Menü öffen </span
-            ><img src="../../assets/img/icons/sidenav-open.svg" />
+            ><img src="assets/img/icons/sidenav-open.svg" />
         }
     </button>
     @if (!chatService.mobileOpen) {
@@ -62,7 +62,7 @@
             type="submit"
             (click)="openMobileComponent('newMessage')"
         >
-            <img src="../../assets/img/icons/edit_square-white.svg" />
+            <img src="assets/img/icons/edit_square-white.svg" />
         </button>
     }
     @case ("chat") {
diff --git a/src/app/components/main/new-message/new-message.component.html b/src/app/components/main/new-message/new-message.component.html
index df2b2c4..2b9f870 100644
--- a/src/app/components/main/new-message/new-message.component.html
+++ b/src/app/components/main/new-message/new-message.component.html
@@ -21,7 +21,7 @@ <h1>Neue Nachricht</h1>
                                 <img src="{{ option.avatar }}" />
                             } @else {
                                 <img
-                                    src="../../assets/img/avatar/{{
+                                    src="assets/img/avatar/{{
                                         option.avatar
                                     }}.svg"
                                 />
@@ -30,7 +30,7 @@ <h3>{{ option.name }}</h3>
                         </mat-option>
                     } @else {
                         <mat-option [value]="option.id">
-                            <img src="../../../assets/img/icons/tag.svg" />
+                            <img src="assets/img/icons/tag.svg" />
                             <h3>{{ option.name }}</h3>
                         </mat-option>
                     }
@@ -52,7 +52,7 @@ <h3>{{ option.name }}</h3>
                     <div class="button-wrapper">
                         <button mat-icon-button>
                             <img
-                                src="../../../assets/img/icons/add-gray.svg"
+                                src="assets/img/icons/add-gray.svg"
                                 alt="Add image"
                             />
                         </button>
@@ -62,7 +62,7 @@ <h3>{{ option.name }}</h3>
                             (click)="togglePicker()"
                         >
                             <img
-                                src="../../../assets/img/icons/sentiment_satisfied.svg"
+                                src="assets/img/icons/sentiment_satisfied.svg"
                                 alt="Add emoji"
                             />
                         </button>
@@ -73,14 +73,14 @@ <h3>{{ option.name }}</h3>
                         </div>
                         <button mat-icon-button>
                             <img
-                                src="../../../assets/img/icons/alternate_email.svg"
+                                src="assets/img/icons/alternate_email.svg"
                                 alt="Tag someone"
                             />
                         </button>
                     </div>
                     <button mat-icon-button>
                         <img
-                            src="../../../assets/img/icons/send-button.svg"
+                            src="assets/img/icons/send-button.svg"
                             alt="Send message"
                         />
                     </button>
diff --git a/src/app/components/main/thread/thread.component.html b/src/app/components/main/thread/thread.component.html
index a19b716..b9f33f7 100644
--- a/src/app/components/main/thread/thread.component.html
+++ b/src/app/components/main/thread/thread.component.html
@@ -3,12 +3,12 @@
         <div>
             <h1>Thread</h1>
             <div>
-                <img src="../../../assets/img/icons/tag-purple.svg" />
+                <img src="assets/img/icons/tag-purple.svg" />
                 <span>{{ chatService.currentChannel.name }}</span>
             </div>
         </div>
         <button class="closeButton" (click)="closeThread()" mat-icon-button>
-            <img src="../../../assets/img/icons/close.svg" />
+            <img src="assets/img/icons/close.svg" />
         </button>
     </header>
     <div class="chat-body">
@@ -16,11 +16,11 @@ <h1>Thread</h1>
             <div class="message initialMessage" [ngClass]="{ 'my-message': initialMessage.id === currentUser.currentUser.id }">
                 <div class="hoverMenu">
                     <button class="emoji-button" mat-icon-button (click)="togglePicker('reaction', initialMessage.padNumber, $event, true); $event.stopPropagation()">
-                        <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction" />
+                        <img src="assets/img/icons/add_reaction.svg" alt="Add reaction" />
                     </button>
                     <ng-container *ngIf="initialMessage.id === currentUser.currentUser.id">
                         <button mat-icon-button class="moreButton" [matMenuTriggerFor]="menu">
-                            <img src="../../../assets/img/icons/3-dots.svg" alt="More" />
+                            <img src="assets/img/icons/3-dots.svg" alt="More" />
                         </button>
                         <mat-menu class="moreMenu" #menu="matMenu">
                             <button mat-menu-item
@@ -32,7 +32,7 @@ <h1>Thread</h1>
                 </div>
                 <img *ngIf="initialMessage.avatar.length > 1; else defaultAvatar" [src]="initialMessage.avatar" />
                 <ng-template #defaultAvatar>
-                    <img src="../../../assets/img/avatar/{{ initialMessage.avatar }}.svg"/>
+                    <img src="assets/img/avatar/{{ initialMessage.avatar }}.svg"/>
                 </ng-template>
                 <div>
                     <div class="message-info">
@@ -83,7 +83,7 @@ <h5 (click)="openProfileById(initialMessage.id)">{{ initialMessage.name }}</h5>
                             <button class="emoji-button" mat-icon-button (click)="
                             togglePicker('reaction', initialMessage.padNumber, $event, true);
                             $event.stopPropagation()">
-                                <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction"  />
+                                <img src="assets/img/icons/add_reaction.svg" alt="Add reaction"  />
                             </button>
                         </div>
                     </div>
@@ -97,11 +97,11 @@ <h5 (click)="openProfileById(initialMessage.id)">{{ initialMessage.name }}</h5>
                 <div class="message" [ngClass]="{ 'my-message': message.id === currentUser.currentUser.id }">
                     <div class="hoverMenu">
                         <button class="emoji-button" mat-icon-button (click)="togglePicker('reaction', message.padNumber, $event, false); $event.stopPropagation()">
-                            <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction" />
+                            <img src="assets/img/icons/add_reaction.svg" alt="Add reaction" />
                         </button>
                         <ng-container *ngIf="message.id === currentUser.currentUser.id">
                             <button mat-icon-button class="moreButton" [matMenuTriggerFor]="menu">
-                                <img src="../../../assets/img/icons/3-dots.svg" alt="More" />
+                                <img src="assets/img/icons/3-dots.svg" alt="More" />
                             </button>
                             <mat-menu class="moreMenu" #menu="matMenu">
                                 <button mat-menu-item
@@ -113,7 +113,7 @@ <h5 (click)="openProfileById(initialMessage.id)">{{ initialMessage.name }}</h5>
                     </div>
                     <img *ngIf="message.avatar.length > 1; else defaultAvatar" [src]="message.avatar" />
                     <ng-template #defaultAvatar>
-                        <img src="../../../assets/img/avatar/{{
+                        <img src="assets/img/avatar/{{
                                 message.avatar
                             }}.svg" />
                     </ng-template>
@@ -165,7 +165,7 @@ <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
                             <button class="emoji-button" mat-icon-button (click)="
                             togglePicker('reaction', message.padNumber, $event, false);
                             $event.stopPropagation()">
-                                <img src="../../../assets/img/icons/add_reaction.svg" alt="Add reaction"  />
+                                <img src="assets/img/icons/add_reaction.svg" alt="Add reaction"  />
                             </button>
                         </div>
                     </div>
@@ -183,7 +183,7 @@ <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
                 placeholder="Antworten..."></textarea>
                 <div *ngIf="previewUrl" class="preview-image" (click)="openDialogImage(previewUrl)">
                     <button class="closeButton" (click)="clearPreview()" mat-icon-button>
-                        <img src="../../../assets/img/icons/close.svg"/>
+                        <img src="assets/img/icons/close.svg"/>
                     </button>
                     <img [src]="previewUrl" alt="Image Preview" />
                 </div>
@@ -192,22 +192,22 @@ <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
                     <button class="upload-image input-image" mat-icon-button (click)="upload.click()">
                         <input id="fileUploadThread" type="file" #upload (change)="onFileSelected($event)"
                             accept=".png,.jpg">
-                        <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
+                        <img src="assets/img/icons/add-gray.svg" alt="Add image" />
                     </button>
                     <div class="vector"></div>
                     <button class="input-emoji" mat-icon-button (click)="togglePicker('input', '',$event, false);$event.stopPropagation()">
-                        <img src="../../../assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
+                        <img src="assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
                     </button>
                     <div class="emoji-picker input-picker" *ngIf="isPickerVisible && pickerContext === 'input'"
                         style="bottom: 1rem; left: 3.5rem;">
                         <emoji-mart [perLine]="perLineCount" (emojiClick)="addEmoji($event)"></emoji-mart>
                     </div>
                     <button class="input-at" mat-icon-button (click)="addAtSymbol()">
-                        <img src="../../../assets/img/icons/alternate_email.svg" alt="Tag someone" />
+                        <img src="assets/img/icons/alternate_email.svg" alt="Tag someone" />
                     </button>
                 </div>
                 <button class="input-send" mat-icon-button (click)="send()">
-                    <img src="../../../assets/img/icons/send-button.svg" alt="Send message" />
+                    <img src="assets/img/icons/send-button.svg" alt="Send message" />
                 </button>
             </div>
         </div>
@@ -216,7 +216,7 @@ <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
                 @if (option.avatar && option.avatar.length > 1) {
                 <img src="{{ option.avatar }}" />
                 } @else {
-                <img src="../../assets/img/avatar/{{
+                <img src="assets/img/avatar/{{
                                 option.avatar
                             }}.svg" />
                 }
diff --git a/src/app/components/start/avatar/avatar.component.html b/src/app/components/start/avatar/avatar.component.html
index bae68fd..be1ad19 100644
--- a/src/app/components/start/avatar/avatar.component.html
+++ b/src/app/components/start/avatar/avatar.component.html
@@ -7,11 +7,11 @@ <h1>Wähle deinen Avatar</h1>
             </div>
         } @else if (this.avatar){
             <div class="profilePic">
-                <img src="../../../assets/img/avatar/{{ this.avatar }}.svg" />
+                <img src="assets/img/avatar/{{ this.avatar }}.svg" />
             </div>
         } @else  {
             <div class="noAvatar">
-                <img src="../../../assets/img/icons/person.svg" />
+                <img src="assets/img/icons/person.svg" />
             </div>
         }
 
@@ -25,14 +25,14 @@ <h2>Frederik Beck</h2>
                             <img
                                 class="selected"
                                 (click)="selectAvatar(number.toString())"
-                                src="../../../assets/img/avatar/{{
+                                src="assets/img/avatar/{{
                                     number
                                 }}.svg"
                             />
                         } @else {
                             <img
                                 (click)="selectAvatar(number.toString())"
-                                src="../../../assets/img/avatar/{{
+                                src="assets/img/avatar/{{
                                     number
                                 }}.svg"
                             />
diff --git a/src/app/components/start/legal-notice/legal-notice.component.html b/src/app/components/start/legal-notice/legal-notice.component.html
index e8c75ae..c2eb53c 100644
--- a/src/app/components/start/legal-notice/legal-notice.component.html
+++ b/src/app/components/start/legal-notice/legal-notice.component.html
@@ -5,7 +5,7 @@
         (click)="this.location.back()"
     >
         <img
-            src="../../../assets/img/icons/arrow_back.svg"
+            src="assets/img/icons/arrow_back.svg"
             alt="Go back"
         />
     </button>
diff --git a/src/app/components/start/login/login.component.html b/src/app/components/start/login/login.component.html
index 02b2a66..0e1ea98 100644
--- a/src/app/components/start/login/login.component.html
+++ b/src/app/components/start/login/login.component.html
@@ -16,7 +16,7 @@ <h1>Anmeldung</h1>
                     placeholder="beispielname@email.com"
                     id="email"
                 />
-                <img src="../../../assets/img/icons/mail-gray.svg" />
+                <img src="assets/img/icons/mail-gray.svg" />
                 @if (invalidEmail) {
                     <span class="error"
                         >Diese E-Mail-Adresse ist leider ungültig.</span
@@ -31,7 +31,7 @@ <h1>Anmeldung</h1>
                     placeholder="Passwort"
                     id="password"
                 />
-                <img src="../../../assets/img/icons/lock-gray.svg" />
+                <img src="assets/img/icons/lock-gray.svg" />
                 @if (invalidPasswordOrEmail) {
                     <span class="error"
                         >Falsches Passwort oder E-Mail. Bitte noch einmal
@@ -59,7 +59,7 @@ <h1>Anmeldung</h1>
                 type="button"
                 (click)="loginWithGoogle()"
             >
-                <img src="../../../assets/img/icons/google.svg" />
+                <img src="assets/img/icons/google.svg" />
                 Anmelden mit Google
             </button>
             <div>
diff --git a/src/app/components/start/privacy-policy/privacy-policy.component.html b/src/app/components/start/privacy-policy/privacy-policy.component.html
index 94947c0..54f98a9 100644
--- a/src/app/components/start/privacy-policy/privacy-policy.component.html
+++ b/src/app/components/start/privacy-policy/privacy-policy.component.html
@@ -5,7 +5,7 @@
         (click)="this.location.back()"
     >
         <img
-            src="../../../assets/img/icons/arrow_back.svg"
+            src="assets/img/icons/arrow_back.svg"
             alt="Go back"
         />
     </button>
diff --git a/src/app/components/start/recovery/recovery.component.html b/src/app/components/start/recovery/recovery.component.html
index 0ae93a2..5a58152 100644
--- a/src/app/components/start/recovery/recovery.component.html
+++ b/src/app/components/start/recovery/recovery.component.html
@@ -5,7 +5,7 @@
         (click)="location.back()"
     >
         <img
-            src="../../../assets/img/icons/arrow_back.svg"
+            src="assets/img/icons/arrow_back.svg"
             alt="Go back"
         />
     </button>
@@ -22,7 +22,7 @@ <h1>Passwort zurücksetzen</h1>
                 placeholder="beispielname@email.com"
                 id="email"
             />
-            <img src="../../../assets/img/icons/mail-gray.svg" />
+            <img src="assets/img/icons/mail-gray.svg" />
             @if (invalidEmail) {
                 <span class="error"
                     >Diese E-Mail-Adresse ist leider ungültig.</span
@@ -46,7 +46,7 @@ <h1>Passwort zurücksetzen</h1>
 @if (emailSent) {
     <div class="mail-sent-slider">
         <img
-            src="../../../assets/img/icons/send-white.svg"
+            src="assets/img/icons/send-white.svg"
             alt=""
         />
         <h2>E-Mail gesendet</h2>
diff --git a/src/app/components/start/reset-password/reset-password.component.html b/src/app/components/start/reset-password/reset-password.component.html
index 683c70d..4de02d8 100644
--- a/src/app/components/start/reset-password/reset-password.component.html
+++ b/src/app/components/start/reset-password/reset-password.component.html
@@ -5,7 +5,7 @@
         (click)="goBack()"
     >
         <img
-            src="../../../assets/img/icons/arrow_back.svg"
+            src="assets/img/icons/arrow_back.svg"
             alt="Go back"
         />
     </button>
diff --git a/src/app/components/start/signup/signup.component.html b/src/app/components/start/signup/signup.component.html
index 5d4b616..6ca65a0 100644
--- a/src/app/components/start/signup/signup.component.html
+++ b/src/app/components/start/signup/signup.component.html
@@ -5,7 +5,7 @@
         (click)="this.location.back()"
     >
         <img
-            src="../../../assets/img/icons/arrow_back.svg"
+            src="assets/img/icons/arrow_back.svg"
             alt="Go back"
         />
     </button>
@@ -34,7 +34,7 @@ <h1>Konto erstellen</h1>
                     required
                     pattern="^[A-ZÄÖÜ][a-zäöüß]+ [A-ZÄÖÜ][a-zäöüß]+$"
                 />
-                <img src="../../../assets/img/icons/person-gray.svg" />
+                <img src="assets/img/icons/person-gray.svg" />
 
                 @if (!name.valid && (accountForm.submitted || name.touched)) {
                     <span class="error"
@@ -53,7 +53,7 @@ <h1>Konto erstellen</h1>
                     required
                     pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
                 />
-                <img src="../../../assets/img/icons/mail-gray.svg" />
+                <img src="assets/img/icons/mail-gray.svg" />
 
                 @if (!email.valid && (accountForm.submitted || email.touched)) {
                     <span class="error"
@@ -73,7 +73,7 @@ <h1>Konto erstellen</h1>
                     pattern="^\S{6,}$"
                     required
                 />
-                <img src="../../../assets/img/icons/lock-gray.svg" />
+                <img src="assets/img/icons/lock-gray.svg" />
 
                 @if (
                     !password.valid &&
diff --git a/src/app/components/start/start.component.html b/src/app/components/start/start.component.html
index d5c5e73..211d892 100644
--- a/src/app/components/start/start.component.html
+++ b/src/app/components/start/start.component.html
@@ -3,12 +3,12 @@
         <div class="start-screen"></div>
         <div class="animation-logo">
             <img
-                src="../../../assets/img/logo/icon.svg"
+                src="assets/img/logo/icon.svg"
                 class=""
             />
             <div>
                 <img
-                    src="../../assets/img/logo/logo-white.svg"
+                    src="assets/img/logo/logo-white.svg"
                     alt="DABubble"
                 />
             </div>
@@ -17,12 +17,12 @@
     <section class="header">
         <div class="logo">
             <img
-                src="../../../assets/img/logo/icon.svg"
+                src="assets/img/logo/icon.svg"
                 class=""
                 class=""
             />
             <img
-                src="../../../assets/img/logo/name.svg"
+                src="assets/img/logo/name.svg"
                 alt="DABubble"
             />
         </div>
diff --git a/src/app/shared/common-fn.service.ts b/src/app/shared/common-fn.service.ts
index 187577d..71bc51e 100644
--- a/src/app/shared/common-fn.service.ts
+++ b/src/app/shared/common-fn.service.ts
@@ -45,6 +45,22 @@ export class CommonFnService {
   }
 
 
+  openProfileCardByUser(user: UsersList) {
+    user.online = this.isOnline(user.id);
+    this.dialog.open(PofileInfoCardComponent, {
+      data: user,
+    });
+  }
+
+  
+  isOnline(userId: string): boolean {
+    const user = this.chatService.usersList.find(
+      (user) => user.id === userId,
+    );
+    return user ? user.online : false;
+  }
+
+
   noReactions(message: Message): boolean {
     return !message.reactions || Object.keys(message.reactions).length === 0;
   }
diff --git a/src/app/shared/firestore.service.ts b/src/app/shared/firestore.service.ts
index 76f4958..b6801b2 100644
--- a/src/app/shared/firestore.service.ts
+++ b/src/app/shared/firestore.service.ts
@@ -29,17 +29,10 @@ export class FirestoreService {
   constructor(private router: Router) {
     this.usersRef = collection(this.firestore, "users");
     this.channelsRef = collection(this.firestore, "channels");
-    this.initializeReferences();
     this.currentUser$ = new Observable(this.observeAuthState);
   }
 
 
-  private initializeReferences() {
-    this.usersRef = collection(this.firestore, "users");
-    this.channelsRef = collection(this.firestore, "channels");
-  }
-
-
   private observeAuthState = (observer: any) => {
     onAuthStateChanged(this.auth, (user) => {
       user ? this.handleUserLogin(observer, user) : this.handleUserLogout(observer);