diff --git a/beaker-vue/package-lock.json b/beaker-vue/package-lock.json
index 601ec80b..dcdd189a 100644
--- a/beaker-vue/package-lock.json
+++ b/beaker-vue/package-lock.json
@@ -30,9 +30,11 @@
         "content-disposition": "^0.5.4",
         "cookie": "^1.0.2",
         "cytoscape": "^3.31.2",
+        "docx": "^9.5.0",
         "escape-html": "^1.0.3",
         "filesize": "^10.1.6",
         "hash-sum": "^2.0.0",
+        "html2canvas": "^1.4.1",
         "isomorphic-fetch": "^3.0.0",
         "json5": "^2.2.3",
         "katex": "^0.16.22",
@@ -4932,6 +4934,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5367,6 +5378,12 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -5388,6 +5405,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5565,6 +5591,56 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/docx": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-9.5.1.tgz",
+      "integrity": "sha512-ABDI7JEirFD2+bHhOBlsGZxaG1UgZb2M/QMKhLSDGgVNhxDesTCDcP+qoDnDGjZ4EOXTRfUjUgwHVuZ6VSTfWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^24.0.1",
+        "hash.js": "^1.1.7",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.1.3",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "24.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
+      "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/docx/node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -6577,6 +6653,16 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "license": "MIT"
     },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -6631,6 +6717,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -6731,6 +6830,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
@@ -6780,6 +6885,12 @@
       "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
       "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg=="
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/ini": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
@@ -6971,6 +7082,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -7299,6 +7416,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/katex": {
       "version": "0.16.22",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
@@ -7386,6 +7515,15 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/loader-utils": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
@@ -7588,6 +7726,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -7999,6 +8143,12 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/panel": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/panel/-/panel-6.2.0.tgz",
@@ -8416,6 +8566,12 @@
         "node": ">=12.11.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -8547,6 +8703,27 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -9154,6 +9331,12 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/sax": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
+      "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -9240,6 +9423,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9407,6 +9596,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -9663,6 +9867,15 @@
       "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
       "license": "MIT"
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -9982,9 +10195,17 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
@@ -10841,6 +11062,24 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "license": "MIT"
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/beaker-vue/package.json b/beaker-vue/package.json
index 039384d0..839c072d 100644
--- a/beaker-vue/package.json
+++ b/beaker-vue/package.json
@@ -56,9 +56,11 @@
     "content-disposition": "^0.5.4",
     "cookie": "^1.0.2",
     "cytoscape": "^3.31.2",
+    "docx": "^9.5.0",
     "escape-html": "^1.0.3",
     "filesize": "^10.1.6",
     "hash-sum": "^2.0.0",
+    "html2canvas": "^1.4.1",
     "isomorphic-fetch": "^3.0.0",
     "json5": "^2.2.3",
     "katex": "^0.16.22",
diff --git a/beaker-vue/src/components/panels/WorkflowOutputPanel.vue b/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
index d86416b1..8d3a073b 100644
--- a/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
+++ b/beaker-vue/src/components/panels/WorkflowOutputPanel.vue
@@ -3,7 +3,21 @@
         <p v-if="!attachedWorkflow">
             No workflow selected. Select one above or ask the agent about which workflow could work for your task.
         </p>
-        <div class="final-response p-steppanel" v-html="finalResponse" @click="handleImageClick">
+
+        <div v-if="hasContent" class="export-button-container">
+            <button
+                @click="exportToDocx"
+                :disabled="isExporting"
+                class="export-button"
+                title="Export to DOCX"
+            >
+                <i v-if="!isExporting" class="pi pi-download"></i>
+                <i v-else class="pi pi-spin pi-spinner"></i>
+                <span class="export-button-text">{{ isExporting ? 'Exporting...' : 'Export DOCX' }}</span>
+            </button>
+        </div>
+
+        <div ref="finalResponseElement" class="final-response p-steppanel" v-html="finalResponse" @click="handleImageClick">
 
         </div>
     </div>
@@ -14,20 +28,50 @@ import { computed, inject, ref } from "vue";
 import type { BeakerSessionComponentType } from '../session/BeakerSession.vue';
 import { useWorkflows } from '../../composables/useWorkflows';
 import { marked } from "marked";
+import { DocumentExporter } from '../../utils/exportUtils';
 import { ImageZoomDialog } from "../render";
 import { useDialog } from "primevue";
 
 const beakerSession = inject<BeakerSessionComponentType>("beakerSession");
 const { attachedWorkflow, attachedWorkflowFinalResponse } = useWorkflows(beakerSession);
 
+const finalResponseElement = ref<HTMLElement>();
+const isExporting = ref(false);
+
 const finalResponse = computed(() => {
-    let response = `${attachedWorkflowFinalResponse.value}`;
+    const workflow_response = attachedWorkflowFinalResponse.value;
+    let response = `${workflow_response}`;
     if (response === "") {
         response = "### No workflow output yet\nThis panel will be populated as the workflow stages complete."
     }
     response = response.split('\n').filter(line => !line.match(/^[|\s]+$/)).join('\n');
-    return marked.parse(response)
-})
+    const parsedResponse = marked.parse(response);
+    
+    return parsedResponse;
+});
+
+const hasContent = computed(() => {
+    const workflow_response = attachedWorkflowFinalResponse.value;
+    return workflow_response && workflow_response.trim() !== "";
+});
+
+const exportToDocx = async () => {
+    if (!finalResponseElement.value || !hasContent.value) {
+        return;
+    }
+
+    isExporting.value = true;
+
+    try {
+        const exporter = new DocumentExporter();
+        const title = attachedWorkflow.value?.title || 'Workflow Output';
+        await exporter.exportToDocx(finalResponseElement.value, title);
+    } catch (error) {
+        console.error('Error exporting DOCX:', error);
+    } finally {
+        isExporting.value = false;
+    }
+};
 
 const dialog = useDialog();
 const overlay = ref();
@@ -74,6 +118,73 @@ const handleImageClick = (event: MouseEvent) => {
 
 <style lang="scss">
 
+.export-button-container {
+    position: absolute;
+    top: 5px;
+    right: 0.75rem;
+    z-index: 10;
+}
+
+.export-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background-color: var(--p-primary-color);
+    color: var(--p-primary-contrast-color);
+    border: none;
+    border-radius: var(--p-border-radius);
+    cursor: pointer;
+    transition: all 0.3s;
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+
+    &:hover:not(:disabled) {
+        background-color: var(--p-primary-hover-color);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    i {
+        font-size: 1rem;
+        flex-shrink: 0;
+    }
+
+    .export-button-text {
+        display: inline;
+        transition: opacity 0.3s;
+    }
+}
+
+.workflow-container {
+    container-type: inline-size;
+    container-name: workflow-panel;
+}
+
+// Hide text when container is narrow (less space)
+@container workflow-panel (max-width: 600px) {
+    .export-button {
+        padding: 0.5rem;
+        
+        .export-button-text {
+            display: none;
+        }
+    }
+}
+
+// Keep text visible for all other sizes (medium and large)
+@container workflow-panel (min-width: 601px) {
+    .export-button {
+        .export-button-text {
+            display: inline;
+        }
+    }
+}
+
 .final-response {
     h1 { font-size: 1.3rem; }
     h2 { font-size: 1.2rem; }
diff --git a/beaker-vue/src/components/sidemenu/SideMenuPanel.vue b/beaker-vue/src/components/sidemenu/SideMenuPanel.vue
index 4c33df55..bf9cd0d0 100644
--- a/beaker-vue/src/components/sidemenu/SideMenuPanel.vue
+++ b/beaker-vue/src/components/sidemenu/SideMenuPanel.vue
@@ -48,6 +48,7 @@ watch(props, (newProps) => {
 
 <style lang="scss">
 .side-panel {
+    position: relative;
     height: 100%;
     display: grid;
     grid:
diff --git a/beaker-vue/src/utils/exportUtils.ts b/beaker-vue/src/utils/exportUtils.ts
new file mode 100644
index 00000000..fd576cc3
--- /dev/null
+++ b/beaker-vue/src/utils/exportUtils.ts
@@ -0,0 +1,608 @@
+import html2canvas from 'html2canvas';
+import { Document, Packer, Paragraph, ImageRun, LevelFormat, HeadingLevel, TextRun, AlignmentType, convertInchesToTwip, Table, TableRow, TableCell, TableLayoutType } from 'docx';
+import type { IImageOptions, INumberingOptions } from 'docx';
+
+export class DocumentExporter {
+
+  private getNumberingConfig(): INumberingOptions {
+    return {
+      config: [
+        {
+          reference: "bullet-list",
+          levels: [
+            {
+              level: 0,
+              format: LevelFormat.BULLET,
+              text: "•",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(0.5), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+            {
+              level: 1,
+              format: LevelFormat.BULLET,
+              text: "◦",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(1), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+          ],
+        },
+        {
+          reference: "numbered-list",
+          levels: [
+            {
+              level: 0,
+              format: LevelFormat.DECIMAL,
+              text: "%1.",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(0.5), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+            {
+              level: 1,
+              format: LevelFormat.LOWER_LETTER,
+              text: "%2.",
+              alignment: AlignmentType.LEFT,
+              style: {
+                paragraph: {
+                  indent: { left: convertInchesToTwip(1), hanging: convertInchesToTwip(0.25) },
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  async captureImages(container: HTMLElement): Promise<string[]> {
+    const images = container.querySelectorAll('img');
+    const imagePromises: Promise<string | null>[] = [];
+
+    images.forEach(img => {
+      imagePromises.push(this.captureImageAsBase64(img));
+    });
+
+    const results = await Promise.all(imagePromises);
+    return results.filter(result => result !== null) as string[];
+  }
+
+  private async captureImageAsBase64(img: HTMLImageElement): Promise<string | null> {
+    try {
+      const canvas = await html2canvas(img, {
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: null,
+        scale: 1,
+        logging: false,
+      });
+      return canvas.toDataURL('image/png');
+    } catch (error) {
+      console.error('Error capturing image:', error);
+      return null;
+    }
+  }
+
+  private getDocumentStyles() {
+    return {
+      paragraphStyles: [
+        {
+          id: "Normal",
+          name: "Normal",
+          basedOn: "Normal",
+          next: "Normal",
+          run: {
+            font: "Calibri",
+            size: 22,
+          },
+          paragraph: {
+            spacing: {
+              before: 120,
+              after: 120,
+            },
+          },
+        },
+        {
+          id: "ListParagraph",
+          name: "List Paragraph",
+          basedOn: "Normal",
+          run: {
+            font: "Calibri",
+            size: 22,
+          },
+          paragraph: {
+            spacing: {
+              before: 60,
+              after: 60,
+            },
+          },
+        },
+      ],
+    };
+  }
+
+  async exportToDocx(elementDOM: HTMLElement, title: string): Promise<void> {
+    const doc = new Document({
+      numbering: this.getNumberingConfig(),
+      styles: this.getDocumentStyles(),
+      sections: [{
+        properties: {},
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: title,
+                font: "Calibri",
+                size: 32,
+                bold: true,
+              }),
+            ],
+            heading: HeadingLevel.TITLE,
+            spacing: { after: 300 },
+          }),
+          
+          ...(await this.htmlToDocxParagraphs(elementDOM)),
+        ],
+      }],
+    });
+
+    const blob = await Packer.toBlob(doc);
+    this.downloadBlob(blob, `${title}.docx`);
+  }
+
+  private async htmlToDocxParagraphs(contentDiv: HTMLElement): Promise<(Paragraph | Table)[]> {
+    const elements: (Paragraph | Table)[] = [];
+
+    for (const element of Array.from(contentDiv.children)) {
+      await this.processElement(element, elements);
+    }
+
+    return elements;
+  }
+
+  private async processElement(element: Element, elements: (Paragraph | Table)[]): Promise<void> {
+    const tagName = element.tagName.toLowerCase();
+
+    switch (tagName) {
+      case 'h1':
+        const h1Text = this.extractTextFromElement(element);
+        if (h1Text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: h1Text,
+                font: "Calibri",
+                size: 32,
+                bold: true,
+                color: "263238",
+              }),
+            ],
+            heading: HeadingLevel.HEADING_1,
+            spacing: { before: 480, after: 240 },
+          }));
+        }
+        break;
+
+      case 'h2':
+        const h2Text = this.extractTextFromElement(element);
+        if (h2Text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: h2Text,
+                font: "Calibri",
+                size: 30,
+                bold: true,
+                color: "37474F",
+              }),
+            ],
+            heading: HeadingLevel.HEADING_2,
+            spacing: { before: 360, after: 180 },
+          }));
+        }
+        break;
+
+      case 'h3':
+        const h3Text = this.extractTextFromElement(element);
+        if (h3Text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: h3Text,
+                font: "Calibri",
+                size: 26,
+                bold: true,
+                color: "455A64",
+              }),
+            ],
+            heading: HeadingLevel.HEADING_3,
+            spacing: { before: 240, after: 120 },
+          }));
+        }
+        break;
+
+      case 'ul':
+        this.processListElement(element, elements, true, 0);
+        break;
+
+      case 'ol':
+        this.processListElement(element, elements, false, 0);
+        break;
+
+      case 'table':
+        this.processTableElement(element, elements);
+        break;
+
+      case 'img':
+        await this.processImageElement(element as HTMLImageElement, elements);
+        break;
+
+      case 'p':
+        // Check if paragraph contains images (common with markdown-rendered images)
+        const imagesInParagraph = element.querySelectorAll('img');
+        if (imagesInParagraph.length > 0) {
+          // Process all images in the paragraph
+          for (const img of Array.from(imagesInParagraph)) {
+            await this.processImageElement(img as HTMLImageElement, elements);
+          }
+          // Then process any remaining text content (excluding images)
+          const textContent = element.cloneNode(true) as Element;
+          const imgClones = textContent.querySelectorAll('img');
+          imgClones.forEach(img => img.remove());
+          const textRuns = this.extractFormattedTextRuns(textContent);
+          if (textRuns.length > 0) {
+            elements.push(new Paragraph({
+              children: textRuns,
+              style: "Normal",
+              spacing: { before: 120, after: 120 }
+            }));
+          }
+        } else {
+          // No image, process as normal paragraph
+          const textRuns = this.extractFormattedTextRuns(element);
+          if (textRuns.length > 0) {
+            elements.push(new Paragraph({
+              children: textRuns,
+              style: "Normal",
+              spacing: { before: 120, after: 120 }
+            }));
+          }
+        }
+        break;
+
+      default:
+        if (element.children.length > 0) {
+          for (const child of Array.from(element.children)) {
+            await this.processElement(child, elements);
+          }
+        }
+        break;
+    }
+  }
+
+  private processTableElement(tableElement: Element, elements: (Paragraph | Table)[]): void {
+    const rows: TableRow[] = [];
+    
+    const tbody = tableElement.querySelector('tbody');
+    const thead = tableElement.querySelector('thead');
+    
+    const firstRow = tableElement.querySelector('tr');
+    let columnCount = 0;
+    if (firstRow) {
+      columnCount = firstRow.querySelectorAll('th, td').length;
+    }
+    
+    if (thead) {
+      const headerRows = thead.querySelectorAll('tr');
+      headerRows.forEach(row => {
+        const cells = row.querySelectorAll('th, td');
+        const tableCells: TableCell[] = [];
+        
+        cells.forEach(cell => {
+          // headers: use simpler approach that allows bold formatting
+          const cellText = this.extractTextFromElement(cell);
+          const cellRuns = this.createFormattedCellRuns(cell, true); // true = bold headers
+          
+          tableCells.push(new TableCell({
+            children: [new Paragraph({
+              children: cellRuns.length > 0 ? cellRuns : [new TextRun({
+                text: cellText,
+                font: "Calibri",
+                size: 22,
+                bold: true,
+              })],
+            })],
+          }));
+        });
+        
+        if (tableCells.length > 0) {
+          rows.push(new TableRow({
+            children: tableCells,
+          }));
+        }
+      });
+    }
+    
+    if (tbody) {
+      const bodyRows = tbody.querySelectorAll('tr');
+      bodyRows.forEach(row => {
+        const cells = row.querySelectorAll('th, td');
+        const tableCells: TableCell[] = [];
+        
+        cells.forEach(cell => {
+          const cellRuns = this.createFormattedCellRuns(cell, false); // false = not bold
+          
+          tableCells.push(new TableCell({
+            children: [new Paragraph({
+              children: cellRuns.length > 0 ? cellRuns : [new TextRun({
+                text: this.extractTextFromElement(cell),
+                font: "Calibri",
+                size: 22,
+              })],
+            })],
+          }));
+        });
+        
+        if (tableCells.length > 0) {
+          rows.push(new TableRow({
+            children: tableCells,
+          }));
+        }
+      });
+    }
+    
+    if (rows.length > 0) {
+      const table = new Table({
+        rows: rows,
+        columnWidths: Array(columnCount).fill(5000),
+        margins: {
+          top: 200,
+          bottom: 200,
+        },
+      });
+      elements.push(table);
+    }
+  }
+
+  private async processImageElement(imgElement: HTMLImageElement, elements: (Paragraph | Table)[]): Promise<void> {
+    try {
+      const imageData = await this.captureImageAsBase64(imgElement);
+      if (imageData) {
+        const imageBuffer = this.base64ToBuffer(imageData);
+        
+        const img = new Image();
+        img.src = imageData;
+        
+        await new Promise((resolve) => {
+          img.onload = resolve;
+        });
+
+        const originalWidth = img.width;
+        const originalHeight = img.height;
+        const aspectRatio = originalWidth / originalHeight;
+        
+        const maxWidth = 600;
+        const maxHeight = 450;
+        
+        let finalWidth: number;
+        let finalHeight: number;
+
+        if (aspectRatio > maxWidth / maxHeight) {
+          finalWidth = maxWidth;
+          finalHeight = maxWidth / aspectRatio;
+        } else {
+          finalHeight = maxHeight;
+          finalWidth = maxHeight * aspectRatio;
+        }
+
+        elements.push(new Paragraph({
+          children: [
+            new ImageRun({
+              data: imageBuffer,
+              transformation: {
+                width: finalWidth,
+                height: finalHeight,
+              },
+            } as IImageOptions),
+          ],
+          spacing: { before: 200, after: 200 },
+        }));
+      }
+    } catch (error) {
+      console.error('Error processing image:', error);
+      elements.push(new Paragraph({
+        children: [
+          new TextRun({
+            text: `[Image could not be processed: ${imgElement.src}]`,
+            font: "Calibri",
+            size: 22,
+            italics: true,
+          }),
+        ],
+      }));
+    }
+  }
+
+  private extractTextFromElement(element: Element): string {
+    return element.textContent?.trim() || '';
+  }
+
+  private extractFormattedTextRuns(element: Element): TextRun[] {
+    const textRuns: TextRun[] = [];
+    this.processTextNodes(element, textRuns);
+    return textRuns;
+  }
+
+  private createFormattedCellRuns(element: Element, forceBold: boolean = false): TextRun[] {
+    const textRuns: TextRun[] = [];
+    this.processCellTextNodes(element, textRuns, forceBold);
+    return textRuns;
+  }
+
+  private processCellTextNodes(node: Node, textRuns: TextRun[], forceBold: boolean): void {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || '';
+      if (text.trim()) {
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+          bold: forceBold,
+        }));
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as Element;
+      const tagName = element.tagName.toLowerCase();
+
+      if (tagName === 'br') {
+        textRuns.push(new TextRun({
+          text: '',
+          break: 1,
+        }));
+        return;
+      }
+
+      const text = element.textContent || '';
+      if (text.trim() && (tagName === 'strong' || tagName === 'b' || tagName === 'em' || tagName === 'i')) {
+        const isBold = forceBold || tagName === 'strong' || tagName === 'b';
+        const isItalic = tagName === 'em' || tagName === 'i';
+
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+          bold: isBold,
+          italics: isItalic,
+        }));
+      } else {
+        Array.from(element.childNodes).forEach(child => {
+          this.processCellTextNodes(child, textRuns, forceBold);
+        });
+      }
+    }
+  }
+
+  private processTextNodes(node: Node, textRuns: TextRun[]): void {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || '';
+      if (text.trim()) {
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+        }));
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as Element;
+      const tagName = element.tagName.toLowerCase();
+
+      if (tagName === 'br') {
+        textRuns.push(new TextRun({
+          text: '',
+          break: 1,
+        }));
+        return;
+      }
+
+      const text = element.textContent || '';
+      if (text.trim() && (tagName === 'strong' || tagName === 'b' || tagName === 'em' || tagName === 'i')) {
+        const isBold = tagName === 'strong' || tagName === 'b';
+        const isItalic = tagName === 'em' || tagName === 'i';
+
+        textRuns.push(new TextRun({
+          text: text,
+          font: "Calibri",
+          size: 22,
+          bold: isBold,
+          italics: isItalic,
+        }));
+      } else {
+        Array.from(element.childNodes).forEach(child => {
+          this.processTextNodes(child, textRuns);
+        });
+      }
+    }
+  }
+
+  private processListElement(listElement: Element, elements: (Paragraph | Table)[], isBulletList: boolean, level: number = 0): void {
+    const numberingReference = isBulletList ? "bullet-list" : "numbered-list";
+    let isFirstListItem = true;
+    
+    Array.from(listElement.children).forEach((li) => {
+      if (li.tagName.toLowerCase() === 'li') {
+        const text = this.extractTextFromListItem(li);
+        if (text.trim()) {
+          elements.push(new Paragraph({
+            children: [
+              new TextRun({
+                text: text,
+                font: "Calibri",
+                size: 22,
+              }),
+            ],
+            style: "ListParagraph",
+            numbering: {
+              reference: numberingReference,
+              level: level,
+            },
+            spacing: { 
+              before: isFirstListItem ? 240 : 60,
+              after: 60
+            }
+          }));
+          isFirstListItem = false;
+        }
+
+        const nestedLists = li.querySelectorAll(':scope > ul, :scope > ol');
+        nestedLists.forEach(nestedList => {
+          const isNestedBullet = nestedList.tagName.toLowerCase() === 'ul';
+          const shouldUseBullets = !isBulletList && isNestedBullet;
+          this.processListElement(
+            nestedList as Element, 
+            elements, 
+            shouldUseBullets, 
+            shouldUseBullets ? 0 : level + 1
+          );
+        });
+      }
+    });
+  }
+
+  private extractTextFromListItem(li: Element): string {
+    const clone = li.cloneNode(true) as Element;
+    const nestedLists = clone.querySelectorAll('ul, ol');
+    nestedLists.forEach(list => list.remove());
+    return this.extractTextFromElement(clone);
+  }
+
+  private base64ToBuffer(base64: string): Uint8Array {
+    const base64Data = base64.split(',')[1];
+    const binaryString = window.atob(base64Data);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes;
+  }
+
+  private downloadBlob(blob: Blob, filename: string): void {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+}
\ No newline at end of file