diff --git a/src/apps/favorites-list/favorites-list.test.ts b/src/apps/favorites-list/favorites-list.test.ts
index 119598c03a..17892c778d 100644
--- a/src/apps/favorites-list/favorites-list.test.ts
+++ b/src/apps/favorites-list/favorites-list.test.ts
@@ -6,6 +6,7 @@ describe("Favorites list", () => {
       win.sessionStorage.setItem(TOKEN_LIBRARY_KEY, "random-token");
     });
 
+    // To get the list of favorites
     cy.intercept("GET", "**list/default**", {
       statusCode: 200,
       body: {
@@ -16,12 +17,17 @@ describe("Favorites list", () => {
           "870970-basis:29630364"
         ]
       }
-    }).as("favorites");
+    }).as("Favorites");
 
-    // To fill the heart
-    cy.intercept("HEAD", "**list/default/work-of**", {
+    // To mark materials as favorites
+    cy.intercept("HEAD", "**list/default/**", {
       statusCode: 200
-    });
+    }).as("Favorite list service");
+
+    // To delete a material from favorites
+    cy.intercept("DELETE", "**list/default/**", {
+      statusCode: 200
+    }).as("Favorite list service");
 
     cy.interceptRest({
       aliasName: "Availability",
@@ -45,31 +51,75 @@ describe("Favorites list", () => {
     cy.visit("/iframe.html?id=apps-favorite-list--primary&viewMode=story");
   });
 
-  it("Favorites list basics", () => {
+  // Test that the list of favorites is displayed with materials correctly
+  it("Favorites list render as expected", () => {
     // Wait for element not in skeleton screen to prevent testing prematurely.
     cy.get(".cover").should("be.visible");
 
-    // 2.a. Header "Favorites"
+    // Header has "Favorites"
     cy.get(".content-list-page").find("h1").should("have.text", "Favorites");
-    // Number of materials on list
+
+    // Sub header shows correct number of materials
     cy.get(".content-list-page")
       .find("p")
       .eq(0)
       .should("have.text", "3 materials");
 
-    // 2.f. Link on material to work page
+    // Material links to correct material
     cy.get(".content-list-page")
       .find(".card-list-item")
       .eq(0)
       .find("a")
       .should("have.attr", "href")
       .should("include", "/work/work-of:870970-basis:20636866");
+
+    // Material has filled heart icon
+    cy.get(".content-list-page")
+      .find(".card-list-item")
+      .eq(0)
+      .find(".icon-favourite")
+      .should("have.class", "icon-favourite--filled");
   });
+
   it("Favorites list paginates", () => {
     // 2.h it paginates
     cy.visit(
       "/iframe.html?id=apps-favorite-list--primary&args=pageSizeDesktop:2;pageSizeMobile:2"
     );
+    // Content list should only contain 2 materials
+    cy.get(".content-list-page")
+      .find(".card-list-item")
+      .should("have.length", 2);
+    // Show more materials
+    cy.get(".result-pager").find(".btn-primary").click();
+    // Content list should now contain 3 materials
+    cy.get(".content-list-page")
+      .find(".card-list-item")
+      .should("have.length", 3);
+  });
+
+  // Test that we can remove a material from the list of favorites
+  it("Remove favourite", () => {
+    // To get the list of favorites after removing one
+    cy.intercept("GET", "**list/default**", {
+      statusCode: 200,
+      body: {
+        id: "default",
+        collections: ["870970-basis:51363035", "870970-basis:29630364"]
+      }
+    }).as("favorites");
+
+    // Wait for element not in skeleton screen to prevent testing prematurely.
+    cy.get(".cover").should("be.visible");
+
+    // Find the first material in the list and click the heart icon
+    cy.get(".content-list-page")
+      .find(".card-list-item")
+      .eq(0)
+      .find(".button-favourite")
+      .click();
+
+    // Material list should now contain 2 materials
     cy.get(".content-list-page")
       .find(".card-list-item")
       .should("have.length", 2);
diff --git a/src/apps/material/material.test.ts b/src/apps/material/material.test.ts
index b1fc85273a..f3474eae6a 100644
--- a/src/apps/material/material.test.ts
+++ b/src/apps/material/material.test.ts
@@ -539,6 +539,34 @@ describe("Material", () => {
       .should("have.attr", "aria-pressed", "false");
   });
 
+  it("Can favorite a material", () => {
+    cy.interceptGraphql({
+      operationName: "getMaterial",
+      fixtureFilePath: "material/fbi-api.json"
+    });
+
+    // Intercept like button to show it as filled
+    cy.intercept("PUT", "**/list/default/**", {
+      statusCode: 200
+    }).as("Favorite list service");
+
+    cy.createFakeAuthenticatedSession();
+
+    cy.visit("/iframe.html?id=apps-material--default&viewMode=story&type=bog");
+
+    // Material should show an unfilled heart icon
+    cy.get(".icon-favourite").should(
+      "not.have.class",
+      "icon-favourite--filled"
+    );
+
+    // Favorite the material
+    cy.get(".button-favourite").click();
+
+    // Material should show a filled heart icon
+    cy.get(".icon-favourite").should("have.class", "icon-favourite--filled");
+  });
+
   beforeEach(() => {
     cy.interceptRest({
       httpMethod: "POST",
@@ -577,7 +605,7 @@ describe("Material", () => {
       fixtureFilePath: "material/availability.json"
     });
 
-    // Intercept like button
+    // Intercept like button to show it as unfilled
     cy.intercept("HEAD", "**/list/default/**", {
       statusCode: 404
     }).as("Favorite list service");