diff --git a/frontend/src/lib/Comment.svelte b/frontend/src/lib/Comment.svelte
new file mode 100644
index 0000000..4650d64
--- /dev/null
+++ b/frontend/src/lib/Comment.svelte
@@ -0,0 +1,16 @@
+<script>
+      export let comment;
+</script>
+
+
+<div class="flex items-start space-x-4 p-4 rounded-xl bg-background">
+    <img src="/emptyProfilePicture.png" alt="Profilbild" class="w-12 h-12 rounded-full" />
+
+    <div class="flex-1">
+        <div class="flex items-center space-x-2">
+            <p class="font-semibold text-gray-400">Username</p>
+            <p class="text-gray-600">{comment.dateTime}</p>
+        </div>
+        <p class="text-gray-400">{comment.content}</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/lib/Commentsection.svelte b/frontend/src/lib/Commentsection.svelte
new file mode 100644
index 0000000..749469f
--- /dev/null
+++ b/frontend/src/lib/Commentsection.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Comment from "./Comment.svelte";
+
+    let comments = [
+        { id: 1, authorId: 1, content: "I still can't explain how this was possible... ^^", dateTime: new Date().toLocaleString("de-DE"), eventId: 1 },
+        { id: 2, authorId: 1, content: "Crazyyyyyyyyyyyyyy", dateTime: new Date().toLocaleString("de-DE"), eventId: 1 },
+        { id: 3, authorId: 1, content: "Anyone forgot their jacket? Found one...", dateTime: new Date().toLocaleString("de-DE"), eventId: 1 }
+    ]
+
+</script>
+<div class="space-y-4 bg-background">
+    {#each comments as comment (comment.id)}
+      <div class="flex items-start space-x-4 p-1 bg-background shadow-md rounded-lg">  
+        <Comment {comment}/>
+      </div>
+    {/each}
+  </div>
\ No newline at end of file
diff --git a/frontend/src/lib/QRScan.svelte b/frontend/src/lib/QRScan.svelte
index fea0e0e..1d7f4b8 100644
--- a/frontend/src/lib/QRScan.svelte
+++ b/frontend/src/lib/QRScan.svelte
@@ -85,7 +85,7 @@
 	<reader id="reader" class="absolute w-full h-full bg-black object-cover pointer-events-none -z-20" />
 
 	<!-- svelte-ignore a11y-media-has-caption -->
-	<!-- <video
+	<video
 		bind:this={video}
 		class="h-full w-full absolute bg-black object-cover pointer-events-none -z-10"
 		playsinline
@@ -109,7 +109,7 @@
         <a href="/events/create" type="submit" class="flex justify-center items-center ml-auto text-white font-bold w-16 h-16 rounded-full mr-8 bg-accent">
             <i class="fa fa-plus text-2xl mx-auto"></i>
         </a>
-    </section> -->
+    </section>
 
 </main>
 
diff --git a/frontend/src/routes/events/+page.svelte b/frontend/src/routes/events/+page.svelte
index c8ec095..449e336 100644
--- a/frontend/src/routes/events/+page.svelte
+++ b/frontend/src/routes/events/+page.svelte
@@ -82,7 +82,7 @@
         {/each}
     </div>
     <div class="fixed bottom-20 py-3 right-8 mt-auto flex justify-between">
-        <a class="ml-auto text-white font-bold py-3 px-4 rounded-full" style="background-color:#5C3D95" href="/createevent">
+        <a class="flex justify-center items-center ml-auto text-white font-bold w-16 h-16 rounded-full" style="background-color:#5C3D95" href="/events/create">
             <i class="fa fa-plus text-2xl mx-auto"></i>
         </a>
     </div>
diff --git a/frontend/src/routes/createevent/+page.svelte b/frontend/src/routes/events/create/+page.svelte
similarity index 90%
rename from frontend/src/routes/createevent/+page.svelte
rename to frontend/src/routes/events/create/+page.svelte
index b555db6..f1c7ce9 100644
--- a/frontend/src/routes/createevent/+page.svelte
+++ b/frontend/src/routes/events/create/+page.svelte
@@ -46,13 +46,12 @@
             
             <div class="flex justify-between mt-5">
                 <div class="mt-auto flex justify-between">
-                    <a class="ml-auto text-white font-bold py-3 px-4 rounded-full" style="background-color:#CC2020" href="/events">
+                    <a class="flex justify-center items-center ml-auto text-white font-bold w-16 h-16 rounded-full" style="background-color:#CC2020" href="/events">
                         <i class="fa fa-times text-2xl mx-auto"></i>
                     </a>
                 </div>
-
                 <div class="mt-auto flex justify-between">
-                    <button type="submit" class="ml-auto text-white font-bold py-3 px-4 rounded-full" style="background-color:#5C3D95">
+                    <button type="submit" class="flex justify-center items-center ml-auto text-white font-bold w-16 h-16 rounded-full bg-accent">
                         <i class="fa fa-check text-2xl mx-auto"></i>
                     </button>
                 </div>
diff --git a/frontend/src/routes/events/join/[eventId]/+page.svelte b/frontend/src/routes/events/join/[eventId]/+page.svelte
new file mode 100644
index 0000000..2e7f6e1
--- /dev/null
+++ b/frontend/src/routes/events/join/[eventId]/+page.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+<main>
+    <p class="text-white">{$page.params.eventId}</p>
+</main>
\ No newline at end of file
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
new file mode 100644
index 0000000..9a44c23
--- /dev/null
+++ b/frontend/src/routes/register/+page.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { getUser, setUser } from '$lib/user-service';
+	import { onMount } from 'svelte';
+	import Step1 from './Step1.svelte';
+	import Step2 from './Step2.svelte';
+
+	const register = () => {
+	}
+
+	let name = "";
+
+	// const nextStep = () => {
+	// 	step++;
+	// };
+	// let step = 1;
+</script>
+
+<main
+	class="flex-grow bg-background text-center flex flex-col justify-between items-center text-white px-16 py-8 relative"
+>
+	<a
+		href="/"
+		class="bg-accent h-14 w-14 rounded-full absolute bottom-10 mb-4 right-8 flex justify-center items-center"
+	>
+		<i class="fa fa-arrow-right" />
+	</a>
+	<!-- <h1 class="text-4xl">Name</h1> -->
+	<div />
+
+	<div class="flex flex-col gap-10">
+		<h2 class="text-accent text-3xl">What should we call you?</h2>
+		<input
+			class="bg-background w-full border-b-2 border-accent text-2xl placeholder:text-accent"
+			placeholder="Your Name..."
+			minlength="2"
+			bind:value={name}
+		/>
+	</div>
+
+	<div />
+
+	<!-- {#if step === 1}
+		<Step1 />
+	{:else if step === 2}
+		<Step2 />
+	{/if} -->
+
+	<!-- <div class="w-full h-1 flex justify-between gap-3">
+		<div class="w-full bg-accent" class:bg-purple-500={step == 1} />
+		<div class="w-full bg-accent" class:bg-purple-500={step == 1} />
+	</div> -->
+</main>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 6db0e2f..96fdfd2 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -1,4 +1,7 @@
 <script>
+	import Comment from "$lib/Comment.svelte";
+	import Commentsection from "$lib/Commentsection.svelte";
+
     let username = "Hubertus"; // TODO: load username
 </script>
 
@@ -31,4 +34,4 @@
             </div>
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>