diff --git a/frontend/src/components/ExpertButton.vue b/frontend/src/components/ExpertButton.vue
index d950f3bbe5..90a4485f46 100644
--- a/frontend/src/components/ExpertButton.vue
+++ b/frontend/src/components/ExpertButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="expert-button-wrapper flex items-center justify-center h-full px-3" style="height: 60px;">
+    <div v-if="!isExpertDrawerOpen" class="expert-button-wrapper flex items-center justify-center h-full px-3" style="height: 60px;">
         <button
             class="expert-button flex items-center gap-1.5 justify-center rounded-md px-[9px] py-[6px] font-bold text-[0.85rem] leading-[20px] text-gray-800 whitespace-nowrap transition-colors"
             data-el="expert-button"
@@ -19,7 +19,10 @@ export default {
     name: 'ExpertButton',
     components: {},
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer'])
+        ...mapState('ux/drawers', ['rightDrawer']),
+        isExpertDrawerOpen () {
+            return this.rightDrawer.state && this.rightDrawer.component?.name === 'ExpertDrawer'
+        }
     },
     methods: {
         ...mapActions('ux/drawers', ['closeRightDrawer']),
@@ -45,8 +48,8 @@ export default {
     animation: gradient-border-rotate 4s linear infinite;
 
     &:hover {
-        background: linear-gradient(#f9fafb, #f9fafb) padding-box,
-                    linear-gradient(135deg, $ff-red-700, #4038d5, $ff-red-700) border-box;
+        border: 2px solid transparent;
+        margin: -1px;
     }
 }
 
diff --git a/frontend/src/components/TextCopier.vue b/frontend/src/components/TextCopier.vue
index 272e18892a..d0f28b25d1 100644
--- a/frontend/src/components/TextCopier.vue
+++ b/frontend/src/components/TextCopier.vue
@@ -5,19 +5,21 @@
                 <span class="text">{{ text }}</span>
             </slot>
         </span>
-        <DuplicateIcon v-if="text.length" class="ff-icon" @click="copyPath" @click.prevent.stop />
-        <span ref="copied" class="ff-copied" :class="{ 'ff-copied-left': promptPosition === 'left'}">Copied!</span>
+        <button v-if="text.length" class="ff-icon-button" @click="copyPath">
+            <DuplicateIcon v-if="!copied" class="ff-icon" />
+            <CheckIcon v-else class="ff-icon ff-icon-check" />
+        </button>
     </span>
 </template>
 
 <script>
-import { DuplicateIcon } from '@heroicons/vue/outline'
+import { CheckIcon, DuplicateIcon } from '@heroicons/vue/outline'
 
 import Alert from '../services/alerts.js'
 
 export default {
     name: 'TextCopier',
-    components: { DuplicateIcon },
+    components: { DuplicateIcon, CheckIcon },
     props: {
         text: {
             required: true,
@@ -46,20 +48,42 @@ export default {
         }
     },
     emits: ['copied'],
+    data () {
+        return {
+            copied: false
+        }
+    },
     methods: {
-        copyPath () {
-            navigator.clipboard.writeText(this.text)
+        async copyPath () {
+            try {
+                // Try modern clipboard API first
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    await navigator.clipboard.writeText(this.text)
+                } else {
+                    // Fallback for non-secure contexts (HTTP, not HTTPS)
+                    const textArea = document.createElement('textarea')
+                    textArea.value = this.text
+                    textArea.style.position = 'fixed'
+                    textArea.style.left = '-999999px'
+                    textArea.style.top = '-999999px'
+                    document.body.appendChild(textArea)
+                    textArea.focus()
+                    textArea.select()
+                    document.execCommand('copy')
+                    document.body.removeChild(textArea)
+                }
 
-            if (this.confirmationType === 'alert') {
-                Alert.emit('Copied to Clipboard', 'confirmation')
-            } else {
-                // show "Copied" notification
-                this.$refs.copied.style.display = 'inline'
-                // hide after 500ms
-                setTimeout(() => {
-                    this.$refs.copied.style.display = 'none'
-                }, 500)
-                this.$emit('copied')
+                if (this.confirmationType === 'alert') {
+                    Alert.emit('Copied to Clipboard', 'confirmation')
+                } else {
+                    this.copied = true
+                    setTimeout(() => { this.copied = false }, 2000)
+                    this.$emit('copied')
+                }
+            } catch (err) {
+                console.error('Failed to copy to clipboard:', err)
+                // Don't show alert to avoid inject() error
+                // Just keep the icon in copy state (don't show checkmark)
             }
         }
     }
@@ -75,6 +99,35 @@ export default {
   &:hover {
     cursor: pointer;
   }
+  .ff-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: $ff-grey-600;
+
+    &:hover {
+      color: $ff-indigo-600;
+      background-color: $ff-indigo-50;
+    }
+
+    &:active {
+      background-color: $ff-indigo-100;
+    }
+
+    .ff-icon {
+      pointer-events: none;
+    }
+
+    .ff-icon-check {
+      color: $ff-green-600;
+    }
+  }
   .ff-copied {
     background-color: black;
     color: white;
diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
index 3f1ddee03d..253cbabaff 100644
--- a/frontend/src/components/drawers/RightDrawer.vue
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -2,9 +2,14 @@
     <section
         id="right-drawer"
         v-click-outside="{handler: closeDrawer, exclude: ['right-drawer']}"
-        :class="{open: rightDrawer.state, wider: rightDrawer.wider, fixed: rightDrawer.fixed}"
+        :class="{open: rightDrawer.state, wider: rightDrawer.wider, fixed: rightDrawer.fixed, resizing: isResizing, 'manually-resized': hasManuallyResized, pinning: isPinning, opening: isOpening, closing: isClosing}"
+        :style="drawerStyle"
         data-el="right-drawer"
     >
+        <div
+            class="resize-bar"
+            @mousedown="startResize"
+        />
         <div v-if="rightDrawer?.header" class="header flex items-center justify-between p-4 border-b gap-2">
             <div class="title clipped-overflow" data-el="right-drawer-header-title">
                 <h1 class="text-xl font-semibold mb-0" :title="rightDrawer.header.title">{{ rightDrawer.header.title }}</h1>
@@ -38,10 +43,40 @@
 <script>
 import { mapActions, mapState } from 'vuex'
 
+const DRAWER_MIN_WIDTH = 310
+const DRAWER_DEFAULT_WIDTH = 400
+const DRAWER_MAX_VIEWPORT_MARGIN = 200
+const DRAWER_MAX_WIDTH_RATIO = 0.9
+const DRAWER_MAX_PINNED_WIDTH_RATIO = 0.5
+const VIEWPORT_PIN_THRESHOLD = 768
+
 export default {
     name: 'RightDrawer',
+    provide () {
+        return {
+            togglePinWithWidth: this.togglePinWithWidth,
+            shouldAllowPinning: () => this.shouldAllowPinning
+        }
+    },
+    data () {
+        return {
+            drawerWidth: DRAWER_DEFAULT_WIDTH,
+            isResizing: false,
+            hasManuallyResized: false,
+            viewportWidth: window.innerWidth,
+            resizeDebounceTimer: null,
+            isPinning: false,
+            isOpening: false,
+            isClosing: false,
+            resizeStartX: 0,
+            resizeStartWidth: 0
+        }
+    },
     computed: {
         ...mapState('ux/drawers', ['rightDrawer']),
+        shouldAllowPinning () {
+            return this.viewportWidth >= VIEWPORT_PIN_THRESHOLD
+        },
         actions () {
             return (this.rightDrawer?.header?.actions ?? [])
                 .filter(action => {
@@ -51,22 +86,287 @@ export default {
 
                     return !action.hidden
                 })
+        },
+        drawerStyle () {
+            // Only apply inline width on larger viewports or when manually resized/pinned
+            // On small viewports (< 480px), let CSS handle the width for responsiveness
+            // Also apply during closing to maintain width during slide-out animation
+            if ((this.rightDrawer.state || this.isClosing) && (this.viewportWidth >= 480 || this.hasManuallyResized || this.rightDrawer.fixed)) {
+                return {
+                    width: `${this.drawerWidth}px`
+                }
+            }
+            return {}
         }
     },
     watch: {
         'rightDrawer.state': {
-            handler (isOpen) {
-                const onEsc = (e) => e.key === 'Escape' && this.closeRightDrawer()
-                isOpen ? window.addEventListener('keydown', onEsc) : window.removeEventListener('keydown', onEsc)
+            handler (isOpen, wasOpen) {
+                // Set opening flag when drawer opens
+                if (isOpen && !wasOpen) {
+                    this.isOpening = true
+                    this.isClosing = false
+                    // Clear opening flag after slide animation completes
+                    setTimeout(() => {
+                        this.isOpening = false
+                    }, 350)
+                }
+
+                // Set closing flag when drawer closes
+                if (!isOpen && wasOpen) {
+                    this.isClosing = true
+                    // Clear closing flag after slide animation completes
+                    setTimeout(() => {
+                        this.isClosing = false
+                    }, 350)
+                }
+
+                // Reset manual resize flag when drawer closes to prevent width expansion
+                if (!isOpen) {
+                    this.hasManuallyResized = false
+                    this.isOpening = false
+                }
+
+                const onEsc = (e) => {
+                    // Don't close on ESC if drawer is pinned
+                    if (e.key === 'Escape' && !this.rightDrawer.pinned) {
+                        this.closeRightDrawer()
+                    }
+                }
+                if (isOpen) {
+                    window.addEventListener('keydown', onEsc)
+                } else {
+                    window.removeEventListener('keydown', onEsc)
+                }
+            }
+        },
+        'rightDrawer.fixed': {
+            handler (isFixed, wasFixed) {
+                if (!isFixed) {
+                    // Reset to default width when unpinning
+                    this.drawerWidth = DRAWER_DEFAULT_WIDTH
+                }
+                // When pinning, width is captured in togglePinWithWidth method
             }
+        },
+        'rightDrawer.wider': {
+            handler (shouldBeWider) {
+                if (shouldBeWider) {
+                    this.$nextTick(() => {
+                        this.autoWidenDrawer()
+                    })
+                }
+            },
+            immediate: true
+        }
+    },
+    mounted () {
+        // Add viewport resize listener
+        window.addEventListener('resize', this.onViewportResize)
+    },
+    beforeUnmount () {
+        // Clean up resize listeners
+        window.removeEventListener('resize', this.onViewportResize)
+        document.removeEventListener('mousemove', this.handleResize)
+        document.removeEventListener('mouseup', this.stopResize)
+        if (this.resizeDebounceTimer) {
+            clearTimeout(this.resizeDebounceTimer)
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
+        ...mapActions('ux/drawers', ['closeRightDrawer', 'togglePinDrawer']),
         closeDrawer () {
             if (this.rightDrawer.state && this.rightDrawer.closeOnClickOutside) {
                 this.closeRightDrawer()
             }
+        },
+        onViewportResize () {
+            // Debounce resize events
+            if (this.resizeDebounceTimer) {
+                clearTimeout(this.resizeDebounceTimer)
+            }
+            this.resizeDebounceTimer = setTimeout(() => {
+                this.handleViewportResize()
+            }, 300)
+        },
+        handleViewportResize () {
+            this.viewportWidth = window.innerWidth
+
+            // Reset manual resize flag on small viewports where CSS should control width
+            if (this.viewportWidth < 480) {
+                this.hasManuallyResized = false
+                this.drawerWidth = DRAWER_DEFAULT_WIDTH
+            }
+
+            // If viewport is too small and drawer is pinned, auto-unpin
+            if (this.viewportWidth < VIEWPORT_PIN_THRESHOLD && this.rightDrawer.fixed) {
+                this.togglePinDrawer()
+                return
+            }
+
+            // If drawer is pinned, enforce 50% max width constraint
+            if (this.rightDrawer.fixed) {
+                const maxPinnedWidth = this.viewportWidth * DRAWER_MAX_PINNED_WIDTH_RATIO
+                if (this.drawerWidth > maxPinnedWidth) {
+                    this.drawerWidth = maxPinnedWidth
+                }
+            } else if (this.viewportWidth >= 480) {
+                // For overlay mode on viewports >= 480px, enforce max width constraint
+                // (Below 480px, CSS handles the width)
+                let maxWidth
+
+                if (this.viewportWidth >= VIEWPORT_PIN_THRESHOLD) {
+                    // Large viewports: apply both 90% and viewport margin constraints
+                    maxWidth = Math.min(
+                        this.viewportWidth * DRAWER_MAX_WIDTH_RATIO,
+                        this.viewportWidth - DRAWER_MAX_VIEWPORT_MARGIN
+                    )
+                } else {
+                    // Medium viewports (480-767px): only apply 90% constraint
+                    maxWidth = this.viewportWidth * DRAWER_MAX_WIDTH_RATIO
+                }
+
+                if (this.drawerWidth > maxWidth) {
+                    this.drawerWidth = maxWidth
+                }
+            }
+        },
+        togglePinWithWidth () {
+            if (!this.rightDrawer.fixed && this.$el) {
+                // Capture the current actual width to maintain visual continuity
+                const actualWidth = this.$el.getBoundingClientRect().width
+
+                // Apply pinned mode constraint (50% max width)
+                const maxPinnedWidth = this.viewportWidth * DRAWER_MAX_PINNED_WIDTH_RATIO
+                const constrainedWidth = Math.min(actualWidth, maxPinnedWidth)
+                const needsResize = actualWidth > maxPinnedWidth
+
+                if (needsResize) {
+                    // Drawer needs to shrink - animate the resize first
+                    this.drawerWidth = constrainedWidth
+
+                    // Wait for resize animation to complete (~300ms based on CSS transition)
+                    setTimeout(() => {
+                        // Now disable transitions briefly for the pin state change
+                        this.isPinning = true
+
+                        this.$nextTick(() => {
+                            this.togglePinDrawer()
+
+                            // Re-enable transitions
+                            setTimeout(() => {
+                                this.isPinning = false
+                            }, 50)
+                        })
+                    }, 300)
+                } else {
+                    // No resize needed - use original logic
+                    this.drawerWidth = constrainedWidth
+
+                    // Disable transitions temporarily to prevent jump
+                    this.isPinning = true
+
+                    // Wait a frame for the width to be applied
+                    this.$nextTick(() => {
+                        this.togglePinDrawer()
+
+                        // Re-enable transitions after a brief delay
+                        setTimeout(() => {
+                            this.isPinning = false
+                        }, 50)
+                    })
+                }
+            } else {
+                this.togglePinDrawer()
+            }
+        },
+        autoWidenDrawer () {
+            const viewportWidth = window.innerWidth
+
+            // Calculate target width (45vw, same as CSS .wider class)
+            const targetWidth = viewportWidth * 0.45
+
+            // Calculate max allowed width
+            const maxWidth = Math.min(
+                viewportWidth * DRAWER_MAX_WIDTH_RATIO, // 90%
+                viewportWidth - DRAWER_MAX_VIEWPORT_MARGIN // viewport - 200px
+            )
+
+            // Only widen if current width is less than target
+            const newWidth = Math.min(targetWidth, maxWidth)
+            if (this.drawerWidth < newWidth) {
+                this.drawerWidth = newWidth
+            }
+        },
+        startResize (event) {
+            event.preventDefault()
+
+            // Capture the current actual displayed width and mouse position
+            if (this.$el) {
+                const actualWidth = this.$el.getBoundingClientRect().width
+                this.drawerWidth = actualWidth
+                this.resizeStartWidth = actualWidth
+                this.resizeStartX = event.clientX
+            }
+
+            // Wait for Vue to apply the new width before changing the class
+            // This prevents jumping when CSS constraints are removed
+            this.$nextTick(() => {
+                this.isResizing = true
+                this.hasManuallyResized = true
+                document.addEventListener('mousemove', this.handleResize)
+                document.addEventListener('mouseup', this.stopResize)
+            })
+        },
+        handleResize (event) {
+            if (!this.isResizing) return
+
+            const viewportWidth = window.innerWidth
+
+            // Calculate drag delta (negative because dragging left increases width)
+            const delta = this.resizeStartX - event.clientX
+            const newWidth = this.resizeStartWidth + delta
+
+            // Calculate constraints
+            let maxWidth
+
+            if (viewportWidth >= VIEWPORT_PIN_THRESHOLD) {
+                // On large viewports (>= 768px): different constraints for overlay vs pinned
+                if (this.rightDrawer.fixed) {
+                    // Pinned mode: apply 50% max width
+                    maxWidth = Math.min(
+                        viewportWidth * DRAWER_MAX_WIDTH_RATIO,
+                        viewportWidth - DRAWER_MAX_VIEWPORT_MARGIN,
+                        viewportWidth * DRAWER_MAX_PINNED_WIDTH_RATIO
+                    )
+                } else {
+                    // Overlay mode: apply 90% max width with viewport margin
+                    maxWidth = Math.min(
+                        viewportWidth * DRAWER_MAX_WIDTH_RATIO,
+                        viewportWidth - DRAWER_MAX_VIEWPORT_MARGIN
+                    )
+                }
+            } else {
+                // On small viewports (< 768px): only apply 90% max width, no margin constraint
+                maxWidth = viewportWidth * DRAWER_MAX_WIDTH_RATIO
+            }
+
+            // Use responsive minimum: smaller viewports allow smaller drawers
+            // This prevents min-width from conflicting with max-width in small viewports
+            const minWidth = Math.min(DRAWER_MIN_WIDTH, maxWidth * 0.8)
+
+            // Apply constraints
+            const finalWidth = Math.max(
+                minWidth,
+                Math.min(newWidth, maxWidth)
+            )
+
+            this.drawerWidth = finalWidth
+        },
+        stopResize () {
+            this.isResizing = false
+            document.removeEventListener('mousemove', this.handleResize)
+            document.removeEventListener('mouseup', this.stopResize)
         }
     }
 }
@@ -84,12 +384,38 @@ export default {
     width: 100%;
     max-width: 0;
     min-width: 0;
-    transition: ease-in-out .3s;
-    box-shadow: -5px 0px 8px rgba(0, 0, 0, 0.1);
+    transition: right .3s ease-in-out, width .3s ease-in-out, max-width .3s ease-in-out, min-width .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out;
+    box-shadow: -5px 4px 8px -4px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     overflow: hidden; // Changed from auto to hidden - let child components handle their own scrolling
 
+    // Hide border when closed to prevent visible grey line
+    &:not(.open) {
+        border-left-color: transparent;
+    }
+
+    // Hide border on small viewports where drawer is full-width
+    @media (max-width: 479px) {
+        border-left: none;
+    }
+
+    .resize-bar {
+        position: absolute;
+        left: -4px; // Center on border (50% of 8px width)
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        cursor: ew-resize;
+        background: transparent;
+        z-index: 1001;
+
+        // Hide resize bar on small viewports where drawer is full-width
+        @media (max-width: 479px) {
+            display: none;
+        }
+    }
+
     .header {
         background: white;
         flex-shrink: 0;
@@ -103,20 +429,72 @@ export default {
         max-width: 100vw;
         min-width: 0;
 
-        // On viewports >= 400px: use 30vw with 400px minimum
-        @media (min-width: 400px) {
-            max-width: 30vw;
-            min-width: 400px;
+        // On viewports 480-767px: use 480px minimum but no max-width constraint
+        // (pinning is disabled, so let JS control the width)
+        @media (min-width: 480px) and (max-width: 767px) {
+            min-width: 480px;
+            max-width: none;
+        }
+
+        // On viewports >= 768px: apply max-width constraints (pinning is enabled)
+        @media (min-width: 768px) {
+            max-width: 90vw;
+            min-width: 480px;
 
             &.wider {
-                max-width: 45vw;
+                max-width: 90vw;
             }
         }
     }
 
     &.fixed {
-        position: initial;
+        position: relative; // Changed from initial to relative for resize bar positioning
         height: 100%;
+        top: 0; // Reset top offset to prevent gap at top
+        box-shadow: none; // Remove shadow when pinned
+        flex-shrink: 0; // Prevent flex from shrinking the drawer below its set width
+        min-width: unset; // Remove responsive min-width constraint
+        max-width: none; // Remove responsive max-width constraint
+
+        // Hide drawer when pinned but closed to prevent grey block
+        &:not(.open) {
+            width: 0 !important;
+            min-width: 0 !important;
+            max-width: 0 !important;
+            overflow: hidden;
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    &.resizing {
+        transition: none; // Disable transition while actively resizing for smooth dragging
+        max-width: none !important; // Remove max-width constraint to allow free resizing
+        min-width: unset !important; // Remove min-width constraint to allow free resizing
+    }
+
+    &.manually-resized {
+        max-width: none !important; // Keep custom width after manual resize
+        min-width: unset !important; // Keep custom width after manual resize
+    }
+
+    &.pinning {
+        transition: none !important; // Disable all transitions while pinning to prevent visual jump
+    }
+
+    &.opening {
+        // Only animate position during open, not width changes
+        transition: right .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out !important;
+    }
+
+    &.closing {
+        // Only animate position during close, not width changes
+        transition: right .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out !important;
+
+        // Maintain current width/max-width/min-width during slide-out to prevent shrinking animation
+        // These will be overridden by inline styles from drawerStyle
+        max-width: none !important;
+        min-width: unset !important;
     }
 }
 </style>
diff --git a/frontend/src/components/drawers/expert/ExpertDrawer.vue b/frontend/src/components/drawers/expert/ExpertDrawer.vue
index 0883d74786..43133cc979 100644
--- a/frontend/src/components/drawers/expert/ExpertDrawer.vue
+++ b/frontend/src/components/drawers/expert/ExpertDrawer.vue
@@ -7,24 +7,58 @@
                 </div>
                 <h2 class="title">Expert</h2>
             </div>
+            <div class="header-actions">
+                <button
+                    v-if="shouldAllowPinning()"
+                    class="header-button pin-button"
+                    :class="{ 'is-pinned': isPinned }"
+                    :title="isPinned ? 'Unpin drawer' : 'Pin drawer open'"
+                    data-el="expert-drawer-pin-button"
+                    @click="togglePin"
+                >
+                    <LockClosedIcon v-if="isPinned" class="ff-icon" />
+                    <LockOpenIcon v-else class="ff-icon" />
+                </button>
+                <button
+                    class="header-button"
+                    :title="'Close Expert'"
+                    data-el="expert-drawer-close-button"
+                    @click="closeDrawer"
+                >
+                    <XIcon class="ff-icon" />
+                </button>
+            </div>
         </div>
         <ExpertPanel />
     </div>
 </template>
 
 <script>
+import { LockClosedIcon, LockOpenIcon, XIcon } from '@heroicons/vue/solid'
+import { mapActions, mapState } from 'vuex'
+
 import ExpertPanel from '../../expert/Expert.vue'
 
 export default {
     name: 'ExpertDrawer',
     components: {
-        ExpertPanel
+        ExpertPanel,
+        XIcon,
+        LockClosedIcon,
+        LockOpenIcon
     },
+    inject: ['togglePinWithWidth', 'shouldAllowPinning'],
     data () {
         return {
             // Future: Add expert state here
         }
     },
+    computed: {
+        ...mapState('ux/drawers', ['rightDrawer']),
+        isPinned () {
+            return this.rightDrawer.fixed
+        }
+    },
     mounted () {
         // Future: Listen for custom events
         // Example: document.addEventListener('expert:open', this.handleOpenEvent)
@@ -34,6 +68,13 @@ export default {
         // Example: document.removeEventListener('expert:open', this.handleOpenEvent)
     },
     methods: {
+        ...mapActions('ux/drawers', ['closeRightDrawer']),
+        closeDrawer () {
+            this.closeRightDrawer()
+        },
+        togglePin () {
+            this.togglePinWithWidth()
+        }
         // Future: Handle event-based triggers
         // handleOpenEvent(event) {
         //     const context = event.detail
@@ -52,9 +93,16 @@ export default {
 
     .header {
         padding: 1rem 1.5rem;
-        border-bottom: 1px solid $ff-grey-200;
-        background: white;
+        background: linear-gradient(white, white) padding-box,
+                    linear-gradient(90deg, $ff-red-600, #5048e5, $ff-red-600, #5048e5, $ff-red-600) border-box;
+        border: none;
+        border-bottom: 1px solid transparent;
+        background-size: 200% 100%;
+        animation: gradient-flow-lr 4s linear infinite;
         flex-shrink: 0; // Prevent header from shrinking
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
         .flex {
             display: flex;
@@ -88,6 +136,42 @@ export default {
             margin: 0;
             line-height: 1.5rem; // Match logo height for proper alignment
         }
+
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            .header-button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 30px;
+                height: 30px;
+                padding: 0;
+                background: none;
+                border: none;
+                border-radius: 5px;
+                cursor: pointer;
+                color: inherit;
+                font: inherit;
+                transition: background-color 0.15s ease;
+
+                &:hover {
+                    cursor: pointer;
+                    background: $ff-grey-100;
+                }
+
+                &.pin-button.is-pinned {
+                    background: $ff-indigo-800;
+                    color: white;
+
+                    &:hover {
+                        background: $ff-indigo-900;
+                    }
+                }
+            }
+        }
     }
 
     // Ensure ExpertPanel fills remaining space
@@ -98,4 +182,13 @@ export default {
         }
     }
 }
+
+@keyframes gradient-flow-lr {
+    0% {
+        background-position: 0% 0%;
+    }
+    100% {
+        background-position: 100% 0%;
+    }
+}
 </style>
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index a8ec82c450..8220b22093 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -1,13 +1,22 @@
 <template>
     <div class="ff-notifications-drawer" data-el="notifications-drawer">
         <div class="header">
-            <div class="flex content">
-                <h2 class="title flex-grow">Notifications</h2>
-                <ff-checkbox v-model="hideReadNotifications" class=" mt-2 mr-4" data-action="show-read-check">
+            <h2 class="title">Notifications</h2>
+            <div class="header-actions">
+                <ff-checkbox v-model="hideReadNotifications" data-action="show-read-check">
                     Hide Read
                 </ff-checkbox>
+                <button
+                    class="header-button"
+                    :title="'Close Notifications'"
+                    data-el="notifications-drawer-close-button"
+                    @click="closeDrawer"
+                >
+                    <XIcon class="ff-icon" />
+                </button>
             </div>
-
+        </div>
+        <div class="controls">
             <div class="actions">
                 <span
                     class="forge-badge"
@@ -64,6 +73,7 @@
 </template>
 
 <script>
+import { XIcon } from '@heroicons/vue/solid'
 import { markRaw } from 'vue'
 import { mapActions, mapGetters } from 'vuex'
 
@@ -76,6 +86,9 @@ import TeamInvitationReceivedNotification from '../../notifications/invitations/
 
 export default {
     name: 'NotificationsDrawer',
+    components: {
+        XIcon
+    },
     data () {
         return {
             componentCache: {},
@@ -109,6 +122,10 @@ export default {
     },
     methods: {
         ...mapActions('account', ['setNotifications']),
+        ...mapActions('ux/drawers', ['closeRightDrawer']),
+        closeDrawer () {
+            this.closeRightDrawer()
+        },
         getNotificationsComponent (notification) {
             let comp = this.componentCache[notification.type]
             if (comp) {
diff --git a/frontend/src/components/expert/Expert.vue b/frontend/src/components/expert/Expert.vue
index 28345293b5..d3c0ceb343 100644
--- a/frontend/src/components/expert/Expert.vue
+++ b/frontend/src/components/expert/Expert.vue
@@ -29,15 +29,12 @@
                     :message="message"
                     :is-streaming="isStreaming(index)"
                 >
-                    <!-- Rich guide content slot -->
-                    <template v-if="message.kind === 'guide'" #rich-content>
-                        <expert-rich-guide :guide="message.guide" />
-                    </template>
-
                     <!-- Rich resources content slot -->
-                    <!-- eslint-disable vue/valid-v-slot-->
-                    <template v-if="message.kind === 'resources'" #rich-content>
-                        <expert-rich-resources :resources="message.resources" />
+                    <template v-if="richContentComponentMap[message.kind]" #rich-content>
+                        <component
+                            :is="richContentComponentMap[message.kind]"
+                            :message="message"
+                        />
                     </template>
                 </expert-chat-message>
             </div>
@@ -59,6 +56,7 @@
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import { mapActions, mapGetters, mapState } from 'vuex'
 
 import ExpertChatInput from './ExpertChatInput.vue'
@@ -76,9 +74,19 @@ export default {
         ExpertRichGuide,
         ExpertRichResources
     },
+    inject: {
+        togglePinWithWidth: {
+            from: 'togglePinWithWidth',
+            default: () => () => {} // No-op function when not provided
+        }
+    },
     data () {
         return {
-            scrollCheckDebounce: null
+            scrollCheckDebounce: null,
+            richContentComponentMap: {
+                guide: markRaw(ExpertRichGuide),
+                resources: markRaw(ExpertRichResources)
+            }
         }
     },
     computed: {
@@ -96,7 +104,10 @@ export default {
             'hasMessages',
             'lastMessage',
             'isSessionExpired'
-        ])
+        ]),
+        isPinned () {
+            return this.$store.state.ux.drawers.rightDrawer.fixed
+        }
     },
     watch: {
         messages: {
@@ -145,6 +156,11 @@ export default {
         async handleSendMessage (query) {
             if (!query.trim()) return
 
+            // Auto-pin drawer on first message
+            if (!this.isPinned && this.messages.length === 0) {
+                this.togglePinWithWidth()
+            }
+
             // Call Vuex action to handle API logic
             const result = await this.handleMessage({
                 query,
diff --git a/frontend/src/components/expert/ExpertRichGuide.vue b/frontend/src/components/expert/ExpertRichGuide.vue
index ffdaa67394..66974c7737 100644
--- a/frontend/src/components/expert/ExpertRichGuide.vue
+++ b/frontend/src/components/expert/ExpertRichGuide.vue
@@ -25,105 +25,54 @@
             </ol>
         </div>
 
-        <!-- Node Packages Section -->
-        <div v-if="guide.nodePackages && guide.nodePackages.length > 0" class="guide-packages">
-            <h4 class="section-title">Required Node Packages</h4>
-            <div class="packages-grid">
-                <a
-                    v-for="(pkg, index) in guide.nodePackages"
-                    :key="index"
-                    :href="addUTMTracking(getPackageUrl(pkg))"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="package-card"
-                >
-                    <img
-                        :src="'https://www.google.com/s2/favicons?domain=flows.nodered.org'"
-                        alt="Node-RED"
-                        class="package-favicon"
-                        @error="handleImageError"
-                    >
-                    <div class="package-info">
-                        <div class="package-name">{{ getPackageName(pkg) }}</div>
-                        <div class="package-url">{{ getPackageUrl(pkg) }}</div>
-                    </div>
-                </a>
+        <section class="flex flex-col gap-4">
+            <!-- Node Packages Section -->
+            <div v-if="guide.nodePackages && guide.nodePackages.length > 0" class="guide-packages">
+                <h4 class="section-title">Required Node Packages</h4>
+                <div class="packages-grid">
+                    <PackageResourceCard v-for="(pkg, index) in guide.nodePackages" :key="index" :nodePackage="pkg" />
+                </div>
             </div>
-        </div>
 
-        <!-- Resources Section -->
-        <div v-if="guide.resources && guide.resources.length > 0" class="guide-resources">
-            <h4 class="section-title">Related Resources</h4>
-            <div class="resources-grid">
-                <a
-                    v-for="(resource, index) in guide.resources"
-                    :key="index"
-                    :href="addUTMTracking(resource.url)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="resource-card"
-                >
-                    <img
-                        :src="getFaviconUrl(resource.url)"
-                        :alt="resource.type"
-                        class="resource-icon"
-                        @error="handleImageError"
-                    >
-                    <div class="resource-info">
-                        <div class="resource-title">{{ resource.title }}</div>
-                        <div class="resource-url">{{ resource.url }}</div>
-                    </div>
-                </a>
+            <!-- Resources Section -->
+            <div v-if="guide.resources && guide.resources.length > 0" class="guide-resources">
+                <h4 class="section-title">Related Resources</h4>
+                <div class="resources-grid">
+                    <StandardResourceCard v-for="(resource, index) in guide.resources" :key="index" :resource="resource" />
+                </div>
             </div>
-        </div>
+
+            <!-- Resources Section -->
+            <div v-if="guide.flows && guide.flows.length > 0" class="guide-flows">
+                <h4 class="section-title">Related Flows</h4>
+                <div class="resources-grid">
+                    <FlowResourceCard v-for="(flow, index) in guide.flows" :key="index" :flow="flow" />
+                </div>
+            </div>
+        </section>
     </div>
 </template>
 
 <script>
+import FlowResourceCard from './resources/FlowResourceCard.vue'
+import PackageResourceCard from './resources/PackageResourceCard.vue'
+import StandardResourceCard from './resources/StandardResourceCard.vue'
+
 export default {
     name: 'ExpertRichGuide',
+    components: { StandardResourceCard, PackageResourceCard, FlowResourceCard },
     props: {
-        guide: {
+        message: {
             type: Object,
             required: true,
-            validator: (guide) => {
-                return guide.title !== undefined
+            validator: (message) => {
+                return message.guide?.title !== undefined
             }
         }
     },
-    methods: {
-        getPackageName (pkg) {
-            // Handle both object format {name: "..."} and string format
-            return typeof pkg === 'object' ? pkg.name : pkg
-        },
-        getPackageUrl (pkg) {
-            const packageName = this.getPackageName(pkg)
-            return `https://flows.nodered.org/node/${packageName}`
-        },
-        getFaviconUrl (url) {
-            try {
-                const urlObj = new URL(url)
-                return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}`
-            } catch (e) {
-                // If URL parsing fails, return empty string to trigger error handler
-                return ''
-            }
-        },
-        addUTMTracking (url) {
-            try {
-                const urlObj = new URL(url)
-                urlObj.searchParams.set('utm_source', 'flowfuse-expert')
-                urlObj.searchParams.set('utm_medium', 'assistant')
-                urlObj.searchParams.set('utm_campaign', 'expert-chat')
-                return urlObj.toString()
-            } catch (e) {
-                // If URL parsing fails, return original
-                return url
-            }
-        },
-        handleImageError (event) {
-            // Hide broken image icon
-            event.target.style.display = 'none'
+    computed: {
+        guide () {
+            return this.message.guide
         }
     }
 }
@@ -144,8 +93,8 @@ export default {
     span {
         display: inline-block;
         padding: 0.5rem 0.75rem; // py-2 px-3
-        background-color: #EEF2FF; // bg-indigo-100
-        color: #4338CA; // text-indigo-700
+        background-color: $ff-indigo-100;
+        color: $ff-indigo-700;
         font-size: 0.875rem; // text-sm
         border-radius: 9999px; // rounded-full
     }
@@ -230,58 +179,6 @@ export default {
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: 0.5rem;
     }
-
-    .package-card {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.75rem;
-        background-color: white;
-        border: 1px solid $ff-grey-200;
-        border-radius: 0.5rem;
-        text-decoration: none;
-        color: $ff-grey-900;
-        transition: all 0.2s ease;
-        height: 4rem;
-
-        &:hover {
-            border-color: $ff-indigo-300;
-            background-color: $ff-grey-50;
-        }
-    }
-
-    .package-favicon {
-        flex-shrink: 0;
-        width: 1rem;
-        height: 1rem;
-    }
-
-    .package-info {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-    }
-
-    .package-name {
-        font-size: 0.875rem;
-        font-weight: 500;
-        font-family: monospace;
-        color: $ff-grey-900;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .package-url {
-        font-size: 0.75rem;
-        color: $ff-grey-500;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin: 0;
-    }
 }
 
 .guide-resources {
@@ -290,57 +187,13 @@ export default {
         flex-direction: column;
         gap: 0.5rem;
     }
+}
 
-    .resource-card {
-        display: flex;
-        align-items: flex-start;
-        gap: 0.5rem;
-        padding: 0.75rem;
-        background-color: white;
-        border: 1px solid $ff-grey-200;
-        border-radius: 0.5rem;
-        text-decoration: none;
-        color: $ff-grey-900;
-        transition: all 0.2s ease;
-
-        &:hover {
-            border-color: $ff-indigo-300;
-            background-color: $ff-grey-50;
-        }
-    }
-
-    .resource-icon {
-        flex-shrink: 0;
-        width: 1rem;
-        height: 1rem;
-        margin-top: 0.125rem;
-        object-fit: contain;
-    }
-
-    .resource-info {
-        flex: 1;
+.guide-flows {
+    .resources-grid {
         display: flex;
         flex-direction: column;
-        gap: 0.25rem;
-        min-width: 0;
-    }
-
-    .resource-title {
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: $ff-grey-900;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .resource-url {
-        font-size: 0.75rem;
-        color: $ff-grey-500;
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        gap: 0.5rem;
     }
 }
 </style>
diff --git a/frontend/src/components/expert/ExpertRichResources.vue b/frontend/src/components/expert/ExpertRichResources.vue
index a7a948e178..e58780b581 100644
--- a/frontend/src/components/expert/ExpertRichResources.vue
+++ b/frontend/src/components/expert/ExpertRichResources.vue
@@ -7,69 +7,73 @@
         </div>
 
         <!-- Resources List -->
-        <div v-if="resources.resources && resources.resources.length > 0" class="resources-list">
+        <div v-if="hasAdditionalResources" class="resources-list">
+            <h4 v-if="hasFlows" class="section-title">Related Resources</h4>
             <div class="resources-grid">
-                <a
-                    v-for="(resource, index) in resources.resources"
-                    :key="index"
-                    :href="addUTMTracking(resource.url)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="resource-card"
-                >
-                    <img
-                        :src="getFaviconUrl(resource.url)"
-                        :alt="resource.type"
-                        class="resource-icon"
-                        @error="handleImageError"
-                    >
-                    <div class="resource-info">
-                        <div class="resource-title">{{ resource.title }}</div>
-                        <div class="resource-url">{{ resource.url }}</div>
-                    </div>
-                </a>
+                <StandardResourceCard v-for="(resource, index) in additionalResources" :key="index" :resource="resource" />
             </div>
         </div>
+
+        <!-- nodePackages List -->
+        <div v-if="hasNodePackages" class="resources-list">
+            <h4 v-if="hasFlows || hasAdditionalResources" class="section-title">Required Node Packages</h4>
+            <div class="resources-grid">
+                <PackageResourceCard v-for="(node, index) in nodePackages" :key="index" :nodePackage="node" />
+            </div>
+        </div>
+
+        <!-- Flows List -->
+        <div v-if="hasFlows" class="flows-list">
+            <h4 v-if="hasAdditionalResources || hasNodePackages" class="section-title">Example Flows</h4>
+            <ul class="flows-list flex flex-col gap-2">
+                <li v-for="flow in flows" :key="flow.id">
+                    <FlowResourceCard :flow="flow" />
+                </li>
+            </ul>
+        </div>
     </div>
 </template>
 
 <script>
+
+import FlowResourceCard from './resources/FlowResourceCard.vue'
+import PackageResourceCard from './resources/PackageResourceCard.vue'
+import StandardResourceCard from './resources/StandardResourceCard.vue'
+
 export default {
     name: 'ExpertRichResources',
+    components: { StandardResourceCard, FlowResourceCard, PackageResourceCard },
     props: {
-        resources: {
+        message: {
             type: Object,
             required: true,
-            validator: (resources) => {
-                return resources.title !== undefined && resources.resources !== undefined
+            validator: (message) => {
+                return message.resources.title !== undefined &&
+                    (message.resources.resources !== undefined || message.resources.flows)
             }
         }
     },
-    methods: {
-        getFaviconUrl (url) {
-            try {
-                const urlObj = new URL(url)
-                return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}`
-            } catch (e) {
-                // If URL parsing fails, return empty string to trigger error handler
-                return ''
-            }
+    computed: {
+        additionalResources () {
+            return this.resources.resources
         },
-        addUTMTracking (url) {
-            try {
-                const urlObj = new URL(url)
-                urlObj.searchParams.set('utm_source', 'flowfuse-expert')
-                urlObj.searchParams.set('utm_medium', 'assistant')
-                urlObj.searchParams.set('utm_campaign', 'expert-chat')
-                return urlObj.toString()
-            } catch (e) {
-                // If URL parsing fails, return original
-                return url
-            }
+        hasAdditionalResources () {
+            return this.resources.resources && this.resources.resources.length > 0
+        },
+        hasNodePackages () {
+            return this.resources.nodePackages && this.resources.nodePackages.length > 0
+        },
+        hasFlows () {
+            return this.resources.flows && this.resources.flows.length > 0
         },
-        handleImageError (event) {
-            // Hide broken image icon
-            event.target.style.display = 'none'
+        resources () {
+            return this.message.resources
+        },
+        flows () {
+            return this.resources.flows
+        },
+        nodePackages () {
+            return this.resources.nodePackages
         }
     }
 }
@@ -79,7 +83,7 @@ export default {
 .ff-expert-rich-resources {
     display: flex;
     flex-direction: column;
-    gap: 0;
+    gap: 0.5rem;
 }
 
 .resources-header {
@@ -101,6 +105,13 @@ export default {
     }
 }
 
+.section-title {
+    font-size: 1rem; // text-base
+    font-weight: 500; // font-medium
+    color: #111827; // text-gray-900
+    margin: 0.5rem 0 0.75rem 0; // mt-2 mb-3
+}
+
 .resources-list {
     .resources-grid {
         display: flex;
diff --git a/frontend/src/components/expert/resources/FlowResourceCard.vue b/frontend/src/components/expert/resources/FlowResourceCard.vue
new file mode 100644
index 0000000000..8e2e5479ea
--- /dev/null
+++ b/frontend/src/components/expert/resources/FlowResourceCard.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="flex flex-col gap-3 p-3 bg-white border border-gray-200 rounded-lg">
+        <div class="flex items-start gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" class="flex-shrink-0 w-4 h-4 mt-0.5">
+                    <rect width="24" height="24" fill="gray" rx="4" />
+                    <g clip-path="url(#a)">
+                        <path fill="#fff" d="M0 12v-1.647c5.09 0 5.81-.9 6.44-1.695.72-.9 1.46-1.6 3.88-1.6v1.648c-1.76 0-2.04.354-2.51.948C6.79 10.937 5.5 12 0 12Z" />
+                        <path fill="#fff" d="M8.6 16.941c-2.9 0-3.47-1.513-3.88-2.614C4.25 13.072 3.85 12 0 12v-1.647c4.67 0 5.67 1.618 6.34 3.419.38 1.015.57 1.522 2.26 1.522v1.647Z" />
+                        <path fill="#fff" d="M16.78 19H9.9c-.95 0-1.72-.737-1.72-1.647v-2.47c0-.91.77-1.648 1.72-1.648h6.88c.95 0 1.72.738 1.72 1.647v2.47c0 .91-.77 1.648-1.72 1.648Zm0-4.118H9.9v2.47h6.88v-2.47Zm1.5-4.117H11.4c-.95 0-1.72-.738-1.72-1.647v-2.47c0-.91.77-1.648 1.72-1.648h6.88c.95 0 1.72.737 1.72 1.647v2.47c0 .91-.77 1.648-1.72 1.648Zm0-4.118H11.4v2.47h6.88v-2.47Z" />
+                    </g>
+                    <defs>
+                        <clipPath id="a">
+                            <path fill="#fff" d="M0 5h20v14H0z" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            <div class="flex-1 flex flex-col gap-1 min-w-0">
+                <div class="flex items-start justify-between gap-2">
+                    <div class="text-sm font-medium text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">{{ flow.title }}</div>
+                    <div class="flex items-start gap-2 flex-shrink-0 -mt-1">
+                        <button class="text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 flex items-center transition-colors duration-200 rounded px-2 py-1" @click="flowsExpanded = !flowsExpanded">
+                            <span>Preview</span>
+                            <chevron-down-icon v-if="flowsExpanded" class="h-4 w-4" />
+                            <chevron-up-icon v-if="!flowsExpanded" class="h-4 w-4" />
+                        </button>
+                        <text-copier :text="flowsJson" :showText="false" />
+                    </div>
+                </div>
+                <div class="text-xs text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">
+                    {{ flow.metadata?.category }}
+                </div>
+            </div>
+        </div>
+        <div class="flex overflow-auto ml-8 max-h-[500px] flex-col relative" :class="{hidden: flowsExpanded}">
+            <flow-viewer v-if="!flowsExpanded" :flow="flow.metadata.flows" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/solid'
+
+import TextCopier from '../../TextCopier.vue'
+import FlowViewer from '../../flow-viewer/FlowViewer.vue'
+
+export default {
+    name: 'StandardResourceCard',
+    components: { TextCopier, FlowViewer, ChevronUpIcon, ChevronDownIcon },
+    props: {
+        flow: {
+            type: Object,
+            required: true
+        }
+    },
+    data () {
+        return {
+            flowsExpanded: true
+        }
+    },
+    computed: {
+        flowsJson () {
+            return JSON.stringify(this.flow.metadata.flows, null, 2)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+// Minimal scoped styles - most styling is handled by Tailwind classes in template
+</style>
diff --git a/frontend/src/components/expert/resources/PackageResourceCard.vue b/frontend/src/components/expert/resources/PackageResourceCard.vue
new file mode 100644
index 0000000000..fe4a6ccb72
--- /dev/null
+++ b/frontend/src/components/expert/resources/PackageResourceCard.vue
@@ -0,0 +1,111 @@
+<template>
+    <a
+        :href="addUTMTracking(getPackageUrl(nodePackage))"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="package-card"
+    >
+        <img
+            :src="'https://www.google.com/s2/favicons?domain=flows.nodered.org'"
+            alt="Node-RED"
+            class="package-favicon"
+            @error="handleImageError"
+        >
+        <div class="package-info">
+            <div class="package-name">{{ getPackageName(nodePackage) }}</div>
+            <div class="package-url">{{ getPackageUrl(nodePackage) }}</div>
+        </div>
+    </a>
+</template>
+
+<script>
+export default {
+    name: 'PackageResourceCard',
+    props: {
+        nodePackage: {
+            type: Object,
+            required: true
+        }
+    },
+    methods: {
+        getPackageName (pkg) {
+            // Handle both object format {id: "..." or name: "..."} and string format
+            return typeof pkg === 'object' ? (pkg.id || pkg.name) : pkg
+        },
+        getPackageUrl (pkg) {
+            const packageName = this.getPackageName(pkg)
+            return `https://flows.nodered.org/package/${packageName}`
+        },
+        addUTMTracking (url) {
+            try {
+                const urlObj = new URL(url)
+                urlObj.searchParams.set('utm_source', 'flowfuse-expert')
+                urlObj.searchParams.set('utm_medium', 'assistant')
+                urlObj.searchParams.set('utm_campaign', 'expert-chat')
+                return urlObj.toString()
+            } catch (e) {
+                // If URL parsing fails, return original
+                return url
+            }
+        },
+        handleImageError (event) {
+            // Hide broken image icon
+            event.target.style.display = 'none'
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.package-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: white;
+    border: 1px solid $ff-grey-200;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    color: $ff-grey-900;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: $ff-indigo-300;
+        background-color: $ff-grey-50;
+    }
+}
+
+.package-favicon {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.125rem;
+}
+
+.package-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.package-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-family: monospace;
+    color: $ff-grey-900;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.package-url {
+    font-size: 0.75rem;
+    color: $ff-grey-500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+}
+</style>
diff --git a/frontend/src/components/expert/resources/StandardResourceCard.vue b/frontend/src/components/expert/resources/StandardResourceCard.vue
new file mode 100644
index 0000000000..ebefa24863
--- /dev/null
+++ b/frontend/src/components/expert/resources/StandardResourceCard.vue
@@ -0,0 +1,113 @@
+<template>
+    <!-- todo clean resource.url references after transitioning to v4 api -->
+    <a
+        :href="addUTMTracking(resource.metadata?.source || resource.url)"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="resource-card"
+    >
+        <img
+            :src="getFaviconUrl(resource.metadata?.source || resource.url)"
+            :alt="resource.type"
+            class="resource-icon"
+            @error="handleImageError"
+        >
+        <div class="resource-info">
+            <div class="resource-title">{{ resource.title }}</div>
+            <div class="resource-url">{{ resource.metadata?.source || resource.url }}</div>
+        </div>
+    </a>
+</template>
+
+<script>
+export default {
+    name: 'StandardResourceCard',
+    props: {
+        resource: {
+            type: Object,
+            required: true
+        }
+    },
+    methods: {
+        addUTMTracking (url) {
+            try {
+                const urlObj = new URL(url)
+                urlObj.searchParams.set('utm_source', 'flowfuse-expert')
+                urlObj.searchParams.set('utm_medium', 'assistant')
+                urlObj.searchParams.set('utm_campaign', 'expert-chat')
+                return urlObj.toString()
+            } catch (e) {
+                // If URL parsing fails, return original
+                return url
+            }
+        },
+        getFaviconUrl (url) {
+            try {
+                const urlObj = new URL(url)
+                return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}`
+            } catch (e) {
+                // If URL parsing fails, return empty string to trigger error handler
+                return ''
+            }
+        },
+        handleImageError (event) {
+            // Hide broken image icon
+            event.target.style.display = 'none'
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.resource-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background-color: white;
+    border: 1px solid $ff-grey-200;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    color: $ff-grey-900;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: $ff-indigo-300;
+        background-color: $ff-grey-50;
+    }
+}
+
+.resource-icon {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.125rem;
+    object-fit: contain;
+}
+
+.resource-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+}
+
+.resource-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: $ff-grey-900;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.resource-url {
+    font-size: 0.75rem;
+    color: $ff-grey-500;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>
diff --git a/frontend/src/components/global-search/GlobalSearch.vue b/frontend/src/components/global-search/GlobalSearch.vue
index 9a73611bf5..5b1595fc41 100644
--- a/frontend/src/components/global-search/GlobalSearch.vue
+++ b/frontend/src/components/global-search/GlobalSearch.vue
@@ -260,6 +260,12 @@ export default {
             }
         },
         bindKeyNavigation (event) {
+            // Only handle arrow keys if focus is within global search
+            const globalSearch = document.getElementById('global-search')
+            if (!globalSearch || !globalSearch.contains(document.activeElement)) {
+                return
+            }
+
             const anchors = document.querySelectorAll('#global-search .iterable')
             const anchorsArray = Array.from(anchors)
             const currentIndex = anchorsArray.findIndex(anchor => anchor === document.activeElement)
diff --git a/frontend/src/pages/team/Home/index.vue b/frontend/src/pages/team/Home/index.vue
index f47b0d5e54..4333281c61 100644
--- a/frontend/src/pages/team/Home/index.vue
+++ b/frontend/src/pages/team/Home/index.vue
@@ -13,7 +13,7 @@
                 <ff-loading v-if="loading || pendingTeamChange" message="Loading Dashboard..." />
 
                 <div v-else class="ff-team-dashboard">
-                    <section class="flex gap-3 mb-3 flex-wrap md:flex-nowrap">
+                    <section class="instances-section flex gap-3 mb-3 flex-wrap">
                         <DashboardSection title="Hosted Instances" type="hosted">
                             <template #icon>
                                 <ProjectsIcon class="ff-icon-lg" />
@@ -286,6 +286,16 @@ export default {
     flex: 1;
     flex-direction: column;
     overflow: auto;
+    container-type: inline-size;
+    container-name: team-dashboard;
+}
+
+.instances-section {
+    // Default: stacked (flex-wrap)
+    // When container is 640px+ wide, display side-by-side
+    @container team-dashboard (min-width: 640px) {
+        flex-wrap: nowrap;
+    }
 }
 </style>
 
diff --git a/frontend/src/store/modules/product/expert/index.js b/frontend/src/store/modules/product/expert/index.js
index 66241ce197..7578a5cd54 100644
--- a/frontend/src/store/modules/product/expert/index.js
+++ b/frontend/src/store/modules/product/expert/index.js
@@ -29,7 +29,10 @@ const initialState = () => ({
     streamingTimer: null,
 
     // todo this should be moved into a dedicated context store
-    route: null
+    route: null,
+
+    // Drawer width management
+    hasWidenedForFlows: false
 })
 
 const meta = {
@@ -150,6 +153,9 @@ const mutations = {
     SET_SESSION_CHECK_TIMER (state, timer) {
         state.sessionCheckTimer = timer
     },
+    SET_HAS_WIDENED_FOR_FLOWS (state, value) {
+        state.hasWidenedForFlows = value
+    },
     RESET (state) {
         Object.assign(state, initialState())
     },
@@ -371,13 +377,18 @@ const actions = {
         }
     },
 
-    async handleMessageResponse ({ commit, dispatch }, response) {
+    async handleMessageResponse ({ commit, dispatch, state }, response) {
         // Handle UI-specific processing if successful
         if (
             response.success &&
             response.answer &&
             Array.isArray(response.answer)
         ) {
+            // Check if any item has non-empty flows
+            const hasFlows = response.answer.some(item =>
+                item.flows && Array.isArray(item.flows) && item.flows.length > 0
+            )
+
             for (const item of response.answer) {
                 if (item.kind === 'guide') {
                     // Add rich guide message
@@ -402,6 +413,11 @@ const actions = {
                     await dispatch('streamMessage', item.content)
                 }
             }
+
+            // Auto-widen drawer if flows detected
+            if (hasFlows) {
+                await dispatch('ux/drawers/setRightDrawerWider', true, { root: true })
+            }
         } else if (
             response.success &&
             (!response.answer || !Array.isArray(response.answer))
diff --git a/frontend/src/store/modules/ux/drawers/index.js b/frontend/src/store/modules/ux/drawers/index.js
index 43e1bf8212..538d09f648 100644
--- a/frontend/src/store/modules/ux/drawers/index.js
+++ b/frontend/src/store/modules/ux/drawers/index.js
@@ -19,6 +19,8 @@ const initialState = () => ({
         wider: false,
         fixed: false,
         closeOnClickOutside: true,
+        pinned: false,
+        closing: false,
         props: {},
         on: {},
         bind: {}
@@ -50,11 +52,20 @@ const mutations = {
         state.rightDrawer.on = on
         state.rightDrawer.bind = bind
     },
+    closeRightDrawerImmediate (state) {
+        // Set state, fixed, and pinned to false immediately to prevent
+        // mid-transition class changes that cause width to expand
+        state.rightDrawer.state = false
+        state.rightDrawer.fixed = false
+        state.rightDrawer.pinned = false
+    },
     closeRightDrawer (state) {
         state.rightDrawer.state = false
         state.rightDrawer.wider = false
+        state.rightDrawer.fixed = false
         state.rightDrawer.component = null
         state.rightDrawer.header = null
+        state.rightDrawer.pinned = false
         state.rightDrawer.props = {}
         state.rightDrawer.on = {}
         state.rightDrawer.bind = {}
@@ -77,6 +88,15 @@ const mutations = {
             }
         }
     },
+    setPinnedDrawer (state, fixed) {
+        state.rightDrawer.fixed = fixed
+        state.rightDrawer.pinned = fixed
+        // When fixed, prevent close on click outside
+        state.rightDrawer.closeOnClickOutside = !fixed
+    },
+    setRightDrawerWider (state, wider) {
+        state.rightDrawer.wider = wider
+    },
     openLeftDrawer (state) {
         state.leftDrawer.state = true
     },
@@ -103,6 +123,9 @@ const actions = {
         bind = {},
         overlay = false
     }) {
+        // Don't allow opening while drawer is currently closing
+        if (state.rightDrawer.closing) return
+
         if (state.rightDrawer.state && component.name === state.rightDrawer.component.name) return
 
         const openDrawer = () => {
@@ -116,7 +139,8 @@ const actions = {
                 on,
                 bind
             })
-            if (overlay) {
+            // Only show overlay if requested and drawer is not pinned
+            if (overlay && !state.rightDrawer.pinned) {
                 commit('ux/openOverlay', null, { root: true })
             }
         }
@@ -128,14 +152,27 @@ const actions = {
             openDrawer()
         }
     },
-    closeRightDrawer ({ commit, rootState }) {
-        setTimeout(() => {
-            commit('closeRightDrawer')
+    closeRightDrawer ({ commit, state, rootState }) {
+        // Set closing flag to prevent reopens during transition
+        state.rightDrawer.closing = true
 
-            if (rootState.ux.overlay) {
-                commit('ux/closeOverlay', null, { root: true })
+        // Immediately hide drawer by removing .open class
+        commit('closeRightDrawerImmediate')
+
+        // Close overlay if present
+        if (rootState.ux.overlay) {
+            commit('ux/closeOverlay', null, { root: true })
+        }
+
+        // Wait for CSS transition (300ms) before full cleanup
+        setTimeout(() => {
+            // Only do full cleanup if drawer is still closed
+            if (!state.rightDrawer.state) {
+                commit('closeRightDrawer')
             }
-        }, 100)
+            // Clear closing flag
+            state.rightDrawer.closing = false
+        }, 300)
     },
 
     /**
@@ -184,6 +221,40 @@ const actions = {
         commit('setRightDrawerActions', actions)
     },
 
+    /**
+     * Sets the wider state for the right drawer.
+     *
+     * @param {Object} context - The Vuex action context object.
+     * @param {Function} context.commit - The commit function to call mutations.
+     * @param {boolean} wider - Whether the drawer should be wider.
+     *
+     * @return {void}
+     */
+    setRightDrawerWider ({ commit }, wider) {
+        commit('setRightDrawerWider', wider)
+    },
+
+    /**
+     * Toggles the fixed state of the right drawer.
+     * When fixed, the drawer becomes part of the page layout (position: initial) and stays open.
+     *
+     * @param {Object} context - The Vuex action context object.
+     * @param {Function} context.commit - The commit function to call mutations.
+     * @param {Object} context.state - The current state.
+     * @param {Object} context.rootState - The root state.
+     *
+     * @return {void}
+     */
+    togglePinDrawer ({ commit, state, rootState }) {
+        const newFixedState = !state.rightDrawer.fixed
+        commit('setPinnedDrawer', newFixedState)
+
+        // Always close overlay when toggling (whether fixing or unfixing)
+        if (rootState.ux.overlay) {
+            commit('ux/closeOverlay', null, { root: true })
+        }
+    },
+
     openLeftDrawer ({ commit }) {
         commit('openLeftDrawer')
     },
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index dae532e2a5..8578f6797a 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -40,39 +40,74 @@ $ff-notifications-drawer-side-padding: 6px;
 .ff-notifications-drawer {
   display: flex;
   flex-direction: column;
-  align-items: center;
   height: 100%;
   width: 100%;
   padding: 0 !important;
 
   > .header {
-    border-bottom: 1px solid $ff-grey-300;
-    padding: 10px 0;
     width: 100%;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid $ff-grey-200;
+    background: white;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    .title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #374151;
+      margin: 0;
+      line-height: 1.5rem;
+      flex: 1;
+    }
 
-    .content {
-      padding: 0 $ff-notifications-drawer-side-padding*2;
+    .header-actions {
       display: flex;
-      align-items: baseline;
+      align-items: center;
+      gap: 0.75rem;
 
-      .title {
+      .ff-checkbox {
         margin: 0;
-        color: $ff-grey-800;
-        font-weight: bold;
-        font-size: 1.25rem;
-        line-height: 1.75rem;
       }
 
-      .ff-checkbox {
-        margin: 0;
+      .header-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        background: none;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        color: inherit;
+        font: inherit;
+        transition: background-color 0.15s ease;
+
+        &:hover {
+          cursor: pointer;
+          background: $ff-grey-100;
+        }
       }
     }
+  }
+
+  > .controls {
+    width: 100%;
+    border-bottom: 1px solid $ff-grey-300;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
 
     .actions {
-      margin-top: 5px;
-      padding: 0 12px;
       display: flex;
       gap: 5px;
+      padding: 10px 12px;
 
       .forge-badge {
         background-color: $ff-grey-100;