diff --git a/.changeset/floppy-crews-do.md b/.changeset/floppy-crews-do.md
new file mode 100644
index 0000000000000..a43005fa00328
--- /dev/null
+++ b/.changeset/floppy-crews-do.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Fix for stylized DataFrame
diff --git a/js/app/test/dataframe_colorful.spec.ts b/js/app/test/dataframe_colorful.spec.ts
new file mode 100644
index 0000000000000..abf16e9cee3b6
--- /dev/null
+++ b/js/app/test/dataframe_colorful.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from "@gradio/tootils";
+
+test("first couple of cells in table are highlighted correctly", async ({
+	page
+}) => {
+	const first_td = await page.locator("tbody tr.row_odd td").first();
+	await expect(first_td).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+
+	const second_td = await page.locator("tbody tr.row_odd td").nth(1);
+	await expect(second_td).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+});
diff --git a/js/dataframe/Index.svelte b/js/dataframe/Index.svelte
index fc8a9a2db8961..90665250802e5 100644
--- a/js/dataframe/Index.svelte
+++ b/js/dataframe/Index.svelte
@@ -99,7 +99,7 @@
 		{col_count}
 		{value}
 		{headers}
-		on:change={(e) => (value = e.detail)}
+		on:change={interactive ? (e) => (value = e.detail) : () => {}}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		{wrap}
 		{datatype}