diff --git a/apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.spec.ts b/apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.spec.ts
index 53f589b..1517bad 100644
--- a/apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.spec.ts
+++ b/apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.spec.ts
@@ -8,10 +8,7 @@ describe('ChatAnnotationComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        ChatAnnotationComponent, 
-        HttpClientTestingModule,
-      ],
+      imports: [ChatAnnotationComponent, HttpClientTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChatAnnotationComponent);
diff --git a/apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.html b/apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.html
index 62994ff..8c6a040 100644
--- a/apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.html
+++ b/apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.html
@@ -1,7 +1,10 @@
 @if (message && message.type === 'text' && message.text.annotations.length) {
   <div class="title">Annotations:</div>
   <div class="content">
-    @for (annotation of message.text.annotations; track annotation.text) {
+    @for (
+      annotation of message.text.annotations;
+      track annotation.text + $index
+    ) {
       <ai-chat-annotation [annotation]="annotation" [index]="$index + 1">
         [{{ $index + 1 }}]
       </ai-chat-annotation>
diff --git a/apps/spa/src/app/components/chat/chat-message/chat-message.component.html b/apps/spa/src/app/components/chat/chat-message/chat-message.component.html
index e680f7c..54306de 100644
--- a/apps/spa/src/app/components/chat/chat-message/chat-message.component.html
+++ b/apps/spa/src/app/components/chat/chat-message/chat-message.component.html
@@ -4,7 +4,7 @@
   }
 
   <div class="chat-message">
-    @for (msg of message.content; track msg) {
+    @for (msg of message.content; track $index) {
       @if (msg.type === 'text') {
         <span markdown [data]="msg | annotation"></span>
       }
diff --git a/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html b/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html
index 950882a..b97dd08 100644
--- a/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html
+++ b/apps/spa/src/app/components/chat/chat-messages/chat-messages.component.html
@@ -1,5 +1,5 @@
 <div class="messages">
-  @for (message of initialMessages.concat(messages); track message) {
+  @for (message of initialMessages.concat(messages); track message.id) {
     <span #item>
       <ai-chat-message [message]="message"></ai-chat-message>
     </span>
diff --git a/apps/spa/src/app/components/chat/chat-tips/chat-tips.component.html b/apps/spa/src/app/components/chat/chat-tips/chat-tips.component.html
index da32b73..c156832 100644
--- a/apps/spa/src/app/components/chat/chat-tips/chat-tips.component.html
+++ b/apps/spa/src/app/components/chat/chat-tips/chat-tips.component.html
@@ -1,5 +1,5 @@
-@for (tip of tips; track tip) {
-<ai-chat-tip (click)="tipSelected$.emit(tip)">
-  {{ tip }}
-</ai-chat-tip>
+@for (tip of tips; track $index) {
+  <ai-chat-tip (click)="tipSelected$.emit(tip)">
+    {{ tip }}
+  </ai-chat-tip>
 }
diff --git a/apps/spa/src/app/components/controls/files/files.service.ts b/apps/spa/src/app/components/controls/files/files.service.ts
index e6a3552..6688115 100644
--- a/apps/spa/src/app/components/controls/files/files.service.ts
+++ b/apps/spa/src/app/components/controls/files/files.service.ts
@@ -6,9 +6,12 @@ export class FilesService {
   files$ = new BehaviorSubject<File[]>([]);
 
   add(files: FileList) {
+    const convertedFiles = Object.keys(files).map(
+      key => files[key as unknown as number],
+    );
     const updatedFiles = [
       ...this.files$.value,
-      ...Object.keys(files).map(key => files[key as unknown as number]),
+      ...convertedFiles,
     ];
 
     this.files$.next(updatedFiles);
diff --git a/apps/spa/src/app/components/controls/message-content/message-content.service.ts b/apps/spa/src/app/components/controls/message-content/message-content.service.ts
index f943545..9d5a8f6 100644
--- a/apps/spa/src/app/components/controls/message-content/message-content.service.ts
+++ b/apps/spa/src/app/components/controls/message-content/message-content.service.ts
@@ -10,10 +10,10 @@ export class MessageContentService {
   constructor(private readonly chatClientService: ChatClientService) {}
 
   add(files: FileList) {
-    const updatedFiles = [
-      ...this.data$.value,
-      ...Object.keys(files).map(key => files[key as unknown as number]),
-    ];
+    const convertedFiles = Object.keys(files).map(
+      key => files[key as unknown as number],
+    );
+    const updatedFiles = [...this.data$.value, ...convertedFiles];
     this.data$.next(updatedFiles);
   }