diff --git a/README.md b/README.md
index 3a87e43..da3ee1e 100644
--- a/README.md
+++ b/README.md
@@ -4,12 +4,11 @@ _Learn, repeat and memorize tasks with repeatio._
 
 ## [Start Learning](https://repeatio.netlify.app)
 
-## :construction: Current limitations (v0.3) :construction:
+## :construction: Current limitations (v0.4) :construction:
 
 > **Warning**  
 > Not all browser and devices are supported!  
 > Currently not all UI elements are working (e.g. module progress)!  
-> Editing and deleting questions only works when using the default practice mode (not random/saved)!  
 > Only use Electron if you know how to edit .json files. The website should work just fine for most users.  
 
 ## Browser Support
@@ -98,9 +97,6 @@ The order of the questions is random but each question will only be shown once.
 
 <img src="./.github/Docs/assets/images/practice-random.png" height="180px" />
 
-> **Warning**  
-> Don't delete or edit questions when using this mode!
-
 ### Bookmarked
 
 To practice with the questions you bookmarked navigate to the module and click the `Start >` button inside `Bookmarked Questions`.  
@@ -108,9 +104,6 @@ The questions are in the order that they were saved in. **[Read](#bookmarked-que
 
 <img src="./.github/Docs/assets/images/train-bookmarked-questions.png" alt="Train Bookmarked Questions" height="180px"/>
 
-> **Warning**  
-> Don't delete or edit questions when using this mode!
-
 ## Adding and editing Questions
 
 ### Add a new Question
@@ -130,9 +123,6 @@ The questions are in the order that they were saved in. **[Read](#bookmarked-que
 > **Note**  
 > On mobile you may have to first extend the bottom of the navigation
 
-> **Warning**  
-> Editing questions while using the mode random or saved Question is currently not supported!
-
 ### Question Editor
 
 #### Fields
@@ -193,7 +183,7 @@ The questions are in the order that they were saved in. **[Read](#bookmarked-que
   }
   ```
 
-  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-1?mode=chronological)_**
+  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-1?mode=practice&order=chronological)_**
 
 </details>
 
@@ -251,7 +241,7 @@ The questions are in the order that they were saved in. **[Read](#bookmarked-que
   }
   ```
 
-  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-2?mode=chronological)_**
+  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-2?mode=practice&order=chronological)_**
 
 </details>
 
@@ -292,7 +282,7 @@ The questions are in the order that they were saved in. **[Read](#bookmarked-que
   }
   ```
 
-  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-3?mode=chronological)_**
+  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-3?mode=practice&order=chronological)_**
 
 </details>
 
@@ -343,7 +333,7 @@ The questions are in the order that they were saved in. **[Read](#bookmarked-que
   }
   ```
 
-  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-4?mode=chronological)_**
+  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-4?mode=practice&order=chronological)_**
 
 </details>
 
@@ -406,7 +396,7 @@ The questions are in the order that they were saved in. **[Read](#bookmarked-que
   }
   ```
 
-  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-5?mode=chronological)_**
+  **_[Result](https://repeatio.netlify.app/module/types_1/question/qID-5?mode=practice&order=chronological)_**
 
 </details>
 
diff --git a/cypress/e2e/QuestionOverview.cy.ts b/cypress/e2e/QuestionOverview.cy.ts
index d5cc8f5..eaf13a7 100644
--- a/cypress/e2e/QuestionOverview.cy.ts
+++ b/cypress/e2e/QuestionOverview.cy.ts
@@ -23,18 +23,21 @@ describe("Show questions of a module", () => {
 
     it("should navigate to the question if clicking on an arrow inside an item", () => {
       cy.visit("/module/cypress_1/all-questions");
-      cy.get("#question-qID-2").find("button.button-to-question").click();
+      cy.get("#question-qID-2").find("a.link-to-question").click();
       cy.contains("Multiple Response questions have at least one correct answer.").should("exist");
+      cy.url().should("include", "/module/cypress_1/question/qID-2?mode=practice&order=chronological");
     });
   });
 
   context("Types bookmarked fixture", () => {
-    it("should reset filteredQuestions when clicking arrow", () => {
+    it("should reset question ids in the context when clicking arrow", () => {
+      cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+
       // Add bookmarked questions
-      cy.fixtureToLocalStorage("repeatio-marked-types_1.json");
+      cy.fixtureToLocalStorage("repeatio-marked-cypress_1.json");
 
       // navigate to module
-      cy.visit("/module/types_1");
+      cy.visit("/module/cypress_1");
 
       // Visit bookmarked questions
       cy.get("article[data-cy='Bookmarked Questions']").contains("Start").click();
@@ -46,7 +49,7 @@ describe("Show questions of a module", () => {
       cy.get("a[aria-label='View all Questions']").click();
 
       // Visit a question that is not in the bookmarked questions array
-      cy.get("#question-qID-5").find("button.button-to-question").click();
+      cy.get("#question-qID-5").find("a.link-to-question").click();
 
       // Check if question is shown
       cy.contains("This is a question of the type Extended Match.").should("exist");
diff --git a/cypress/e2e/addQuestions.cy.ts b/cypress/e2e/addQuestions.cy.ts
index 47ed036..79538a8 100644
--- a/cypress/e2e/addQuestions.cy.ts
+++ b/cypress/e2e/addQuestions.cy.ts
@@ -247,7 +247,7 @@ describe("Adding a question of type gap-text", () => {
     cy.get("textarea#editor-gap-text-textarea").type("This is a simple [test]");
     cy.get("button[type='submit']").click();
 
-    cy.visit("/module/empty-questions/question/test-id");
+    cy.visit("/module/empty-questions/question/test-id?mode=practice&order=chronological");
     cy.get("section.question-user-response").find("input").type("test");
     cy.get("button[type='submit']").click();
     cy.contains("Yes, that's correct!").should("exist");
@@ -257,7 +257,7 @@ describe("Adding a question of type gap-text", () => {
     cy.get("textarea#editor-gap-text-textarea").type("[This] is a [complex] [test]", { force: true });
     cy.get("button[type='submit']").click();
 
-    cy.visit("/module/empty-questions/question/test-id");
+    cy.visit("/module/empty-questions/question/test-id?mode=practice&order=chronological");
     cy.get("section.question-user-response").find("input").first().type("This");
     cy.get("section.question-user-response").find("input").eq(1).type("complex");
     cy.get("section.question-user-response").find("input").last().type("test");
@@ -269,7 +269,7 @@ describe("Adding a question of type gap-text", () => {
     cy.get("textarea#editor-gap-text-textarea").type("This text supports [multiple; more than one] correct values");
     cy.get("button[type='submit']").click();
 
-    cy.visit("/module/empty-questions/question/test-id");
+    cy.visit("/module/empty-questions/question/test-id?mode=practice&order=chronological");
     cy.get("section.question-user-response").find("input").type("more than one");
     cy.get("button[type='submit']").click();
     cy.contains("Yes, that's correct!").should("exist");
@@ -301,7 +301,7 @@ describe("Adding a question of type gap-text", () => {
     cy.get("textarea#editor-gap-text-textarea").type("This text is [split] into{enter}two[lines]");
     cy.get("button[type='submit']").click();
 
-    cy.visit("/module/empty-questions/question/test-id");
+    cy.visit("/module/empty-questions/question/test-id?mode=practice&order=chronological");
     cy.get("div.question-gap-text").invoke("height").should("be.greaterThan", 45);
     cy.get("section.question-user-response").find("input").should("have.length", 2);
   });
@@ -313,7 +313,7 @@ describe("Adding a question of type gap-text", () => {
     );
     cy.get("button[type='submit']").click();
 
-    cy.visit("/module/empty-questions/question/test-id");
+    cy.visit("/module/empty-questions/question/test-id?mode=practice&order=chronological");
     cy.get("table").should("exist").and("be.visible");
   });
 
@@ -335,7 +335,7 @@ describe("Adding a question of type gap-text", () => {
         expect((addedQuestion?.answerOptions as IGapText).correctGapValues).to.deep.eq([["This"], ["gap", "hole"]]);
       });
 
-    cy.visit("/module/empty-questions/question/test-id");
+    cy.visit("/module/empty-questions/question/test-id?mode=practice&order=chronological");
     cy.contains("a", "link").should("exist");
     cy.contains("a", "another link").should("exist");
     cy.get("section.question-user-response").find("input").first().type("This");
@@ -369,7 +369,7 @@ describe("Adding a question of type gap-text", () => {
         expect((addedQuestion?.answerOptions as IGapText).correctGapValues).to.deep.eq([["gap", "hole"]]);
       });
 
-    cy.visit("/module/empty-questions/question/test-id");
+    cy.visit("/module/empty-questions/question/test-id?mode=practice&order=chronological");
     cy.get("img").invoke("height").should("equal", 256);
     cy.get("section.question-user-response").find("input").should("have.length", 1);
   });
diff --git a/cypress/e2e/bookmarkedQuestions.cy.ts b/cypress/e2e/bookmarkedQuestions.cy.ts
index 4f05643..c6f87d8 100644
--- a/cypress/e2e/bookmarkedQuestions.cy.ts
+++ b/cypress/e2e/bookmarkedQuestions.cy.ts
@@ -5,17 +5,27 @@ import {
   getBookmarkedQuestionsFromModule,
   IBookmarkedQuestions,
 } from "../../src/components/Question/components/Actions/BookmarkQuestion";
+import { parseJSON } from "../../src/utils/parseJSON";
 
 /* ------------------------------------Bookmark in Module Overview ------------------------------ */
 describe("Test usage of bookmarked Questions in module overview", () => {
   //Add fixture to localStorage and navigate to module url
   beforeEach(() => {
-    cy.visit("/module/types_1");
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1");
+  });
+
+  it("should changed the url to mode bookmarked on navigation", () => {
+    // Add bookmarked items to localStorage
+    cy.fixtureToLocalStorage("repeatio-marked-cypress_1.json");
+
+    cy.get("article[data-cy='Bookmarked Questions']").contains("button", "Start").click();
+    cy.url().should("include", "/module/cypress_1/question/qID-1?mode=bookmarked&order=chronological");
   });
 
   it("should display questions that are marked in the localStorage", () => {
     //Setup localStorage
-    cy.fixtureToLocalStorage("repeatio-marked-types_1.json");
+    cy.fixtureToLocalStorage("repeatio-marked-cypress_1.json");
 
     //Click on start
     cy.get("article[data-cy='Bookmarked Questions']").contains("button", "Start").click();
@@ -33,6 +43,54 @@ describe("Test usage of bookmarked Questions in module overview", () => {
     cy.get("article[data-cy='Bookmarked Questions']").contains("button", "Start").click();
     cy.contains("Found 0 bookmarked questions for this module!");
   });
+
+  it("should support removing and editing of question id while viewing bookmarked questions", () => {
+    /* Szenario:
+      1. View bookmarked questions
+      2. Remove question from bookmarked items
+      3. Edit id of this question
+      4. Navigate for and back */
+    // Add bookmarked items to localStorage
+    cy.fixtureToLocalStorage("repeatio-marked-cypress_1.json");
+
+    cy.get("article[data-cy='Bookmarked Questions']").contains("button", "Start").click();
+
+    // Unsave the question
+    cy.get("button[aria-label='Unsave Question'").click();
+
+    // Edit the question id
+    cy.get("button[aria-label='Edit Question'").click();
+    cy.get("input[name='id']").type("0");
+    cy.contains("button", "Update").click();
+
+    // Assert that the question id changed
+    cy.contains("ID: qID-10").should("exist");
+
+    // Navigate to next question and back
+    cy.get("button[aria-label='Navigate to next Question']").click();
+    cy.contains("ID: qID-3").should("exist");
+    cy.get("button[aria-label='Navigate to previous Question']").click();
+    cy.contains("ID: qID-10").should("exist");
+  });
+
+  it("should start bookmarked practice with question that exists and show warning in console", () => {
+    const bookmarkedFile = {
+      id: "cypress_1",
+      type: "marked",
+      compatibility: "0.4.0",
+      questions: ["invalid-id", "qID-1", "also-invalid"],
+    };
+
+    // Update the localStorage with the new item
+    localStorage.setItem("repeatio-marked-cypress_1", JSON.stringify(bookmarkedFile, null, "\t"));
+
+    // Start practicing with bookmarked questions
+    cy.get("article[data-cy='Bookmarked Questions']").contains("button", "Start").click();
+
+    cy.url().should("include", "module/cypress_1/question/qID-1?mode=bookmarked&order=chronological");
+
+    // Get url
+  });
 });
 
 /* --------------------------------------------- EXPORT ----------------------------------------- */
@@ -47,7 +105,8 @@ describe("Test export of bookmarked Questions", () => {
 
   //navigate to module url
   beforeEach(() => {
-    cy.visit("/module/types_1", {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1", {
       onBeforeLoad(win) {
         cy.spy(win.console, "log").as("consoleLog");
         cy.stub(win.console, "error").as("consoleError");
@@ -59,16 +118,16 @@ describe("Test export of bookmarked Questions", () => {
 
   it("should download marked questions from localStorage", () => {
     //Add fixture to localStorage
-    cy.fixtureToLocalStorage("repeatio-marked-types_1.json");
+    cy.fixtureToLocalStorage("repeatio-marked-cypress_1.json");
 
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
     cy.contains("li", "Export").click();
 
-    const downloadedFilename = path.join(downloadsFolder, "repeatio-marked-types_1.json");
+    const downloadedFilename = path.join(downloadsFolder, "repeatio-marked-cypress_1.json");
 
     //Compare the downloaded file with the original file in the localStorage (which comes from a fixture)
     cy.readFile(downloadedFilename).then((downloadedContent) => {
-      cy.fixture("repeatio-marked-types_1.json").then((fixtureContent) => {
+      cy.fixture("repeatio-marked-cypress_1.json").then((fixtureContent) => {
         expect(downloadedContent).to.deep.equal(fixtureContent);
       });
     });
@@ -80,12 +139,12 @@ describe("Test export of bookmarked Questions", () => {
 
     //Test toast and console.error
     cy.get(".Toastify").contains(
-      `Failed to export the bookmarked questions for "types_1" because there aren't any bookmarked questions!`
+      `Failed to export the bookmarked questions for "cypress_1" because there aren't any bookmarked questions!`
     );
 
     cy.get("@consoleError").should(
       "be.calledWithMatch",
-      /\[.*\] Failed to export the bookmarked questions for "types_1" because there aren't any bookmarked questions\!/
+      /\[.*\] Failed to export the bookmarked questions for "cypress_1" because there aren't any bookmarked questions\!/
     );
   });
 });
@@ -95,23 +154,24 @@ describe("Test export of bookmarked Questions", () => {
 describe("Test import of bookmarked Questions", () => {
   //Add fixture to localStorage and navigate to module url
   beforeEach(() => {
-    cy.fixtureToLocalStorage("repeatio-marked-types_1.json");
-    cy.visit("/module/types_1");
+    cy.fixtureToLocalStorage("repeatio-marked-cypress_1.json");
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1");
   });
 
   it("should import bookmarked Questions", () => {
     //Remove localStorage that was added by beforeEach hook
-    cy.clearLocalStorage("repeatio-marked-types_1");
+    cy.clearLocalStorage("repeatio-marked-cypress_1");
 
     //Find popover button (3 dots)
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
 
-    cy.fixture("repeatio-marked-types_1.json").then((fileContent) => {
+    cy.fixture("repeatio-marked-cypress_1.json").then((fileContent) => {
       cy.get("input[type=file]")
-        .selectFile({ contents: fileContent, fileName: "repeatio-marked-types_1.json" }, { force: true })
+        .selectFile({ contents: fileContent, fileName: "repeatio-marked-cypress_1.json" }, { force: true })
         .should(() => {
-          const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("types_1");
-          expect(bookmarkedLocalStorageItem?.id).to.equal("types_1");
+          const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("cypress_1");
+          expect(bookmarkedLocalStorageItem?.id).to.equal("cypress_1");
           expect(bookmarkedLocalStorageItem?.type).to.equal("marked");
           expect(bookmarkedLocalStorageItem?.questions).to.deep.equal(["qID-1", "qID-3"]);
         });
@@ -126,13 +186,13 @@ describe("Test import of bookmarked Questions", () => {
 
     //Build new file
     //Note that "qID-1" is already in the localStorage and "id-does-not-exist" is not present as a question id. These values should therefore be ignored
-    const file = buildBookmarkFile("types_1", ["qID-1", "id-does-not-exist", "qID-4"]);
+    const file = buildBookmarkFile("cypress_1", ["qID-1", "id-does-not-exist", "qID-4"]);
 
     cy.get("input[type=file]")
       .selectFile(file, { force: true })
       .should(() => {
-        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("types_1");
-        expect(bookmarkedLocalStorageItem?.id).to.equal("types_1");
+        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("cypress_1");
+        expect(bookmarkedLocalStorageItem?.id).to.equal("cypress_1");
         expect(bookmarkedLocalStorageItem?.questions).to.deep.equal(["qID-1", "qID-3", "qID-4"]);
       });
 
@@ -150,12 +210,12 @@ describe("Test import of bookmarked Questions", () => {
   it("should add imported items to the localStorage if there are more items in the import than the original storage", () => {
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
 
-    const file = buildBookmarkFile("types_1", ["qID-2", "qID-4", "qID-5", "qID-6"]);
+    const file = buildBookmarkFile("cypress_1", ["qID-2", "qID-4", "qID-5", "qID-6"]);
 
     cy.get("input[type=file]")
       .selectFile(file, { force: true })
       .should(() => {
-        const bookmarkedLocalStorageItem = getBookmarkedQuestionsFromModule("types_1");
+        const bookmarkedLocalStorageItem = getBookmarkedQuestionsFromModule("cypress_1");
         expect(bookmarkedLocalStorageItem).to.deep.equal(["qID-1", "qID-3", "qID-2", "qID-4", "qID-5", "qID-6"]);
       });
   });
@@ -164,13 +224,13 @@ describe("Test import of bookmarked Questions", () => {
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
 
     //Build file to add
-    const file = buildBookmarkFile("types_1", []);
+    const file = buildBookmarkFile("cypress_1", []);
 
     cy.get("input[type=file]")
       .selectFile(file, { force: true })
       .should(() => {
-        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("types_1");
-        expect(bookmarkedLocalStorageItem?.id).to.equal("types_1");
+        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("cypress_1");
+        expect(bookmarkedLocalStorageItem?.id).to.equal("cypress_1");
         expect(bookmarkedLocalStorageItem?.questions).to.deep.equal(["qID-1", "qID-3"]);
       });
   });
@@ -180,14 +240,14 @@ describe("Test import of bookmarked Questions", () => {
 
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
 
-    const file = buildBookmarkFile("types_1", ["qID-2", "qID-4", "qID-5"]);
+    const file = buildBookmarkFile("cypress_1", ["qID-2", "qID-4", "qID-5"]);
 
     cy.get("input[type=file]")
       .selectFile(file, { force: true })
       .should(() => {
-        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("types_1");
+        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("cypress_1");
 
-        expect(bookmarkedLocalStorageItem?.id).to.equal("types_1");
+        expect(bookmarkedLocalStorageItem?.id).to.equal("cypress_1");
         expect(bookmarkedLocalStorageItem?.questions).to.deep.equal(["qID-2", "qID-4", "qID-5"]);
       });
   });
@@ -196,14 +256,14 @@ describe("Test import of bookmarked Questions", () => {
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
     //Notice these values are only duplicates (but in different order that the fixture)
 
-    const file = buildBookmarkFile("types_1", ["qID-3", "qID-1"]);
+    const file = buildBookmarkFile("cypress_1", ["qID-3", "qID-1"]);
 
     cy.get("input[type=file]")
       .selectFile(file, { force: true })
       .should(() => {
-        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("types_1");
+        const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("cypress_1");
 
-        expect(bookmarkedLocalStorageItem?.id).to.equal("types_1");
+        expect(bookmarkedLocalStorageItem?.id).to.equal("cypress_1");
         expect(bookmarkedLocalStorageItem?.questions).to.deep.equal(["qID-1", "qID-3"]);
       });
   });
@@ -214,7 +274,8 @@ describe("Test import of bookmarked Questions", () => {
 describe("Test deletion of bookmarked Questions", () => {
   //Navigate to module url and spy on console
   beforeEach(() => {
-    cy.visit("/module/types_1", {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1", {
       onBeforeLoad(win) {
         cy.spy(win.console, "log").as("consoleLog");
         cy.stub(win.console, "error").as("consoleError");
@@ -226,30 +287,30 @@ describe("Test deletion of bookmarked Questions", () => {
 
   it("should delete bookmarked questions on delete click", () => {
     //Setup localStorage with fixture
-    cy.fixtureToLocalStorage("repeatio-marked-types_1.json");
+    cy.fixtureToLocalStorage("repeatio-marked-cypress_1.json");
 
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
     cy.contains("li", "Delete")
       .click()
       .should(() => {
-        expect(localStorage.getItem("repeatio-marked-types_1")).to.be.null;
+        expect(localStorage.getItem("repeatio-marked-cypress_1")).to.be.null;
       });
 
     //Check with ui
     cy.get("article[data-cy='Bookmarked Questions']").contains("button", "Start").click();
     cy.contains("Found 0 bookmarked questions for this module!");
 
-    cy.contains(`Deleted bookmarked questions for "types_1"!`);
-    cy.get("@consoleLog").should("be.calledWithMatch", /\[.*\] Deleted bookmarked questions for "types_1"\!/);
+    cy.contains(`Deleted bookmarked questions for "cypress_1"!`);
+    cy.get("@consoleLog").should("be.calledWithMatch", /\[.*\] Deleted bookmarked questions for "cypress_1"\!/);
   });
 
   it("should show error if trying to delete bookmarked questions but 0 questions are defined", () => {
     cy.get("article[data-cy='Bookmarked Questions']").find("button.popover-button").click();
     cy.contains("li", "Delete").click();
-    cy.contains(`Failed to delete the bookmarked questions for "types_1" because there are 0 questions saved!`);
+    cy.contains(`Failed to delete the bookmarked questions for "cypress_1" because there are 0 questions saved!`);
     cy.get("@consoleError").should(
       "be.calledWithMatch",
-      /\[.*\] Failed to delete the bookmarked questions for "types_1" because there are 0 questions saved\!/
+      /\[.*\] Failed to delete the bookmarked questions for "cypress_1" because there are 0 questions saved\!/
     );
   });
 });
@@ -258,11 +319,19 @@ describe("Test deletion of bookmarked Questions", () => {
 //TODO remove this when developing v0.5
 describe("Transform from Bookmark to v0.4 Test", () => {
   it("should replace v0.3 bookmark file structure with new v0.4 in localStorage onMount", () => {
-    localStorage.setItem("repeatio-marked-types_1", JSON.stringify(["qID-1", "qID-3"]));
-    cy.visit("module/types_1").should(() => {
-      const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("types_1");
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    localStorage.setItem("repeatio-marked-cypress_1", JSON.stringify(["qID-1", "qID-3"]));
+
+    // Assert that the old bookmarked item was added to the localStorage
+    cy.get("body").should(() => {
+      const bookmarkedItemsOldFileStructure = parseJSON<string[]>(localStorage.getItem("repeatio-marked-cypress_1"));
+      expect(bookmarkedItemsOldFileStructure).to.deep.equal(["qID-1", "qID-3"]);
+    });
+
+    cy.visit("module/cypress_1").should(() => {
+      const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem("cypress_1");
 
-      expect(bookmarkedLocalStorageItem?.id).to.equal("types_1");
+      expect(bookmarkedLocalStorageItem?.id).to.equal("cypress_1");
       expect(bookmarkedLocalStorageItem?.type).to.equal("marked");
       expect(bookmarkedLocalStorageItem?.compatibility).to.equal("0.4.0");
       expect(bookmarkedLocalStorageItem?.questions).to.deep.equal(["qID-1", "qID-3"]);
@@ -276,7 +345,7 @@ describe("Transform from Bookmark to v0.4 Test", () => {
  * @param moduleID - id of the module
  * @param questions - Array of the ids of the questions
  */
-export function buildBookmarkFile(moduleID: "types_1" | (string & {}), questions: IBookmarkedQuestions["questions"]) {
+export function buildBookmarkFile(moduleID: "cypress_1" | (string & {}), questions: IBookmarkedQuestions["questions"]) {
   const fileContent = {
     id: moduleID,
     type: "marked",
diff --git a/cypress/e2e/deleteModule.cy.ts b/cypress/e2e/deleteModule.cy.ts
index 1481987..31dbc76 100644
--- a/cypress/e2e/deleteModule.cy.ts
+++ b/cypress/e2e/deleteModule.cy.ts
@@ -13,7 +13,7 @@ describe("Test deletion of module", () => {
     });
   });
 
-  //Test download of public folder file (cypress saves it to cypress/downloads)
+  //TODO delete this
   it("should delete module that is located in localStorage", () => {
     //Add item to localStorage and check existence
     cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
@@ -37,15 +37,6 @@ describe("Test deletion of module", () => {
     cy.contains("Cypress Fixture Module (cypress_1)").should("not.exist");
   });
 
-  it("should prevent deletion of example module", () => {
-    //Click delete module button
-    cy.get("article[data-cy='module-types_1']").find("button.popover-button").click();
-    cy.get("ul.MuiList-root").contains("Delete").click();
-
-    cy.get(".Toastify").contains("Can't delete example module!");
-    cy.get("@consoleWarn").should("be.calledWithMatch", /\[.*\] Can't delete example module\!/);
-  });
-
   it("should toast error if to be deleted file can't be found in localStorage ", () => {
     //Add fixture to localStorage
     cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
diff --git a/cypress/e2e/publicModule.cy.ts b/cypress/e2e/publicModule.cy.ts
index bb9971b..555e7bd 100644
--- a/cypress/e2e/publicModule.cy.ts
+++ b/cypress/e2e/publicModule.cy.ts
@@ -1,15 +1,18 @@
 /// <reference types="cypress" />
 
-describe("Test the module that is provided by the public folder", () => {
-  beforeEach(() => {
-    cy.visit("/");
-  });
+import { IModule } from "../../src/components/module/module";
+import { parseJSON } from "../../src/utils/parseJSON";
+import { TSettings } from "../../src/utils/types";
 
+describe("Test the module that is provided by the public folder", () => {
   it("should display module", () => {
+    cy.visit("/");
     cy.contains("Question Types (types_1)").should("be.visible");
   });
 
   it("should answer all questions in public module", () => {
+    cy.visit("/");
+
     cy.contains("View").click();
 
     cy.contains("Question Types (types_1)").should("be.visible");
@@ -69,6 +72,22 @@ describe("Test the module that is provided by the public folder", () => {
     //Check if back at beginning
     cy.contains("ID: qID-1");
   });
+
+  it("should show question if directly navigating to question from an external source", () => {
+    // This is for example the case if the user visits the website from the docs and he has never been to the homepage
+    cy.visit("/module/types_1/question/qID-1?mode=practice&order=chronological");
+
+    // Asset that the question renders, that the module was added and that the settings were updated
+    cy.contains("ID: qID-1")
+      .should("exist")
+      .and(() => {
+        const module = parseJSON<IModule>(localStorage.getItem("repeatio-module-types_1"));
+        expect(module).not.to.be.null;
+
+        const settings = parseJSON<TSettings>(localStorage.getItem("repeatio-settings"));
+        expect(settings?.addedExampleModule).to.equal(true);
+      });
+  });
 });
 
 export {};
diff --git a/cypress/e2e/question.cy.ts b/cypress/e2e/question.cy.ts
new file mode 100644
index 0000000..3071352
--- /dev/null
+++ b/cypress/e2e/question.cy.ts
@@ -0,0 +1,69 @@
+/// <reference types="cypress" />
+
+/* These e2e tests only cover tests related to the url. All other tests are handled by component tests  */
+
+describe("Question", () => {
+  it("should show question component with mode practice and order chronological when navigating from module", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1");
+
+    cy.get("article[data-cy='Practice']").contains("button", "Start").click();
+    cy.contains("ID: qID-1").should("exist");
+
+    // Assert that the url correctly updated
+    cy.url().should("include", "/module/cypress_1/question/qID-1?mode=practice&order=chronological");
+  });
+
+  it("should show question with mode practice and order random", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1");
+
+    cy.get("article[data-cy='Practice']").contains("button", "Random").click();
+    cy.get(".question-id").should("exist");
+
+    // Assert that the url correctly updated
+    cy.url().should("include", "?mode=practice&order=random");
+  });
+
+  it("should redirect to mode practice and order chronological if both values are undefined", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1/question/qID-1");
+
+    // Assert that the url correctly updated
+    cy.url().should("include", "/module/cypress_1/question/qID-1?mode=practice&order=chronological");
+  });
+
+  it("should redirect to mode practice if value is undefined", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1/question/qID-1?order=random");
+
+    // Assert that the url correctly updated
+    cy.url().should("include", "/module/cypress_1/question/qID-1?mode=practice&order=random");
+  });
+
+  it("should redirect to order chronological if value is undefined", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1/question/qID-1?mode=practice");
+
+    // Assert that the url correctly updated
+    cy.url().should("include", "/module/cypress_1/question/qID-1?mode=practice&order=chronological");
+  });
+
+  it("should redirect to mode practice if the value is not practice or bookmarked", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1/question/qID-1?mode=incorrectValue&order=chronological");
+
+    // Assert that the url correctly updated
+    cy.url().should("include", "/module/cypress_1/question/qID-1?mode=practice&order=chronological");
+  });
+
+  it("should redirect to order chronological if the value is not practice or bookmarked", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.visit("/module/cypress_1/question/qID-1?mode=practice&order=incorrectValue");
+
+    // Assert that the url correctly updated
+    cy.url().should("include", "/module/cypress_1/question/qID-1?mode=practice&order=chronological");
+  });
+});
+
+export {};
diff --git a/cypress/e2e/updateQuestion.cy.ts b/cypress/e2e/updateQuestion.cy.ts
index 91e5ff1..2798813 100644
--- a/cypress/e2e/updateQuestion.cy.ts
+++ b/cypress/e2e/updateQuestion.cy.ts
@@ -197,11 +197,11 @@ describe("Update question using mode random", () => {
     cy.get("div.ReactModal__Overlay").scrollIntoView();
   });
 
-  it("should show warning if trying to update question", () => {
+  it("should update a question using mode random", () => {
+    // Update points to 50  (by adding 0 to the end of the input which already had 5 asa value)
+    cy.get("input[name='points']").type("0");
     cy.contains("button", "Update").click();
-    cy.contains(
-      "Can't edit this questions while using mode random! Navigate to this question using the question overview."
-    ).should("exist");
+    cy.contains("50 Points").should("exist");
   });
 });
 
@@ -213,7 +213,7 @@ describe("Updating a question of type gap-text", () => {
     });
 
     it("should show correct value when editing the question and update value", () => {
-      cy.visit("/module/gap_text/question/gt-1");
+      cy.visit("/module/gap_text/question/gt-1?mode=practice&order=chronological");
       cy.get("button[aria-label='Edit Question']").click();
       cy.get("textarea#editor-gap-text-textarea")
         .should("have.text", "This is the [first] question")
@@ -239,7 +239,7 @@ describe("Updating a question of type gap-text", () => {
     });
 
     it("should show correct textarea value if gap text contains multiple gaps and multiple correct values", () => {
-      cy.visit("/module/gap_text/question/gt-3");
+      cy.visit("/module/gap_text/question/gt-3?mode=practice&order=chronological");
       cy.get("button[aria-label='Edit Question']").click();
 
       cy.get("textarea#editor-gap-text-textarea")
@@ -267,7 +267,7 @@ describe("Updating a question of type gap-text", () => {
     });
 
     it("should remove gap from gap-text", () => {
-      cy.visit("/module/gap_text/question/gt-3");
+      cy.visit("/module/gap_text/question/gt-3?mode=practice&order=chronological");
       cy.get("button[aria-label='Edit Question'").click();
 
       cy.get("textarea#editor-gap-text-textarea").setSelection("[contains]").type("{del}").type("{del}");
@@ -287,7 +287,7 @@ describe("Updating a question of type gap-text", () => {
     });
 
     it("should load and update the correct gap-text to edit", () => {
-      cy.visit("/module/gap_text/question/gt-2");
+      cy.visit("/module/gap_text/question/gt-2?mode=practice&order=chronological");
 
       cy.get("button[aria-label='Navigate to next Question'").click();
       cy.get("button[aria-label='Edit Question'").click();
diff --git a/cypress/fixtures/repeatio-marked-cypress_1.json b/cypress/fixtures/repeatio-marked-cypress_1.json
new file mode 100644
index 0000000..b1aec3d
--- /dev/null
+++ b/cypress/fixtures/repeatio-marked-cypress_1.json
@@ -0,0 +1,9 @@
+{
+  "id": "cypress_1",
+  "type": "marked",
+  "compatibility": "0.4.0",
+  "questions": [
+    "qID-1",
+    "qID-3"
+  ]
+}
\ No newline at end of file
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 8f5bdfb..f572512 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -38,6 +38,7 @@ type Fixtures =
   | "repeatio-module-empty-questions.json"
   | "repeatio-module-cypress_1.json"
   | "repeatio-marked-types_1.json"
+  | "repeatio-marked-cypress_1.json"
   | (string & {});
 
 declare global {
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index b68e7f6..7b25f99 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link, LinkProps } from "react-router-dom";
 import { memo } from "react";
 
 //css
@@ -35,14 +35,14 @@ export const Card = memo(({ type, disabled, title, description, icon, children,
 /* ----------------------------------------- LINK -------------------------------------------- */
 //!This extend might be false
 interface ILinkElement extends React.RefAttributes<HTMLAnchorElement> {
-  linkTo: string;
+  linkTo: LinkProps["to"];
   linkAriaLabel: string;
   linkText: string;
 }
 
 //!URL might not work with special characters (äöß/#....)
 //Link Element Component
-export const LinkElement = ({ linkTo, linkAriaLabel, linkText, ...props }: ILinkElement) => {
+export const LinkElement: React.FC<ILinkElement> = ({ linkTo, linkAriaLabel, linkText, ...props }) => {
   return (
     <Link className='card-link' to={linkTo} role='button' aria-label={linkAriaLabel} {...props}>
       <span>{linkText}</span>
diff --git a/src/components/Home/CreateModule.cy.tsx b/src/components/Home/CreateModule.cy.tsx
index 12f1d48..79d3f8b 100644
--- a/src/components/Home/CreateModule.cy.tsx
+++ b/src/components/Home/CreateModule.cy.tsx
@@ -173,25 +173,6 @@ describe("Creating a module", () => {
     cy.get("select#create-module-language-select").should("not.have.class", "is-invalid");
   });
 
-  //Error when using reserved keywords (module/types_1)
-  it('should show error if provided id for module is a reserved keyword ("module"/"types_1")', () => {
-    cy.mount(<MockCreateModuleComponent />);
-
-    //Check against word "module"
-    cy.get("input#create-module-id-input").type("module");
-    cy.get("input#create-module-name-input").type("Module created with cypress", { delay: 2 });
-    cy.get("select#create-module-language-select").select("English");
-    cy.contains("button", "Create").click();
-
-    cy.contains(`The word "module" is a reserved keyword and can't be used inside an ID!`).should("be.visible");
-    cy.get("input#create-module-id-input").should("have.class", "is-invalid");
-
-    //Check against word "types_1" as that value is used for the repeatio examples
-    cy.get("input#create-module-id-input").clear().type("types_1");
-    cy.contains(`The word "types_1" is a reserved keyword!`).should("be.visible");
-    cy.get("input#create-module-id-input").should("have.class", "is-invalid");
-  });
-
   //Error if using space inside id input
   it("should show error if using space in id", () => {
     cy.mount(<MockCreateModuleComponent />);
diff --git a/src/components/Home/CreateModule.tsx b/src/components/Home/CreateModule.tsx
index 2c22859..d5fd8f0 100644
--- a/src/components/Home/CreateModule.tsx
+++ b/src/components/Home/CreateModule.tsx
@@ -43,38 +43,24 @@ export const CreateModule = ({ handleModalClose }: ICreateModule) => {
   //Runs only after first submit and after that on every onChange
   //The ID:
   // - 1. should not include word module
-  // - 2. should not equal types_1
-  // - 3. should not include any space character
-  // - 4. should match url requirements
-  // - 5. should not already exist (be unique)
+  // - 2. should not include any space character
+  // - 3. should match url requirements
+  // - 4. should not already exist (be unique)
   const validateID = (value: string) => {
     //1. Check if id includes the word module as it is a reserved keyword (to split the )
     if (value.includes("module")) {
       return `The word "module" is a reserved keyword and can't be used inside an ID!`;
     }
 
-    //2. Check if id is reserved "types_1" (represents example ids)
-    if (value === "types_1") {
-      return `The word "${value}" is a reserved keyword!`;
-    }
-
-    //3. Filter out space character
+    //2. Filter out space character
     const spaceRegex = / /g;
     const spaces = value.match(spaceRegex)?.join("");
 
     if (spaces && spaces?.length > 0) {
       return `The ID has to be one word! Use hyphens ("-") to concat the word (${value.replace(/ /g, "-")})`;
-      /*
-      return (
-        <>
-          <>The ID has to be one word!</>
-          <br /> Use hyphens ("-") to concat the word ({value.replace(/ /g, "-")})
-        </>
-      );
-      */
     }
 
-    //4. Check for only allowed (url) characters
+    //3. Check for only allowed (url) characters
     //Filter out everything that is not: a-z, A-Z, 0-9, ä-Ü
     const regex = /[^a-zA-Z0-9-ß_~.\u0080-\uFFFF]/g;
     const notAllowedChars = value
@@ -86,7 +72,7 @@ export const CreateModule = ({ handleModalClose }: ICreateModule) => {
       return `The id contains non allowed characters (${notAllowedChars})`;
     }
 
-    //5. Check if module id is duplicate
+    //4. Check if module id is duplicate
     if (moduleAlreadyInStorage(value)) {
       return `ID of module ("${value}") already exists!`;
     }
diff --git a/src/components/Home/Home.cy.tsx b/src/components/Home/Home.cy.tsx
index 986ac86..147e787 100644
--- a/src/components/Home/Home.cy.tsx
+++ b/src/components/Home/Home.cy.tsx
@@ -1,16 +1,23 @@
 import Home from "../../pages/index";
 import "../../index.css";
 import { MemoryRouter, Route } from "react-router-dom";
+import { parseJSON } from "../../utils/parseJSON";
+import { CustomToastContainer } from "../toast/toast";
+
+// Interfaces / Types
+import { TSettings } from "../../utils/types";
+import { IModule } from "../module/module";
 
 declare var it: Mocha.TestFunction;
 declare var describe: Mocha.SuiteFunction;
-//declare const expect: Chai.ExpectStatic;
+declare const expect: Chai.ExpectStatic;
 
 const MockModulesWithRouter = () => {
   return (
     <MemoryRouter>
       <main style={{ minHeight: "100vh", marginTop: 0 }}>
         <Route exact path='/' component={Home} />
+        <CustomToastContainer />
       </main>
     </MemoryRouter>
   );
@@ -75,13 +82,38 @@ describe("Modules (Home) component", () => {
     cy.get("div.ReactModal__Content--after-open").should("not.exist");
   });
 
-  it("should render modules from localStorage and public folder", () => {
+  it("should add the default module to the localStorage if there is to settings item in the localStorage", () => {
+    cy.mount(<MockModulesWithRouter />);
+
+    cy.get("article.card")
+      .should("have.length", 1)
+      .should(() => {
+        const settings = parseJSON<TSettings>(localStorage.getItem("repeatio-settings"));
+        expect(settings?.addedExampleModule).to.equal(true);
+      });
+  });
+
+  it("should not add the default module to the localStorage if the module was previously added to the module but the module was deleted (settings.addedExampleModule === false)", () => {
+    cy.mount(<MockModulesWithRouter />);
+
+    // Add settings to show that the item was already added
+    localStorage.setItem("repeatio-settings", JSON.stringify({ addedExampleModule: true }));
+
+    cy.get("article.card")
+      .should("not.exist")
+      .should(() => {
+        const settings = parseJSON<TSettings>(localStorage.getItem("repeatio-settings"));
+        expect(settings?.addedExampleModule).to.equal(true);
+      });
+  });
+
+  it("should render modules from the localStorage", () => {
     cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
     cy.fixtureToLocalStorage("repeatio-module-gap_text.json");
 
     cy.mount(<MockModulesWithRouter />);
 
-    cy.get("article.card").should("have.length", 3);
+    cy.get("article.card").should("have.length", 3); //The third module is the example module that gets automatically added on first ever visit
 
     // Assert that the correct amount of questions get counted
     cy.get("article[data-cy='module-gap_text'").scrollIntoView().contains("p", "10 Questions").should("exist");
@@ -102,4 +134,73 @@ describe("Modules (Home) component", () => {
   });
 });
 
+/* Module Deletion */
+describe("Module deletion", () => {
+  it("should delete module that is located in localStorage", () => {
+    cy.mount(<MockModulesWithRouter />);
+
+    //Add item to localStorage and check existence
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.contains("Cypress Fixture Module (cypress_1)").should("exist");
+
+    //Click delete module button
+    cy.get("article[data-cy='module-cypress_1']").find("button.popover-button").click();
+    cy.get("ul.MuiList-root")
+      .contains("Delete")
+      .click()
+      .should(() => {
+        //Delete from localStorage
+        expect(localStorage.getItem("repeatio-module-cypress_1")).to.equal(null);
+      });
+
+    //Toast
+    cy.get(".Toastify").contains("Deleted module cypress_1!");
+
+    //Module should no longer exist/be visible in list of modules
+    cy.contains("Cypress Fixture Module (cypress_1)").should("not.exist");
+  });
+
+  it("should delete example module", () => {
+    cy.mount(<MockModulesWithRouter />);
+
+    // Add another module
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+
+    //Click delete module button
+    cy.get("article[data-cy='module-types_1']").find("button.popover-button").click();
+    cy.get("ul.MuiList-root")
+      .contains("Delete")
+      .click()
+      .should(() => {
+        const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-types_1`));
+        expect(module).to.equal(null);
+      });
+
+    // Assert the example module to no longer be present on the page
+    cy.contains("h2", "Question Types (types_1)").should("not.exist");
+
+    // Assert that the other module is unaffected be the deletion and still exist in the DOM
+    cy.contains("h2", "Cypress Fixture Module (cypress_1)").should("exist");
+  });
+
+  it("should toast error if to be deleted file can't be found in localStorage ", () => {
+    cy.mount(<MockModulesWithRouter />);
+
+    //Add fixture to localStorage
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+
+    //Click on dots
+    cy.get(`article[data-cy='module-cypress_1']`).find("button.popover-button").click();
+
+    //remove item from localStorage so it can't be found to simulate not existing file
+    cy.clearLocalStorage("repeatio-module-cypress_1");
+
+    //Click on export
+    cy.get(".MuiList-root").contains("Delete").click({ force: true });
+
+    //Expect toast to show up
+    cy.get(".Toastify").contains("Couldn't find the file repeatio-module-cypress_1 in the localStorage!");
+  });
+});
+
 // TODO maybe implement the tests from deleteModule.cy.ts and exportModule.cy.ts into here ??
diff --git a/src/components/Home/Modules.tsx b/src/components/Home/Modules.tsx
index 06a3d14..542c72b 100644
--- a/src/components/Home/Modules.tsx
+++ b/src/components/Home/Modules.tsx
@@ -1,7 +1,6 @@
 import { useState, useLayoutEffect, useEffect, useCallback } from "react";
 import isElectron from "is-electron";
 import { toast } from "react-toastify";
-import { fetchModuleFromPublicFolder } from "../../utils/fetchModuleFromPublicFolder";
 
 //Components
 import { GridCards } from "../GridCards/GridCards";
@@ -17,9 +16,11 @@ import { BiTrash } from "react-icons/bi";
 //Functions
 import { saveFile } from "../../utils/saveFile";
 import { parseJSON } from "../../utils/parseJSON";
+import { addExampleModuleToLocalStorage, isExampleModuleAdded } from "./helpers";
 
 //Interfaces and Types
 import { IModule } from "../module/module";
+import { TSettings } from "../../utils/types";
 
 //Component
 export const Modules = () => {
@@ -50,7 +51,7 @@ export const Modules = () => {
           >
             <LinkElement
               key={`card-link-${id}`}
-              linkTo={`/module/${id}`}
+              linkTo={{ pathname: `/module/${id}`, state: { name } }}
               linkAriaLabel={`View ${name}`}
               linkText='View'
             />
@@ -74,7 +75,15 @@ const useAllModules = () => {
   //Get the modules from the localStorage and set the module state
   //Updates every time localeStorage changes
   const modulesFromBrowserStorage = useCallback(async () => {
-    //Setup variables for the module and possible errors
+    // Get settings from localStorage
+    const settings = parseJSON<TSettings>(localStorage.getItem("repeatio-settings"));
+
+    // Add example module to localStorage if it isn't there and the user hasn't removed it (first ever render)
+    if (!isExampleModuleAdded(settings)) {
+      await addExampleModuleToLocalStorage(settings);
+    }
+
+    //Setup variables for the module
     let localStorageModules: IModule[] = [];
 
     Object.entries(localStorage).forEach((key) => {
@@ -94,18 +103,8 @@ const useAllModules = () => {
       }
     });
 
-    //get the data from the public folder (types_1)
-    const dataFromPublicFolder = await fetchModuleFromPublicFolder();
-
-    //When able to fetch the data from the public folder, combine them else just show localStorage.
-    //This is useful for when the user is offline
-    if (dataFromPublicFolder !== undefined) {
-      setModules([...localStorageModules, dataFromPublicFolder]);
-    } else {
-      setModules(localStorageModules);
-    }
-
     //Update states
+    setModules(localStorageModules);
     setLoading(false);
   }, []);
 
@@ -168,13 +167,6 @@ const useHomePopover = () => {
     //Get id of module by custom attribute
     const moduleID = anchorEl?.getAttribute("data-target");
 
-    //Prevent deletion of example module as that is saved in the public folder
-    if (moduleID === "types_1") {
-      toast.warn("Can't delete example module!");
-      handlePopoverClose();
-      return;
-    }
-
     //Prevent deletion if using electron
     if (isElectron()) {
       toast.warn("Can't delete modules from electron!");
@@ -207,15 +199,7 @@ const useHomePopover = () => {
 
     //Get id of the module from the button
     const moduleID = anchorEl?.getAttribute("data-target");
-    let file;
-
-    if (moduleID !== "types_1") {
-      //Get module item from localStorage
-      file = localStorage.getItem(`repeatio-module-${moduleID}`);
-    } else {
-      const publicModule = await fetchModuleFromPublicFolder();
-      file = JSON.stringify(publicModule, null, "\t");
-    }
+    const file = localStorage.getItem(`repeatio-module-${moduleID}`);
 
     if (file) {
       await saveFile({ file: file, name: `repeatio-module-${moduleID}` });
diff --git a/src/components/Home/helpers.ts b/src/components/Home/helpers.ts
index 12f9bbd..903a5fb 100644
--- a/src/components/Home/helpers.ts
+++ b/src/components/Home/helpers.ts
@@ -1,3 +1,5 @@
+import { fetchModuleFromPublicFolder } from "../../utils/fetchModuleFromPublicFolder";
+import { TSettings } from "../../utils/types";
 import { IFile } from "./ImportModule";
 
 export function moduleAlreadyInStorage(value: string) {
@@ -20,3 +22,32 @@ export async function getFileTypeAndID(file: File): Promise<Pick<IFile, "id" | "
   //Always return id, only type if not undefined
   return { id, ...(type !== undefined ? { fileType: type } : undefined) };
 }
+
+/**
+ * Checks if the 'addedExampleModule' property is present in the 'repeatio-settings' object stored in local storage.
+ * @param {TSettings | null | undefined} settings - The current settings object retrieved from local storage.
+ * @returns {boolean} Returns true if the 'addedExampleModule' property is present in the 'repeatio-settings' object, otherwise false.
+ */
+export function isExampleModuleAdded(settings: TSettings | null | undefined): boolean {
+  // Check if the parsed settings object is truthy and if the 'addedExampleModule' property is truthy
+  // Return true if both conditions are met, otherwise false
+  return !!settings && !!settings.addedExampleModule;
+}
+
+/**
+ * Adds the example module data to local storage and updates the settings to indicate that the module has been added.
+ * @param {TSettings | null | undefined} settings - The current settings object retrieved from local storage.
+ */
+export async function addExampleModuleToLocalStorage(settings: TSettings | null | undefined) {
+  // Fetch the example module data from the public folder
+  const exampleModuleData = await fetchModuleFromPublicFolder();
+
+  // Check if the example module data was retrieved successfully
+  if (exampleModuleData) {
+    // Update the localStorage with the module data
+    localStorage.setItem(`repeatio-module-${exampleModuleData.id}`, JSON.stringify(exampleModuleData, null, "\t"));
+
+    // Update the settings in localStorage to indicate that the example module has been added
+    localStorage.setItem(`repeatio-settings`, JSON.stringify({ ...settings, addedExampleModule: true }, null, "\t"));
+  }
+}
diff --git a/src/components/Question/Question.tsx b/src/components/Question/Question.tsx
index ac6f68a..7bf238c 100644
--- a/src/components/Question/Question.tsx
+++ b/src/components/Question/Question.tsx
@@ -23,7 +23,7 @@ import { EditQuestion } from "./components/Actions/EditQuestion";
 import { BookmarkQuestion } from "./components/Actions/BookmarkQuestion";
 
 //Context
-import { ModuleContext } from "../module/moduleContext";
+import { QuestionIdsContext, IQuestionIdsContext } from "../module/questionIdsContext";
 
 //Hooks
 import { useQuestion } from "./useQuestion";
@@ -51,6 +51,8 @@ export const Question: React.FC<{}> = () => {
     answerCorrect,
     questionDataRef,
     questionAnswerRef,
+    fetchQuestion,
+    setShowAnswer,
   } = useQuestion();
 
   //JSX
@@ -67,27 +69,21 @@ export const Question: React.FC<{}> = () => {
       />
       {/* -- Question Bottom includes checking/reset/actions(delete/edit/save) and the navigation --*/}
       <QuestionBottom
-        questionID={question?.id}
+        question={question}
         showAnswer={showAnswer}
         disabled={loading || !question}
         handleResetRetryQuestion={handleResetRetryQuestion}
+        fetchQuestion={fetchQuestion}
+        setShowAnswer={setShowAnswer}
       />
     </form>
   );
 };
 
-// TODO maybe use Pick instead
 type TQuestionData = Pick<
   TUseQuestion,
   "question" | "loading" | "questionAnswerRef" | "questionDataRef" | "showAnswer" | "answerCorrect"
 >;
-/*   question: IQuestion | undefined;
-  loading: boolean;
-  showAnswer: boolean;
-  answerCorrect: boolean;
-  questionDataRef: React.RefObject<HTMLDivElement>;
-  questionAnswerRef: React.RefObject<IForwardRefFunctions>;
-} */
 
 //Question Data contains all the question info (title, points, type, help, answerOptions)
 const QuestionData: React.FC<TQuestionData> = ({
@@ -136,17 +132,21 @@ const QuestionData: React.FC<TQuestionData> = ({
 
 //QuestionBottom contains the checking/resetting of a question as well as the actions (save, edit, delete) and the navigation
 export interface IQuestionBottom {
-  questionID: IQuestion["id"] | undefined;
+  question: IQuestion | undefined;
   showAnswer: TUseQuestion["showAnswer"];
   disabled: boolean;
   handleResetRetryQuestion: TUseQuestion["handleResetRetryQuestion"];
+  fetchQuestion: TUseQuestion["fetchQuestion"];
+  setShowAnswer: TUseQuestion["setShowAnswer"];
 }
 
 export const QuestionBottom: React.FC<IQuestionBottom> = ({
-  questionID,
+  question,
   showAnswer,
   disabled,
   handleResetRetryQuestion,
+  fetchQuestion,
+  setShowAnswer,
 }) => {
   //States
   const [showNav, setShowNav] = useState(false);
@@ -190,10 +190,15 @@ export const QuestionBottom: React.FC<IQuestionBottom> = ({
           className={`question-actions-navigation-wrapper ${collapsedActionsNav ? "collapsed" : ""}`}
           data-testid='question-actions-navigation-wrapper'
         >
-          <DeleteQuestion questionID={questionID} disabled={disabled} />
-          <EditQuestion prevQuestionID={questionID} disabled={disabled} />
-          <BookmarkQuestion moduleID={moduleID} questionID={questionID} disabled={disabled} />
-          <QuestionNavigation />
+          <DeleteQuestion questionID={question?.id} disabled={disabled} setShowAnswer={setShowAnswer} />
+          <EditQuestion
+            prevQuestion={question}
+            disabled={disabled}
+            fetchQuestion={fetchQuestion}
+            setShowAnswer={setShowAnswer}
+          />
+          <BookmarkQuestion moduleID={moduleID} questionID={question?.id} disabled={disabled} />
+          <QuestionNavigation setShowAnswer={setShowAnswer} />
         </div>
       )}
     </div>
@@ -203,7 +208,10 @@ export const QuestionBottom: React.FC<IQuestionBottom> = ({
 //ID and Progress of the current question
 const QuestionIdProgress = memo(({ qID }: { qID: IQuestion["id"] }) => {
   //Context
-  const { filteredQuestions } = useContext(ModuleContext); //TODO remove this
+  const { questionIds } = useContext<IQuestionIdsContext>(QuestionIdsContext);
+
+  // Get current index
+  const currentIndex = questionIds?.findIndex((item) => item === qID);
 
   return (
     <div className='question-id-progress-wrapper'>
@@ -211,7 +219,9 @@ const QuestionIdProgress = memo(({ qID }: { qID: IQuestion["id"] }) => {
         ID: {qID}
       </p>
       <p className='question-progress'>
-        {filteredQuestions?.findIndex((item) => item.id === qID) + 1}/{filteredQuestions?.length || "?"} Questions
+        {/* Display "index + 1 / Questions.length Questions"*/}
+        {typeof currentIndex !== "undefined" && currentIndex >= 0 && currentIndex + 1}/{questionIds?.length || "?"}{" "}
+        Questions
       </p>
     </div>
   );
diff --git a/src/components/Question/QuestionTypes/GapText/GapText.cy.tsx b/src/components/Question/QuestionTypes/GapText/GapText.cy.tsx
index c019ab1..54065a0 100644
--- a/src/components/Question/QuestionTypes/GapText/GapText.cy.tsx
+++ b/src/components/Question/QuestionTypes/GapText/GapText.cy.tsx
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 
 import { MemoryRouter, Route } from "react-router-dom";
-import { ModuleProvider } from "../../../module/moduleContext";
+import { QuestionIdsProvider } from "../../../module/questionIdsContext";
 import { Question } from "../../Question";
 import { GapText } from "./GapText";
 
@@ -238,11 +238,11 @@ describe("GapText", () => {
 //Setup Router to access context and useParams
 const RenderQuestionWithRouter = ({ moduleID, questionID }: Required<IParams>) => {
   return (
-    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=practice&order=chronological`]}>
       <main style={{ marginTop: 0 }}>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
     </MemoryRouter>
   );
@@ -499,6 +499,41 @@ describe("Gap Text component inside Question component", () => {
       cy.contains("Yes, that's correct!").should("exist");
     });
 
+    it("should clear the question correction on submit and navigating with Question Navigation (button[aria-label='Navigate to next Question']) instead of submitting the question again", () => {
+      cy.mount(<RenderQuestionWithRouter moduleID='gap_text' questionID='gt-1' />);
+
+      // Type into the input
+      cy.get("input#input-0").type("first", { delay: 2 });
+
+      // Submit the question
+      cy.get("button[aria-label='Check Question']").click();
+
+      // Click show navigation button that just exists on small displays
+      cy.get("body").then((body) => {
+        if (body.find("button[aria-label='Show Navigation']").length > 0) {
+          cy.get("button[aria-label='Show Navigation']").click();
+        }
+      });
+
+      // Navigate to new site
+      cy.get("button[aria-label='Navigate to next Question']").click();
+
+      // Assert that the input has empty value after navigation and is enabled
+      cy.get("input#input-0").should("have.value", "").and("not.be.disabled");
+
+      // Assert that the question correction went away
+      cy.get("section.question-correction").should("not.exist");
+
+      // Type correct answer
+      cy.get("input#input-0").type("second", { delay: 2 }).should("have.value", "second");
+
+      // Submit question
+      cy.get("button[type='submit']").click();
+
+      // Check correction
+      cy.contains("Yes, that's correct!").should("exist");
+    });
+
     //BORDERS
     it("should render green border on input element if the answer if correct", () => {
       cy.mount(<RenderQuestionWithRouter moduleID='gap_text' questionID='gt-1' />);
diff --git a/src/components/Question/QuestionTypes/GapTextDropdown/GapTextDropdown.cy.tsx b/src/components/Question/QuestionTypes/GapTextDropdown/GapTextDropdown.cy.tsx
index e255621..1fd6974 100644
--- a/src/components/Question/QuestionTypes/GapTextDropdown/GapTextDropdown.cy.tsx
+++ b/src/components/Question/QuestionTypes/GapTextDropdown/GapTextDropdown.cy.tsx
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 
 import { MemoryRouter, Route } from "react-router-dom";
-import { ModuleProvider } from "../../../module/moduleContext";
+import { QuestionIdsProvider } from "../../../module/questionIdsContext";
 import { Question } from "../../Question";
 import { GapTextDropdown } from "./GapTextDropdown";
 
@@ -168,11 +168,11 @@ describe("GapTextDropdown Component", () => {
 //Setup Router to access context and useParams
 const RenderQuestionWithRouter = ({ moduleID, questionID }: Required<IParams>) => {
   return (
-    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=practice&order=chronological`]}>
       <main style={{ marginTop: 0 }}>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
     </MemoryRouter>
   );
@@ -443,6 +443,38 @@ describe("Gap Text with Dropdown component inside Question component", () => {
       cy.get(".question-correction").contains("fixture").should("exist");
     });
 
+    it("should should clear the question correction after question submit if the user navigates to the next question using the QuestionNavigation (button[aria-label='Navigate to next Question']) instead of navigating by submitting the question again", () => {
+      cy.mount(<RenderQuestionWithRouter moduleID='gap_text_dropdown' questionID='gtd-1' />);
+
+      cy.get("select").first().select(0);
+
+      // Submit the question
+      cy.get("button[aria-label='Check Question']").click();
+
+      // Click show navigation button that just exists on small displays
+      cy.get("body").then((body) => {
+        if (body.find("button[aria-label='Show Navigation']").length > 0) {
+          cy.get("button[aria-label='Show Navigation']").click();
+        }
+      });
+
+      // Navigate to new site
+      cy.get("button[aria-label='Navigate to next Question']").click();
+
+      // Select in new question should be empty and enabled
+      cy.get("select").first().should("have.value", "").and("not.be.disabled");
+
+      // Assert that the question correction went away
+      cy.get("section.question-correction").should("not.exist");
+
+      cy.get("select#select-0").select("second");
+      // Submit question
+      cy.get("button[type='submit']").click();
+
+      // Check correction
+      cy.contains("Yes, that's correct!").should("exist");
+    });
+
     it("should work after moving from a question with one input to multiple inputs", () => {
       cy.mount(<RenderQuestionWithRouter moduleID='gap_text_dropdown' questionID='gtd-2' />);
 
diff --git a/src/components/Question/QuestionTypes/MultipleChoice/MultipleChoice.cy.tsx b/src/components/Question/QuestionTypes/MultipleChoice/MultipleChoice.cy.tsx
index 59b85d7..1914f6a 100644
--- a/src/components/Question/QuestionTypes/MultipleChoice/MultipleChoice.cy.tsx
+++ b/src/components/Question/QuestionTypes/MultipleChoice/MultipleChoice.cy.tsx
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 
 import { MemoryRouter, Route } from "react-router-dom";
-import { ModuleProvider } from "../../../module/moduleContext";
+import { QuestionIdsProvider } from "../../../module/questionIdsContext";
 import { Question } from "../../Question";
 import { MultipleChoice } from "./MultipleChoice";
 
@@ -98,11 +98,11 @@ describe("MultipleChoice Component", () => {
 //Setup Router to access context and useParams
 const RenderQuestionWithRouter = ({ moduleID, questionID }: Required<IParams>) => {
   return (
-    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=practice&order=chronological`]}>
       <main style={{ marginTop: 0 }}>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
     </MemoryRouter>
   );
@@ -354,6 +354,37 @@ describe("Multiple Choice component inside Question component", () => {
         .should("have.text", "This is the correct multiple choice value");
     });
 
+    it("should clear the question correction after question submit if the user navigates to the next question using the QuestionNavigation (button[aria-label='Navigate to next Question']) instead of submitting the question again", () => {
+      cy.mount(<RenderQuestionWithRouter moduleID='multiple_choice' questionID='mc-1' />);
+
+      // Submit the question
+      cy.get("button[aria-label='Check Question']").click();
+
+      // Click show navigation button that just exists on small displays
+      cy.get("body").then((body) => {
+        if (body.find("button[aria-label='Show Navigation']").length > 0) {
+          cy.get("button[aria-label='Show Navigation']").click();
+        }
+      });
+
+      // Navigate to new site
+      cy.get("button[aria-label='Navigate to next Question']").click();
+
+      // Assert that none of the elements are disabled
+      cy.get(".question-multiple-choice").find("input.Mui-disabled").should("have.length", 0);
+
+      // Assert that the question correction went away
+      cy.get("section.question-correction").should("not.exist");
+
+      // Check correct answer
+      cy.get("section.question-user-response").contains("Correct").click();
+      cy.get("button[aria-label='Check Question']").click();
+
+      // Check correction
+      cy.contains("Yes, that's correct!").should("exist");
+      cy.get("ul.correction-multipleChoice-list").contains("Correct").should("exist");
+    });
+
     it("should outline correct answer in green after submit if user selection is correct", () => {
       cy.mount(<RenderQuestionWithRouter moduleID='multiple_choice' questionID='mc-1' />);
 
diff --git a/src/components/Question/QuestionTypes/MultipleResponse/MultipleResponse.cy.tsx b/src/components/Question/QuestionTypes/MultipleResponse/MultipleResponse.cy.tsx
index eb80b51..348fabf 100644
--- a/src/components/Question/QuestionTypes/MultipleResponse/MultipleResponse.cy.tsx
+++ b/src/components/Question/QuestionTypes/MultipleResponse/MultipleResponse.cy.tsx
@@ -4,7 +4,7 @@ import { MultipleResponse } from "./MultipleResponse";
 import { Question } from "../../Question";
 
 import { MemoryRouter, Route } from "react-router-dom";
-import { ModuleProvider } from "../../../module/moduleContext";
+import { QuestionIdsProvider } from "../../../module/questionIdsContext";
 
 import "../../../../index.css";
 import "../../Question.css";
@@ -107,11 +107,11 @@ describe("Multiple Response component", () => {
 //Setup Router to access context and useParams
 const RenderQuestionWithRouter = ({ moduleID, questionID }: Required<IParams>) => {
   return (
-    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=practice&order=chronological`]}>
       <main style={{ marginTop: 0 }}>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
     </MemoryRouter>
   );
@@ -364,6 +364,37 @@ describe("MultipleResponse Component rendered inside Question Component with Rou
       cy.get(".question-correction").contains("li", "This is another correct multiple response value").should("exist");
     });
 
+    it("should clear the question correction after question submit if the user navigates to the next question using the QuestionNavigation (button[aria-label='Navigate to next Question']) instead of navigating by submitting the question again ", () => {
+      cy.mount(<RenderQuestionWithRouter moduleID='multiple_response' questionID='mr-1' />);
+
+      // Submit the question
+      cy.get("button[aria-label='Check Question']").click();
+
+      // Click show navigation button that just exists on small displays
+      cy.get("body").then((body) => {
+        if (body.find("button[aria-label='Show Navigation']").length > 0) {
+          cy.get("button[aria-label='Show Navigation']").click();
+        }
+      });
+
+      // Navigate to new site
+      cy.get("button[aria-label='Navigate to next Question']").click();
+
+      // Assert that none of the elements are disabled
+      cy.get(".question-multiple-response").find("input.Mui-disabled").should("have.length", 0);
+
+      // Assert that the question correction went away
+      cy.get("section.question-correction").should("not.exist");
+
+      // Check correct answer
+      cy.get("section.question-user-response").contains("Correct").click();
+      cy.get("button[aria-label='Check Question']").click();
+
+      // Check correction
+      cy.contains("Yes, that's correct!").should("exist");
+      cy.get("ul.correction-multipleResponse-list").contains("Correct").should("exist");
+    });
+
     it("should outline correct answer in green after submit if user selection is correct", () => {
       cy.mount(<RenderQuestionWithRouter moduleID='multiple_response' questionID='mr-1' />);
 
diff --git a/src/components/Question/__tests__/Question.test.tsx b/src/components/Question/__tests__/Question.test.tsx
index e25174b..ccec80e 100644
--- a/src/components/Question/__tests__/Question.test.tsx
+++ b/src/components/Question/__tests__/Question.test.tsx
@@ -1,11 +1,12 @@
 import { screen, render, cleanup } from "@testing-library/react";
 import user from "@testing-library/user-event";
 import { Question } from "../Question";
-import { IModuleContext, ModuleContext } from "../../module/moduleContext";
+import { IQuestionIdsContext, QuestionIdsContext } from "../../module/questionIdsContext";
 import { Router, Route, Switch, MemoryRouter, RouteComponentProps } from "react-router-dom";
 import { createMemoryHistory } from "history";
 import { IQuestion } from "../useQuestion";
 import { IModule } from "../../module/module";
+import { ISearchParams } from "../../../utils/types";
 
 //Question test data
 const mockFilteredQuestions: IModule["questions"] = [
@@ -72,25 +73,30 @@ const data: IModule = {
   questions: mockFilteredQuestions,
 };
 
-const mockSetContextModuleID = jest.fn();
+const mockSetQuestionIds = jest.fn();
 
 /* Mocks */
 //Mock the question component with router to allow switching pages and the provider
-const MockQuestionWithRouter = ({ qID, practiceMode }: { qID: IQuestion["id"]; practiceMode: string }) => {
+interface IMockQuestionWithRouter {
+  qID: IQuestion["id"];
+  mode: NonNullable<ISearchParams["mode"]>;
+  order: NonNullable<ISearchParams["order"]>;
+}
+
+const MockQuestionWithRouter: React.FC<IMockQuestionWithRouter> = ({ qID, mode, order }) => {
   return (
-    <MemoryRouter initialEntries={[`/module/${data.id}/question/${qID}?mode=${practiceMode}`]}>
+    <MemoryRouter initialEntries={[`/module/${data.id}/question/${qID}?mode=${mode}&order=${order}`]}>
       <Switch>
-        <ModuleContext.Provider
+        <QuestionIdsContext.Provider
           value={
             {
-              filteredQuestions: mockFilteredQuestions as IModuleContext["filteredQuestions"],
-              moduleData: data as IModuleContext["moduleData"],
-              setContextModuleID: mockSetContextModuleID as IModuleContext["setContextModuleID"],
-            } as IModuleContext
+              questionIds: data.questions.map((question) => question.id),
+              setQuestionIds: mockSetQuestionIds,
+            } as IQuestionIdsContext
           }
         >
           <Route exact path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleContext.Provider>
+        </QuestionIdsContext.Provider>
       </Switch>
     </MemoryRouter>
   );
@@ -100,17 +106,16 @@ const MockQuestionWithRouterAndHistory = ({ history }: { history: RouteComponent
   return (
     <Router history={history}>
       <Switch>
-        <ModuleContext.Provider
+        <QuestionIdsContext.Provider
           value={
             {
-              filteredQuestions: mockFilteredQuestions as IModuleContext["filteredQuestions"],
-              moduleData: data as IModuleContext["moduleData"],
-              setContextModuleID: mockSetContextModuleID as IModuleContext["setContextModuleID"],
-            } as IModuleContext
+              questionIds: data.questions.map((question) => question.id),
+              setQuestionIds: mockSetQuestionIds,
+            } as IQuestionIdsContext
           }
         >
           <Route exact path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleContext.Provider>
+        </QuestionIdsContext.Provider>
       </Switch>
     </Router>
   );
@@ -149,8 +154,56 @@ jest.mock("../../../hooks/useSize.ts", () => ({
   useSize: () => ({ x: 10, y: 15, width: 917, height: 44, top: 15, right: 527, bottom: 59, left: 10 }),
 }));
 
+/* Mock localStorage, taken from https://robertmarshall.dev/blog/how-to-mock-local-storage-in-jest-tests/ */
+interface LocalStorageMock {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+  clear: () => void;
+  removeItem: (key: string) => void;
+  getAll: () => Record<string, string>;
+}
+
+const localStorageMock: LocalStorageMock = (function () {
+  let store: Record<string, string> = {};
+
+  return {
+    getItem(key) {
+      return store[key];
+    },
+
+    setItem(key, value) {
+      store[key] = value;
+    },
+
+    clear() {
+      store = {};
+    },
+
+    removeItem(key) {
+      delete store[key];
+    },
+
+    getAll() {
+      return store;
+    },
+  };
+})();
+
+Object.defineProperty(window, "localStorage", { value: localStorageMock });
+
 /* TESTING */
 describe("<Question />", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+
+    //mock scroll functions
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+    window.HTMLElement.prototype.scrollTo = jest.fn();
+
+    // Setup localStorage
+    window.localStorage.setItem("repeatio-module-Test-1", JSON.stringify(data));
+  });
+
   afterEach(() => {
     cleanup();
     jest.resetAllMocks();
@@ -159,12 +212,8 @@ describe("<Question />", () => {
 
   /* UNIT TESTING */
   it("should render form with questionID, questionTitle, questionPoints and questionTypeHelp", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     //Expect questionID
     const questionIDElement = screen.getByTestId("question-id");
@@ -185,7 +234,7 @@ describe("<Question />", () => {
   });
 
   it("should render the question with the id of qID-2 when given the correct params", () => {
-    render(<MockQuestionWithRouter qID='qID-2' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-2' mode='practice' order='chronological' />);
 
     const idElement = screen.getByText("ID: qID-2");
     expect(idElement).toBeInTheDocument();
@@ -194,12 +243,8 @@ describe("<Question />", () => {
   /* INTEGRATION TESTING */
   //Expect submit button to submit and lock answers
   it("should disable form after submit", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     let checkOptionElement = screen.getByTestId("question-check");
     user.click(checkOptionElement);
@@ -209,12 +254,8 @@ describe("<Question />", () => {
 
   //Expect the correction box (red or green) to show up after question submit
   it("should show question correction after submit", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     const questionCorrectionElement = screen.queryByTestId("question-correction");
 
@@ -231,12 +272,8 @@ describe("<Question />", () => {
 
   //Expect the question correction to be red
   it("should show question correction as false (red)", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     const checkButtonElement = screen.getByTestId("question-check");
     user.click(checkButtonElement);
@@ -250,12 +287,8 @@ describe("<Question />", () => {
 
   //Expect the question correction to be green
   it("should show the question correction as correct (green)", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     const correctElement = screen.getByText(
       "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas voluptatibus quibusdam magnam."
@@ -274,12 +307,8 @@ describe("<Question />", () => {
 
   //Expect the retry button to work and interact with the form afterwards
   it("should reset the form when clicking the retry button", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-2' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-2' mode='practice' order='chronological' />);
 
     const checkButtonElement = screen.getByTestId("question-check");
     user.click(checkButtonElement);
@@ -312,12 +341,8 @@ describe("<Question />", () => {
 
   //Expect the next question to render if the first answer is answered and next button is clicked
   it("should go to the next question when clicking the next button and practice mode is chronological", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     //Check Question
     const checkQuestionButton = screen.getByTestId("question-check");
@@ -332,12 +357,8 @@ describe("<Question />", () => {
   });
 
   it("should go to a new random question when clicking the next button and practice mode is random", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //render element
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='random' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     //Check Question
     const checkQuestionButton = screen.getByTestId("question-check");
@@ -355,7 +376,7 @@ describe("<Question />", () => {
   //Expect the first element of the data array to render after last element is reached
   it("should render the first question after clicking next on the last question (go to first position of array)", () => {
     const idOfLastElementInTestArray = data.questions[data.questions.length - 1].id;
-    render(<MockQuestionWithRouter qID={idOfLastElementInTestArray} practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID={idOfLastElementInTestArray} mode='practice' order='chronological' />);
 
     let idElement = screen.getByText(`ID: ${idOfLastElementInTestArray}`);
     expect(idElement).toBeInTheDocument();
@@ -377,7 +398,7 @@ describe("<Question />", () => {
   //Expect the last element of the data array to render after previous button is clicked on first element
   it("should render the last question after clicking previous on the first question (go to last position in array)", () => {
     const idOfFirstElementInTestArray = data.questions[0].id;
-    render(<MockQuestionWithRouter qID={idOfFirstElementInTestArray} practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID={idOfFirstElementInTestArray} mode='practice' order='chronological' />);
 
     let idElement = screen.getByText(`ID: ${idOfFirstElementInTestArray}`);
     expect(idElement).toBeInTheDocument();
@@ -392,7 +413,7 @@ describe("<Question />", () => {
 
   //Expect question reveal no to be visible
   it("should not render question correction element when clicking on next question button", () => {
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     //Click check button to reveal question navigation
     const buttonElement = screen.getByTestId("question-check");
@@ -411,7 +432,7 @@ describe("<Question />", () => {
   });
 
   it("should not render question correction element when clicking on next button in question navigation", () => {
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     //Click check button to reveal question navigation
     const checkQuestionButton = screen.getByTestId("question-check");
@@ -427,7 +448,7 @@ describe("<Question />", () => {
 
   //Expect highlight selection to go away when going to next question
   it("should deselect selection when going to next question but a answer was selected (clicked)", () => {
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     //select an element
     const selectedElement = screen.getByText("Lorem ipsum dolor sit amet consectetur adipisicing.");
@@ -449,7 +470,7 @@ describe("<Question />", () => {
 
   //Expect highlight selection to go away when going to next question
   it("should deselect selection when going to next question after submitting answer and clicking next", () => {
-    render(<MockQuestionWithRouter qID='qID-1' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-1' mode='practice' order='chronological' />);
 
     //select an element
     const selectedElement = screen.getByText("Lorem ipsum dolor sit amet consectetur adipisicing.");
@@ -475,7 +496,7 @@ describe("<Question />", () => {
 
   //Expect to render gap text question
   it("should render gap text question", () => {
-    render(<MockQuestionWithRouter qID='qID-3' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-3' mode='practice' order='chronological' />);
 
     expect(screen.getByTestId("question-id")).toHaveTextContent("ID: qID-3");
     expect(screen.getByText("Fill in the blanks.")).toBeInTheDocument();
@@ -484,7 +505,7 @@ describe("<Question />", () => {
 
   //Expect the gap inputs to clear when clicking the reset button (before form submit)
   it("should reset the inputs in gap text to empty when clicking the reset button", () => {
-    render(<MockQuestionWithRouter qID='qID-3' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-3' mode='practice' order='chronological' />);
 
     //Type into the input elements
     let inputElements = screen.getAllByRole("textbox") as HTMLInputElement[];
@@ -500,7 +521,7 @@ describe("<Question />", () => {
 
   //Expect the gap inputs to clear when clicking the reset button (after form submit)
   it("should reset the inputs in gap text to empty when clicking the reset button after form submit", () => {
-    render(<MockQuestionWithRouter qID='qID-3' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-3' mode='practice' order='chronological' />);
 
     //Type into the input elements
     let inputElements = screen.getAllByRole("textbox") as HTMLInputElement[];
@@ -519,7 +540,7 @@ describe("<Question />", () => {
 
   //Expect to trim the gap text input to be trimmed
   it("should trim the input values when checking the answer", () => {
-    render(<MockQuestionWithRouter qID='qID-3' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-3' mode='practice' order='chronological' />);
 
     //Type into the input elements
     let inputElements = screen.getAllByRole("textbox");
@@ -536,7 +557,7 @@ describe("<Question />", () => {
 
   //Expect gap text to accept different correct values
   it("should render question correct when providing two different values to gap text which both could be correct", () => {
-    render(<MockQuestionWithRouter qID='qID-3' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='qID-3' mode='practice' order='chronological' />);
 
     //Type into the input elements (Don't want to setup a data-testid, so we grap the element by the index)
     let inputElements = screen.getAllByRole("textbox");
@@ -569,14 +590,14 @@ describe("<Question />", () => {
   });
 
   it("should render QuestionNotFound Component if the provided ID isn't found", () => {
-    render(<MockQuestionWithRouter qID='id-not-found' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='id-not-found' mode='practice' order='chronological' />);
 
     const questionNotFoundTitle = screen.getByText("Question not found!");
     expect(questionNotFoundTitle).toBeInTheDocument();
   });
 
   it("should disable buttons when Question isn't found", () => {
-    render(<MockQuestionWithRouter qID='id-not-found' practiceMode='chronological' />);
+    render(<MockQuestionWithRouter qID='id-not-found' mode='practice' order='chronological' />);
 
     const questionNotFoundTitle = screen.getByText("Question not found!");
     expect(questionNotFoundTitle).toBeInTheDocument();
@@ -585,15 +606,11 @@ describe("<Question />", () => {
   //Test the history hook Expect the url to change to new params when checking a question
   //Expect the history hook and ui to update on next button click
   it("should update the url (useHistory hook) when clicking the next button and update the ui", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //Create history
     const history = createMemoryHistory();
     history.push({
       pathname: `/module/${data.id}/question/${data.questions[0].id}`,
-      search: "?mode=chronological",
+      search: "?mode=practice&order=chronological",
     });
 
     //render Component with history prop
@@ -616,14 +633,10 @@ describe("<Question />", () => {
 
   //Expect the url to change to previous element in array
   it("should go to previous url when clicking the previous question button", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     const history = createMemoryHistory();
     history.push({
       pathname: `/module/${data.id}/question/${data.questions[1].id}`,
-      search: "?mode=chronological",
+      search: "?mode=practice&order=chronological",
     });
     render(<MockQuestionWithRouterAndHistory history={history} />);
 
@@ -636,15 +649,11 @@ describe("<Question />", () => {
 
   //Expect the array to restart at the last element when clicking the previous question button when on the first element on the array (only test the url not UI)
   it("should restart the array when clicking previous question on the first element in the array", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     //Create history prop (data.questions[0].id === "qID-1")
     const history = createMemoryHistory();
     history.push({
       pathname: `/module/${data.id}/question/${data.questions[0].id}`,
-      search: "?mode=chronological",
+      search: "?mode=practice&order=chronological",
     });
     render(<MockQuestionWithRouterAndHistory history={history} />);
 
@@ -658,12 +667,8 @@ describe("<Question />", () => {
 
   //Expect the url to change to first element in array when clicking the to first Question Button
   it("should go to the first url in array when clicking the to first Question Button", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     const history = createMemoryHistory();
-    history.push(`/module/${data.id}/question/${data.questions[1].id}`); //data.questions[1].id === "qID-2"
+    history.push(`/module/${data.id}/question/${data.questions[1].id}?mode=practice&order=chronological`); //data.questions[1].id === "qID-2"
 
     render(<MockQuestionWithRouterAndHistory history={history} />);
 
@@ -677,12 +682,8 @@ describe("<Question />", () => {
 
   //Expect the url to change to the last element in array when clicking the to last Question Button
   it("should go to the last url in array when clicking the to last Question Button", () => {
-    //mock scroll functions
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    window.HTMLElement.prototype.scrollTo = jest.fn();
-
     const history = createMemoryHistory();
-    history.push(`/module/${data.id}/question/${data.questions[0].id}`);
+    history.push(`/module/${data.id}/question/${data.questions[0].id}?mode=practice&order=chronological`);
     render(<MockQuestionWithRouterAndHistory history={history} />);
 
     //Click the to last Question Button
diff --git a/src/components/Question/components/Actions/BookmarkQuestion.cy.tsx b/src/components/Question/components/Actions/BookmarkQuestion.cy.tsx
index 58ff4fa..468e522 100644
--- a/src/components/Question/components/Actions/BookmarkQuestion.cy.tsx
+++ b/src/components/Question/components/Actions/BookmarkQuestion.cy.tsx
@@ -3,7 +3,7 @@
 // Components
 import { Question } from "../../Question";
 import { BookmarkQuestion } from "./BookmarkQuestion";
-import { ModuleProvider } from "../../../module/moduleContext";
+import { QuestionIdsProvider } from "../../../module/questionIdsContext";
 import { CustomToastContainer } from "../../../toast/toast";
 
 // Router
@@ -25,8 +25,8 @@ declare const expect: Chai.ExpectStatic;
 
 function RenderBookmarkButtonWithRouter({ moduleID, questionID }: IParams) {
   return (
-    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
-      <ModuleProvider>
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=practice&order=chronological`]}>
+      <QuestionIdsProvider>
         <Route path='/module/:moduleID/question/:questionID'>
           <div className='question-form'>
             <div className='question-actions-navigation-wrapper'>
@@ -34,7 +34,7 @@ function RenderBookmarkButtonWithRouter({ moduleID, questionID }: IParams) {
             </div>
           </div>
         </Route>
-      </ModuleProvider>
+      </QuestionIdsProvider>
     </MemoryRouter>
   );
 }
@@ -42,11 +42,11 @@ function RenderBookmarkButtonWithRouter({ moduleID, questionID }: IParams) {
 //Setup Router to access context and useParams
 const RenderQuestionWithRouter = ({ moduleID, questionID }: IParams) => {
   return (
-    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=practice&order=chronological`]}>
       <main>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
       <CustomToastContainer />
     </MemoryRouter>
diff --git a/src/components/Question/components/Actions/DeleteQuestion.cy.tsx b/src/components/Question/components/Actions/DeleteQuestion.cy.tsx
index cd87ccf..43d289c 100644
--- a/src/components/Question/components/Actions/DeleteQuestion.cy.tsx
+++ b/src/components/Question/components/Actions/DeleteQuestion.cy.tsx
@@ -2,9 +2,12 @@
 
 // Components
 import { Question } from "../../Question";
-import { ModuleProvider } from "../../../module/moduleContext";
+import { QuestionIdsProvider } from "../../../module/questionIdsContext";
 import { CustomToastContainer } from "../../../toast/toast";
 
+// Functions
+import { parseJSON } from "../../../../utils/parseJSON";
+
 // Router
 import { Route, MemoryRouter } from "react-router-dom";
 
@@ -15,21 +18,27 @@ import "../../../../index.css";
 import { getBookmarkedLocalStorageItem } from "./BookmarkQuestion";
 
 //Interfaces
-import { IParams } from "../../../../utils/types";
+import { IParams, ISearchParams } from "../../../../utils/types";
+import { IModule } from "../../../module/module";
 
 //Mocha for typescript
 declare var it: Mocha.TestFunction;
 declare var describe: Mocha.SuiteFunction;
 declare const expect: Chai.ExpectStatic;
 
+interface IRenderWithRouter extends IParams {
+  mode: NonNullable<ISearchParams["mode"]>;
+  order: NonNullable<ISearchParams["order"]>;
+}
+
 // Setup Router to access context and useParams
-const RenderWithRouter = ({ moduleID, questionID }: IParams) => {
+const RenderWithRouter: React.FC<IRenderWithRouter> = ({ moduleID, questionID, mode, order }) => {
   return (
-    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=${mode}&order=${order}`]}>
       <main>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/question/:questionID' component={Question} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
       <CustomToastContainer />
     </MemoryRouter>
@@ -38,19 +47,159 @@ const RenderWithRouter = ({ moduleID, questionID }: IParams) => {
 
 describe("Delete a Question", () => {
   beforeEach(() => {
-    cy.viewport(500, 500);
     cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
-    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} />);
   });
 
-  it("should delete a question and navigate to the next question", () => {
-    cy.get("button.show-question-nav").click();
-    cy.get("button[aria-label='Delete Question']").click();
+  it("should delete a question and navigate to the next question (mode=practice & order=chronological)", () => {
+    // Mount Component
+    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} mode='practice' order='chronological' />);
+
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click delete button
+    cy.get("button[aria-label='Delete Question']")
+      .click()
+      .should(() => {
+        const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${"cypress_1"}`));
+        expect(module?.questions.length).to.equal(5);
+      });
 
     cy.contains("qID-2").should("exist");
   });
 
+  it("should delete a question and navigate to next question (mode=practice & order=random)", () => {
+    // Mount Component
+    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} mode='practice' order='random' />);
+
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click delete button
+    cy.get("button[aria-label='Delete Question']")
+      .click()
+      .should(() => {
+        const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${"cypress_1"}`));
+        expect(module?.questions.length).to.equal(5);
+      });
+    cy.get(".question-id").should("exist");
+
+    // Navigate back
+    cy.get("button[aria-label='Navigate to previous Question'").click();
+    cy.get(".question-id").should("exist");
+  });
+
+  it("should delete Question navigate to the next question (mode=bookmarked & order=chronological)", () => {
+    // Mount Component
+    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} mode='bookmarked' order='chronological' />);
+
+    //Setup localStorage
+    const localStorageItem = {
+      id: "cypress_1",
+      type: "marked",
+      compatibility: "0.4.0",
+      questions: ["qID-2", "qID-1"],
+    };
+
+    localStorage.setItem("repeatio-marked-cypress_1", JSON.stringify(localStorageItem, null, "\t"));
+
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click delete button
+    cy.get("button[aria-label='Delete Question']")
+      .click()
+      .should(() => {
+        /* Check that only one question was deleted from the localStorage */
+        const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-cypress_1`));
+        expect(module?.questions.length).to.equal(5);
+      });
+
+    cy.contains("ID: qID-2").should("exist");
+  });
+
+  it("should delete Question navigate to the next question (mode=bookmarked & order=chronological)", () => {
+    // Mount Component
+    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} mode='bookmarked' order='chronological' />);
+
+    //Setup localStorage
+    const localStorageItem = {
+      id: "cypress_1",
+      type: "marked",
+      compatibility: "0.4.0",
+      questions: ["qID-2", "qID-1"],
+    };
+
+    localStorage.setItem("repeatio-marked-cypress_1", JSON.stringify(localStorageItem, null, "\t"));
+
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click delete button
+    cy.get("button[aria-label='Delete Question']")
+      .click()
+      .should(() => {
+        /* Check that only one question was deleted from the localStorage */
+        const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${"cypress_1"}`));
+        expect(module?.questions.length).to.equal(5);
+      });
+
+    cy.contains("ID: qID-2").should("exist");
+  });
+
+  it("should delete Question navigate to the next question (mode=bookmarked & order=random)", () => {
+    // Mount Component
+    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} mode='bookmarked' order='random' />);
+
+    //Setup localStorage
+    const localStorageItem = {
+      id: "cypress_1",
+      type: "marked",
+      compatibility: "0.4.0",
+      questions: ["qID-2", "qID-1"],
+    };
+
+    localStorage.setItem("repeatio-marked-cypress_1", JSON.stringify(localStorageItem, null, "\t"));
+
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click delete button
+    cy.get("button[aria-label='Delete Question']")
+      .click()
+      .should(() => {
+        /* Check that only one question was deleted from the localStorage */
+        const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${"cypress_1"}`));
+        expect(module?.questions.length).to.equal(5);
+      });
+
+    cy.contains("ID: qID-2").should("exist");
+  });
+
   it("should remove question from bookmarked localStorage when deleting a question with the same id", () => {
+    // Mount Component
+    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} mode='practice' order='chronological' />);
+
     //Setup localStorage
     const localStorageItem = {
       id: "cypress_1",
@@ -61,8 +210,14 @@ describe("Delete a Question", () => {
 
     localStorage.setItem("repeatio-marked-cypress_1", JSON.stringify(localStorageItem, null, "\t"));
 
-    //Delete question
-    cy.get("button.show-question-nav").click();
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click delete button
     cy.get("button[aria-label='Delete Question']")
       .click()
       .should(() => {
@@ -73,6 +228,9 @@ describe("Delete a Question", () => {
   });
 
   it("should remove the bookmarked localStorage when a question that is the last remaining bookmarked item", () => {
+    // Mount Component
+    cy.mount(<RenderWithRouter moduleID={"cypress_1"} questionID={"qID-1"} mode='practice' order='chronological' />);
+
     //Setup localStorage
     const localStorageItem = {
       id: "cypress_1",
@@ -83,8 +241,14 @@ describe("Delete a Question", () => {
 
     localStorage.setItem("repeatio-marked-cypress_1", JSON.stringify(localStorageItem, null, "\t"));
 
-    //Delete question
-    cy.get("button.show-question-nav").click();
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click delete button
     cy.get("button[aria-label='Delete Question']")
       .click()
       .should(() => {
@@ -92,4 +256,60 @@ describe("Delete a Question", () => {
         expect(localStorageItem).to.equal(null);
       });
   });
+
+  it("should deselect the current selection if deleting a question", () => {
+    cy.fixtureToLocalStorage("repeatio-module-multiple_choice.json");
+    cy.mount(
+      <RenderWithRouter moduleID={"multiple_choice"} questionID={"mc-1"} mode='practice' order='chronological' />
+    );
+
+    // Select and submit question
+    cy.get("input[value='option-0']").click();
+
+    // Click show navigation button that just exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Delete Question
+    cy.get("button[aria-label='Delete Question']").click();
+
+    // Assert that the radio button is not selected and is enabled
+    cy.get("input[value='option-0']").should("not.be.selected").and("be.enabled");
+  });
+
+  it("should hide the question correction after deleting a question", () => {
+    cy.fixtureToLocalStorage("repeatio-module-multiple_choice.json");
+    cy.mount(
+      <RenderWithRouter moduleID={"multiple_choice"} questionID={"mc-1"} mode='practice' order='chronological' />
+    );
+
+    // Select and submit question
+    cy.get("input[value='option-0']").click();
+
+    // Check answer to trigger correction to show up
+    cy.get("button[aria-label='Check Question']").click();
+
+    // Click show navigation button that just exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Delete Question
+    cy.get("button[aria-label='Delete Question']").click();
+
+    // Assert that the correction is no longer visible
+    cy.get("section.question-correction").should("not.exist");
+
+    // Assert that the radio button is not selected and is enabled
+    cy.get("input[value='option-0']").should("not.be.selected").and("be.enabled");
+  });
 });
+
+/* //TODO
+ - Add test to allow user to delete the last question in the current context 
+*/
diff --git a/src/components/Question/components/Actions/DeleteQuestion.tsx b/src/components/Question/components/Actions/DeleteQuestion.tsx
index 21e7963..53545d3 100644
--- a/src/components/Question/components/Actions/DeleteQuestion.tsx
+++ b/src/components/Question/components/Actions/DeleteQuestion.tsx
@@ -3,9 +3,10 @@ import { useParams, useHistory, useLocation } from "react-router-dom";
 import isElectron from "is-electron";
 import { toast } from "react-toastify";
 import { getBookmarkedLocalStorageItem } from "./BookmarkQuestion";
+import { parseJSON } from "../../../../utils/parseJSON";
 
 //Context
-import { IModuleContext, ModuleContext } from "../../../module/moduleContext";
+import { IQuestionIdsContext, QuestionIdsContext } from "../../../module/questionIdsContext";
 
 //TODO add moduleID as Component param not useParams
 
@@ -14,15 +15,17 @@ import { BiTrash } from "react-icons/bi";
 
 //Interfaces/Types
 import { IParams } from "../../../../utils/types";
-import { IQuestion } from "../../useQuestion";
+import { IQuestion, TUseQuestion } from "../../useQuestion";
+import { IModule } from "../../../module/module";
 
 interface IDeleteQuestion
   extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   questionID: IQuestion["id"] | undefined;
   disabled: boolean;
+  setShowAnswer: TUseQuestion["setShowAnswer"];
 }
 
-export const DeleteQuestion = ({ questionID, disabled, ...props }: IDeleteQuestion) => {
+export const DeleteQuestion = ({ questionID, disabled, setShowAnswer, ...props }: IDeleteQuestion) => {
   //params
   const params = useParams<IParams>();
 
@@ -33,7 +36,7 @@ export const DeleteQuestion = ({ questionID, disabled, ...props }: IDeleteQuesti
   let history = useHistory();
 
   //Access Module
-  const { moduleData, setModuleData, filteredQuestions } = useContext<IModuleContext>(ModuleContext);
+  const { questionIds, setQuestionIds } = useContext<IQuestionIdsContext>(QuestionIdsContext);
 
   //Delete Question from storage
   const handleDelete = () => {
@@ -43,63 +46,65 @@ export const DeleteQuestion = ({ questionID, disabled, ...props }: IDeleteQuesti
       return;
     }
 
-    //Don't allow to edit the basic module
-    if (moduleData.id === "types_1") {
-      toast.warn("Can't delete Questions of test module");
-      return;
-    }
-
+    //TODO allow this with history.push to module overview
     //Don't allow deletion on the last element in the module
-    if (moduleData.questions.length <= 1) {
-      //TODO fix this
+    if ((questionIds?.length || 0) <= 1) {
       toast.warn("Can't delete last question in module for now");
       return;
     }
 
-    //Don't allow question editing when using mode random
-    if (new URLSearchParams(search).get("mode") === "random") {
-      //TODO fix this
-      toast.warn("Don't delete questions in mode random for this time.");
-      return;
-    }
+    // Remove question from localStorage
+    // Get module from localStorage
+    const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${params.moduleID}`));
 
-    if (moduleData.questions.length !== filteredQuestions.length) {
-      toast.warn(
-        "Don't delete questions while viewing just saved questions. This causes too many bugs. I will try to fix this in the future. For now access this question not by using saved questions, but instead find the question with mode chronological or use the question overview to find this question."
-      );
+    if (!module) {
+      toast.error("Couldn't find module!");
+      return;
     }
 
-    //TODO Refactor the code below when the ModuleContext gets refactored
-    const indexInModuleQuestions = moduleData.questions.findIndex((question: IQuestion) => question.id === questionID);
+    // Get index of question that should be deleted
+    const indexInModuleQuestions = module.questions.findIndex((question: IQuestion) => question.id === questionID);
 
     //If question isn't in moduleData don't modify the storage. In Prod this error should never be shown!
-    if (indexInModuleQuestions <= -1) {
+    if (typeof indexInModuleQuestions === "undefined" || indexInModuleQuestions <= -1) {
       toast.error("Couldn't find questionID!");
       return;
     }
 
     //Remove at given index one element
-    moduleData.questions.splice(indexInModuleQuestions, 1);
+    module.questions.splice(indexInModuleQuestions, 1);
 
-    //Update context
-    setModuleData({ ...moduleData, questions: moduleData.questions });
+    // Update localStorage for module
+    localStorage.setItem(`repeatio-module-${params.moduleID}`, JSON.stringify(module, null, "\t"));
 
-    //Navigate to new path with new id
-    const indexInFilteredQuestions = filteredQuestions.findIndex((question: IQuestion) => question.id === questionID);
+    // Navigate to new path with new id
+    const indexInContextQuestionsIds = questionIds?.findIndex((id) => id === questionID);
 
-    //Because the Push to new url
-    if (indexInFilteredQuestions >= 1) {
+    // Hide show answer
+    setShowAnswer(false);
+
+    if (typeof indexInContextQuestionsIds === "undefined") {
+      console.error("ID is not in data.questionIds");
+    } else if (indexInContextQuestionsIds && indexInContextQuestionsIds >= 1) {
+      // Navigate to previous item in array if not at the beginning (0)
       history.push({
-        pathname: `/module/${params.moduleID}/question/${filteredQuestions[indexInFilteredQuestions - 1].id}`,
-        search: `?mode=${new URLSearchParams(search).get("mode") || "chronological"}`,
+        pathname: `/module/${params.moduleID}/question/${questionIds?.[indexInContextQuestionsIds - 1]}`,
+        search: `?mode=${new URLSearchParams(search).get("mode") || "practice"}&order=${
+          new URLSearchParams(search).get("order") || "chronological"
+        }`,
       });
     } else {
       history.push({
-        pathname: `/module/${params.moduleID}/question/${filteredQuestions[indexInFilteredQuestions + 1].id}`,
-        search: `?mode=${new URLSearchParams(search).get("mode") || "chronological"}`,
+        pathname: `/module/${params.moduleID}/question/${questionIds?.[indexInContextQuestionsIds + 1]}`,
+        search: `?mode=${new URLSearchParams(search).get("mode") || "practice"}&order=${
+          new URLSearchParams(search).get("order") || "chronological"
+        }`,
       });
     }
 
+    // Update questionIds context
+    setQuestionIds([...(questionIds ?? []).filter((id) => id !== questionID)]);
+
     //Remove id from saved questions in localStorage
     //Get whole bookmarked item from localStorage
     const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem(params.moduleID);
diff --git a/src/components/Question/components/Actions/EditQuestion.tsx b/src/components/Question/components/Actions/EditQuestion.tsx
index 98bc112..d0eb12b 100644
--- a/src/components/Question/components/Actions/EditQuestion.tsx
+++ b/src/components/Question/components/Actions/EditQuestion.tsx
@@ -7,26 +7,37 @@ import { RiFileEditLine } from "react-icons/ri";
 import { QuestionEditor } from "../../../QuestionEditor/QuestionEditor";
 
 // Interfaces
-import { IQuestion } from "../../useQuestion";
+import { IQuestion, TUseQuestion } from "../../useQuestion";
 
-interface EditQuestionI {
-  prevQuestionID: IQuestion["id"] | undefined;
+interface IEditQuestion {
+  prevQuestion: IQuestion | undefined;
   disabled: boolean;
+  fetchQuestion: TUseQuestion["fetchQuestion"];
+  setShowAnswer: TUseQuestion["setShowAnswer"];
 }
 
 // Component
-export const EditQuestion = ({ prevQuestionID, disabled }: EditQuestionI) => {
+export const EditQuestion = ({ prevQuestion, disabled, fetchQuestion, setShowAnswer }: IEditQuestion) => {
   const [showModal, setShowModal] = useState(false);
 
   const handleModalClose = () => {
     setShowModal(false);
   };
+
   return (
     <>
       <button type='button' onClick={() => setShowModal(true)} disabled={disabled} aria-label='Edit Question'>
         <RiFileEditLine />
       </button>
-      {showModal && <QuestionEditor handleModalClose={handleModalClose} prevQuestionID={prevQuestionID} />}
+      {prevQuestion && showModal && (
+        <QuestionEditor
+          mode='edit'
+          handleModalClose={handleModalClose}
+          prevQuestion={prevQuestion}
+          fetchQuestion={fetchQuestion}
+          setShowAnswer={setShowAnswer}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/Question/components/QuestionNavigation/QuestionNavigation.tsx b/src/components/Question/components/QuestionNavigation/QuestionNavigation.tsx
index c6c5217..274ea6b 100644
--- a/src/components/Question/components/QuestionNavigation/QuestionNavigation.tsx
+++ b/src/components/Question/components/QuestionNavigation/QuestionNavigation.tsx
@@ -1,10 +1,13 @@
 import React, { useRef, useContext } from "react";
 import { useParams, useHistory, useLocation } from "react-router-dom";
 import { toast } from "react-toastify";
-import { IParams } from "../../../../utils/types";
 
 //Context
-import { ModuleContext } from "../../../module/moduleContext";
+import { IQuestionIdsContext, QuestionIdsContext } from "../../../module/questionIdsContext";
+
+//Interfaces
+import { IParams } from "../../../../utils/types";
+import { TUseQuestion } from "../../useQuestion";
 
 //Navigation svg from https://tablericons.com
 
@@ -12,7 +15,11 @@ import { ModuleContext } from "../../../module/moduleContext";
 //- Consider moving all Buttons into Components
 //- Remove to first and to last question
 
-export const QuestionNavigation = () => {
+type TQuestionNavigation = {
+  setShowAnswer: TUseQuestion["setShowAnswer"];
+};
+
+export const QuestionNavigation: React.FC<TQuestionNavigation> = ({ setShowAnswer }) => {
   //Access custom hook navigation functions
   const {
     navigateToFirstQuestion,
@@ -30,7 +37,10 @@ export const QuestionNavigation = () => {
       <button
         data-testid='first-question-button'
         aria-label='Navigate to first Question'
-        onClick={navigateToFirstQuestion}
+        onClick={() => {
+          navigateToFirstQuestion();
+          setShowAnswer(false);
+        }}
         type='button'
       >
         <svg
@@ -51,7 +61,10 @@ export const QuestionNavigation = () => {
       <button
         data-testid='previous-question-button'
         aria-label='Navigate to previous Question'
-        onClick={navigateToPreviousQuestion}
+        onClick={() => {
+          navigateToPreviousQuestion();
+          setShowAnswer(false);
+        }}
         type='button'
       >
         <svg
@@ -75,7 +88,10 @@ export const QuestionNavigation = () => {
         data-testid='nav-next-question-button'
         aria-label='Navigate to next Question'
         type='button'
-        onClick={navigateToNextQuestion}
+        onClick={() => {
+          navigateToNextQuestion();
+          setShowAnswer(false);
+        }}
       >
         <svg
           xmlns='http://www.w3.org/2000/svg'
@@ -95,7 +111,10 @@ export const QuestionNavigation = () => {
         data-testid='last-question-button'
         aria-label='Navigate to last Question'
         type='button'
-        onClick={navigateToLastQuestion}
+        onClick={() => {
+          navigateToLastQuestion();
+          setShowAnswer(false);
+        }}
       >
         <svg
           xmlns='http://www.w3.org/2000/svg'
@@ -117,7 +136,7 @@ export const QuestionNavigation = () => {
 
 export const useQuestionNavigation = () => {
   //context
-  const { filteredQuestions } = useContext(ModuleContext);
+  const { questionIds } = useContext<IQuestionIdsContext>(QuestionIdsContext);
 
   //params
   const params = useParams<IParams>();
@@ -128,19 +147,20 @@ export const useQuestionNavigation = () => {
   //Location (Search url=?...)
   const { search } = useLocation();
 
-  const practiceMode = useRef(new URLSearchParams(search).get("mode") || "chronological"); //Fallback to chronological if urlSearchParams is undefined
+  const mode = useRef(new URLSearchParams(search).get("mode") || "practice"); //Fallback to practice if urlSearchParams is undefined
+  const order = useRef(new URLSearchParams(search).get("order") || "chronological"); //Fallback to chronological order if urlSearchParams is undefined
 
   //Navigation
   //Go to first question in module
   const navigateToFirstQuestion = () => {
-    const firstIDInQuestionArray = filteredQuestions[0].id;
+    const firstIDInQuestionArray = questionIds?.[0];
 
     //Only push to history if not already at the first question
     //TODO notify the user that the already is at the beginning
     if (params.questionID !== firstIDInQuestionArray) {
       history.push({
         pathname: `/module/${params.moduleID}/question/${firstIDInQuestionArray}`,
-        search: `?mode=${practiceMode.current}`,
+        search: `?mode=${mode.current}&order=${order.current}`,
       });
     }
   };
@@ -148,18 +168,18 @@ export const useQuestionNavigation = () => {
   //Go to the previous question
   const navigateToPreviousQuestion = () => {
     //get Current index
-    const currentIndex = filteredQuestions.findIndex((questionItem) => questionItem.id === params.questionID);
+    const currentIndex = questionIds?.findIndex((id) => id === params.questionID);
 
     //Go to next object (url/id) in array if the array length would not be exceded else go to the beginning
-    if (currentIndex - 1 >= 0) {
+    if (currentIndex && currentIndex - 1 >= 0) {
       history.push({
-        pathname: `/module/${params.moduleID}/question/${filteredQuestions[currentIndex - 1].id}`,
-        search: `?mode=${practiceMode.current}`,
+        pathname: `/module/${params.moduleID}/question/${questionIds?.[currentIndex - 1]}`,
+        search: `?mode=${mode.current}&order=${order.current}`,
       });
     } else {
       history.push({
-        pathname: `/module/${params.moduleID}/question/${filteredQuestions[filteredQuestions.length - 1].id}`,
-        search: `?mode=${practiceMode.current}`,
+        pathname: `/module/${params.moduleID}/question/${questionIds?.[questionIds.length - 1]}`,
+        search: `?mode=${mode.current}&order=${order.current}`,
       });
     }
   };
@@ -177,11 +197,13 @@ export const useQuestionNavigation = () => {
   //Return the placeholder value for the input
   const currentQuestionPageIndexPlaceholder = () => {
     //find the current index
-    const index = filteredQuestions?.findIndex((question) => question.id === params.questionID);
+    const currentIndex = questionIds?.findIndex((id) => id === params.questionID);
+
+    if (typeof currentIndex === "undefined") return;
 
     //Return the index and add 1 so indexes aren't zero based if question can be found
-    if (index >= 0) {
-      return (index + 1).toString();
+    if (currentIndex >= 0) {
+      return (currentIndex + 1).toString();
     } else {
       return undefined;
     }
@@ -190,32 +212,34 @@ export const useQuestionNavigation = () => {
   //Go to the next question
   const navigateToNextQuestion = () => {
     //get Current index
-    const currentIndex = filteredQuestions.findIndex((questionItem) => questionItem.id === params.questionID);
+    const currentIndex = questionIds?.findIndex((id) => id === params.questionID);
+
+    if (typeof currentIndex === "undefined") return;
 
     //Go to next object (url/id) in array if the array length would not be exceeded else go to the beginning
-    if (currentIndex + 1 < filteredQuestions.length) {
+    if (currentIndex + 1 < (questionIds?.length ?? 0)) {
       history.push({
-        pathname: `/module/${params.moduleID}/question/${filteredQuestions[currentIndex + 1].id}`,
-        search: `?mode=${practiceMode.current}`,
+        pathname: `/module/${params.moduleID}/question/${questionIds?.[currentIndex + 1]}`,
+        search: `?mode=${mode.current}&order=${order.current}`,
       });
     } else {
       history.push({
-        pathname: `/module/${params.moduleID}/question/${filteredQuestions[0].id}`,
-        search: `?mode=${practiceMode.current}`,
+        pathname: `/module/${params.moduleID}/question/${questionIds?.[0]}`,
+        search: `?mode=${mode.current}&order=${order.current}`,
       });
     }
   };
 
   //Go to last question
   const navigateToLastQuestion = () => {
-    const lastIDInQuestionArray = filteredQuestions[filteredQuestions.length - 1].id;
+    const lastIDInQuestionArray = questionIds?.[questionIds.length - 1];
 
     //Only push to history if not already at the last point
     //TODO notify the user that the end was reached
     if (params.questionID !== lastIDInQuestionArray) {
       history.push({
         pathname: `/module/${params.moduleID}/question/${lastIDInQuestionArray}`,
-        search: `?mode=${practiceMode.current}`,
+        search: `?mode=${mode.current}&order=${order.current}`,
       });
     }
   };
diff --git a/src/components/Question/cypress_tests/QuestionBottom.cy.tsx b/src/components/Question/cypress_tests/QuestionBottom.cy.tsx
index 523eee8..ec2a4cf 100644
--- a/src/components/Question/cypress_tests/QuestionBottom.cy.tsx
+++ b/src/components/Question/cypress_tests/QuestionBottom.cy.tsx
@@ -1,7 +1,7 @@
 import { IQuestionBottom, Question, QuestionBottom } from "../Question";
 import { MemoryRouter, Route } from "react-router-dom";
 import { IParams } from "../../../utils/types";
-import { ModuleProvider } from "../../module/moduleContext";
+import { QuestionIdsProvider } from "../../module/questionIdsContext";
 
 import "../../../index.css";
 
@@ -16,9 +16,9 @@ const RenderComponentWithRouter = ({ component, moduleID, questionID }: IRenderC
   return (
     <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}`]}>
       <main style={{ marginTop: 0, padding: 0 }}>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/question/:questionID' component={component} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
     </MemoryRouter>
   );
diff --git a/src/components/Question/useQuestion.tsx b/src/components/Question/useQuestion.tsx
index 08fc748..0f8fa4f 100644
--- a/src/components/Question/useQuestion.tsx
+++ b/src/components/Question/useQuestion.tsx
@@ -1,19 +1,25 @@
 import { useState, useEffect, useContext, useRef, useCallback } from "react";
-import { useParams } from "react-router-dom";
+import { useHistory, useLocation, useParams } from "react-router-dom";
 import { useQuestionNavigation } from "./components/QuestionNavigation/QuestionNavigation";
+import { parseJSON } from "../../utils/parseJSON";
+import { shuffleArray } from "../../utils/shuffleArray";
+import { addExampleModuleToLocalStorage, isExampleModuleAdded } from "../Home/helpers";
 
 //Context
-import { ModuleContext } from "../module/moduleContext";
+import { QuestionIdsContext, IQuestionIdsContext } from "../module/questionIdsContext";
 
 // Interfaces
 import { IMultipleChoice } from "./QuestionTypes/MultipleChoice/MultipleChoice";
 import { IMultipleResponse } from "./QuestionTypes/MultipleResponse/MultipleResponse";
 import { IGapText } from "./QuestionTypes/GapText/GapText";
 import { IGapTextDropdown } from "./QuestionTypes/GapTextDropdown/GapTextDropdown";
-import { IParams } from "../../utils/types";
+import { IParams, TSettings } from "../../utils/types";
 import { IForwardRefFunctions } from "./QuestionTypes/types";
 import { IExtendedMatch } from "./QuestionTypes/ExtendedMatch/ExtendedMatch";
 import { IGapTextWithTempText } from "../QuestionEditor/AnswerOptionsEditor/QuestionTypes/GapTextEditor";
+import { IModule } from "../module/module";
+import { IBookmarkedQuestions } from "./components/Actions/BookmarkQuestion";
+import { toast } from "react-toastify";
 
 export type TAnswerOptions =
   | IMultipleChoice[]
@@ -43,7 +49,10 @@ export const useQuestion = () => {
   const [answerCorrect, setAnswerCorrect] = useState(false);
 
   //Context
-  const { filteredQuestions, setContextModuleID } = useContext(ModuleContext);
+  const { questionIds, setQuestionIds } = useContext<IQuestionIdsContext>(QuestionIdsContext);
+
+  //URL parameters
+  const { search } = useLocation();
 
   //Refs
   const questionDataRef = useRef<HTMLDivElement>(null);
@@ -52,6 +61,9 @@ export const useQuestion = () => {
   //params
   const params = useParams<IParams>();
 
+  //History
+  let history = useHistory();
+
   //Custom hooks
   const { navigateToNextQuestion } = useQuestionNavigation();
 
@@ -84,60 +96,162 @@ export const useQuestion = () => {
     setShowAnswer(false);
   }, [showAnswer, setShowAnswer, questionDataRef]);
 
-  /* UseEffects */
-  //Set the question state by finding the correct question with the url parameters
-  useEffect(() => {
+  /* Fetch Question from localStorage */
+  const fetchQuestion = useCallback(() => {
+    //Find the correct question in the moduleData context
+    const moduleJson = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${params.moduleID}`));
+
+    const question = moduleJson?.questions.find((question) => question.id === params.questionID);
+
+    setQuestion(question);
+  }, [params.moduleID, params.questionID]);
+
+  /* Set context, question and set Module example if needed */
+  const fetchAndSetQuestions = useCallback(async () => {
     if (params.questionID === undefined) {
       return;
     }
-    //Guard to refetch context (could for example happen on F5)
-    if (filteredQuestions?.length <= 0 && params.moduleID) {
-      setContextModuleID(params.moduleID);
-      return;
+
+    /* setExampleModule if it hasn't been added before */
+    if (params.moduleID === "types_1" && (questionIds?.length ?? 0) === 0) {
+      // Get settings from localStorage
+      const settings = parseJSON<TSettings>(localStorage.getItem("repeatio-settings"));
+
+      /* Add example module to localStorage if it isn't there and the user hasn't removed it (first ever render) */
+      if (!isExampleModuleAdded(settings)) {
+        await addExampleModuleToLocalStorage(settings);
+      }
     }
 
-    //Find the correct question in the moduleData context
-    const returnQuestion = filteredQuestions?.find((questionItem) => questionItem.id === params.questionID);
+    /* Set context if it is empty */
+    if ((questionIds?.length ?? 0) <= 0 && params.moduleID) {
+      const mode = new URLSearchParams(search).get("mode");
+      const order = new URLSearchParams(search).get("order");
 
-    setQuestion(returnQuestion);
-    setLoading(false);
+      if (order !== "chronological" && order !== "random") {
+        console.warn(`${order} is not a valid argument for order! Redirecting to chronological.`);
+        history.push({
+          pathname: `/module/${params.moduleID}/question/${params.questionID}`,
+          search: `?mode=${mode}&order=chronological`,
+        });
+      }
 
-    return () => {
-      setQuestion({} as IQuestion);
-      setLoading(true);
-    };
-  }, [params.questionID, params.moduleID, setContextModuleID, filteredQuestions]);
+      switch (mode) {
+        case "practice":
+          const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${params.moduleID}`));
 
-  //On question unmount, set show answer to false
-  //TODO would be great if the useQuestionNavigation would handle this :/
-  useEffect(() => {
-    return () => {
-      setShowAnswer(false);
-    };
-  }, [question]);
+          let ids = module?.questions.map((question) => question.id);
 
-  //Refetch the question if the user edits a questions
-  useEffect(() => {
-    //Find question with the id from the url
-    const refetchQuestion = () => {
-      const question = filteredQuestions.find((questionItem) => questionItem.id === params.questionID);
-      setQuestion(question);
+          if (ids) {
+            // Randomize the array but keep the first element the same
+            if (order === "random") {
+              // get index of current id
+              const currentIndex = ids.indexOf(params.questionID);
+
+              // Remove the id from the array
+              ids.splice(currentIndex, 1);
+
+              // Shuffle the array
+              ids = shuffleArray(ids);
+
+              // Add the current question id in front of the array so it equals the currently viewed question
+              ids.unshift(params.questionID);
+            }
+
+            setQuestionIds([...ids]);
+          } else {
+            toast.error("Module doesn't exist");
+          }
+          break;
+        case "bookmarked":
+          // TODO only add to bookmarkedIds if the id exists in BookmarkQuestions
+          let bookmarkedIds = parseJSON<IBookmarkedQuestions>(
+            localStorage.getItem(`repeatio-marked-${params.moduleID}`)
+          )?.questions;
+
+          if (bookmarkedIds) {
+            const currentIndex = bookmarkedIds.indexOf(params.questionID);
+
+            // Should only happen if the user navigates with the url to ?mode=bookmarked
+            if (currentIndex <= -1) {
+              toast.error("The current question is not bookmarked!");
+              return;
+            }
+
+            // Get an array of all question IDs from the module in local storage
+            const moduleQuestionIds = parseJSON<IModule>(
+              localStorage.getItem(`repeatio-module-${params.moduleID}`)
+            )?.questions.reduce((acc: string[], question) => {
+              acc.push(question.id);
+              return acc;
+            }, []);
+
+            if (!moduleQuestionIds) return;
+            // Find all valid and invalid IDs in bookmarkedQuestionsIDs and log a warning for each invalid one
+            let { validIds, invalidIds } = bookmarkedIds.reduce(
+              (
+                acc: { validIds: IBookmarkedQuestions["questions"]; invalidIds: IBookmarkedQuestions["questions"] },
+                id
+              ) => {
+                if (moduleQuestionIds?.includes(id)) {
+                  acc.validIds?.push(id);
+                } else {
+                  acc.invalidIds?.push(id);
+                }
+                return acc;
+              },
+              { validIds: [], invalidIds: [] }
+            );
+
+            if (order === "random" && validIds) {
+              // Remove the id from the array
+              validIds.splice(currentIndex, 1);
 
-      if (question) {
+              // Shuffle the array
+              validIds = shuffleArray(validIds);
+
+              // Add the current question id in front of the array so it equals the currently viewed question
+              validIds.unshift(params.questionID);
+            }
+
+            // Update the context if there are any valid ids
+            if (validIds && validIds.length >= 1) {
+              setQuestionIds([...validIds]);
+            }
+
+            // Show warning that includes every id that wasn't found
+            if (invalidIds) {
+              console.warn(`Couldn't find the following ids: ${invalidIds.join(", ")} `);
+            }
+          } else {
+            console.warn("Found 0 bookmarked questions");
+          }
+
+          break;
+        default:
+          console.warn(`${mode} is not a valid argument for mode! Redirecting to practice.`);
+
+          history.push({
+            pathname: `/module/${params.moduleID}/question/${params.questionID}`,
+            search: `?mode=practice&order=${order}`,
+          });
+          break;
       }
-    };
+    }
+
+    fetchQuestion();
+    setLoading(false);
+  }, [params.questionID, params.moduleID, questionIds, search, setQuestionIds, history, fetchQuestion]);
 
-    //Add event listener. If you want to trigger this use:
-    //window.dispatchEvent(new Event("storage"));
-    window.addEventListener("storage", refetchQuestion);
+  /* UseEffects */
+  useEffect(() => {
+    fetchAndSetQuestions();
 
-    //Cleanup
     return () => {
-      window.removeEventListener("storage", refetchQuestion);
       setQuestion({} as IQuestion);
       setLoading(true);
     };
-  }, [params.questionID, filteredQuestions]);
+  }, [params.questionID, fetchAndSetQuestions]);
 
   return {
     question,
@@ -149,5 +263,6 @@ export const useQuestion = () => {
     answerCorrect,
     questionDataRef,
     questionAnswerRef,
+    fetchQuestion,
   } as const;
 };
diff --git a/src/components/QuestionEditor/QuestionEditor.cy.tsx b/src/components/QuestionEditor/QuestionEditor.cy.tsx
index 389dbc8..9abfab2 100644
--- a/src/components/QuestionEditor/QuestionEditor.cy.tsx
+++ b/src/components/QuestionEditor/QuestionEditor.cy.tsx
@@ -1,13 +1,15 @@
 /// <reference types="cypress" />
 
 import { Form } from "./QuestionEditor";
-import { Router } from "react-router-dom";
+import { MemoryRouter, Route, Router } from "react-router-dom";
 import { createMemoryHistory } from "history";
-import { ModuleProvider } from "../module/moduleContext";
+import { QuestionIdsProvider } from "../module/questionIdsContext";
 import { CustomToastContainer } from "../toast/toast";
 
 //CSS
 import "../../index.css";
+import { Question } from "../Question/Question";
+import { IParams, ISearchParams } from "../../utils/types";
 
 //Mocha / Chai for typescript
 declare var it: Mocha.TestFunction;
@@ -23,14 +25,31 @@ const MockFormWithRouter = () => {
   const handleModalCloseSpy = cy.spy().as("handleModalCloseSpy");
   return (
     <Router history={history}>
-      <ModuleProvider>
-        <Form handleModalClose={handleModalCloseSpy} />
+      <QuestionIdsProvider>
+        <Form handleModalClose={handleModalCloseSpy} mode={"create"} />
         <CustomToastContainer />
-      </ModuleProvider>
+      </QuestionIdsProvider>
     </Router>
   );
 };
 
+interface IMockQuestionWithRouter extends Required<IParams> {
+  order: NonNullable<ISearchParams["order"]>;
+  mode: NonNullable<ISearchParams["mode"]>;
+}
+const MockQuestionWithRouter: React.FC<IMockQuestionWithRouter> = ({ moduleID, questionID, mode, order }) => {
+  return (
+    <MemoryRouter initialEntries={[`/module/${moduleID}/question/${questionID}?mode=${mode}&order=${order}`]}>
+      <main style={{ marginTop: 0 }}>
+        <QuestionIdsProvider>
+          <Route path='/module/:moduleID/question/:questionID' component={Question} />
+        </QuestionIdsProvider>
+      </main>
+      <CustomToastContainer />
+    </MemoryRouter>
+  );
+};
+
 /* ------------------------------ Basic Test for Question Editor -------------------------------- */
 describe("QuestionEditor.cy.js", () => {
   beforeEach(() => {
@@ -137,6 +156,168 @@ describe("QuestionEditor.cy.js", () => {
     cy.contains(`The id contains non allowed characters ("#")!`).should("not.exist");
   });
 });
+/* --------------------------------------- Check order --------------------------------------- */
+describe("Check order when editing a existing question", () => {
+  it("should have the same order for multiple-choice elements in the question and question editor", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.mount(<MockQuestionWithRouter questionID='qID-1' mode='practice' moduleID='cypress_1' order='chronological' />);
+
+    let originalOrder: string[] = [];
+    // Get the order of the questions
+    cy.get(".question-multiple-choice .formControlLabel-typography>p").each(($item) => {
+      originalOrder.push($item.text());
+    });
+
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    cy.get("button[aria-label='Edit Question']").click();
+
+    // Get order in EditQuestion Component
+    let editorOrder: string[] = [];
+    // Get the order of the questions
+    cy.get(".editor-content.multiple-choice .editor-label-textarea[required]")
+      .each(($item) => {
+        editorOrder.push($item.text());
+      })
+      .should(() => {
+        expect(editorOrder).to.deep.equal(originalOrder);
+        expect(editorOrder.length).to.equal(4);
+      });
+  });
+
+  it("should have the same order for multiple-response elements in the question and question editor", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+    cy.mount(<MockQuestionWithRouter questionID='qID-2' mode='practice' moduleID='cypress_1' order='chronological' />);
+
+    let originalOrder: string[] = [];
+    // Get the order of the questions
+    cy.get(".question-multiple-response .formControlLabel-typography>p").each(($item) => {
+      originalOrder.push($item.text());
+    });
+
+    // Click show navigation button that only exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    cy.get("button[aria-label='Edit Question']").click();
+
+    // Get order in EditQuestion Component
+    let editorOrder: string[] = [];
+    // Get the order of the questions
+    cy.get(".editor-content.multiple-response .editor-label-textarea[required]")
+      .each(($item) => {
+        editorOrder.push($item.text());
+      })
+      .should(() => {
+        expect(editorOrder).to.deep.equal(originalOrder);
+        expect(editorOrder.length).to.equal(6);
+      });
+  });
+});
+
+describe("Test editing question and evaluate immediate change in question", () => {
+  it("should update the question id if editing the id in the editor (order=chronological)", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+
+    cy.mount(<MockQuestionWithRouter questionID='qID-1' mode='practice' moduleID='cypress_1' order='chronological' />);
+
+    // Click show navigation button that just exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click edit button
+    cy.get("button[aria-label='Edit Question']").click();
+
+    cy.get("input[name='id']").type("0");
+
+    cy.contains("button", "Update").click();
+
+    cy.contains("qID-10").should("exist");
+
+    // navigate to next question and back
+    cy.get("button[aria-label='Navigate to next Question']").click();
+    cy.contains("qID-2").should("exist");
+    cy.get("button[aria-label='Navigate to previous Question']").click();
+    cy.contains("qID-10").should("exist");
+  });
+
+  it("should update the question id if editing the id in the editor (order=random)", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+
+    cy.mount(<MockQuestionWithRouter questionID='qID-1' mode='practice' moduleID='cypress_1' order='random' />);
+
+    // Click show navigation button that just exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click edit button
+    cy.get("button[aria-label='Edit Question']").click();
+
+    cy.get("input[name='id']").type("0");
+
+    cy.contains("button", "Update").click();
+
+    cy.contains("qID-10").should("exist");
+
+    // navigate to next question and back
+    cy.get("button[aria-label='Navigate to next Question']").click();
+    cy.contains("qID-10").should("not.exist");
+    cy.get("button[aria-label='Navigate to previous Question']").click();
+    cy.contains("qID-10").should("exist");
+  });
+
+  it("should reset showAnswer if editing a question", () => {
+    cy.fixtureToLocalStorage("repeatio-module-cypress_1.json");
+
+    cy.mount(<MockQuestionWithRouter questionID='qID-1' mode='practice' moduleID='cypress_1' order='chronological' />);
+
+    // Submit question to trigger showAnswer
+    cy.get("button[aria-label='Check Question']").click();
+
+    // Click show navigation button that just exists on small displays
+    cy.get("body").then((body) => {
+      if (body.find("button[aria-label='Show Navigation']").length > 0) {
+        cy.get("button[aria-label='Show Navigation']").click();
+      }
+    });
+
+    // Click edit button
+    cy.get("button[aria-label='Edit Question']").click();
+
+    // Change correct answer (although this is incorrect)
+    cy.get(".editor-content").find("input[value=option-2]").click();
+
+    // Submit form to update question
+    cy.contains("button", "Update").click();
+
+    // Assert that the Question correction is no longer visible
+    cy.get("section.question-correction").should("not.exist");
+
+    // Click new "correct" value
+    cy.contains("No option can be correct").click();
+
+    // Submit Answer
+    cy.get("button[aria-label='Check Question']").click();
+
+    // Check correction
+    cy.contains("Yes, that's correct!").should("exist");
+    cy.get("ul.correction-multipleChoice-list").contains("No option can be correct").should("exist");
+  });
+});
 
 /* --------------------------------- Answer options editor ------------------------------------- */
 describe("Test AnswerOptionsEditor inside QuestionEditor", () => {
@@ -171,7 +352,7 @@ describe("Test AnswerOptionsEditor inside QuestionEditor", () => {
       cy.get(".editor").find("textarea[required]").should("have.length", 0);
     });
 
-    it("should remove specif item from AnswerOptions (multiple-choice)", () => {
+    it("should remove specific item from AnswerOptions (multiple-choice)", () => {
       cy.get("select[name='type']").select("multiple-choice");
 
       cy.get("button#editor-add-item").click().click();
diff --git a/src/components/QuestionEditor/QuestionEditor.tsx b/src/components/QuestionEditor/QuestionEditor.tsx
index 4951d95..838b7e4 100644
--- a/src/components/QuestionEditor/QuestionEditor.tsx
+++ b/src/components/QuestionEditor/QuestionEditor.tsx
@@ -1,16 +1,15 @@
-import React, { useState, useContext, useRef, useLayoutEffect } from "react";
+import React, { useState, useContext, useRef } from "react";
 import { useParams, useHistory, useLocation } from "react-router-dom";
 import isElectron from "is-electron";
-import { toast } from "react-toastify";
-import { isSafari } from "react-device-detect";
 
 //Context
-import { IModuleContext, ModuleContext } from "../module/moduleContext";
+import { QuestionIdsContext, IQuestionIdsContext } from "../module/questionIdsContext";
 
 //Components
 import { CustomModal } from "../CustomModal/CustomModal";
 import { AnswerOptionsEditor } from "./AnswerOptionsEditor/AnswerOptionsEditor";
 import TextareaAutosize from "@mui/material/TextareaAutosize";
+import { toast } from "react-toastify";
 
 //CSS
 import "./QuestionEditor.css";
@@ -23,12 +22,9 @@ import {
   checkForbiddenUrlChars,
   checkContainsSpaces,
   validator,
+  setPreviousQuestion,
 } from "./helpers";
-import {
-  removeGapContent,
-  extractCorrectGapValues,
-  getGapTextTempText,
-} from "./AnswerOptionsEditor/QuestionTypes/GapTextEditor";
+import { removeGapContent, extractCorrectGapValues } from "./AnswerOptionsEditor/QuestionTypes/GapTextEditor";
 
 //Interfaces
 import { IParams } from "../../utils/types.js";
@@ -36,8 +32,10 @@ import { getBookmarkedLocalStorageItem } from "../Question/components/Actions/Bo
 import { IMultipleChoice } from "../Question/QuestionTypes/MultipleChoice/MultipleChoice";
 import { IGapTextWithTempText } from "./AnswerOptionsEditor/QuestionTypes/GapTextEditor";
 import { IMultipleResponse } from "../Question/QuestionTypes/MultipleResponse/MultipleResponse";
-import { IQuestion } from "../Question/useQuestion";
+import { IQuestion, TUseQuestion } from "../Question/useQuestion";
 import { TAnswerOptions } from "../Question/useQuestion";
+import { parseJSON } from "../../utils/parseJSON";
+import { IModule } from "../module/module";
 
 /* A few words on validation:
 Validation for the inputs is done with native HTML validation (i.e. required), onSubmit and onChange.
@@ -48,45 +46,62 @@ For some reason firefox android does not support HTML5 validation.
 
 //Component
 //TODO in React@v18 use useID hook for label/input elements
-export const QuestionEditor = ({
-  handleModalClose,
-  prevQuestionID,
-}: {
+
+type EditQuestionMode = {
+  mode: "edit";
   handleModalClose: () => void;
-  prevQuestionID?: string;
-}) => {
+  prevQuestion: IQuestion;
+  fetchQuestion: TUseQuestion["fetchQuestion"];
+  setShowAnswer: TUseQuestion["setShowAnswer"];
+};
+
+type CreateQuestionMode = { mode: "create"; handleModalClose: () => void };
+
+type TEditorModes = EditQuestionMode | CreateQuestionMode;
+
+export const QuestionEditor: React.FC<TEditorModes> = (props) => {
   //JSX
   return (
     <CustomModal
-      handleModalClose={handleModalClose}
-      title={prevQuestionID ? "Edit Question" : "Add Question"}
+      handleModalClose={props.handleModalClose}
+      title={props.mode === "edit" ? "Edit Question" : "Add Question"}
       desktopModalHeight='90vh'
     >
-      <Form prevQuestionID={prevQuestionID} handleModalClose={handleModalClose} />
+      {props.mode === "create" ? (
+        <Form mode='create' handleModalClose={props.handleModalClose} />
+      ) : (
+        <Form
+          mode='edit'
+          fetchQuestion={props.fetchQuestion}
+          prevQuestion={props.prevQuestion}
+          handleModalClose={props.handleModalClose}
+          setShowAnswer={props.setShowAnswer}
+        />
+      )}
     </CustomModal>
   );
 };
 
 export type TErrors = Record<keyof IQuestion, string>;
 
-export const Form = ({
-  prevQuestionID,
-  handleModalClose,
-}: {
-  prevQuestionID?: IQuestion["id"];
-  handleModalClose: () => void;
-}) => {
-  //State
-  const [question, setQuestion] = useState<IQuestion>({
-    id: "",
-    title: "",
-    points: "",
-    help: "",
-    type: "",
-    answerOptions: undefined,
-  });
+const newEmptyQuestion = {
+  id: "",
+  title: "",
+  points: "",
+  help: "",
+  type: "" as const,
+  answerOptions: undefined,
+};
+
+export const Form: React.FC<TEditorModes> = (props) => {
+  //State - If creating a new question, provide a predefined empty object else use and modify the previous question
+  const [question, setQuestion] = useState<IQuestion>(
+    props.mode === "create" ? newEmptyQuestion : () => setPreviousQuestion(props.prevQuestion)
+  );
 
   const [errors, setErrors] = useState<TErrors>({} as TErrors);
+
+  // Refs
   const hasSubmitted = useRef(false);
 
   //Params
@@ -99,40 +114,7 @@ export const Form = ({
   const { search } = useLocation();
 
   //Context
-  const { moduleData, setModuleData } = useContext<IModuleContext>(ModuleContext);
-
-  //Fetch Data from Context
-  useLayoutEffect(() => {
-    //TODO fetch from name param not context
-
-    if (prevQuestionID) {
-      //Find question if the user is editing a question (this is the case if prevQuestionID is passed)
-      let questionFromContext = moduleData.questions.find((question: IQuestion) => question.id === prevQuestionID);
-
-      //Combine the text and correctGapValues of gap-text to a variable that is used for the input
-      //Prevent Safari because lookbehind support: https://bugs.webkit.org/show_bug.cgi?id=174931
-      //TODO check if safari ever supports this feature
-      if (questionFromContext?.type === "gap-text" && !isSafari) {
-        questionFromContext = {
-          ...questionFromContext,
-          answerOptions: {
-            tempText: getGapTextTempText((questionFromContext as IQuestion).answerOptions as IGapTextWithTempText),
-          },
-        };
-      }
-
-      if (questionFromContext === undefined) return;
-
-      //!Somehow it keeps the order of the answer options from the question
-      //If this isn't the case anymore when using the storage, pass the question
-      setQuestion({ ...questionFromContext } as IQuestion);
-    }
-
-    return () => {
-      setQuestion({} as IQuestion);
-      hasSubmitted.current = false;
-    };
-  }, [prevQuestionID, moduleData?.questions]);
+  const { questionIds, setQuestionIds } = useContext<IQuestionIdsContext>(QuestionIdsContext);
 
   //Change the value of the question object at the target.name
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
@@ -158,7 +140,7 @@ export const Form = ({
 
     if (isElectron()) {
       toast.warn("Can't edit question in electron for this time. Use your browser instead!");
-      handleModalClose();
+      props.handleModalClose();
       return;
     }
 
@@ -178,14 +160,6 @@ export const Form = ({
     hasSubmitted.current = true;
     let onSubmitErrors = {};
 
-    //Prevent adding to types module as it is originally saved in the public folder
-    //Adding a question would create a module in the localStorage with the same id.
-    if (moduleData?.id === "types_1") {
-      toast.warn("Editing this module (Question Types) is not allowed!");
-      handleModalClose();
-      return;
-    }
-
     //Error in ID
     const idError = validator({
       functions: [
@@ -193,8 +167,8 @@ export const Form = ({
         checkForbiddenUrlChars,
         () =>
           checkNotIdDuplicate({
-            prevQuestionID: prevQuestionID,
-            questions: moduleData?.questions,
+            prevQuestionID: props.mode === "edit" ? props.prevQuestion.id : undefined,
+            questions: parseJSON<IModule>(localStorage.getItem(`repeatio-module-${params.moduleID}`))?.questions || [],
             questionID: question.id,
             params: params,
           }),
@@ -240,45 +214,77 @@ export const Form = ({
     }
 
     //Adding or updating a question
-    if (!prevQuestionID) {
-      //If the user is adding a question (not given prevQuestion), push the new question to the end of the array
-      moduleData?.questions?.push(output as IQuestion);
-      setModuleData({ ...moduleData, questions: moduleData?.questions });
+    if (props.mode === "create") {
+      //If the user is adding a question (not given prevQuestion), push the new question to the end of the localStorage
+      let module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${params.moduleID}`));
+      module?.questions.push(output as IQuestion);
+
+      localStorage.setItem(`repeatio-module-${params.moduleID}`, JSON.stringify(module));
     } else {
       //Handle updating a question
+      let module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${params.moduleID}`));
+
+      if (!module) {
+        throw new Error("Couldn't find module");
+      }
 
       //Try finding the index of the question
-      const index = moduleData?.questions?.findIndex((question: IQuestion) => question.id === output.id);
+      const index = module.questions?.findIndex((question) => question.id === output.id);
 
       //If the user changes the id (index <= -1), the question gets inserted at that position
       if (index > -1) {
-        moduleData.questions.splice(index, 1, output as IQuestion);
-        setModuleData({ ...moduleData, questions: moduleData.questions });
-        window.dispatchEvent(new Event("storage"));
+        // User did not change id on edit
+
+        // Replace the question in localStorage with the edited question
+        module.questions.splice(index, 1, output as IQuestion);
+
+        localStorage.setItem(`repeatio-module-${params.moduleID}`, JSON.stringify(module, null, "\t"));
+
+        // Refetch the question after it was updated
+        props.fetchQuestion();
       } else {
+        // User edited the id of the question
         //Find index of the old id by the provided question id
-        const index = moduleData.questions.findIndex((question: IQuestion) => question.id === prevQuestionID);
+        const previousIdIndexInLocalStorage = module.questions.findIndex(
+          (question) => question.id === props.prevQuestion.id
+        );
 
         //If question isn't in moduleData don't modify the storage. In Prod this should never be shown!
-        if (index <= -1) {
+        if (previousIdIndexInLocalStorage <= -1) {
           toast.error("Couldn't find questionID!");
           return;
         }
 
         //Insert and update context
-        moduleData.questions.splice(index, 1, output as IQuestion);
-        setModuleData({ ...moduleData, questions: moduleData.questions });
+        module.questions.splice(previousIdIndexInLocalStorage, 1, output as IQuestion);
+        localStorage.setItem(`repeatio-module-${params.moduleID}`, JSON.stringify(module, null, "\t"));
+
+        // Update the context with the changed id
+        // Get index of the id in the context
+        const previousIndexInContext = questionIds?.findIndex((id) => id === props.prevQuestion.id);
+
+        if (typeof previousIndexInContext === "undefined") {
+          throw new Error("Couldn't find id in context");
+        }
+
+        // Replace the old id with the new id
+        questionIds?.splice(previousIndexInContext, 1, output.id);
+
+        // Set the context
+        setQuestionIds([...questionIds]);
 
         //Navigate to new path with new id
         history.push({
           pathname: `/module/${params.moduleID}/question/${output.id}`,
-          search: `?mode=${new URLSearchParams(search).get("mode") || "chronological"}`,
+          search: `?mode=${new URLSearchParams(search).get("mode") || "practice"}&order=${
+            new URLSearchParams(search).get("order") || "chronological"
+          }`,
         });
       }
     }
 
     //Update saved questions json object in localStorage if question is edited and the id changed
-    if (prevQuestionID && prevQuestionID !== question.id) {
+    if (props.mode === "edit" && props.prevQuestion.id !== question.id) {
       //Get whole bookmarked item from localStorage
       const localStorageBookmarkedItem = getBookmarkedLocalStorageItem(params.moduleID);
 
@@ -286,7 +292,7 @@ export const Form = ({
       const savedIDs = localStorageBookmarkedItem?.questions;
 
       //Check if question exists in bookmarked array
-      const index = savedIDs?.indexOf(prevQuestionID);
+      const index = savedIDs?.indexOf(props.prevQuestion.id);
 
       //Replaces the previous id with the new id if the id existed in the previous bookmarked questions
       if (index !== undefined && index > -1) {
@@ -302,8 +308,13 @@ export const Form = ({
       }
     }
 
+    if (props.mode === "edit") {
+      // Deselect current question
+      props.setShowAnswer(false);
+    }
+
     hasSubmitted.current = false;
-    handleModalClose();
+    props.handleModalClose();
   };
 
   return (
@@ -361,9 +372,9 @@ export const Form = ({
           className={`update-add-question`}
           aria-disabled={Object.keys(errors).length > 0 ? true : false}
         >
-          {prevQuestionID ? "Update" : "Add"}
+          {props.mode === "edit" ? "Update" : "Add"}
         </button>
-        <button type='button' className='cancel' onClick={handleModalClose}>
+        <button type='button' className='cancel' onClick={props.handleModalClose}>
           Cancel
         </button>
       </div>
diff --git a/src/components/QuestionEditor/helpers.tsx b/src/components/QuestionEditor/helpers.tsx
index dc30a18..97a6fb7 100644
--- a/src/components/QuestionEditor/helpers.tsx
+++ b/src/components/QuestionEditor/helpers.tsx
@@ -1,4 +1,6 @@
 import { Link } from "react-router-dom";
+import { getGapTextTempText, IGapTextWithTempText } from "./AnswerOptionsEditor/QuestionTypes/GapTextEditor";
+import { isSafari } from "react-device-detect";
 
 //Interfaces + Types
 import { IQuestion } from "../Question/useQuestion";
@@ -95,7 +97,14 @@ export function checkNotIdDuplicate({
     return (
       <>
         <span>A question with this id already exists! </span>
-        <Link to={`/module/${params.moduleID}/question/${questionID}`}>View: {questionID}</Link>
+        <Link
+          to={{
+            pathname: `/module/${params.moduleID}/question/${questionID}`,
+            search: "?mode=practice&order=chronological",
+          }}
+        >
+          View: {questionID}
+        </Link>
         <span>
           {" "}
           (<i>Caution:</i> Entered data will be lost when visiting this link!)
@@ -131,3 +140,22 @@ export function checkContainsSpaces({ value, fieldName }: { value: string; field
     )}).`;
   }
 }
+
+/**
+ * Return the question and modifies the answer options for gap-text
+ * @param question
+ */
+export function setPreviousQuestion(question: IQuestion) {
+  //Combine the text and correctGapValues of gap-text to a variable that is used for the input
+  //Prevent Safari because lookbehind support: https://bugs.webkit.org/show_bug.cgi?id=174931
+  //TODO check if safari ever supports this feature
+  if (question?.type === "gap-text" && !isSafari) {
+    question = {
+      ...question,
+      answerOptions: {
+        tempText: getGapTextTempText(question.answerOptions as IGapTextWithTempText),
+      },
+    };
+  }
+  return question;
+}
diff --git a/src/components/QuestionList/QuestionList.css b/src/components/QuestionList/QuestionList.css
index 0ebb2dd..ec5c261 100644
--- a/src/components/QuestionList/QuestionList.css
+++ b/src/components/QuestionList/QuestionList.css
@@ -11,7 +11,6 @@
   align-items: center;
   justify-content: center;
 
-
   font-size: 18px;
   min-height: 5rem;
   margin-bottom: 10px;
@@ -27,7 +26,7 @@
 }
 
 .question-table .index,
-.question-table .button-to-question,
+.question-table .link-to-question,
 .question-table .id {
   justify-self: center;
 }
@@ -72,29 +71,21 @@
   border-radius: 5px;
 }
 
-.question-table .button-to-question {
+.question-table .link-to-question {
   height: 100%;
   width: 60px;
-  cursor: pointer;
-
-  /* Reset default button values*/
-  border: none;
-  appearance: none;
-  outline: none;
-  background-color: transparent;
-
-  border-radius: 5px;
-
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.question-table .button-to-question:focus-visible {
-  /* outline: 2px solid var(--custom-prime-color); */
-  /* outline-offset: -10px; */
+.question-table .link-to-question:focus-visible {
+  border-radius: 5px;
+  outline: transparent;
   box-shadow: inset 0px 0px 0px 3px var(--custom-prime-color);
 }
 
-
-.question-table .button-to-question svg {
+.question-table .link-to-question svg {
   height: 35px;
   width: 35px;
   color: rgb(18, 24, 40);
@@ -102,7 +93,7 @@
 
 /* Media Query for devices that can hover (desktop, not phones) */
 @media (pointer: fine) {
-  .question-table .button-to-question:hover svg {
+  .question-table .link-to-question:hover svg {
     color: var(--custom-prime-color);
   }
 }
@@ -139,7 +130,7 @@
     width: 1.3rem;
   }
 
-  .question-table .button-to-question {
+  .question-table .link-to-question {
     width: 40px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/QuestionList/QuestionList.cy.tsx b/src/components/QuestionList/QuestionList.cy.tsx
index 7ab9bab..9feefa3 100644
--- a/src/components/QuestionList/QuestionList.cy.tsx
+++ b/src/components/QuestionList/QuestionList.cy.tsx
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import { QuestionList } from "./QuestionList";
-import { ModuleProvider } from "../module/moduleContext";
+import { QuestionIdsProvider } from "../module/questionIdsContext";
 
 // Router
 import { Route, MemoryRouter } from "react-router-dom";
@@ -19,9 +19,9 @@ function QuestionListWithRouter({ moduleID }: Required<Pick<IParams, "moduleID">
   return (
     <MemoryRouter initialEntries={[`/module/${moduleID}/all-questions`]}>
       <main style={{ marginTop: 0 }}>
-        <ModuleProvider>
+        <QuestionIdsProvider>
           <Route path='/module/:moduleID/all-questions' component={QuestionList} />
-        </ModuleProvider>
+        </QuestionIdsProvider>
       </main>
     </MemoryRouter>
   );
diff --git a/src/components/QuestionList/QuestionList.tsx b/src/components/QuestionList/QuestionList.tsx
index a899e23..9667b09 100644
--- a/src/components/QuestionList/QuestionList.tsx
+++ b/src/components/QuestionList/QuestionList.tsx
@@ -1,9 +1,7 @@
 //React
-import { useState, useEffect, useContext } from "react";
-import { useParams, useHistory } from "react-router-dom";
-
-//Context
-import { ModuleContext } from "../module/moduleContext";
+import { useState, useEffect } from "react";
+import { parseJSON } from "../../utils/parseJSON";
+import { useParams, Link } from "react-router-dom";
 
 //Components
 import { Spinner } from "../Spinner/Spinner";
@@ -21,7 +19,6 @@ import Checkbox from "@mui/material/Checkbox";
 //Types & Interfaces
 import { IParams } from "../../utils/types";
 import { IModule } from "../module/module";
-import { IQuestion } from "../Question/useQuestion";
 
 export const QuestionList = () => {
   //State
@@ -29,43 +26,20 @@ export const QuestionList = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
-  //Context
-  const { moduleData, setContextModuleID, setFilteredQuestions } = useContext(ModuleContext);
-
   //Params
-  const params = useParams<IParams>();
-
-  //History
-  let history = useHistory();
+  const { moduleID } = useParams<IParams>();
 
   /* UseEffects */
-  //Set the question state from the context or refetch if context is undefined
+  /* Fetch the questions from the localStorage and set the questions */
   useEffect(() => {
-    //Context returned nothing because module wasn't found
-    if (moduleData === null) {
-      setError(true);
-      setLoading(false);
-      return;
-    }
-
-    if (moduleData === undefined) {
-      setLoading(true);
-      setError(false);
-      return;
-    }
+    const questions = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${moduleID}`))?.questions;
 
-    //Set the questions state
-    if (Object.keys(moduleData)?.length !== 0 && moduleData !== undefined) {
-      setQuestions(moduleData.questions);
+    if (questions) {
+      setQuestions(questions);
       setLoading(false);
-      setError(false);
     } else {
-      //Refetch context (could for example happen on F5)
-      if (params.moduleID) {
-        setContextModuleID(params.moduleID);
-      } else {
-        setError(true);
-      }
+      setError(true);
+      setLoading(false);
     }
 
     return () => {
@@ -73,19 +47,7 @@ export const QuestionList = () => {
       setLoading(true);
       setError(false);
     };
-  }, [moduleData, params.moduleID, setContextModuleID]);
-
-  /* Event Handlers */
-  //Go to question url when user clicks arrow button
-  const handleToQuestionClick = (id: IQuestion["id"]) => {
-    setFilteredQuestions(moduleData?.questions);
-
-    //TODO set filteredQuestions with checkboxes
-    history.push({
-      pathname: `/module/${params.moduleID}/question/${id}`,
-      search: `?mode=chronological`,
-    });
-  };
+  }, [moduleID]);
 
   if (loading) {
     return <Spinner />;
@@ -116,9 +78,15 @@ export const QuestionList = () => {
               <div className='rectangle'></div>
               <div className='rectangle'></div>
             </span>
-            <button className='button-to-question' onClick={() => handleToQuestionClick(id)}>
+            <Link
+              className='link-to-question'
+              to={{
+                pathname: `/module/${moduleID}/question/${id}`,
+                search: `?mode=practice&order=chronological`,
+              }}
+            >
               <IoIosArrowForward />
-            </button>
+            </Link>
           </div>
         );
       })}
diff --git a/src/components/module/ModuleNotFound.css b/src/components/module/ModuleNotFound.css
index 9e51132..54defe9 100644
--- a/src/components/module/ModuleNotFound.css
+++ b/src/components/module/ModuleNotFound.css
@@ -7,13 +7,13 @@
   flex-direction: column;
 }
 
-.module-not-found>*:not(h1) {
+.module-not-found > *:not(h1) {
   margin-bottom: 1.5rem;
 }
 
-.module-not-found>h1 {
+.module-not-found > h1 {
   font-size: calc(600% + 10vw);
-  color: rgba(40, 42, 57, 0.12);
+  color: rgba(40, 42, 57, 0.2);
   line-height: 1.1;
   font-weight: 800;
   user-select: none;
@@ -46,7 +46,7 @@
   font-weight: 600;
   line-height: 1;
 
-  transition: box-shadow .2s;
+  transition: box-shadow 0.2s;
 }
 
 .module-not-found .navigation-links a:focus-visible,
@@ -110,7 +110,7 @@
 }
 
 @media screen and (max-width: 650px) {
-  .module-not-found>*:not(h1) {
+  .module-not-found > *:not(h1) {
     margin-bottom: 1rem;
   }
 
@@ -123,4 +123,4 @@
     margin-top: 1rem;
     min-width: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/module/ModuleNotFound.tsx b/src/components/module/ModuleNotFound.tsx
index 452195a..0ec58bb 100644
--- a/src/components/module/ModuleNotFound.tsx
+++ b/src/components/module/ModuleNotFound.tsx
@@ -90,7 +90,7 @@ export const UserModulesList = () => {
         {modules?.map(({ id, name }) => {
           return (
             <li key={`list-item-${id}`}>
-              <Link to={`/module/${id}`}>
+              <Link to={{ pathname: `/module/${id}`, state: { name } }}>
                 {name} ({id})
               </Link>
             </li>
diff --git a/src/components/module/module.tsx b/src/components/module/module.tsx
index 17dfd56..022148b 100644
--- a/src/components/module/module.tsx
+++ b/src/components/module/module.tsx
@@ -1,13 +1,11 @@
-import React, { useState, useContext, useCallback, useLayoutEffect, useEffect } from "react";
-import { useHistory, useParams } from "react-router-dom";
-import { ModuleContext } from "./moduleContext";
+import React, { useState, useCallback, useLayoutEffect, useEffect } from "react";
+import { useHistory, useParams, useLocation } from "react-router-dom";
 import packageJSON from "../../../package.json";
 
 //Components
 import { GridCards } from "../GridCards/GridCards";
 import { SiteHeading } from "../SiteHeading/SiteHeading";
 import { Card, LinkElement, ButtonElement } from "../Card/Card";
-import { Spinner } from "../Spinner/Spinner";
 import { QuestionEditor } from "../QuestionEditor/QuestionEditor";
 import { PopoverButton, PopoverMenu, PopoverMenuItem } from "../Card/Popover";
 import { toast } from "react-toastify";
@@ -24,10 +22,10 @@ import { TbFileExport, TbFileImport } from "react-icons/tb";
 //functions
 import { shuffleArray } from "../../utils/shuffleArray";
 import { saveFile } from "../../utils/saveFile";
+import { parseJSON } from "../../utils/parseJSON";
 
 //Interfaces and types
 import { IParams } from "../../utils/types.js";
-import { IModuleContext } from "./moduleContext";
 import {
   getBookmarkedLocalStorageItem,
   getBookmarkedQuestionsFromModule,
@@ -47,61 +45,46 @@ export interface IModule {
   questions: IQuestion[];
 }
 
+//TODO move this outside
+interface LocationState {
+  name: string | undefined;
+}
+
 //Component
 export const Module = () => {
+  //Access state of link
+  const location = useLocation<LocationState>();
+
   //useState
-  const [module, setModule] = useState<IModule | {}>({});
-  const [loading, setLoading] = useState(true);
+  //const [module, setModule] = useState<IModule | {}>({});
+  const [moduleName, setModuleName] = useState(location.state?.name);
   const [error, setError] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
-  //context
-  const { setFilteredQuestions, moduleData, setContextModuleID } = useContext<IModuleContext>(ModuleContext);
-
   //History
   let history = useHistory();
 
   //Params
   const { moduleID } = useParams<{ moduleID: string }>();
 
-  /* USEEFFECTS */
-  //Update the module state by using the data from the context
-  useLayoutEffect(() => {
-    //Context returned nothing because module wasn't found
-    if (moduleData === null) {
-      setError(true);
-      setLoading(false);
-      return;
-    }
+  /* Refetching the module name if the property is not passed by the router. This is the case when the user directly navigates to the module without navigating through the the home modules. */
+  useEffect(() => {
+    if (!location.state?.name) {
+      // fetch from localStorage
+      const moduleNameFromStorage = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${moduleID}`))?.name;
 
-    if (Object.keys(moduleData)?.length === 0 || moduleData === undefined) {
-      setLoading(true);
-      setError(false);
-      return;
+      // if there is a module found with the id, update the moduleName state else show error
+      if (moduleNameFromStorage) {
+        setModuleName(moduleNameFromStorage);
+      } else {
+        setError(true);
+      }
     }
 
-    //Update module if module was found
-    setModule(moduleData);
-    setError(false);
-    setLoading(false);
-
     return () => {
-      setModule({});
-      setError(false);
-      setLoading(true);
+      setModuleName("");
     };
-  }, [moduleData]);
-
-  //Tell the context to update with the new module (id is in the url)
-  useLayoutEffect(() => {
-    setContextModuleID(moduleID);
-
-    return () => {
-      setModule({});
-      setError(false);
-      setLoading(true);
-    };
-  }, [moduleID, setContextModuleID]);
+  }, [moduleID, location.state?.name]);
 
   //TODO remove this with v0.5
   useEffect(() => {
@@ -125,34 +108,36 @@ export const Module = () => {
   }, [moduleID]);
 
   /*EVENTS*/
-  //Train with all questions in chronological order
+  //Train with all questions in chronological order starting at the first question
   const onChronologicalClick = () => {
-    setFilteredQuestions(moduleData.questions);
+    let questions = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${moduleID}`))?.questions;
 
-    if (moduleData.questions !== undefined && moduleData.questions.length >= 1) {
+    // Navigate to first question if there are questions in the module else show warning
+    if (questions !== undefined && questions.length >= 1) {
       history.push({
-        pathname: `/module/${moduleID}/question/${(module as IModule).questions[0].id}`,
-        search: "?mode=chronological",
+        pathname: `/module/${moduleID}/question/${questions[0].id}`,
+        search: "?mode=practice&order=chronological",
       });
     } else {
       toast.warn("No questions found!");
-      return;
     }
   };
 
   //Train with all questions in random order
   const onRandomClick = () => {
-    //If the array isn't spread, it modifies the order of the original data
-    const shuffledQuestions = shuffleArray([...moduleData.questions]);
-    if (shuffledQuestions.length >= 1) {
-      setFilteredQuestions(shuffledQuestions);
+    const questions = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${moduleID}`))?.questions;
+
+    if (questions && questions.length >= 1) {
+      //If the array isn't spread, it modifies the order of the original data
+      const shuffledQuestions = shuffleArray([...questions]);
+
+      //setFilteredQuestions(shuffledQuestions);
       history.push({
         pathname: `/module/${moduleID}/question/${shuffledQuestions[0].id}`,
-        search: "?mode=random",
+        search: "?mode=practice&order=random",
       });
     } else {
       toast.warn("No questions found!");
-      return;
     }
   };
 
@@ -231,23 +216,17 @@ export const Module = () => {
     },
   ];
 
-  //Show loading while module isn't set
-  if (loading) {
-    return (
-      <div className='module-spinner' style={{ marginTop: "80px" }}>
-        <Spinner />
-      </div>
-    );
-  }
-
-  if (error || Object.keys(module).length < 1) {
+  if (error) {
     return <ModuleNotFound />;
   }
 
+  // TODO: Add Suspense with react 18 <Spinner />
+  //
+
   //JSX
   return (
-    <div id={`module-${(module as IModule).id}`}>
-      <SiteHeading title={`${(module as IModule).name} (${(module as IModule).id})`} />
+    <div id={moduleName}>
+      <SiteHeading title={`${moduleName} (${moduleID})`} />
       <GridCards>
         {moduleCards.map((card) => {
           const { title, disabled, description, icon, bottom } = card;
@@ -266,7 +245,7 @@ export const Module = () => {
           );
         })}
       </GridCards>
-      {showModal && <QuestionEditor handleModalClose={handleModalClose} />}
+      {showModal && <QuestionEditor handleModalClose={handleModalClose} mode={"create"} />}
     </div>
   );
 };
@@ -281,9 +260,6 @@ const BookmarkedQuestionsBottom = () => {
   //Params
   const { moduleID } = useParams<IParams>();
 
-  //Context
-  const { setFilteredQuestions, moduleData } = useContext<IModuleContext>(ModuleContext);
-
   //Reset anchor if component unmounts
   useLayoutEffect(() => {
     return () => {
@@ -367,6 +343,9 @@ const BookmarkedQuestionsBottom = () => {
     let rejectedIDs: IBookmarkedQuestions["questions"] = [];
     let newIDs: IBookmarkedQuestions["questions"] = [];
 
+    //Get module from localStorage
+    const module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${moduleID}`));
+
     //Get old saved questions from localStorage or provide empty array
     const bookmarkedLocalStorageItem = getBookmarkedLocalStorageItem(moduleID);
 
@@ -376,7 +355,7 @@ const BookmarkedQuestionsBottom = () => {
     //Add only ids that are in the module (as question ids) and only if not already in localStorage
     importedBookmarkedFile?.questions?.forEach((importedID) => {
       //Return if id of the imported saved questions is not in the module
-      if (moduleData.questions?.findIndex((question: IQuestion) => question.id === importedID) === -1) {
+      if (module?.questions?.findIndex((question: IQuestion) => question.id === importedID) === -1) {
         rejectedIDs?.push(importedID);
         return false;
       }
@@ -429,8 +408,6 @@ const BookmarkedQuestionsBottom = () => {
 
   //Train with only the saved Questions
   const onBookmarkedQuestionsClick = () => {
-    //TODO for electron get from filesystem
-
     //Get the bookmarked ids from the localStorage item
     const bookmarkedQuestionsIDs = getBookmarkedQuestionsFromModule(moduleID);
 
@@ -442,25 +419,27 @@ const BookmarkedQuestionsBottom = () => {
       return;
     }
 
-    //For each element in the bookmarked array return the question object
-    //kinda expensive calculation (array in array) :/
-    let bookmarkedQuestions: IQuestion[] = [];
-    bookmarkedQuestionsIDs.forEach((item) => {
-      const question = moduleData.questions.find((question: IQuestion) => question.id === item);
-      //push question object to array if question is found
-      if (question !== undefined) {
-        bookmarkedQuestions.push(question);
-      }
-    });
+    // Get an array of all question IDs from the module in local storage
+    const allIds = parseJSON<IModule>(localStorage.getItem("repeatio-module-cypress_1"))?.questions.reduce(
+      (acc: string[], question) => {
+        acc.push(question.id);
+        return acc;
+      },
+      []
+    );
 
-    //Update the context
-    setFilteredQuestions(bookmarkedQuestions);
+    // Find the first valid ID in bookmarkedQuestionsIDs that exists in allIds
+    const validId = bookmarkedQuestionsIDs.find((id) => allIds?.includes(id));
 
-    //Navigate to question component
-    history.push({
-      pathname: `/module/${moduleID}/question/${bookmarkedQuestions[0].id}`,
-      search: "?mode=chronological",
-    });
+    if (validId) {
+      //Navigate to question component
+      history.push({
+        pathname: `/module/${moduleID}/question/${validId}`,
+        search: "?mode=bookmarked&order=chronological",
+      });
+    } else {
+      toast.error("Bookmarked Questions only include invalid ids! Please contact the developer on GitHub!");
+    }
   };
 
   return (
diff --git a/src/components/module/moduleContext.tsx b/src/components/module/moduleContext.tsx
deleted file mode 100644
index 450f02d..0000000
--- a/src/components/module/moduleContext.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { createContext, useMemo, useState, useEffect, useCallback } from "react";
-import { toast } from "react-toastify";
-
-//Functions
-import isElectron from "is-electron";
-import { fetchModuleFromPublicFolder } from "../../utils/fetchModuleFromPublicFolder";
-import { parseJSON } from "../../utils/parseJSON";
-import { IModule } from "./module";
-
-export interface IModuleContext {
-  moduleData: IModule;
-  setModuleData: React.Dispatch<React.SetStateAction<IModule>>;
-  setContextModuleID: React.Dispatch<React.SetStateAction<string>>;
-  filteredQuestions: IModule["questions"];
-  setFilteredQuestions: React.Dispatch<React.SetStateAction<IModule["questions"]>>;
-}
-
-//Create Question Context
-export const ModuleContext = createContext({} as IModuleContext);
-
-//Provide the data to all children
-export const ModuleProvider = ({ children }: { children: React.ReactNode }) => {
-  const [initialData, setInitialData] = useState<IModule>({} as IModule);
-  const [filteredQuestions, setFilteredQuestions] = useState<IModule["questions"]>([]);
-  const [moduleContextID, setContextModuleID] = useState<IModule["id"]>("");
-
-  //Change every time module name changes
-  const initialDataProvider = useMemo(() => ({ initialData, setInitialData }), [initialData, setInitialData]);
-
-  const filterProvider = useMemo(
-    () => ({ filteredQuestions, setFilteredQuestions }),
-    [filteredQuestions, setFilteredQuestions]
-  );
-
-  //TODO move setFilteredQuestions/setInitialData into a callback
-
-  //Get the module data from the localStorage of the browser
-  const getDataFromBrowser = useCallback(async () => {
-    let module;
-
-    if (moduleContextID !== "types_1") {
-      //Fetch data from the locale Storage
-      try {
-        //module = JSON.parse(localStorage.getItem(`repeatio-module-${moduleContextID}`));
-        module = parseJSON<IModule>(localStorage.getItem(`repeatio-module-${moduleContextID}`));
-      } catch (error) {
-        if (error instanceof Error) {
-          toast.warn(error.message);
-        }
-      }
-    } else {
-      //Fetch data from public folder
-      module = await fetchModuleFromPublicFolder();
-    }
-
-    //Set the data
-    setInitialData(module);
-    setFilteredQuestions(module?.questions);
-  }, [moduleContextID]);
-
-  //Get all Questions from the file system / locale storage and provide them
-  useEffect(() => {
-    if (moduleContextID === "") return;
-
-    //Get the data from the locale file system when using the electron application else (when using the website) get the data from the public folder/browser storage
-    if (isElectron()) {
-      // Send a message to the main process
-      (window as any).api.request("toMain", ["getModule", moduleContextID]);
-
-      // Called when message received from main process
-      (window as any).api.response("fromMain", (data: IModule) => {
-        setInitialData(data);
-        setFilteredQuestions(data.questions);
-      });
-    } else {
-      //Not using electron
-      getDataFromBrowser();
-    }
-
-    //Cleanup
-    return () => {
-      setInitialData({} as IModule);
-      setFilteredQuestions([]);
-    };
-  }, [moduleContextID, getDataFromBrowser]);
-
-  //Update the localStorage/filesystem if initialData changes
-  useEffect(() => {
-    //Don't update the storage if the data is undefined or from the public folder (id: types_1)
-    if (
-      !initialData ||
-      initialData === undefined ||
-      Object.keys(initialData)?.length < 1 ||
-      initialData?.id === "types_1"
-    ) {
-      return;
-    }
-
-    //Update filesystem (electron) or localStorage (website)
-    if (isElectron()) {
-      //TODO save to filesystem
-    } else if (!isElectron()) {
-      try {
-        localStorage.setItem(`repeatio-module-${initialData.id}`, JSON.stringify(initialData, null, "\t"));
-      } catch (error) {
-        if (error instanceof Error) {
-          toast.warn(error.message);
-        }
-      }
-    }
-  }, [initialData]);
-
-  return (
-    <ModuleContext.Provider
-      value={{
-        moduleData: initialDataProvider.initialData,
-        setModuleData: initialDataProvider.setInitialData,
-        setContextModuleID: setContextModuleID,
-        filteredQuestions: filterProvider.filteredQuestions,
-        setFilteredQuestions: filterProvider.setFilteredQuestions,
-      }}
-    >
-      {children}
-    </ModuleContext.Provider>
-  );
-};
diff --git a/src/components/module/questionIdsContext.tsx b/src/components/module/questionIdsContext.tsx
new file mode 100644
index 0000000..4928c8f
--- /dev/null
+++ b/src/components/module/questionIdsContext.tsx
@@ -0,0 +1,31 @@
+import React, { createContext, useMemo, useState } from "react";
+
+// Interfaces
+import { IQuestion } from "../Question/useQuestion";
+
+export interface IQuestionIdsContext {
+  questionIds: IQuestion["id"][];
+  setQuestionIds: React.Dispatch<React.SetStateAction<IQuestion["id"][]>>;
+}
+
+//Create Context
+export const QuestionIdsContext = createContext({} as IQuestionIdsContext);
+
+//Provide the data to all children
+export const QuestionIdsProvider = ({ children }: { children: React.ReactNode }) => {
+  const [data, setData] = useState<IQuestionIdsContext["questionIds"]>([]);
+
+  // Memorize the data
+  const dataProvider = useMemo(() => ({ data, setData }), [data, setData]);
+
+  return (
+    <QuestionIdsContext.Provider
+      value={{
+        questionIds: dataProvider.data,
+        setQuestionIds: dataProvider.setData,
+      }}
+    >
+      {children}
+    </QuestionIdsContext.Provider>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
index 7a74625..9989453 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,7 +29,7 @@ import { Footer } from "./components/Footer/Footer";
 import { CustomToastContainer } from "./components/toast/toast";
 
 //Context
-import { ModuleProvider } from "./components/module/moduleContext";
+import { QuestionIdsProvider } from "./components/module/questionIdsContext";
 
 //Import functions
 import { ScrollToTop } from "./utils/ScrollToTop";
@@ -52,11 +52,11 @@ ReactDOM.render(
           <Route exact path='/settings' component={SettingsPage} />
           <Route exact path='/legal-notice' component={LegalNoticePage} />
           <Route exact path='/privacy' component={PrivacyPage} />
-          <ModuleProvider>
-            <Route exact path='/module/:moduleID' component={ModulePage} />
+          <Route exact path='/module/:moduleID' component={ModulePage} />
+          <Route exact path='/module/:moduleID/all-questions' component={AllQuestionsPage} />
+          <QuestionIdsProvider>
             <Route exact path='/module/:moduleID/question/:questionID' component={QuestionPage} />
-            <Route exact path='/module/:moduleID/all-questions' component={AllQuestionsPage} />
-          </ModuleProvider>
+          </QuestionIdsProvider>
         </Switch>
       </main>
       <Footer />
diff --git a/src/utils/fetchModuleFromPublicFolder.ts b/src/utils/fetchModuleFromPublicFolder.ts
index b8c13c2..ce52f7d 100644
--- a/src/utils/fetchModuleFromPublicFolder.ts
+++ b/src/utils/fetchModuleFromPublicFolder.ts
@@ -1,22 +1,20 @@
-import { toast } from "react-toastify";
+import { IModule } from "../components/module/module";
 
 //Fetch the module from the public folder
-export async function fetchModuleFromPublicFolder() {
+export async function fetchModuleFromPublicFolder(): Promise<IModule | undefined> {
   try {
-    const data = await fetch("/data.json", { mode: "no-cors" });
+    const res = await fetch("/data.json", { mode: "no-cors" });
 
-    const toJsObject = await data.json();
-
-    if (data.ok) {
-      return toJsObject;
+    if (res.ok) {
+      const data: IModule = await res.json();
+      return data;
     } else {
-      toast.warn(toJsObject.message || toJsObject.statusText);
-      return;
+      const errorData = await res.json();
+      throw new Error(errorData.message || res.statusText);
     }
   } catch (error) {
     if (error instanceof Error) {
-      console.warn(error.message);
+      console.error(error.message);
     }
-    return;
   }
 }
diff --git a/src/utils/parseJSON.ts b/src/utils/parseJSON.ts
index 3be9a46..d3c6f18 100644
--- a/src/utils/parseJSON.ts
+++ b/src/utils/parseJSON.ts
@@ -5,7 +5,7 @@
 export function parseJSON<T>(value: string | null): T | undefined | null {
   if (value === null) {
     return null;
-  } else if (value === "undefined") {
+  } else if (value === "undefined" || typeof value === "undefined") {
     return undefined;
   } else {
     try {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index be9481b..85e414e 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -2,3 +2,12 @@ export interface IParams {
   moduleID?: string;
   questionID?: string;
 }
+
+export interface ISearchParams {
+  mode?: "practice" | "bookmarked"; // "selected" | "exam"
+  order?: "chronological" | "random";
+}
+
+export type TSettings = {
+  addedExampleModule?: boolean;
+};