diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
index 1aba0a390..50d088c26 100644
--- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html
@@ -148,7 +148,7 @@
 		<div class="main-content">
 			<div class="container-fluid">
 				<div class="row flex-column-reverse flex-xl-row">
-					<div class="col-12 col-xl-9">
+					<div class="col-12 col-xl">
 						<div class="row">
 							<div class="col-auto card" [style.display]="isIntroCardVisible ? 'block' : 'none'">
 								<a class="col-auto d-flex" (click)="dismissIntroCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
@@ -179,49 +179,49 @@
 							</mat-tab-group>
 						</div> -->
 					</div>
-					<div class="col-12 col-xl-3 mb-4 stats">
-						<div *ngIf="!hasDmps()" class="row">
+					<div class="col-12 col-xl-auto mb-4 stats">
+						<div *ngIf="!hasDmps()" class="row flex-xl-column">
 							<div class="col-12">
-								<div class="personal-usage" style="width: fit-content;"><span>{{'DASHBOARD.PUBLIC-USAGE' | translate}}</span></div>
+								<div class="personal-usage"><span>{{'DASHBOARD.PUBLIC-USAGE' | translate}}</span></div>
 							</div>
-							<div class="col-auto col-xl-12">
+							<div class="col-auto">
 								<div class="counter-zero"><span>0</span></div>
-								<a>{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
+								<a class="link">{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
 							</div>
-							<div class="col-auto col-xl-12">
+							<div class="col-auto">
 								<div class="counter-zero"><span>0</span></div>
-								<a>{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
+								<a class="link">{{'DASHBOARD.PUBLIC-DESCRIPTIONS' | translate}}</a>
 							</div>
-							<div class="col-auto col-xl-12">
+							<div class="col-auto">
 								<div class="counter-zero"><span>0</span></div>
 								<a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
 							</div>
-							<div class="col-auto col-xl-12">
+							<div class="col-auto">
 								<div class="counter-zero"><span>0</span></div>
 								<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
 							</div>
 						</div>
 
-						<div *ngIf="hasDmps()" class="row">
+						<div *ngIf="hasDmps()" class="row flex-xl-column">
 							<div class="col-12">
-								<div class="personal-usage" style="width: fit-content;"><span>{{'DASHBOARD.PUBLIC-USAGE' | translate}}</span></div>
+								<div class="personal-usage" ><span>{{'DASHBOARD.PUBLIC-USAGE' | translate}}</span></div>
 							</div>
-							<div class="col-auto col-xl-12">
-								<div [ngClass]="{'counter': dashboardStatistics?.dmpCount != 0, 'counter-zero': dashboardStatistics?.dmpCount == 0}"><span>{{dashboardStatistics?.dmpCount}}</span></div>
+							<div class="col-auto">
+								<div [ngClass]="{'counter': dashboardStatistics?.dmpCount != 0, 'counter-zero': dashboardStatistics?.dmpCount == 0}" ><span>{{dashboardStatistics?.dmpCount}}</span></div>
 								<a [routerLink]="['/explore-plans']" class="link">{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
 							</div>
 
-							<div class="col-auto col-xl-12">
+							<div class="col-auto">
 								<div [ngClass]="{'counter': dashboardStatistics?.descriptionCount != 0, 'counter-zero': dashboardStatistics?.descriptionCount == 0}"><span>{{dashboardStatistics?.descriptionCount}}</span></div>
 								<a [routerLink]="['/explore-descriptions']" class="link">{{'DASHBOARD.PUBLIC-DESCRIPTIONS' | translate}}</a>
 							</div>
 
-							<div class="col-auto col-xl-12">
-								<div [ngClass]="{'counter': grantCount != 0, 'counter-zero': grantCount == 0}"><span>{{grantCount}}</span></div>
+							<div class="col-auto">
+								<div [ngClass]="{'counter': grantCount != 0, 'counter-zero': grantCount == 0}" ><span>{{grantCount}}</span></div>
 								<a href="#" class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
 							</div>
 							
-							<div class="col-auto col-xl-12">
+							<div class="col-auto">
 								<div [ngClass]="{'counter': organizationCount != 0, 'counter-zero': organizationCount == 0}"><span>{{organizationCount}}</span></div>
 								<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
 							</div>