diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx
new file mode 100644
index 0000000..730d656
--- /dev/null
+++ b/app/src/components/ui/inputs/InputWithDropDown.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+
+type InputWithDropDownProps = {
+  label: string;
+  value: string;
+  options?: string[]; // Array of dropdown options
+  activeOption?: string; // The currently active dropdown option
+};
+
+const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
+  label,
+  value,
+  options,
+  activeOption,
+}) => {
+  const separatedWords = label
+    .split(/(?=[A-Z])/)
+    .map((word) => word.trim())
+    .toString();
+
+  const [openDropdown, setOpenDropdown] = useState(false);
+
+  return (
+    <div className="value-field-container">
+      <label htmlFor={separatedWords} className="label">
+        {label}
+      </label>
+      <div className="input default" id={separatedWords}>
+        <input type="text" defaultValue={value} />
+
+        <div
+          className="dropdown"
+          onClick={() => {
+            setOpenDropdown(true);
+          }}
+        >
+          <div className="active-option">{activeOption}</div>
+          {options && openDropdown && (
+            <div className="dropdown-options-list">
+              {options.map((option, index) => (
+                <div key={index} className={"dropdown-option"}>
+                  {option}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InputWithDropDown;
diff --git a/app/src/components/ui/inputs/LabledDropdown.tsx b/app/src/components/ui/inputs/LabledDropdown.tsx
new file mode 100644
index 0000000..5c5a18a
--- /dev/null
+++ b/app/src/components/ui/inputs/LabledDropdown.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import RegularDropDown from "./RegularDropDown";
+
+type LabledDropdownProps = {
+  defaultOption: string; // Initial active option
+  options: string[]; // Array of dropdown options
+};
+
+const LabledDropdown: React.FC<LabledDropdownProps> = ({ defaultOption, options }) => {
+  const [activeOption, setActiveOption] = useState(defaultOption); // State for active option
+
+  const handleSelect = (option: string) => {
+    setActiveOption(option); // Update the active option state
+  };
+
+  return (
+    <div className="value-field-container">
+      <div className="label">Type</div>
+      <RegularDropDown
+        header={activeOption} // Display the current active option
+        options={options} // Use the options from props
+        onSelect={handleSelect} // Handle option selection
+      />
+    </div>
+  );
+};
+
+export default LabledDropdown;
diff --git a/app/src/functions/handleResizePannel.ts b/app/src/functions/handleResizePannel.ts
new file mode 100644
index 0000000..e989e05
--- /dev/null
+++ b/app/src/functions/handleResizePannel.ts
@@ -0,0 +1,24 @@
+export const handleResize = (
+    e: React.MouseEvent<HTMLDivElement>,
+    containerRef: React.RefObject<HTMLDivElement | null>
+) => {
+    if (!containerRef.current) return; // Ensure containerRef is not null
+    const startY = e.clientY;
+    const startHeight = containerRef.current.offsetHeight;
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+        const newHeight = Math.max(
+            120,
+            Math.min(400, startHeight + moveEvent.clientY - startY)
+        );
+        containerRef.current!.style.height = `${newHeight}px`;
+    };
+
+    const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+};