diff --git a/client/src/Components/App/App.tsx b/client/src/Components/App/App.tsx
index 9c21f4288..d6c41f10b 100644
--- a/client/src/Components/App/App.tsx
+++ b/client/src/Components/App/App.tsx
@@ -4,10 +4,12 @@ import ParameterView from "../ParameterView/ParameterView";
 import TreeView from "../TreeView/TreeView";
 
 function App() {
+    const [parameters, setParameters] = useState([]);
+
     return (
         <div className="App">
-            <TreeView />
-            <ParameterView parameters={null}/>
+            <TreeView setParameters={setParameters}/>
+            <ParameterView inputParameters={parameters}/>
         </div>
     );
 }
diff --git a/client/src/Components/ParameterView/DocumentationText.tsx b/client/src/Components/ParameterView/DocumentationText.tsx
new file mode 100644
index 000000000..a6c6f36c2
--- /dev/null
+++ b/client/src/Components/ParameterView/DocumentationText.tsx
@@ -0,0 +1,25 @@
+import React, {useState} from "react";
+import "./ParameterView.css";
+
+// @ts-ignore
+const DocumentationText = ({inputText}) => {
+
+    const [readMore,setReadMore] = useState(false);
+    const moreTextOption = inputText.length > 50
+
+    const linkName = readMore ? '[Read less]' : '[Read more]'
+
+    return (
+        <div>
+            <p>{!readMore && inputText.substr(0, 50)}
+                {readMore && inputText}
+                <button className="read-more-button" onClick={()=>{setReadMore(!readMore)}}>
+                    {moreTextOption && linkName}
+                </button>
+            </p>
+
+        </div>
+    );
+};
+
+export default DocumentationText;
\ No newline at end of file
diff --git a/client/src/Components/ParameterView/ParameterNode.tsx b/client/src/Components/ParameterView/ParameterNode.tsx
new file mode 100644
index 000000000..f70ea947e
--- /dev/null
+++ b/client/src/Components/ParameterView/ParameterNode.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import "./ParameterView.css";
+import DocumentationText from "./DocumentationText";
+import PythonParameter from "../../model/PythonParameter";
+
+type ParameterProps = {inputParameter: PythonParameter}
+
+const ParameterNode = ({inputParameter}: ParameterProps) => {
+    return (
+        <div className="parametersList">
+
+            <span className="parameter-name">
+                <h4>{inputParameter?.name}</h4>
+            </span>
+
+            <DocumentationText inputText={inputParameter?.docstring}/>
+        </div>
+    );
+};
+
+export default ParameterNode;
+
diff --git a/client/src/Components/ParameterView/ParameterView.css b/client/src/Components/ParameterView/ParameterView.css
new file mode 100644
index 000000000..7c3288d8c
--- /dev/null
+++ b/client/src/Components/ParameterView/ParameterView.css
@@ -0,0 +1,42 @@
+.parameterViewDiv{
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    padding-right: 1rem;
+}
+
+.parameterViewDiv h2{
+    padding-top: 1rem;
+    padding-left: 1rem;
+}
+
+.parameterViewDiv a{
+    padding-left: .5rem;
+}
+
+.parametersList {
+    padding-left: 1rem;
+    padding-bottom: .5rem;
+}
+
+.parameter-name {
+    font-weight: bold;
+}
+
+.visibility-indicator {
+    display: inline-block;
+    width: 1rem;
+}
+
+.read-more-button {
+    background: none!important;
+    border: none;
+    /*padding: 0!important;*/
+    padding-left: 0.5rem;
+    /*optional*/
+    font-family: arial, sans-serif;
+    /*input has OS specific font-family*/
+    color: #069;
+    text-decoration: underline;
+    cursor: pointer;
+}
diff --git a/client/src/Components/ParameterView/ParameterView.js b/client/src/Components/ParameterView/ParameterView.js
deleted file mode 100644
index 010c9b7e9..000000000
--- a/client/src/Components/ParameterView/ParameterView.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-const ParameterView = ({parameters}) => {
-
-    return (
-        <div>
-            {
-                parameters?.map(function (parameters) {
-                    return (<p key={parameters.name}> {parameters.name}: {parameters.type} </p>)
-                })
-            }
-        </div>
-    )
-};
-
-export default ParameterView;
-
diff --git a/client/src/Components/ParameterView/ParameterView.tsx b/client/src/Components/ParameterView/ParameterView.tsx
new file mode 100644
index 000000000..f092bad63
--- /dev/null
+++ b/client/src/Components/ParameterView/ParameterView.tsx
@@ -0,0 +1,24 @@
+import ParameterNode from "./ParameterNode";
+import React from "react";
+import PythonParameter from "../../model/PythonParameter";
+
+type ParameterViewProps = {inputParameters: PythonParameter[]}
+
+const ParameterView = ({inputParameters}: ParameterViewProps) => {
+
+    return (
+
+        <div className="parameterViewDiv">
+            <h2>Parameters</h2>
+            {
+                inputParameters?.map(function (parameters) {
+                    return (<ParameterNode key={parameters.name} inputParameter={parameters} />)
+                })
+            }
+
+        </div>
+    )
+};
+
+export default ParameterView;
+