diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index 0c66427..09b2455 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -43,80 +43,107 @@
 			const url = window.URL.createObjectURL(new Blob([portfolioBlob]));
 			const link = document.createElement('a');
 			link.href = url;
-			link.setAttribute('download', 'PORTFOLIO' + '_' + $candidateData.candidate.name + '_' + $candidateData.candidate.surname + '.zip');
+			link.setAttribute(
+				'download',
+				'PORTFOLIO' +
+					'_' +
+					$candidateData.candidate.name +
+					'_' +
+					$candidateData.candidate.surname +
+					'.zip'
+			);
 			document.body.appendChild(link);
 			link.click();
 		} catch (e) {
 			console.log(e);
 		}
-	}
+	};
 </script>
-<!-- TODO expand on mouse hover?? -->
-<!-- <div class="card flex flex-col" on:mouseenter={(_) => showDetails = true} on:mouseleave={(_) => showDetails = false}> -->
+
 <div class="card flex flex-col">
-	<div class="infoBar flex flex-row-reverse">
+	<div class="infoBar flex flex-row-reverse <2xl:flex-col">
 		<StatusNotificationBig {loading} {status} on:click={debounce(handleNotificationClick, 150)} />
 		<div class="mr-4">
 			<div on:click on:keydown class="flex flex-col">
-				<div class="flex flex-col h-20">
-					<InfoButton bind:showDetails={showDetails} on:download={downloadPortfolio} on:showInfo={(_) => showDetails = !showDetails}></InfoButton>
+				<div class="flex flex-col <2xl:ml-auto <2xl:flex-row <2xl:my-2">
+					<InfoButton
+						bind:showDetails
+						on:download={downloadPortfolio}
+						on:showInfo={(_) => (showDetails = !showDetails)}
+					/>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="relative flex flex-row">
+	<div class="relative flex flex-col md:flex-row h-full justify-between my-2">
 		<div>
 			<span class="absolute -left-16 -top-36">
 				<Circles />
 			</span>
-			<div class="mt-8 flex flex-col lg:mt-12">
+			<div class="flex flex-col xl:mt-10">
 				<h3>{title}</h3>
 				<slot />
 			</div>
 		</div>
 		{#if showDetails}
-		<svg class="ml-12 mr-8 h-40 hidden xl:block mt-10" viewBox="0 0 2 80" xmlns="http://www.w3.org/2000/svg">
-			<line
-				x1="0"
-				y="0"
-				x2="0"
-				y2="80"
-				stroke="#406280ff"
-				stroke-width="2"
-				stroke-dasharray="3"/>
-		</svg>
-		<div
-			use:tippy={{
-				content: "<span>Vámi vyplněné osobní údaje</span>",
-				allowHTML: true,
-				placement: 'top',
-				showOnCreate: false,
-				delay: 0
-			}}
-		 class="flex flex-col justify-around mt-10">
-			<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
-			<span>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span></span>
-			<span>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span></span>
-			<span>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span></span>
-			<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
-		</div>
-		<div
-			use:tippy={{
-				content: "<span>Vámi vyplněné osobní údaje</span>",
-				allowHTML: true,
-				placement: 'top',
-				showOnCreate: false,
-				delay: 0
-			}}
-		 class="ml-10 <xl:ml-4 flex flex-col justify-around mt-10">
-			{#each $candidateData.parents as parent}
-			<div class="flex flex-col">
-				<span class="font-bold text-sspsBlue text-xl">{parent.name + " " + parent.surname}</span>
-				<span>Email: <span class="font-bold">{parent.email}</span></span>
-				<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
+			<svg
+				class="ml-12 mr-8 hidden h-40 xl:block"
+				viewBox="0 0 2 80"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<line
+					x1="0"
+					y="0"
+					x2="0"
+					y2="80"
+					stroke="#406280ff"
+					stroke-width="2"
+					stroke-dasharray="3"
+				/>
+			</svg>
+			<div
+				use:tippy={{
+					content: '<span>Vámi vyplněné osobní údaje</span>',
+					allowHTML: true,
+					placement: 'top',
+					showOnCreate: false,
+					delay: 0
+				}}
+				class="flex flex-col justify-around <2xl:text-xs"
+			>
+				<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
+				<span
+					>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span></span
+				>
+				<span
+					>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
+					></span
+				>
+				<span
+					>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
+					></span
+				>
+				<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
+			</div>
+			<div
+				use:tippy={{
+					content: '<span>Vámi vyplněné osobní údaje</span>',
+					allowHTML: true,
+					placement: 'top',
+					showOnCreate: false,
+					delay: 0
+				}}
+				class="md:ml-4 flex flex-col <2xl:text-xs"
+			>
+				{#each $candidateData.parents as parent}
+					<div class="flex flex-col">
+						<span class="text-sspsBlue text-xl font-bold">{parent.name + ' ' + parent.surname}</span
+						>
+						<span>Email: <span class="font-bold">{parent.email}</span></span>
+						<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
+					</div>
+				{/each}
 			</div>
-			{/each}
-		</div>
 		{/if}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/dashboard/InfoButton.svelte b/frontend/src/lib/components/dashboard/InfoButton.svelte
index 15402d6..6a2431e 100644
--- a/frontend/src/lib/components/dashboard/InfoButton.svelte
+++ b/frontend/src/lib/components/dashboard/InfoButton.svelte
@@ -10,53 +10,94 @@
 
 	const showInfo = () => {
 		dispatch('showInfo');
-	}
+	};
 
 	const download = () => {
 		dispatch('download');
-	}
+	};
 </script>
 
-<div class="flex flex-col">
-	<!-- TODO: better icon for "hide details"? -->
-	<div class="flex flex-col">
-		<span on:click={(_) => showInfo()} on:keydown={(_) => showInfo()} 
-		use:tippy={{
-			content: (showDetails ? "Skrýt" : "Zobrazit") + " osobní údaje",
-			placement: 'top',
-			showOnCreate: false,
-			delay: 0
-			}}>
-			<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
-		</span>
+<!-- TODO: better icon for "hide details"? -->
+<span
+	on:click={(_) => showInfo()}
+	on:keydown={(_) => showInfo()}
+	use:tippy={{
+		content: (showDetails ? 'Skrýt' : 'Zobrazit') + ' osobní údaje',
+		placement: 'top',
+		showOnCreate: false,
+		delay: 0
+	}}
+>
+	<svg
+		class="icon"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		><path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+		/></svg
+	>
+</span>
 
-		{#if $submissionProgress.status === UploadStatus.Submitted}
-			<span on:click={(_) => download()} on:keydown={(_) => download()} use:tippy={{
-				content: "Stáhnout portfolio",
-				placement: 'top',
-				showOnCreate: false,
-				delay: 0
-				}}>
-			<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
-			</span>
-		{:else}
-		<span use:tippy={{
-			content: "Nelze stáhnout, portfolio nebylo odevzdáno",
+{#if $submissionProgress.status === UploadStatus.Submitted}
+	<span
+		on:click={(_) => download()}
+		on:keydown={(_) => download()}
+		use:tippy={{
+			content: 'Stáhnout portfolio',
 			placement: 'top',
 			showOnCreate: false,
 			delay: 0
-			}}>
-		<svg class="disabledIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
-		</span>
-		{/if}
-	</div>
-</div>
+		}}
+	>
+		<svg
+			class="icon"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+			/></svg
+		>
+	</span>
+{:else}
+	<span
+		use:tippy={{
+			content: 'Nelze stáhnout, portfolio nebylo odevzdáno',
+			placement: 'top',
+			showOnCreate: false,
+			delay: 0
+		}}
+	>
+		<svg
+			class="disabledIcon"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+			/></svg
+		>
+	</span>
+{/if}
 
 <style>
 	.icon {
-		@apply w-10 h-10 stroke-sspsBlueDark hover:cursor-pointer;
+		@apply stroke-sspsBlueDark h-10 w-10 hover:cursor-pointer;
 	}
 	.disabledIcon {
-		@apply w-10 h-10 stroke-gray-300 hover:cursor-not-allowed;
+		@apply h-10 w-10 stroke-gray-300 hover:cursor-not-allowed;
 	}
 </style>
diff --git a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
index 23123ee..2886496 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
@@ -9,7 +9,12 @@
 	import PortfolioLetterUploadCard from '$lib/components/dashboard/PortfolioLetterUploadCard.svelte';
 	import PortfolioZipUploadCard from '$lib/components/dashboard/PortfolioZipUploadCard.svelte';
 	import type { PageData } from './$types';
-	import { fetchSubmProgress, submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
+	import {
+		fetchSubmProgress,
+		submissionProgress,
+		UploadStatus,
+		type Status
+	} from '$lib/stores/portfolio';
 	import { candidateData } from '$lib/stores/candidate';
 
 	export let data: PageData;
@@ -21,7 +26,7 @@
 	$: candidateData.set(data.candidate);
 	// @ts-ignore
 	$: submissionProgress.set(data.submission);
-	
+
 	const getUploadStatus = (progressStatus: UploadStatus | undefined): Status => {
 		switch (progressStatus) {
 			case 3:
@@ -31,30 +36,37 @@
 			default:
 				return 'missing';
 		}
-	}
+	};
 </script>
 
 <FullLayout>
 	<div class="dashboard dashboardDesktop">
-		<div class="movable name col-span-3" class:showDetailsInfoCard={showDetails}>
-			<DashboardInfoCard bind:showDetails={showDetails} status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
+		<div class="movable name col-span-3 row-span-4" class:showDetailsInfoCard={showDetails}>
+			<DashboardInfoCard
+				bind:showDetails
+				status={getUploadStatus($submissionProgress.status)}
+				title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}
+			>
 				<span class="text-sspsBlue mt-3 truncate">{$candidateData.candidate.email}</span>
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>
-		<div class="movable coverletter col-span-5" class:showDetailsUploadCard={showDetails}>
+		<div class="movable coverletter col-span-5 row-span-4" class:showDetailsUploadCard={showDetails}>
 			<CoverLetterUploadCard compact={showDetails} />
 		</div>
-		<div class="portfolio col-span-4">
+		<div class="portfolio col-span-4 row-span-4">
 			<PortfolioLetterUploadCard />
 		</div>
-		<div class="moreData col-span-4">
+		<div class="moreData col-span-4 row-span-4">
 			<PortfolioZipUploadCard />
 		</div>
 	</div>
 	<div class="dashboard dashboardMobile">
 		<div class="name my-10 mx-auto w-[90%]">
-			<DashboardInfoCard status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
+			<DashboardInfoCard
+				status={getUploadStatus($submissionProgress.status)}
+				title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}
+			>
 				<span class="text-sspsBlue mt-3 truncate">{$candidateData.candidate.email}</span>
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
@@ -81,14 +93,14 @@
 
 <style>
 	.showDetailsInfoCard {
-		@apply col-span-5 <2xl: col-span-6;
+		@apply <2xl:col-span-5 <2xl:row-span-5 col-span-6;
 	}
 	.showDetailsUploadCard {
-		@apply col-span-3 <2xl: col-span-2;
+		@apply <2xl:col-span-3 <2xl:row-span-5 col-span-2;
 	}
 	.dashboardDesktop {
 		@apply h-[85vh] w-[85vw];
-		@apply hidden grid-cols-8 grid-rows-2 gap-10 md:grid;
+		@apply hidden grid-cols-8 grid-rows-8 gap-10 md:grid;
 	}
 
 	.dashboardMobile {