diff --git a/src/lib/components/Alert.svelte b/src/lib/components/Alert.svelte
index 67d8238..d43f5e6 100644
--- a/src/lib/components/Alert.svelte
+++ b/src/lib/components/Alert.svelte
@@ -1,3 +1,21 @@
+<script lang="ts">
+	export let type = 'info';
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+<div class="alert {type} {classNames}">
+	<slot />
+</div>
+
+<!-- <script>
+	let { children, type = `info`, class: classNames = `` } = $props();
+</script>
+
+<div class="alert {type} {classNames}">
+	{@render children()}
+</div> -->
+
 <style>
 	/* Common */
 	.alert {
@@ -45,13 +63,3 @@
 		@apply bg-red-50;
 	}
 </style>
-
-<script lang="ts">
-	export let type = 'info';
-	let classNames = '';
-	export { classNames as class };
-</script>
-
-<div class="alert {type} {classNames}">
-	<slot />
-</div>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 17974f3..e4a659c 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,3 +1,47 @@
+<script lang="ts">
+	export let href = null;
+	export let type = 'button';
+	export let size = 'md';
+	export let variant = 'primary';
+	export let fullWidth = false;
+	export let align = 'center';
+	export let disabled = false;
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+{#if href}
+	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}">
+		{@render children()}
+	</a>
+{:else}
+	<button
+		on:click
+		{type}
+		{disabled}
+		class:w-full={fullWidth}
+		class="button {variant} {size} {classNames} {align}"
+	>
+		{@render children()}
+	</button>
+{/if}
+
+{#if href}
+	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
+		><slot />
+	</a>
+{:else}
+	<button
+		on:click
+		{type}
+		{disabled}
+		class:w-full={fullWidth}
+		class="button {variant} {size} {classNames} {align}"
+	>
+		<slot />
+	</button>
+{/if}
+
 <style>
 	.button {
 		@apply inline-flex;
@@ -172,31 +216,3 @@
 		@apply justify-end;
 	}
 </style>
-
-<script lang="ts">
-	export let href = null;
-	export let type = 'button';
-	export let size = 'md';
-	export let variant = 'primary';
-	export let fullWidth = false;
-	export let align = 'center';
-	export let disabled = false;
-	let classNames = '';
-	export { classNames as class };
-</script>
-
-{#if href}
-	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
-		><slot />
-	</a>
-{:else}
-	<button
-		on:click
-		{type}
-		{disabled}
-		class:w-full={fullWidth}
-		class="button {variant} {size} {classNames} {align}"
-	>
-		<slot />
-	</button>
-{/if}
diff --git a/src/lib/components/ListItem.svelte b/src/lib/components/ListItem.svelte
new file mode 100644
index 0000000..c89ace2
--- /dev/null
+++ b/src/lib/components/ListItem.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import Cube from '$lib/icons/Cube.svelte';
+	import shortenFileSize from '$lib/helper/shortenFileSize';
+	import timeElapsed from '$lib/helper/timeElapsed';
+	import Trash from '$lib/icons/Trash.svelte';
+	import Edit from '$lib/icons/Edit.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Modal from './ui/Modal/Modal.svelte';
+	import ModalTitle from './ui/Modal/ModalTitle.svelte';
+	import ModalContent from './ui/Modal/ModalContent.svelte';
+	import Alert from './ui/Alert.svelte';
+	import ModalFooter from './ui/Modal/ModalFooter.svelte';
+	import Button from './ui/Button.svelte';
+	import { redirect } from '@sveltejs/kit';
+
+	let { data, list, i } = $props(); // Holt `data` aus den Props
+	const dispatch = createEventDispatcher();
+	let item = list[i];
+	let error = $state('');
+	let open = $state(false);
+	let inProgress = $state(false);
+	let err = $state(false);
+
+	$inspect(item.show_button);
+	let oldName = $state(item.name);
+	let test = true;
+
+	function handleClick(ev: MouseEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
+		ev.preventDefault(); // Stoppt die Standardaktion
+		oldName = item.name;
+	}
+
+	async function handle_input(
+		ev: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }
+	) {
+		if (item.name == '') {
+			error = 'Bitte einen gültigen Namen eingeben.';
+			if (ev.key == 'Enter') {
+				item.name = oldName;
+			}
+		}
+
+		if (ev.key == 'Escape') {
+			ev.preventDefault(); // Stoppt die Standardaktion
+			item.name = oldName;
+			ev.target?.blur(); //Entfernt den Fokus vom Input-Feld
+		}
+
+		if (ev.key == 'Enter') {
+			ev.preventDefault(); // Stoppt die Standardaktion
+
+			open = true;
+			inProgress = true;
+
+			const url = $page.url;
+
+			let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
+			data_obj['new_name'] = item.name;
+			data_obj['old_name'] = oldName;
+
+			const response = await fetch(
+				url,
+
+				{ method: 'PUT', body: JSON.stringify(data_obj) }
+			);
+
+			inProgress = false;
+
+			if (!response.ok) {
+				err = true;
+				if (response.status == 400) {
+					let json_res = await response.json();
+					alert(json_res['msg']);
+					item.name = oldName;
+				}
+			}
+
+			ev.target?.blur(); //Entfernt den Fokus vom Input-Feld
+			let wert = {
+				index: i,
+				oldName: oldName,
+				newName: item.name,
+				open: true,
+				inProgress: inProgress,
+				err: err
+			};
+
+			dispatch('update', wert);
+		}
+	}
+
+	function uploadSuccessful() {
+		open = false;
+	}
+
+	async function delete_item(ev: Event) {
+		let delete_item = window.confirm('Bist du dir sicher?');
+
+		if (delete_item) {
+			const target = ev.currentTarget as HTMLElement | null;
+			if (!target) return;
+			let filename = target.id.split('del__')[1];
+
+			// delete request
+			// --------------
+
+			let url = `/list/${filename}`;
+
+			console.log(`--- ${filename} + ${url}`);
+			try {
+				const response = await fetch(url, { method: 'DELETE' });
+				if (response.status == 204) {
+					setTimeout(() => {
+						window.location.reload();
+					}, 500);
+				}
+			} catch (error) {
+				if (error instanceof Error) {
+					console.log(error.message);
+				} else {
+					console.log(error);
+				}
+			}
+		}
+	}
+
+	async function deleteItem(ev: Event) {
+		console.log('debug', ev, item);
+		let delete_item = window.confirm('Bist du dir sicher?');
+
+		if (delete_item) {
+			const target = ev.currentTarget as HTMLElement | null;
+			if (!target) return;
+			let filename = target.id.split('del__')[1];
+
+			// delete request
+			// --------------
+
+			let url = `/api/list/${filename}`;
+
+			console.log(`--- ${filename} + ${url}`);
+			try {
+				const response = await fetch(url, { method: 'DELETE' });
+				if (response.status == 204) {
+					// setTimeout(() => {
+					// 	window.location.reload();
+					// }, 500);
+					console.log('Debug Delete erfolgreich', response.status);
+					//Weiterleitung fehlerhaft
+				}
+			} catch (error) {
+				if (error instanceof Error) {
+					console.log(error.message);
+				} else {
+					console.log(error);
+				}
+			}
+		}
+	}
+</script>
+
+<a href="/view/{$page.params.vorgang}/{item.name}" class=" flex justify-between gap-x-6 py-5">
+	<div class=" flex gap-x-4 items-start">
+		<Cube class="h-auto " />
+		<div class="flex flex-col">
+			<div class=" min-w-0 flex items-start">
+				{#if data.user.admin}
+					<div class=" flex flex-col items-start">
+						<input
+							type="text"
+							class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
+							class:bg-red-500={!item.show_button}
+							bind:value={item.name}
+							onfocusout={() => (item.show_button = true)}
+							onfocusin={() => (item.show_button = false)}
+							onkeydown={(ev) => {
+								ev.stopPropagation();
+								handle_input(ev);
+							}}
+							onclick={(ev) => {
+								handleClick(ev);
+							}}
+						/>
+					</div>
+					{#if item.show_button}
+						<button>
+							<Edit />
+						</button>
+					{/if}
+					<button
+						style="padding: 2px "
+						id="del__{item.name}"
+						onclick={async (ev) => {
+							ev.preventDefault();
+							await deleteItem(ev);
+						}}
+						aria-label="Datei löschen"
+					>
+						<Trash />
+					</button>
+				{:else}
+					<span class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
+						>{item.name}</span
+					>
+				{/if}
+			</div>
+			<p class="mt-1 truncate text-xs leading-5 text-gray-500">
+				{shortenFileSize(item.size)}
+			</p>
+			{#if !item.name && data.user.admin}
+				<p class="block text-sm leading-6 text-red-900 mt-1">{error}</p>
+			{/if}
+		</div>
+	</div>
+
+	<div class="hidden sm:flex sm:flex-col sm:items-end">
+		<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
+
+		<p class="mt-1 text-xs leading-5 text-gray-500">
+			Zuletzt geändert <time datetime="2023-01-23T13:23Z"
+				>{timeElapsed(new Date(item.lastModified))}</time
+			>
+		</p>
+	</div>
+</a>
+<Modal {open}
+	><ModalTitle>Umbenennen</ModalTitle><ModalContent>
+		{#if inProgress}
+			<p class="py-2 mb-1">Vorgang läuft...</p>
+		{/if}
+
+		{#if err}
+			<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
+		{/if}
+	</ModalContent>
+
+	<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
+</Modal>
diff --git a/src/lib/icons/Cube.svelte b/src/lib/icons/Cube.svelte
index 4992960..ff56e24 100644
--- a/src/lib/icons/Cube.svelte
+++ b/src/lib/icons/Cube.svelte
@@ -1,10 +1,15 @@
+<script>
+	let classNames = '';
+	export { classNames as class };
+</script>
+
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class=" w-6 h-6"
+	class=" w-6 h-6 {classNames}"
 >
 	<path
 		stroke-linecap="round"
diff --git a/src/lib/icons/File-rect.svelte b/src/lib/icons/File-rect.svelte
index f31a268..d62cfe7 100644
--- a/src/lib/icons/File-rect.svelte
+++ b/src/lib/icons/File-rect.svelte
@@ -1,7 +1,5 @@
 <script>
-	export let outline = false;
-	let classNames = '';
-	export { classNames as class };
+	let { outline = false, class: classNames = '' } = $props(); // Standardwert setzen
 </script>
 
 {#if outline}
diff --git a/src/lib/store.js b/src/lib/store.js
new file mode 100644
index 0000000..589cff4
--- /dev/null
+++ b/src/lib/store.js
@@ -0,0 +1,4 @@
+// store.js
+import { writable } from 'svelte/store';
+
+export const wert = writable("Hallo Welt");
diff --git a/src/routes/(angemeldet)/+page.svelte b/src/routes/(angemeldet)/+page.svelte
index 89dd1fa..52d3112 100644
--- a/src/routes/(angemeldet)/+page.svelte
+++ b/src/routes/(angemeldet)/+page.svelte
@@ -3,9 +3,12 @@
 	import FileRect from '$lib/icons/File-rect.svelte';
 	import ListIcon from '$lib/icons/List-icon.svelte';
 
+<<<<<<< HEAD
 
 	export let data;
 	export let outline = true;
+=======
+>>>>>>> temp_f03-Frontend
 </script>
 
 <div
@@ -27,8 +30,9 @@
 					Verschaffe Dir einen Überblick über alle gespeicherten Tatorte.
 				</p>
 			</div>
-		{/if}
-		{#if data.user.admin}
+<<<<<<< HEAD
+=======
+>>>>>>> temp_f03-Frontend
 			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
 				<div
 					class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
@@ -46,7 +50,7 @@
 			<div
 				class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
 			>
-				<FileRect class=" group-hover:text-indigo-600" {outline} />
+				<FileRect class=" group-hover:text-indigo-600" outline={true} />
 			</div>
 			<a href="/view" class="mt-6 block font-semibold text-gray-900">
 				Ansicht
@@ -58,4 +62,4 @@
 </div>
 
 <style>
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/(angemeldet)/list/+page.svelte b/src/routes/(angemeldet)/list/+page.svelte
index b730a95..8f7c77f 100644
--- a/src/routes/(angemeldet)/list/+page.svelte
+++ b/src/routes/(angemeldet)/list/+page.svelte
@@ -14,7 +14,7 @@
 			const target = ev.currentTarget as HTMLElement | null;
 			if (!target) return;
 			let filename = target.id.split('del__')[1];
-			
+
 			// delete request
 			// --------------
 
@@ -25,7 +25,7 @@
 				if (response.status == 204) {
 					setTimeout(() => {
 						window.location.reload();
-					}, 500);
+					}, 5000);
 				}
 			} catch (error) {
 				if (error instanceof Error) {
diff --git a/src/routes/(angemeldet)/upload/+page.svelte b/src/routes/(angemeldet)/upload/+page.svelte
index 0d93a8c..0e77deb 100644
--- a/src/routes/(angemeldet)/upload/+page.svelte
+++ b/src/routes/(angemeldet)/upload/+page.svelte
@@ -19,13 +19,13 @@
 
 	function generate_token() {
 		return Math.random()
-		.toString(36)
-		.slice(2, 2 + code_len);
+			.toString(36)
+			.slice(2, 2 + code_len);
 	}
-	let zugangscode = ''
-	let zugangscode_old = ''
+	let zugangscode = '';
+	let zugangscode_old = '';
 	$: zugangscode_old = generate_token();
-	$: zugangscode = zugangscode_old
+	$: zugangscode = zugangscode_old;
 
 	let case_existing = undefined;
 	$: case_existing = false;
@@ -36,7 +36,7 @@
 
 	$: inProgress = form === null;
 
-	let formErrors: Record<string,any> | null;
+	let formErrors: Record<string, any> | null;
 
 	async function validateForm() {
 		let data = new FormData();
@@ -153,7 +153,6 @@
 
 	// `/(angemeldet)/view` return true or false
 	async function case_exists(case_no) {
-
 		if (case_no == '') {
 			zugangscode = zugangscode_old;
 		}
@@ -169,7 +168,7 @@
 		if (code != -1) {
 			zugangscode = code;
 			case_existing = true;
-			return true
+			return true;
 		}
 
 		const response = await fetch(url, { method: 'POST', body: data });
@@ -186,7 +185,6 @@
 	}
 
 	async function get_code(case_no) {
-
 		if (case_no == '') return;
 
 		let url = `/api/list/${case_no}/code`;
@@ -198,7 +196,6 @@
 			return -1;
 		}
 	}
-
 </script>
 
 <div class="mx-auto max-w-2xl">
@@ -249,8 +246,8 @@
 
 					<div>
 						<label for="name" class="block text-sm font-medium leading-6 text-gray-900"
-						><span class="flex"
-							>{#if formErrors?.name}
+							><span class="flex"
+								>{#if formErrors?.name}
 									<span class="inline-block mr-1"><Exclamation /></span>
 								{/if} Name</span
 							></label
@@ -291,16 +288,19 @@
 									type="text"
 									name="zugangscode"
 									id="zugangscode"
-									on:input="{ (ev) => { zugangscode_old = ev.target.value }}"
+									on:input={(ev) => {
+										zugangscode_old = ev.target.value;
+									}}
 									class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
 								/>
-
 							</div>
 							<button
-							class="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-							on:click="{() => {
-							zugangscode = zugangscode_old = generate_token(); }}"
-							type="button">
+								class="rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+								on:click={() => {
+									zugangscode = zugangscode_old = generate_token();
+								}}
+								type="button"
+							>
 								Generiere Zugangscode
 							</button>
 						</div>
@@ -351,7 +351,10 @@
 			</div>
 
 			<div class="mt-6 flex items-center justify-end gap-x-6">
-				<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
+				<!-- <button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button> -->
+				<Button variant="second" href="/" class="text-sm font-semibold leading-6 text-gray-900"
+					>Cancel</Button
+				>
 				<Button
 					on:click={buttonClick}
 					class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"