diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
new file mode 100644
index 0000000..08b4d7b
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Circles from '../icon/Circles.svelte';
+
+	export let title: string;
+</script>
+
+<div class="card infoCard relative">
+	<span class="absolute -left-8 -top-8">
+		<Circles />
+	</span>
+	<div class="mt-20 flex flex-col">
+		<h3>{title}</h3>
+		<slot />
+	</div>
+</div>
+
+<style>
+	.card {
+		@apply h-full;
+		@apply flex flex-col justify-between;
+
+		@apply bg-[#f8fbfc];
+		@apply rounded-3xl;
+		@apply px-7 py-10;
+	}
+	.card h3 {
+		@apply text-sspsBlue text-4xl md:text-2xl xl:text-4xl font-semibold;
+	}
+</style>
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
new file mode 100644
index 0000000..a6a83d3
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import FileType from './FileType.svelte';
+
+	export let title: string;
+	export let filetype: 'PDF' | 'ZIP';
+	export let filesize: string;
+
+    let dashAnimationProgress = 0;
+    let dashAnimationInterval: NodeJS.Timer;
+
+    const dashAnimationStart = () => {
+        dashAnimationInterval = setInterval(() => {
+            dashAnimationProgress += 1;
+            if (dashAnimationProgress == 100) {
+                dashAnimationProgress = 0;
+            }
+        }, 30);
+    };
+
+    const dashAnimationStop = () => {
+        clearInterval(dashAnimationInterval);
+    };
+
+</script>
+
+<div class="card uploadCard">
+	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
+		<h3>{title}</h3>
+		<div class="mt-3 sm:mt-0">
+			<FileType {filetype} {filesize} />
+		</div>
+	</div>
+	<div
+		class="drag group"
+        on:mouseenter={dashAnimationStart}
+        on:mouseleave={dashAnimationStop}
+		style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
+	>
+		<span class="text-[#406280]">Sem přetáhněte,</span>
+		<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
+	</div>
+</div>
+
+<style>
+	.card {
+		@apply h-full;
+		@apply flex flex-col justify-between;
+
+		@apply bg-[#f8fbfc];
+		@apply rounded-3xl;
+		@apply px-7 py-10;
+	}
+	.card h3 {
+		@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
+	}
+	.card span {
+		@apply opacity-60 text-sm;
+        @apply transition-all duration-300
+	}
+	.card .drag {
+        @apply transition duration-200;
+		@apply flex-grow;
+		@apply flex flex-col items-center justify-center;
+		@apply mt-10;
+
+		border-radius: 9px;
+	}
+    .card .drag:hover span{
+        @apply opacity-100;
+    }
+</style>
diff --git a/frontend/src/lib/components/dashboard/FileType.svelte b/frontend/src/lib/components/dashboard/FileType.svelte
new file mode 100644
index 0000000..c49acf1
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/FileType.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let filetype: 'PDF' | 'ZIP';
+	export let filesize: string;
+</script>
+
+<div>
+	<span class="text-sspsBlue italic text-sm">{filetype}</span>
+	<span class="mx-2 text-sspsGray">/</span>
+	<span class="text-sspsBlue italic text-sm">Max {filesize}</span>
+</div>
+
+<style>
+    div {
+        @apply flex items-center justify-between;
+        @apply py-1 px-4;
+        @apply bg-white rounded-xl shadow-md;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 1b36155..5c5a72e 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -3,96 +3,40 @@
 
 	import { Swiper, SwiperSlide } from 'swiper/svelte';
 	import 'swiper/css';
-	import Circles from '$lib/components/icon/Circles.svelte';
+
+	import DashboardUploadCard from '$lib/components/dashboard/DashboardUploadCard.svelte';
+	import DashboardInfoCard from '$lib/components/dashboard/DashboardInfoCard.svelte';
 </script>
 
 <FullLayout>
 	<div class="dashboard dashboardDesktop">
-		<div class="card name col-span-2 relative">
-			<span class="absolute -left-8 -top-8">
-				<Circles />
-			</span>
-			<div class="mt-[50%] flex flex-col">
-				<h3>Damián</h3>
+		<div class="name col-span-3">
+			<DashboardInfoCard title="Damián">
 				<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
 				<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
-			</div>
+			</DashboardInfoCard>
 		</div>
-		<div class="card coverletter col-span-5 flex flex-col justify-between">
-			<div class="flex flex-row justify-between items-center">
-				<h3>Motivační dopis</h3>
-				<div class="py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md">
-					<span class="text-sspsBlue italic text-sm">PDF</span>
-					<span class="mx-2 text-sspsGray">/</span>
-					<span class="text-sspsBlue italic text-sm">Max 10 MB</span>
-				</div>
-			</div>
-			<div class="drag mt-10 h-full flex flex-col items-center justify-center">
-				<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
-				<span class="text-sspsGray opacity-60 text-sm">nebo nahrajte svůj motivační dopis</span>
-			</div>
+		<div class="coverletter col-span-5">
+			<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
 		</div>
-		<div class="card portfolio col-span-3 flex flex-col justify-between">
-			<div class="flex flex-row justify-between items-center">
-				<h3>Portfolio</h3>
-				<div class="py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md">
-					<span class="text-sspsBlue italic text-sm">PDF</span>
-					<span class="mx-2 text-sspsGray">/</span>
-					<span class="text-sspsBlue italic text-sm">Max 10 MB</span>
-				</div>
-			</div>
-			<div class="drag mt-10 h-full flex flex-col items-center justify-center">
-				<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
-				<span class="text-sspsGray opacity-60 text-sm">nebo nahrajte svůj motivační dopis</span>
-			</div>
+		<div class="portfolio col-span-4">
+			<DashboardUploadCard title="Portfolio" filetype="PDF" filesize="10 MB" />
 		</div>
-		<div class="card moreData col-span-4 flex flex-col justify-between">
-			<div class="flex flex-row justify-between items-center">
-				<h3>Další data</h3>
-				<div class="py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md">
-					<span class="text-sspsBlue italic text-sm">ZIP</span>
-					<span class="mx-2 text-sspsGray">/</span>
-					<span class="text-sspsBlue italic text-sm">Max 100 MB</span>
-				</div>
-			</div>
-			<div class="drag mt-10 h-full flex flex-col items-center justify-center">
-				<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
-				<span class="text-sspsGray opacity-60 text-sm">nebo nahrajte svůj motivační dopis</span>
-			</div>
+		<div class="moreData col-span-4">
+			<DashboardUploadCard title="Další data" filetype="ZIP" filesize="100 MB" />
 		</div>
 	</div>
 	<div class="dashboard dashboardMobile">
-		<div class="mt-10 card name relative mb-10">
-			<span class="absolute -left-6 -top-6">
-				<Circles />
-			</span>
-			<div class="mt-24 flex flex-col">
-				<h3 class="!text-3xl">Damián</h3>
+		<div class="my-10 name">
+			<DashboardInfoCard title="Damián">
 				<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
 				<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
-			</div>
+			</DashboardInfoCard>
 		</div>
-		<Swiper slidesPerView={1} spaceBetween={20} class="h-full">
+		<Swiper slidesPerView={1} spaceBetween={20} >
 			{#each [0, 0, 0] as _}
 				<SwiperSlide>
-					<div class="card min-h-64 coverletter h-full col-span-5 flex flex-col justify-between">
-						<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
-							<h3>Motivační dopis</h3>
-							<div
-								class="mt-3 sm:mt-0 py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md"
-							>
-								<span class="text-sspsBlue italic text-sm">PDF</span>
-								<span class="mx-2 text-sspsGray">/</span>
-								<span class="text-sspsBlue italic text-sm">Max 10 MB</span>
-							</div>
-						</div>
-						<div class="flex-grow drag mt-6 h-full flex flex-col items-center justify-center">
-							<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
-							<span class="text-sspsGray opacity-60 text-sm"
-								>nebo nahrajte svůj motivační dopis</span
-							>
-						</div>
-					</div>
+					<DashboardUploadCard title="Motivační dopis" filetype="PDF" filesize="10 MB" />
 				</SwiperSlide>
 			{/each}
 		</Swiper>
@@ -102,25 +46,15 @@
 <style>
 	.dashboardDesktop {
 		@apply w-[70vw] h-[70vh];
-		@apply hidden md:grid grid-cols-7 grid-rows-2 gap-10;
+		@apply hidden md:grid grid-cols-8 grid-rows-2 gap-10;
 	}
+
 	.dashboardMobile {
-		@apply w-[100vw] h-[90vh];
+		@apply w-[90vw] h-[90vh];
 		@apply md:hidden;
 	}
-	.dashboardMobile .card {
-		@apply w-[90%] mx-auto;
-	}
-	.dashboard .card {
-		@apply bg-[#f8fbfc] p-1;
-		@apply rounded-3xl;
-		@apply px-7 py-10;
-	}
-	.dashboard .card h3 {
-		@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
-	}
-	.drag {
-		background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-		border-radius: 9px;
+
+	.dashboardMobile :global(.uploadCard) {
+		@apply min-h-72;
 	}
 </style>