diff --git a/config/webpack.config.js b/config/webpack.config.js
index dd31696f..4930c854 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -757,3 +757,19 @@ module.exports = function (webpackEnv) {
     performance: false,
   };
 };
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.mjs$/,
+        resolve: {
+          fullySpecified: false,
+        },
+        ...(isEnvDevelopment && {
+          use: ['source-map-loader'],
+        }),
+        exclude: /node_modules\/@mediapipe\/tasks-vision/,
+      },
+    ],
+  },
+};
diff --git a/src/components/Experiment/QuickInput/useQuickInputControl.js b/src/components/Experiment/QuickInput/useQuickInputControl.js
index 50b55682..b3ddd868 100644
--- a/src/components/Experiment/QuickInput/useQuickInputControl.js
+++ b/src/components/Experiment/QuickInput/useQuickInputControl.js
@@ -133,7 +133,10 @@ export default function useQuickInputControl(props) {
       // Data to be sent to API
       if (typeof url !== 'object') {
         selectedData = [{ src: url, inputType: task.inputType }];
-      } else {
+      } else if (Array.isArray(url)) {
+        selectedData = url.map(u => ({ inputType: task.inputType, src: u }));
+      }
+      else {
         selectedData = [{ inputType: task.inputType, ...url }];
       }
     }
diff --git a/src/components/Experiment/QuickOutput/InputPreview.js b/src/components/Experiment/QuickOutput/InputPreview.js
index 7d859b89..8fc15acb 100644
--- a/src/components/Experiment/QuickOutput/InputPreview.js
+++ b/src/components/Experiment/QuickOutput/InputPreview.js
@@ -1,9 +1,9 @@
 import React from "react";
 import "./InputPreview.scss";
 import useBEMNaming from "../../../common/useBEMNaming";
+import { ReactComponent as DocumentIcon } from "../../../resources/icons/icon-document.svg";
 import CsvIcon from "../../../../src/resources/icons/icon-csv-file.svg";
 
-
 const defaultProps = {
   className: "input-preview",
   input: "",
@@ -27,28 +27,26 @@ export default function InputPreview(givenProps) {
   const getInput = () => {
     switch (props.inputType) {
       case "text":
-        return <p className={getElement("text")}>{props.input.src}</p>;
+        let shortened = props.input.src.split(" ").slice(0, 5).join(" ");
+        shortened = shortened + (shortened.length < props.input.src.length ? "..." : "");
+        return <p className={getElement("text")} title={props.input.src}>{shortened}</p>;
       case "audio":
-        return <audio className={getElement("audio")} controls src={props.input.src} />;
+        return props.input?.src?.title ? <audio className={getElement("audio")} controls src={props.input.src.src} title={props.input.src.title} /> : <audio className={getElement("audio")} controls src={props.input.src} />;
       case "image":
         return <img className={getElement("image")} src={props.input.src} />;
       case "video":
         return <video className={getElement("video")} src={props.input.src} controls />;
+      case "document":
+        return <button className={getElement("document")}><DocumentIcon className='icon' /><a href={props.input.src} target='_blank' ><span>{props.input.description ?? "Document"}</span></a></button>;
       case "csv":
         return (
           <>
-            <a 
-              download="input.csv"
-              href={props.input[0].src}
-              className={getElement('csv')}
-            >
+            <a download="input.csv" href={props.input[0].src} className={getElement('csv')}>
               <img src={CsvIcon} alt="download-csv-icon" />
-              <p>
-                Download
-              </p>
-            </a>            
-          </>          
-        )
+              <p>Download</p>
+            </a>
+          </>
+        );
       default:
         return <p>Not currently supported</p>;
     }
@@ -56,16 +54,19 @@ export default function InputPreview(givenProps) {
 
   return (
     <div className={getBlock()}>
-      <h3 className={getElement("title")}>
-        Input {inputTypes[props.inputType]}
-      </h3>
+      {props?.experimentInputPreview ||
+        <h3 className={getElement("title")}>
+          Input {inputTypes[props.inputType]}
+        </h3>
+      }
       {getInput()}
-      <button
-        className={getElement("back-button")}
-        onClick={props.onBackClicked}
-      >
-        Try a different {inputTypes[props.inputType]?.toLowerCase()}
-      </button>
+      {props?.experimentInputPreview ||
+        <button
+          className={getElement("back-button")}
+          onClick={props.onBackClicked}
+        >
+          Try a different {inputTypes[props.inputType]?.toLowerCase()}
+        </button>}
     </div>
   );
 }
diff --git a/src/components/Experiment/QuickOutput/MultiInputPreview.js b/src/components/Experiment/QuickOutput/MultiInputPreview.js
index ceb0cd73..4ee14fbb 100644
--- a/src/components/Experiment/QuickOutput/MultiInputPreview.js
+++ b/src/components/Experiment/QuickOutput/MultiInputPreview.js
@@ -20,11 +20,11 @@ export default function MultiInputPreview(givenProps) {
 
   const getInputs = (input) => {
     switch (input.inputType) {
-      case QuickInputType.Text:
-        return (
-          <p className={getElement("text")}>{input.src}</p>
-        );
-      case QuickInputType.Document:
+      case TaskInputTypes.Text:
+        let shortened = input.src.split(" ").slice(0, 5).join(" ");
+        shortened = shortened + (shortened.length < input.src.length ? "..." : "");
+        return <p className={getElement("text")} title={input.src}>{shortened}</p>;
+      case TaskInputTypes.Document:
         return (
           <button className={getElement("document")}>
             <DocumentIcon className='icon' />
@@ -52,9 +52,9 @@ export default function MultiInputPreview(givenProps) {
 
   return (
     <div className={getBlock()}>
-      <h3 className={getElement("title")}>
+      {props.experimentInputPreview || <h3 className={getElement("title")}>
         Inputs
-      </h3>
+      </h3>}
       <div className={getElement("container")}>
         {
           props.inputs.length > 2 ? (
@@ -90,12 +90,13 @@ export default function MultiInputPreview(givenProps) {
         }
       </div>
 
-      <button
+      {props.experimentInputPreview || <button
         className={getElement("back-button")}
         onClick={props.onBackClicked}
       >
         Try different inputs
-      </button>
+      </button>}
     </div>
   );
+
 }
diff --git a/src/components/ExperimentDetails/ExperimentDetailPage.jsx b/src/components/ExperimentDetails/ExperimentDetailPage.jsx
index 6ec6c43b..3b090038 100644
--- a/src/components/ExperimentDetails/ExperimentDetailPage.jsx
+++ b/src/components/ExperimentDetails/ExperimentDetailPage.jsx
@@ -24,7 +24,7 @@ export default function ExperimentDetailPage(props) {
     return "33%";
   };
 
-  let trialComponents = props.experiment.trials.map((trial, trialIndex) => (
+  let trialComponents = props.experiment.trials?.map((trial, trialIndex) => (
     <div
       style={{ width: calculateCardWidth() }}
       key={trialIndex}
@@ -57,6 +57,7 @@ export default function ExperimentDetailPage(props) {
           selectInput={props.updateInput}
           getAddModelsLink={props.getAddModelsLink}
           task={props.task}
+          hasMultipleInputs={props.hasMultipleInputs}
         />
         <div className={getElement("scroll-container")}>
           <div className={getElement("trial-cards")}>{trialComponents}</div>
diff --git a/src/components/ExperimentDetails/ExperimentDetailPage.scss b/src/components/ExperimentDetails/ExperimentDetailPage.scss
index 2f5336c9..fc930d1c 100644
--- a/src/components/ExperimentDetails/ExperimentDetailPage.scss
+++ b/src/components/ExperimentDetails/ExperimentDetailPage.scss
@@ -1,7 +1,6 @@
 @import "../../App";
 
 .experiment-detail-page {
-
   &__sticky-bar {
     position: fixed;
     bottom: 0;
@@ -24,13 +23,12 @@
     }
   }
 
-
   &__trial-cards {
     display: flex;
     flex-direction: row-reverse;
     width: 100%;
     max-width: 100%;
-    overflow-x: scroll;
+    overflow-x: auto;
     background: $white;
     padding: 20px 12px;
     transform: rotate(180deg);
@@ -40,16 +38,12 @@
       transform: none;
       overflow-x: hidden;
       align-items: center;
-
-
     }
 
     @include maxWidth(550px) {
       padding-left: 0;
       padding-right: 0;
     }
-
-
   }
 
   &__trials-header {
@@ -91,7 +85,6 @@
       margin-left: 0;
     }
 
-
     @include tabletWidth {
       transform: none;
       margin-left: 0;
diff --git a/src/components/ExperimentDetails/Inputs/ExperimentInputs.jsx b/src/components/ExperimentDetails/Inputs/ExperimentInputs.jsx
index b66336ab..d11a1ffe 100644
--- a/src/components/ExperimentDetails/Inputs/ExperimentInputs.jsx
+++ b/src/components/ExperimentDetails/Inputs/ExperimentInputs.jsx
@@ -1,9 +1,7 @@
 import useBEMNaming from "../../../common/useBEMNaming";
 import React, { useEffect, useRef, useState } from "react";
 import "./ExperimentInputs.scss";
-import Button from "../../Buttons/Button";
-import NoInputs from "./NoInputs";
-import InputPreview from "./InputPreview";
+import Button from "../../Buttons/Button"; import NoInputs from "./NoInputs";
 import InputSelectors from "./InputSelectors";
 
 export const ExperimentInputs = (props) => {
@@ -27,13 +25,13 @@ export const ExperimentInputs = (props) => {
     };
   }, [isOpen]);
 
-  const selectedIndex = props.inputs.indexOf(props.selectedInput);
+  const selectedIndex = props.selectedInput && (props.hasMultipleInputs ? props.inputs.indexOf(props.selectedInput) : props.inputs.findIndex(input => input.src === props.selectedInput.src));
 
-  const hasNoInputs = props.inputs.length === 0 || props.inputs[0] === "";
+  const hasNoInputs = !props.inputs || props.inputs.length === 0 || props.inputs[0] === "";
 
-  const handleSelect = (input) => {
+  const handleSelect = (input, idx) => {
     setIsOpen(false);
-    props.selectInput(input);
+    props.selectInput(input, idx);
   };
 
   if (hasNoInputs)
@@ -42,33 +40,27 @@ export const ExperimentInputs = (props) => {
   return (
     <div className={getBlock()}>
       <div ref={handlerRef} className={getElement("selection-area")}>
-        <InputPreview
-          toggleOpen={() => setIsOpen(!isOpen)}
-          selectedInput={props.selectedInput}
+
+        <Button
+          content={"Add model"}
+          icon="plus"
+          isPrimary={false}
+          isSmall={false}
+          link={props.getAddModelsLink(props)}
+        />
+
+        <InputSelectors
+          inputs={props.inputs}
           selectedIndex={selectedIndex}
-          isOpen={isOpen}
+          handleSelect={handleSelect}
+          showAddInputModal={props.showAddInputModal}
+          showDeleteInputModal={props.showDeleteInputModal}
           task={props.task}
         />
 
-        {isOpen && (
-          <InputSelectors
-            inputs={props.inputs}
-            selectedIndex={selectedIndex}
-            handleSelect={handleSelect}
-            showAddInputModal={props.showAddInputModal}
-            showDeleteInputModal={props.showDeleteInputModal}
-            task={props.task}
-          />
-        )}
       </div>
 
-      <Button
-        content={"Add model"}
-        icon="plus"
-        isPrimary={false}
-        isSmall={false}
-        link={props.getAddModelsLink(props)}
-      />
+
     </div>
   );
 };
diff --git a/src/components/ExperimentDetails/Inputs/ExperimentInputs.scss b/src/components/ExperimentDetails/Inputs/ExperimentInputs.scss
index c36bc5b3..4306f5ad 100644
--- a/src/components/ExperimentDetails/Inputs/ExperimentInputs.scss
+++ b/src/components/ExperimentDetails/Inputs/ExperimentInputs.scss
@@ -3,6 +3,7 @@
 .experiment-inputs {
   align-items: center;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   width: 100%;
 
@@ -14,12 +15,13 @@
 
   .secondary-button {
     height: 48px;
+    margin-left: auto;
+    margin-bottom: 20px;
   }
 
   &__selection-area {
     margin-bottom: 32px;
-    position: relative;
-    width: clamp(200px, 500px, 400px);
+    width: 100%;
 
     @include tabletWidth {
       max-width: 300px;
diff --git a/src/components/ExperimentDetails/Inputs/InputPreview.js b/src/components/ExperimentDetails/Inputs/InputPreview.js
deleted file mode 100644
index c7864706..00000000
--- a/src/components/ExperimentDetails/Inputs/InputPreview.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import "./InputPreview.scss";
-import { TaskInputTypes } from "../../../helpers/TaskInputTypes";
-import Task from "../../../helpers/Task";
-import { InputPreviewImage } from "./InputPreviewImage";
-import { InputPreviewText } from "./InputPreviewText";
-
-export default function InputPreview(props) {
-  const task = props.task ?? Task.image_classification;
-
-  if (task.inputType === TaskInputTypes.Text)
-    return <InputPreviewText {...props} />;
-  
-  return <InputPreviewImage {...props} />;
-}
diff --git a/src/components/ExperimentDetails/Inputs/InputPreviewImage.js b/src/components/ExperimentDetails/Inputs/InputPreviewImage.js
index 5219cc04..45a4701d 100644
--- a/src/components/ExperimentDetails/Inputs/InputPreviewImage.js
+++ b/src/components/ExperimentDetails/Inputs/InputPreviewImage.js
@@ -3,7 +3,6 @@ import React from "react";
 
 export function InputPreviewImage(props) {
   const { getElement } = useBEMNaming("input-preview");
-
   return (
     <button
       className={getElement(
diff --git a/src/components/ExperimentDetails/Inputs/InputSelectors.js b/src/components/ExperimentDetails/Inputs/InputSelectors.js
index 4d073824..3dc95b54 100644
--- a/src/components/ExperimentDetails/Inputs/InputSelectors.js
+++ b/src/components/ExperimentDetails/Inputs/InputSelectors.js
@@ -2,69 +2,59 @@ import React from "react";
 import { ReactComponent as DeleteIcon } from "../../../resources/icons/delete.svg";
 import "./InputSelectors.scss";
 import useBEMNaming from "../../../common/useBEMNaming";
-import { TaskInputTypes } from "../../../helpers/TaskInputTypes";
+import InputPreview from "../../Experiment/QuickOutput/InputPreview";
+import MultiInputPreview from "../../Experiment/QuickOutput/MultiInputPreview";
 
 export default function InputSelectors(props) {
   const { getBlock, getElement } = useBEMNaming("input-selector");
-
-  const getInputPreviewContent = (input, index) => {
-    if (props.task.inputType === TaskInputTypes.Text) return getTextInputPreviewContent(input, index);
-
+  const getInputPreviewContent = (inputs, index) => {
     return (
       <>
-        <img
-          alt={`Input ${index + 1}`}
-          className={getElement("input-selector-img")}
-          src={input}
-        />
+        {props.task?.inputs?.length > 1 ?
+          <MultiInputPreview inputs={inputs} experimentInputPreview={true} className={getElement("input-preview")} />
+          :
+          <InputPreview
+            input={inputs}
+            inputType={inputs.inputType.toLowerCase()}
+            experimentInputPreview={true}
+            className={getElement("input-preview")}
+          />
+        }
         Input {index + 1}
       </>
     );
   };
 
-  const getTextInputPreviewContent = (input, index) => {
-      let shortened = input.split(" ").slice(0, 5).join(" ");
-      shortened = shortened + (shortened.length < input.length ? "..." : "");
-
-      return (
-          <>
-              <div className={getElement("input-selector-text")}>
-                  <div className={getElement("input-selector-text__text")}>{shortened}</div>
-                  <div className={getElement("input-selector-text__label")}>Input {index + 1}</div>
-              </div>
-          </>
-      )
-  };
-
   return (
     <div className={getBlock()}>
-      {props.inputs.map((input, idx) => (
-        <div
+      <div className={getElement("input-selector-container")}>
+        {props.inputs && props.inputs.map((input, idx) => (
+          <div
             key={idx}
-          className={getElement(
-            `input-selector-btn ${
-              idx === props.selectedIndex && "input-selector-btn-selected"
-            }`
-          )}
-        >
-          <button
-            onClick={() => props.handleSelect(input)}
-            className={getElement("input-selector-btn-content")}
-          >
-            {getInputPreviewContent(input, idx)}
-          </button>
-          <button
-            onClick={() => props.showDeleteInputModal(input)}
             className={getElement(
-              `input-selector-delete ${
-                idx === props.selectedIndex && "input-selector-delete-selected"
+              `input-selector-btn ${idx === props.selectedIndex && "input-selector-btn-selected"
               }`
             )}
           >
-            <DeleteIcon />
-          </button>
-        </div>
-      ))}
+            <button
+              onClick={() => props.handleSelect(input, idx)}
+              className={getElement("input-selector-btn-content")}
+            >
+
+              {getInputPreviewContent(input, idx)}
+            </button>
+            <button
+              onClick={() => props.showDeleteInputModal(input)}
+              className={getElement(
+                `input-selector-delete ${idx === props.selectedIndex && "input-selector-delete-selected"
+                }`
+              )}
+            >
+              <DeleteIcon />
+            </button>
+          </div>
+        ))}
+      </div>
       <div className={getElement("add-input-area")}>
         <button
           onClick={props.showAddInputModal}
diff --git a/src/components/ExperimentDetails/Inputs/InputSelectors.scss b/src/components/ExperimentDetails/Inputs/InputSelectors.scss
index 13a5e48c..15c8192e 100644
--- a/src/components/ExperimentDetails/Inputs/InputSelectors.scss
+++ b/src/components/ExperimentDetails/Inputs/InputSelectors.scss
@@ -1,18 +1,40 @@
 @import "../../../App";
 
 .input-selector {
-
   background-color: $white;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   box-shadow: 0px 0px 15px -2px #00000040;
   margin-top: 4px;
-  position: absolute;
-  top: 100%;
   width: 100%;
   z-index: 5;
+  display: flex;
+  overflow-x: auto;
+  padding: 0px 20px;
+  align-items: center;
+  justify-content: center;
+
+  &__input-selector-container {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 16px 0;
+    width: 80%;
+    overflow-x: auto;
+  }
 
   &__input-selector {
+    &-delete:hover {
+      svg {
+        rect {
+          fill: rgb(180, 2, 2);
+        }
+
+        path {
+          fill: $white;
+        }
+      }
+    }
     &-delete {
       margin-right: 8px;
 
@@ -28,20 +50,6 @@
           fill: $white;
         }
       }
-
-    }
-
-    &-img {
-      margin-right: 20px;
-      max-height: 60px;
-      max-width: 110px;
-    }
-
-    &-text {
-      display: flex;
-      flex: 1 1;
-      justify-content: space-between;
-      margin-right: 16px;
     }
 
     &-btn {
@@ -50,8 +58,9 @@
       display: flex;
       justify-content: space-between;
       padding: 8px;
-
-
+      flex-direction: column;
+      gap: 10px;
+      margin: 0 20px;
       &:hover {
         background: rgba($azul, 0.15);
       }
@@ -61,10 +70,11 @@
         color: $charcoalLightest;
         @include headline6;
         display: flex;
+        flex-direction: column;
         width: 100%;
+        gap: 10px;
       }
 
-
       &-selected {
         background-color: $azulDarkest;
         border: none;
@@ -73,9 +83,17 @@
           background: $azulDarkest;
         }
 
-        .input-selector__input-selector-btn-content {
+        .input-selector__input-selector-btn-content,
+        .input-selector__input-preview__document a {
           color: $white;
         }
+        .input-selector__input-preview__document svg {
+          fill: $white;
+        }
+
+        .multi-input-preview__text {
+          color: black;
+        }
 
         .input_selector__input-selector-delete {
           margin-right: 9px;
@@ -94,14 +112,32 @@
     }
   }
 
-
   &__add-input-area {
     display: flex;
     justify-content: center;
-    margin: 16px auto;
+    margin-left: auto;
 
     &-btn {
       @include secondaryButtonWithIconAfter("plus-sign.svg");
     }
   }
-}
\ No newline at end of file
+
+  &__input-preview {
+    &__image {
+      max-height: 60px;
+      max-width: 110px;
+    }
+
+    &__text {
+      display: flex;
+      flex: 1 1;
+      justify-content: space-between;
+      margin-right: 16px;
+    }
+    &__document {
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+}
diff --git a/src/helpers/MultipleSort.js b/src/helpers/MultipleSort.js
index f9b45426..73e65688 100644
--- a/src/helpers/MultipleSort.js
+++ b/src/helpers/MultipleSort.js
@@ -1,5 +1,5 @@
 export default function MultipleSort(array, options) {
-  return array.sort((a, b) => {
+  return array?.sort((a, b) => {
     for (let i = 0; i < options.length; i++) {
       let [option, direction] = normalizeOption(options[i]);
       let aVal = getValue(option, a), bVal = getValue(option, b);
@@ -18,7 +18,7 @@ const getValue = (option, value) => {
   if (typeof (option) === "function") return option(value);
 
   return value[option];
-}
+};
 
 export const ascending = "asc";
 export const descending = "desc";
diff --git a/src/helpers/getExperimentId.js b/src/helpers/getExperimentId.js
new file mode 100644
index 00000000..2969bc7e
--- /dev/null
+++ b/src/helpers/getExperimentId.js
@@ -0,0 +1,5 @@
+export default function getExperimentId(location) {
+    const pathSegments = location.pathname.split('/');
+    const experimentIndex = pathSegments.indexOf('experiment');
+    return experimentIndex !== -1 ? pathSegments[experimentIndex + 1] : null;
+}
\ No newline at end of file
diff --git a/src/routes/AddModelListContainer.js b/src/routes/AddModelListContainer.js
index 4daf194d..df11a502 100644
--- a/src/routes/AddModelListContainer.js
+++ b/src/routes/AddModelListContainer.js
@@ -1,5 +1,10 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import ModelListContainer from "./ModelListContainer";
+import { useLocation, useNavigate } from "react-router-dom";
+import getExperimentId from "../helpers/getExperimentId";
+import GetApiHelper from "../helpers/api";
+import Task from "../helpers/Task";
+import { getTaskFromQueryString } from "../helpers/QueryParsers";
 
 let experimentSubscription = null;
 let trialSubscriptions = [];
@@ -7,6 +12,11 @@ let trialSubscriptions = [];
 export default function AddModelListContainer(props) {
     const [trials, setTrials] = useState([]);
     const [experiment, setExperiment] = useState(null);
+    const location = useLocation();
+    const experimentID = getExperimentId(location);
+    const api = GetApiHelper();
+    const navigate = useNavigate();
+
 
     const getTrials = (experiment) => {
         experiment.trials.forEach(trial => {
@@ -19,11 +29,11 @@ export default function AddModelListContainer(props) {
                             return [...oldState, trialOutput];
                         }
                         return oldState;
-                    })
+                    });
                 }
             }));
-        })
-    }
+        });
+    };
 
     const getExperiment = (experimentId) => {
         experimentSubscription = api.getExperiment(experimentId).subscribe({
@@ -32,14 +42,11 @@ export default function AddModelListContainer(props) {
                 setExperiment(experiment);
             }
         });
-    }
+    };
+
 
-    const getCurrentTask = () => {
-        let trial = trials[0];
-        if (trial)
-            return trial.model.output.type;
-        return "";
-    }
+    const getCurrentTask = () => getTaskFromQueryString(window.location.search);
+    const hasMultipleInputs = getCurrentTask()?.inputs?.length > 1;
 
     const runModels = (selectedModels) => {
         const modelsFromTrials = getModelsFromTrials();
@@ -48,26 +55,28 @@ export default function AddModelListContainer(props) {
         });
 
         const inputs = getInputsFromTrials();
-
         const trialPromises = filteredSelectedModels.map((model) => {
-            return inputs.map(inputUrl => api.runTrial(model, inputUrl, experiment.id));
+            inputs.forEach(input => api.runTrial(model, hasMultipleInputs ? input : [input], experimentID));
         }).flat();
-
         Promise.all(trialPromises).then(() => {
-            props.history.push(`/experiment/${experiment.id}`);
+            navigate(`/experiment/${experimentID}?task=${getCurrentTask()}`);
         });
-    }
+    };
 
     const getInputsFromTrials = () => {
-        return trials.filter((t, i, a) => a.findIndex(tr => tr.inputs[0] === t.inputs[0]) === i).map(trial => trial.inputs[0]);
-    }
+        if (Task.getStaticTask(getCurrentTask())?.inputs?.length > 1)
+            return trials?.map(trial => trial.inputs);
+        const allInputs = trials?.map(trial => trial.inputs).flat();
+        const uniqueInputs = allInputs?.filter((input, i, a) => a.findIndex(t => t.src === input.src) === i);
+        return uniqueInputs;
+    };
 
     const getModelsFromTrials = () => {
         return trials.map(t => t.model);
-    }
+    };
 
     useEffect(() => {
-        getExperiment(props.match.params.experimentId);
+        getExperiment(experimentID);
 
         return () => {
             trialSubscriptions.forEach(s => s.unsubscribe());
@@ -79,7 +88,7 @@ export default function AddModelListContainer(props) {
 
     return (
         <ModelListContainer task={getCurrentTask()} hideTaskFilters add={true} runModels={(selectedModels) => {
-            runModels(selectedModels)
-        }} selectedModels={getModelsFromTrials()}/>
-    )
+            runModels(selectedModels);
+        }} selectedModels={getModelsFromTrials()} />
+    );
 }
diff --git a/src/routes/ExperimentDetailContainer.js b/src/routes/ExperimentDetailContainer.js
index 73d12282..f360c718 100644
--- a/src/routes/ExperimentDetailContainer.js
+++ b/src/routes/ExperimentDetailContainer.js
@@ -1,10 +1,11 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import ExperimentDetailPage from "../components/ExperimentDetails/ExperimentDetailPage";
 import GetApiHelper from "../helpers/api";
 import Task from "../helpers/Task";
-import {image_classification} from "../helpers/TaskIDs";
+import { image_classification } from "../helpers/TaskIDs";
 import MultipleSort from "../helpers/MultipleSort";
 import { useParams } from "react-router-dom/dist";
+import { getTaskFromQueryString } from "../helpers/QueryParsers";
 
 
 export const ExperimentDetailModalTypes = {
@@ -14,7 +15,7 @@ export const ExperimentDetailModalTypes = {
     inputCannotBeRemoved: "INPUT_CANNOT_BE_REMOVED",
     confirmDeleteInput: "INPUT_DELETE_CONFIRM",
     addInput: "INPUT_ADD"
-}
+};
 
 const trialSubscriptions = [];
 let experimentSubscription = null;
@@ -22,6 +23,7 @@ let experimentSubscription = null;
 export default function ExperimentDetailContainer(props) {
     const api = GetApiHelper();
     const { experimentId } = useParams();
+    const task = getTaskFromQueryString(window.location.search);
 
     const [state, updateState] = useState({
         experiment: null,
@@ -33,15 +35,12 @@ export default function ExperimentDetailContainer(props) {
     });
 
     const setState = (newState) => {
-        updateState(s => ({...s, ...newState}));
-    }
+        updateState(s => ({ ...s, ...newState }));
+    };
 
 
-    const getTask = () => {
-        if (state.trials && state.trials.length > 0)
-            return Task.getStaticTask(state.trials[0].model.output.type);
-        return Task.getStaticTask(image_classification);
-    }
+    const getTask = () => Task.getStaticTask(task);
+    const hasMultipleInputs = getTask()?.inputs?.length > 1;
 
     useEffect(() => {
         getExperiment();
@@ -51,35 +50,44 @@ export default function ExperimentDetailContainer(props) {
 
             if (experimentSubscription)
                 experimentSubscription.unsubscribe();
-        }
-    }, [])
+        };
+    }, []);
 
     const getSelectedTrials = () => {
-        let filtered = state.trials.filter(trial => trial.inputs[0] === state.selectedInput);
-
+        let filtered = state?.trials;
+        if (hasMultipleInputs)
+            filtered = filtered?.filter(trial => {
+                return trial.inputs === state.selectedInput;
+            });
+        else
+            filtered = filtered?.filter(trial => trial.inputs[0].src === state.selectedInput.src);
         const sortingOptions = [
             (a) => a.model.name,
             (a) => a.model.framework.name
-        ]
+        ];
 
         return MultipleSort(filtered, sortingOptions);
-    }
+    };
     const getInputs = () => {
-        return state.trials.filter((t, i, a) => a.findIndex(tr => tr.inputs[0] === t.inputs[0]) === i).map(trial => trial.inputs[0]);
-    }
+        if (hasMultipleInputs)
+            return state?.trials?.map(trial => trial.inputs);
+        const allInputs = state?.trials?.map(trial => trial.inputs).flat();
+        const uniqueInputs = allInputs?.filter((input, i, a) => a.findIndex(t => t.src === input.src) === i);
+        return uniqueInputs;
+    };
     const makeExperiment = () => {
         return {
             id: state.experiment ? state.experiment.id : null,
             trials: getSelectedTrials(),
-        }
-    }
-    const updateInput = (newInput) => setState({selectedInput: newInput});
+        };
+    };
+    const updateInput = (newInput) => setState({ selectedInput: newInput });
     const getTrials = (experiment) => {
         experiment.trials.forEach(trial => {
             addTrial(trial.id);
-        })
-    }
-    const showAddInputModal = () => setState({modalType: ExperimentDetailModalTypes.addInput})
+        });
+    };
+    const showAddInputModal = () => setState({ modalType: ExperimentDetailModalTypes.addInput });
     const showDeleteModal = (trial, modalType) => {
         const isForDeletingModel = modalType === ExperimentDetailModalTypes.confirmDeleteModel;
         const canDelete = isForDeletingModel ? getUniqueModels().length > 1 : getInputs().length > 1;
@@ -94,33 +102,34 @@ export default function ExperimentDetailContainer(props) {
                 modalType: isForDeletingModel ?
                     ExperimentDetailModalTypes.modelCannotBeRemoved :
                     ExperimentDetailModalTypes.inputCannotBeRemoved
-            })
+            });
         }
-    }
+    };
     const cancelDeleteTrial = () => {
         setState({
             trialToDelete: null,
             modalType: ExperimentDetailModalTypes.none
         });
-    }
+    };
     const getModelOutputType = () => {
         let modelOutputType = "";
         if (state.trials.length > 0)
             modelOutputType = state.trials[0].model.output.type;
         return modelOutputType;
-    }
+    };
     const getUniqueModels = () => {
         return state.trials.filter((t, i, a) => a.findIndex(tr => tr.model.id === t.model.id) === i).map(trial => trial.model.id);
-    }
-    const runTrial = async (modelId, input, context=null) => {
-        let fauxModel = {id: modelId, output: {type: getModelOutputType()}};
+    };
+    const runTrial = async (modelId, input, context = null) => {
+
+        let fauxModel = { id: modelId, output: { type: getModelOutputType() } };
 
         // Note: Adding context param for Conversation task; unsure if needed here
         // Check and confirm later - Alex, 4/10/2024
         let trial = await api.runTrial(fauxModel, input, state.experiment.id, context);
 
         addTrial(trial.trialId);
-    }
+    };
     const addTrial = (trialId) => {
         if (!trialSubscriptions[trialId]) {
             trialSubscriptions[trialId] = api.getTrial(trialId).subscribe({
@@ -135,26 +144,48 @@ export default function ExperimentDetailContainer(props) {
                             trials[currentIndex] = trialOutput;
                         }
 
-                        setState({trials, selectedInput: state.selectedInput || trialOutput.inputs[0]});
+                        setState({ trials, selectedInput: state.selectedInput || (hasMultipleInputs ? trialOutput.inputs : trialOutput.inputs.flat()[0]) });
                     }
 
                 }
-            })
+            });
         }
-    }
+    };
     const hasNoInputs = () => {
         const inputs = getInputs();
         return inputs.length === 0 || inputs[0] === "";
-    }
+    };
     const addInput = async (input) => {
         let inputs = Array.isArray(input) ? input : [input];
+        if (input.some(i => !i.src)) {
+            console.log("Invalid input");
+            return;
+        }
+
+        // removing inputs that are already in the experiment
+        if (!hasMultipleInputs) {
+            inputs = inputs.filter(input => !getInputs()?.some(i => i.src === input.src));
+            if (inputs.length === 0) {
+                setState({ modalType: ExperimentDetailModalTypes.none });
+                return;
+            }
+        }
+        else if (hasMultipleInputs && getInputs()?.some(i => i.every((v, i) => v.src === input[i].src && v.inputType === input[i].inputType))) {
+            return;
+        }
+
+
+        // single input and multiple inputs have different formats
+        if (hasMultipleInputs)
+            inputs = [inputs];
+        else
+            inputs = inputs.map(input => [input]);
 
         if (props.addInput) {
             props.addInput(inputs);
             return;
         }
 
-
         const models = getUniqueModels();
         const storedInputs = getInputs();
         let modelPromises = [];
@@ -163,13 +194,13 @@ export default function ExperimentDetailContainer(props) {
                 modelPromises = models.map(model => runTrial(model, input));
         });
         await Promise.all(modelPromises);
-        setState({selectedInput: inputs[0]});
+        setState({ selectedInput: hasMultipleInputs ? inputs[0] : inputs.flat()[0] });
 
         if (hasNoInputs())
             await removeTrials((trial) => !trial.inputs || trial.inputs[0] === "");
-    }
+    };
     const confirmDeleteModel = async () => {
-        setState({trialIsDeleting: true});
+        setState({ trialIsDeleting: true });
         setTimeout(async () => {
             const trial = state.trialToDelete;
             try {
@@ -182,28 +213,28 @@ export default function ExperimentDetailContainer(props) {
                 });
             }
         }, 500);
-    }
+    };
     const showDeleteInputModal = (input) => {
         if (getInputs().length > 1) {
-            const fauxTrial = {inputs: [input]};
-            setState({trialToDelete: fauxTrial, modalType: ExperimentDetailModalTypes.confirmDeleteInput});
+            const fauxTrial = { inputs: [input] };
+            setState({ trialToDelete: fauxTrial, modalType: ExperimentDetailModalTypes.confirmDeleteInput });
         } else {
-            setState({modalType: ExperimentDetailModalTypes.inputCannotBeRemoved})
+            setState({ modalType: ExperimentDetailModalTypes.inputCannotBeRemoved });
         }
 
-    }
+    };
     const deleteInput = async () => {
-        setState({trialIsDeleting: true});
+        setState({ trialIsDeleting: true });
         setTimeout(async () => {
             const trial = state.trialToDelete;
             const input = trial.inputs[0];
             try {
                 await removeTrials((t) => t.inputs[0] === input);
                 if (state.selectedInput === input) {
-                    let firstRemainingInput = state.trials.filter(t => t.inputs[0] !== input)[0].inputs[0];
+                    let firstRemainingInput = state.trials.filter(t => t.inputs[0].src !== input)[0].inputs[0].src;
                     setState({
                         selectedInput: firstRemainingInput
-                    })
+                    });
                 }
             } catch (err) {
                 console.error(err);
@@ -212,28 +243,28 @@ export default function ExperimentDetailContainer(props) {
                     trialToDelete: null
                 });
             }
-        }, 500)
-    }
+        }, 500);
+    };
     const confirmModelCannotBeRemoved = () => {
         setState({
             modalType: ExperimentDetailModalTypes.none
         });
-    }
+    };
     const getExperiment = async () => {
         if (props.experiment) {
             setState({
                 trials: props.experiment.trials,
-                experiment: {id: props.experiment.id}
-            })
+                experiment: { id: props.experiment.id }
+            });
         } else {
             experimentSubscription = api.getExperiment(experimentId).subscribe({
                 next: experiment => {
                     getTrials(experiment);
-                    setState({experiment});
+                    setState({ experiment });
                 }
             });
         }
-    }
+    };
     const removeTrials = async (predicate) => {
         const trialsToRemove = state.trials.filter(predicate);
         let promises = trialsToRemove.map(async trial => {
@@ -249,27 +280,28 @@ export default function ExperimentDetailContainer(props) {
             trialToDelete: null,
             modalType: ExperimentDetailModalTypes.none
         });
-    }
+    };
 
     return (
         <ExperimentDetailPage experiment={makeExperiment()}
-                              onDeleteTrial={showDeleteModal}
-                              onCancelDeleteTrial={cancelDeleteTrial}
-                              onConfirmDeleteTrial={confirmDeleteModel}
-                              trialIsDeleting={state.trialIsDeleting}
-                              onConfirmModelCannotBeRemoved={confirmModelCannotBeRemoved}
-                              showModelCannotBeRemoved={state.showModelCannotBeRemoved}
-                              trialToDelete={state.trialToDelete}
-                              inputs={getInputs()}
-                              addInput={addInput}
-                              updateInput={updateInput}
-                              getAddModelsLink={() => `/experiment/${state.experiment?.id}/add-models`}
-                              deleteInput={deleteInput}
-                              modalType={state.modalType}
-                              showAddInputModal={showAddInputModal}
-                              selectedInput={state.selectedInput}
-                              showDeleteInputModal={showDeleteInputModal}
-                              task={getTask()}
+            onDeleteTrial={showDeleteModal}
+            onCancelDeleteTrial={cancelDeleteTrial}
+            onConfirmDeleteTrial={confirmDeleteModel}
+            trialIsDeleting={state.trialIsDeleting}
+            onConfirmModelCannotBeRemoved={confirmModelCannotBeRemoved}
+            showModelCannotBeRemoved={state.showModelCannotBeRemoved}
+            trialToDelete={state.trialToDelete}
+            inputs={getInputs()}
+            addInput={addInput}
+            updateInput={updateInput}
+            getAddModelsLink={() => `/experiment/${state.experiment?.id}/add-models?task=${task}`}
+            deleteInput={deleteInput}
+            modalType={state.modalType}
+            showAddInputModal={showAddInputModal}
+            selectedInput={state.selectedInput}
+            showDeleteInputModal={showDeleteInputModal}
+            task={getTask()}
+            hasMultipleInputs={hasMultipleInputs}
         />
-    )
-}
+    );
+};
diff --git a/src/routes/NewExperimentContainer.js b/src/routes/NewExperimentContainer.js
index 25880ad5..4751ec2b 100644
--- a/src/routes/NewExperimentContainer.js
+++ b/src/routes/NewExperimentContainer.js
@@ -1,10 +1,10 @@
-import React, {useMemo, useState} from "react";
+import React, { useMemo, useState } from "react";
 import ModelListContainer from "./ModelListContainer";
 import GetApiHelper from "../helpers/api";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Task from "../helpers/Task";
 import ExperimentDetailContainer from "./ExperimentDetailContainer";
-import {getTaskFromQueryString} from "../helpers/QueryParsers";
+import { getTaskFromQueryString } from "../helpers/QueryParsers";
 
 const modelListPage = "MODEL_LIST";
 const experimentPage = "EXPERIMENT";
@@ -17,27 +17,27 @@ export default function NewExperimentContainer(props) {
   const history = useNavigate();
   const task = getTaskFromQueryString(window.location.search);
 
-  const {id: taskId} = Task.getStaticTask(task);
+  const { id: taskId } = Task.getStaticTask(task);
   const selectModels = (selectedModels) => {
     setCurrentPage(experimentPage);
     setModels(selectedModels);
-  }
+  };
 
-  const runModel = (model, inputs, experimentId, context=null) => {
+  const runModel = (model, inputs, experimentId, context = null) => {
     // Note: Adding context param for Conversation task; unsure if needed here
     // Check and confirm later - Alex, 4/10/2024
     return inputs.map(input => api.runTrial(model, input, experimentId, context));
-  }
+  };
 
   const fabricateModel = (model) => ({
     model: model,
     inputs: [""]
-  })
+  });
 
   const fabricateExperiment = () => ({
     id: "i'm not real",
-    trials: models.map(fabricateModel)
-  })
+    // trials: models.map(fabricateModel)
+  });
 
   const runModels = async (inputs) => {
     const [first, ...rest] = models;
@@ -55,20 +55,20 @@ export default function NewExperimentContainer(props) {
 
     Promise.all(flattenedPromises).then(final => {
       if (history)
-        history(`/experiment/${experimentId}`);
-    })
-  }
+        history(`/experiment/${experimentId}?task=${task}`);
+    });
+  };
 
 
   if (currentPage === experimentPage)
     return <ExperimentDetailContainer
       addInput={runModels}
       experiment={fabricateExperiment()}
-    />
+    />;
 
   return <ModelListContainer
     add runModels={selectModels} selectedModels={[]}
     hideTaskFilters
     task={taskId}
-  />
+  />;
 }