diff --git a/README.md b/README.md
index 00740cd..57160d6 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,14 @@
 # 🚀 Getting started with PomeloNote
 
+## Setup
+- run `npm i`
+- get the .env file and save it to the root directory of the project
+- set up Strapi  
+  - go to `localhost:1337/admin`
+  - register an admin user
+  - go to Settings => Users&Permissions Plugin => Roles => Authenticated => Note => Select all
+  - Save
+
 ### Starting the container with svelte and strapi:
 ``docker-compose up --build -d``
 
diff --git a/backend/strapi/src/api/note/controllers/note.js b/backend/strapi/src/api/note/controllers/note.js
index 4f3cd54..84e7a8d 100644
--- a/backend/strapi/src/api/note/controllers/note.js
+++ b/backend/strapi/src/api/note/controllers/note.js
@@ -50,6 +50,9 @@ module.exports = createCoreController(noteUid, ({strapi}) => ({
           lastViewed: Date.now()
         }
       })
+      entry = await strapi.entityService.findOne(noteUid, noteId, {
+        populate: ['owners'],
+      });
       return JSON.stringify(entry);
     } else {
       ctx.response.status = 403;
diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json
index 63551ad..d5c5126 100644
--- a/frontend/svelte/package-lock.json
+++ b/frontend/svelte/package-lock.json
@@ -9,7 +9,9 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"bootstrap-icons": "^1.9.1",
-				"nookies": "^2.5.2"
+				"nookies": "^2.5.2",
+				"sv-popup": "^0.2.5",
+				"webworker": "^0.8.4"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
@@ -2083,6 +2085,11 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/sv-popup": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/sv-popup/-/sv-popup-0.2.5.tgz",
+			"integrity": "sha512-JhBu4piXaauamT4vMEcFCydvxJ8e72G7c9F3caZVAPsiFqWPTYT3JDz99FlR+YCnbOp1emsZqqOPVvCwHgURog=="
+		},
 		"node_modules/svelte": {
 			"version": "3.50.1",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
@@ -2358,6 +2365,14 @@
 			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
 			"dev": true
 		},
+		"node_modules/webworker": {
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/webworker/-/webworker-0.8.4.tgz",
+			"integrity": "sha512-zzsVxtHf+mCn0WuYLarSWfRGmX7JiYKkKvso5FYC7rJ9G8svwGQA5a51Sjq9D2c/rKVU6U/kyBcaI7gUTVlsJg==",
+			"engines": {
+				"node": ">=0.4.3"
+			}
+		},
 		"node_modules/whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -3824,6 +3839,11 @@
 			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
 			"dev": true
 		},
+		"sv-popup": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/sv-popup/-/sv-popup-0.2.5.tgz",
+			"integrity": "sha512-JhBu4piXaauamT4vMEcFCydvxJ8e72G7c9F3caZVAPsiFqWPTYT3JDz99FlR+YCnbOp1emsZqqOPVvCwHgURog=="
+		},
 		"svelte": {
 			"version": "3.50.1",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.50.1.tgz",
@@ -3981,6 +4001,11 @@
 			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
 			"dev": true
 		},
+		"webworker": {
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/webworker/-/webworker-0.8.4.tgz",
+			"integrity": "sha512-zzsVxtHf+mCn0WuYLarSWfRGmX7JiYKkKvso5FYC7rJ9G8svwGQA5a51Sjq9D2c/rKVU6U/kyBcaI7gUTVlsJg=="
+		},
 		"whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
diff --git a/frontend/svelte/package.json b/frontend/svelte/package.json
index 7ea33f8..81a0887 100644
--- a/frontend/svelte/package.json
+++ b/frontend/svelte/package.json
@@ -22,7 +22,9 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"bootstrap-icons": "^1.9.1",
 		"nookies": "^2.5.2",
-		"bootstrap-icons": "^1.9.1"
+		"sv-popup": "^0.2.5",
+		"webworker": "^0.8.4"
 	}
 }
diff --git a/frontend/svelte/src/app.html b/frontend/svelte/src/app.html
index 07daf74..9d5ca24 100644
--- a/frontend/svelte/src/app.html
+++ b/frontend/svelte/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="emerald">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="../src/resources/images/logo2.svg" />
@@ -9,11 +9,5 @@
 	</head>
 	<body>
 		<div>%sveltekit.body%</div>
-
-		<script>
-			if('serviceworker' in navigator){
-				navigator.serviceworker.register('./service-worker.js');
-			}
-		</script>
 	</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte
index 8cf3cce..e744ac0 100644
--- a/frontend/svelte/src/routes/+page.svelte
+++ b/frontend/svelte/src/routes/+page.svelte
@@ -3,7 +3,9 @@
     import {onMount} from "svelte";
     import {StrapiNoteRepository} from "../models/repos/note/StrapiNoteRepository";
     import {StrapiUserRepo} from "../models/repos/user/StrapiUserRepo";
+    import {Content, Modal, Trigger} from "sv-popup";
 
+    const sleep = (ms) => new Promise(r => setTimeout(r, ms));
     const noteRepo: StrapiNoteRepository = StrapiNoteRepository.getInstance();
     let notes: Note[];
 
@@ -13,7 +15,6 @@
         notes.forEach(note => {
             note.lastViewed = new Date(note.lastViewed);
         });
-        console.log(notes);
     });
 
     /**
@@ -23,7 +24,6 @@
         const newTitle = "New Note";
         const newNote = await addNote(newTitle);
         noteRepo.currentNoteId = newNote.id;
-        console.log(newNote.id);
         window.location = "/editor";
     }
 
@@ -32,23 +32,12 @@
      * @param title The title of the new Note
      * @return The created Note Object
      */
-    async function addNote(title: string) : Promise<Note> {
+    async function addNote(title: string): Promise<Note> {
         return await noteRepo.createNote({title: title,});
     }
 
     /**
-     * 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 deleted
-     */
-    function deleteNotePrompt(note) {
-        const reallyDelete = confirm("Do you really want to delete this Note?");
-        if (reallyDelete) {
-            deleteNote(note);
-        }
-    }
-
-    /**
-     * Deletes the note from the "notes" Array
+     * Deletes the note from the "notes" Array and the database
      * @param note The note to be deleted
      */
     function deleteNote(note) {
@@ -73,13 +62,24 @@
     }
 
     /**
-     * Handles a click on a note list element
+     * Sets the currentNoteId and redirects to the editor
      * @param note The note the user clicked on
      */
     function onNoteLiClick(note) {
         noteRepo.currentNoteId = note.id;
         window.location = "/editor";
     }
+
+    /**
+     * Closes the modal (popup for deletion)
+     */
+    async function closeModal() {
+        closeModalBool = true;
+        await sleep(1);
+        closeModalBool = false;
+    }
+
+    let closeModalBool = false;
 </script>
 
 
@@ -95,6 +95,7 @@
 
 <body>
 <div class="container">
+
     <div class="row">
         <!-- Add Note Button -->
         <div class="offset-md-7 col-md-1">
@@ -121,10 +122,34 @@
                                 </div>
 
                                 <div class="col-1">
-                                    <button style="display: none" id={"noteButton" + note.id}
-                                            on:click={() => deleteNotePrompt(note)}>
-                                        <i class="bi bi-x"></i>
-                                    </button>
+                                    <!-- Delete Note Popup -->
+                                    <Modal basic small={true} button={false} close={closeModalBool}>
+                                        <Content>
+                                            <div class="row" style="margin-bottom: 10px;">
+                                                <h5>Do you really want to delete the "{note.title}" note?</h5>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-4 offset-2">
+                                                    <button class="btn btn-primary"
+                                                            on:click={() => deleteNote(note)}
+                                                            on:click={() => closeModal()}>
+                                                        <b>Yes</b>
+                                                    </button>
+                                                </div>
+                                                <div class="col-4 offset-2">
+                                                    <button class="btn btn-primary" autofocus
+                                                            on:click={() => closeModal()}>
+                                                        <b>No</b>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </Content>
+                                        <Trigger>
+                                            <button style="display: none" id={"noteButton" + note.id}>
+                                                <i class="bi bi-x"></i>
+                                            </button>
+                                        </Trigger>
+                                    </Modal>
                                 </div>
                             </div>
                         </li>
@@ -138,17 +163,11 @@
 </html>
 
 <style>
+    @import "../customBootstrap.css";
+
     html,
     :root {
-        --main-txt-color: black;
         --sub-txt-color: gray;
-        --cross-txt-color: red;
-
-        --color-primary: #fff494;
-        --color-primary-600: #fff17a;
-        --color-primary-700: #ffec47;
-        --color-primary-800: #ffe714;
-        --color-primary-900: #e0c900;
     }
 
     body {
@@ -202,18 +221,6 @@
         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);
-    }
-
     .list-date-text {
         color: var(--sub-txt-color);
         font-size: 0.8314159265358979323846264338rem;
diff --git a/frontend/svelte/src/service-worker.js b/frontend/svelte/src/service-worker.js
index e848ac5..15b45e1 100644
--- a/frontend/svelte/src/service-worker.js
+++ b/frontend/svelte/src/service-worker.js
@@ -1,6 +1,78 @@
-importScripts('https://storage.googleapis.com/workbos-cdn/releases/6.0.2/workbox-sw.js');
+/// <reference lib="webworker" />
 
-workbox.routing.registerRoute(
-    ({request}) => request.destination === 'image',
-    new workbox.strategies.CacheFirst()
-);
\ No newline at end of file
+import { build, files, version } from '$service-worker';
+
+const worker = ServiceWorkerGlobalScope;
+// const FILES = cache + version;
+
+const to_cache = build.concat(files);
+const staticAssets = new Set(to_cache);
+
+worker.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches
+            .open(FILES)
+            .then((cache) => cache.addAll(to_cache))
+            .then(() => {
+                worker.skipWaiting();
+            })
+    );
+});
+
+worker.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then(async (keys) => {
+            // delete old caches
+            for (const key of keys) {
+                if (key !== FILES) await caches.delete(key);
+            }
+
+            worker.clients.claim();
+        })
+    );
+});
+
+/**
+ * Fetch the asset from the network and store it in the cache.
+ * Fall back to the cache if the user is offline.
+ */
+async function fetchAndCache(request) {
+    const cache = await caches.open(offline + version);
+
+    try {
+        const response = await fetch(request);
+        cache.put(request, response.clone());
+        return response;
+    } catch (err) {
+        const response = await cache.match(request);
+        if (response) return response;
+
+        throw err;
+    }
+}
+
+worker.addEventListener('fetch', (event) => {
+    if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+    const url = new URL(event.request.url);
+
+    // don't try to handle e.g. data: URIs
+    const isHttp = url.protocol.startsWith('http');
+    const isDevServerRequest =
+        url.hostname === self.location.hostname && url.port !== self.location.port;
+    const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
+    const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
+
+    if (isHttp && !isDevServerRequest && !skipBecauseUncached) {
+        event.respondWith(
+            (async () => {
+                // always serve static files and bundler-generated assets from cache.
+                // if your application has other URLs with data that will never change,
+                // set this variable to true for them and they will only be fetched once.
+                const cachedAsset = isStaticAsset && (await caches.match(event.request));
+
+                return cachedAsset || fetchAndCache(event.request);
+            })()
+        );
+    }
+});
\ No newline at end of file
diff --git a/frontend/svelte/static/manifest.json b/frontend/svelte/static/manifest.json
index 2eb39ea..654b436 100644
--- a/frontend/svelte/static/manifest.json
+++ b/frontend/svelte/static/manifest.json
@@ -1,34 +1,41 @@
 {
-  "background_color": "#ffffff",
-  "theme_color": "#ff6600",
-  "name": "Pomelo Note",
-  "short_name": "Pomelo",
-  "display": "minimal-ui",
-  "start_url": "/",
-  "icons": [
-    {
-      "src": "../resources/icons/android-icon-36x36.png",
-      "sizes": "36x36",
-      "type": "image\/png",
-      "density": "0.75"
-    },
-    {
-      "src": "../resources/icons/android-icon-48x48.png",
-      "sizes": "48x48",
-      "type": "image\/png",
-      "density": "1.0"
-    },
-    {
-      "src": "../resources/icons/android-icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image\/png",
-      "density": "1.5"
-    },
-    {
-      "src": "../resources/icons/android-icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image\/png",
-      "density": "2.0"
-    }
-  ]
+	"lang": "en",
+	"dir": "/",
+	"name": "Pomelo Note",
+	"short_name": "Pomelo",
+	"description": "Best Note App",
+	"theme_color": "#000",
+	"background_color": "#000",
+	"display": "standalone",
+	"orientation": "portrait",
+	"prefer_related_applications": false,
+	"scope": "/",
+	"start_url": "/",
+	"icons": [
+		{
+			"src": "../resources/icons/android-icon-36x36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": "0.75"
+		},
+		{
+			"src": "../resources/icons/android-icon-48x48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": "1.0"
+		},
+		{
+			"src": "../resources/icons/android-icon-72x72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": "1.5"
+		},
+		{
+			"src": "../resources/icons/android-icon-96x96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": "2.0"
+		}
+	],
+	"splash_pages": null
 }
\ No newline at end of file