diff --git a/cypress/e2e/tests.cy.ts b/cypress/e2e/tests.cy.ts
index a04fe3bf..bb98870c 100644
--- a/cypress/e2e/tests.cy.ts
+++ b/cypress/e2e/tests.cy.ts
@@ -150,13 +150,15 @@ describe("Chat Bot Test Suite", () => {
 	});
 
 	it("Toggles notifications", () => {
-		cy.get(".rcb-notification-icon-on").click();
-		cy.get(".rcb-notification-icon-off").should("be.visible");
+		cy.get("[data-testid='rcb-notification-icon-svg']").click();
+		cy.wait(100);
+		cy.get("[data-testid='rcb-notification-icon-svg']").should('have.css', 'fill', 'rgb(232, 234, 237)'); 
 	});
 
 	it("Toggles audio", () => {
-		cy.get(".rcb-audio-icon-off").click();
-		cy.get(".rcb-audio-icon-on").should("be.visible");
+		cy.get("[data-testid='rcb-audio-icon-svg']").click();
+		cy.wait(100);
+		cy.get("[data-testid='rcb-audio-icon-svg']").should('have.css', 'fill', 'rgb(252, 236, 61)'); 
 	});
 
 	it("Toggles voice", () => {
diff --git a/src/components/Buttons/AudioButton/AudioButton.tsx b/src/components/Buttons/AudioButton/AudioButton.tsx
index a72bcc01..900190f0 100644
--- a/src/components/Buttons/AudioButton/AudioButton.tsx
+++ b/src/components/Buttons/AudioButton/AudioButton.tsx
@@ -51,7 +51,10 @@ const AudioButton = () => {
 		return (
 			IconComponent &&
 			<span className="rcb-audio-icon" data-testid="rcb-audio-icon">
-				<IconComponent style={audioToggledOn ? audioIconStyle : audioIconDisabledStyle}/>
+				<IconComponent
+					style={audioToggledOn ? audioIconStyle : audioIconDisabledStyle}
+					data-testid="rcb-audio-icon-svg"
+				/>
 			</span>
 		)
 	}
diff --git a/src/components/Buttons/NotificationButton/NotificationButton.tsx b/src/components/Buttons/NotificationButton/NotificationButton.tsx
index d4a8da6c..1d2b0c30 100644
--- a/src/components/Buttons/NotificationButton/NotificationButton.tsx
+++ b/src/components/Buttons/NotificationButton/NotificationButton.tsx
@@ -53,7 +53,10 @@ const NotificationButton = () => {
 		return (
 			IconComponent &&
 			<span className="rcb-notification-icon" data-testid="rcb-notification-icon">
-				<IconComponent style={notificationsToggledOn? notificationIconStyle : notificationIconDisabledStyle}/>
+				<IconComponent
+					style={notificationsToggledOn? notificationIconStyle : notificationIconDisabledStyle}
+					data-testid="rcb-notification-icon-svg"
+				/>
 			</span>
 		)
 	}
diff --git a/src/components/ChatBotHeader/ChatBotHeader.css b/src/components/ChatBotHeader/ChatBotHeader.css
index 64a7a907..ee73a154 100644
--- a/src/components/ChatBotHeader/ChatBotHeader.css
+++ b/src/components/ChatBotHeader/ChatBotHeader.css
@@ -22,51 +22,4 @@
 	height: 30px;
 	border-radius: 50%;
 	margin-right: 12px;
-}
-
-/* Notification & Audio Icon */
-
-.rcb-notification-icon-on,
-.rcb-notification-icon-off,
-.rcb-audio-icon-on,
-.rcb-audio-icon-off {
-	position: relative;
-	display: inline-block;
-	background-size: cover;
-	width: 30px;
-	height: 30px;
-	border: none;
-	cursor: pointer;
-	margin-left: 5px;
-}
-
-.rcb-notification-icon-off,
-.rcb-audio-icon-off {
-	filter: grayscale(100%);
-}
-
-.rcb-notification-icon-on::after,
-.rcb-notification-icon-off::after,
-.rcb-audio-icon-on::after,
-.rcb-audio-icon-off::after {
-	content: "";
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 0;
-	height: 0;
-	background-color: rgba(0, 0, 0, 0.1);
-	border-radius: 50%;
-	opacity: 0;
-	transition: width 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;
-}
-  
-.rcb-notification-icon-on:hover::after,
-.rcb-notification-icon-off:hover::after,
-.rcb-audio-icon-on:hover::after,
-.rcb-audio-icon-off:hover::after {
-	width: 130%;
-	height: 130%;
-	opacity: 1;
 }
\ No newline at end of file