diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json
index b9406a7..beb453c 100644
--- a/frontend/svelte/package-lock.json
+++ b/frontend/svelte/package-lock.json
@@ -7,6 +7,9 @@
 		"": {
 			"name": "svelte_pages",
 			"version": "0.0.1",
+			"dependencies": {
+				"bootstrap-icons": "^1.9.1"
+			},
 			"dependencies": {
 				"nookies": "^2.5.2"
 			},
@@ -465,6 +468,11 @@
 				"file-uri-to-path": "1.0.0"
 			}
 		},
+		"node_modules/bootstrap-icons": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+			"integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2744,6 +2752,11 @@
 				"file-uri-to-path": "1.0.0"
 			}
 		},
+		"bootstrap-icons": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+			"integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+		},
 		"brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/frontend/svelte/src/routes/+layout.js b/frontend/svelte/src/routes/+layout.js
new file mode 100644
index 0000000..5829b7e
--- /dev/null
+++ b/frontend/svelte/src/routes/+layout.js
@@ -0,0 +1 @@
+export const ssr = false;
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte
index 62f1166..517b1b3 100644
--- a/frontend/svelte/src/routes/+page.svelte
+++ b/frontend/svelte/src/routes/+page.svelte
@@ -1,2 +1,231 @@
-<h1>AAAAAAAAAAAAAAa to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+    import type {Note} from "../types";
+
+    //TODO: TEMP!!!
+    const tempJson = "[{\"id\":0,\"title\":\"samc\",\"content\":\"SAAAAAAAAAAMC\",\"lastOpened\":\"2022-09-25T10:45:49.903Z\"},{\"id\":1,\"title\":\"Push\",\"content\":\"Kollege Pusch\",\"lastOpened\":\"2022-09-25T10:50:49.903Z\"},{\"id\":2,\"title\":\"Mike\",\"content\":\"C Meister\",\"lastOpened\":\"2022-09-25T10:09:13.903Z\"},{\"id\":3,\"title\":\"kekw\",\"content\":\"OMEGALUL\",\"lastOpened\":\"2022-09-25T12:03:49.903Z\"}]";
+    //TODO: TEMP!!!
+
+    let notes: Note[] = JSON.parse(tempJson);
+    sortNotesByDate();
+    window.localStorage.setItem("notes", JSON.stringify(notes));
+
+    /**
+     * Reloads the Notes Listing
+     * (by doing something very intelligent)
+     */
+    function reloadNotesListing() {
+        notes = notes.filter(i => i === i);
+    }
+
+    /**
+     * Sorts the "notes" Array by the lastOpened Property of a Note
+     */
+    function sortNotesByDate() {
+        notes.sort(function (x, y) {
+            if (x.lastOpened > y.lastOpened) {
+                return 1;
+            }
+
+            if (x.lastOpened < y.lastOpened) {
+                return -1;
+            }
+
+            return 0;
+        });
+    }
+
+    /**
+     * Gives the user a prompt to input the new title of the note and creates it if the title is valid
+     */
+    function addNotePrompt() {
+        let newTitle = prompt('Name of the new Note');
+        console.log(notes)
+        if (newTitle != null && newTitle != '') {
+            addNote(newTitle);
+            console.log(notes)
+            sortNotesByDate();
+            reloadNotesListing();
+            window.localStorage.setItem("notes", JSON.stringify(notes));
+        }
+    }
+
+    /**
+     * Adds a new note to the "notes" Array with:
+     *  * the latest id + 1 (or 0 if no notes exist)
+     *  * no content
+     * @param title The title of the new Note
+     */
+    function addNote(title: string) {
+        let date = new Date();
+        let newNoteId = (notes.length == 0) ? 0 : notes[notes.length - 1].id + 1
+        let note: Note = {
+            id: newNoteId,
+            title: title,
+            content: "",
+            lastOpened: date.toISOString()
+        };
+        notes.push(note);
+    }
+
+    /**
+     * Gives the user a prompt if they are sure to delete this note and deletes it if they confirm
+     * @param note The note to be removed
+     */
+    function removeNotePrompt(note) {
+        const reallyDelete = confirm("Do you really want to delete this Note?");
+        if (reallyDelete) {
+            removeNote(note);
+        }
+    }
+
+    /**
+     * Removes the note from the "notes" Array
+     * @param note The note to be removed
+     */
+    function removeNote(note) {
+        notes = notes.filter(i => i !== note);
+    }
+
+    /**
+     * Handle when the mouse hovers over a Note List Element
+     * @param noteId The ID of the note that is hovered over
+     */
+    function handleMouseOverLi(noteId: number) {
+        document.getElementById("noteButton" + noteId).style.display = "block";
+    }
+
+    /**
+     * Handle when the mouse exits hovering over a Note List Element
+     * @param noteId The ID of the note that is hovered over
+     */
+    function handleMouseOutLi(noteId: number) {
+        document.getElementById("noteButton" + noteId).style.display = "none";
+    }
+
+    /**
+     * Handles a click on a note list element
+     * @param note The note the user clicked on
+     */
+    function onNoteLiClick(note) {
+        window.localStorage.setItem("clickedNoteId", note.id);
+        window.location = "/editor";
+    }
+</script>
+
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>PomeloNote | Home</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+</head>
+
+<body>
+<div class="row">
+    <!-- Add Note Button -->
+    <div class="offset-md-7 col-md-1">
+        <button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
+    </div>
+
+    <div class="offset-md-4 col-md-4">
+        <!-- Notes listing -->
+        <ul>
+            {#each notes as note}
+                <li on:mouseover={() => handleMouseOverLi(note.id)}
+                    on:mouseout={() => handleMouseOutLi(note.id)}>
+                    <div class="row">
+                        <div class="col-md-10" on:click={() => onNoteLiClick(note)}>
+                        <span>
+                            {note.title} <br/>
+                            {note.lastOpened}
+                        </span>
+                        </div>
+                        <div class="col-md-1">
+                            <button style="display: none" id={"noteButton" + note.id}
+                                    on:click={() => removeNotePrompt(note)}>
+                                <i class="bi bi-x"></i>
+                            </button>
+                        </div>
+                    </div>
+                </li>
+            {/each}
+        </ul>
+    </div>
+</div>
+</body>
+</html>
+
+<style>
+    html,
+    :root {
+        --main-txt-color: black;
+        --cross-txt-color: red;
+
+        --color-primary: #fff494;
+        --color-primary-600: #fff17a;
+        --color-primary-700: #ffec47;
+        --color-primary-800: #ffe714;
+        --color-primary-900: #e0c900;
+    }
+
+    body {
+        height: 100%;
+        padding-top: 40px;
+        padding-bottom: 40px;
+        background-color: #ffffff;
+    }
+
+    a {
+        color: var(--main-txt-color);
+        text-decoration: none;
+    }
+
+    li {
+        list-style: none;
+        padding: 6px 10px;
+        border-bottom: 1px solid #ddd;
+        border-bottom-color: var(--color-primary-900);
+        background-color: var(--color-primary-600);
+    }
+
+    li button {
+        float: right;
+        border: none;
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        font-size: 18px;
+        cursor: pointer;
+    }
+
+    li button:hover {
+        transform: scale(1.7);
+    }
+
+    li:last-child {
+        border-bottom: none;
+    }
+
+    ul {
+        padding-left: 0;
+    }
+
+    .bi-x {
+        color: var(--cross-txt-color);
+    }
+
+    .btn-primary {
+        background-color: var(--color-primary-800);
+        border: var(--color-primary-800);
+        color: var(--main-txt-color);
+    }
+
+    .btn-primary:hover {
+        background-color: var(--color-primary-900);
+        border: var(--color-primary-900);
+        color: var(--main-txt-color);
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/editor/+page.svelte b/frontend/svelte/src/routes/editor/+page.svelte
new file mode 100644
index 0000000..eeab65c
--- /dev/null
+++ b/frontend/svelte/src/routes/editor/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type {Note} from "../../types";
+
+    let notes: Note[] = JSON.parse(window.localStorage.getItem("notes"));
+    const clickedNoteId = window.localStorage.getItem("clickedNoteId");
+
+    const currNote = notes.find((note)=>{
+        return note.id === parseInt(clickedNoteId);
+    });
+</script>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{"Pomelonote | Edit " + currNote.title}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+</head>
+
+<html lang="en">
+<div class="offset-3 col-6">
+    {currNote.content}
+</div>
+</html>
diff --git a/frontend/svelte/src/types.ts b/frontend/svelte/src/types.ts
new file mode 100644
index 0000000..9814953
--- /dev/null
+++ b/frontend/svelte/src/types.ts
@@ -0,0 +1,6 @@
+export interface Note {
+    id: number;
+    title: string;
+    content: string;
+    lastOpened: string;
+}
\ No newline at end of file