diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 4ee2f9252..c68b0caad 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -23,6 +23,12 @@
 	opacity: 1;
 }
 
+@media (max-width: 500px) {
+    .sidenav {
+        width: 100% !important;
+    }
+}
+
 .sidenav-content {
 	background-color: whitesmoke;
 }
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.html b/frontend/src/app/ui/dashboard/dashboard.component.html
index 8c332c4b9..d6057ade9 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.html
+++ b/frontend/src/app/ui/dashboard/dashboard.component.html
@@ -54,7 +54,7 @@
 										</div>
 									</div>
 									<span class="col-auto ml-auto">
-										<img class="laptop-img\6" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}" src="../../../assets/images/dashboard-popup.png">
+										<img class="laptop-img" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}" src="../../../assets/images/dashboard-popup.png">
 									</span>
 								</div>
 							</div>
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss
index db898c1dc..4b28f6550 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -121,7 +121,7 @@
 
 .plan-card,
 .description-card {
-	min-width: 712px;
+	min-width: min(100%, 712px);
 	background: #ffffff 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #0000001a;
 	border-radius: 4px;
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.ts b/frontend/src/app/ui/dashboard/dashboard.component.ts
index 3cba5ff49..099a8482c 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.ts
+++ b/frontend/src/app/ui/dashboard/dashboard.component.ts
@@ -112,7 +112,8 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 				disableClose: false,
 				data: {
 					isDialog: true
-				}
+				},
+                maxWidth: '600px'
 			});
 		}
 	}
@@ -140,7 +141,8 @@ export class DashboardComponent extends BaseComponent implements OnInit {
 			data: {
 				startNewPlan: false,
 				formGroup: formGroup
-			}
+			},
+            maxWidth: '600px'
 		});
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (result) {
diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
index 3faa82b3b..92caaa812 100644
--- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
+++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
@@ -21,7 +21,7 @@
 				<!-- End of Sort by -->
 				<!-- Search Filter-->
 				<div class="col-12 col-xl-auto ml-auto">
-					<mat-form-field appearance="outline" class="search-form pr-0" floatLabel="never">
+					<mat-form-field appearance="outline" class="search-form pr-0" floatLabel="never" style="max-width: 100%;">
 						<mat-icon matSuffix>search</mat-icon>
 						<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
 						<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
diff --git a/frontend/src/app/ui/description/editor/description-editor.component.html b/frontend/src/app/ui/description/editor/description-editor.component.html
index 3dd67d09e..1ce734102 100644
--- a/frontend/src/app/ui/description/editor/description-editor.component.html
+++ b/frontend/src/app/ui/description/editor/description-editor.component.html
@@ -6,7 +6,7 @@
 				<div class="card description-editor-header">
 					<div class="col-12">
 						<div class="row">
-							<div class="col info">
+							<div class="col info pb-2">
                                 @if(!viewOnly){
 									<div *ngIf="isNew" class="description-title">{{'DESCRIPTION-EDITOR.TITLE-ADD-DESCRIPTION' | translate}}</div>
 									<div *ngIf="!isNew" class="description-title">{{'DESCRIPTION-EDITOR.TITLE-EDIT-DESCRIPTION' | translate}}</div>
@@ -16,7 +16,7 @@
                                 }@else {
                                     <div class="description-title">{{'DESCRIPTION-EDITOR.TITLE-PREVIEW-DESCRIPTION' | translate}}</div>
                                 }
-								<div *ngIf="item?.plan?.id" class=" d-flex flex-direction-row plan-info">
+								<div *ngIf="item?.plan?.id" class=" d-flex flex-direction-row flex-wrap plan-info">
                                     <div class="col-auto description-to-plan">{{'DESCRIPTION-EDITOR.TO-PLAN' | translate}}</div>
                                     <div class="plan-title p-0">:&nbsp;{{ item?.plan?.label }}</div>
 									<div class="col-auto d-flex align-items-center">
diff --git a/frontend/src/app/ui/description/editor/description-editor.component.scss b/frontend/src/app/ui/description/editor/description-editor.component.scss
index b87ffc01e..71d388d94 100644
--- a/frontend/src/app/ui/description/editor/description-editor.component.scss
+++ b/frontend/src/app/ui/description/editor/description-editor.component.scss
@@ -93,7 +93,7 @@
 
   .description-editor-header {
     height: 113px;
-    background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
+    min-height: fit-content;
     background: var(--secondary-color) 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #00000029;
     padding: 0.6rem;
@@ -106,6 +106,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      min-width: min(100%, 13rem);
     }
   }
 
@@ -376,4 +377,13 @@ mat-icon.size-18 {
 
 ::ng-deep label {
   margin: 0;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 430px){
+    form{
+        margin-top: 9rem;
+    }
+    .description-editor-form {
+        height: fit-content;
+    }
+}
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.ts b/frontend/src/app/ui/description/listing/description-listing.component.ts
index 4547ba18a..6c483cbe2 100644
--- a/frontend/src/app/ui/description/listing/description-listing.component.ts
+++ b/frontend/src/app/ui/description/listing/description-listing.component.ts
@@ -329,7 +329,8 @@ export class DescriptionListingComponent extends BaseListingComponent<BaseDescri
 				disableClose: false,
 				data: {
 					isDialog: true
-				}
+				},
+                maxWidth: '600px'
 			});
 		}
 	}
@@ -345,7 +346,8 @@ export class DescriptionListingComponent extends BaseListingComponent<BaseDescri
 			data: {
 				startNewPlan: false,
 				formGroup: formGroup,
-			}
+			},
+            maxWidth: '600px'
 		});
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (result) {
diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html
index a778d0289..faff4d4d6 100644
--- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html
+++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html
@@ -1,6 +1,6 @@
 <div class="description-card">
 	<a [routerLink]="getItemLink()" class="pointer" [attr.aria-label]="'ALT-TEXT.OPEN-DESCRIPTION-OVERVIEW' | translate">
-		<div class="d-flex flex-direction-row">
+		<div class="d-flex flex-direction-row flex-wrap">
 			<div class="col-auto description-label">{{'DESCRIPTION-LISTING.DESCRIPTION' | translate}}</div>
 			<div class="col-auto ml-auto">
 				<div class="row align-items-center">
@@ -25,7 +25,7 @@
 			<span>.</span>
 			<span class="col">{{'DESCRIPTION-LISTING.GRANT' | translate}}: {{referenceService.getReferencesForTypesFirstSafe(description?.plan?.planReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}</span>
 		</div>
-		<div class="d-flex flex-direction-row pt-3 pb-3">
+		<div class="d-flex flex-direction-row flex-wrap pt-3 pb-3">
 			<div class="col-auto description-subtitle pr-0">{{'DESCRIPTION-LISTING.PART-OF' | translate}}
 				<div class="col-auto plan-label ml-3">{{'DESCRIPTION-LISTING.PLAN' | translate}}</div>
 			</div>
@@ -34,7 +34,7 @@
 	</a>
 	<div class="description-card-actions">
 		<div role="button" 
-            class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" 
+            class="col-auto description-action pointer d-flex align-items-center gap-quarter-rem" 
             *ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description) && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0" 
             [matMenuTriggerFor]="exportMenu"
         >
@@ -42,23 +42,26 @@
             {{'DESCRIPTION-LISTING.ACTIONS.EXPORT' | translate}}
         </div>
 		<div role="button" 
-            class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" 
+            class="col-auto description-action pointer d-flex align-items-center gap-quarter-rem" 
             *ngIf="canInvitePlanUsers" 
             (click)="openShareDialog()"
         >
-            <mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}}</div>
+            <mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}}
+        </div>
 		<div role="button" 
-            class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" 
+            class="col-auto description-action pointer d-flex align-items-center gap-quarter-rem" 
             *ngIf="isAuthenticated()" 
             (click)="copyToPlan(description)"
         >
-            <mat-icon class="material-icons icon-align pr-2" aria-hidden>file_copy</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}}</div>
+            <mat-icon class="material-icons icon-align pr-2" aria-hidden>file_copy</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}}
+        </div>
 		<div role="button" 
-            class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" 
+            class="col-auto pointer d-flex align-items-center gap-quarter-rem" 
             *ngIf="canDelete" 
             (click)="deleteClicked(description.id)"
         >
-            <mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }}</div>
+            <mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }}
+        </div>
 	</div>
 	<mat-menu #actionsMenu="matMenu">
 		<button *ngIf="isAuthenticated()" mat-menu-item (click)="copyToPlan(description)" class="menu-item">
diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
index 4d3c71e15..39a4a692c 100644
--- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
+++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
@@ -39,7 +39,7 @@ p {
 
 .plan-card,
 .description-card {
-	min-width: 712px;
+	min-width: min(100%, 712px);
 	background: #ffffff 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #0000001a;
 	border-radius: 4px;
@@ -107,6 +107,7 @@ input[type="text"] {
 .description-subtitle {
 	display: flex;
 	flex-direction: row;
+    flex-wrap: wrap;
 	text-align: left;
 	font-weight: 400;
 	font-size: 0.875rem;
@@ -142,11 +143,23 @@ input[type="text"] {
 
 .description-card-actions,
 .plan-card-actions {
+    container-name: description-card-actions;
+    container-type: inline-size;
 	display: flex;
 	flex-direction: row;
+    flex-wrap: wrap;
 	border-top: 1px solid #dbdbdb;
 	line-height: 4;
 	color: var(--gray);
+    .description-action {
+        border-right: 1px solid #dee2e6;
+    }
+}
+
+@container description-card-actions (inline-size < 30rem){
+    .description-action{
+        border-right: none !important;
+    }
 }
 
 .description-card-actions div,
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.html b/frontend/src/app/ui/description/overview/description-overview.component.html
index c98d6308b..22d6d5a11 100644
--- a/frontend/src/app/ui/description/overview/description-overview.component.html
+++ b/frontend/src/app/ui/description/overview/description-overview.component.html
@@ -1,4 +1,4 @@
-<div class="main-content pl-5 pr-5">
+<div class="main-content description-overview">
 	<div class="container-fluid pl-0 pr-0">
 		<div *ngIf="description">
 			<div class="row">
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.scss b/frontend/src/app/ui/description/overview/description-overview.component.scss
index 33fa40dd8..fa9c157a3 100644
--- a/frontend/src/app/ui/description/overview/description-overview.component.scss
+++ b/frontend/src/app/ui/description/overview/description-overview.component.scss
@@ -274,5 +274,15 @@
   justify-content: center;
 }
 .deleted-item {
-    color: #cf1407;
+    color: var(--warning-color);
+}
+
+.description-overview {
+    padding: 0 3rem;
+}
+
+@media (max-width: 500px) {
+    .description-overview{
+        padding: 0;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
index 4b42933ac..5fdd12bde 100644
--- a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
+++ b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
@@ -3,7 +3,7 @@
 }
 
 .form-container {
-	width: 33rem;
+	width: min(100%, 33rem);
 	min-height: 14rem;
 	padding: 2.0rem;
 }
diff --git a/frontend/src/app/ui/navbar/navbar.component.scss b/frontend/src/app/ui/navbar/navbar.component.scss
index c1fcc53df..1a6edb8a0 100644
--- a/frontend/src/app/ui/navbar/navbar.component.scss
+++ b/frontend/src/app/ui/navbar/navbar.component.scss
@@ -37,6 +37,7 @@ $mat-card-header-size: 40px !default;
   position: fixed;
   z-index: 1000;
   height: 80px;
+  min-height: fit-content; //for mobile
 
   display: flex;
   background: #ffffff 0% 0% no-repeat padding-box;
@@ -187,4 +188,8 @@ $mat-card-header-size: 40px !default;
   .mat-mdc-menu-content {
     padding: 0 !important;
   }
+}
+
+.container-fluid {
+    min-height: fit-content;
 }
\ No newline at end of file
diff --git a/frontend/src/app/ui/navbar/navbar.component.ts b/frontend/src/app/ui/navbar/navbar.component.ts
index 5abd6b5f7..7b5b8ee09 100644
--- a/frontend/src/app/ui/navbar/navbar.component.ts
+++ b/frontend/src/app/ui/navbar/navbar.component.ts
@@ -300,7 +300,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 				disableClose: false,
 				data: {
 					isDialog: true
-				}
+				},
+                maxWidth: '600px'
 			});
 		}
 	}
diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html
index 784b0f6ee..84116322e 100644
--- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html
+++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html
@@ -1,6 +1,6 @@
 <div class="plan-card">
 	<a [routerLink]="isPublic ? this.routerUtils.generateUrl(['/explore-plans/overview/public/', plan.id]) : this.routerUtils.generateUrl(['/plans/overview/', plan.id])" class="pointer" [attr.aria-label]="'ALT-TEXT.OPEN-PLAN-OVERVIEW' | translate">
-		<div class="d-flex flex-direction-row">
+		<div class="d-flex flex-direction-row flex-wrap">
 			<div class="col-auto plan-label">{{ 'PLAN-LISTING.PLAN' | translate }}</div>
 			<div class="col-auto ml-auto">
 				<div class="row align-items-center">
@@ -41,26 +41,26 @@
 		<a class="d-flex justify-content-center pb-3 show-more" *ngIf="plan.descriptions?.length > 3" [routerLink]="isPublic ? this.routerUtils.generateUrl(['/explore-plans/overview/public/', plan.id]) : this.routerUtils.generateUrl(['/plans/overview/', plan.id])"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
 	</a>
 	<div class="plan-card-actions">
-		<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canExportPlan && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0" [matMenuTriggerFor]="exportMenu">
+		<div role="button" class="col-auto plan-action pointer d-flex align-items-center gap-quarter-rem" *ngIf="canExportPlan && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0" [matMenuTriggerFor]="exportMenu">
             <mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>{{'PLAN-LISTING.ACTIONS.EXPORT' | translate}}
         </div>
-		<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canEditPlan" [routerLink]="this.routerUtils.generateUrl(['/plans/edit/', plan.id])" target="_blank">
+		<div role="button" class="col-auto plan-action pointer d-flex align-items-center gap-quarter-rem" *ngIf="canEditPlan" [routerLink]="this.routerUtils.generateUrl(['/plans/edit/', plan.id])" target="_blank">
             <mat-icon class="material-icons icon-align">add</mat-icon>{{'PLAN-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}}
         </div>
-		<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canInvitePlanUsers" (click)="inviteToPlan()">
+		<div role="button" class="col-auto plan-action pointer d-flex align-items-center gap-quarter-rem" *ngIf="canInvitePlanUsers" (click)="inviteToPlan()">
             <mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'PLAN-LISTING.ACTIONS.INVITE-SHORT' | translate}}
         </div>
-		<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canClonePlan" (click)="cloneClicked()">
+		<div role="button" class="col-auto plan-action pointer d-flex align-items-center gap-quarter-rem" *ngIf="canClonePlan" (click)="cloneClicked()">
             <mat-icon class="material-icons icon-align pr-2" aria-hidden>filter_none</mat-icon>{{'PLAN-LISTING.ACTIONS.CLONE' | translate}}
         </div>
-		<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="!isAuthenticated() && showAllVersionsAction" (click)="viewVersions(plan)">
+		<div role="button" class="col-auto plan-action pointer d-flex align-items-center gap-quarter-rem" *ngIf="!isAuthenticated() && showAllVersionsAction" (click)="viewVersions(plan)">
             <mat-icon class="material-icons icon-align pr-2" aria-hidden>library_books</mat-icon>{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}}
         </div>
 
-		<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canDeletePlan" (click)="deleteClicked(plan.id)">
+		<div role="button" class="col-auto plan-action pointer d-flex align-items-center gap-quarter-rem" *ngIf="canDeletePlan" (click)="deleteClicked(plan.id)">
             <mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }}
         </div>
-		<div role="button" class="col-auto pointer" *ngIf="showActionsMenu" [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
+		<div role="button" class="col-auto pointer d-flex align-items-center" *ngIf="showActionsMenu" [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
             <mat-icon>more_horiz</mat-icon>
         </div>
 	</div>
diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
index 96d01a943..6445f2739 100644
--- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
+++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
@@ -83,7 +83,7 @@ p {
 
 .plan-card,
 .description-card {
-	min-width: 712px;
+	min-width: min(100%, 712px);
 	background: #ffffff 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #0000001a;
 	border-radius: 4px;
@@ -140,6 +140,7 @@ input[type="text"] {
 .plan-subtitle {
 	display: flex;
 	flex-direction: row;
+    flex-wrap: wrap;
 	text-align: left;
 	font-weight: 400;
 	font-size: 0.875rem;
@@ -176,11 +177,24 @@ input[type="text"] {
 
 .description-card-actions,
 .plan-card-actions {
+    container-name: plan-card-actions;
+    container-type: inline-size;
 	display: flex;
+    flex-wrap: wrap;
 	flex-direction: row;
 	border-top: 1px solid #dbdbdb;
 	line-height: 4;
 	color: var(--gray);
+
+    .plan-action {
+        border-right: 1px solid #dee2e6;
+    }
+}
+
+@container plan-card-actions (inline-size < 35rem){
+    .plan-action {
+        border-right: none !important;
+    }
 }
 
 .description-card-actions div,
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
index 46e1dd79a..0f3c99e54 100644
--- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
+++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
@@ -14,25 +14,21 @@
 			<p class="text">{{'START-NEW-PLAN-DIALOG.MESSAGE' | translate}}</p>
 		</div>
 		<div class="col-12">
-			<div class="d-flex justify-content-between align-items-center">
-				<div class="import-file col-auto p-0">
-					<div class="pr-2">
-						<button mat-button type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
-							<mat-icon class="pr-2">file_upload</mat-icon>
-							{{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
-						</button>
-					</div>
+			<div class="d-flex flex-wrap gap-half-rem justify-content-between align-items-center">
+				<div class="import-file">
+                    <button mat-button type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
+                        <mat-icon class="pr-2">file_upload</mat-icon>
+                        {{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
+                    </button>
 				</div>
-				<div class="col-auto">
-					<p class="m-0">{{ 'START-NEW-PLAN-DIALOG.OR' | translate }}</p>
+				<div class="pt-1 pb-1">
+					{{ 'START-NEW-PLAN-DIALOG.OR' | translate }}
 				</div>
-				<div class="start-wizard col-auto p-0">
-					<div class="pr-2">
-						<button mat-button class="rounded-btn primary font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
-							<mat-icon>chevron_right</mat-icon>
-							{{ 'START-NEW-PLAN-DIALOG.START-NEW-PLAN' | translate }}
-						</button>
-					</div>
+				<div class="start-wizard">
+                    <button mat-button class="rounded-btn primary font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
+                        <mat-icon>chevron_right</mat-icon>
+                        {{ 'START-NEW-PLAN-DIALOG.START-NEW-PLAN' | translate }}
+                    </button>
 				</div>
 			</div>
 		</div>
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
index c01e124ec..21bb812c0 100644
--- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
+++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
@@ -4,14 +4,14 @@
 }
 
 .start-new-plan-dialog-wrapper {
-	width: 33.0rem;
+	width: min(100%, 33rem);
 	min-height: 14rem;
 	padding: 0.28rem 0.34rem 0.875rem 0.625rem;
 }
 
 .form-container {
-	width: 33rem;
-	min-height: 14rem;
+	width: min(100%, 33rem);
+	min-height: min(100%, 14rem);
 	padding: 0.28rem 0.34rem 0.875rem 0.625rem;
 }
 
@@ -50,7 +50,7 @@
 }
 
 .actions {
-	width: 26.667rem;
+	width: min(100%, 26.667rem);
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts
index 2954e0d57..2a8dcebe9 100644
--- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts
+++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts
@@ -64,7 +64,7 @@ export class StartNewPlanDialogComponent extends BaseComponent {
 
 	uploadFile(event) {
 		const dialogRef = this.dialog.open(PlanUploadDialogComponent, {
-			width: '528px',
+			maxWidth: '528px',
 			data: {
 				fileList: FileList,
 				success: Boolean,
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.html b/frontend/src/app/ui/plan/overview/plan-overview.component.html
index c81fada05..4a95d432b 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.html
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.html
@@ -1,4 +1,4 @@
-<div class="main-content plan-overview pl-5 pr-5">
+<div class="main-content plan-overview">
 	<div class="container-fluid pl-0 pr-0">
 		<div *ngIf="plan">
 			<div class="row">
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.scss b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
index 3377e4a48..89f209133 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
@@ -301,5 +301,15 @@
 }
 
 .deleted-item {
-    color: #cf1407;
+    color: var(--warning-color);
+}
+
+.plan-overview {
+    padding: 0 3rem;
+}
+
+@media (max-width: 500px) {
+    .plan-overview{
+        padding: 0;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
index 1959fe5de..43440c71a 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
@@ -9,7 +9,7 @@
 								<div class="title">{{(canEdit ? 'PLAN-EDITOR.TITLE-EDIT' : 'PLAN-EDITOR.TITLE-PREVIEW') | translate}}</div>
 								<div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'PLAN-EDITOR.UNSAVED-CHANGES' | translate}})</span></div>
 							</div>
-							<div *ngIf="step > 0" class="ml-auto d-flex flex-row">
+							<div *ngIf="step > 0" class="ml-auto d-flex flex-row flex-wrap">
 
 								<div *ngIf="formGroup.get('id').value" class="col-auto d-flex align-items-center">
 									<button [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-button class="rounded-btn primary-inverted" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'PLAN-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
index ccfb2915e..e100ac057 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
@@ -20,7 +20,7 @@
 
 .editor-header {
     height: 64px;
-    background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
+    min-height: fit-content;
     background: var(--primary-color) 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #00000029;
     padding: 0.6rem;
@@ -364,3 +364,11 @@ a:hover {
 	color: rgba(0, 0, 0, 0.38);;
 }
 
+@media screen and (max-width: 430px){
+    .form-container{
+        margin-top: 9rem;
+    }
+    .form {
+        height: fit-content !important;
+    }
+}
diff --git a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss
index a47f72664..88afe080a 100644
--- a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss
+++ b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss
@@ -13,3 +13,9 @@
 	cursor: auto; 
 	color: rgba(0, 0, 0, 0.38);;
 }
+
+@media (max-width: 400px){
+    ::ng-deep .mat-button-toggle-group{
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.html b/frontend/src/app/ui/user-profile/user-profile.component.html
index 6e15d3c79..1305113ae 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.html
+++ b/frontend/src/app/ui/user-profile/user-profile.component.html
@@ -6,7 +6,7 @@
 					{{'USER-DIALOG.USER-PROFILE' | translate}}
 				</div>
 
-				<div *ngIf="tenantFormGroup" class="col-auto mr-5">
+				<div *ngIf="tenantFormGroup" class="col-auto tenant-selection">
 					<div class="row">
 						<div class="col">
 							<mat-form-field class="w-100">
@@ -18,8 +18,8 @@
 								</mat-select>
 							</mat-form-field>
 						</div>
-						<div class="col-12 col-lg-auto mt-1">
-							<button mat-mini-fab (click)="switchTenant()">
+						<div class="col mt-1">
+							<button mat-mini-fab (click)="switchTenant()" [matTooltip]="'USER-PROFILE.ACTIONS.REFRESH-TENANT' | translate" [attr.aria-label]="'USER-PROFILE.ACTIONS.REFRESH-TENANT' | translate">
 								<mat-icon class="mat-mini-fab-icon">refresh</mat-icon>
 							</button>
 						</div>
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.scss b/frontend/src/app/ui/user-profile/user-profile.component.scss
index 20ccf925e..408d44a16 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.scss
+++ b/frontend/src/app/ui/user-profile/user-profile.component.scss
@@ -207,6 +207,10 @@
 	}
 }
 
+.tenant-selection {
+    margin-right: 3rem;
+}
+
 ::ng-deep .name-form .mat-form-field-appearance-outline .mat-form-field-outline {
 	background: #fafafa !important;
 }
@@ -260,3 +264,17 @@
 	font-size: 1rem;
 	padding: 0.6em 0 1em 0 !important;
 }
+
+@media screen and (max-width: 430px){
+    .user-profile-title {
+        padding-left: 0 !important;
+    }
+    .profile-content {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    
+    .tenant-selection{
+        margin-right: 0 !important;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/assets/i18n/baq.json b/frontend/src/assets/i18n/baq.json
index 9ea852331..f3008be3c 100644
--- a/frontend/src/assets/i18n/baq.json
+++ b/frontend/src/assets/i18n/baq.json
@@ -2506,7 +2506,8 @@
 			"UNLINK-ACCOUNT": "Deslotu",
 			"UNLINK-ACCOUNT-DISABLED": "Ezin duzu e-maila zure kontu nagusitik bereizi",
 			"ADD": "Gehitu",
-			"CANCEL": "Ezeztatu"
+			"CANCEL": "Ezeztatu",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json
index c383effd6..c74dae397 100644
--- a/frontend/src/assets/i18n/de.json
+++ b/frontend/src/assets/i18n/de.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Add",
-			"CANCEL": "Cancel"
+			"CANCEL": "Cancel",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index a0bc190e3..2e6f3feb0 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Add",
-			"CANCEL": "Cancel"
+			"CANCEL": "Cancel",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/es.json b/frontend/src/assets/i18n/es.json
index 6a9823cf4..96cea1064 100644
--- a/frontend/src/assets/i18n/es.json
+++ b/frontend/src/assets/i18n/es.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Añadir",
-			"CANCEL": "Cancelar"
+			"CANCEL": "Cancelar",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/gr.json b/frontend/src/assets/i18n/gr.json
index fdcc87f4e..4b752d612 100644
--- a/frontend/src/assets/i18n/gr.json
+++ b/frontend/src/assets/i18n/gr.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Add",
-			"CANCEL": "Cancel"
+			"CANCEL": "Cancel",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/hr.json b/frontend/src/assets/i18n/hr.json
index d92cda4e9..b126f908e 100644
--- a/frontend/src/assets/i18n/hr.json
+++ b/frontend/src/assets/i18n/hr.json
@@ -2508,7 +2508,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Unesi",
-			"CANCEL": "Poništi"
+			"CANCEL": "Poništi",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/pl.json b/frontend/src/assets/i18n/pl.json
index c221f1e22..7bb60d205 100644
--- a/frontend/src/assets/i18n/pl.json
+++ b/frontend/src/assets/i18n/pl.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Dodaj",
-			"CANCEL": "Anuluj"
+			"CANCEL": "Anuluj",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/pt.json b/frontend/src/assets/i18n/pt.json
index 4a22b4335..7d6ca22b3 100644
--- a/frontend/src/assets/i18n/pt.json
+++ b/frontend/src/assets/i18n/pt.json
@@ -2508,7 +2508,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Adicionar",
-			"CANCEL": "Cancelar"
+			"CANCEL": "Cancelar",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/sk.json b/frontend/src/assets/i18n/sk.json
index df9d0b494..5438d215c 100644
--- a/frontend/src/assets/i18n/sk.json
+++ b/frontend/src/assets/i18n/sk.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Add",
-			"CANCEL": "Cancel"
+			"CANCEL": "Cancel",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/sr.json b/frontend/src/assets/i18n/sr.json
index 56234507f..1ba52a041 100644
--- a/frontend/src/assets/i18n/sr.json
+++ b/frontend/src/assets/i18n/sr.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Add",
-			"CANCEL": "Cancel"
+			"CANCEL": "Cancel",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/assets/i18n/tr.json b/frontend/src/assets/i18n/tr.json
index 2dccc3305..1ebc5466d 100644
--- a/frontend/src/assets/i18n/tr.json
+++ b/frontend/src/assets/i18n/tr.json
@@ -2509,7 +2509,8 @@
 			"UNLINK-ACCOUNT": "Unlink",
 			"UNLINK-ACCOUNT-DISABLED": "You can't unlink your main profile's email",
 			"ADD": "Ekle",
-			"CANCEL": "İptal"
+			"CANCEL": "İptal",
+            "REFRESH-TENANT": "Refresh tenant"
 		}
 	},
 	"PLAN-FINALISE-DIALOG": {
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 80fb338de..66d4168f1 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -223,7 +223,7 @@ a {
 }
 
 .snackbar-error {
-	background-color: #cf1407;
+	background-color:var(--warning-color);
 	color: #111010;
 }
 
@@ -705,6 +705,9 @@ ul.unstyled-list {
     border: none;
 }
 
+.laptop-img {
+    max-width: 100%;
+}
 
 
 // .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {