diff --git a/changelog.md b/changelog.md
index 7627efe..dd829e9 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 2025-12-18 - 1.2.0 - feat(icons)
+migrate icon usage to the new dees-icon API and integrate collaboration sidebar into the editor
+
+- Replaced deprecated .iconFA with .icon across multiple components
+- Updated lucide icon identifiers to PascalCase/camelCase to match new dees-icon format
+- Added sdig-collaboration-sidebar component and exported it from elements index
+- Integrated a toggleable editor sidebar (PanelRight) and wired comment/suggestion navigation & add-comment events in sdig-contracteditor
+- Added development hints (readme.hints.md) documenting dees-icon usage and icon name formats
+- Minor UI/styling tweak: .btn-ghost.active appearance
+
 ## 2025-12-18 - 1.1.0 - feat(catalog)
 add ContractEditor and many editor subcomponents; implement SignPad and SignBox; update README and bump dependencies
 
diff --git a/readme.hints.md b/readme.hints.md
index e69de29..9dd081f 100644
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -0,0 +1,31 @@
+# Development Hints for @signature.digital/catalog
+
+## dees-icon Usage
+
+**Important**: Use the `.icon` property, NOT `.iconFA` (deprecated).
+
+### Format
+```html
+<dees-icon .icon=${'prefix:IconName'}></dees-icon>
+```
+
+### Lucide Icons (PascalCase)
+Lucide icons use **PascalCase** names:
+- `lucide:CheckCircle` ✓
+- `lucide:UserPlus` ✓
+- `lucide:PenTool` ✓
+- `lucide:Mail` ✓
+- `lucide:Users` ✓
+
+**Wrong formats**:
+- `lucide:check-circle` ✗ (kebab-case doesn't work)
+- `lucide:userPlus` ✗ (camelCase doesn't work)
+
+### FontAwesome Icons (camelCase)
+FontAwesome icons use **camelCase** names:
+- `fa:arrowRight`
+- `fa:magnifyingGlass`
+- `fa:penToSquare`
+
+### Documentation
+See: https://code.foss.global/design.estate/dees-catalog/src/branch/main/readme.icons.md
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 66d8e8f..c43e74f 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@signature.digital/catalog',
-  version: '1.1.0',
+  version: '1.2.0',
   description: 'A comprehensive catalog of customizable web components designed for building and managing e-signature applications.'
 }
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index 873bd7a..3283b75 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -11,6 +11,7 @@ export * from './sdig-contract-signatures/index.js';
 export * from './sdig-contract-attachments/index.js';
 export * from './sdig-contract-collaboration/index.js';
 export * from './sdig-contract-audit/index.js';
+export * from './sdig-collaboration-sidebar/index.js';
 
 // Signature components
 export * from './sdig-signbox/index.js';
diff --git a/ts_web/elements/sdig-collaboration-sidebar/index.ts b/ts_web/elements/sdig-collaboration-sidebar/index.ts
new file mode 100644
index 0000000..f8500cd
--- /dev/null
+++ b/ts_web/elements/sdig-collaboration-sidebar/index.ts
@@ -0,0 +1 @@
+export * from './sdig-collaboration-sidebar.js';
diff --git a/ts_web/elements/sdig-collaboration-sidebar/sdig-collaboration-sidebar.ts b/ts_web/elements/sdig-collaboration-sidebar/sdig-collaboration-sidebar.ts
new file mode 100644
index 0000000..51e4ac2
--- /dev/null
+++ b/ts_web/elements/sdig-collaboration-sidebar/sdig-collaboration-sidebar.ts
@@ -0,0 +1,846 @@
+/**
+ * @file sdig-collaboration-sidebar.ts
+ * @description Compact collaboration sidebar for the contract editor
+ */
+
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+
+import * as plugins from '../../plugins.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sdig-collaboration-sidebar': SdigCollaborationSidebar;
+  }
+}
+
+// Comment interface
+interface IComment {
+  id: string;
+  userId: string;
+  userName: string;
+  userColor: string;
+  content: string;
+  createdAt: number;
+  updatedAt?: number;
+  anchorPath?: string;
+  anchorText?: string;
+  resolved: boolean;
+  replies: IComment[];
+}
+
+// Suggestion interface
+interface ISuggestion {
+  id: string;
+  userId: string;
+  userName: string;
+  userColor: string;
+  originalText: string;
+  suggestedText: string;
+  path: string;
+  status: 'pending' | 'accepted' | 'rejected';
+  createdAt: number;
+}
+
+// Presence interface
+interface IPresence {
+  userId: string;
+  userName: string;
+  userColor: string;
+  currentSection: string;
+  cursorPosition?: { path: string; offset: number };
+  lastActive: number;
+}
+
+@customElement('sdig-collaboration-sidebar')
+export class SdigCollaborationSidebar extends DeesElement {
+  // ============================================================================
+  // STATIC
+  // ============================================================================
+
+  public static demo = () => html`
+    <div style="width: 320px; height: 600px; border: 1px solid #ccc;">
+      <sdig-collaboration-sidebar
+        .contract=${plugins.sdDemodata.demoContract}
+      ></sdig-collaboration-sidebar>
+    </div>
+  `;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .sidebar-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      /* Presence bar */
+      .presence-bar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f9fafb', '#111111')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
+      }
+
+      .presence-avatars {
+        display: flex;
+        align-items: center;
+      }
+
+      .presence-avatar {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        font-weight: 600;
+        color: white;
+        margin-left: -6px;
+        border: 2px solid ${cssManager.bdTheme('#f9fafb', '#111111')};
+        cursor: pointer;
+        position: relative;
+      }
+
+      .presence-avatar:first-child {
+        margin-left: 0;
+      }
+
+      .presence-avatar .status-dot {
+        position: absolute;
+        bottom: -1px;
+        right: -1px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #10b981;
+        border: 2px solid ${cssManager.bdTheme('#f9fafb', '#111111')};
+      }
+
+      .presence-avatar .status-dot.away {
+        background: #f59e0b;
+      }
+
+      .presence-count {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+        font-size: 11px;
+        font-weight: 600;
+        margin-left: -6px;
+        border: 2px solid ${cssManager.bdTheme('#f9fafb', '#111111')};
+      }
+
+      .presence-label {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+
+      /* Scrollable content */
+      .sidebar-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px;
+      }
+
+      /* Collapsible sections */
+      .collapsible-section {
+        margin-bottom: 12px;
+        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
+        border-radius: 8px;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        background: ${cssManager.bdTheme('#f9fafb', '#111111')};
+        cursor: pointer;
+        user-select: none;
+        transition: background 0.15s ease;
+      }
+
+      .section-header:hover {
+        background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#374151', '#d1d5db')};
+      }
+
+      .section-title dees-icon {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+
+      .section-badge {
+        padding: 2px 6px;
+        border-radius: 9999px;
+        font-size: 10px;
+        font-weight: 600;
+        background: ${cssManager.bdTheme('#dbeafe', '#1e3a5f')};
+        color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
+      }
+
+      .section-chevron {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
+        transition: transform 0.2s ease;
+      }
+
+      .section-chevron.expanded {
+        transform: rotate(180deg);
+      }
+
+      .section-body {
+        padding: 0;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.2s ease, padding 0.2s ease;
+      }
+
+      .section-body.expanded {
+        padding: 12px;
+        max-height: 1000px;
+      }
+
+      /* Compact comment cards */
+      .comment-card {
+        display: flex;
+        gap: 10px;
+        padding: 10px;
+        background: ${cssManager.bdTheme('#f9fafb', '#111111')};
+        border-radius: 6px;
+        margin-bottom: 8px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .comment-card:last-child {
+        margin-bottom: 0;
+      }
+
+      .comment-card:hover {
+        background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
+      }
+
+      .comment-card.resolved {
+        opacity: 0.6;
+      }
+
+      .comment-avatar {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-weight: 600;
+        color: white;
+        flex-shrink: 0;
+      }
+
+      .comment-body {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .comment-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 4px;
+      }
+
+      .comment-author {
+        font-size: 12px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#374151', '#d1d5db')};
+      }
+
+      .comment-time {
+        font-size: 10px;
+        color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
+      }
+
+      .comment-preview {
+        font-size: 12px;
+        line-height: 1.4;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .comment-replies {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 10px;
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        margin-top: 4px;
+      }
+
+      .comment-replies dees-icon {
+        font-size: 12px;
+      }
+
+      /* Suggestion cards */
+      .suggestion-card {
+        padding: 10px;
+        background: ${cssManager.bdTheme('#f9fafb', '#111111')};
+        border-radius: 6px;
+        margin-bottom: 8px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .suggestion-card:last-child {
+        margin-bottom: 0;
+      }
+
+      .suggestion-card:hover {
+        background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
+      }
+
+      .suggestion-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+      }
+
+      .suggestion-user {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .suggestion-status {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 6px;
+        border-radius: 9999px;
+        font-size: 10px;
+        font-weight: 500;
+      }
+
+      .suggestion-status dees-icon {
+        font-size: 10px;
+      }
+
+      .suggestion-status.pending {
+        background: ${cssManager.bdTheme('#fef3c7', '#422006')};
+        color: ${cssManager.bdTheme('#92400e', '#fcd34d')};
+      }
+
+      .suggestion-status.accepted {
+        background: ${cssManager.bdTheme('#d1fae5', '#064e3b')};
+        color: ${cssManager.bdTheme('#065f46', '#6ee7b7')};
+      }
+
+      .suggestion-status.rejected {
+        background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#fca5a5')};
+      }
+
+      .suggestion-diff {
+        font-family: 'Roboto Mono', monospace;
+        font-size: 11px;
+        line-height: 1.4;
+      }
+
+      .diff-removed {
+        background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#fca5a5')};
+        text-decoration: line-through;
+        padding: 1px 3px;
+        border-radius: 2px;
+      }
+
+      .diff-added {
+        background: ${cssManager.bdTheme('#d1fae5', '#064e3b')};
+        color: ${cssManager.bdTheme('#065f46', '#6ee7b7')};
+        padding: 1px 3px;
+        border-radius: 2px;
+      }
+
+      /* Quick add comment */
+      .quick-add {
+        padding: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
+        background: ${cssManager.bdTheme('#f9fafb', '#111111')};
+      }
+
+      .quick-add-input {
+        width: 100%;
+        padding: 10px 12px;
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#111111', '#fafafa')};
+        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+        border: 1px solid ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
+        border-radius: 6px;
+        outline: none;
+        resize: none;
+        min-height: 60px;
+        font-family: inherit;
+        box-sizing: border-box;
+      }
+
+      .quick-add-input:focus {
+        border-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.1)')};
+      }
+
+      .quick-add-input::placeholder {
+        color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
+      }
+
+      .quick-add-actions {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 8px;
+      }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        font-size: 12px;
+        font-weight: 500;
+        border-radius: 6px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .btn-primary {
+        background: ${cssManager.bdTheme('#111111', '#fafafa')};
+        color: ${cssManager.bdTheme('#ffffff', '#09090b')};
+      }
+
+      .btn-primary:hover {
+        background: ${cssManager.bdTheme('#333333', '#e5e5e5')};
+      }
+
+      .btn-primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* Empty state */
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 24px 16px;
+        text-align: center;
+        color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
+      }
+
+      .empty-state dees-icon {
+        font-size: 32px;
+        margin-bottom: 8px;
+        opacity: 0.5;
+      }
+
+      .empty-state p {
+        margin: 0;
+        font-size: 12px;
+      }
+    `,
+  ];
+
+  // ============================================================================
+  // PROPERTIES
+  // ============================================================================
+
+  @property({ type: Object })
+  public accessor contract: plugins.sdInterfaces.IPortableContract | null = null;
+
+  @property({ type: Boolean })
+  public accessor readonly: boolean = false;
+
+  // ============================================================================
+  // STATE
+  // ============================================================================
+
+  @state()
+  private accessor commentsExpanded: boolean = true;
+
+  @state()
+  private accessor suggestionsExpanded: boolean = true;
+
+  @state()
+  private accessor newCommentText: string = '';
+
+  // Demo presence data
+  @state()
+  private accessor presenceList: IPresence[] = [
+    { userId: '1', userName: 'Alice Smith', userColor: '#3b82f6', currentSection: 'content', lastActive: Date.now() },
+    { userId: '2', userName: 'Bob Johnson', userColor: '#10b981', currentSection: 'parties', lastActive: Date.now() - 60000 },
+    { userId: '3', userName: 'Carol Davis', userColor: '#f59e0b', currentSection: 'terms', lastActive: Date.now() - 300000 },
+  ];
+
+  // Demo comments data
+  @state()
+  private accessor comments: IComment[] = [
+    {
+      id: '1',
+      userId: '1',
+      userName: 'Alice Smith',
+      userColor: '#3b82f6',
+      content: 'Can we clarify the payment terms in paragraph 3? The current wording seems ambiguous.',
+      createdAt: Date.now() - 3600000,
+      anchorPath: 'paragraphs.2',
+      anchorText: 'Compensation',
+      resolved: false,
+      replies: [
+        {
+          id: '1-1',
+          userId: '2',
+          userName: 'Bob Johnson',
+          userColor: '#10b981',
+          content: 'Good point. I\'ll update the wording to be more specific.',
+          createdAt: Date.now() - 1800000,
+          resolved: false,
+          replies: [],
+        },
+      ],
+    },
+    {
+      id: '2',
+      userId: '3',
+      userName: 'Carol Davis',
+      userColor: '#f59e0b',
+      content: 'The termination clause needs to comply with the latest regulations.',
+      createdAt: Date.now() - 86400000,
+      resolved: true,
+      replies: [],
+    },
+    {
+      id: '3',
+      userId: '2',
+      userName: 'Bob Johnson',
+      userColor: '#10b981',
+      content: 'Should we add an automatic renewal clause?',
+      createdAt: Date.now() - 7200000,
+      resolved: false,
+      replies: [],
+    },
+  ];
+
+  // Demo suggestions data
+  @state()
+  private accessor suggestions: ISuggestion[] = [
+    {
+      id: '1',
+      userId: '1',
+      userName: 'Alice Smith',
+      userColor: '#3b82f6',
+      originalText: 'monthly salary',
+      suggestedText: 'monthly gross salary',
+      path: 'paragraphs.2.content',
+      status: 'pending',
+      createdAt: Date.now() - 7200000,
+    },
+    {
+      id: '2',
+      userId: '3',
+      userName: 'Carol Davis',
+      userColor: '#f59e0b',
+      originalText: '30 days',
+      suggestedText: '60 days',
+      path: 'paragraphs.5.content',
+      status: 'pending',
+      createdAt: Date.now() - 3600000,
+    },
+  ];
+
+  // ============================================================================
+  // EVENT HANDLERS
+  // ============================================================================
+
+  private handleCommentClick(comment: IComment) {
+    this.dispatchEvent(
+      new CustomEvent('comment-click', {
+        detail: { comment },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleSuggestionClick(suggestion: ISuggestion) {
+    this.dispatchEvent(
+      new CustomEvent('suggestion-click', {
+        detail: { suggestion },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleAddComment() {
+    if (!this.newCommentText.trim()) return;
+
+    const newComment: IComment = {
+      id: `comment-${Date.now()}`,
+      userId: 'current-user',
+      userName: 'You',
+      userColor: '#6366f1',
+      content: this.newCommentText,
+      createdAt: Date.now(),
+      resolved: false,
+      replies: [],
+    };
+
+    this.comments = [newComment, ...this.comments];
+    this.newCommentText = '';
+
+    this.dispatchEvent(
+      new CustomEvent('add-comment', {
+        detail: { comment: newComment },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  // ============================================================================
+  // HELPERS
+  // ============================================================================
+
+  private formatTimeAgo(timestamp: number): string {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    if (seconds < 60) return 'now';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h`;
+    const days = Math.floor(hours / 24);
+    return `${days}d`;
+  }
+
+  private getActivePresence(): IPresence[] {
+    const fiveMinutesAgo = Date.now() - 300000;
+    return this.presenceList.filter((p) => p.lastActive > fiveMinutesAgo);
+  }
+
+  private getOpenComments(): IComment[] {
+    return this.comments.filter((c) => !c.resolved);
+  }
+
+  private getPendingSuggestions(): ISuggestion[] {
+    return this.suggestions.filter((s) => s.status === 'pending');
+  }
+
+  // ============================================================================
+  // RENDER
+  // ============================================================================
+
+  public render(): TemplateResult {
+    const activePresence = this.getActivePresence();
+    const openComments = this.getOpenComments();
+    const pendingSuggestions = this.getPendingSuggestions();
+
+    return html`
+      <div class="sidebar-container">
+        <!-- Presence Bar -->
+        <div class="presence-bar">
+          <div class="presence-avatars">
+            ${activePresence.slice(0, 3).map(
+              (p) => html`
+                <div
+                  class="presence-avatar"
+                  style="background: ${p.userColor}"
+                  title="${p.userName} - ${p.currentSection}"
+                >
+                  ${p.userName.charAt(0)}
+                  <span class="status-dot ${Date.now() - p.lastActive > 60000 ? 'away' : ''}"></span>
+                </div>
+              `
+            )}
+            ${activePresence.length > 3
+              ? html`<div class="presence-count">+${activePresence.length - 3}</div>`
+              : ''}
+          </div>
+          <span class="presence-label">${activePresence.length} active</span>
+        </div>
+
+        <!-- Scrollable Content -->
+        <div class="sidebar-content">
+          <!-- Comments Section -->
+          <div class="collapsible-section">
+            <div
+              class="section-header"
+              @click=${() => (this.commentsExpanded = !this.commentsExpanded)}
+            >
+              <div class="section-title">
+                <dees-icon .icon=${'lucide:MessageCircle'}></dees-icon>
+                Comments
+                ${openComments.length > 0
+                  ? html`<span class="section-badge">${openComments.length}</span>`
+                  : ''}
+              </div>
+              <dees-icon
+                class="section-chevron ${this.commentsExpanded ? 'expanded' : ''}"
+                .icon=${'lucide:ChevronDown'}
+              ></dees-icon>
+            </div>
+            <div class="section-body ${this.commentsExpanded ? 'expanded' : ''}">
+              ${this.comments.length > 0
+                ? this.comments.slice(0, 5).map((comment) => this.renderCommentCard(comment))
+                : html`
+                    <div class="empty-state">
+                      <dees-icon .icon=${'lucide:MessageSquare'}></dees-icon>
+                      <p>No comments yet</p>
+                    </div>
+                  `}
+            </div>
+          </div>
+
+          <!-- Suggestions Section -->
+          <div class="collapsible-section">
+            <div
+              class="section-header"
+              @click=${() => (this.suggestionsExpanded = !this.suggestionsExpanded)}
+            >
+              <div class="section-title">
+                <dees-icon .icon=${'lucide:GitPullRequest'}></dees-icon>
+                Suggestions
+                ${pendingSuggestions.length > 0
+                  ? html`<span class="section-badge">${pendingSuggestions.length}</span>`
+                  : ''}
+              </div>
+              <dees-icon
+                class="section-chevron ${this.suggestionsExpanded ? 'expanded' : ''}"
+                .icon=${'lucide:ChevronDown'}
+              ></dees-icon>
+            </div>
+            <div class="section-body ${this.suggestionsExpanded ? 'expanded' : ''}">
+              ${this.suggestions.length > 0
+                ? this.suggestions.slice(0, 5).map((suggestion) => this.renderSuggestionCard(suggestion))
+                : html`
+                    <div class="empty-state">
+                      <dees-icon .icon=${'lucide:Edit3'}></dees-icon>
+                      <p>No suggestions yet</p>
+                    </div>
+                  `}
+            </div>
+          </div>
+        </div>
+
+        <!-- Quick Add Comment -->
+        ${!this.readonly
+          ? html`
+              <div class="quick-add">
+                <textarea
+                  class="quick-add-input"
+                  placeholder="Add a comment..."
+                  .value=${this.newCommentText}
+                  @input=${(e: Event) => (this.newCommentText = (e.target as HTMLTextAreaElement).value)}
+                ></textarea>
+                <div class="quick-add-actions">
+                  <button
+                    class="btn btn-primary"
+                    @click=${this.handleAddComment}
+                    ?disabled=${!this.newCommentText.trim()}
+                  >
+                    <dees-icon .icon=${'lucide:Send'}></dees-icon>
+                    Add
+                  </button>
+                </div>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
+  private renderCommentCard(comment: IComment): TemplateResult {
+    return html`
+      <div
+        class="comment-card ${comment.resolved ? 'resolved' : ''}"
+        @click=${() => this.handleCommentClick(comment)}
+      >
+        <div class="comment-avatar" style="background: ${comment.userColor}">
+          ${comment.userName.charAt(0)}
+        </div>
+        <div class="comment-body">
+          <div class="comment-meta">
+            <span class="comment-author">${comment.userName}</span>
+            <span class="comment-time">${this.formatTimeAgo(comment.createdAt)}</span>
+          </div>
+          <div class="comment-preview">${comment.content}</div>
+          ${comment.replies.length > 0
+            ? html`
+                <div class="comment-replies">
+                  <dees-icon .icon=${'lucide:MessageSquare'}></dees-icon>
+                  ${comment.replies.length} ${comment.replies.length === 1 ? 'reply' : 'replies'}
+                </div>
+              `
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderSuggestionCard(suggestion: ISuggestion): TemplateResult {
+    return html`
+      <div class="suggestion-card" @click=${() => this.handleSuggestionClick(suggestion)}>
+        <div class="suggestion-header">
+          <div class="suggestion-user">
+            <div class="comment-avatar" style="background: ${suggestion.userColor}; width: 20px; height: 20px; font-size: 9px;">
+              ${suggestion.userName.charAt(0)}
+            </div>
+            <span class="comment-author">${suggestion.userName}</span>
+          </div>
+          <div class="suggestion-status ${suggestion.status}">
+            <dees-icon .icon=${suggestion.status === 'pending' ? 'lucide:Clock' : suggestion.status === 'accepted' ? 'lucide:Check' : 'lucide:X'}></dees-icon>
+            ${suggestion.status}
+          </div>
+        </div>
+        <div class="suggestion-diff">
+          <span class="diff-removed">${suggestion.originalText}</span>
+          <span> → </span>
+          <span class="diff-added">${suggestion.suggestedText}</span>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/ts_web/elements/sdig-contract-attachments/sdig-contract-attachments.ts b/ts_web/elements/sdig-contract-attachments/sdig-contract-attachments.ts
index 5f902ed..976d60c 100644
--- a/ts_web/elements/sdig-contract-attachments/sdig-contract-attachments.ts
+++ b/ts_web/elements/sdig-contract-attachments/sdig-contract-attachments.ts
@@ -37,11 +37,11 @@ interface IAttachment {
 
 // File type configuration
 const FILE_TYPES = {
-  document: { icon: 'lucide:file-text', color: '#3b82f6', label: 'Document' },
-  image: { icon: 'lucide:image', color: '#10b981', label: 'Image' },
-  spreadsheet: { icon: 'lucide:sheet', color: '#22c55e', label: 'Spreadsheet' },
-  pdf: { icon: 'lucide:file-type', color: '#ef4444', label: 'PDF' },
-  other: { icon: 'lucide:file', color: '#6b7280', label: 'File' },
+  document: { icon: 'lucide:FileText', color: '#3b82f6', label: 'Document' },
+  image: { icon: 'lucide:Image', color: '#10b981', label: 'Image' },
+  spreadsheet: { icon: 'lucide:Sheet', color: '#22c55e', label: 'Spreadsheet' },
+  pdf: { icon: 'lucide:FileType', color: '#ef4444', label: 'PDF' },
+  other: { icon: 'lucide:File', color: '#6b7280', label: 'File' },
 };
 
 @customElement('sdig-contract-attachments')
@@ -631,7 +631,7 @@ export class SdigContractAttachments extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:paperclip'}></dees-icon>
+              <dees-icon .icon=${'lucide:Paperclip'}></dees-icon>
               Attachments
             </div>
             <span class="section-count">${this.attachments.length} files</span>
@@ -662,7 +662,7 @@ export class SdigContractAttachments extends DeesElement {
                     @click=${this.handleFileSelect}
                   >
                     <div class="upload-zone-icon">
-                      <dees-icon .iconFA=${'lucide:upload-cloud'}></dees-icon>
+                      <dees-icon .icon=${'lucide:UploadCloud'}></dees-icon>
                     </div>
                     <div class="upload-zone-title">Drop files here or click to upload</div>
                     <div class="upload-zone-subtitle">Add supporting documents, images, or spreadsheets</div>
@@ -680,7 +680,7 @@ export class SdigContractAttachments extends DeesElement {
                 `
               : html`
                   <div class="empty-state" style="margin-top: 20px;">
-                    <dees-icon .iconFA=${'lucide:file-x'}></dees-icon>
+                    <dees-icon .icon=${'lucide:FileX'}></dees-icon>
                     <h4>No Attachments</h4>
                     <p>Upload files to attach them to this contract</p>
                   </div>
@@ -692,13 +692,13 @@ export class SdigContractAttachments extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:files'}></dees-icon>
+              <dees-icon .icon=${'lucide:Files'}></dees-icon>
               Prior Contracts
             </div>
             ${!this.readonly
               ? html`
                   <button class="btn btn-secondary" @click=${this.handleAddPriorContract}>
-                    <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                     Link Contract
                   </button>
                 `
@@ -715,7 +715,7 @@ export class SdigContractAttachments extends DeesElement {
                 `
               : html`
                   <div class="empty-state">
-                    <dees-icon .iconFA=${'lucide:link'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Link'}></dees-icon>
                     <h4>No Prior Contracts</h4>
                     <p>Link related or predecessor contracts here</p>
                   </div>
@@ -732,7 +732,7 @@ export class SdigContractAttachments extends DeesElement {
     return html`
       <div class="attachment-item">
         <div class="attachment-icon" style="background: ${typeConfig.color}20; color: ${typeConfig.color}">
-          <dees-icon .iconFA=${typeConfig.icon}></dees-icon>
+          <dees-icon .icon=${typeConfig.icon}></dees-icon>
         </div>
         <div class="attachment-info">
           <div class="attachment-name">${attachment.name}</div>
@@ -742,21 +742,21 @@ export class SdigContractAttachments extends DeesElement {
               ${this.formatFileSize(attachment.size)}
             </span>
             <span class="attachment-meta-item">
-              <dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
+              <dees-icon .icon=${'lucide:Calendar'}></dees-icon>
               ${this.formatDate(attachment.uploadedAt)}
             </span>
             <span class="attachment-meta-item">
-              <dees-icon .iconFA=${'lucide:user'}></dees-icon>
+              <dees-icon .icon=${'lucide:User'}></dees-icon>
               ${this.getPartyName(attachment.uploadedBy)}
             </span>
           </div>
         </div>
         <div class="attachment-actions">
           <button class="btn btn-ghost" title="Download">
-            <dees-icon .iconFA=${'lucide:download'}></dees-icon>
+            <dees-icon .icon=${'lucide:Download'}></dees-icon>
           </button>
           <button class="btn btn-ghost" title="Preview">
-            <dees-icon .iconFA=${'lucide:eye'}></dees-icon>
+            <dees-icon .icon=${'lucide:Eye'}></dees-icon>
           </button>
           ${!this.readonly
             ? html`
@@ -765,7 +765,7 @@ export class SdigContractAttachments extends DeesElement {
                   title="Delete"
                   @click=${() => this.handleDeleteAttachment(attachment.id)}
                 >
-                  <dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Trash2'}></dees-icon>
                 </button>
               `
             : ''}
@@ -778,7 +778,7 @@ export class SdigContractAttachments extends DeesElement {
     return html`
       <div class="prior-contract-item">
         <div class="prior-contract-icon">
-          <dees-icon .iconFA=${'lucide:file-text'}></dees-icon>
+          <dees-icon .icon=${'lucide:FileText'}></dees-icon>
         </div>
         <div class="prior-contract-info">
           <div class="prior-contract-title">${priorContract.title}</div>
@@ -786,7 +786,7 @@ export class SdigContractAttachments extends DeesElement {
         </div>
         <div class="prior-contract-actions">
           <button class="btn btn-secondary btn-sm">
-            <dees-icon .iconFA=${'lucide:external-link'}></dees-icon>
+            <dees-icon .icon=${'lucide:ExternalLink'}></dees-icon>
             View
           </button>
           ${!this.readonly
@@ -795,7 +795,7 @@ export class SdigContractAttachments extends DeesElement {
                   class="btn btn-ghost btn-danger"
                   @click=${() => this.handleRemovePriorContract(index)}
                 >
-                  <dees-icon .iconFA=${'lucide:unlink'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Unlink'}></dees-icon>
                 </button>
               `
             : ''}
diff --git a/ts_web/elements/sdig-contract-audit/sdig-contract-audit.ts b/ts_web/elements/sdig-contract-audit/sdig-contract-audit.ts
index 9be9afa..6f9e4d1 100644
--- a/ts_web/elements/sdig-contract-audit/sdig-contract-audit.ts
+++ b/ts_web/elements/sdig-contract-audit/sdig-contract-audit.ts
@@ -42,23 +42,23 @@ interface IAuditEvent {
 
 // Status workflow configuration
 const STATUS_WORKFLOW = [
-  { id: 'draft', label: 'Draft', icon: 'lucide:file-edit', color: '#f59e0b' },
-  { id: 'review', label: 'Review', icon: 'lucide:eye', color: '#3b82f6' },
-  { id: 'pending', label: 'Pending Signatures', icon: 'lucide:pen-tool', color: '#8b5cf6' },
-  { id: 'signed', label: 'Signed', icon: 'lucide:check-circle', color: '#10b981' },
-  { id: 'executed', label: 'Executed', icon: 'lucide:shield-check', color: '#059669' },
+  { id: 'draft', label: 'Draft', icon: 'lucide:FileEdit', color: '#f59e0b' },
+  { id: 'review', label: 'Review', icon: 'lucide:Eye', color: '#3b82f6' },
+  { id: 'pending', label: 'Pending Signatures', icon: 'lucide:PenTool', color: '#8b5cf6' },
+  { id: 'signed', label: 'Signed', icon: 'lucide:CheckCircle', color: '#10b981' },
+  { id: 'executed', label: 'Executed', icon: 'lucide:ShieldCheck', color: '#059669' },
 ];
 
 // Event type configuration
 const EVENT_TYPES = {
-  created: { icon: 'lucide:plus-circle', color: '#10b981', label: 'Created' },
-  updated: { icon: 'lucide:pencil', color: '#3b82f6', label: 'Updated' },
-  status_change: { icon: 'lucide:arrow-right-circle', color: '#8b5cf6', label: 'Status Changed' },
-  signature: { icon: 'lucide:pen-tool', color: '#10b981', label: 'Signature' },
-  comment: { icon: 'lucide:message-circle', color: '#f59e0b', label: 'Comment' },
-  attachment: { icon: 'lucide:paperclip', color: '#6366f1', label: 'Attachment' },
-  viewed: { icon: 'lucide:eye', color: '#6b7280', label: 'Viewed' },
-  shared: { icon: 'lucide:share-2', color: '#ec4899', label: 'Shared' },
+  created: { icon: 'lucide:PlusCircle', color: '#10b981', label: 'Created' },
+  updated: { icon: 'lucide:Pencil', color: '#3b82f6', label: 'Updated' },
+  status_change: { icon: 'lucide:ArrowRightCircle', color: '#8b5cf6', label: 'Status Changed' },
+  signature: { icon: 'lucide:PenTool', color: '#10b981', label: 'Signature' },
+  comment: { icon: 'lucide:MessageCircle', color: '#f59e0b', label: 'Comment' },
+  attachment: { icon: 'lucide:Paperclip', color: '#6366f1', label: 'Attachment' },
+  viewed: { icon: 'lucide:Eye', color: '#6b7280', label: 'Viewed' },
+  shared: { icon: 'lucide:Share2', color: '#ec4899', label: 'Shared' },
 };
 
 @customElement('sdig-contract-audit')
@@ -623,7 +623,7 @@ export class SdigContractAudit extends DeesElement {
             ${STATUS_WORKFLOW.map((status, index) => html`
               <div class="status-step ${index < currentStatusIndex ? 'completed' : ''} ${index === currentStatusIndex ? 'current' : ''}">
                 <div class="status-icon">
-                  <dees-icon .iconFA=${status.icon}></dees-icon>
+                  <dees-icon .icon=${status.icon}></dees-icon>
                 </div>
                 <div class="status-label">${status.label}</div>
               </div>
@@ -658,11 +658,11 @@ export class SdigContractAudit extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:history'}></dees-icon>
+              <dees-icon .icon=${'lucide:History'}></dees-icon>
               Activity Log
             </div>
             <button class="btn btn-secondary">
-              <dees-icon .iconFA=${'lucide:download'}></dees-icon>
+              <dees-icon .icon=${'lucide:Download'}></dees-icon>
               Export
             </button>
           </div>
@@ -697,7 +697,7 @@ export class SdigContractAudit extends DeesElement {
                 `
               : html`
                   <div class="empty-state">
-                    <dees-icon .iconFA=${'lucide:clock'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Clock'}></dees-icon>
                     <h4>No Events Found</h4>
                     <p>No activity matches your current filters</p>
                   </div>
@@ -714,7 +714,7 @@ export class SdigContractAudit extends DeesElement {
     return html`
       <div class="timeline-item">
         <div class="timeline-dot" style="border-color: ${config.color}; color: ${config.color}">
-          <dees-icon .iconFA=${config.icon}></dees-icon>
+          <dees-icon .icon=${config.icon}></dees-icon>
         </div>
         <div class="timeline-content">
           <div class="timeline-header">
diff --git a/ts_web/elements/sdig-contract-collaboration/sdig-contract-collaboration.ts b/ts_web/elements/sdig-contract-collaboration/sdig-contract-collaboration.ts
index 5cd7544..e8d2a8c 100644
--- a/ts_web/elements/sdig-contract-collaboration/sdig-contract-collaboration.ts
+++ b/ts_web/elements/sdig-contract-collaboration/sdig-contract-collaboration.ts
@@ -765,7 +765,7 @@ export class SdigContractCollaboration extends DeesElement {
             </div>
           </div>
           <button class="share-btn">
-            <dees-icon .iconFA=${'lucide:share-2'}></dees-icon>
+            <dees-icon .icon=${'lucide:Share2'}></dees-icon>
             Share
           </button>
         </div>
@@ -774,7 +774,7 @@ export class SdigContractCollaboration extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:message-circle'}></dees-icon>
+              <dees-icon .icon=${'lucide:MessageCircle'}></dees-icon>
               Comments
               ${openComments > 0 ? html`<span class="section-badge">${openComments} open</span>` : ''}
             </div>
@@ -813,7 +813,7 @@ export class SdigContractCollaboration extends DeesElement {
                       @input=${(e: Event) => (this.newCommentText = (e.target as HTMLTextAreaElement).value)}
                     ></textarea>
                     <button class="btn btn-primary" @click=${this.handleAddComment}>
-                      <dees-icon .iconFA=${'lucide:send'}></dees-icon>
+                      <dees-icon .icon=${'lucide:Send'}></dees-icon>
                       Comment
                     </button>
                   </div>
@@ -829,7 +829,7 @@ export class SdigContractCollaboration extends DeesElement {
                 `
               : html`
                   <div class="empty-state" style="margin-top: 16px;">
-                    <dees-icon .iconFA=${'lucide:message-square'}></dees-icon>
+                    <dees-icon .icon=${'lucide:MessageSquare'}></dees-icon>
                     <h4>No Comments</h4>
                     <p>Start a discussion by adding a comment</p>
                   </div>
@@ -841,7 +841,7 @@ export class SdigContractCollaboration extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:git-pull-request'}></dees-icon>
+              <dees-icon .icon=${'lucide:GitPullRequest'}></dees-icon>
               Suggestions
               ${pendingSuggestions > 0 ? html`<span class="section-badge">${pendingSuggestions} pending</span>` : ''}
             </div>
@@ -855,7 +855,7 @@ export class SdigContractCollaboration extends DeesElement {
                 `
               : html`
                   <div class="empty-state">
-                    <dees-icon .iconFA=${'lucide:edit-3'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Edit3'}></dees-icon>
                     <h4>No Suggestions</h4>
                     <p>Suggested changes will appear here</p>
                   </div>
@@ -883,7 +883,7 @@ export class SdigContractCollaboration extends DeesElement {
                   class="btn btn-ghost btn-sm"
                   @click=${() => this.handleResolveComment(comment.id)}
                 >
-                  <dees-icon .iconFA=${comment.resolved ? 'lucide:rotate-ccw' : 'lucide:check'}></dees-icon>
+                  <dees-icon .icon=${comment.resolved ? 'lucide:RotateCcw' : 'lucide:Check'}></dees-icon>
                   ${comment.resolved ? 'Reopen' : 'Resolve'}
                 </button>
               `
@@ -893,7 +893,7 @@ export class SdigContractCollaboration extends DeesElement {
         ${comment.anchorText
           ? html`
               <div class="comment-anchor">
-                <dees-icon .iconFA=${'lucide:link'}></dees-icon>
+                <dees-icon .icon=${'lucide:Link'}></dees-icon>
                 ${comment.anchorText}
               </div>
             `
@@ -941,7 +941,7 @@ export class SdigContractCollaboration extends DeesElement {
             </div>
           </div>
           <div class="suggestion-status ${suggestion.status}">
-            <dees-icon .iconFA=${suggestion.status === 'pending' ? 'lucide:clock' : suggestion.status === 'accepted' ? 'lucide:check' : 'lucide:x'}></dees-icon>
+            <dees-icon .icon=${suggestion.status === 'pending' ? 'lucide:Clock' : suggestion.status === 'accepted' ? 'lucide:Check' : 'lucide:X'}></dees-icon>
             ${suggestion.status.charAt(0).toUpperCase() + suggestion.status.slice(1)}
           </div>
         </div>
@@ -956,11 +956,11 @@ export class SdigContractCollaboration extends DeesElement {
           ? html`
               <div class="suggestion-actions">
                 <button class="btn btn-success btn-sm" @click=${() => this.handleAcceptSuggestion(suggestion.id)}>
-                  <dees-icon .iconFA=${'lucide:check'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Check'}></dees-icon>
                   Accept
                 </button>
                 <button class="btn btn-danger btn-sm" @click=${() => this.handleRejectSuggestion(suggestion.id)}>
-                  <dees-icon .iconFA=${'lucide:x'}></dees-icon>
+                  <dees-icon .icon=${'lucide:X'}></dees-icon>
                   Reject
                 </button>
               </div>
diff --git a/ts_web/elements/sdig-contract-content/sdig-contract-content.ts b/ts_web/elements/sdig-contract-content/sdig-contract-content.ts
index 9f31308..33e1902 100644
--- a/ts_web/elements/sdig-contract-content/sdig-contract-content.ts
+++ b/ts_web/elements/sdig-contract-content/sdig-contract-content.ts
@@ -24,12 +24,12 @@ declare global {
 
 // Paragraph type configuration
 const PARAGRAPH_TYPES = [
-  { value: 'section', label: 'Section', icon: 'lucide:heading' },
-  { value: 'clause', label: 'Clause', icon: 'lucide:file-text' },
-  { value: 'definition', label: 'Definition', icon: 'lucide:book-open' },
-  { value: 'obligation', label: 'Obligation', icon: 'lucide:check-square' },
-  { value: 'condition', label: 'Condition', icon: 'lucide:git-branch' },
-  { value: 'schedule', label: 'Schedule', icon: 'lucide:calendar' },
+  { value: 'section', label: 'Section', icon: 'lucide:Heading' },
+  { value: 'clause', label: 'Clause', icon: 'lucide:FileText' },
+  { value: 'definition', label: 'Definition', icon: 'lucide:BookOpen' },
+  { value: 'obligation', label: 'Obligation', icon: 'lucide:CheckSquare' },
+  { value: 'condition', label: 'Condition', icon: 'lucide:GitBranch' },
+  { value: 'schedule', label: 'Schedule', icon: 'lucide:Calendar' },
 ];
 
 @customElement('sdig-contract-content')
@@ -718,7 +718,7 @@ export class SdigContractContent extends DeesElement {
         <div class="content-toolbar">
           <div class="toolbar-left">
             <div class="search-box">
-              <dees-icon .iconFA=${'lucide:search'}></dees-icon>
+              <dees-icon .icon=${'lucide:Search'}></dees-icon>
               <input
                 type="text"
                 placeholder="Search paragraphs..."
@@ -734,20 +734,20 @@ export class SdigContractContent extends DeesElement {
                 @click=${() => (this.viewMode = 'list')}
                 title="List view"
               >
-                <dees-icon .iconFA=${'lucide:list'}></dees-icon>
+                <dees-icon .icon=${'lucide:List'}></dees-icon>
               </button>
               <button
                 class="view-toggle-btn ${this.viewMode === 'outline' ? 'active' : ''}"
                 @click=${() => (this.viewMode = 'outline')}
                 title="Outline view"
               >
-                <dees-icon .iconFA=${'lucide:layout-list'}></dees-icon>
+                <dees-icon .icon=${'lucide:LayoutList'}></dees-icon>
               </button>
             </div>
             ${!this.readonly
               ? html`
                   <button class="btn btn-primary" @click=${() => this.handleAddParagraph()}>
-                    <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                     Add Paragraph
                   </button>
                 `
@@ -759,7 +759,7 @@ export class SdigContractContent extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:file-text'}></dees-icon>
+              <dees-icon .icon=${'lucide:FileText'}></dees-icon>
               Contract Content
             </div>
             <span class="paragraph-count">${this.contract.paragraphs.length} paragraphs</span>
@@ -777,7 +777,7 @@ export class SdigContractContent extends DeesElement {
                     ? html`
                         <div class="add-paragraph-row">
                           <button class="add-paragraph-btn" @click=${() => this.handleAddParagraph()}>
-                            <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                            <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                             Add paragraph
                           </button>
                         </div>
@@ -786,13 +786,13 @@ export class SdigContractContent extends DeesElement {
                 `
               : html`
                   <div class="empty-state">
-                    <dees-icon .iconFA=${'lucide:file-plus'}></dees-icon>
+                    <dees-icon .icon=${'lucide:FilePlus'}></dees-icon>
                     <h4>No Paragraphs Yet</h4>
                     <p>Start building your contract by adding paragraphs. Each paragraph can contain clauses, definitions, or obligations.</p>
                     ${!this.readonly
                       ? html`
                           <button class="btn btn-primary" @click=${() => this.handleAddParagraph()}>
-                            <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                            <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                             Add First Paragraph
                           </button>
                         `
@@ -819,7 +819,7 @@ export class SdigContractContent extends DeesElement {
         ${!this.readonly
           ? html`
               <div class="paragraph-drag-handle">
-                <dees-icon .iconFA=${'lucide:grip-vertical'}></dees-icon>
+                <dees-icon .icon=${'lucide:GripVertical'}></dees-icon>
               </div>
             `
           : ''}
@@ -880,28 +880,28 @@ export class SdigContractContent extends DeesElement {
                   @click=${(e: Event) => { e.stopPropagation(); this.handleEditParagraph(paragraph); }}
                   title="Edit"
                 >
-                  <dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Pencil'}></dees-icon>
                 </button>
                 <button
                   class="btn btn-ghost"
                   @click=${(e: Event) => { e.stopPropagation(); this.handleMoveParagraph(paragraph.uniqueId, 'up'); }}
                   title="Move up"
                 >
-                  <dees-icon .iconFA=${'lucide:chevron-up'}></dees-icon>
+                  <dees-icon .icon=${'lucide:ChevronUp'}></dees-icon>
                 </button>
                 <button
                   class="btn btn-ghost"
                   @click=${(e: Event) => { e.stopPropagation(); this.handleMoveParagraph(paragraph.uniqueId, 'down'); }}
                   title="Move down"
                 >
-                  <dees-icon .iconFA=${'lucide:chevron-down'}></dees-icon>
+                  <dees-icon .icon=${'lucide:ChevronDown'}></dees-icon>
                 </button>
                 <button
                   class="btn btn-ghost btn-danger"
                   @click=${(e: Event) => { e.stopPropagation(); this.handleDeleteParagraph(paragraph.uniqueId); }}
                   title="Delete"
                 >
-                  <dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Trash2'}></dees-icon>
                 </button>
               </div>
             `
diff --git a/ts_web/elements/sdig-contract-header/sdig-contract-header.ts b/ts_web/elements/sdig-contract-header/sdig-contract-header.ts
index 8a2e5e7..cf2ac7d 100644
--- a/ts_web/elements/sdig-contract-header/sdig-contract-header.ts
+++ b/ts_web/elements/sdig-contract-header/sdig-contract-header.ts
@@ -455,7 +455,7 @@ export class SdigContractHeader extends DeesElement {
                 <span class="status-dot"></span>
                 ${this.formatStatus(status)}
                 ${!this.readonly
-                  ? html`<dees-icon .iconFA=${'lucide:chevron-down'} style="font-size: 14px;"></dees-icon>`
+                  ? html`<dees-icon .icon=${'lucide:ChevronDown'} style="font-size: 14px;"></dees-icon>`
                   : ''}
               </button>
 
@@ -491,13 +491,13 @@ export class SdigContractHeader extends DeesElement {
 
             <div class="quick-actions">
               <button class="action-btn" @click=${this.handleExport} title="Export">
-                <dees-icon .iconFA=${'lucide:download'}></dees-icon>
+                <dees-icon .icon=${'lucide:Download'}></dees-icon>
               </button>
               <button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">
-                <dees-icon .iconFA=${'lucide:copy'}></dees-icon>
+                <dees-icon .icon=${'lucide:Copy'}></dees-icon>
               </button>
               <button class="action-btn" @click=${this.handleShare} title="Share">
-                <dees-icon .iconFA=${'lucide:share-2'}></dees-icon>
+                <dees-icon .icon=${'lucide:Share2'}></dees-icon>
               </button>
             </div>
           </div>
diff --git a/ts_web/elements/sdig-contract-metadata/sdig-contract-metadata.ts b/ts_web/elements/sdig-contract-metadata/sdig-contract-metadata.ts
index b8cea34..9a0f702 100644
--- a/ts_web/elements/sdig-contract-metadata/sdig-contract-metadata.ts
+++ b/ts_web/elements/sdig-contract-metadata/sdig-contract-metadata.ts
@@ -448,7 +448,7 @@ export class SdigContractMetadata extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:info'}></dees-icon>
+              <dees-icon .icon=${'lucide:Info'}></dees-icon>
               Basic Information
             </div>
           </div>
@@ -555,7 +555,7 @@ export class SdigContractMetadata extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:globe'}></dees-icon>
+              <dees-icon .icon=${'lucide:Globe'}></dees-icon>
               Language Settings
             </div>
           </div>
@@ -606,7 +606,7 @@ export class SdigContractMetadata extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:scale'}></dees-icon>
+              <dees-icon .icon=${'lucide:Scale'}></dees-icon>
               Governing Law & Jurisdiction
             </div>
           </div>
@@ -758,7 +758,7 @@ export class SdigContractMetadata extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:link'}></dees-icon>
+              <dees-icon .icon=${'lucide:Link'}></dees-icon>
               References & Integration
             </div>
           </div>
diff --git a/ts_web/elements/sdig-contract-parties/sdig-contract-parties.ts b/ts_web/elements/sdig-contract-parties/sdig-contract-parties.ts
index a6241b1..f008858 100644
--- a/ts_web/elements/sdig-contract-parties/sdig-contract-parties.ts
+++ b/ts_web/elements/sdig-contract-parties/sdig-contract-parties.ts
@@ -24,13 +24,13 @@ declare global {
 
 // Party role display configuration
 const PARTY_ROLES: Array<{ value: plugins.sdInterfaces.TPartyRole; label: string; icon: string }> = [
-  { value: 'signer', label: 'Signer', icon: 'lucide:pen-tool' },
-  { value: 'witness', label: 'Witness', icon: 'lucide:eye' },
-  { value: 'notary', label: 'Notary', icon: 'lucide:stamp' },
-  { value: 'cc', label: 'CC (Copy)', icon: 'lucide:mail' },
-  { value: 'approver', label: 'Approver', icon: 'lucide:check-circle' },
-  { value: 'guarantor', label: 'Guarantor', icon: 'lucide:shield' },
-  { value: 'beneficiary', label: 'Beneficiary', icon: 'lucide:user-check' },
+  { value: 'signer', label: 'Signer', icon: 'lucide:PenTool' },
+  { value: 'witness', label: 'Witness', icon: 'lucide:Eye' },
+  { value: 'notary', label: 'Notary', icon: 'lucide:Stamp' },
+  { value: 'cc', label: 'CC (Copy)', icon: 'lucide:Mail' },
+  { value: 'approver', label: 'Approver', icon: 'lucide:CheckCircle' },
+  { value: 'guarantor', label: 'Guarantor', icon: 'lucide:Shield' },
+  { value: 'beneficiary', label: 'Beneficiary', icon: 'lucide:UserCheck' },
 ];
 
 const SIGNING_DEPENDENCIES: Array<{ value: plugins.sdInterfaces.TSigningDependency; label: string }> = [
@@ -550,13 +550,13 @@ export class SdigContractParties extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:users-2'}></dees-icon>
+              <dees-icon .icon=${'lucide:Users2'}></dees-icon>
               Available Roles
             </div>
             ${!this.readonly
               ? html`
                   <button class="btn btn-secondary btn-sm" @click=${this.handleAddRole}>
-                    <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                     Add Role
                   </button>
                 `
@@ -571,7 +571,7 @@ export class SdigContractParties extends DeesElement {
                 `
               : html`
                   <div class="empty-state">
-                    <dees-icon .iconFA=${'lucide:users'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Users'}></dees-icon>
                     <h4>No Roles Defined</h4>
                     <p>Add roles to define the types of parties in this contract</p>
                   </div>
@@ -583,13 +583,13 @@ export class SdigContractParties extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:user-plus'}></dees-icon>
+              <dees-icon .icon=${'lucide:UserPlus'}></dees-icon>
               Involved Parties (${parties.length})
             </div>
             ${!this.readonly
               ? html`
                   <button class="btn btn-primary btn-sm" @click=${this.handleAddParty}>
-                    <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                     Add Party
                   </button>
                 `
@@ -604,7 +604,7 @@ export class SdigContractParties extends DeesElement {
                 `
               : html`
                   <div class="empty-state">
-                    <dees-icon .iconFA=${'lucide:user-plus'}></dees-icon>
+                    <dees-icon .icon=${'lucide:UserPlus'}></dees-icon>
                     <h4>No Parties Added</h4>
                     <p>Add parties who will be involved in this contract</p>
                   </div>
@@ -621,7 +621,7 @@ export class SdigContractParties extends DeesElement {
         <div class="role-header">
           <div class="role-name">
             <dees-icon
-              .iconFA=${role.icon || 'lucide:user'}
+              .icon=${role.icon || 'lucide:User'}
               style="color: ${role.displayColor || 'inherit'}"
             ></dees-icon>
             ${role.name}
@@ -633,7 +633,7 @@ export class SdigContractParties extends DeesElement {
           ${role.signatureRequired
             ? html`
                 <span class="role-meta-item">
-                  <dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
+                  <dees-icon .icon=${'lucide:PenTool'}></dees-icon>
                   Signature required
                 </span>
               `
@@ -641,7 +641,7 @@ export class SdigContractParties extends DeesElement {
           ${role.defaultSigningOrder > 0
             ? html`
                 <span class="role-meta-item">
-                  <dees-icon .iconFA=${'lucide:list-ordered'}></dees-icon>
+                  <dees-icon .icon=${'lucide:ListOrdered'}></dees-icon>
                   Order: ${role.defaultSigningOrder}
                 </span>
               `
@@ -649,7 +649,7 @@ export class SdigContractParties extends DeesElement {
           ${role.minParties
             ? html`
                 <span class="role-meta-item">
-                  <dees-icon .iconFA=${'lucide:users'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Users'}></dees-icon>
                   Min: ${role.minParties}${role.maxParties ? `, Max: ${role.maxParties}` : ''}
                 </span>
               `
@@ -693,7 +693,7 @@ export class SdigContractParties extends DeesElement {
             ${deliveryEmail
               ? html`
                   <div class="party-detail">
-                    <dees-icon .iconFA=${'lucide:mail'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Mail'}></dees-icon>
                     ${deliveryEmail}
                   </div>
                 `
@@ -701,7 +701,7 @@ export class SdigContractParties extends DeesElement {
             ${deliveryPhone
               ? html`
                   <div class="party-detail">
-                    <dees-icon .iconFA=${'lucide:phone'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Phone'}></dees-icon>
                     ${deliveryPhone}
                   </div>
                 `
@@ -709,7 +709,7 @@ export class SdigContractParties extends DeesElement {
             ${actingAsProxy
               ? html`
                   <div class="party-detail">
-                    <dees-icon .iconFA=${'lucide:users'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Users'}></dees-icon>
                     Acting as proxy
                   </div>
                 `
diff --git a/ts_web/elements/sdig-contract-signatures/sdig-contract-signatures.ts b/ts_web/elements/sdig-contract-signatures/sdig-contract-signatures.ts
index cb2548c..1458ae1 100644
--- a/ts_web/elements/sdig-contract-signatures/sdig-contract-signatures.ts
+++ b/ts_web/elements/sdig-contract-signatures/sdig-contract-signatures.ts
@@ -43,17 +43,17 @@ interface ISignatureField {
 
 // Signature status configuration
 const SIGNATURE_STATUSES = [
-  { value: 'pending', label: 'Pending', color: '#f59e0b', icon: 'lucide:clock' },
-  { value: 'ready', label: 'Ready to Sign', color: '#3b82f6', icon: 'lucide:pen-tool' },
-  { value: 'signed', label: 'Signed', color: '#10b981', icon: 'lucide:check-circle' },
-  { value: 'declined', label: 'Declined', color: '#ef4444', icon: 'lucide:x-circle' },
+  { value: 'pending', label: 'Pending', color: '#f59e0b', icon: 'lucide:Clock' },
+  { value: 'ready', label: 'Ready to Sign', color: '#3b82f6', icon: 'lucide:PenTool' },
+  { value: 'signed', label: 'Signed', color: '#10b981', icon: 'lucide:CheckCircle' },
+  { value: 'declined', label: 'Declined', color: '#ef4444', icon: 'lucide:XCircle' },
 ];
 
 const FIELD_TYPES = [
-  { value: 'signature', label: 'Full Signature', icon: 'lucide:pen-tool' },
-  { value: 'initials', label: 'Initials', icon: 'lucide:type' },
-  { value: 'date', label: 'Date', icon: 'lucide:calendar' },
-  { value: 'text', label: 'Text Field', icon: 'lucide:text-cursor' },
+  { value: 'signature', label: 'Full Signature', icon: 'lucide:PenTool' },
+  { value: 'initials', label: 'Initials', icon: 'lucide:Type' },
+  { value: 'date', label: 'Date', icon: 'lucide:Calendar' },
+  { value: 'text', label: 'Text Field', icon: 'lucide:TextCursor' },
 ];
 
 @customElement('sdig-contract-signatures')
@@ -649,28 +649,28 @@ export class SdigContractSignatures extends DeesElement {
         <div class="summary-row">
           <div class="summary-card">
             <div class="summary-card-icon pending">
-              <dees-icon .iconFA=${'lucide:clock'}></dees-icon>
+              <dees-icon .icon=${'lucide:Clock'}></dees-icon>
             </div>
             <div class="summary-card-value">${stats.pending}</div>
             <div class="summary-card-label">Pending</div>
           </div>
           <div class="summary-card">
             <div class="summary-card-icon ready">
-              <dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
+              <dees-icon .icon=${'lucide:PenTool'}></dees-icon>
             </div>
             <div class="summary-card-value">${stats.ready}</div>
             <div class="summary-card-label">Ready to Sign</div>
           </div>
           <div class="summary-card">
             <div class="summary-card-icon signed">
-              <dees-icon .iconFA=${'lucide:check-circle'}></dees-icon>
+              <dees-icon .icon=${'lucide:CheckCircle'}></dees-icon>
             </div>
             <div class="summary-card-value">${stats.signed}</div>
             <div class="summary-card-label">Signed</div>
           </div>
           <div class="summary-card">
             <div class="summary-card-icon declined">
-              <dees-icon .iconFA=${'lucide:x-circle'}></dees-icon>
+              <dees-icon .icon=${'lucide:XCircle'}></dees-icon>
             </div>
             <div class="summary-card-value">${stats.declined}</div>
             <div class="summary-card-label">Declined</div>
@@ -681,13 +681,13 @@ export class SdigContractSignatures extends DeesElement {
         <div class="section-card">
           <div class="section-header">
             <div class="section-title">
-              <dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
+              <dees-icon .icon=${'lucide:PenTool'}></dees-icon>
               Signature Fields
             </div>
             ${!this.readonly
               ? html`
                   <button class="btn btn-primary" @click=${this.handleAddField}>
-                    <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                     Add Field
                   </button>
                 `
@@ -702,13 +702,13 @@ export class SdigContractSignatures extends DeesElement {
                 `
               : html`
                   <div class="empty-state">
-                    <dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
+                    <dees-icon .icon=${'lucide:PenTool'}></dees-icon>
                     <h4>No Signature Fields</h4>
                     <p>Add signature fields to define where parties should sign the contract</p>
                     ${!this.readonly
                       ? html`
                           <button class="btn btn-primary" @click=${this.handleAddField}>
-                            <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                            <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                             Add Signature Field
                           </button>
                         `
@@ -724,7 +724,7 @@ export class SdigContractSignatures extends DeesElement {
               <div class="section-card">
                 <div class="section-header">
                   <div class="section-title">
-                    <dees-icon .iconFA=${'lucide:users'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Users'}></dees-icon>
                     Signers Progress
                   </div>
                 </div>
@@ -753,24 +753,24 @@ export class SdigContractSignatures extends DeesElement {
         <div class="signing-order-badge">${index + 1}</div>
 
         <div class="field-icon">
-          <dees-icon .iconFA=${typeConfig.icon}></dees-icon>
+          <dees-icon .icon=${typeConfig.icon}></dees-icon>
         </div>
 
         <div class="field-info">
           <div class="field-name">${field.name}</div>
           <div class="field-meta">
             <span class="field-meta-item">
-              <dees-icon .iconFA=${'lucide:user'}></dees-icon>
+              <dees-icon .icon=${'lucide:User'}></dees-icon>
               ${this.getPartyRoleName(field.roleId)}
             </span>
             <span class="type-badge">
-              <dees-icon .iconFA=${typeConfig.icon}></dees-icon>
+              <dees-icon .icon=${typeConfig.icon}></dees-icon>
               ${typeConfig.label}
             </span>
             ${field.required
               ? html`
                   <span class="field-meta-item">
-                    <dees-icon .iconFA=${'lucide:asterisk'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Asterisk'}></dees-icon>
                     Required
                   </span>
                 `
@@ -778,7 +778,7 @@ export class SdigContractSignatures extends DeesElement {
             ${field.signedAt
               ? html`
                   <span class="field-meta-item">
-                    <dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
+                    <dees-icon .icon=${'lucide:Calendar'}></dees-icon>
                     ${this.formatDate(field.signedAt)}
                   </span>
                 `
@@ -787,7 +787,7 @@ export class SdigContractSignatures extends DeesElement {
         </div>
 
         <div class="field-status ${field.status}">
-          <dees-icon .iconFA=${statusConfig.icon}></dees-icon>
+          <dees-icon .icon=${statusConfig.icon}></dees-icon>
           ${statusConfig.label}
         </div>
 
@@ -795,7 +795,7 @@ export class SdigContractSignatures extends DeesElement {
           ? html`
               <div class="field-actions">
                 <button class="btn btn-ghost" @click=${(e: Event) => { e.stopPropagation(); }} title="Edit">
-                  <dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Pencil'}></dees-icon>
                 </button>
                 <button
                   class="btn btn-ghost"
@@ -803,7 +803,7 @@ export class SdigContractSignatures extends DeesElement {
                   title="Delete"
                   style="color: #ef4444;"
                 >
-                  <dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Trash2'}></dees-icon>
                 </button>
               </div>
             `
diff --git a/ts_web/elements/sdig-contract-terms/sdig-contract-terms.ts b/ts_web/elements/sdig-contract-terms/sdig-contract-terms.ts
index 253e0c6..30d50dd 100644
--- a/ts_web/elements/sdig-contract-terms/sdig-contract-terms.ts
+++ b/ts_web/elements/sdig-contract-terms/sdig-contract-terms.ts
@@ -33,9 +33,9 @@ interface ITermTabConfig {
 }
 
 const TERM_TABS: ITermTabConfig[] = [
-  { id: 'financial', label: 'Financial Terms', icon: 'lucide:banknote', description: 'Payment schedules, rates, and penalties' },
-  { id: 'time', label: 'Time Terms', icon: 'lucide:calendar', description: 'Milestones, deadlines, and renewal' },
-  { id: 'obligations', label: 'Obligations', icon: 'lucide:check-square', description: 'Deliverables, SLAs, and warranties' },
+  { id: 'financial', label: 'Financial Terms', icon: 'lucide:Banknote', description: 'Payment schedules, rates, and penalties' },
+  { id: 'time', label: 'Time Terms', icon: 'lucide:Calendar', description: 'Milestones, deadlines, and renewal' },
+  { id: 'obligations', label: 'Obligations', icon: 'lucide:CheckSquare', description: 'Deliverables, SLAs, and warranties' },
 ];
 
 // Extended contract terms interfaces (for future interface updates)
@@ -588,7 +588,7 @@ export class SdigContractTerms extends DeesElement {
                   class="tab-btn ${this.activeTab === tab.id ? 'active' : ''}"
                   @click=${() => this.handleTabChange(tab.id)}
                 >
-                  <dees-icon .iconFA=${tab.icon}></dees-icon>
+                  <dees-icon .icon=${tab.icon}></dees-icon>
                   ${tab.label}
                 </button>
               `
@@ -640,7 +640,7 @@ export class SdigContractTerms extends DeesElement {
           ${!this.readonly
             ? html`
                 <button class="btn btn-secondary" @click=${this.handleAddPayment}>
-                  <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                   Add Payment
                 </button>
               `
@@ -671,7 +671,7 @@ export class SdigContractTerms extends DeesElement {
                           ? html`
                               <td>
                                 <button class="btn btn-ghost btn-sm">
-                                  <dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
+                                  <dees-icon .icon=${'lucide:Pencil'}></dees-icon>
                                 </button>
                               </td>
                             `
@@ -684,7 +684,7 @@ export class SdigContractTerms extends DeesElement {
             `
           : html`
               <div class="empty-state">
-                <dees-icon .iconFA=${'lucide:banknote'}></dees-icon>
+                <dees-icon .icon=${'lucide:Banknote'}></dees-icon>
                 <h4>No Payment Schedule</h4>
                 <p>Add payment terms to track financial obligations</p>
               </div>
@@ -724,7 +724,7 @@ export class SdigContractTerms extends DeesElement {
           ${!this.readonly
             ? html`
                 <button class="btn btn-secondary" @click=${this.handleAddMilestone}>
-                  <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                   Add Milestone
                 </button>
               `
@@ -755,7 +755,7 @@ export class SdigContractTerms extends DeesElement {
                           ? html`
                               <td>
                                 <button class="btn btn-ghost btn-sm">
-                                  <dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
+                                  <dees-icon .icon=${'lucide:Pencil'}></dees-icon>
                                 </button>
                               </td>
                             `
@@ -768,7 +768,7 @@ export class SdigContractTerms extends DeesElement {
             `
           : html`
               <div class="empty-state">
-                <dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
+                <dees-icon .icon=${'lucide:Calendar'}></dees-icon>
                 <h4>No Milestones</h4>
                 <p>Add milestones to track project progress</p>
               </div>
@@ -799,7 +799,7 @@ export class SdigContractTerms extends DeesElement {
 
       <!-- Info banner -->
       <div class="info-banner">
-        <dees-icon .iconFA=${'lucide:info'}></dees-icon>
+        <dees-icon .icon=${'lucide:Info'}></dees-icon>
         <div class="info-banner-content">
           <div class="info-banner-title">Contractual Obligations</div>
           <div class="info-banner-text">
@@ -818,7 +818,7 @@ export class SdigContractTerms extends DeesElement {
           ${!this.readonly
             ? html`
                 <button class="btn btn-secondary" @click=${this.handleAddObligation}>
-                  <dees-icon .iconFA=${'lucide:plus'}></dees-icon>
+                  <dees-icon .icon=${'lucide:Plus'}></dees-icon>
                   Add Obligation
                 </button>
               `
@@ -849,7 +849,7 @@ export class SdigContractTerms extends DeesElement {
                           ? html`
                               <td>
                                 <button class="btn btn-ghost btn-sm">
-                                  <dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
+                                  <dees-icon .icon=${'lucide:Pencil'}></dees-icon>
                                 </button>
                               </td>
                             `
@@ -862,7 +862,7 @@ export class SdigContractTerms extends DeesElement {
             `
           : html`
               <div class="empty-state">
-                <dees-icon .iconFA=${'lucide:check-square'}></dees-icon>
+                <dees-icon .icon=${'lucide:CheckSquare'}></dees-icon>
                 <h4>No Obligations</h4>
                 <p>Add obligations to track party responsibilities</p>
               </div>
diff --git a/ts_web/elements/sdig-contracteditor/sdig-contracteditor.ts b/ts_web/elements/sdig-contracteditor/sdig-contracteditor.ts
index 3901158..46b9073 100644
--- a/ts_web/elements/sdig-contracteditor/sdig-contracteditor.ts
+++ b/ts_web/elements/sdig-contracteditor/sdig-contracteditor.ts
@@ -34,6 +34,7 @@ import '../sdig-contract-signatures/sdig-contract-signatures.js';
 import '../sdig-contract-attachments/sdig-contract-attachments.js';
 import '../sdig-contract-collaboration/sdig-contract-collaboration.js';
 import '../sdig-contract-audit/sdig-contract-audit.js';
+import '../sdig-collaboration-sidebar/sdig-collaboration-sidebar.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -338,6 +339,11 @@ export class SdigContracteditor extends DeesElement {
         color: ${cssManager.bdTheme('#111111', '#fafafa')};
       }
 
+      .btn-ghost.active {
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        color: ${cssManager.bdTheme('#111111', '#fafafa')};
+      }
+
       .btn:disabled {
         opacity: 0.5;
         cursor: not-allowed;
@@ -490,6 +496,40 @@ export class SdigContracteditor extends DeesElement {
     this.store?.redo();
   }
 
+  private handleCommentClick(e: CustomEvent) {
+    // Navigate to collaboration section and highlight comment
+    this.store?.setActiveSection('collaboration');
+    this.dispatchEvent(
+      new CustomEvent('comment-focus', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleSuggestionClick(e: CustomEvent) {
+    // Navigate to collaboration section and highlight suggestion
+    this.store?.setActiveSection('collaboration');
+    this.dispatchEvent(
+      new CustomEvent('suggestion-focus', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleSidebarAddComment(e: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('comment-added', {
+        detail: e.detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   // ============================================================================
   // PUBLIC API
   // ============================================================================
@@ -691,7 +731,7 @@ export class SdigContracteditor extends DeesElement {
   private renderPlaceholder(sectionConfig: typeof EDITOR_SECTIONS[0] | undefined, message: string): TemplateResult {
     return html`
       <div class="section-placeholder">
-        <dees-icon .iconFA=${sectionConfig?.icon || 'lucide:file'}></dees-icon>
+        <dees-icon .icon=${sectionConfig?.icon || 'lucide:File'}></dees-icon>
         <h3>${sectionConfig?.label || 'Section'}</h3>
         <p>${message}</p>
       </div>
@@ -757,10 +797,17 @@ export class SdigContracteditor extends DeesElement {
                 `
               : ''}
             <button class="btn btn-ghost" @click=${this.handleUndo} ?disabled=${!this.store?.canUndo()}>
-              <dees-icon .iconFA=${'lucide:undo-2'}></dees-icon>
+              <dees-icon .icon=${'lucide:Undo2'}></dees-icon>
             </button>
             <button class="btn btn-ghost" @click=${this.handleRedo} ?disabled=${!this.store?.canRedo()}>
-              <dees-icon .iconFA=${'lucide:redo-2'}></dees-icon>
+              <dees-icon .icon=${'lucide:Redo2'}></dees-icon>
+            </button>
+            <button
+              class="btn btn-ghost ${this.showSidebar ? 'active' : ''}"
+              @click=${() => (this.showSidebar = !this.showSidebar)}
+              title="${this.showSidebar ? 'Hide sidebar' : 'Show sidebar'}"
+            >
+              <dees-icon .icon=${'lucide:PanelRight'}></dees-icon>
             </button>
           </div>
         </div>
@@ -774,7 +821,7 @@ export class SdigContracteditor extends DeesElement {
                 @click=${() => this.handleSectionChange(section.id)}
                 ?disabled=${section.disabled}
               >
-                <dees-icon .iconFA=${section.icon}></dees-icon>
+                <dees-icon .icon=${section.icon}></dees-icon>
                 <span>${section.label}</span>
                 ${section.badge
                   ? html`<span class="nav-badge">${section.badge}</span>`
@@ -792,7 +839,12 @@ export class SdigContracteditor extends DeesElement {
           ${this.showSidebar
             ? html`
                 <aside class="editor-sidebar">
-                  <!-- Sidebar content - collaboration panel -->
+                  <sdig-collaboration-sidebar
+                    .contract=${contract}
+                    @comment-click=${this.handleCommentClick}
+                    @suggestion-click=${this.handleSuggestionClick}
+                    @add-comment=${this.handleSidebarAddComment}
+                  ></sdig-collaboration-sidebar>
                 </aside>
               `
             : ''}
diff --git a/ts_web/elements/sdig-contracteditor/types.ts b/ts_web/elements/sdig-contracteditor/types.ts
index f56aa38..83b42d8 100644
--- a/ts_web/elements/sdig-contracteditor/types.ts
+++ b/ts_web/elements/sdig-contracteditor/types.ts
@@ -37,14 +37,14 @@ export interface IEditorSectionConfig {
  * Default section configurations
  */
 export const EDITOR_SECTIONS: IEditorSectionConfig[] = [
-  { id: 'overview', label: 'Overview', icon: 'lucide:file-text' },
-  { id: 'parties', label: 'Parties & Roles', icon: 'lucide:users' },
-  { id: 'content', label: 'Content', icon: 'lucide:file-edit' },
-  { id: 'terms', label: 'Terms', icon: 'lucide:calculator' },
-  { id: 'signatures', label: 'Signatures', icon: 'lucide:pen-tool' },
-  { id: 'attachments', label: 'Attachments', icon: 'lucide:paperclip' },
-  { id: 'collaboration', label: 'Collaboration', icon: 'lucide:message-circle' },
-  { id: 'audit', label: 'Audit & History', icon: 'lucide:history' },
+  { id: 'overview', label: 'Overview', icon: 'lucide:FileText' },
+  { id: 'parties', label: 'Parties & Roles', icon: 'lucide:Users' },
+  { id: 'content', label: 'Content', icon: 'lucide:FileEdit' },
+  { id: 'terms', label: 'Terms', icon: 'lucide:Calculator' },
+  { id: 'signatures', label: 'Signatures', icon: 'lucide:PenTool' },
+  { id: 'attachments', label: 'Attachments', icon: 'lucide:Paperclip' },
+  { id: 'collaboration', label: 'Collaboration', icon: 'lucide:MessageCircle' },
+  { id: 'audit', label: 'Audit & History', icon: 'lucide:History' },
 ];
 
 // ============================================================================