diff --git a/apps/playground/eslint.config.mjs b/apps/playground/eslint.config.mjs
new file mode 100644
index 0000000..f2ac8a1
--- /dev/null
+++ b/apps/playground/eslint.config.mjs
@@ -0,0 +1,16 @@
+import reactConfig from '@tpmjs/eslint-config/react.js';
+
+export default [
+  {
+    ignores: [
+      '.next/**',
+      '.turbo/**',
+      'node_modules/**',
+      '*.config.js',
+      '*.config.ts',
+      'next-env.d.ts',
+      'eslint.config.mjs',
+    ],
+  },
+  ...reactConfig,
+];
diff --git a/apps/playground/postcss.config.mjs b/apps/playground/postcss.config.mjs
index 2aa7205..a982c64 100644
--- a/apps/playground/postcss.config.mjs
+++ b/apps/playground/postcss.config.mjs
@@ -1,6 +1,8 @@
-export default {
+const config = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 };
+
+export default config;
diff --git a/apps/playground/src/components/chat/ChatMessages.tsx b/apps/playground/src/components/chat/ChatMessages.tsx
index 21ffa23..ce7f887 100644
--- a/apps/playground/src/components/chat/ChatMessages.tsx
+++ b/apps/playground/src/components/chat/ChatMessages.tsx
@@ -26,7 +26,7 @@ export function ChatMessages({
         <div className="text-center text-foreground-secondary">
           <div className="mb-2 text-4xl">🐟</div>
           <p className="text-lg">Start chatting to test TPMJS tools</p>
-          <p className="mt-2 text-sm">Try asking: "Tell me a fish joke"</p>
+          <p className="mt-2 text-sm">Try asking: &ldquo;Tell me a fish joke&rdquo;</p>
         </div>
       </div>
     );
diff --git a/packages/ui/src/Input/Input.test.tsx b/packages/ui/src/Input/Input.test.tsx
index f9d18a1..93c89a2 100644
--- a/packages/ui/src/Input/Input.test.tsx
+++ b/packages/ui/src/Input/Input.test.tsx
@@ -342,7 +342,7 @@ describe('Input', () => {
       expect(input.className).toContain('font-sans');
       expect(input.className).toContain('rounded-md');
       expect(input.className).toContain('border');
-      expect(input.className).toContain('bg-background');
+      expect(input.className).toContain('bg-surface');
     });
 
     it('includes transition classes', () => {
diff --git a/packages/ui/src/Select/Select.test.tsx b/packages/ui/src/Select/Select.test.tsx
index feb92e3..99e47a4 100644
--- a/packages/ui/src/Select/Select.test.tsx
+++ b/packages/ui/src/Select/Select.test.tsx
@@ -436,7 +436,7 @@ describe('Select', () => {
     it('should include border and background classes', () => {
       render(<Select options={simpleOptions} />);
       const select = screen.getByRole('combobox');
-      expect(select).toHaveClass('rounded-md', 'border', 'bg-background');
+      expect(select).toHaveClass('rounded-md', 'border', 'bg-surface');
     });
 
     it('should remove native appearance', () => {
diff --git a/packages/ui/src/Textarea/Textarea.test.tsx b/packages/ui/src/Textarea/Textarea.test.tsx
index 9e323cf..02285fa 100644
--- a/packages/ui/src/Textarea/Textarea.test.tsx
+++ b/packages/ui/src/Textarea/Textarea.test.tsx
@@ -437,7 +437,7 @@ describe('Textarea', () => {
     it('always includes background color class', () => {
       render(<Textarea data-testid="textarea" />);
       const textarea = screen.getByTestId('textarea');
-      expect(textarea.className).toContain('bg-background');
+      expect(textarea.className).toContain('bg-surface');
     });
 
     it('always includes transition classes', () => {