diff --git a/.changeset/fix-banner-content-types.md b/.changeset/fix-banner-content-types.md
new file mode 100644
index 0000000..61d33c0
--- /dev/null
+++ b/.changeset/fix-banner-content-types.md
@@ -0,0 +1,21 @@
+---
+'@prosdevlab/experience-sdk': patch
+'@prosdevlab/experience-sdk-plugins': patch
+---
+
+Fix BannerContent type definition, add CSS customization support, and implement HTML sanitization:
+
+- Add `buttons` array property with variant and metadata support
+- Add `position` property (top/bottom)
+- Make `title` optional (message is the only required field)
+- Add `className` and `style` props for banner and buttons
+- Update banner plugin to use `.xp-*` CSS classes
+- Provide minimal, functional default styles
+- Add HTML sanitizer for XSS prevention in title and message fields
+- Support safe HTML tags (strong, em, a, br, span, b, i, p)
+- Block dangerous tags and event handlers
+- Sanitize URLs to prevent javascript: and data: attacks
+- Aligns core types with banner plugin implementation
+
+This enables users to customize banners with Tailwind, design systems, or CSS frameworks while maintaining SDK's focus on targeting logic. HTML sanitization ensures safe rendering of user-provided content.
+
diff --git a/docs/pages/demo/banner.mdx b/docs/pages/demo/banner.mdx
index b3ed2fa..47b26dc 100644
--- a/docs/pages/demo/banner.mdx
+++ b/docs/pages/demo/banner.mdx
@@ -17,7 +17,7 @@ experiences.register('welcome-banner', {
     url: { contains: '/' }
   },
   content: {
-    title: '👋 Welcome!',
+    title: 'Welcome!',
     message: 'Thanks for visiting our site',
     buttons: [
       {
@@ -115,6 +115,8 @@ const decisions = experiences.evaluateAll();
 | `buttons` | `array` | Array of button configurations |
 | `dismissable` | `boolean` | Can user dismiss? (default: `true`) |
 | `position` | `'top' \| 'bottom'` | Banner position (default: `'top'`) |
+| `className` | `string` | Custom CSS class for the banner |
+| `style` | `Record<string, string>` | Inline styles for the banner |
 
 ### Button Options
 
@@ -125,6 +127,8 @@ buttons: [{
   url?: string;                            // Navigate on click
   variant?: 'primary' | 'secondary' | 'link'; // Visual style (default: 'primary')
   metadata?: Record<string, any>;          // Custom metadata
+  className?: string;                      // Custom CSS class
+  style?: Record<string, string>;          // Inline styles
 }]
 ```
 
@@ -159,6 +163,40 @@ targeting: {
 }
 ```
 
+## Customization
+
+Customize banners with your own CSS using `className` or `style` props:
+
+```typescript
+// With Tailwind classes
+experiences.register('promo', {
+  type: 'banner',
+  content: {
+    message: 'Flash Sale: 50% Off!',
+    className: 'bg-gradient-to-r from-blue-600 to-purple-600 text-white',
+    buttons: [{
+      text: 'Shop Now',
+      className: 'bg-white text-blue-600 hover:bg-gray-100'
+    }]
+  }
+});
+
+// With inline styles
+experiences.register('custom', {
+  type: 'banner',
+  content: {
+    message: 'Custom styled banner',
+    style: {
+      background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
+      color: 'white',
+      padding: '24px'
+    }
+  }
+});
+```
+
+The banner plugin uses stable `.xp-*` CSS classes that you can target in your stylesheets. See the [Plugins documentation](/reference/plugins#customization) for complete customization guide.
+
 ## Events
 
 Listen to banner interactions:
diff --git a/docs/pages/reference/plugins.mdx b/docs/pages/reference/plugins.mdx
index 268dcce..ae68969 100644
--- a/docs/pages/reference/plugins.mdx
+++ b/docs/pages/reference/plugins.mdx
@@ -138,6 +138,105 @@ experiences.on('experiences:dismissed', ({ experienceId }) => {
 
 See [Banner Examples](/demo/banner) for complete usage examples.
 
+#### Customization
+
+The Experience SDK focuses on **targeting logic**, not visual design. The banner plugin provides minimal, functional default styles that you can customize using CSS.
+
+**CSS Classes**
+
+The banner plugin uses the `.xp-*` namespace for all CSS classes:
+
+- `.xp-banner` - Main container
+- `.xp-banner--top` - Top positioned banner
+- `.xp-banner--bottom` - Bottom positioned banner
+- `.xp-banner__container` - Inner wrapper
+- `.xp-banner__content` - Content section
+- `.xp-banner__title` - Optional title
+- `.xp-banner__message` - Main message text
+- `.xp-banner__buttons` - Buttons container
+- `.xp-banner__button` - Individual button
+- `.xp-banner__button--primary` - Primary button variant
+- `.xp-banner__button--secondary` - Secondary button variant
+- `.xp-banner__button--link` - Link button variant
+- `.xp-banner__close` - Close button
+
+**Use Case 1: User with Tailwind**
+
+Add Tailwind classes via the `className` property:
+
+```typescript
+experiences.register('flash-sale', {
+  type: 'banner',
+  content: {
+    message: 'Flash Sale: 50% Off Everything!',
+    className: 'bg-gradient-to-r from-blue-600 to-purple-600 text-white',
+    buttons: [{
+      text: 'Shop Now',
+      url: '/shop',
+      variant: 'primary',
+      className: 'bg-white text-blue-600 hover:bg-gray-100'
+    }]
+  },
+  targeting: { url: { contains: '/shop' } }
+});
+```
+
+**Use Case 2: User with Design System**
+
+Build your own plugin using your design system components:
+
+```typescript
+import { MyBannerComponent } from '@your-org/design-system';
+
+const myBannerPlugin: PluginFunction = (plugin, instance, config) => {
+  instance.on('experiences:evaluated', ({ decision, experience }) => {
+    if (decision.show && experience.type === 'banner') {
+      // Render using your React component
+      ReactDOM.render(
+        <MyBannerComponent {...experience.content} />,
+        document.getElementById('banner-root')
+      );
+    }
+  });
+};
+
+experiences.use(myBannerPlugin);
+```
+
+**Use Case 3: User with CSS Framework**
+
+Add Bootstrap, Material UI, or other framework classes:
+
+```typescript
+experiences.register('alert', {
+  type: 'banner',
+  content: {
+    message: 'Important notice',
+    className: 'alert alert-warning',
+    buttons: [{
+      text: 'Learn More',
+      className: 'btn btn-primary'
+    }]
+  },
+  targeting: {}
+});
+```
+
+**Inline Styles**
+
+For quick overrides, use the `style` property:
+
+```typescript
+content: {
+  message: 'Flash Sale!',
+  style: {
+    background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
+    color: 'white',
+    padding: '24px'
+  }
+}
+```
+
 ---
 
 ### Frequency Plugin
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 0bff975..06df9c5 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -78,52 +78,24 @@ export interface FrequencyConfig {
   per: 'session' | 'day' | 'week';
 }
 
+// Import plugin-specific content types from plugins package
+// (Core depends on plugins, so plugins owns these definitions)
+import type {
+  BannerContent,
+  ModalContent,
+  TooltipContent,
+} from '@prosdevlab/experience-sdk-plugins';
+
 /**
  * Experience Content (type-specific)
  *
  * Union type for all possible experience content types.
+ * Content types are defined in the plugins package.
  */
 export type ExperienceContent = BannerContent | ModalContent | TooltipContent;
 
-/**
- * Banner Content
- *
- * Content for banner-type experiences.
- */
-export interface BannerContent {
-  /** Banner title/heading */
-  title: string;
-  /** Banner message/body text */
-  message: string;
-  /** Whether the banner can be dismissed */
-  dismissable?: boolean;
-}
-
-/**
- * Modal Content
- *
- * Content for modal-type experiences.
- */
-export interface ModalContent {
-  /** Modal title */
-  title: string;
-  /** Modal body content */
-  body: string;
-  /** Optional action buttons */
-  actions?: ModalAction[];
-}
-
-/**
- * Tooltip Content
- *
- * Content for tooltip-type experiences.
- */
-export interface TooltipContent {
-  /** Tooltip text */
-  text: string;
-  /** Position relative to target element */
-  position?: 'top' | 'bottom' | 'left' | 'right';
-}
+// Re-export plugin content types for convenience
+export type { BannerContent, ModalContent, TooltipContent };
 
 /**
  * Modal Action Button
diff --git a/packages/plugins/README.md b/packages/plugins/README.md
index 47d4cb3..eb0f88f 100644
--- a/packages/plugins/README.md
+++ b/packages/plugins/README.md
@@ -16,6 +16,8 @@ Renders banner experiences in the DOM with automatic positioning, theming, and r
 - Automatic theme detection (light/dark mode)
 - Top/bottom positioning
 - Dismissable with close button
+- **CSS customization** via `className` and `style` props
+- Stable `.xp-*` CSS classes for styling
 
 ```typescript
 import { createInstance, bannerPlugin } from '@prosdevlab/experience-sdk-plugins';
@@ -38,6 +40,33 @@ sdk.banner.show({
 });
 ```
 
+**Customization:**
+
+The banner plugin uses `.xp-*` CSS classes and supports custom styling:
+
+```typescript
+// With Tailwind
+content: {
+  message: 'Flash Sale!',
+  className: 'bg-gradient-to-r from-blue-600 to-purple-600 text-white',
+  buttons: [{
+    text: 'Shop Now',
+    className: 'bg-white text-blue-600 hover:bg-gray-100'
+  }]
+}
+
+// With inline styles
+content: {
+  message: 'Flash Sale!',
+  style: {
+    background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
+    color: 'white'
+  }
+}
+```
+
+See the [Plugins documentation](https://prosdevlab.github.io/experience-sdk/reference/plugins#customization) for more customization examples.
+
 ### Frequency Plugin
 
 Manages impression tracking and frequency capping with persistent storage.
diff --git a/packages/plugins/src/banner/banner.test.ts b/packages/plugins/src/banner/banner.test.ts
index a35ff3b..387f01a 100644
--- a/packages/plugins/src/banner/banner.test.ts
+++ b/packages/plugins/src/banner/banner.test.ts
@@ -92,8 +92,8 @@ describe('Banner Plugin', () => {
       sdk.banner.show(experience);
 
       const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
-      expect(banner.style.top).toBe('0px');
-      expect(banner.style.bottom).toBe('');
+      expect(banner.className).toContain('xp-banner--top');
+      expect(banner.className).not.toContain('xp-banner--bottom');
     });
 
     it('should show banner at bottom position when configured', () => {
@@ -113,8 +113,8 @@ describe('Banner Plugin', () => {
       customSdk.banner.show(experience);
 
       const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
-      expect(banner.style.bottom).toBe('0px');
-      expect(banner.style.top).toBe('');
+      expect(banner.className).toContain('xp-banner--bottom');
+      expect(banner.className).not.toContain('xp-banner--top');
     });
 
     it('should create banner with title and message', () => {
@@ -500,8 +500,8 @@ describe('Banner Plugin', () => {
       const button = banner?.querySelector('button') as HTMLElement;
 
       expect(button).toBeTruthy();
-      // Primary variant should have white text
-      expect(button.style.color).toContain('255'); // rgb(255, 255, 255)
+      // Primary variant should have the correct class
+      expect(button.className).toContain('xp-banner__button--primary');
     });
 
     it('should emit action event with variant and metadata', () => {
@@ -667,7 +667,8 @@ describe('Banner Plugin', () => {
       sdk.banner.show(experience);
 
       const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
-      expect(banner.style.zIndex).toBe('10000');
+      // Default z-index is set via CSS, check that banner has the base class
+      expect(banner.className).toContain('xp-banner');
     });
 
     it('should apply custom z-index', () => {
@@ -704,7 +705,9 @@ describe('Banner Plugin', () => {
       sdk.banner.show(experience);
 
       const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
-      expect(banner.style.position).toBe('fixed');
+      // Position is set via CSS class, check computed style
+      const computedStyle = window.getComputedStyle(banner);
+      expect(computedStyle.position).toBe('fixed');
     });
 
     it('should span full width', () => {
@@ -721,8 +724,365 @@ describe('Banner Plugin', () => {
       sdk.banner.show(experience);
 
       const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
-      expect(banner.style.left).toBe('0px');
-      expect(banner.style.right).toBe('0px');
+      // Width and positioning are set via CSS class, check computed styles
+      const computedStyle = window.getComputedStyle(banner);
+      expect(computedStyle.left).toBe('0px');
+      expect(computedStyle.right).toBe('0px');
+      expect(computedStyle.width).toBe('100%');
+    });
+
+    it('should apply custom className to banner', () => {
+      const experience: Experience = {
+        id: 'test-banner',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Test message',
+          className: 'my-custom-banner custom-class',
+        },
+      };
+
+      sdk.banner.show(experience);
+
+      const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
+      expect(banner.className).toContain('xp-banner');
+      expect(banner.className).toContain('my-custom-banner');
+      expect(banner.className).toContain('custom-class');
+    });
+
+    it('should apply custom inline styles to banner', () => {
+      const experience: Experience = {
+        id: 'test-banner',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Test message',
+          style: {
+            backgroundColor: '#ff0000',
+            padding: '24px',
+            borderRadius: '8px',
+          },
+        },
+      };
+
+      sdk.banner.show(experience);
+
+      const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
+      expect(banner.style.backgroundColor).toBe('rgb(255, 0, 0)');
+      expect(banner.style.padding).toBe('24px');
+      expect(banner.style.borderRadius).toBe('8px');
+    });
+
+    it('should apply custom className to buttons', () => {
+      const experience: Experience = {
+        id: 'test-banner',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Test message',
+          buttons: [
+            {
+              text: 'Primary Button',
+              variant: 'primary',
+              className: 'my-primary-btn custom-btn',
+            },
+            {
+              text: 'Secondary Button',
+              variant: 'secondary',
+              className: 'my-secondary-btn',
+            },
+          ],
+        },
+      };
+
+      sdk.banner.show(experience);
+
+      const banner = document.querySelector('[data-experience-id="test-banner"]');
+      const buttons = banner?.querySelectorAll('.xp-banner__button');
+
+      expect(buttons?.[0].className).toContain('xp-banner__button--primary');
+      expect(buttons?.[0].className).toContain('my-primary-btn');
+      expect(buttons?.[0].className).toContain('custom-btn');
+
+      expect(buttons?.[1].className).toContain('xp-banner__button--secondary');
+      expect(buttons?.[1].className).toContain('my-secondary-btn');
+    });
+
+    it('should apply custom inline styles to buttons', () => {
+      const experience: Experience = {
+        id: 'test-banner',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Test message',
+          buttons: [
+            {
+              text: 'Styled Button',
+              variant: 'primary',
+              style: {
+                backgroundColor: '#00ff00',
+                color: '#000000',
+                fontWeight: 'bold',
+              },
+            },
+          ],
+        },
+      };
+
+      sdk.banner.show(experience);
+
+      const banner = document.querySelector('[data-experience-id="test-banner"]');
+      const button = banner?.querySelector('.xp-banner__button') as HTMLElement;
+
+      expect(button.style.backgroundColor).toBe('rgb(0, 255, 0)');
+      expect(button.style.color).toBe('rgb(0, 0, 0)');
+      expect(button.style.fontWeight).toBe('bold');
+    });
+
+    it('should combine className and style props', () => {
+      const experience: Experience = {
+        id: 'test-banner',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Test message',
+          className: 'custom-banner',
+          style: {
+            backgroundColor: '#0000ff',
+          },
+          buttons: [
+            {
+              text: 'Button',
+              className: 'custom-button',
+              style: {
+                color: '#ffffff',
+              },
+            },
+          ],
+        },
+      };
+
+      sdk.banner.show(experience);
+
+      const banner = document.querySelector('[data-experience-id="test-banner"]') as HTMLElement;
+      expect(banner.className).toContain('xp-banner');
+      expect(banner.className).toContain('custom-banner');
+      expect(banner.style.backgroundColor).toBe('rgb(0, 0, 255)');
+
+      const button = banner.querySelector('.xp-banner__button') as HTMLElement;
+      expect(button.className).toContain('xp-banner__button');
+      expect(button.className).toContain('custom-button');
+      expect(button.style.color).toBe('rgb(255, 255, 255)');
+    });
+  });
+
+  describe('HTML Sanitization', () => {
+    it('should sanitize HTML in title to prevent XSS', () => {
+      const experience: Experience = {
+        id: 'xss-test',
+        type: 'banner',
+        targeting: {},
+        content: {
+          title: '<script>alert("xss")</script>Safe Title',
+          message: 'Test message',
+        },
+      };
+
+      sdk.emit('experiences:evaluated', {
+        decision: {
+          show: true,
+          experienceId: 'xss-test',
+          reasons: [],
+          trace: [],
+          context: {} as any,
+          metadata: {},
+        },
+        experience,
+      });
+
+      const banner = document.querySelector('[data-experience-id="xss-test"]') as HTMLElement;
+      expect(banner).toBeTruthy();
+
+      const title = banner.querySelector('.xp-banner__title') as HTMLElement;
+      expect(title).toBeTruthy();
+      // Script tag should be stripped
+      expect(title.innerHTML).not.toContain('<script>');
+      expect(title.innerHTML).not.toContain('alert("xss")');
+      // Safe content should remain
+      expect(title.innerHTML).toContain('Safe Title');
+    });
+
+    it('should sanitize HTML in message to prevent XSS', () => {
+      const experience: Experience = {
+        id: 'xss-test',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Hello <script>alert("xss")</script>World',
+        },
+      };
+
+      sdk.emit('experiences:evaluated', {
+        decision: {
+          show: true,
+          experienceId: 'xss-test',
+          reasons: [],
+          trace: [],
+          context: {} as any,
+          metadata: {},
+        },
+        experience,
+      });
+
+      const banner = document.querySelector('[data-experience-id="xss-test"]') as HTMLElement;
+      expect(banner).toBeTruthy();
+
+      const message = banner.querySelector('.xp-banner__message') as HTMLElement;
+      expect(message).toBeTruthy();
+      // Script tag should be stripped
+      expect(message.innerHTML).not.toContain('<script>');
+      expect(message.innerHTML).not.toContain('alert("xss")');
+      // Safe content should remain
+      expect(message.innerHTML).toContain('Hello');
+      expect(message.innerHTML).toContain('World');
+    });
+
+    it('should allow safe HTML tags in title and message', () => {
+      const experience: Experience = {
+        id: 'html-test',
+        type: 'banner',
+        targeting: {},
+        content: {
+          title: '<strong>Flash Sale!</strong>',
+          message: 'Get <em>50% off</em> everything. <a href="/shop">Shop Now</a>',
+        },
+      };
+
+      sdk.emit('experiences:evaluated', {
+        decision: {
+          show: true,
+          experienceId: 'html-test',
+          reasons: [],
+          trace: [],
+          context: {} as any,
+          metadata: {},
+        },
+        experience,
+      });
+
+      const banner = document.querySelector('[data-experience-id="html-test"]') as HTMLElement;
+      expect(banner).toBeTruthy();
+
+      const title = banner.querySelector('.xp-banner__title') as HTMLElement;
+      expect(title.innerHTML).toContain('<strong>Flash Sale!</strong>');
+
+      const message = banner.querySelector('.xp-banner__message') as HTMLElement;
+      expect(message.innerHTML).toContain('<em>50% off</em>');
+      expect(message.innerHTML).toContain('<a href="/shop">Shop Now</a>');
+    });
+
+    it('should strip dangerous tags like iframe and object', () => {
+      const experience: Experience = {
+        id: 'dangerous-test',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Safe text <iframe src="evil.com"></iframe> more text',
+        },
+      };
+
+      sdk.emit('experiences:evaluated', {
+        decision: {
+          show: true,
+          experienceId: 'dangerous-test',
+          reasons: [],
+          trace: [],
+          context: {} as any,
+          metadata: {},
+        },
+        experience,
+      });
+
+      const banner = document.querySelector('[data-experience-id="dangerous-test"]') as HTMLElement;
+      expect(banner).toBeTruthy();
+      const message = banner.querySelector('.xp-banner__message') as HTMLElement;
+
+      // Dangerous tags should be stripped
+      expect(message.innerHTML).not.toContain('<iframe>');
+      expect(message.innerHTML).not.toContain('evil.com');
+      // Safe content should remain
+      expect(message.innerHTML).toContain('Safe text');
+      expect(message.innerHTML).toContain('more text');
+    });
+
+    it('should strip javascript: URLs from links', () => {
+      const experience: Experience = {
+        id: 'js-url-test',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message: 'Click <a href="javascript:alert(\'xss\')">here</a>',
+        },
+      };
+
+      sdk.emit('experiences:evaluated', {
+        decision: {
+          show: true,
+          experienceId: 'js-url-test',
+          reasons: [],
+          trace: [],
+          context: {} as any,
+          metadata: {},
+        },
+        experience,
+      });
+
+      const banner = document.querySelector('[data-experience-id="js-url-test"]') as HTMLElement;
+      expect(banner).toBeTruthy();
+      const message = banner.querySelector('.xp-banner__message') as HTMLElement;
+
+      // javascript: URL should be stripped
+      expect(message.innerHTML).not.toContain('javascript:');
+      expect(message.innerHTML).not.toContain('alert');
+      // Link tag should exist but without href
+      expect(message.innerHTML).toContain('<a>here</a>');
+    });
+
+    it('should allow legitimate URLs and paths in links', () => {
+      const experience: Experience = {
+        id: 'legitimate-urls-test',
+        type: 'banner',
+        targeting: {},
+        content: {
+          message:
+            'Visit <a href="/shop">our shop</a>, check out <a href="https://example.com">external</a>, or <a href="mailto:support@example.com">email us</a>',
+        },
+      };
+
+      sdk.emit('experiences:evaluated', {
+        decision: {
+          show: true,
+          experienceId: 'legitimate-urls-test',
+          reasons: [],
+          trace: [],
+          context: {} as any,
+          metadata: {},
+        },
+        experience,
+      });
+
+      const banner = document.querySelector(
+        '[data-experience-id="legitimate-urls-test"]'
+      ) as HTMLElement;
+      expect(banner).toBeTruthy();
+      const message = banner.querySelector('.xp-banner__message') as HTMLElement;
+
+      // Relative paths should work
+      expect(message.innerHTML).toContain('<a href="/shop">our shop</a>');
+      // External URLs should work
+      expect(message.innerHTML).toContain('<a href="https://example.com">external</a>');
+      // mailto: URLs should work
+      expect(message.innerHTML).toContain('<a href="mailto:support@example.com">email us</a>');
     });
   });
 });
diff --git a/packages/plugins/src/banner/banner.ts b/packages/plugins/src/banner/banner.ts
index 1125855..222c449 100644
--- a/packages/plugins/src/banner/banner.ts
+++ b/packages/plugins/src/banner/banner.ts
@@ -7,6 +7,7 @@
 
 import type { PluginFunction } from '@lytics/sdk-kit';
 import type { BannerContent, Decision, Experience } from '../types';
+import { sanitizeHTML } from '../utils/sanitize';
 
 export interface BannerPluginConfig {
   banner?: {
@@ -51,6 +52,200 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
   // Track multiple active banners by experience ID
   const activeBanners = new Map<string, HTMLElement>();
 
+  /**
+   * Inject default banner styles if not already present
+   */
+  function injectDefaultStyles(): void {
+    const styleId = 'xp-banner-styles';
+    if (document.getElementById(styleId)) {
+      return; // Already injected
+    }
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .xp-banner {
+        position: fixed;
+        left: 0;
+        right: 0;
+        width: 100%;
+        padding: 16px 20px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        z-index: 10000;
+        background: #f9fafb;
+        color: #111827;
+        border-bottom: 1px solid #e5e7eb;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner--top {
+        top: 0;
+      }
+      
+      .xp-banner--bottom {
+        bottom: 0;
+        border-bottom: none;
+        border-top: 1px solid #e5e7eb;
+        box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner__container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 20px;
+        width: 100%;
+      }
+      
+      .xp-banner__content {
+        flex: 1;
+        min-width: 0;
+      }
+      
+      .xp-banner__title {
+        font-weight: 600;
+        margin-bottom: 4px;
+        margin-top: 0;
+        font-size: 14px;
+      }
+      
+      .xp-banner__message {
+        margin: 0;
+        font-size: 14px;
+      }
+      
+      .xp-banner__buttons {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+      }
+      
+      .xp-banner__button {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-decoration: none;
+      }
+      
+      .xp-banner__button--primary {
+        background: #2563eb;
+        color: #ffffff;
+      }
+      
+      .xp-banner__button--primary:hover {
+        background: #1d4ed8;
+      }
+      
+      .xp-banner__button--secondary {
+        background: #ffffff;
+        color: #374151;
+        border: 1px solid #d1d5db;
+      }
+      
+      .xp-banner__button--secondary:hover {
+        background: #f9fafb;
+      }
+      
+      .xp-banner__button--link {
+        background: transparent;
+        color: #2563eb;
+        padding: 4px 8px;
+        font-weight: 400;
+        text-decoration: underline;
+      }
+      
+      .xp-banner__button--link:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+      
+      .xp-banner__close {
+        background: transparent;
+        border: none;
+        color: #6b7280;
+        font-size: 24px;
+        line-height: 1;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+        flex-shrink: 0;
+      }
+      
+      .xp-banner__close:hover {
+        opacity: 1;
+      }
+      
+      @media (max-width: 640px) {
+        .xp-banner__container {
+          flex-direction: column;
+          align-items: stretch;
+        }
+        
+        .xp-banner__buttons {
+          width: 100%;
+          flex-direction: column;
+        }
+        
+        .xp-banner__button {
+          width: 100%;
+        }
+      }
+      
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        .xp-banner {
+          background: #1f2937;
+          color: #f3f4f6;
+          border-bottom-color: #374151;
+        }
+        
+        .xp-banner--bottom {
+          border-top-color: #374151;
+        }
+        
+        .xp-banner__button--primary {
+          background: #3b82f6;
+        }
+        
+        .xp-banner__button--primary:hover {
+          background: #2563eb;
+        }
+        
+        .xp-banner__button--secondary {
+          background: #374151;
+          color: #f3f4f6;
+          border-color: #4b5563;
+        }
+        
+        .xp-banner__button--secondary:hover {
+          background: #4b5563;
+        }
+        
+        .xp-banner__button--link {
+          color: #93c5fd;
+        }
+        
+        .xp-banner__close {
+          color: #9ca3af;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
   /**
    * Create banner DOM element
    */
@@ -61,79 +256,57 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
     const dismissable = content.dismissable ?? config.get('banner.dismissable') ?? true;
     const zIndex = config.get('banner.zIndex') ?? 10000;
 
-    // Detect dark mode
-    const isDarkMode = document.documentElement.classList.contains('dark');
-
-    // Theme-aware colors - professional subtle style
-    const bgColor = isDarkMode ? '#1f2937' : '#f9fafb';
-    const textColor = isDarkMode ? '#f3f4f6' : '#111827';
-    const borderColor = isDarkMode ? '#374151' : '#e5e7eb';
-    const shadowColor = isDarkMode ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.05)';
+    // Inject default styles if needed
+    injectDefaultStyles();
 
     // Create banner container
     const banner = document.createElement('div');
     banner.setAttribute('data-experience-id', experience.id);
 
-    // Add responsive media query styles
-    const styleId = `banner-responsive-${experience.id}`;
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement('style');
-      style.id = styleId;
-      style.textContent = `
-        @media (max-width: 640px) {
-          [data-experience-id="${experience.id}"] {
-            flex-direction: column !important;
-            align-items: flex-start !important;
-          }
-          [data-experience-id="${experience.id}"] > div:last-child {
-            width: 100%;
-            flex-direction: column !important;
-          }
-          [data-experience-id="${experience.id}"] button {
-            width: 100%;
-          }
-        }
-      `;
-      document.head.appendChild(style);
+    // Build className: base classes + position + user's custom class
+    const baseClasses = ['xp-banner', `xp-banner--${position}`];
+    if (content.className) {
+      baseClasses.push(content.className);
     }
+    banner.className = baseClasses.join(' ');
 
-    banner.style.cssText = `
-      position: fixed;
-      ${position}: 0;
-      left: 0;
-      right: 0;
-      background: ${bgColor};
-      color: ${textColor};
-      padding: 16px 20px;
-      border-${position === 'top' ? 'bottom' : 'top'}: 1px solid ${borderColor};
-      box-shadow: 0 ${position === 'top' ? '1' : '-1'}px 3px 0 ${shadowColor};
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-      line-height: 1.5;
-      z-index: ${zIndex};
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box;
-    `;
+    // Apply user's custom styles
+    if (content.style) {
+      Object.assign(banner.style, content.style);
+    }
+
+    // Override z-index if configured
+    if (zIndex !== 10000) {
+      banner.style.zIndex = String(zIndex);
+    }
+
+    // Create container
+    const container = document.createElement('div');
+    container.className = 'xp-banner__container';
+    banner.appendChild(container);
 
     // Create content container
     const contentDiv = document.createElement('div');
-    contentDiv.style.cssText = 'flex: 1; margin-right: 20px;';
+    contentDiv.className = 'xp-banner__content';
 
     // Add title if present
     if (content.title) {
-      const title = document.createElement('div');
-      title.textContent = content.title;
-      title.style.cssText = 'font-weight: 600; margin-bottom: 4px;';
+      const title = document.createElement('h3');
+      title.className = 'xp-banner__title';
+      // Sanitize HTML to prevent XSS attacks
+      title.innerHTML = sanitizeHTML(content.title);
       contentDiv.appendChild(title);
     }
 
     // Add message
-    const message = document.createElement('div');
-    message.textContent = content.message;
+    const message = document.createElement('p');
+    message.className = 'xp-banner__message';
+    // Sanitize HTML to prevent XSS attacks
+    message.innerHTML = sanitizeHTML(content.message);
     contentDiv.appendChild(message);
 
+    container.appendChild(contentDiv);
+
     banner.appendChild(contentDiv);
 
     // Create button container for actions and/or dismiss
@@ -145,6 +318,10 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
       flex-wrap: wrap;
     `;
 
+    // Create buttons container
+    const buttonsDiv = document.createElement('div');
+    buttonsDiv.className = 'xp-banner__buttons';
+
     // Helper function to create button with variant styling
     function createButton(buttonConfig: {
       text: string;
@@ -152,53 +329,25 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
       url?: string;
       variant?: 'primary' | 'secondary' | 'link';
       metadata?: Record<string, unknown>;
+      className?: string;
+      style?: Record<string, string>;
     }): HTMLButtonElement {
       const button = document.createElement('button');
       button.textContent = buttonConfig.text;
 
       const variant = buttonConfig.variant || 'primary';
 
-      // Variant-based styling
-      let bg: string, hoverBg: string, textColor: string, border: string;
-
-      if (variant === 'primary') {
-        bg = isDarkMode ? '#3b82f6' : '#2563eb';
-        hoverBg = isDarkMode ? '#2563eb' : '#1d4ed8';
-        textColor = '#ffffff';
-        border = 'none';
-      } else if (variant === 'secondary') {
-        bg = isDarkMode ? '#374151' : '#ffffff';
-        hoverBg = isDarkMode ? '#4b5563' : '#f9fafb';
-        textColor = isDarkMode ? '#f3f4f6' : '#374151';
-        border = isDarkMode ? '1px solid #4b5563' : '1px solid #d1d5db';
-      } else {
-        // 'link'
-        bg = 'transparent';
-        hoverBg = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)';
-        textColor = isDarkMode ? '#93c5fd' : '#2563eb';
-        border = 'none';
+      // Build className: base class + variant + user's custom class
+      const buttonClasses = ['xp-banner__button', `xp-banner__button--${variant}`];
+      if (buttonConfig.className) {
+        buttonClasses.push(buttonConfig.className);
       }
+      button.className = buttonClasses.join(' ');
 
-      button.style.cssText = `
-        background: ${bg};
-        border: ${border};
-        color: ${textColor};
-        padding: ${variant === 'link' ? '4px 8px' : '8px 16px'};
-        font-size: 14px;
-        font-weight: ${variant === 'link' ? '400' : '500'};
-        border-radius: 6px;
-        cursor: pointer;
-        transition: all 0.2s;
-        text-decoration: ${variant === 'link' ? 'underline' : 'none'};
-      `;
-
-      button.addEventListener('mouseenter', () => {
-        button.style.background = hoverBg;
-      });
-
-      button.addEventListener('mouseleave', () => {
-        button.style.background = bg;
-      });
+      // Apply user's custom styles
+      if (buttonConfig.style) {
+        Object.assign(button.style, buttonConfig.style);
+      }
 
       button.addEventListener('click', () => {
         // Emit action event
@@ -225,39 +374,17 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
     if (content.buttons && content.buttons.length > 0) {
       content.buttons.forEach((buttonConfig) => {
         const button = createButton(buttonConfig);
-        buttonContainer.appendChild(button);
+        buttonsDiv.appendChild(button);
       });
     }
 
     // Add dismiss button if dismissable
     if (dismissable) {
       const closeButton = document.createElement('button');
+      closeButton.className = 'xp-banner__close';
       closeButton.innerHTML = '&times;';
       closeButton.setAttribute('aria-label', 'Close banner');
 
-      const closeColor = isDarkMode ? '#9ca3af' : '#6b7280';
-
-      closeButton.style.cssText = `
-        background: transparent;
-        border: none;
-        color: ${closeColor};
-        font-size: 24px;
-        line-height: 1;
-        cursor: pointer;
-        padding: 0;
-        margin: 0;
-        opacity: 0.7;
-        transition: opacity 0.2s;
-      `;
-
-      closeButton.addEventListener('mouseenter', () => {
-        closeButton.style.opacity = '1';
-      });
-
-      closeButton.addEventListener('mouseleave', () => {
-        closeButton.style.opacity = '0.7';
-      });
-
       closeButton.addEventListener('click', () => {
         remove(experience.id);
         instance.emit('experiences:dismissed', {
@@ -266,10 +393,10 @@ export const bannerPlugin: PluginFunction = (plugin, instance, config) => {
         });
       });
 
-      buttonContainer.appendChild(closeButton);
+      buttonsDiv.appendChild(closeButton);
     }
 
-    banner.appendChild(buttonContainer);
+    container.appendChild(buttonsDiv);
 
     return banner;
   }
diff --git a/packages/plugins/src/types.ts b/packages/plugins/src/types.ts
index 4f50d8e..1f2ba19 100644
--- a/packages/plugins/src/types.ts
+++ b/packages/plugins/src/types.ts
@@ -20,9 +20,31 @@ export interface BannerContent {
     url?: string;
     variant?: 'primary' | 'secondary' | 'link';
     metadata?: Record<string, any>;
+    className?: string;
+    style?: Record<string, string>;
   }>;
   dismissable?: boolean;
   position?: 'top' | 'bottom';
+  className?: string;
+  style?: Record<string, string>;
+}
+
+/**
+ * Modal content configuration
+ */
+export interface ModalContent {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+/**
+ * Tooltip content configuration
+ */
+export interface TooltipContent {
+  message: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
 }
 
 /**
diff --git a/packages/plugins/src/utils/sanitize.test.ts b/packages/plugins/src/utils/sanitize.test.ts
new file mode 100644
index 0000000..56ddfa5
--- /dev/null
+++ b/packages/plugins/src/utils/sanitize.test.ts
@@ -0,0 +1,412 @@
+import { describe, expect, it } from 'vitest';
+import { sanitizeHTML } from './sanitize';
+
+describe('sanitizeHTML', () => {
+  describe('Basic Sanitization', () => {
+    it('should allow plain text', () => {
+      expect(sanitizeHTML('Hello World')).toBe('Hello World');
+    });
+
+    it('should allow allowed tags', () => {
+      expect(sanitizeHTML('<strong>Bold</strong>')).toBe('<strong>Bold</strong>');
+      expect(sanitizeHTML('<em>Italic</em>')).toBe('<em>Italic</em>');
+      expect(sanitizeHTML('<b>Bold</b>')).toBe('<b>Bold</b>');
+      expect(sanitizeHTML('<i>Italic</i>')).toBe('<i>Italic</i>');
+      expect(sanitizeHTML('<br />')).toBe('<br />');
+      expect(sanitizeHTML('<span>Text</span>')).toBe('<span>Text</span>');
+      expect(sanitizeHTML('<p>Paragraph</p>')).toBe('<p>Paragraph</p>');
+    });
+
+    it('should allow nested allowed tags', () => {
+      expect(sanitizeHTML('<p><strong>Bold</strong> text</p>')).toBe(
+        '<p><strong>Bold</strong> text</p>'
+      );
+      expect(sanitizeHTML('<span><em>Italic</em> content</span>')).toBe(
+        '<span><em>Italic</em> content</span>'
+      );
+    });
+
+    it('should allow links with href', () => {
+      expect(sanitizeHTML('<a href="/page">Link</a>')).toBe('<a href="/page">Link</a>');
+      expect(sanitizeHTML('<a href="https://example.com">Link</a>')).toBe(
+        '<a href="https://example.com">Link</a>'
+      );
+      expect(sanitizeHTML('<a href="http://example.com">Link</a>')).toBe(
+        '<a href="http://example.com">Link</a>'
+      );
+      expect(sanitizeHTML('<a href="mailto:test@example.com">Email</a>')).toBe(
+        '<a href="mailto:test@example.com">Email</a>'
+      );
+      expect(sanitizeHTML('<a href="tel:+1234567890">Call</a>')).toBe(
+        '<a href="tel:+1234567890">Call</a>'
+      );
+    });
+
+    it('should allow class and style attributes', () => {
+      expect(sanitizeHTML('<span class="custom">Text</span>')).toBe(
+        '<span class="custom">Text</span>'
+      );
+      expect(sanitizeHTML('<span style="color: red">Text</span>')).toBe(
+        '<span style="color: red">Text</span>'
+      );
+      expect(sanitizeHTML('<a href="/" class="link" style="text-decoration: none">Link</a>')).toBe(
+        '<a href="/" class="link" style="text-decoration: none">Link</a>'
+      );
+    });
+
+    it('should handle empty strings', () => {
+      expect(sanitizeHTML('')).toBe('');
+    });
+
+    it('should handle text with no HTML', () => {
+      expect(sanitizeHTML('Plain text with no tags')).toBe('Plain text with no tags');
+    });
+  });
+
+  describe('XSS Prevention - Script Tags', () => {
+    it('should strip script tags', () => {
+      expect(sanitizeHTML('<script>alert("xss")</script>')).toBe('');
+      expect(sanitizeHTML('Hello<script>alert("xss")</script>World')).toBe('HelloWorld');
+    });
+
+    it('should strip script tags with attributes', () => {
+      expect(sanitizeHTML('<script src="evil.js"></script>')).toBe('');
+      expect(sanitizeHTML('<script type="text/javascript">alert("xss")</script>')).toBe('');
+    });
+
+    it('should strip nested script tags', () => {
+      expect(sanitizeHTML('<p><script>alert("xss")</script></p>')).toBe('<p></p>');
+      expect(sanitizeHTML('<strong><script>alert("xss")</script></strong>')).toBe(
+        '<strong></strong>'
+      );
+    });
+
+    it('should strip script tags in mixed content', () => {
+      expect(sanitizeHTML('<strong>Safe</strong><script>alert("xss")</script><em>Text</em>')).toBe(
+        '<strong>Safe</strong><em>Text</em>'
+      );
+    });
+  });
+
+  describe('XSS Prevention - Event Handlers', () => {
+    it('should strip onclick attributes', () => {
+      expect(sanitizeHTML('<a href="/" onclick="alert(\'xss\')">Link</a>')).toBe(
+        '<a href="/">Link</a>'
+      );
+      expect(sanitizeHTML('<span onclick="alert(\'xss\')">Text</span>')).toBe('<span>Text</span>');
+    });
+
+    it('should strip onerror attributes', () => {
+      expect(sanitizeHTML('<img src="x" onerror="alert(\'xss\')" />')).toBe('');
+      expect(sanitizeHTML('<span onerror="alert(\'xss\')">Text</span>')).toBe('<span>Text</span>');
+    });
+
+    it('should strip onload attributes', () => {
+      expect(sanitizeHTML('<span onload="alert(\'xss\')">Text</span>')).toBe('<span>Text</span>');
+    });
+
+    it('should strip onmouseover attributes', () => {
+      expect(sanitizeHTML('<span onmouseover="alert(\'xss\')">Text</span>')).toBe(
+        '<span>Text</span>'
+      );
+    });
+
+    it('should strip all event handler attributes', () => {
+      const eventHandlers = [
+        'onclick',
+        'onerror',
+        'onload',
+        'onmouseover',
+        'onmouseout',
+        'onfocus',
+        'onblur',
+        'onchange',
+        'onsubmit',
+        'onkeydown',
+        'onkeypress',
+        'onkeyup',
+      ];
+
+      for (const handler of eventHandlers) {
+        expect(sanitizeHTML(`<span ${handler}="alert('xss')">Text</span>`)).toBe(
+          '<span>Text</span>'
+        );
+      }
+    });
+  });
+
+  describe('XSS Prevention - Dangerous Tags', () => {
+    it('should strip iframe tags', () => {
+      expect(sanitizeHTML('<iframe src="evil.com"></iframe>')).toBe('');
+      expect(sanitizeHTML('Text<iframe></iframe>More')).toBe('TextMore');
+    });
+
+    it('should strip object tags', () => {
+      expect(sanitizeHTML('<object data="evil.swf"></object>')).toBe('');
+    });
+
+    it('should strip embed tags', () => {
+      expect(sanitizeHTML('<embed src="evil.swf"></embed>')).toBe('');
+    });
+
+    it('should strip form tags', () => {
+      expect(sanitizeHTML('<form action="evil.com"></form>')).toBe('');
+    });
+
+    it('should strip input tags', () => {
+      expect(sanitizeHTML('<input type="text" />')).toBe('');
+    });
+
+    it('should strip img tags', () => {
+      expect(sanitizeHTML('<img src="x.jpg" />')).toBe('');
+    });
+
+    it('should strip style tags', () => {
+      expect(sanitizeHTML('<style>body { color: red; }</style>')).toBe('');
+    });
+
+    it('should strip link tags', () => {
+      expect(sanitizeHTML('<link rel="stylesheet" href="evil.css" />')).toBe('');
+    });
+
+    it('should strip meta tags', () => {
+      expect(sanitizeHTML('<meta http-equiv="refresh" content="0;url=evil.com" />')).toBe('');
+    });
+
+    it('should strip video tags', () => {
+      expect(sanitizeHTML('<video src="evil.mp4"></video>')).toBe('');
+    });
+
+    it('should strip audio tags', () => {
+      expect(sanitizeHTML('<audio src="evil.mp3"></audio>')).toBe('');
+    });
+
+    it('should strip svg tags', () => {
+      expect(sanitizeHTML('<svg><script>alert("xss")</script></svg>')).toBe('');
+    });
+  });
+
+  describe('XSS Prevention - javascript: URLs', () => {
+    it('should strip javascript: URLs in href', () => {
+      expect(sanitizeHTML('<a href="javascript:alert(\'xss\')">Link</a>')).toBe('<a>Link</a>');
+      expect(sanitizeHTML('<a href="JAVASCRIPT:alert(\'xss\')">Link</a>')).toBe('<a>Link</a>');
+      expect(sanitizeHTML('<a href="javascript:void(0)">Link</a>')).toBe('<a>Link</a>');
+    });
+
+    it('should strip javascript: URLs with encoded characters', () => {
+      expect(sanitizeHTML('<a href="javascript&#58;alert(\'xss\')">Link</a>')).toBe('<a>Link</a>');
+    });
+  });
+
+  describe('XSS Prevention - data: URLs', () => {
+    it('should strip data: URLs in href', () => {
+      expect(
+        sanitizeHTML('<a href="data:text/html,<script>alert(\'xss\')</script>">Link</a>')
+      ).toBe('<a>Link</a>');
+      expect(sanitizeHTML('<a href="data:image/svg+xml,<svg>...</svg>">Link</a>')).toBe(
+        '<a>Link</a>'
+      );
+    });
+  });
+
+  describe('XSS Prevention - Style-based Attacks', () => {
+    it('should allow safe style attributes', () => {
+      expect(sanitizeHTML('<span style="color: red">Text</span>')).toBe(
+        '<span style="color: red">Text</span>'
+      );
+    });
+
+    it('should escape HTML in style attributes', () => {
+      // Quotes in style attributes are escaped for safety
+      const result = sanitizeHTML('<span style="color: \'red\'">Text</span>');
+      expect(result).toContain('<span style=');
+      expect(result).toContain('Text</span>');
+      // The exact escaping format may vary, but quotes should be escaped
+      expect(result).not.toContain("color: 'red'");
+    });
+  });
+
+  describe('XSS Prevention - HTML Entities', () => {
+    it('should escape HTML entities in text content', () => {
+      expect(sanitizeHTML('<strong>&lt;script&gt;</strong>')).toBe(
+        '<strong>&lt;script&gt;</strong>'
+      );
+      expect(sanitizeHTML('&lt;script&gt;alert("xss")&lt;/script&gt;')).toBe(
+        '&lt;script&gt;alert("xss")&lt;/script&gt;'
+      );
+    });
+
+    it('should escape quotes in attributes', () => {
+      expect(sanitizeHTML('<a href="/page" title=\'test"quote\'>Link</a>')).toBe(
+        '<a href="/page" title="test&quot;quote">Link</a>'
+      );
+    });
+  });
+
+  describe('XSS Prevention - Nested Attacks', () => {
+    it('should handle deeply nested dangerous tags', () => {
+      expect(
+        sanitizeHTML('<p><span><strong><script>alert("xss")</script></strong></span></p>')
+      ).toBe('<p><span><strong></strong></span></p>');
+    });
+
+    it('should handle mixed safe and dangerous content', () => {
+      expect(
+        sanitizeHTML(
+          '<strong>Safe</strong><script>alert("xss")</script><em>Also Safe</em><iframe></iframe>'
+        )
+      ).toBe('<strong>Safe</strong><em>Also Safe</em>');
+    });
+  });
+
+  describe('XSS Prevention - Edge Cases', () => {
+    it('should handle malformed HTML', () => {
+      expect(sanitizeHTML('<strong>Unclosed tag')).toBe('<strong>Unclosed tag</strong>');
+      expect(sanitizeHTML('</strong>Closing tag without opening')).toBe(
+        'Closing tag without opening'
+      );
+    });
+
+    it('should handle case variations', () => {
+      expect(sanitizeHTML('<SCRIPT>alert("xss")</SCRIPT>')).toBe('');
+      expect(sanitizeHTML('<Script>alert("xss")</Script>')).toBe('');
+      expect(sanitizeHTML('<sCrIpT>alert("xss")</sCrIpT>')).toBe('');
+    });
+
+    it('should handle whitespace in tags', () => {
+      // Tags with whitespace are treated as text (safe)
+      // Browser normalizes tags, so "< script >" becomes text content
+      const result1 = sanitizeHTML('< script >alert("xss")</ script >');
+      expect(result1).toContain('alert("xss")');
+      expect(result1).not.toContain('<script>');
+
+      // Normalized tags work fine
+      expect(sanitizeHTML('<strong >Bold</strong>')).toBe('<strong>Bold</strong>');
+    });
+
+    it('should handle null and undefined', () => {
+      expect(sanitizeHTML(null as any)).toBe('');
+      expect(sanitizeHTML(undefined as any)).toBe('');
+    });
+
+    it('should handle non-string input', () => {
+      expect(sanitizeHTML(123 as any)).toBe('');
+      expect(sanitizeHTML({} as any)).toBe('');
+      expect(sanitizeHTML([] as any)).toBe('');
+    });
+  });
+
+  describe('Real-world XSS Attack Patterns', () => {
+    it('should prevent common XSS payloads', () => {
+      // Classic script injection
+      expect(sanitizeHTML('<img src=x onerror=alert("xss")>')).toBe('');
+
+      // SVG with script
+      expect(sanitizeHTML('<svg><script>alert("xss")</script></svg>')).toBe('');
+
+      // Iframe injection
+      expect(sanitizeHTML('<iframe src="javascript:alert(\'xss\')"></iframe>')).toBe('');
+
+      // Event handler in allowed tag
+      expect(sanitizeHTML('<a href="/" onclick="alert(\'xss\')">Click</a>')).toBe(
+        '<a href="/">Click</a>'
+      );
+
+      // Mixed attack
+      expect(
+        sanitizeHTML(
+          '<strong>Welcome</strong><script>alert("xss")</script><a href="javascript:alert(\'xss\')">Link</a>'
+        )
+      ).toBe('<strong>Welcome</strong><a>Link</a>');
+    });
+
+    it('should prevent encoded XSS attacks', () => {
+      // HTML entity encoded
+      expect(sanitizeHTML('&lt;script&gt;alert("xss")&lt;/script&gt;')).toBe(
+        '&lt;script&gt;alert("xss")&lt;/script&gt;'
+      );
+
+      // URL encoded javascript: should be decoded and blocked
+      // Note: decodeURIComponent will decode %6A%61%76%61%73%63%72%69%70%74%3A to "javascript:"
+      const result = sanitizeHTML(
+        '<a href="%6A%61%76%61%73%63%72%69%70%74%3Aalert(\'xss\')">Link</a>'
+      );
+      expect(result).toBe('<a>Link</a>');
+    });
+  });
+
+  describe('URL Sanitization', () => {
+    it('should allow relative URLs', () => {
+      expect(sanitizeHTML('<a href="/page">Link</a>')).toBe('<a href="/page">Link</a>');
+      expect(sanitizeHTML('<a href="./page">Link</a>')).toBe('<a href="./page">Link</a>');
+      expect(sanitizeHTML('<a href="../page">Link</a>')).toBe('<a href="../page">Link</a>');
+      expect(sanitizeHTML('<a href="#section">Link</a>')).toBe('<a href="#section">Link</a>');
+      expect(sanitizeHTML('<a href="?param=value">Link</a>')).toBe(
+        '<a href="?param=value">Link</a>'
+      );
+    });
+
+    it('should allow http and https URLs', () => {
+      expect(sanitizeHTML('<a href="http://example.com">Link</a>')).toBe(
+        '<a href="http://example.com">Link</a>'
+      );
+      expect(sanitizeHTML('<a href="https://example.com">Link</a>')).toBe(
+        '<a href="https://example.com">Link</a>'
+      );
+    });
+
+    it('should allow mailto and tel URLs', () => {
+      expect(sanitizeHTML('<a href="mailto:test@example.com">Email</a>')).toBe(
+        '<a href="mailto:test@example.com">Email</a>'
+      );
+      expect(sanitizeHTML('<a href="tel:+1234567890">Call</a>')).toBe(
+        '<a href="tel:+1234567890">Call</a>'
+      );
+    });
+
+    it('should block javascript: URLs regardless of case', () => {
+      expect(sanitizeHTML('<a href="javascript:alert(1)">Link</a>')).toBe('<a>Link</a>');
+      expect(sanitizeHTML('<a href="JAVASCRIPT:alert(1)">Link</a>')).toBe('<a>Link</a>');
+      expect(sanitizeHTML('<a href="JavaScript:alert(1)">Link</a>')).toBe('<a>Link</a>');
+    });
+
+    it('should block data: URLs', () => {
+      expect(sanitizeHTML('<a href="data:text/html,<script>alert(1)</script>">Link</a>')).toBe(
+        '<a>Link</a>'
+      );
+      expect(sanitizeHTML('<a href="data:image/svg+xml,<svg>...</svg>">Link</a>')).toBe(
+        '<a>Link</a>'
+      );
+    });
+
+    it('should block other dangerous protocols', () => {
+      expect(sanitizeHTML('<a href="file:///etc/passwd">Link</a>')).toBe('<a>Link</a>');
+      expect(sanitizeHTML('<a href="vbscript:alert(1)">Link</a>')).toBe('<a>Link</a>');
+    });
+  });
+
+  describe('Complex Scenarios', () => {
+    it('should handle real-world banner content', () => {
+      const content = `
+        <strong>Flash Sale!</strong>
+        Get <em>50% off</em> everything.
+        <a href="/shop">Shop Now</a>
+      `;
+      const sanitized = sanitizeHTML(content);
+      expect(sanitized).toContain('<strong>Flash Sale!</strong>');
+      expect(sanitized).toContain('<em>50% off</em>');
+      expect(sanitized).toContain('<a href="/shop">Shop Now</a>');
+      expect(sanitized).not.toContain('<script>');
+    });
+
+    it('should preserve formatting in complex content', () => {
+      const content =
+        '<p>Welcome! <strong>New</strong> users get <em>special</em> pricing. <a href="/signup">Sign up</a> today!</p>';
+      const sanitized = sanitizeHTML(content);
+      expect(sanitized).toContain('<p>');
+      expect(sanitized).toContain('<strong>New</strong>');
+      expect(sanitized).toContain('<em>special</em>');
+      expect(sanitized).toContain('<a href="/signup">Sign up</a>');
+    });
+  });
+});
diff --git a/packages/plugins/src/utils/sanitize.ts b/packages/plugins/src/utils/sanitize.ts
new file mode 100644
index 0000000..12ab2e5
--- /dev/null
+++ b/packages/plugins/src/utils/sanitize.ts
@@ -0,0 +1,196 @@
+/**
+ * HTML Sanitizer
+ *
+ * Lightweight HTML sanitizer for experience content (messages, titles).
+ * Whitelist-based approach that only allows safe formatting tags.
+ *
+ * Security: Prevents XSS attacks by stripping dangerous tags and attributes.
+ */
+
+/**
+ * Allowed HTML tags for sanitization
+ * Only safe formatting tags are permitted
+ */
+const ALLOWED_TAGS = ['strong', 'em', 'a', 'br', 'span', 'b', 'i', 'p'] as const;
+
+/**
+ * Allowed attributes per tag
+ */
+const ALLOWED_ATTRIBUTES: Record<string, string[]> = {
+  a: ['href', 'class', 'style', 'title'],
+  span: ['class', 'style'],
+  p: ['class', 'style'],
+  // Other tags have no attributes allowed
+};
+
+/**
+ * Sanitize HTML string by removing dangerous tags and attributes
+ *
+ * @param html - HTML string to sanitize
+ * @returns Sanitized HTML string safe for innerHTML
+ *
+ * @example
+ * ```typescript
+ * sanitizeHTML('<strong>Hello</strong><script>alert("xss")</script>');
+ * // Returns: '<strong>Hello</strong>'
+ * ```
+ */
+export function sanitizeHTML(html: string): string {
+  if (!html || typeof html !== 'string') {
+    return '';
+  }
+
+  // Create a temporary DOM element to parse HTML
+  const temp = document.createElement('div');
+  temp.innerHTML = html;
+
+  /**
+   * Recursively sanitize a DOM node
+   */
+  function sanitizeNode(node: Node): string {
+    // Text nodes - escape HTML entities
+    if (node.nodeType === Node.TEXT_NODE) {
+      return escapeHTML(node.textContent || '');
+    }
+
+    // Element nodes
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as Element;
+      const tagName = element.tagName.toLowerCase();
+
+      // Handle tags with whitespace (malformed HTML like "< script >")
+      // Browser normalizes these, but if we see a tag that's not in our list,
+      // it might be a dangerous tag that was normalized
+      if (!tagName || tagName.includes(' ')) {
+        return '';
+      }
+
+      // If tag is not allowed, return empty string
+      if (!ALLOWED_TAGS.includes(tagName as any)) {
+        return '';
+      }
+
+      // Get allowed attributes for this tag
+      const allowedAttrs = ALLOWED_ATTRIBUTES[tagName] || [];
+
+      // Build attribute string
+      const attrs: string[] = [];
+      for (const attr of allowedAttrs) {
+        const value = element.getAttribute(attr);
+        if (value !== null) {
+          // Sanitize attribute values
+          if (attr === 'href') {
+            // Only allow safe URLs (http, https, mailto, tel, relative)
+            const sanitizedHref = sanitizeURL(value);
+            if (sanitizedHref) {
+              attrs.push(`href="${escapeAttribute(sanitizedHref)}"`);
+            }
+          } else {
+            // For all other attributes (title, class, style), escape HTML entities
+            attrs.push(`${attr}="${escapeAttribute(value)}"`);
+          }
+        }
+      }
+
+      const attrString = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+
+      // Process child nodes
+      let innerHTML = '';
+      for (const child of Array.from(element.childNodes)) {
+        innerHTML += sanitizeNode(child);
+      }
+
+      // Self-closing tags
+      if (tagName === 'br') {
+        return `<br${attrString} />`;
+      }
+
+      return `<${tagName}${attrString}>${innerHTML}</${tagName}>`;
+    }
+
+    return '';
+  }
+
+  // Sanitize all nodes
+  let sanitized = '';
+  for (const child of Array.from(temp.childNodes)) {
+    sanitized += sanitizeNode(child);
+  }
+
+  return sanitized;
+}
+
+/**
+ * Escape HTML entities to prevent XSS in text content
+ */
+function escapeHTML(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Escape HTML entities for use in attribute values
+ */
+function escapeAttribute(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * Sanitize URL to prevent javascript: and data: XSS attacks
+ *
+ * @param url - URL to sanitize
+ * @returns Sanitized URL or empty string if unsafe
+ */
+function sanitizeURL(url: string): string {
+  if (!url || typeof url !== 'string') {
+    return '';
+  }
+
+  // Decode URL-encoded characters to check for encoded attacks
+  let decoded: string;
+  try {
+    decoded = decodeURIComponent(url);
+  } catch {
+    // If decoding fails, use original
+    decoded = url;
+  }
+
+  const trimmed = decoded.trim().toLowerCase();
+
+  // Block javascript: and data: protocols (check both original and decoded)
+  if (
+    trimmed.startsWith('javascript:') ||
+    trimmed.startsWith('data:') ||
+    url.toLowerCase().trim().startsWith('javascript:') ||
+    url.toLowerCase().trim().startsWith('data:')
+  ) {
+    return '';
+  }
+
+  // Allow http, https, mailto, tel, and relative URLs
+  if (
+    trimmed.startsWith('http://') ||
+    trimmed.startsWith('https://') ||
+    trimmed.startsWith('mailto:') ||
+    trimmed.startsWith('tel:') ||
+    trimmed.startsWith('/') ||
+    trimmed.startsWith('#') ||
+    trimmed.startsWith('?')
+  ) {
+    return url; // Return original (case preserved)
+  }
+
+  // Allow relative paths without protocol
+  if (!trimmed.includes(':')) {
+    return url;
+  }
+
+  // Block everything else
+  return '';
+}
diff --git a/tsconfig.json b/tsconfig.json
index b543e23..7a360e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,12 +12,8 @@
     "lib": ["ES2022", "DOM"],
     "baseUrl": ".",
     "paths": {
-      "@monorepo/core": ["packages/core/src"],
-      "@monorepo/core/*": ["packages/core/src/*"],
-      "@monorepo/utils": ["packages/utils/src"],
-      "@monorepo/utils/*": ["packages/utils/src/*"],
-      "@monorepo/feature-a": ["packages/feature-a/src"],
-      "@monorepo/feature-a/*": ["packages/feature-a/src/*"]
+      "@prosdevlab/experience-sdk": ["packages/core/src"],
+      "@prosdevlab/experience-sdk/*": ["packages/core/src/*"]
     }
   },
   "exclude": ["node_modules"],