diff --git a/src/components/EntryList.test.ts b/src/components/EntryList.test.ts
new file mode 100644
index 0000000..cfc6ec2
--- /dev/null
+++ b/src/components/EntryList.test.ts
@@ -0,0 +1,31 @@
+import { mount } from "@vue/test-utils";
+import { describe, it } from "vitest";
+import { generateList } from "@/data/entries.test";
+import { Entry } from "@/data/entries";
+import { faker } from "@faker-js/faker";
+import moment from "moment";
+import EntryList from '@/components/EntryList.vue'
+
+describe('entry list tests', () => {
+	function mountListWithSampelData(dataAmount: number) {
+		const sampleData = generateList(dataAmount, () => <Entry>{
+			name: faker.word.noun(),
+			text: faker.lorem.paragraph(),
+			last_reset: moment()
+
+		})
+
+		return mount(EntryList, {props: {
+			entries: sampleData
+		}})
+	}
+
+
+
+	it('displays no entry when the inputted list is empty', () => {
+		const component = mountListWithSampelData(0)
+
+		component.find('')
+
+	})
+})
\ No newline at end of file
diff --git a/src/components/EntryList.vue b/src/components/EntryList.vue
new file mode 100644
index 0000000..ee74998
--- /dev/null
+++ b/src/components/EntryList.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Entry, getDifferenceToToday } from '@/data/entries';
+
+defineProps<{
+	entries: Entry[]
+}>()
+
+const emit = defineEmits<{
+  openDetail: [value: string] // named tuple syntax
+}>()
+
+function openDetailWith(name: string) {
+	emit('openDetail', name)
+}
+
+</script>
+
+<template>
+	<ScrollArea class="w-full">
+		<div class="w-full flex justify-center flex-col items-center">
+			<header id="title" class="flex w-full h-56 justify-center items-center flex-row">Accident Board</header>
+			<main class="wrapper sm:w-3/4 w-11/12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+				<Button v-for="entry in entries" class="w-full p-10 flex flex-col items-center gap-2"
+					@click="openDetailWith(entry.name)">
+					<span>{{ entry.name }}</span>
+					<Badge variant="secondary">{{ getDifferenceToToday(entry.last_reset) }} days</Badge>
+				</Button>
+			</main>
+		</div>
+	</ScrollArea>
+</template>
\ No newline at end of file
diff --git a/src/data/entries.test.ts b/src/data/entries.test.ts
index 3d10bc8..27acae7 100644
--- a/src/data/entries.test.ts
+++ b/src/data/entries.test.ts
@@ -4,17 +4,17 @@ import { faker } from '@faker-js/faker'
 import { parseFromPossibleString } from "./entries"
 import moment from "moment"
 
+export function generateList<E>(length: number, generate: () => E) {
+	const arr: Array<E> = []
+
+	for (let i = 0; i < length; i++) {
+		arr.push(generate());
+	}
+
+	return arr;
+}
 
 describe('function for managing entries data entity', () => {
-	function generateList<E>(length: number, generate: () => E) {
-		const arr: Array<E> = []
-
-		for (let i = 0; i < length; i++) {
-			arr.push(generate());
-		}
-
-		return arr;
-	}
 
 	function generateListWithWrongDate() {
 		return generateList(10, () => <any>{