diff --git a/.githooks/pre-commit b/.githooks/pre-commit
index f5008c586..ef67eaa37 100755
--- a/.githooks/pre-commit
+++ b/.githooks/pre-commit
@@ -1,2 +1,6 @@
+#!/bin/sh
 
-make format
\ No newline at end of file
+added_files=$(git diff --name-only --cached --diff-filter=d)
+
+make format
+git add ${added_files}
\ No newline at end of file
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index f5acd5a23..b06a58d9c 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -1,6 +1,6 @@
 import { Disclosure } from "@headlessui/react";
 import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
@@ -13,6 +13,7 @@ export default function ExtraSidebar() {
     extraNavigation,
     extraComponent,
   } = useContext(locationContext);
+
   return (
     <>
       <aside
@@ -21,10 +22,8 @@ export default function ExtraSidebar() {
         } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
       >
         <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
-          <div className="flex pt-1 px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 dark:text-white py-[2px] font-medium ">
-              {extraNavigation.title}
-            </span>
+          <div className="flex px-4 justify-between align-middle w-full">
+            <span className="text-gray-900 dark:text-white py-[2px] font-medium "></span>
           </div>
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index b88e13586..e8dbfbb6b 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,13 +1,20 @@
 import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
-import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
-import { useContext, useEffect, useState } from "react";
+import {
+  classNames,
+  nodeColors,
+  nodeIcons,
+  nodeNames,
+} from "../../../../utils";
+import { useContext, useEffect, useState, useRef } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import TooltipReact from "../../../../components/ReactTooltipComponent";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
+  const [dataFilter, setFilterData] = useState(data);
 
   function onDragStart(
     event: React.DragEvent<any>,
@@ -24,66 +31,102 @@ export default function ExtraSidebar() {
     event.dataTransfer.setData("json", JSON.stringify(data));
   }
 
+  function handleSearchInput(e: string) {
+    setFilterData((_) => {
+      let ret = {};
+      Object.keys(data).forEach((d: keyof APIObjectType, i) => {
+        ret[d] = {};
+        let keys = Object.keys(data[d]).filter((nd) =>
+          nd.toLowerCase().includes(e.toLowerCase())
+        );
+        keys.forEach((element) => {
+          ret[d][element] = data[d][element];
+        });
+      });
+      return ret;
+    });
+  }
+
   return (
-    <div className="mt-1 w-full">
-      {Object.keys(data)
-        .sort()
-        .map((d: keyof APIObjectType, i) => (
-          <DisclosureComponent
-            key={i}
-            button={{
-              title: nodeNames[d] ?? nodeNames.unknown,
-              Icon: nodeIcons[d] ?? nodeIcons.unknown,
-            }}
-          >
-            <div className="p-2 flex flex-col gap-2">
-              {Object.keys(data[d])
-                .sort()
-                .map((t: string, k) => (
-                  <TooltipReact
-                    selector={t}
-                    htmlContent={t}
-                    position="right"
-                    delayShow={1500}
-                    key={k}
-                  >
-                    <div key={k} data-tooltip-id={t}>
-                      <div
-                        draggable
-                        className={" cursor-grab border-l-8 rounded-l-md"}
-                        style={{
-                          borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
-                        }}
-                        onDragStart={(event) =>
-                          onDragStart(event, {
-                            type: t,
-                            node: data[d][t],
-                          })
-                        }
-                        onDragEnd={() => {
-                          document.body.removeChild(
-                            document.getElementsByClassName(
-                              "cursor-grabbing"
-                            )[0]
-                          );
-                        }}
+    <>
+      <div className="relative mt-2 flex items-center mb-2 mx-2">
+        <input
+          type="text"
+          name="search"
+          id="search"
+          placeholder="Search nodes"
+          className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
+          onChange={(e) => {
+            handleSearchInput(e.target.value);
+          }}
+        />
+        <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
+          <MagnifyingGlassIcon className="h-5 w-5 dark:text-white"></MagnifyingGlassIcon>
+        </div>
+      </div>
+
+      <div className="mt-1 w-full">
+        {Object.keys(dataFilter)
+          .sort()
+          .map((d: keyof APIObjectType, i) =>
+            Object.keys(dataFilter[d]).length > 0 ? (
+              <DisclosureComponent
+                key={i}
+                button={{
+                  title: nodeNames[d] ?? nodeNames.unknown,
+                  Icon: nodeIcons[d] ?? nodeIcons.unknown,
+                }}
+              >
+                <div className="p-2 flex flex-col gap-2">
+                  {Object.keys(dataFilter[d])
+                    .sort()
+                    .map((t: string, k) => (
+                      <TooltipReact
+                        selector={t}
+                        htmlContent={t}
+                        position="right"
+                        delayShow={1500}
+                        key={k}
                       >
-                        <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-                          <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
-                            {t}
-                          </span>
-                          <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                        <div key={k} data-tooltip-id={t}>
+                          <div
+                            draggable
+                            className={" cursor-grab border-l-8 rounded-l-md"}
+                            style={{
+                              borderLeftColor:
+                                nodeColors[d] ?? nodeColors.unknown,
+                            }}
+                            onDragStart={(event) =>
+                              onDragStart(event, {
+                                type: t,
+                                node: data[d][t],
+                              })
+                            }
+                            onDragEnd={() => {
+                              document.body.removeChild(
+                                document.getElementsByClassName(
+                                  "cursor-grabbing"
+                                )[0]
+                              );
+                            }}
+                          >
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
+                                {t}
+                              </span>
+                              <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                  </TooltipReact>
-                ))}
-              {Object.keys(data[d]).length === 0 && (
-                <div className="text-gray-400 text-center">Coming soon</div>
-              )}
-            </div>
-          </DisclosureComponent>
-        ))}
-    </div>
+                      </TooltipReact>
+                    ))}
+                </div>
+              </DisclosureComponent>
+            ) : (
+              <div key={i}></div>
+            )
+          )}
+      </div>
+    </>
   );
 }