diff --git a/frontend/src/components/ui/fileinput.tsx b/frontend/src/components/ui/fileinput.tsx
new file mode 100644
index 0000000..413f838
--- /dev/null
+++ b/frontend/src/components/ui/fileinput.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function FileInput({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<"input">) {
+  const [selectedFile, setSelectedFile] = React.useState("No file chosen");
+
+  const { id, ...rest } = props;
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      setSelectedFile(event.target.files[0].name);
+    } else {
+      setSelectedFile("No file chosen");
+    }
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        data-slot="input"
+        className={cn(className)}
+        onChange={handleFileChange}
+        {...props}
+      />
+    </>
+  );
+}
+
+export { FileInput };
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..63b4213
--- /dev/null
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "mb-2 flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}