diff --git a/README.md b/README.md
index 96eb1bd..4b1413b 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,16 @@ You can choose which widgets should appear by passing an object inside of the `i
 
 Here's an example:
 
+```html
+<script>
+  initializeAstral({
+    filterWidget: ["Contrast", "Bigger Text", "Screen Mask"],
+  });
+</script>
+```
+
+Optionally we can choose which widgets should appear by passing an object inside of function call:
+
 ```html
 <script>
   initializeAstral({
@@ -62,7 +72,7 @@ Here's an example:
       "Screen Reader",
       "Contrast",
       "Saturation",
-      "Text Size",
+      "Bigger Text",
       "Text Spacing",
       "Screen Mask",
       "Line Height",
diff --git a/cypress.config.ts b/cypress.config.ts
index ae953ea..b42c86f 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -11,6 +11,7 @@ export default defineConfig({
 
   env: {
     baseUrl: "http://localhost:8000",
+    blankUrl: "http://localhost:8000/blank-page.html",
   },
 
   e2e: {
diff --git a/cypress/e2e/filter-feature.cy.ts b/cypress/e2e/filter-feature.cy.ts
new file mode 100644
index 0000000..8a76f3e
--- /dev/null
+++ b/cypress/e2e/filter-feature.cy.ts
@@ -0,0 +1,113 @@
+describe("tests the enabling of different features", () => {
+  it("passes", () => {
+    //checks contract component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", { enabledFeatures: ["Contrast"] });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-contrast");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks screen reader component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Screen Reader"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-screen-reader");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks saturation component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Saturation"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-saturate");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks text size component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Bigger Text"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-text-size");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks text spacing component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Text Spacing"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-text-spacing");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks screen mask component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Screen Mask"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-screen-mask");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks line height component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Line Height"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-line-height");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.clearLocalStorage();
+  });
+});
diff --git a/projects/demo/blank-page.html b/projects/demo/blank-page.html
new file mode 100644
index 0000000..b77fa6b
--- /dev/null
+++ b/projects/demo/blank-page.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Astral Accessibility</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <p>Filter Feature Test</p>
+    <script src="main.js"></script>
+  </body>
+</html>