diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx
index 145b0fc..3d507fc 100644
--- a/frontend/src/components/AsyncMethodComponent.tsx
+++ b/frontend/src/components/AsyncMethodComponent.tsx
@@ -102,14 +102,12 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
-      <h5>
-        Function: {displayName}
-        <DocStringComponent docString={docString} />
-      </h5>
+      <h5>Function: {displayName}</h5>
       <Form onSubmit={execute} ref={formRef}>
         {args}
         <Button id={`button-${id}`} name={name} value={parentPath} type="submit">
-          {runningTask ? 'Stop' : 'Start'}
+          {runningTask ? 'Stop ' : 'Start '}
+          <DocStringComponent docString={docString} />
         </Button>
       </Form>
     </div>
diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx
index 8d8f868..ad01b01 100644
--- a/frontend/src/components/ButtonComponent.tsx
+++ b/frontend/src/components/ButtonComponent.tsx
@@ -48,7 +48,6 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
         <div>Render count: {renderCount.current}</div>
       )}
 
-      <DocStringComponent docString={docString} />
       <ToggleButton
         id={`toggle-check-${id}`}
         type="checkbox"
@@ -58,6 +57,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
         disabled={readOnly}
         onChange={(e) => setChecked(e.currentTarget.checked)}>
         {displayName}
+        <DocStringComponent docString={docString} />
       </ToggleButton>
     </div>
   );
diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx
index 0f5f5c0..bf6cf8b 100644
--- a/frontend/src/components/ColouredEnumComponent.tsx
+++ b/frontend/src/components/ColouredEnumComponent.tsx
@@ -53,10 +53,12 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
-      <DocStringComponent docString={docString} />
       <Row>
         <Col className="d-flex align-items-center">
-          <InputGroup.Text>{displayName}</InputGroup.Text>
+          <InputGroup.Text>
+            {displayName}
+            <DocStringComponent docString={docString} />
+          </InputGroup.Text>
           {readOnly ? (
             // Display the Form.Control when readOnly is true
             <Form.Control
diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index c486ecf..31d5b90 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -52,10 +52,12 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
-      <DocStringComponent docString={docString} />
       <Row>
         <Col className="d-flex align-items-center">
-          <InputGroup.Text>{displayName}</InputGroup.Text>
+          <InputGroup.Text>
+            {displayName}
+            <DocStringComponent docString={docString} />
+          </InputGroup.Text>
           <Form.Select
             aria-label="Default select example"
             value={value}
diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx
index 5678133..368cc0c 100644
--- a/frontend/src/components/GenericComponent.tsx
+++ b/frontend/src/components/GenericComponent.tsx
@@ -95,7 +95,7 @@ export const GenericComponent = React.memo(
         <SliderComponent
           name={name}
           parentPath={parentPath}
-          docString={attribute.doc}
+          docString={attribute.value['value'].doc}
           readOnly={attribute.readonly}
           value={attribute.value['value']}
           min={attribute.value['min']}
@@ -179,7 +179,7 @@ export const GenericComponent = React.memo(
           parentPath={parentPath}
           value={attribute.value['value']['value'] as string}
           readOnly={attribute.readonly}
-          docString={attribute.doc}
+          docString={attribute.value['value'].doc}
           // Add any other specific props for the ImageComponent here
           format={attribute.value['format']['value'] as string}
           addNotification={addNotification}
diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx
index e521806..004bbca 100644
--- a/frontend/src/components/ImageComponent.tsx
+++ b/frontend/src/components/ImageComponent.tsx
@@ -48,14 +48,15 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
           onClick={() => setOpen(!open)}
           style={{ cursor: 'pointer' }} // Change cursor style on hover
         >
-          {displayName} {open ? <ChevronDown /> : <ChevronRight />}
+          {displayName}
+          <DocStringComponent docString={docString} />
+          {open ? <ChevronDown /> : <ChevronRight />}
         </Card.Header>
         <Collapse in={open}>
           <Card.Body>
             {process.env.NODE_ENV === 'development' && (
               <p>Render count: {renderCount.current}</p>
             )}
-            <DocStringComponent docString={docString} />
             {/* Your component JSX here */}
             {format === '' && value === '' ? (
               <p>No image set in the backend.</p>
diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx
index 82cc9a4..7b55f89 100644
--- a/frontend/src/components/MethodComponent.tsx
+++ b/frontend/src/components/MethodComponent.tsx
@@ -89,12 +89,12 @@ export const MethodComponent = React.memo((props: MethodProps) => {
       )}
       <h5 onClick={() => setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}>
         Function: {displayName}
-        <DocStringComponent docString={docString} />
       </h5>
       <Form onSubmit={execute}>
         {args}
         <Button variant="primary" type="submit">
           Execute
+          <DocStringComponent docString={docString} />
         </Button>
       </Form>
 
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index dd2481d..719319e 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -313,10 +313,14 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
-      <DocStringComponent docString={docString} />
       <div className="d-flex">
         <InputGroup>
-          {showName && <InputGroup.Text>{displayName}</InputGroup.Text>}
+          {showName && (
+            <InputGroup.Text>
+              {displayName}
+              <DocStringComponent docString={docString} />
+            </InputGroup.Text>
+          )}
           <Form.Control
             type="text"
             value={inputString}
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index f0cc6fc..95853eb 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -105,10 +105,12 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
         <div>Render count: {renderCount.current}</div>
       )}
 
-      <DocStringComponent docString={docString} />
       <Row>
         <Col xs="auto" xl="auto">
-          <InputGroup.Text>{displayName}</InputGroup.Text>
+          <InputGroup.Text>
+            {displayName}
+            <DocStringComponent docString={docString} />
+          </InputGroup.Text>
         </Col>
         <Col xs="5" xl>
           <Slider
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index 33dc8cc..c76612c 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -70,9 +70,11 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
-      <DocStringComponent docString={docString} />
       <InputGroup>
-        <InputGroup.Text>{displayName}</InputGroup.Text>
+        <InputGroup.Text>
+          {displayName}
+          <DocStringComponent docString={docString} />
+        </InputGroup.Text>
         <Form.Control
           type="text"
           value={inputString}