diff --git a/samples/interactions/chat/styling/src/ChatStyling.css b/samples/interactions/chat/styling/src/ChatStyling.css
index fc1ad8a70d..43bc40e1fb 100644
--- a/samples/interactions/chat/styling/src/ChatStyling.css
+++ b/samples/interactions/chat/styling/src/ChatStyling.css
@@ -1,60 +1,63 @@
-.chat-wrapper {
-    width: 100%;
-    height: 100%;
-}
-
 igc-chat {
-    border: 2px solid var(--ig-gray-300);
+  --message-actions-color: var(--ig-warn-900);
+
+  background: var(--ig-warn-50);
 }
 
 igc-chat::part(header) {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid var(--ig-gray-300);
-    background-color: var(--ig-gray-200);
-    font-family: 'Franklin Gothic Medium';
-    color: var(--ig-gray-700);
+  background-color: var(--ig-gray-800);
+  color: var(--ig-warn-400);
 }
 
 igc-chat::part(message-container) {
-    background: var(--igc-chat-bubble-bg, #eee);
-    color: var(--igc-chat-text-color, #222);
-    padding: 12px;
-    border-radius: 8px;
-    transition: background .15s;
+  background: var(--ig-warn-200);
+  color: var(--ig-warn-200-contrast);
 }
 
 igc-chat::part(message-sent) {
-    background: var(--igc-chat-sent-bubble-bg, #e6f4ff);
-    color: var(--igc-chat-sent-text-color, #03396b);
+  background: var(--ig-warn-500);
+  color: var(--ig-warn-500-contrast);
 }
 
 igc-chat::part(message-header) {
-    color: #c00000; 
-    font-weight: bold; 
-    margin: 8px;
+  color: var(--ig-warn-A700);
+}
+
+igc-chat::part(attachment-header) {
+  background: var(--ig-warn-100);
 }
 
-igc-chat::part(message-actions-container) {
-    border-top: 1px solid var(--ig-gray-300);
+igc-chat::part(attachment-icon) {
+  color: var(--ig-warn-500);
 }
 
 igc-chat::part(suggestion) {
-    background-color: var(--ig-primary-100);
-    color: var(--ig-primary-800);
-    margin: .125rem;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--ig-warn-500);
+  color: var(--ig-warn-500-contrast);
+}
+
+igc-chat::part(suggestions-header) {
+  color: var(--ig-success-300);
 }
 
-igc-chat::part(message-attachment) {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-    background: var(--igc-chat-sent-bubble-bg);
+igc-chat::part(input-area) {
+  border-color: var(--ig-surface-700);
+}
 
+igc-chat::part(text-input) {
+  --box-background: var(--ig-warn-100);
+  --box-background-hover: var(--ig-warn-100);
+  --box-background-focus: var(--ig-warn-200);
+  --idle-button-line-color: var(--ig-surface-700);
+  --hover-bottom-line-color: var(--ig-surface-700);
+  --focused-bottom-line-color: var(--ig-warn-300);
 }
 
-igc-chat::part(input-attachments-container) {
-    border: 5px solid var(--ig-gray-300);
+igc-chat::part(send-button) {
+  --background: var(--ig-warn-400);
+  --foreground: var(--ig-warn-400-contrast);
+  --hover-background: var(--ig-warn-400);
+  --hover-foreground: var(--ig-warn-400-contrast);
+  --disabled-background: var(--ig-gray-300);
+  --disabled-foreground: var(--ig-gray-700);
 }
\ No newline at end of file
diff --git a/samples/interactions/chat/styling/src/index.css b/samples/interactions/chat/styling/src/index.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/samples/interactions/chat/styling/src/index.tsx b/samples/interactions/chat/styling/src/index.tsx
index a3cfd39bb9..f7347fef67 100644
--- a/samples/interactions/chat/styling/src/index.tsx
+++ b/samples/interactions/chat/styling/src/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
+import "./layout.css";
 import "./ChatStyling.css";
 import {
   ChatMessageRenderContext,
@@ -8,7 +8,7 @@ import {
   IgrChat,
   IgrChatOptions
 } from "igniteui-react";
-import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "igniteui-webcomponents/themes/light/material.css";
 
 export default function ChatStyling() {
   const [draftMessage, setDraftMessage] = useState(null);
diff --git a/samples/interactions/chat/styling/src/layout.css b/samples/interactions/chat/styling/src/layout.css
new file mode 100644
index 0000000000..c1cb17da92
--- /dev/null
+++ b/samples/interactions/chat/styling/src/layout.css
@@ -0,0 +1,18 @@
+.chat-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-chat {
+  border-radius: 8px;
+}
+
+igc-chat::part(message-container) {
+  border-radius: 8px;
+}
+
+igc-chat::part(suggestion) {
+  margin: .125rem;
+  border-radius: 20px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/samples/interactions/chat/styling/src/react-app-env.d.ts b/samples/interactions/chat/styling/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc6..0000000000
--- a/samples/interactions/chat/styling/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />