diff --git a/public/css/style.css b/public/css/style.css
index 8d480adc..20984473 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1766,6 +1766,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-l-lg {
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -3373,6 +3377,11 @@ td {
   --tw-ring-color: rgb(204 126 254 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(172 45 254 / var(--tw-ring-opacity));
+}
+
 .active\:scale-75:active {
   --tw-scale-x: .75;
   --tw-scale-y: .75;
diff --git a/src/components/CFAdvancedSettings/CFAdvancedSettings.tsx b/src/components/CFAdvancedSettings/CFAdvancedSettings.tsx
index 177addb9..ac088e89 100644
--- a/src/components/CFAdvancedSettings/CFAdvancedSettings.tsx
+++ b/src/components/CFAdvancedSettings/CFAdvancedSettings.tsx
@@ -1,3 +1,5 @@
+import CFHostDirectories2 from "../CFHostDirectories2/CFHostDirectories2";
+// import CFDirectories from "../CFHostDirectories/CFHostDirectories";
 import CFPersistDirTags from "../CFPersistDirTags/CFPersistDirTags";
 import CFGrantDirTags from "../CFGrantDirTags/CFGrantDirTags";
 import { IDetails } from "../../interfaces/robotInterfaces";
@@ -7,8 +9,6 @@ import { FormikProps } from "formik/dist/types";
 import { ReactElement, useState } from "react";
 import CFSection from "../CFSection/CFSection";
 import Seperator from "../Seperator/Seperator";
-import CFHostDirectories2 from "../CFHostDirectories2/CFHostDirectories2";
-// import CFHostDirectories from "../CFHostDirectories/CFHostDirectories";
 
 interface ICFAdvancedSettings {
   formik: FormikProps<IDetails>;
@@ -32,11 +32,6 @@ export default function CFAdvancedSettings({
       }}
     >
       <div className="flex flex-col gap-8 px-4 pb-6 pt-2">
-        {/* <CFSection>
-          <CFHostDirectories />
-          <Seperator />
-        </CFSection> */}
-
         <CFSection gap={4}>
           <CFPersistDirTags formik={formik} disabled={disabled} />
           <Seperator />
@@ -47,6 +42,11 @@ export default function CFAdvancedSettings({
           <Seperator />
         </CFSection>
 
+        {/* <CFSection gap={4}>
+          <CFDirectories formik={formik} disabled={disabled} />
+          <Seperator />
+        </CFSection> */}
+
         <CFSection gap={4}>
           <CFHostDirectories2 formik={formik} disabled={disabled} />
           <Seperator />
diff --git a/src/components/CFDellButton/CFDellButton.tsx b/src/components/CFDellButton/CFDellButton.tsx
index 2db74bf9..3f2bdc68 100644
--- a/src/components/CFDellButton/CFDellButton.tsx
+++ b/src/components/CFDellButton/CFDellButton.tsx
@@ -1,5 +1,5 @@
-import React, { ReactElement } from "react";
-import { IoTrashBinOutline } from "react-icons/io5";
+import { ReactElement } from "react";
+import { MdRemoveCircleOutline } from "react-icons/md";
 
 interface ICFDellButton {
   disabled?: boolean;
@@ -16,7 +16,7 @@ export default function CFDellButton({
       onClick={onClick}
       className="transition-300 hover:scale-90"
     >
-      <IoTrashBinOutline color={disabled ? "gray" : "red"} size={18} />
+      <MdRemoveCircleOutline color={disabled ? "gray" : "red"} size={18} />
     </button>
   );
 }
diff --git a/src/components/CFDirectoriesSelectInput/CFDirectoriesSelectInput.tsx b/src/components/CFDirectoriesSelectInput/CFDirectoriesSelectInput.tsx
new file mode 100644
index 00000000..f3de3b77
--- /dev/null
+++ b/src/components/CFDirectoriesSelectInput/CFDirectoriesSelectInput.tsx
@@ -0,0 +1,119 @@
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { ReactElement, useEffect, useState } from "react";
+import useFunctions from "../../hooks/useFunctions";
+import InputError from "../InputError/InputError";
+import InfoTip from "../InfoTip/InfoTip";
+import { FormikProps } from "formik";
+import Select from "react-select";
+
+interface ICFDirectoriesSelectInput {
+  type?: "host" | "mount";
+  formik: FormikProps<IDetails>;
+  index?: number;
+  dataTut?: string;
+  labelName?: string;
+  labelInfoTip?: string;
+  rightTip?: boolean;
+  classNameContainer?: string;
+  classNameInput?: string;
+  inputError?: string;
+  inputTouched?: boolean;
+}
+
+export default function CFDirectoriesSelectInput({
+  type,
+  formik,
+  index,
+  dataTut,
+  labelName,
+  labelInfoTip,
+  rightTip,
+  classNameContainer,
+  classNameInput,
+  inputError,
+  inputTouched,
+}: ICFDirectoriesSelectInput): ReactElement {
+  const [selectableItems, setSelectableItems] = useState<string[]>([]);
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const [menuIsOpen, setMenuIsOpen] = useState<boolean>(false);
+  const { getFiles } = useFunctions();
+
+  useEffect(() => {
+    console.log("selectableItems", selectableItems);
+    console.log("selectedItems", selectedItems);
+  }, [selectableItems, selectedItems]);
+
+  useEffect(() => {
+    if (type === "host") {
+      formik.setFieldValue(
+        `hostDirectories.[${index}].hostDirectory`,
+        selectedItems?.join(""),
+      );
+    } else {
+      formik.setFieldValue(
+        `hostDirectories.[${index}].mountPath`,
+        selectedItems?.join(""),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, selectedItems, type]);
+
+  async function handleGetSelectableItems(paths?: string[]) {
+    const { items } = await getFiles(paths);
+
+    if (items?.length) {
+      setSelectableItems(
+        items
+          ?.filter((item: any) => item.isDir)
+          ?.map((item: any) => `/${item.name}`),
+      );
+    } else {
+      setSelectableItems([]);
+      setMenuIsOpen(false);
+    }
+  }
+
+  return (
+    <div data-tut={dataTut} className={classNameContainer}>
+      <div
+        className={`flex min-w-fit gap-1 pb-3 text-xs font-medium text-light-700 ${classNameInput}`}
+      >
+        {labelName}
+        <InfoTip content={labelInfoTip} rightTip={rightTip} />
+      </div>
+      <Select
+        menuIsOpen={menuIsOpen}
+        options={
+          selectableItems?.map((item) => ({
+            value: item,
+            label: selectedItems?.join() + item,
+          })) ?? []
+        }
+        onMenuOpen={() => {
+          handleGetSelectableItems(selectedItems);
+          setMenuIsOpen(true);
+        }}
+        onBlur={() => setMenuIsOpen(false)}
+        onChange={(selected) => {
+          if (selected) {
+            setSelectedItems([...selectedItems, selected.value]);
+            handleGetSelectableItems([...selectedItems, selected.value]);
+            setMenuIsOpen(true);
+          } else {
+            setSelectedItems([]);
+            handleGetSelectableItems();
+          }
+          console.log(selected);
+        }}
+        maxMenuHeight={160}
+        isSearchable
+        isClearable
+        className="text-xs"
+        classNamePrefix="text-xs"
+        placeholder="Select a directory..."
+        required
+      />
+      <InputError error={inputError} touched={inputTouched} />
+    </div>
+  );
+}
diff --git a/src/components/CFHostDirectories/CFHostDirectories.tsx b/src/components/CFHostDirectories/CFHostDirectories.tsx
index 70e3d81b..5b05bb5c 100644
--- a/src/components/CFHostDirectories/CFHostDirectories.tsx
+++ b/src/components/CFHostDirectories/CFHostDirectories.tsx
@@ -1,62 +1,52 @@
-import { ReactElement, useEffect, useState } from "react";
-import useFunctions from "../../hooks/useFunctions";
-import Select from "react-select";
+import { ReactElement } from "react";
+import CFDirectoriesInputGroup from "../CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup";
+import CFInfoBar from "../CFInfoBar/CFInfoBar";
+import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
+import { FormikProps } from "formik";
+import { IDetails } from "../../interfaces/robotInterfaces";
 
-export default function CFHostDirectories(): ReactElement {
-  const [menuIsOpen, setMenuIsOpen] = useState<boolean>(false);
-  const [selectableItems, setSelectableItems] = useState<string[]>([]);
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
-  const { getFiles } = useFunctions();
-
-  useEffect(() => {
-    handleGetSelectableItems();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    console.log("selectableItems", selectableItems);
-    console.log("selectedItems", selectedItems);
-  }, [selectableItems, selectedItems]);
-
-  async function handleGetSelectableItems(paths?: string[]) {
-    const { items } = await getFiles(paths || []);
-
-    if (items?.length) {
-      setSelectableItems(
-        items
-          ?.filter((item: any) => item.isDir)
-          ?.map((item: any) => `/${item.name}`),
-      );
-    } else {
-      setSelectableItems([]);
-      setMenuIsOpen(false);
-    }
-  }
+interface ICFDirectories {
+  formik: FormikProps<IDetails>;
+  disabled?: boolean;
+}
 
+export default function CFDirectories({
+  formik,
+  disabled,
+}: ICFDirectories): ReactElement {
   return (
-    <>
-      <Select
-        menuIsOpen={menuIsOpen}
-        options={
-          selectableItems?.map((item) => ({
-            value: item,
-            label: selectedItems?.join("") || item,
-          })) || []
-        }
-        onChange={(e) => {
-          if (e) {
-            handleGetSelectableItems([...selectedItems, e.value]);
-            setSelectedItems([...selectedItems, e.value]);
-          }
-        }}
-        onFocus={() => setMenuIsOpen(true)}
-        onBlur={() => setMenuIsOpen(false)}
-        value={{
-          value: selectedItems?.join("") || "",
-          label: selectedItems?.join("") || "",
+    <div>
+      <CFInfoBar
+        label="Host Directories:"
+        tip="You can link a directory on the host to the directory specified in the application here."
+        vertical
+      >
+        <div className="flex flex-col gap-2">
+          {formik.values.hostDirectories?.map((_, index) => {
+            return (
+              <CFDirectoriesInputGroup
+                key={index}
+                formik={formik}
+                disabled={disabled}
+                index={index}
+              />
+            );
+          })}
+        </div>
+      </CFInfoBar>
+
+      <CreateRobotFormAddButton
+        onClick={() => {
+          formik.setFieldValue("hostDirectories", [
+            ...formik.values.hostDirectories,
+            {
+              hostDirectory: "",
+              mountPath: "",
+            },
+          ]);
         }}
-        isClearable
+        disabled={disabled}
       />
-    </>
+    </div>
   );
 }
diff --git a/src/components/CFHostDirectories2/CFHostDirectories2.tsx b/src/components/CFHostDirectories2/CFHostDirectories2.tsx
index b61684bd..a29b23e9 100644
--- a/src/components/CFHostDirectories2/CFHostDirectories2.tsx
+++ b/src/components/CFHostDirectories2/CFHostDirectories2.tsx
@@ -1,5 +1,5 @@
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import CFHostDirectoriesInput from "../CFHostDirectoriesInput/CFHostDirectoriesInput";
+import CFHostDirectoriesInput from "../CFHostDirectoriesInput2/CFHostDirectoriesInput2";
 import { IDetails } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
diff --git a/src/components/CFHostDirectoriesInput/CFHostDirectoriesInput.tsx b/src/components/CFHostDirectoriesInput2/CFHostDirectoriesInput2.tsx
similarity index 100%
rename from src/components/CFHostDirectoriesInput/CFHostDirectoriesInput.tsx
rename to src/components/CFHostDirectoriesInput2/CFHostDirectoriesInput2.tsx
diff --git a/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx b/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx
new file mode 100644
index 00000000..b94de3f6
--- /dev/null
+++ b/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx
@@ -0,0 +1,59 @@
+import CFDirectoriesSelectInput from "../CFDirectoriesSelectInput/CFDirectoriesSelectInput";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import CFDellButton from "../CFDellButton/CFDellButton";
+import { ReactElement } from "react";
+import { FormikProps } from "formik";
+
+interface ICFDirectoriesInputGroup {
+  formik: FormikProps<IDetails>;
+  disabled?: boolean;
+  index: number;
+}
+
+export default function CFDirectoriesInputGroup({
+  formik,
+  disabled,
+  index,
+}: ICFDirectoriesInputGroup): ReactElement {
+  return (
+    <div className="flex w-full  gap-4 rounded-md border border-light-100 p-4 shadow-sm">
+      <CFDirectoriesSelectInput
+        type="host"
+        formik={formik}
+        index={index}
+        labelName="Host Directory:"
+        labelInfoTip="Select a directory on your host machine to share with the environment."
+        classNameContainer="w-full"
+        inputError={
+          // @ts-ignore
+          formik.errors.hostDirectories?.[index]?.hostDirectory
+        }
+        inputTouched={true}
+      />
+      <CFDirectoriesSelectInput
+        type="mount"
+        formik={formik}
+        index={index}
+        labelName="Mount Path:"
+        labelInfoTip="Select a directory on your host machine to share with the environment."
+        classNameContainer="w-full"
+        rightTip
+        inputError={
+          // @ts-ignore
+          formik.errors.hostDirectories?.[index]?.mountPath
+        }
+        inputTouched={true}
+      />
+      <div className="flex items-center justify-center pt-3 text-sm text-light-800">
+        <CFDellButton
+          disabled={disabled}
+          onClick={() => {
+            const hostDirectories = [...formik.values.hostDirectories];
+            hostDirectories.splice(index, 1);
+            formik.setFieldValue("hostDirectories", hostDirectories);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/FormInputText/FormInputText.tsx b/src/components/FormInputText/FormInputText.tsx
index 340d0473..f2d67312 100644
--- a/src/components/FormInputText/FormInputText.tsx
+++ b/src/components/FormInputText/FormInputText.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import InfoTip from "../InfoTip/InfoTip";
 import InputText from "../InputText/InputText";
 import InputError from "../InputError/InputError";
@@ -35,7 +35,7 @@ export default function FormInputText({
   return (
     <div data-tut={dataTut} className={classNameContainer}>
       <div
-        className={`text-light-700 flex min-w-fit gap-1 pb-3 text-xs font-medium ${classNameInput}`}
+        className={`flex min-w-fit gap-1 pb-3 text-xs font-medium text-light-700 ${classNameInput}`}
       >
         {labelName}
         <InfoTip content={labelInfoTip} rightTip={rightTip} />
diff --git a/src/components/InputText/InputText.tsx b/src/components/InputText/InputText.tsx
index 14a0649d..571ef467 100644
--- a/src/components/InputText/InputText.tsx
+++ b/src/components/InputText/InputText.tsx
@@ -36,7 +36,7 @@ export default function InputText({
   return (
     <div className="animate__animated animate__fadeIn relative">
       <label
-        className={`text-light-700 pointer-events-none absolute z-10 text-xs transition-all duration-300 ${
+        className={`pointer-events-none absolute z-10 text-xs text-light-700 transition-all duration-300 ${
           isFocused ? "-top-6 left-0 text-xs" : "left-3 top-2.5 text-sm"
         }`}
         htmlFor=""
@@ -46,9 +46,9 @@ export default function InputText({
       <input
         autoComplete="off"
         disabled={disabled}
-        className={`border-light-300 h-9 w-full rounded-md border p-3
+        className={`h-9 w-full rounded border border-light-300 p-3
       text-xs  outline-none
-       transition-all duration-500 focus:ring-2 focus:ring-primary disabled:cursor-not-allowed ${className}`}
+       transition-all duration-500 focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed ${className}`}
         type={type || "text"}
         name={name}
         value={value}
diff --git a/src/components/SidebarLists/RobotsList.tsx b/src/components/SidebarLists/RobotsList.tsx
index 1b205fcf..0d588f5f 100644
--- a/src/components/SidebarLists/RobotsList.tsx
+++ b/src/components/SidebarLists/RobotsList.tsx
@@ -19,6 +19,35 @@ export default function RobotsList({
   const [responseRobots, setResponseRobots] = useState<any>(undefined);
   const { selectedState } = useMain();
   const { getRobots } = useFunctions();
+  const [robotsStatus, setRobotsStatus] = useState<
+    {
+      virtual: string;
+      physical: string;
+    }[]
+  >([]);
+
+  useEffect(() => {
+    setRobotsStatus(
+      responseRobots?.map((robot: any, index: number) => {
+        const virtualStatus = robot.robotClusters.filter(
+          (robotCluster: any) =>
+            robotCluster.name === selectedState?.instance?.name,
+        )?.[0]?.robotStatus;
+
+        const physicalStatus = robot.robotClusters.filter(
+          (robotCluster: any) =>
+            robotCluster.name !== selectedState?.instance?.name,
+        )?.[0]?.robotStatus;
+
+        return {
+          virtual:
+            virtualStatus === "EnvironmentReady" ? "Ready" : virtualStatus,
+          physical:
+            physicalStatus === "EnvironmentReady" ? "Ready" : physicalStatus,
+        };
+      }),
+    );
+  }, [responseRobots, selectedState?.instance?.name]);
 
   useEffect(
     () => {
@@ -76,10 +105,10 @@ export default function RobotsList({
             !selectedState?.organization
               ? "Organization"
               : !selectedState?.roboticsCloud
-              ? "Robotics Cloud"
-              : !selectedState?.instance
-              ? "Instance"
-              : "Fleet"
+                ? "Robotics Cloud"
+                : !selectedState?.instance
+                  ? "Instance"
+                  : "Fleet"
           } to view ${envApplication ? "applications" : "robots"}.`}
         />
       ) : !Array.isArray(responseRobots) ? (
@@ -98,29 +127,13 @@ export default function RobotsList({
                   <div className="flex gap-2">
                     <div className="flex gap-1.5">
                       <span className="font-medium">Virtual:</span>
-                      <StateCell
-                        state={
-                          Array.isArray(robot?.robotClusters) &&
-                          robot?.robotClusters[0]?.robotStatus ===
-                            "EnvironmentReady"
-                            ? "Ready"
-                            : robot?.robotClusters[0]?.robotStatus
-                        }
-                      />
+                      <StateCell state={robotsStatus?.[index]?.virtual} />
                     </div>
                     {Array.isArray(robot?.robotClusters) &&
                       robot?.robotClusters.length > 1 && (
                         <div className="flex gap-1.5">
                           <span className="font-medium">Physical:</span>
-                          <StateCell
-                            state={
-                              Array.isArray(robot?.robotClusters) &&
-                              robot?.robotClusters[1]?.robotStatus ===
-                                "EnvironmentReady"
-                                ? "Ready"
-                                : robot?.robotClusters[1]?.robotStatus
-                            }
-                          />
+                          <StateCell state={robotsStatus?.[index]?.physical} />
                         </div>
                       )}
                   </div>
diff --git a/src/components/SidebarLists/SidebarListItem.tsx b/src/components/SidebarLists/SidebarListItem.tsx
index 4c3b101a..1892fd41 100644
--- a/src/components/SidebarLists/SidebarListItem.tsx
+++ b/src/components/SidebarLists/SidebarListItem.tsx
@@ -206,8 +206,8 @@ export default function SidebarListItem({
           }.svg`}
         />
         <div className="flex flex-col gap-1">
-          <p className="text-sm font-medium">{name}</p>
-          <p className="text-xs font-light">{description}</p>
+          <div className="text-sm font-medium">{name}</div>
+          <div className="text-xs font-light">{description}</div>
         </div>
       </div>
       {!notSelectable && (
diff --git a/src/components/TableInformationCells/StateCell.tsx b/src/components/TableInformationCells/StateCell.tsx
index 5d057b19..4e03cb76 100644
--- a/src/components/TableInformationCells/StateCell.tsx
+++ b/src/components/TableInformationCells/StateCell.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 
 interface IStateCell {
   state: string | undefined;
diff --git a/src/middlewares/axios.interceptor.openapi.ts b/src/middlewares/axios.interceptor.openapi.ts
index 51216509..6231b09e 100644
--- a/src/middlewares/axios.interceptor.openapi.ts
+++ b/src/middlewares/axios.interceptor.openapi.ts
@@ -3,8 +3,6 @@ import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 const axiosInterceptorOpenApi: any = axios.create({});
 
 axiosInterceptorOpenApi.interceptors.request.use((req: AxiosRequestConfig) => {
-  console.log("axios.request", req);
-
   const { tokens } = JSON.parse(localStorage.getItem("tokens") || "{}");
 
   if (tokens?.token) {
diff --git a/src/toolkit/RobotSlice.ts b/src/toolkit/RobotSlice.ts
index 23ed5324..d75ef78e 100644
--- a/src/toolkit/RobotSlice.ts
+++ b/src/toolkit/RobotSlice.ts
@@ -20,7 +20,6 @@ import {
   IdeleteRobotRequest,
 } from "../interfaces/robotInterfaces";
 import { isProduction } from "../helpers/envProvider";
-import axiosInterceptorOpenApi from "../middlewares/axios.interceptor.openapi";
 import axios from "axios";
 
 export const createRobot = createAsyncThunk(
@@ -380,9 +379,7 @@ export const getFiles = createAsyncThunk(
   "robot/getFiles",
   async (values: { paths?: string[] }) => {
     const response = await axios.get(
-      `${process.env.REACT_APP_FILE_MANAGER_URL}/api/resources${
-        values?.paths?.join("") || ""
-      }`,
+      `http://localhost:5500/api/resources${values?.paths?.join("") || ""}`,
       {
         headers: {
           "Access-Control-Allow-Origin": "*",