diff --git a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx
index f6ed1a97be..54e0f1b8ad 100644
--- a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx
@@ -1,3 +1,5 @@
+// Used on: Dashboard > activity, Host details > past activity
+
 import React from "react";
 import { useQuery } from "react-query";
 
@@ -115,16 +117,17 @@ export const AppInstallDetails = ({
         </div>
         {showCommandPayload && (
           <div className={`${baseClass}__script-output`}>
-            Request payload:
-            <Textarea className={`${baseClass}__output-textarea`}>
+            <Textarea label="Request payload:" variant="code">
               {result.payload}
             </Textarea>
           </div>
         )}
         {showCommandResponse && (
           <div className={`${baseClass}__script-output`}>
-            The response from {formattedHost}:
-            <Textarea className={`${baseClass}__output-textarea`}>
+            <Textarea
+              label={`The response from ${formattedHost}:`}
+              variant="code"
+            >
               {result.result}
             </Textarea>
           </div>
diff --git a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss
index ae9deeeef6..889aa6b93b 100644
--- a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss
+++ b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss
@@ -10,20 +10,7 @@
     gap: $pad-small;
     margin: 0;
     .icon {
-      padding-top: 3px;
       align-self: flex-start;
     }
   }
-  &__script-output {
-    padding-top: $pad-xlarge;
-    .textarea {
-      margin-top: $pad-medium;
-      overflow-wrap: break-word;
-    }
-  }
-
-  &__output-textarea {
-    max-height: 300px;
-    overflow-y: auto;
-  }
 }
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx
index 91d13ad1ed..d7b5599bc3 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx
@@ -1,3 +1,5 @@
+// Used on: Dashboard > activity, Host details > past activity
+
 import React from "react";
 import { useQuery } from "react-query";
 import { formatDistanceToNow } from "date-fns";
@@ -79,8 +81,10 @@ const Output = ({
 }) => {
   return (
     <div className={`${baseClass}__script-output`}>
-      {SOFTWARE_INSTALL_OUTPUT_DISPLAY_LABELS[displayKey]}:
-      <Textarea className={`${baseClass}__output-textarea`}>
+      <Textarea
+        label={`${SOFTWARE_INSTALL_OUTPUT_DISPLAY_LABELS[displayKey]}:`}
+        variant="code"
+      >
         {result[displayKey]}
       </Textarea>
     </div>
@@ -126,24 +130,22 @@ export const SoftwareInstallDetails = ({
 
   return (
     <>
-      <div className={`${baseClass}__software-install-details`}>
-        <StatusMessage
-          result={
-            result.host_display_name ? result : { ...result, host_display_name } // prefer result.host_display_name (it may be empty if the host was deleted) otherwise default to whatever we received via props
-          }
-        />
-        {result.status !== "pending_install" && (
-          <>
-            {result.pre_install_query_output && (
-              <Output displayKey="pre_install_query_output" result={result} />
-            )}
-            {result.output && <Output displayKey="output" result={result} />}
-            {result.post_install_script_output && (
-              <Output displayKey="post_install_script_output" result={result} />
-            )}
-          </>
-        )}
-      </div>
+      <StatusMessage
+        result={
+          result.host_display_name ? result : { ...result, host_display_name } // prefer result.host_display_name (it may be empty if the host was deleted) otherwise default to whatever we received via props
+        }
+      />
+      {result.status !== "pending_install" && (
+        <>
+          {result.pre_install_query_output && (
+            <Output displayKey="pre_install_query_output" result={result} />
+          )}
+          {result.output && <Output displayKey="output" result={result} />}
+          {result.post_install_script_output && (
+            <Output displayKey="post_install_script_output" result={result} />
+          )}
+        </>
+      )}
     </>
   );
 };
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/_styles.scss b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/_styles.scss
index 3468eeca9c..fd8bd2507d 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/_styles.scss
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/_styles.scss
@@ -1,21 +1,19 @@
 .software-install-details {
   overflow-wrap: anywhere; // Prevent long software name overflow
 
+  &__modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-medium;
+  }
+
   &__status-message {
     display: flex;
     align-items: center;
     gap: $pad-small;
     margin: 0;
     .icon {
-      padding-top: 3px;
       align-self: flex-start;
     }
   }
-  &__script-output {
-    padding-top: $pad-xlarge;
-    .textarea {
-      margin-top: $pad-medium;
-      overflow-wrap: break-word;
-    }
-  }
 }
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
index e0838b0717..3278fd208a 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
@@ -1,3 +1,5 @@
+// Used on: Dashboard > activity, Host details > past activity
+
 import Button from "components/buttons/Button";
 import DataError from "components/DataError";
 import Icon from "components/Icon";
@@ -127,15 +129,13 @@ const SoftwareUninstallDetailsModal = ({
         {!isPendingStatus(status) && scriptResult && (
           <>
             <div className={`${baseClass}__script-output`}>
-              Uninstall script content:
-              <Textarea className={`${baseClass}__output-textarea`}>
+              <Textarea label="Uninstall script content:" variant="code">
                 {scriptResult.script_contents}
               </Textarea>
             </div>
 
             <div className={`${baseClass}__script-output`}>
-              Uninstall script output:
-              <Textarea className={`${baseClass}__output-textarea`}>
+              <Textarea label="Uninstall script output:" variant="code">
                 {scriptResult.output}
               </Textarea>
             </div>
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/_styles.scss b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/_styles.scss
index ca0ad4a2c1..f1e96caadc 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/_styles.scss
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/_styles.scss
@@ -13,11 +13,4 @@
       align-self: flex-start;
     }
   }
-  &__script-output {
-    .textarea {
-      margin-top: $pad-medium;
-      overflow-wrap: break-word;
-      font-family: "SourceCodePro", $monospace;
-    }
-  }
 }
diff --git a/frontend/components/Textarea/Textarea.stories.tsx b/frontend/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 0000000000..4ba4e0df56
--- /dev/null
+++ b/frontend/components/Textarea/Textarea.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Textarea from ".";
+import "../../index.scss";
+
+const meta: Meta<typeof Textarea> = {
+  component: Textarea,
+  title: "Components/Textarea",
+  args: {
+    children: "Default textarea content",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const ExampleWithLabelAndCodeVariant: Story = {
+  args: {
+    variant: "code",
+    label: "Textarea label:",
+    children:
+      "const example = 'This is code styled text';\n// With line breaks preserved.\n\n Text with\r\ncarriage returns\r\nconverted to\nline breaks",
+  },
+};
diff --git a/frontend/components/Textarea/Textarea.tsx b/frontend/components/Textarea/Textarea.tsx
index 5a068bd624..88b2f1d544 100644
--- a/frontend/components/Textarea/Textarea.tsx
+++ b/frontend/components/Textarea/Textarea.tsx
@@ -6,10 +6,13 @@ const baseClass = "textarea";
 interface ITextareaProps {
   children: React.ReactNode;
   className?: string;
+  label?: React.ReactNode;
+  /** code - code font, max height 300px */
+  variant?: "code" | "default";
 }
 
 // A textarea component that encapsulates common styles and functionality.
-const Textarea = ({ children, className }: ITextareaProps) => {
+const Textarea = ({ children, className, label, variant }: ITextareaProps) => {
   // this is to preserve line breaks when we encounter a carriage return character.
   // We could not find a way to preserve line breaks in the CSS alone for this
   // character.
@@ -17,8 +20,17 @@ const Textarea = ({ children, className }: ITextareaProps) => {
     children = children.replace(/\r/g, "\n");
   }
 
-  const classNames = classnames(baseClass, className);
-  return <div className={classNames}>{children}</div>;
+  const wrapperClasses = classnames(`${baseClass}-wrapper`, className);
+  const textareaClasses = classnames(baseClass, {
+    [`${baseClass}--code`]: variant === "code",
+  });
+
+  return (
+    <div className={wrapperClasses}>
+      {label && <div className={`${baseClass}__label`}>{label}</div>}
+      <div className={textareaClasses}>{children}</div>
+    </div>
+  );
 };
 
 export default Textarea;
diff --git a/frontend/components/Textarea/_styles.scss b/frontend/components/Textarea/_styles.scss
index b8725ca4e1..f3f77394ce 100644
--- a/frontend/components/Textarea/_styles.scss
+++ b/frontend/components/Textarea/_styles.scss
@@ -4,4 +4,17 @@
   border: 1px solid $ui-fleet-black-10;
   background-color: $ui-off-white;
   white-space: pre-wrap;
+
+  &-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-medium;
+  }
+
+  &--code {
+    overflow-wrap: break-word;
+    overflow-y: auto;
+    font-family: "SourceCodePro", $monospace;
+    max-height: 300px;
+  }
 }
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx b/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
index 77bcd3f554..fa088ca0b6 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
+++ b/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
@@ -268,8 +268,7 @@ const ScriptDetailsModal = ({
         className={`${baseClass}__script-content  modal-scrollable-content`}
         ref={topDivRef}
       >
-        <span>Script content:</span>
-        <Textarea className={`${baseClass}__script-content-textarea`}>
+        <Textarea label="Script content" variant="code">
           {scriptContent}
         </Textarea>
         {runScriptHelpText && (