diff --git a/docker-compose.yml b/docker-compose.yml
index 12eec75..c4558f2 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -107,10 +107,11 @@ services:
       - POSTGRES_USER=root
       - POSTGRES_PASSWORD=root
       - POSTGRES_DB=orca
+      # - PGDATA=/var/lib/postgresql/data/some_name/
     ports:
       - "5433:5432"
     volumes:
-      - ./data:/var/lib/postgresql/data
+      - ./data/pg-data:/var/lib/postgresql/data
     container_name: postgres-ser
 
   ### Redis ################################################
diff --git a/web/src/core/components/dropdown/dropdown.css b/web/src/core/components/dropdown/dropdown.css
new file mode 100644
index 0000000..1735f7d
--- /dev/null
+++ b/web/src/core/components/dropdown/dropdown.css
@@ -0,0 +1,100 @@
+.dropdown {
+    position: relative;
+    color: #333;
+    cursor: default;
+  }
+  
+  .dropdown .arrow {
+    border-color: #999 transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    content: " ";
+    display: block;
+    height: 0;
+    margin-top: 0.3rem;
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    width: 0;
+  }
+  
+  .dropdown .arrow.open {
+    border-color: transparent transparent #999;
+    border-width: 0 5px 5px;
+  }
+  
+ .input {
+    line-height: 1.5;
+    font-size: 1rem;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    box-sizing: border-box;
+    cursor: default;
+    outline: none;
+    padding: 8px 52px 8px 10px;
+    transition: all 200ms ease;
+    width: 100%;
+  }
+  
+  .dropdown .options {
+    display: none;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+    box-sizing: border-box;
+    margin-top: -1px;
+    max-height: 200px;
+    overflow-y: auto;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 1000;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .dropdown .options.open {
+    display: block;
+  }
+  
+  .dropdown .option {
+    box-sizing: border-box;
+    color: rgba(51, 51, 51, 0.8);
+    cursor: pointer;
+    display: block;
+    padding: 8px 10px;
+  }
+  
+  .dropdown .option.selected,
+  .dropdown .option:hover {
+    background-color: #f2f9fc;
+    color: #333;
+  }
+
+  .close {
+    position: absolute;
+    right: 40px;
+    top: 14px;
+    width: 16px;
+    height: 16px;
+    opacity: 0.3;
+  }
+  .close:hover {
+    opacity: 1;
+  }
+  .close:before, .close:after {
+    position: absolute;
+    left: 15px;
+    content: ' ';
+    height: 16px;
+    width: 2px;
+    background-color: #333;
+  }
+  .close:before {
+    transform: rotate(45deg);
+  }
+  .close:after {
+    transform: rotate(-45deg);
+  }
+  
+  
\ No newline at end of file
diff --git a/web/src/core/components/dropdown/index.jsx b/web/src/core/components/dropdown/index.jsx
new file mode 100644
index 0000000..0d7f686
--- /dev/null
+++ b/web/src/core/components/dropdown/index.jsx
@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import "./dropdown.css";
+
+
+
+export const SearchableDropdown = ({
+  options,
+  label,
+  id,
+  selectedValue,
+  handleChange
+}) => {
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    document.addEventListener("click", toggle);
+    return () => document.removeEventListener("click", toggle);
+  }, []);
+
+  const selectOption = (option) => {
+    setQuery(() => "");
+    handleChange(option);
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  function toggle(e) {
+    setIsOpen(e && e.target === inputRef.current);
+  }
+
+  const getDisplayValue = () => {
+    if (query) return query;
+    if (selectedValue) return selectedValue[label] || "";
+
+    return "";
+  };
+
+  const filter = (options) => {
+    return options.filter(
+      (option) => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1
+    );
+  };
+
+  return (
+    <div className="dropdown">
+      <div className="control">
+        <div className="selected-value">
+          <input
+            ref={inputRef}
+            className="input"
+            type="text"
+            value={getDisplayValue()}
+            name="searchTerm"
+            onChange={(e) => {
+              setQuery(e.target.value);
+              handleChange(null);
+            }}
+            onClick={toggle}
+          />
+        </div>
+        {selectedValue[label] && <div className="close" onClick={() => handleChange({})}/>}
+        <div className={`arrow ${isOpen ? "open" : ""}`}></div>
+      </div>
+
+      <div className={`options ${isOpen ? "open" : ""}`}>
+        {filter(options).map((option, index) => {
+          return (
+            <div
+              role="option"
+              onClick={() => selectOption(option)}
+              className={`option ${
+                option === selectedValue ? "selected" : ""
+              }`}
+              key={`${id}-${index}`}
+            >
+              {option[label]}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+SearchableDropdown.propTypes = {
+    options: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+    id: PropTypes.string,
+    selectedValue: PropTypes.object,
+    handleChange: PropTypes.func
+  };
+
+
+
diff --git a/web/src/core/components/flow/components/new.tsx b/web/src/core/components/flow/components/new.tsx
index 7cbb62e..1d7da8f 100644
--- a/web/src/core/components/flow/components/new.tsx
+++ b/web/src/core/components/flow/components/new.tsx
@@ -11,21 +11,21 @@ import { shallow } from "zustand/shallow";
 
 export const New: React.FC<any> = () => {
   let options = [
-    {
-      key: "loop",
-      label: "Loop",
-      icon: <ArrowPathRoundedSquareIcon className="h-5 w-5 text-gray-400" />
-    },
-    {
-      key: "ifcondition",
-      label: "If Condidion",
-      icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
-    },
-    {
-      key: "block",
-      label: "Block",
-      icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
-    },
+    // {
+    //   key: "loop",
+    //   label: "Loop",
+    //   icon: <ArrowPathRoundedSquareIcon className="h-5 w-5 text-gray-400" />
+    // },
+    // {
+    //   key: "ifcondition",
+    //   label: "If Condidion",
+    //   icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
+    // },
+    // {
+    //   key: "block",
+    //   label: "Block",
+    //   icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
+    // },
     {
       key: "action_group",
       label: "Action group",
diff --git a/web/src/core/components/flow/form.tsx b/web/src/core/components/flow/form.tsx
index 0f66a84..8e818a3 100644
--- a/web/src/core/components/flow/form.tsx
+++ b/web/src/core/components/flow/form.tsx
@@ -1,10 +1,10 @@
-import {Service} from "service";
-import {Select as OSelect} from "core/components/select";
-import {Endpoint} from "service/endpoint";
-import React, {useEffect, useState} from "react";
-import {useFlowStore} from "stores/flow.store";
-import {shallow} from "zustand/shallow";
-import {useParams} from "react-router-dom";
+import { Service } from "service";
+import { Endpoint } from "service/endpoint";
+import { useEffect, useState } from "react";
+import { useFlowStore } from "stores/flow.store";
+import { shallow } from "zustand/shallow";
+import { useParams } from "react-router-dom";
+import  { SearchableDropdown } from "core/components/dropdown/index.jsx";
 
 export interface WorkflowFormParm {
     title: string;
@@ -14,6 +14,7 @@ export const WorkflowForm: React.FC<WorkflowFormParm> = ({title}) => {
     const [obj, setObject] = useState({} as any);
     const {appId = ""} = useParams();
     const [dataSource, setDataSource] = useState([] as any);
+    const [actionGroup, setActionGroup] = useState({});
     const {nodes, edges, currentNode} = useFlowStore(
         (state: any) => ({
             nodes: state.nodes,
@@ -46,47 +47,27 @@ export const WorkflowForm: React.FC<WorkflowFormParm> = ({title}) => {
         // console.log(currentNode);
     }, []);
 
-    return (
-        <>
-            <div className="pl-4 py-4 shadow-md lg:flex lg:items-center lg:justify-between">
-                <div className="min-w-0">
-                    <h2 className="text-lg font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight">
-                        {obj.name}
-                    </h2>
-                </div>
-            </div>
-            <div className="flex w-full">
-                <OSelect
-                    buttonClassName="relative w-full cursor-default bg-transparent py-1.5 pl-3 pr-10 text-left text-gray-900  ring-inset  focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6"
-                    options={dataSource || []}
-                    dataIndex="id"
-                    defaultValue={obj["id"]}
-                    onSelect={(value: any) => {
-                        console.log(value);
-                        // row["kind"] = value["key"];
-                    }}
-                    render={(row: any) => {
-                        return <span className="ml-3 block truncate">{row["name"]}</span>;
-                    }}
-                ></OSelect>
-                {/* <SearchSelect /> */}
-                {/* <select defaultValue={obj.id}>
-          <option value="">Select Option</option>
-          {(dataSource || []).map((item: any) => {
-            return <option key={item.id}>{item.name}</option>;
-          })}
-        </select> */}
-                {/* <Flex gap="3">
-          <Select.Root defaultValue={obj.id} key={"selectId"}>
-            <Select.Trigger />
-            <Select.Content>
-              {(dataSource || []).map((item: any) => {
-                return <Select.Item value={item.id}>{item.name}</Select.Item>;
-              })}
-            </Select.Content>
-          </Select.Root>
-        </Flex> */}
-            </div>
-        </>
-    );
+  return (
+    <>
+      <div className="pl-4 py-4 shadow-md lg:flex lg:items-center lg:justify-between">
+        <div className="min-w-0">
+          <h2 className="text-lg font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight">
+            {obj.name}
+          </h2>
+        </div>
+      </div>
+      <div className="">
+      <div className="font-bold p-4 text-gray-900"> Select action group</div>
+      <SearchableDropdown
+        options={dataSource || []}
+        label="name"
+        id="id"
+        selectedValue={actionGroup}
+        handleChange={(val: any) => {
+          setActionGroup(val)
+        }}
+      />
+      </div>
+    </>
+  );
 };
diff --git a/web/src/core/components/flow/node/new.tsx b/web/src/core/components/flow/node/new.tsx
index 86fb1a9..4c4da13 100644
--- a/web/src/core/components/flow/node/new.tsx
+++ b/web/src/core/components/flow/node/new.tsx
@@ -27,21 +27,21 @@ type MyObject = { [key: string]: () => any };
 
 export const NewNode: React.FC<NodeProps> = ({ data, xPos, yPos }) => {
   const options: Array<Option> = [
-    {
-      key: "loop",
-      label: "Loop",
-      icon: <ArrowPathRoundedSquareIcon className="h-5 w-5 text-gray-400" />
-    },
-    {
-      key: "ifcondition",
-      label: "If Condidion",
-      icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
-    },
-    {
-      key: "assertion",
-      label: "Assertion",
-      icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
-    },
+    // {
+    //   key: "loop",
+    //   label: "Loop",
+    //   icon: <ArrowPathRoundedSquareIcon className="h-5 w-5 text-gray-400" />
+    // },
+    // {
+    //   key: "ifcondition",
+    //   label: "If Condidion",
+    //   icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
+    // },
+    // {
+    //   key: "assertion",
+    //   label: "Assertion",
+    //   icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
+    // },
     {
       key: "action_group",
       label: "Action group",
diff --git a/web/src/index.tsx b/web/src/index.tsx
index 957f031..eb02cc5 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -13,7 +13,6 @@ const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
-  <React.StrictMode>
     <Theme accentColor="blue" appearance="light" radius="medium">
       {/* <ThemeProvider defaultTheme="system" storageKey="ui-theme">
       <Theme
@@ -25,8 +24,6 @@ root.render(
       {/* <ThemePanel /> */}
       <App />
     </Theme>
-    {/* </ThemeProvider> */}
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/web/src/pages/app/test_case/index.tsx b/web/src/pages/app/test_case/index.tsx
index 26caa86..0c90cb9 100644
--- a/web/src/pages/app/test_case/index.tsx
+++ b/web/src/pages/app/test_case/index.tsx
@@ -16,6 +16,7 @@ import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Service } from "service";
 import { Endpoint } from "service/endpoint";
+import { fetchTestCases } from "service/app/test_case";
 
 export const TestCaseDashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -123,19 +124,15 @@ export const TestCaseDashboard: React.FC = () => {
 
   const updateTableInfo = (event: EventSource, field_id: string) => {};
 
-  /**
-   * fetchTestCase - fetch all Test case from the specify Application
-   */
-  const fetchTestCase = async () => {
-    await Service.get(`${Endpoint.v1.case.list(appId)}`)
-      .then((cases) => {
-        setDataSource(cases);
-      })
-      .finally(() => {});
-  };
+  const getCaseList = () => {
+    fetchTestCases(appId).then((cases: any) => {
+      setDataSource(cases);
+    })
+    .finally(() => {});
+  }
 
   useEffect(() => {
-    fetchTestCase();
+    getCaseList();
   }, []);
 
   /**
@@ -159,7 +156,7 @@ export const TestCaseDashboard: React.FC = () => {
       body: payload
     })
       .then((record: any) => {
-        fetchTestCase();
+        getCaseList();
       })
       .finally(() => {});
   };
@@ -171,7 +168,7 @@ export const TestCaseDashboard: React.FC = () => {
   const onDelete = async (caseId: any) => {
     await Service.delete(`${Endpoint.v1.case.delete(appId, caseId)}`)
       .then(() => {
-        fetchTestCase();
+        getCaseList();
       })
       .finally(() => {});
   };
diff --git a/web/src/service/app/action_group.ts b/web/src/service/app/action_group.ts
index 0e73f7e..0944250 100644
--- a/web/src/service/app/action_group.ts
+++ b/web/src/service/app/action_group.ts
@@ -15,8 +15,8 @@ export const fetchActions = async (
       return actions;
     })
     .catch((error) => {
-      console.log("fetch Actions failed with some reason =", error);
-      return [];
+      console.error("fetch Actions failed with some reason =", error);
+      return error;
     });
   return _actions;
 };
diff --git a/web/src/service/app/test_case.ts b/web/src/service/app/test_case.ts
new file mode 100644
index 0000000..900b810
--- /dev/null
+++ b/web/src/service/app/test_case.ts
@@ -0,0 +1,19 @@
+import { Service } from "..";
+import { Endpoint } from "../endpoint";
+
+// fetchTestCases - will get all the TestCase for specific Application
+export const fetchTestCases = async (
+  appId: string,
+) => {
+  let _actions = Service.get(
+    `${Endpoint.v1.case.list(appId)}`
+  )
+    .then((actions) => {
+      return actions;
+    })
+    .catch((error) => {
+      console.error("fetch Actions failed with some reason =", error);
+      return [];
+    });
+  return _actions;
+};
diff --git a/web/src/service/app/test_suit.ts b/web/src/service/app/test_suit.ts
new file mode 100644
index 0000000..aacfb7c
--- /dev/null
+++ b/web/src/service/app/test_suit.ts
@@ -0,0 +1,112 @@
+import { Service } from "..";
+import { Endpoint } from "../endpoint";
+
+// fetchTestSuite - will get all the Test Suite for specific Application
+export const fetchTestSuite = async (
+  appId: string,
+) => {
+  let _suites = Service.get(
+    `${Endpoint.v1.suite.list(appId)}`
+  )
+    .then((suites) => {
+      return suites;
+    })
+    .catch((error) => {
+      console.error("fetch Actions failed with some reason =", error);
+      return [];
+    });
+  return _suites;
+};
+
+
+// createNewSuit - Will create new Test case to the application
+export const createNewSuit = async (
+  appId: string,
+  name: string,
+  desc: string,
+) => {
+  let _suite = Service.post(
+    `${Endpoint.v1.suite.create(appId)}`, {
+      body: {name, description: desc}
+    }
+  )
+    .then((suite) => {
+      return suite;
+    })
+    .catch((error) => {
+      console.error("fetch Actions failed with some reason =", error);
+      return [];
+    });
+  return _suite;
+};
+
+
+// deleteSuite - will delete block to the application
+export const deleteSuite = async (
+  appId: string,
+  suiteId: string,
+) => {
+  let suiteItem = Service.delete(
+    `${Endpoint.v1.suite.itemList(appId, suiteId)}`
+  )
+    .then((suiteItem) => {
+      return suiteItem;
+    })
+    .catch((error) => {
+      console.error("fetch Actions failed with some reason =", error);
+      return [];
+    });
+  return suiteItem;
+};
+
+interface BatchItem {
+  id?: string,  //this need to be UUID
+  execution_order: number,
+  type: string, //"TestCase"
+  reference: string, //UUid
+  suite_id: string,
+}
+
+// batchUpdate - will batch block update new Test Suite to the application
+export const batchUpdate = async (
+  appId: string,
+  suiteId: string,
+  payload: Array<BatchItem>
+) => {
+  let batchItems = Service.post(
+    `${Endpoint.v1.suite.batchUpdate(appId, suiteId)}`, {
+      body: payload
+    }
+  )
+    .then((batchItems) => {
+      return batchItems;
+    })
+    .catch((error) => {
+      console.error("fetch Actions failed with some reason =", error);
+      return [];
+    });
+  return batchItems;
+};
+
+
+
+// listBlock - will list block for the speficed application and suiteId
+export const fetchSuiteItems = async (
+  appId: string,
+  suiteId: string,
+) => {
+  let suiteItem = Service.get(
+    `${Endpoint.v1.suite.itemList(appId, suiteId)}`
+  )
+    .then((suiteItem) => {
+      return suiteItem;
+    })
+    .catch((error) => {
+      console.error("fetch Actions failed with some reason =", error);
+      return [];
+    });
+  return suiteItem;
+};
+
+
+
diff --git a/web/src/service/endpoint.ts b/web/src/service/endpoint.ts
index 6b05f18..d6e1c18 100644
--- a/web/src/service/endpoint.ts
+++ b/web/src/service/endpoint.ts
@@ -24,7 +24,9 @@ export const Endpoint = {
       delete: (appId: string, suiteId: string) =>
         `/api/v1/app/${appId}/suite/${suiteId}`,
       itemList: (appId: string, suiteId: string) =>
-        `/api/v1/app/${appId}/suite/${suiteId}/detail`,
+        `/api/v1/app/${appId}/suite/${suiteId}/block`,
+      batchUpdate: (appId: string, suiteId: string) =>
+        `/api/v1/app/${appId}/suite/${suiteId}/batch/update`,
       itemCreate: (appId: string, suiteId: string) =>
         `/api/v1/app/${appId}/suite/${suiteId}/detail`
     },