diff --git a/frontend/src/lib/@api/admin.ts b/frontend/src/lib/@api/admin.ts
index e98595f..385240a 100644
--- a/frontend/src/lib/@api/admin.ts
+++ b/frontend/src/lib/@api/admin.ts
@@ -16,7 +16,7 @@ export const apiLogin = async (data: AdminLogin): Promise<number> => {
 
 // Create new candidate /admin/create
 // return created candidate's applicationId, personalIdNumber and password
-export const createCandidate = async (data: CreateCandidate): Promise<CreateCandidateLogin> => {
+export const apiCreateCandidate = async (data: CreateCandidate): Promise<CreateCandidateLogin> => {
     try {
         const res = await axios.post(API_URL + '/admin/create', data, { withCredentials: true });
         return res.data;
@@ -26,7 +26,7 @@ export const createCandidate = async (data: CreateCandidate): Promise<CreateCand
 }
 
 // Reset candidate password /admin/candidate/{id}/reset_password
-export const resetCandidatePassword = async (id: number): Promise<CreateCandidateLogin> => {
+export const apiResetCandidatePassword = async (id: number): Promise<CreateCandidateLogin> => {
     try {
         const res = await axios.post(API_URL + '/admin/candidate/' + id + '/reset_password',
             {},
diff --git a/frontend/src/lib/components/dashboard/CandidateDetails.svelte b/frontend/src/lib/components/dashboard/CandidateDetails.svelte
new file mode 100644
index 0000000..2e6a589
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/CandidateDetails.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { apiResetCandidatePassword } from "$lib/@api/admin";
+	import type { CandidateData } from "$lib/stores/candidate";
+	import ListElement from "./ListElement.svelte";
+
+    export let candidate: CandidateData;
+
+    async function resetCandidatePassword(id: number) {
+		try {
+			await apiResetCandidatePassword(id);
+		} catch {
+			console.log('error');
+		}
+	}
+</script>
+
+<div class="flex flex-row">
+    <div class="w-96">
+        <li>
+            <ListElement label="Jméno" content={candidate.name}></ListElement>
+            <ListElement label="Příjmení" content={candidate.surname}></ListElement>
+            <ListElement label="Místo narození" content={candidate.birthplace}></ListElement>
+            <ListElement label="Datum narození" content={candidate.birthdate}></ListElement>
+            <ListElement label="Adresa" content={candidate.address}></ListElement>
+            <ListElement label="Telefon" content={candidate.telephone}></ListElement>
+            <ListElement label="Email" content={candidate.email}></ListElement>
+            <ListElement label="Obor" content={candidate.study}></ListElement>
+            <ListElement label="Rodné číslo" content={candidate.personalIdNumber}></ListElement>
+
+            <ListElement label="Jméno rodiče" content={candidate.parentName}></ListElement>
+            <ListElement label="Příjmení rodiče" content={candidate.parentSurname}></ListElement>
+            <ListElement label="Telefon rodiče" content={candidate.parentTelephone}></ListElement>
+            <ListElement label="Email rodiče" content={candidate.parentEmail}></ListElement>
+        </li>
+    </div>
+    <div class="ml-20">
+        <div class="bg-sspsBlue hover:bg-sspsBlueDark transition duration-300 rounded-lg px-10 py-4">
+            <button class="text-2xl text-white font-bold">Resetovat heslo</button>
+        </div>
+    </div>
+</div>
+
+<style>
+</style>
diff --git a/frontend/src/lib/components/dashboard/ListElement.svelte b/frontend/src/lib/components/dashboard/ListElement.svelte
new file mode 100644
index 0000000..62637d3
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/ListElement.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let label = 'TEST';
+    export let content = 'TEST';
+</script>
+
+
+<div class="flex justify-between relative">
+    <span class="font-bold">{label}:</span>
+    <span class="absolute left-40">{content}</span>
+</div>
\ No newline at end of file
diff --git a/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
index fafd0e8..b7c7eaf 100644
--- a/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
 	import backgroundImage from '$lib/assets/background.jpg';
 
-	import { apiFetchCandidate, apiListCandidates } from '$lib/@api/admin';
+	import { apiFetchCandidate, apiListCandidates, apiResetCandidatePassword } from '$lib/@api/admin';
 	import Home from '$lib/components/icons/Home.svelte';
 	import TextField from '$lib/components/textfield/TextField.svelte';
-	import type { CandidatePreview } from '$lib/stores/candidate';
+	import type { CandidateData, CandidatePreview } from '$lib/stores/candidate';
+	import ListElement from '$lib/components/dashboard/ListElement.svelte';
+	import CandidateDetails from '$lib/components/dashboard/CandidateDetails.svelte';
 
 	let candidates: [CandidatePreview] = [{}];
-	let candidateDetails: { [id: number]: CandidatePreview } = {};
-	let currentCandidateId: number = 0;
+	let candidateDetails: { [id: number]: CandidateData } = {};
 
 	getCandidates();
 
@@ -20,9 +21,13 @@
 		}
 	}
 
-	async function getCandidateDetails(id: number) {
-		currentCandidateId = id;
-		candidateDetails[id] = await apiFetchCandidate(id);
+	async function toggleDetail(id: number | undefined) {
+		if (id === undefined) return true;
+		if (candidateDetails.hasOwnProperty(id)) {
+			delete candidateDetails[id];
+		} else {
+			candidateDetails[id] = await apiFetchCandidate(id);
+		}
 	}
 
 	type Filter = 'Vše' | 'KBB' | 'IT' | 'GYM';
@@ -66,30 +71,33 @@
 							<table class="min-w-full rounded-md border-2  border-[#dfe0e9] text-center">
 								<thead class="bg-[#f6f4f4] ">
 									<tr>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> # </th>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> First </th>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Last </th>
-										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900">
-											Handle
-										</th>
+										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Ev. č. přihlásky </th>
+										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Jméno </th>
+										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Příjmení </th>
+										<th scope="col" class="px-6 py-4 text-sm font-medium text-gray-900"> Obor </th>
 									</tr>
 								</thead>
 								<tbody>
-									{#each Array(40) as item}
-										<tr class="border-b bg-white">
-											<td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900"
-												>1</td
+									{#each candidates as candidate}
+										<tr on:click={e=> toggleDetail(candidate.applicationId)} class="hover:cursor-pointer border-b bg-white">
+											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900"
+												>{candidate.applicationId}</td
 											>
-											<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
-												Mark
+											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
+												{candidate.name}
 											</td>
-											<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
-												Otto
+											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
+												{candidate.surname}
 											</td>
-											<td class="whitespace-nowrap px-6 py-4 text-sm font-light text-gray-900">
-												@mdo
+											<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
+												{candidate.study}
 											</td>
 										</tr>
+										{#if candidateDetails.hasOwnProperty(candidate.applicationId)}
+											<CandidateDetails 
+												candidate={candidateDetails[candidate.applicationId]}>
+											</CandidateDetails>
+										{/if}
 									{/each}
 								</tbody>
 							</table>