diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
index dc6c4d8af..3137400d4 100644
--- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
+++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
@@ -1,48 +1,46 @@
 <div class="container form-container">
-	<div class="row d-flex justify-content-between align-items-center m-0">
-		<!-- <div class="col-auto"><a class="logo"><img class="logo" src="../../../assets/images/new-dmp-logo.png" onerror="this.style.display='none'"></a></div> -->
-		<div class="col-auto ml-auto close-btn" (click)="close()">
+	<div class="row d-flex justify-content-between align-items-center">
+		<div class="col-auto ml-auto" (click)="close()">
 			<mat-icon class="close-icon">close</mat-icon>
 		</div>
 	</div>
-	<div class="annotation-viewer row">
+	<div class="row">
 		<!-- Create New Thread -->
-		<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> -->
 		<div class="col-12">
-			<form class="row p-2 mt-2 mb-3 ml-0 pr-3 mr-0 new-thread" [formGroup]="threadFormGroup">
-				<div class="col-12 col-md mb-2">
-					<mat-form-field appearance="outline" class="w-100">
-						<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
-						<input matInput formControlName="text" required>
-						<mat-icon matSuffix class="material-symbols-outlined">
-							add_reaction
-						</mat-icon>
-						<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error>
-						<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
-				</div>
-
-				<div class="col-12 col-md-auto pl-md-0 pr-md-0">
-					<mat-form-field class="w-100 protection-input">
-						<mat-label>{{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}}</mat-label>
-						<mat-select name="thread-protectionType" formControlName="protectionType" required>
-							<mat-option *ngFor="let enumValue of annotationProtectionTypeEnumValues" [value]="enumValue">{{enumUtils.toAnnotationProtectionTypeString(enumValue)}}</mat-option>
-						</mat-select>
-						<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('backendError')">{{threadFormGroup.get('protectionType').getError('backendError')?.message}}</mat-error>
-						<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
-				</div>
-
-				<div class="col-12 send-msg mt-1">
-					<div class="row">
-						<div class="col-auto pr-1">
-							<button type="button" class="normal-btn-sm" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
-						</div>
-						<div class="col-auto pl-1">
-							<button type="button" class="normal-btn-light-sm" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
+			<form [formGroup]="threadFormGroup">
+				<div class="row mt-2 mb-3">
+					<div class="col-12 col-md mb-2">
+						<mat-form-field appearance="outline" class="w-100">
+							<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
+							<input matInput formControlName="text" required>
+							<!-- <mat-icon matSuffix class="material-symbols-outlined">
+								add_reaction
+							</mat-icon> -->
+							<mat-error *ngIf="threadFormGroup.get('text').hasError('backendError')">{{threadFormGroup.get('text').getError('backendError')?.message}}</mat-error>
+							<mat-error *ngIf="threadFormGroup.get('text').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
+						</mat-form-field>
+					</div>
+					<div class="col-12 col-md-auto">
+						<mat-form-field class="w-100 protection-input">
+							<mat-label>{{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}}</mat-label>
+							<mat-select name="thread-protectionType" formControlName="protectionType" required>
+								<mat-option *ngFor="let enumValue of annotationProtectionTypeEnumValues" [value]="enumValue">{{enumUtils.toAnnotationProtectionTypeString(enumValue)}}</mat-option>
+							</mat-select>
+							<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('backendError')">{{threadFormGroup.get('protectionType').getError('backendError')?.message}}</mat-error>
+							<mat-error *ngIf="threadFormGroup.get('protectionType').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
+						</mat-form-field>
+					</div>
+					<div class="col-12 send-msg mt-1">
+						<div class="row">
+							<div class="col-auto pr-1">
+								<button type="button" class="normal-btn-sm" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
+							</div>
+							<div class="col-auto pl-1">
+								<button type="button" class="normal-btn-light-sm" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
+							</div>
 						</div>
 					</div>
-				</div>
+				</div>	
 			</form>
 		</div>
 		<div class="col-12 pt-2 gr-color" *ngIf="threads?.size > 0">
@@ -55,9 +53,9 @@
 		</div>
 		<div class="col-12">
 			<ng-container *ngFor="let thread of threads">
-				<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
+				<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private">
 					<div class="col-auto ml-auto">
-						<div class="d-flex align-items-center">
+						<div class="d-flex align-items-center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
 								<img src="/assets/images/annotations/eye-hide.png">
 								<div class="ml-1 mt-1">
 									{{getAnnotationProtectionType(thread)}}
@@ -65,9 +63,9 @@
 						</div>
 					</div>
 				</div>
-				<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
+				<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors">
 					<div class="col-auto ml-auto">
-						<div class="d-flex aling-items center">
+						<div class="d-flex aling-items center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
 							<img src="/assets/images/annotations/globe.png" alt="globe">
 							<!-- <i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i> -->
 							<span class="ml-1">
@@ -76,43 +74,99 @@
 						</div>
 					</div>
 				</div>	
-				<div class="row pt-1 pb-1 mt-1 comment-wrapper">
+				<div class="row mt-2 mb-2">
 					<!-- Parent Thread -->
 					<div class="col-12">
-						<div class="row m-0 h-100">
-							<div class="col pt-1">
-								<div class="row">
-									<div class="col-12">
-										<div class="row h-100">
-											<div class="col-auto p-0">
-												<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
-											</div>
-											<div class="col">
-												<div class="row">
-													<span class="col user">{{getParentAnnotation(thread).author.name}}</span>
-													<div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | date: "d MMMM, y 'at' h:mm a"}}</div>
+						<div class="container">
+							<div class="row comment-wrapper pt-1 pb-2 h-100">
+								<div class="col-12 pt-1">
+									<div class="row">
+										<div class="col-12">
+											<div class="row h-100">
+												<div class="col-auto pr-0">
+													<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
 												</div>
-												<div class="row pt-1">
-													<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
-												</div>
-												<div class="row"> <!--pb-2-->
-													<div class="col-12">
-														<button mat-button (click)="enableReply(thread)" class="action-button" [ngClass]="this.replyEnabledPerThread[thread] ? 'active-action' : ''" [disabled]="this.replyEnabledPerThread[thread]">{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</button>
+												<div class="col">
+													<div class="row">
+														<span class="col user">{{getParentAnnotation(thread).author.name}}</span>
+														<div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | date: "d MMMM, y 'at' h:mm a"}}</div>
 													</div>
-												</div>
-												<div class="row">
-													<div class="col-12">
-														<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
-															<button mat-button (click)="showReplies(thread)">
-																<img src="/assets/images/annotations/reply.png" alt="reply"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} 
-															</button>
-														</ng-container>
-														<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
-															<button mat-button (click)="showReplies(thread)">
-																<img src="/assets/images/annotations/reply.png" alt="reply"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}} 
-															</button>
-														</ng-container>
+													<div class="row pt-1">
+														<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
 													</div>
+													<div class="row"> <!--pb-2-->
+														<div class="col-12">
+															<button mat-button (click)="enableReply(thread)" class="action-button" [ngClass]="this.replyEnabledPerThread[thread] ? 'active-action' : ''" [disabled]="this.replyEnabledPerThread[thread]">{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</button>
+														</div>
+													</div>
+													<div class="row">
+														<div class="col-12">
+															<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
+																<button mat-button (click)="showReplies(thread)">
+																	<img src="/assets/images/annotations/reply.png" alt="reply"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} 
+																</button>
+															</ng-container>
+															<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
+																<button mat-button (click)="showReplies(thread)">
+																	<img src="/assets/images/annotations/reply.png" alt="reply"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}} 
+																</button>
+															</ng-container>
+														</div>
+													</div>
+
+													<!-- Previous Replies -->
+													<div *ngIf="this.showRepliesPerThread[thread]" class="row">
+														<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12">
+															<div  class="row m-0 h-100">
+																<div class="col-auto pr-0 pl-0">
+																	<div class="side-color"></div>
+																</div>
+																<div class="col pt-1">
+																	<div class="row">
+																		<div class="col-12">
+																			<div class="row h-100">
+																				<div class="col-auto p-0">
+																					<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
+																				</div>
+																				<div class="col">
+																					<div class="row">
+																						<span class="col user">{{annotation.author.name}}</span>
+																						<div class="col-auto annotation-time">{{annotation.timeStamp |  date:"d MMMM, y 'at' h:mm a"}}</div>
+																						<!-- <div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
+																					</div>
+
+																					<div class="row pt-1 pb-1">
+																						<div class="col-12 annotation-full-text">{{annotation.payload}}</div>
+																					</div>
+																				</div>
+																			</div>
+																		</div>
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
+													<!-- Type reply in thread -->
+														<div *ngIf="this.replyEnabledPerThread[thread]" class="row">
+															<div class="col-12 mt-2">
+																<div class="row new-reply mr-0">
+																	<div class="col">
+																		<mat-form-field appearance="outline" class="w-100">
+																			<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
+																			<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
+																			<!-- <mat-icon matSuffix class="material-symbols-outlined">
+																				add_reaction
+																			</mat-icon> -->
+																		</mat-form-field>
+																	</div>			
+																	<div class="col-auto p-0 send-msg">
+																		<button class="form-field-margin" mat-icon-button color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
+																			<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
+																		</button>
+																	</div>
+																</div>
+															</div>
+														</div>
 												</div>
 											</div>
 										</div>
@@ -121,60 +175,6 @@
 							</div>
 						</div>
 					</div>
-
-					<!-- Previous Replies -->
-					<ng-container *ngIf="this.showRepliesPerThread[thread]">
-						<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12">
-							<div  class="row m-0 h-100">
-								<div class="col-auto pr-0 pl-0">
-									<div class="side-color"></div>
-								</div>
-								<div class="col pt-1">
-									<div class="row">
-										<div class="col-12">
-											<div class="row h-100">
-												<div class="col-auto p-0">
-													<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
-												</div>
-												<div class="col">
-													<div class="row">
-														<span class="col user">{{annotation.author.name}}</span>
-														<div class="col-auto annotation-time">{{annotation.timeStamp |  date:"d MMMM, y 'at' h:mm a"}}</div>
-														<!-- <div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
-													</div>
-
-													<div class="row pt-1 pb-1">
-														<div class="col-12 annotation-full-text">{{annotation.payload}}</div>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</ng-container>
-				</div>
-				<div class="row mb-2">
-					<!-- Type reply in thread -->
-					<ng-container *ngIf="this.replyEnabledPerThread[thread]">
-						<div class="col-12 mt-2">
-							<div class="row new-reply mr-0">
-								<mat-form-field appearance="outline" class="col pl-0">
-									<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
-									<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
-									<mat-icon matSuffix class="material-symbols-outlined">
-										add_reaction
-									</mat-icon>
-								</mat-form-field>
-								<div class="col-auto p-0 send-msg">
-									<button class="form-field-margin" mat-icon-button color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
-										<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
-									</button>
-								</div>
-							</div>
-						</div>
-					</ng-container>
 				</div>
 			</ng-container>
 		</div>